Add branch switcher UI to the pipeline editor [RUN ALL RSPEC] [RUN AS-IF-FOSS]

What does this MR do?

For #321655 (closed)

This is an iterative step that adds the dropdown UI for the branch switcher in the pipeline editor. Functionality and loading of data from the backend will be added in future MRs.

The backend dependency for this issue is still in development, so this feature uses a client resolver for now and is hidden behind the :pipeline-editor-branch-switcher feature flag.

The breakdown of the implementation for this issue is as follows:

State	Progress
you are here	Add dropdown UI to the pipeline editor
WIP	When clicking on a branch, switch to that branch and load the correct data
TODO	Special Case: add branch switcher to empty state
TODO	Fetch the branch list from GraphQL (when query is available)

Screenshots

State	Screenshot
Branch Switcher
Show list of branches
Failed to fetch branch list

Branch Switcher

Does this MR meet the acceptance criteria?

Conformity

• Does this MR need a changelog?
  • I have included a changelog entry.
  • I have not included a changelog entry because this feature is behind a feature flag.
• [-] Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• [-] Database guides
• [-] Separation of EE specific content

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
• [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• [-] Label as security and @ mention @gitlab-com/gl-security/appsec
• [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• [-] Security reports checked/validated by a reviewer from the AppSec team

changed milestone to %13.11

added devopsverify featureaddition frontend grouppipeline authoring sectionops typefeature + 1 deleted label

changed title from WIP: Add branch switcher UI to the pipeline editor to WIP: Add branch switcher UI to the pipeline editor [RUN ALL RSPEC] [RUN AS-IF-FOSS]

added backend label

	3 Warnings
	5bd82f99: 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.
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.
	This merge request changed files with disabled eslint rules. Please consider fixing them.

	2 Messages
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, run the following: bin/changelog -m 57562 "Add branch switcher UI to the pipeline editor [RUN ALL RSPEC] [RUN AS-IF-FOSS]" If you want to create a changelog entry for GitLab EE, run the following instead: bin/changelog --ee -m 57562 "Add branch switcher UI to the pipeline editor [RUN ALL RSPEC] [RUN AS-IF-FOSS]" If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.
	You're adding or removing a feature flag, your MR title needs to include [RUN ALL RSPEC] [RUN AS-IF-FOSS] (we may have updated it automatically for you and started a new MR pipeline) to ensure everything is covered.

Disabled eslint rules

The following files have disabled eslint rules. Please consider fixing them:

• app/assets/javascripts/pipeline_editor/graphql/resolvers.js
• spec/frontend/pipeline_editor/graphql/resolvers_spec.js

Run the following command for more details

node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
  'app/assets/javascripts/pipeline_editor/graphql/resolvers.js' \
  'spec/frontend/pipeline_editor/graphql/resolvers_spec.js'

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 use the GitLab Review Workload Dashboard to find other available reviewers.

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, assign them as a reviewer! Danger does not automatically notify them for you.

Category	Reviewer	Maintainer
backend	Andy Soiron (@Andysoiron) (UTC+2, 6 hours behind @mgandres)	Douglas Barbosa Alexandre (@dbalexandre) (UTC-3, 11 hours behind @mgandres)
frontend	Tomas Vik (@viktomas) (UTC+2, 6 hours behind @mgandres)	Savas Vedova (@svedova) (UTC+2, 6 hours behind @mgandres)

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

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits a41e7ef2 and 5bd82f99

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.15 MB	3.15 MB	-	0.0 %
mainChunk	1.87 MB	1.87 MB	-	0.0 %

---

Note: We do not have exact data for a41e7ef2. So we have used data from: 9dd41bd6.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

mentioned in issue #326189 (closed)

marked this merge request as ready

marked the checklist item Code review guidelines as completed

marked the checklist item Merge request performance guidelines as completed

marked the checklist item Style guides as completed

marked the checklist item Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. as completed

marked the checklist item Tested in all supported browsers as completed

added 267 commits

• 4926f51b...66fd32dd - 266 commits from branch master
• d19f174d - Add branch switcher UI to pipeline editor

Compare with previous version

added 1 commit

• 46cceeca - Add branch switcher UI to pipeline editor

Compare with previous version

changed the description

@f_caplette can you give this a frontend review?

@brytannia can you give this a backend review?

requested review from @brytannia and @f_caplette

changed the description

approved this merge request

added 218 commits

• 3f950897...17c4304e - 216 commits from branch master
• 76389a6d - Add branch switcher UI to pipeline editor
• 52153d69 - Update specs

Compare with previous version

FYI if you test the UI with a new commit, you'll get some funny spacing issues.

This is being fixed already in !57685 (merged) so I didn't include the change here.

On that note, @nadia_sotnikova maybe I just couldn't find it in the figma specs, but can I check with you if the branch switcher should be placed above or below the alert?

mentioned in merge request !57941 (merged)

added 1 commit

• 008f4b51 - Clean up code in tests

Compare with previous version

added 1 commit

• 4c7dcf5b - Clean up code in tests

Compare with previous version

added 698 commits

• 4c7dcf5b...f7bf97d4 - 696 commits from branch master
• b4d5a664 - Add branch switcher UI to pipeline editor
• c746bb57 - Clean up specs & show branch switched even when there's only one branch

Compare with previous version

approved this merge request

requested review from @sarahghp

removed review request for @sarahghp

added 680 commits

• c746bb57...b0f920c2 - 676 commits from branch master
• 92b52377 - Add branch switcher UI to pipeline editor
• bcc56681 - Clean up specs & show branch switched even when there's only one branch
• 1f982cca - Code cleanup for branch switcher
• d7662be1 - Show error message when query fails to fetch branch list

Compare with previous version

changed the description

added 42 commits

• d7662be1...ae1f26b6 - 38 commits from branch master
• 36db629e - Add branch switcher UI to pipeline editor
• 0af863db - Clean up specs & show branch switched even when there's only one branch
• 3043d4ce - Code cleanup for branch switcher
• 46a74784 - Show error message when query fails to fetch branch list

Compare with previous version

added 14 commits

• 46a74784...5dcc79e3 - 10 commits from branch master
• 971a15cc - Add branch switcher UI to pipeline editor
• c35bd2ad - Clean up specs & show branch switched even when there's only one branch
• f5135cde - Code cleanup for branch switcher
• 5bd82f99 - Show error message when query fails to fetch branch list

Compare with previous version

removed review request for @brytannia

requested review from @sarahghp

resolved all threads

approved this merge request