Pipeline Graph Restructure: New Stage Column and CSS Updates

What does this MR do?

This is the third MR in a series of MRs to restructure the main Pipeline Graph (see: #276949 (closed)).

It covers removing the old-style links in the main graph and the CSS adjustments that follow on these changes. It adds in the layout wrapper for the main graph. This will be used both here and by the CI Yaml Visualization (#263141 (closed)) in order to keep both graphs in sync, layout-wise.

The linked column views for upstream and downstream will follow in a subsequent MR.

Much of this work is behind the :graphql_pipeline_details flag, which is off. It does touch a few live components in terms of CSS, though.

Screenshots (strongly suggested)

	main graph	mini-dropdown
flag on
flag off

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines
• Merge request performance guidelines
• Style guides

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers

Related to #276949 (closed)

changed milestone to %13.7

added GraphQL devopsverify frontend grouppipeline authoring sectionops workflowin dev + 1 deleted label

	4 Warnings
	This merge request is quite big (more than 744 lines changed), please consider splitting it into multiple merge requests.
	263b9f11: Commits that change 30 or more lines across at least 3 files must describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	b0c8599f: Commits that change 30 or more lines across at least 3 files must describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	c957ddf1: Commits that change 30 or more lines across at least 3 files must describe these changes in the commit body. For more information, take a look at our Commit message guidelines.

1 Message

CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, run the following: bin/changelog -m 48498 "Pipeline Graph Restructure: New Stage Column and CSS Updates" If you want to create a changelog entry for GitLab EE, run the following instead: bin/changelog --ee -m 48498 "Pipeline Graph Restructure: New Stage Column and CSS Updates" If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category (e.g. frontend or backend), and by a maintainer in all other categories.

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited, or the chosen person is unavailable.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, mention them as you normally would! Danger does not automatically notify them for you.

Category	Reviewer	Maintainer
frontend	Samantha Ming (@sming-gitlab) (UTC-8, 9 hours behind @sarahghp)	Phil Hughes (@iamphill) (UTC+0, 1 hour behind @sarahghp)

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

changed title from Resolve "Pipeline Graph Structural Update" to Pipeline Graph Restructure: New Stage Column and CSS Updates

mentioned in merge request !48330 (merged)

mentioned in issue #276949 (closed)

changed the description

mentioned in merge request gitlab-ui!1872 (merged)

added 13 commits

• b2c8d096...8c86f951 - 4 commits from branch 276949-pipeline-restructure-2
• 5345965e - Move stage column component to legacy
• b12321aa - Delete unused classes, props, add wrapper template
• c4499197 - Remove links, adjust related CSS
• 9f9dd175 - Fix title CSS
• 9f8355e7 - Fix up CSS across flag states
• 2cdf1265 - Updates related specs
• e5f4cb2d - Add tests for new stage column
• 6ff021dd - Move title format test down stack
• fb3ebb37 - Add fixes from self-review

Compare with previous version

assigned to @sarahghp

added 1 commit

• b7bf2dc1 - Remove a little of the unused CSS

Compare with previous version

Do you mind doing the first review here, @psimyn? Not breaking the CSS in the main pipeline graph with the changes that are not behind the feature flag is of prime importance, so I need a real CSS expert 🧐.

Those files are:

• app/assets/javascripts/pipelines/components/graph/action_component.vue
• app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
• app/assets/javascripts/pipelines/components/graph/job_item.vue
• app/assets/javascripts/pipelines/components/graph/job_name_component.vue

assigned to @psimyn

added typemaintenance workflowin review labels and removed workflowin dev label

added typefeature label

changed the description

@f_caplette As we discussed, I'd like to send this through three looks out of an abundance of caution. Since you worked with me on the spike this comes out of, will you please also look.

assigned to @f_caplette

added 1 commit

• fbade440 - Remove extra div

Compare with previous version

added 1 commit

• 1d50d0a6 - Put class into context till it can unravel

Compare with previous version

approved this merge request

approved this merge request

@afontaine Do you mind taking a look at this? Please note it will need to wait to be rebased on master once !48339 (merged) merges, but it's ready for your review.

assigned to @afontaine and unassigned @psimyn and @f_caplette

mentioned in merge request !48558 (merged)

added 639 commits

• 1d50d0a6...bf7b81f4 - 639 commits from branch 276949-pipeline-restructure-2

Compare with previous version

changed target branch from 276949-pipeline-restructure-2 to master

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 3f41b08e and bf7b81f4

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.09 MB	3.09 MB	-	0.0 %
mainChunk	1.88 MB	1.88 MB	-	0.0 %

---

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

resolved all threads

resolved all threads

approved this merge request

This looks great @sarahghp! this is quite the overhaul I get to see

enabled an automatic merge when the pipeline for ee0ff732 succeeds

merged

mentioned in commit 5c7db792

added workflowstaging label and removed workflowin review label

added workflowcanary label and removed workflowstaging label

added workflowproduction label and removed workflowcanary label

added releasedcandidate label

mentioned in issue #241129 (closed)

added releasedpublished label and removed releasedcandidate label

removed typefeature label

added Category:Pipeline Composition label