Frontend: Remove .stage-cell class in favor of a mini pipeline class

Description

Depends on #323356 (closed)

The .stage-cell is currently needed to render some of the mini pipeline styles and after removal of its HAML version, all the styles associated with it could move to a class that is only located in pipeline_mini_graph.vue.

  • Remove the .stage-cell in CSS or replace it by .mini-pipeline-graph.
    • Remove .stage-cell wrapper from _mini_pipeline_graph.html.haml
    • Update/Remove .stage-cell class at pipelines_table.vue/pipelines_table_row.vue
    • Update/Remove .stage-cell class at mr_widget_pipeline.vue
  • Move all CSS depending on .stage-cell to .mini-pipeline-graph
  • Move all mini pipeline CSS to ~/stylesheets/page_bundles/pipelines.scss.
    • app/assets/stylesheets/pages/merge_requests.scss
    • app/assets/stylesheets/page_bundles/pipelines.scss
  • Update feature specs
    • spec/features/merge_request/user_sees_pipelines_spec.rb

From MR

The following discussion from !55363 (merged) should be addressed:

  • @mrincon started a discussion: (+1 comment)

    NB: .stage-cell is a wrapper class that should be added to pipeline_mini_graph.vue, however this is a hard to do here as we have to support the HAML version of the mini pipeline.

    A future CSS refactor would fold .stage-cell into a the mini pipeline completely (or remove it).

Edited by Miguel Rincon