Init a GlBreadcrumb Vue app from breadcrumb JSON data

What does this MR do and why?

Behind a wip feature flag, renders the static page breadcrumbs with gitlab-ui's GlBreadcrumb Vue component instead of our custom Haml implementation.

This is the 2nd of a series of MRs related to #358113 (closed). The 1st MR was !149813 (merged). See both that MR and issue for more context and the implementation plan.

Screenshots or screen recordings

Before	After
recording_1713946254	recording_1713946101

How to set up and validate locally

• Feature.enable(:vue_page_breadcrumbs) to see the new Vue breadcrumbs instead of Haml.
• On most pages (with only a few breadcrumb items), both versions should look exactly the same.
• Only pages with many breadcrumb items show the difference:
  • Go to a deeply nested project (Group_1 > group_2 > group_last > project) and compare collapse behavior.
  • Haml breadcrumbs always collapsed any group that isn't group_1 or group_last. Vue breadcrumbs now show everything, if available space allows.
  • Shrink the window width to see Vue breadcrumbs collapse into a dropdown.
• Go to a project's wiki and create a Home page, as well as another subpage, under Home. Vue breadcrumbs should show [user/group]>project>wiki>Home>Subpage.

What is not yet implemented

This MR doesn't yet handle the existing mechanism that allows pages that are entirely Vue.js-built (incl subpages with vue-router) to inject there dynamic breadcrumbs into the static server-rendered breadcrumbs. Grep injectVueAppBreadcrumbs if curious. We have around a dozend pages like this. Their dynamic breadcrumbs won't show up yet with this new feature flag enabled. That will be handled in the next MR of this series. That's why I kept the FF type as wip.

changed milestone to %17.0

added devopsmanage featureenhancement groupfoundations sectioncore platform typefeature labels

assigned to @thutterer

added backend frontend labels

	2 Warnings
	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 contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

testid selectors

The following changed lines in this MR contain testid selectors:

app/assets/javascripts/super_sidebar/super_sidebar_bundle.js

+        attrs: { 'data-testid': 'breadcrumb-links' },

app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml

-%nav.breadcrumbs.gl-breadcrumbs.tmp-breadcrumbs-fix{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
-      %li.gl-breadcrumb-item{ data: { testid: 'breadcrumb-current-link' } }
+  %nav.breadcrumbs.gl-breadcrumbs.tmp-breadcrumbs-fix{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
+        %li.gl-breadcrumb-item{ data: { testid: 'breadcrumb-current-link' } }

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
backend	@alexbuijs (UTC+2, same timezone as author)	@ahmed.hemdan (UTC+2, same timezone as author)
frontend	@leetickett-gitlab (UTC+1, 1 hour behind author)	@vitallium (UTC+2, same timezone as author)
test for spec/features/*	@alexbuijs (UTC+2, same timezone as author)	Maintainer review is optional for test for spec/features/*

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

Tailwind CSS

Legacy utils

The following files contain legacy utils:

• app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
  • gl-flex-grow-1
• app/components/pajamas/avatar_component.rb
  • gl-rounded-base!
• app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
  • gl-flex-grow-1

Use the Tailwind documentation to find the Tailwind equivalent to these legacy utils. If the Tailwind equivalent is not available it is okay to use the legacy util for now. The Tailwind equivalent will be made available when the corresponding migration issue in &13521 (closed) is completed.

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

Generated by Danger

added 3 commits

• bc2522b4 - Init a GlBreadcrumb Vue app from breadcrumb JSON data
• 036181c3 - Allow Pajamas::AvatarComponent to take a string as item
• 9d6ba7b5 - Fix missing wiki page slug breadcrumbs

Compare with previous version

added 2 commits

• 782b71e2 - Allow Pajamas::AvatarComponent to take a string as item
• 0582c805 - Fix missing wiki page slug breadcrumbs

Compare with previous version

added 1 commit

• c6dadd06 - Fix missing wiki page slug breadcrumbs

Compare with previous version

added 1 commit

• 6c9eb78f - Fix missing wiki page slug breadcrumbs

Compare with previous version

added 1 commit

• 92adab5d - Fix missing wiki page slug breadcrumbs

Compare with previous version

added 1 commit

• 67baba40 - Fix missing wiki page slug breadcrumbs

Compare with previous version

added 1 commit

• 67a7185f - Refactor schema_list_item helper to dynamically fill in the position

Compare with previous version

mentioned in merge request !149813 (merged)

added 5 commits

• cbe8904c - 1 commit from branch 358113-prepare-json-data-for-vue-breadcrumbs
• 9fb0b964 - Init a GlBreadcrumb Vue app from breadcrumb JSON data
• 53aa3be0 - Allow Pajamas::AvatarComponent to take a string as item
• c2eb0a90 - Fix missing wiki page slug breadcrumbs
• de1573ac - Refactor schema_list_item helper to dynamically fill in the position

Compare with previous version

changed the description

marked this merge request as ready

Hi @ivaneG Do you have capacity for a first backend review here?

requested review from @ivaneG

Hey @jrushford Could you please give this a first frontend review?