Prepare common Vue app for Repository header area

What does this MR do and why?

This MR is a part of a bigger effort that aims to consolidate various tiny Vue apps in the header area of tree and blob view into one common Vue application.

Note: There's a potential for refactor, but that part will be handled in the following issues within &13018. The MRs for #497051 (closed) goal is to move everything as is.

Even though the end result should not change any UI and behaviour, it is quite a ride To ensure nothing breaks in the meantime:

• all changes are behind a common_repository_blob_header_app=true URL param
• elements are being moved in batches, what you're reviewing may not yet look like the old version
• breaking the work into smaller parts means that feature tests won't pass, due to missing UI elements. That is why I decided to stub the ff and take care of the feature tests in the last step, after all other MRs are merged
• please make sure you give it a go and thoroughly test all the buttons

The breakdown of #497051 (closed) MRs:

step	status
introduce ff & move first batch of controls, move web ide button for tree header, recreate projects/tree/lock_link in Vue
move code buttons (desktop & mobile) for tree header
move contents of app/views/projects/blob/_breadcrumb.html.haml
turn on feature tests for when the ff is true

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Context	Before	After
tree: old version with multiple Vue apps
blob: old version with multiple Vue apps
tree: different ref than root ref (ff off vs. ff on)
blob

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Go to Project overview or Code / Repository
2. Add common_repository_blob_header_app=true param to the URL
3. Make sure you can switch Git revision to a different name or branch
4. After point 3 you should see Compare button. Make sure it redirects to Compare revisions page with correct data
5. Go back to project overview
6. Click + button next to the project's breadcrumbs and try adding a file or a branch.
7. Click History button and make sure it opens Commits page for a revision you've selected in point 2
8. Go back to project overview
9. Click Find file button and make sure it opens the search modal with ~ prefix for searching for files
10. Select a file from the tree list
11. Make sure you can see blob controls on the right: Find file, Blame, History and Permalink. Check their behaviour.
12. Optional: with Vue browser extension make sure you can see HeaderArea app. Then refresh the page to get the legacy blob view. The Vue extension should then list the old structure (that's the part to be moved in 4th MR from the breakdown table ). Here's how it should look like:

new blob	legacy blob

Related to #497051 (closed)

changed milestone to %17.5

added Category:Source Code Management Stretch automation:ml devopscreate featureenhancement frontend groupsource code sectiondev typefeature workflowin dev labels

assigned to @psjakubowska

added 4 commits

• fbc57c14 - Imtroduce a feature flag to secure the rollout
• aacd84e2 - Organize header area components
• eb4a190b - Surfuce the feature flag
• 522a8372 - Add history button to header area app

Compare with previous version

added backend feature flag labels

	3 Warnings
	This merge request is quite big (593 lines changed), please consider splitting it into multiple merge requests.
	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:test-on-omnibus job is run.

	1 Message
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

testid selectors

The following changed lines in this MR contain testid selectors:

app/assets/javascripts/repository/components/header_area.vue

+        data-testid="ref-dropdown-container"
+        data-testid="tree-compare-control"
+      <gl-button v-if="!isReadmeView" :href="historyPath" data-testid="tree-history-control">{{
+        data-testid="tree-find-file-control"

If the e2e:test-on-omnibus 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:test-on-omnibus-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
analytics instrumentation	@syasonik (UTC-5, 6 hours behind author)	Maintainer review is optional for analytics instrumentation
backend	@lwanko (UTC+4, 3 hours ahead of author)	@jnutt (UTC+0, 1 hour behind author)
frontend	@jmontal (UTC-7, 8 hours behind author)	@janis (UTC+1, same timezone as author)
QA	@jay_mccure (UTC+10, 9 hours ahead of author)	Maintainer review is optional for QA
~"Tooling"	Reviewer review is optional for ~"Tooling"	@tbulva (UTC+1, same timezone as author)

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.

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 e8db7e20 and f1c78fb2

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.39 MB	4.39 MB	-	0.0 %
mainChunk	3.31 MB	3.31 MB	-	0.0 %

Significant Growth: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.show	1.02 MB	1.17 MB	+156.73 KB	15.1 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@leipert, @markrian, @pgascouvaillancourt, @sdejonge or @thutterer) for review, if you are unsure about the size increase.

Note: We do not have exact data for e8db7e20. So we have used data from: 02a7b43c.
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

I have left both questions and recommendations in my review, focusing on potential issues with setting the ref_type parameter and the implementation of a new feature flag. The comments cover URL parameter handling and feature flag implementation strategies. I estimate there is a small amount of work required to address these concerns, though this is only an estimate based on the provided comments.

I finished my review and found nothing to comment on. Nice work!

added 950 commits

• 522a8372...f4923fdb - 944 commits from branch master
• d1490e65 - Imtroduce a feature flag to secure the rollout
• eb228c6f - Organize header area components
• f96680e8 - Surfuce the feature flag
• a6a233a7 - Add history button to header area app
• bfcc8087 - Add blob controls to header area
• d21fe75b - Add breadcrumbs to header area

Compare with previous version

added 4 commits

• 2e0c28e9 - Add breadcrumbs to header area
• abd736c4 - Add RefSelector component
• a1b3fbae - Add Find file button
• 4c43fdc4 - WIP: Add Compare control

Compare with previous version

added analytics instrumentation analytics instrumentationreview pending labels

added 828 commits

• 4c43fdc4...ac75753f - 817 commits from branch master
• 60b0c28c - 1 earlier commit
• daa1ba1e - Organize header area components
• dd3b0f3e - Surfuce the feature flag
• caac1d2d - Add history button to header area app
• 3c68e968 - Add blob controls to header area
• ed951494 - Add breadcrumbs to header area
• 58928290 - Add RefSelector component
• c31f798c - Add Find file button
• 4c6dfbdd - Add Compare control
• 93374d3d - Apply current layout
• 9174d95f - Temporarily run feature tests only for old version

Compare with previous version

changed the description

I have reviewed the code and left a mix of questions and recommendations. The comments cover topics such as error handling, code documentation, feature flag implementation, and testing considerations. I estimate there is a decent amount of work required to address these points, focusing on improving robustness, maintainability, and test coverage of the code.

mentioned in issue #497051 (closed)

added 8 commits

• 5d350798 - Add history button to header area app
• d34a5f2d - Add blob controls to header area
• 75ffb3c4 - Add breadcrumbs to header area
• d375a7af - Add RefSelector component
• 254cd630 - Add Find file button
• 95a38246 - Add Compare control
• 4db06686 - Apply current layout
• b7d20061 - Temporarily run feature tests only for old version

Compare with previous version

added 1 commit

• ad74b921 - Temporarily run feature tests only for old version

Compare with previous version

changed the description

Generated by gitlab_quality-test_tooling.

---

Slow tests detected in this merge request. These slow tests might be related to this merge request's changes.

Click to expand

Job	File	Name	Duration	Expected duration
#8059411402	spec/features/projects/show/user_sees_git_instructions_spec.rb#L108	Projects > Show > User sees Git instructions when project is public when project is empty when not signed in shows details	57.41 s	< 50.13 s
#8063974780	spec/features/projects/show/user_sees_git_instructions_spec.rb#L108	Projects > Show > User sees Git instructions when project is public when project is empty when not signed in shows details	57.06 s	< 50.13 s

added rspec:slow test detected label

added 1 commit

• f110ee65 - Data-testid for refSelector

Compare with previous version

Hey @jay_mccure, I need advice I'm moving a bunch of buttons on Repository page that used to be separate tiny Vue apps into one that contains all of them. It's quite a lot of changes, so I decided to add a derisk feature flag and break it into multiple MRs. Now, the qa:selector job is failing with:

Oct 11 2024 12:51:00 UTC (QA Tests)] WARN  -- Error: QA::Page::Project::Show - Missing view partial `/builds/gitlab-org/gitlab-foss/app/assets/javascripts/repository/components/breadcrumbs.vue`!

But breadcrumbs are actually one of the controls that I've already included in the new Vue app Not sure how to proceed here.

added 1 commit

• d03e573b - Update a path for a QA selector

Compare with previous version

added QA label

marked this merge request as ready

changed the description

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for f1c78fb2

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Verify      | 45     | 0      | 2       | 0     | 47    | ✅     |
| Create      | 129    | 0      | 22      | 0     | 151   | ✅     |
| Package     | 17     | 0      | 18      | 0     | 35    | ✅     |
| Plan        | 76     | 0      | 0       | 0     | 76    | ✅     |
| Data Stores | 33     | 0      | 1       | 0     | 34    | ✅     |
| Govern      | 75     | 0      | 3       | 0     | 78    | ✅     |
| Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
| Fulfillment | 2      | 0      | 0       | 0     | 2     | ✅     |
| Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
| Secure      | 4      | 0      | 0       | 0     | 4     | ✅     |
| Manage      | 1      | 0      | 1       | 0     | 2     | ✅     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
| Ai-powered  | 0      | 0      | 1       | 0     | 1     | ➖     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 397    | 0      | 48      | 0     | 445   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-test-on-omnibus: test report for 32762ade

expand test summary

+---------------------------------------------------------------------+
|                           suites summary                            |
+----------------+--------+--------+---------+-------+-------+--------+
|                | passed | failed | skipped | flaky | total | result |
+----------------+--------+--------+---------+-------+-------+--------+
| Create         | 559    | 0      | 85      | 8     | 644   | ✅     |
| Govern         | 108    | 0      | 10      | 2     | 118   | ✅     |
| Manage         | 27     | 0      | 18      | 4     | 45    | ✅     |
| Package        | 32     | 0      | 13      | 0     | 45    | ✅     |
| Verify         | 50     | 0      | 15      | 0     | 65    | ✅     |
| Data Stores    | 46     | 0      | 11      | 0     | 57    | ✅     |
| Monitor        | 12     | 0      | 13      | 0     | 25    | ✅     |
| Plan           | 83     | 0      | 8       | 0     | 91    | ✅     |
| Systems        | 6      | 0      | 1       | 0     | 7     | ✅     |
| Analytics      | 3      | 0      | 0       | 0     | 3     | ✅     |
| Secure         | 4      | 0      | 4       | 0     | 8     | ✅     |
| Configure      | 1      | 0      | 3       | 0     | 4     | ✅     |
| GitLab Metrics | 2      | 0      | 1       | 0     | 3     | ✅     |
| Fulfillment    | 4      | 0      | 7       | 0     | 11    | ✅     |
| Ai-powered     | 1      | 0      | 2       | 1     | 3     | ✅     |
| Release        | 5      | 0      | 1       | 0     | 6     | ✅     |
| ModelOps       | 0      | 0      | 1       | 0     | 1     | ➖     |
| Growth         | 0      | 0      | 2       | 0     | 2     | ➖     |
+----------------+--------+--------+---------+-------+-------+--------+
| Total          | 943    | 0      | 195     | 15    | 1138  | ✅     |
+----------------+--------+--------+---------+-------+-------+--------+

e2e-test-on-cng: test report for f1c78fb2

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Package     | 24     | 0      | 14      | 0     | 38    | ✅     |
| Verify      | 50     | 0      | 15      | 0     | 65    | ✅     |
| Create      | 135    | 0      | 21      | 0     | 156   | ✅     |
| Govern      | 82     | 0      | 9       | 2     | 91    | ✅     |
| Release     | 5      | 0      | 1       | 0     | 6     | ✅     |
| Secure      | 1      | 0      | 6       | 0     | 7     | ✅     |
| Plan        | 82     | 0      | 8       | 0     | 90    | ✅     |
| Configure   | 0      | 0      | 3       | 0     | 3     | ➖     |
| Data Stores | 33     | 0      | 10      | 0     | 43    | ✅     |
| Monitor     | 8      | 0      | 12      | 0     | 20    | ✅     |
| Manage      | 1      | 0      | 9       | 0     | 10    | ✅     |
| Ai-powered  | 0      | 0      | 2       | 0     | 2     | ➖     |
| Growth      | 0      | 0      | 2       | 0     | 2     | ➖     |
| Fulfillment | 2      | 0      | 7       | 0     | 9     | ✅     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
| ModelOps    | 0      | 0      | 1       | 0     | 1     | ➖     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 425    | 0      | 120     | 2     | 545   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

requested review from @ms.mondrian, @olaoluro, @john.mcdonnell, and @syasonik

mentioned in issue ms.mondrian/ms.mondrian#1 (closed)

approved this merge request

Looks good for analytics instrumentation!

added analytics instrumentationapproved label and removed analytics instrumentationreview pending label

removed review request for @syasonik

added pipeline:mr-approved label

added pipelinetier-2 label

mentioned in issue gitlab-org/quality/quality-engineering/team-tasks#2795

marked this merge request as draft

removed review request for @john.mcdonnell, @olaoluro, and @ms.mondrian

changed the description

changed milestone to %17.6

added missed:17.5 label

assigned to @jerasmus

added 3450 commits

• d03e573b...2ce4769d - 3436 commits from branch master
• 2ce4769d...67610af8 - 4 earlier commits
• a18362dc - Add blob controls to header area
• 6078d3b7 - Add breadcrumbs to header area
• 911068a3 - Add RefSelector component
• 19f728e7 - Add Find file button
• c0a06398 - Add Compare control
• 333954cc - Apply current layout
• 6dcb44b0 - Temporarily run feature tests only for old version
• e9709462 - Data-testid for refSelector
• 2accac56 - Update a path for a QA selector
• dd79d169 - Replace feature flag with URL param

Compare with previous version

removed feature flag label

added 235 commits

• dd79d169...a7e4de39 - 221 commits from branch master
• a7e4de39...c7371799 - 4 earlier commits
• 5758a2e5 - Add blob controls to header area
• 49cd9da1 - Add breadcrumbs to header area
• 7bd2325c - Add RefSelector component
• 8630d4c3 - Add Find file button
• 5bd21f86 - Add Compare control
• 35d1b4bf - Apply current layout
• 8161a97f - Temporarily run feature tests only for old version
• 754fe79c - Data-testid for refSelector
• c261c83c - Update a path for a QA selector
• e8be10c2 - Replace feature flag with URL param

Compare with previous version

added 1 commit

• 32762ade - Update file paths in quarantined vue3 specs

Compare with previous version

changed the description

marked this merge request as ready

requested review from @ms.mondrian, @olaoluro, and @jay_mccure

approved this merge request

approved this merge request

Changes LGTM

Hi @ghinfey , can you please give this a maintainer review?

requested review from @ghinfey and removed review request for @olaoluro

I have reviewed the code and left a combination of questions and recommendations. My comments cover topics such as navigation behavior, code organization, and syntax improvements. Based on the issues identified, I estimate there is a small amount of work required to address these concerns, though this is only an estimate.

mentioned in issue ms.mondrian/ms.mondrian#4 (closed)

approved this merge request

added 1 commit

• 1d2bc9ec - Address code review comments

Compare with previous version

reset approvals from @ghinfey by pushing to the branch

added 1 commit

• 430b4256 - Address code review comments

Compare with previous version

added 755 commits

• 430b4256...5ca6620a - 739 commits from branch master
• 5ca6620a...70a4033c - 6 earlier commits
• 11528aa4 - Add RefSelector component
• a31ea362 - Add Find file button
• 0dce4deb - Add Compare control
• c0fadfe6 - Apply current layout
• a984debe - Temporarily run feature tests only for old version
• 5816bac0 - Data-testid for refSelector
• ac89ab22 - Update a path for a QA selector
• 2f65e782 - Replace feature flag with URL param
• 7ea45c79 - Update file paths in quarantined vue3 specs
• 920f92a3 - Address code review comments

Compare with previous version

reset approvals from @jay_mccure by pushing to the branch

changed the description

added 1 commit

• 09a33b87 - Address code review comments

Compare with previous version

mentioned in issue #502383 (closed)

approved this merge request

approved this merge request

requested review from @iamphill

added 1 commit

• f1c78fb2 - Cleanup $options + create util for history link

Compare with previous version

reset approvals from @ghinfey by pushing to the branch

requested review from @iamphill

added workflowin review label and removed workflowin dev label

approved this merge request

added pipelinetier-3 pipeline:run-e2e-omnibus-once labels and removed pipelinetier-2 label

Before you set this MR to auto-merge

This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.

Before you set this MR to auto-merge, please check the following:

• You are the last maintainer of this merge request
• The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
• This pipeline is recent enough (created in the last 8 hours)

If all the criteria above apply, please set auto-merge for this merge request.

See pipeline tiers and merging a merge request for more details.

resolved all threads

enabled automatic add to merge train when checks pass

started a merge train

merged

mentioned in commit 4232bbb7

Hello @psjakubowska

The Analytics Instrumentation team is actively working on improving the metrics implementation and event tracking processes. We would love to hear about your experience and any feedback you might have!

To provide your feedback, please use this Google Form.

Thanks for your help!

---

• Looking for existing metrics data? Check out the Metrics Exploration Dashboard for Group:source_code.
• Need further assistance? Have comments?
  • Mention @gitlab-org/analytics-section/analytics-instrumentation/engineers
  • Reach out in #g_monitor_analytics_instrumentation channel on Slack.

This message was generated automatically. Improve it or delete it.

added workflowstaging-canary label and removed workflowin review label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

added workflowpost-deploy-db-staging label and removed workflowproduction label

added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label

mentioned in merge request !172632 (merged)

added releasedcandidate label

added releasedpublished label and removed releasedcandidate label

mentioned in task #510199 (closed)