From e08d9350fcdda2ff798a3a79e6ccfe9369c25fa2 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 2 Oct 2024 15:44:40 +0200
Subject: [PATCH 01/17] Imtroduce a feature flag to secure the rollout

---
 .../common_repository_blob_header_app.yml                | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml

diff --git a/config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml b/config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml
new file mode 100644
index 00000000000000..2863e0ce0ed6de
--- /dev/null
+++ b/config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml
@@ -0,0 +1,9 @@
+---
+name: common_repository_blob_header_app
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/497051
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167906
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/497345
+milestone: '17.5'
+group: group::source code
+type: gitlab_com_derisk
+default_enabled: false
-- 
GitLab


From 9905d98235a50ac7ccb936a57fa4ab0f71d3a208 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 2 Oct 2024 16:18:18 +0200
Subject: [PATCH 02/17] Organize header area components

---
 .../components/{ => header_area}/blob_controls.vue     |  4 ++--
 .../components/{ => header_area}/breadcrumbs.vue       | 10 +++++-----
 app/assets/javascripts/repository/index.js             |  4 ++--
 .../components/{ => header_area}/blob_controls_spec.js |  4 ++--
 .../components/{ => header_area}/breadcrumbs_spec.js   |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)
 rename app/assets/javascripts/repository/components/{ => header_area}/blob_controls.vue (97%)
 rename app/assets/javascripts/repository/components/{ => header_area}/breadcrumbs.vue (95%)
 rename spec/frontend/repository/components/{ => header_area}/blob_controls_spec.js (96%)
 rename spec/frontend/repository/components/{ => header_area}/breadcrumbs_spec.js (98%)

diff --git a/app/assets/javascripts/repository/components/blob_controls.vue b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
similarity index 97%
rename from app/assets/javascripts/repository/components/blob_controls.vue
rename to app/assets/javascripts/repository/components/header_area/blob_controls.vue
index 4611afa270a6de..5f9ce8b7dc61f1 100644
--- a/app/assets/javascripts/repository/components/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -18,8 +18,8 @@ import {
 import { sanitize } from '~/lib/dompurify';
 import { InternalEvents } from '~/tracking';
 import { FIND_FILE_BUTTON_CLICK } from '~/tracking/constants';
-import { updateElementsVisibility } from '../utils/dom';
-import blobControlsQuery from '../queries/blob_controls.query.graphql';
+import { updateElementsVisibility } from '~/repository/utils/dom';
+import blobControlsQuery from '~/repository/queries/blob_controls.query.graphql';
 import { getRefType } from '../utils/ref_type';
 
 export default {
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
similarity index 95%
rename from app/assets/javascripts/repository/components/breadcrumbs.vue
rename to app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
index 3dea54d5995b13..dc5813dff823d6 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
@@ -5,11 +5,11 @@ import permissionsQuery from 'shared_queries/repository/permissions.query.graphq
 import { joinPaths, escapeFileUrl, buildURLwithRefType } from '~/lib/utils/url_utility';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { __ } from '~/locale';
-import getRefMixin from '../mixins/get_ref';
-import projectPathQuery from '../queries/project_path.query.graphql';
-import projectShortPathQuery from '../queries/project_short_path.query.graphql';
-import UploadBlobModal from './upload_blob_modal.vue';
-import NewDirectoryModal from './new_directory_modal.vue';
+import getRefMixin from '~/repository/mixins/get_ref';
+import projectPathQuery from '~/repository/queries/project_path.query.graphql';
+import projectShortPathQuery from '~/repository/queries/project_short_path.query.graphql';
+import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
+import NewDirectoryModal from '~/repository/components/new_directory_modal.vue';
 
 const UPLOAD_BLOB_MODAL_ID = 'modal-upload-blob';
 const NEW_DIRECTORY_MODAL_ID = 'modal-new-directory';
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 00c52f6a7607fd..b11f0d0dc3f86b 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -12,10 +12,10 @@ import RefSelector from '~/ref/components/ref_selector.vue';
 import HighlightWorker from '~/vue_shared/components/source_viewer/workers/highlight_worker?worker';
 import CodeDropdown from '~/vue_shared/components/code_dropdown/code_dropdown.vue';
 import App from './components/app.vue';
-import Breadcrumbs from './components/breadcrumbs.vue';
+import Breadcrumbs from './components/header_area/breadcrumbs.vue';
 import ForkInfo from './components/fork_info.vue';
 import LastCommit from './components/last_commit.vue';
-import BlobControls from './components/blob_controls.vue';
+import BlobControls from './components/header_area/blob_controls.vue';
 import apolloProvider from './graphql';
 import commitsQuery from './queries/commits.query.graphql';
 import projectPathQuery from './queries/project_path.query.graphql';
diff --git a/spec/frontend/repository/components/blob_controls_spec.js b/spec/frontend/repository/components/header_area/blob_controls_spec.js
similarity index 96%
rename from spec/frontend/repository/components/blob_controls_spec.js
rename to spec/frontend/repository/components/header_area/blob_controls_spec.js
index d36b0b8e7c965a..7e3a55223a9b0f 100644
--- a/spec/frontend/repository/components/blob_controls_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_controls_spec.js
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import BlobControls from '~/repository/components/blob_controls.vue';
+import BlobControls from '~/repository/components/header_area/blob_controls.vue';
 import blobControlsQuery from '~/repository/queries/blob_controls.query.graphql';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
@@ -13,7 +13,7 @@ import { resetShortcutsForTests } from '~/behaviors/shortcuts';
 import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
 import Shortcuts from '~/behaviors/shortcuts/shortcuts';
 import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
-import { blobControlsDataMock, refMock } from '../mock_data';
+import { blobControlsDataMock, refMock } from '../../mock_data';
 
 jest.mock('~/repository/utils/dom');
 jest.mock('~/behaviors/shortcuts/shortcuts_blob');
diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
similarity index 98%
rename from spec/frontend/repository/components/breadcrumbs_spec.js
rename to spec/frontend/repository/components/header_area/breadcrumbs_spec.js
index 57ee0502986936..5f4f6e19b4ecdc 100644
--- a/spec/frontend/repository/components/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
@@ -2,7 +2,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlDisclosureDropdown, GlDisclosureDropdownGroup } from '@gitlab/ui';
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
+import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 import NewDirectoryModal from '~/repository/components/new_directory_modal.vue';
 import waitForPromises from 'helpers/wait_for_promises';
-- 
GitLab


From b12a3e3770351376bb7b1d7c26601a9b713e5f8c Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 2 Oct 2024 16:24:42 +0200
Subject: [PATCH 03/17] Surfuce the feature flag

---
 lib/gitlab/gon_helper.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index 5d6963307b14fe..938deeaf9e4070 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -80,6 +80,7 @@ def add_gon_variables
 
       # Initialize gon.features with any flags that should be
       # made globally available to the frontend
+      push_frontend_feature_flag(:common_repository_blob_header_app, current_user)
       push_frontend_feature_flag(:source_editor_toolbar)
       push_frontend_feature_flag(:vscode_web_ide, current_user)
       push_frontend_feature_flag(:ui_for_organizations, current_user)
-- 
GitLab


From 9e1e22e5a91e1c0e6e26d64378b0277ad57512e9 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 2 Oct 2024 18:29:13 +0200
Subject: [PATCH 04/17] Add history button to header area app

Create the base for header area app to be used
on tree and blob view. Move tree History control.
Add a check to initiate old History control only
when its element is present.
---
 .../repository/components/header_area.vue     | 50 +++++++++++++
 app/assets/javascripts/repository/index.js    | 71 ++++++++++++-------
 .../projects/tree/_tree_header.html.haml      | 38 +++++-----
 .../repository/components/header_area_spec.js | 66 +++++++++++++++++
 4 files changed, 184 insertions(+), 41 deletions(-)
 create mode 100644 app/assets/javascripts/repository/components/header_area.vue
 create mode 100644 spec/frontend/repository/components/header_area_spec.js

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
new file mode 100644
index 00000000000000..a4e17414eb62f6
--- /dev/null
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { escapeFileUrl } from '~/lib/utils/url_utility';
+import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
+import BlobControls from '~/repository/components/header_area/blob_controls.vue';
+
+export default {
+  name: 'HeaderArea',
+  components: {
+    GlButton,
+    Breadcrumbs,
+    BlobControls,
+  },
+  props: {
+    // for blob controls
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    historyLink: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    historyPath() {
+      const url = new URL(window.location.href);
+      url.pathname = `${this.historyLink}/${
+        this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
+      }`;
+      url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
+
+      return url.href;
+    },
+  },
+};
+</script>
+
+<template>
+  <section>
+    <breadcrumbs />
+    <gl-button :href="historyPath">{{ __('History') }}</gl-button>
+    <blob-controls :project-path="projectPath" :ref-type="refType" />
+  </section>
+</template>
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index b11f0d0dc3f86b..7791c25c4e947a 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -16,6 +16,7 @@ import Breadcrumbs from './components/header_area/breadcrumbs.vue';
 import ForkInfo from './components/fork_info.vue';
 import LastCommit from './components/last_commit.vue';
 import BlobControls from './components/header_area/blob_controls.vue';
+import HeaderArea from './components/header_area.vue';
 import apolloProvider from './graphql';
 import commitsQuery from './queries/commits.query.graphql';
 import projectPathQuery from './queries/project_path.query.graphql';
@@ -202,6 +203,26 @@ export default function setupVueRepositoryList() {
   initRefSwitcher();
   initForkInfo();
 
+  const headerEl = document.getElementById('js-repository-blob-header-app');
+  if (headerEl) {
+    const { historyLink } = headerEl.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: headerEl,
+      router,
+      render(h) {
+        return h(HeaderArea, {
+          props: {
+            projectPath,
+            refType: this.$route.meta.refType || this.$route.query.ref_type,
+            historyLink,
+          },
+        });
+      },
+    });
+  }
+
   router.afterEach(({ params: { path } }) => {
     setTitle(path, ref, fullName);
   });
@@ -258,31 +279,33 @@ export default function setupVueRepositoryList() {
   }
 
   const treeHistoryLinkEl = document.getElementById('js-tree-history-link');
-  const { historyLink } = treeHistoryLinkEl.dataset;
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: treeHistoryLinkEl,
-    router,
-    render(h) {
-      const url = new URL(window.location.href);
-      url.pathname = `${historyLink}/${
-        this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
-      }`;
-      url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
-      return h(
-        GlButton,
-        {
-          attrs: {
-            href: url.href,
-            // Ideally passing this class to `props` should work
-            // But it doesn't work here. :(
-            class: 'btn btn-default btn-md gl-button',
+  if (treeHistoryLinkEl) {
+    const { historyLink } = treeHistoryLinkEl.dataset;
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: treeHistoryLinkEl,
+      router,
+      render(h) {
+        const url = new URL(window.location.href);
+        url.pathname = `${historyLink}/${
+          this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
+        }`;
+        url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
+        return h(
+          GlButton,
+          {
+            attrs: {
+              href: url.href,
+              // Ideally passing this class to `props` should work
+              // But it doesn't work here. :(
+              class: 'btn btn-default btn-md gl-button',
+            },
           },
-        },
-        [__('History')],
-      );
-    },
-  });
+          [__('History')],
+        );
+      },
+    });
+  }
 
   initWebIdeLink({ el: document.getElementById('js-tree-web-ide-link'), router });
 
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index da84dc9cffea4a..9678dba1ba964b 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,25 +1,29 @@
 - add_page_specific_style 'page_bundles/projects'
 
-.tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
-  .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
-    #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
+- if Feature.enabled?(:common_repository_blob_header_app, current_user)
+  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref) } }
 
-  #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
+- else
+  .tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
+    .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
+      #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
 
-#js-blob-controls
-.tree-controls
-  .gl-flex.gl-flex-wrap.gl-gap-3.gl-mb-3.sm:gl-mb-0
-    = render_if_exists 'projects/tree/lock_link'
-    = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
+    #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
 
-    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
+  #js-blob-controls
+  .tree-controls
+    .gl-flex.gl-flex-wrap.gl-gap-3.gl-mb-3.sm:gl-mb-0
+      = render_if_exists 'projects/tree/lock_link'
+      = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
 
-    = render 'projects/find_file_link'
-    = render 'shared/web_ide_button', blob: nil, css_classes: 'gl-w-full sm:gl-w-auto'
+      #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
-    .project-code-holder.gl-hidden.sm:gl-inline-block
-      = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
+      = render 'projects/find_file_link'
+      = render 'shared/web_ide_button', blob: nil, css_classes: 'gl-w-full sm:gl-w-auto'
 
-  .project-code-holder.gl-flex.gl-gap-3{ class: 'sm:!gl-hidden' }
-    = render 'projects/buttons/download', project: @project, ref: @ref
-    = render "shared/mobile_clone_panel", ref: @ref
+      .project-code-holder.gl-hidden.sm:gl-inline-block
+        = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
+
+    .project-code-holder.gl-flex.gl-gap-3{ class: 'sm:!gl-hidden' }
+      = render 'projects/buttons/download', project: @project, ref: @ref
+      = render "shared/mobile_clone_panel", ref: @ref
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
new file mode 100644
index 00000000000000..b439fc5a3abf88
--- /dev/null
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -0,0 +1,66 @@
+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import HeaderArea from '~/repository/components/header_area.vue';
+import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
+import BlobControls from '~/repository/components/header_area/blob_controls.vue';
+
+const defaultMockRoute = {
+  name: 'blobPath',
+};
+
+describe('HeaderArea', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    return shallowMount(HeaderArea, {
+      propsData: {
+        projectPath: 'test/project',
+        historyLink: '/history',
+        refType: 'branch',
+        ...props,
+      },
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+      mocks: {
+        $route: {
+          defaultMockRoute,
+          params: {
+            path: '',
+          },
+          meta: {
+            refType: '',
+          },
+          query: {
+            ref_type: '',
+          },
+        },
+      },
+    });
+  };
+
+  it('renders the component', () => {
+    wrapper = createComponent();
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders Breadcrumbs component', () => {
+    wrapper = createComponent();
+    expect(wrapper.findComponent(Breadcrumbs).exists()).toBe(true);
+  });
+
+  it('renders BlobControls component with correct props', () => {
+    wrapper = createComponent({ refType: 'branch' });
+    const blobControls = wrapper.findComponent(BlobControls);
+    expect(blobControls.exists()).toBe(true);
+    expect(blobControls.props('projectPath')).toBe('test/project');
+    expect(blobControls.props('refType')).toBe('branch');
+  });
+
+  it('renders History button with correct href', () => {
+    wrapper = createComponent();
+    const historyButton = wrapper.findComponent(GlButton);
+    expect(historyButton.exists()).toBe(true);
+    expect(historyButton.attributes('href')).toContain('/history');
+  });
+});
-- 
GitLab


From ece1becc059965da75fc76d2b075f13ccd5d0e3b Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 4 Oct 2024 10:38:36 +0200
Subject: [PATCH 05/17] Add blob controls to header area

---
 .../repository/components/header_area/blob_controls.vue       | 2 +-
 app/assets/javascripts/repository/index.js                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_controls.vue b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
index 5f9ce8b7dc61f1..2c5c163f7a8ed6 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -20,7 +20,7 @@ import { InternalEvents } from '~/tracking';
 import { FIND_FILE_BUTTON_CLICK } from '~/tracking/constants';
 import { updateElementsVisibility } from '~/repository/utils/dom';
 import blobControlsQuery from '~/repository/queries/blob_controls.query.graphql';
-import { getRefType } from '../utils/ref_type';
+import { getRefType } from '~/repository/utils/ref_type';
 
 export default {
   i18n: {
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 7791c25c4e947a..25cbe7669ce6d0 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -205,7 +205,7 @@ export default function setupVueRepositoryList() {
 
   const headerEl = document.getElementById('js-repository-blob-header-app');
   if (headerEl) {
-    const { historyLink } = headerEl.dataset;
+    const { historyLink, refType } = headerEl.dataset;
 
     // eslint-disable-next-line no-new
     new Vue({
@@ -215,7 +215,7 @@ export default function setupVueRepositoryList() {
         return h(HeaderArea, {
           props: {
             projectPath,
-            refType: this.$route.meta.refType || this.$route.query.ref_type,
+            refType: refType || this.$route.meta.refType || this.$route.query.ref_type,
             historyLink,
           },
         });
-- 
GitLab


From 70a4033ca1cce3916021f9e2e5231b6454a9c7cc Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 8 Oct 2024 12:51:39 +0200
Subject: [PATCH 06/17] Add breadcrumbs to header area

Provides breadcrumb_data_attributes for Breadcrumbs
within new header app.
---
 .../repository/components/header_area.vue     | 41 +++++++++++++++++-
 app/assets/javascripts/repository/index.js    | 43 ++++++++++++++++---
 .../projects/tree/_tree_header.html.haml      |  2 +-
 .../repository/components/header_area_spec.js | 21 ++++++++-
 4 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index a4e17414eb62f6..41a395a97e2130 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -11,6 +11,21 @@ export default {
     Breadcrumbs,
     BlobControls,
   },
+  inject: [
+    'canCollaborate',
+    'canEditTree',
+    'canPushCode',
+    'originalBranch',
+    'selectedBranch',
+    'newBranchPath',
+    'newTagPath',
+    'newBlobPath',
+    'forkNewBlobPath',
+    'forkNewDirectoryPath',
+    'forkUploadBlobPath',
+    'uploadPath',
+    'newDirPath',
+  ],
   props: {
     // for blob controls
     projectPath: {
@@ -37,14 +52,36 @@ export default {
 
       return url.href;
     },
+    getRefType() {
+      return this.$route.query.ref_type;
+    },
+    currentPath() {
+      return this.$route.params.path;
+    },
   },
 };
 </script>
 
 <template>
   <section>
-    <breadcrumbs />
+    <breadcrumbs
+      :current-path="currentPath"
+      :ref-type="getRefType"
+      :can-collaborate="canCollaborate"
+      :can-edit-tree="canEditTree"
+      :can-push-code="canPushCode"
+      :original-branch="originalBranch"
+      :selected-branch="selectedBranch"
+      :new-branch-path="newBranchPath"
+      :new-tag-path="newTagPath"
+      :new-blob-path="newBlobPath"
+      :fork-new-blob-path="forkNewBlobPath"
+      :fork-new-directory-path="forkNewDirectoryPath"
+      :fork-upload-blob-path="forkUploadBlobPath"
+      :upload-path="uploadPath"
+      :new-dir-path="newDirPath"
+    />
     <gl-button :href="historyPath">{{ __('History') }}</gl-button>
-    <blob-controls :project-path="projectPath" :ref-type="refType" />
+    <blob-controls :project-path="projectPath" :ref-type="getRefType" />
   </section>
 </template>
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 25cbe7669ce6d0..fca8782091fca9 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -203,19 +203,54 @@ export default function setupVueRepositoryList() {
   initRefSwitcher();
   initForkInfo();
 
+  router.afterEach(({ params: { path } }) => {
+    setTitle(path, ref, fullName);
+  });
+
   const headerEl = document.getElementById('js-repository-blob-header-app');
   if (headerEl) {
-    const { historyLink, refType } = headerEl.dataset;
+    const {
+      historyLink,
+      refType,
+      breadcrumbsCanCollaborate,
+      breadcrumbsCanEditTree,
+      breadcrumbsCanPushCode,
+      breadcrumbsSelectedBranch,
+      breadcrumbsNewBranchPath,
+      breadcrumbsNewTagPath,
+      breadcrumbsNewBlobPath,
+      breadcrumbsForkNewBlobPath,
+      breadcrumbsForkNewDirectoryPath,
+      breadcrumbsForkUploadBlobPath,
+      breadcrumbsUploadPath,
+      breadcrumbsNewDirPath,
+    } = headerEl.dataset;
 
     // eslint-disable-next-line no-new
     new Vue({
       el: headerEl,
+      provide: {
+        canCollaborate: parseBoolean(breadcrumbsCanCollaborate),
+        canEditTree: parseBoolean(breadcrumbsCanEditTree),
+        canPushCode: parseBoolean(breadcrumbsCanPushCode),
+        originalBranch: ref,
+        selectedBranch: breadcrumbsSelectedBranch,
+        newBranchPath: breadcrumbsNewBranchPath,
+        newTagPath: breadcrumbsNewTagPath,
+        newBlobPath: breadcrumbsNewBlobPath,
+        forkNewBlobPath: breadcrumbsForkNewBlobPath,
+        forkNewDirectoryPath: breadcrumbsForkNewDirectoryPath,
+        forkUploadBlobPath: breadcrumbsForkUploadBlobPath,
+        uploadPath: breadcrumbsUploadPath,
+        newDirPath: breadcrumbsNewDirPath,
+      },
+      apolloProvider,
       router,
       render(h) {
         return h(HeaderArea, {
           props: {
             projectPath,
-            refType: refType || this.$route.meta.refType || this.$route.query.ref_type,
+            refType,
             historyLink,
           },
         });
@@ -223,10 +258,6 @@ export default function setupVueRepositoryList() {
     });
   }
 
-  router.afterEach(({ params: { path } }) => {
-    setTitle(path, ref, fullName);
-  });
-
   const breadcrumbEl = document.getElementById('js-repo-breadcrumb');
 
   if (breadcrumbEl) {
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 9678dba1ba964b..de025432671d30 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,7 +1,7 @@
 - add_page_specific_style 'page_bundles/projects'
 
 - if Feature.enabled?(:common_repository_blob_header_app, current_user)
-  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref) } }
+  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes } }
 
 - else
   .tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index b439fc5a3abf88..de30873770a9ac 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -8,11 +8,30 @@ const defaultMockRoute = {
   name: 'blobPath',
 };
 
+const defaultProvided = {
+  canCollaborate: true,
+  canEditTree: true,
+  canPushCode: true,
+  originalBranch: 'main',
+  selectedBranch: 'feature/new-ui',
+  newBranchPath: '/project/new-branch',
+  newTagPath: '/project/new-tag',
+  newBlobPath: '/project/new-file',
+  forkNewBlobPath: '/project/fork/new-file',
+  forkNewDirectoryPath: '/project/fork/new-directory',
+  forkUploadBlobPath: '/project/fork/upload',
+  uploadPath: '/project/upload',
+  newDirPath: '/project/new-directory',
+};
+
 describe('HeaderArea', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
     return shallowMount(HeaderArea, {
+      provide: {
+        ...defaultProvided,
+      },
       propsData: {
         projectPath: 'test/project',
         historyLink: '/history',
@@ -54,7 +73,7 @@ describe('HeaderArea', () => {
     const blobControls = wrapper.findComponent(BlobControls);
     expect(blobControls.exists()).toBe(true);
     expect(blobControls.props('projectPath')).toBe('test/project');
-    expect(blobControls.props('refType')).toBe('branch');
+    expect(blobControls.props('refType')).toBe('');
   });
 
   it('renders History button with correct href', () => {
-- 
GitLab


From 11528aa463da2c400842c5129e2164c70a73757f Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 9 Oct 2024 15:29:03 +0200
Subject: [PATCH 07/17] Add RefSelector component

Recreates RefSelector for repository within the new
header app.
---
 .../repository/components/header_area.vue     | 32 ++++++++++++++++++-
 app/assets/javascripts/repository/index.js    |  9 +++++-
 .../projects/tree/_tree_header.html.haml      |  2 +-
 .../repository/components/header_area_spec.js | 15 +++++++--
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 41a395a97e2130..89f306bd613b43 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import { escapeFileUrl } from '~/lib/utils/url_utility';
+import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
+import { generateRefDestinationPath } from '~/repository/utils/ref_switcher_utils';
+import RefSelector from '~/ref/components/ref_selector.vue';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import BlobControls from '~/repository/components/header_area/blob_controls.vue';
 
@@ -8,6 +10,7 @@ export default {
   name: 'HeaderArea',
   components: {
     GlButton,
+    RefSelector,
     Breadcrumbs,
     BlobControls,
   },
@@ -25,6 +28,7 @@ export default {
     'forkUploadBlobPath',
     'uploadPath',
     'newDirPath',
+    'projectRootPath',
   ],
   props: {
     // for blob controls
@@ -41,6 +45,15 @@ export default {
       type: String,
       required: true,
     },
+    projectId: {
+      type: String,
+      required: true,
+    },
+    refSelectorValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     historyPath() {
@@ -58,12 +71,29 @@ export default {
     currentPath() {
       return this.$route.params.path;
     },
+    reSelectorQueryParams() {
+      return {
+        sort: 'updated_desc',
+      };
+    },
+  },
+  methods: {
+    onInput(selectedRef) {
+      visitUrl(generateRefDestinationPath(this.projectRootPath, this.originalBranch, selectedRef));
+    },
   },
 };
 </script>
 
 <template>
   <section>
+    <ref-selector
+      :project-id="projectId"
+      :value="refSelectorValue"
+      use-symbolic-ref-names
+      :query-params="reSelectorQueryParams"
+      @input="onInput"
+    />
     <breadcrumbs
       :current-path="currentPath"
       :ref-type="getRefType"
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index fca8782091fca9..54e12fbeca2ee9 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -212,6 +212,7 @@ export default function setupVueRepositoryList() {
     const {
       historyLink,
       refType,
+      projectId,
       breadcrumbsCanCollaborate,
       breadcrumbsCanEditTree,
       breadcrumbsCanPushCode,
@@ -224,6 +225,7 @@ export default function setupVueRepositoryList() {
       breadcrumbsForkUploadBlobPath,
       breadcrumbsUploadPath,
       breadcrumbsNewDirPath,
+      projectRootPath,
     } = headerEl.dataset;
 
     // eslint-disable-next-line no-new
@@ -243,15 +245,20 @@ export default function setupVueRepositoryList() {
         forkUploadBlobPath: breadcrumbsForkUploadBlobPath,
         uploadPath: breadcrumbsUploadPath,
         newDirPath: breadcrumbsNewDirPath,
+        projectRootPath,
       },
       apolloProvider,
       router,
       render(h) {
         return h(HeaderArea, {
           props: {
-            projectPath,
             refType,
             historyLink,
+            // BlobControls:
+            projectPath,
+            // RefSelector:
+            projectId,
+            refSelectorValue: refType ? joinPaths('refs', refType, ref) : ref,
           },
         });
       },
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index de025432671d30..b3dae609281c1e 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,7 +1,7 @@
 - add_page_specific_style 'page_bundles/projects'
 
 - if Feature.enabled?(:common_repository_blob_header_app, current_user)
-  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes } }
+  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project) } }
 
 - else
   .tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index de30873770a9ac..c053fd49220829 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
+import RefSelector from '~/ref/components/ref_selector.vue';
 import HeaderArea from '~/repository/components/header_area.vue';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import BlobControls from '~/repository/components/header_area/blob_controls.vue';
@@ -22,6 +23,7 @@ const defaultProvided = {
   forkUploadBlobPath: '/project/fork/upload',
   uploadPath: '/project/upload',
   newDirPath: '/project/new-directory',
+  projectRootPath: '/project/root/path',
 };
 
 describe('HeaderArea', () => {
@@ -36,6 +38,8 @@ describe('HeaderArea', () => {
         projectPath: 'test/project',
         historyLink: '/history',
         refType: 'branch',
+        projectId: '123',
+        refSelectorValue: 'refs/heads/main',
         ...props,
       },
       stubs: {
@@ -58,13 +62,19 @@ describe('HeaderArea', () => {
     });
   };
 
-  it('renders the component', () => {
+  beforeEach(() => {
     wrapper = createComponent();
+  });
+
+  it('renders the component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
+  it('renders RefSelector', () => {
+    expect(wrapper.findComponent(RefSelector).exists()).toBe(true);
+  });
+
   it('renders Breadcrumbs component', () => {
-    wrapper = createComponent();
     expect(wrapper.findComponent(Breadcrumbs).exists()).toBe(true);
   });
 
@@ -77,7 +87,6 @@ describe('HeaderArea', () => {
   });
 
   it('renders History button with correct href', () => {
-    wrapper = createComponent();
     const historyButton = wrapper.findComponent(GlButton);
     expect(historyButton.exists()).toBe(true);
     expect(historyButton.attributes('href')).toContain('/history');
-- 
GitLab


From a31ea362b3e4d459bbb22dc8aa3e5814aab562bc Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 9 Oct 2024 19:51:39 +0200
Subject: [PATCH 08/17] Add Find file button

---
 .../repository/components/header_area.vue     | 61 +++++++++++++++++--
 .../repository/components/header_area_spec.js | 48 ++++++++++++---
 2 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 89f306bd613b43..4829f4bdaab003 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Shortcuts from '~/behaviors/shortcuts/shortcuts';
+import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
+import { keysFor, START_SEARCH_PROJECT_FILE } from '~/behaviors/shortcuts/keybindings';
+import { sanitize } from '~/lib/dompurify';
+import { InternalEvents } from '~/tracking';
+import { FIND_FILE_BUTTON_CLICK } from '~/tracking/constants';
 import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
 import { generateRefDestinationPath } from '~/repository/utils/ref_switcher_utils';
 import RefSelector from '~/ref/components/ref_selector.vue';
@@ -8,12 +15,20 @@ import BlobControls from '~/repository/components/header_area/blob_controls.vue'
 
 export default {
   name: 'HeaderArea',
+  i18n: {
+    findFile: __('Find file'),
+    history: __('History'),
+  },
+  buttonClassList: 'sm:gl-w-auto gl-w-full sm:gl-mt-0 gl-mt-3',
   components: {
     GlButton,
     RefSelector,
     Breadcrumbs,
     BlobControls,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: [
     'canCollaborate',
     'canEditTree',
@@ -31,7 +46,6 @@ export default {
     'projectRootPath',
   ],
   props: {
-    // for blob controls
     projectPath: {
       type: String,
       required: true,
@@ -56,6 +70,9 @@ export default {
     },
   },
   computed: {
+    isTreeView() {
+      return this.$route.name === 'treePathDecoded';
+    },
     historyPath() {
       const url = new URL(window.location.href);
       url.pathname = `${this.historyLink}/${
@@ -76,18 +93,33 @@ export default {
         sort: 'updated_desc',
       };
     },
+    findFileTooltip() {
+      const { description } = START_SEARCH_PROJECT_FILE;
+      const key = this.findFileShortcutKey;
+      return shouldDisableShortcuts()
+        ? null
+        : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+    },
+    findFileShortcutKey() {
+      return keysFor(START_SEARCH_PROJECT_FILE)[0];
+    },
   },
   methods: {
     onInput(selectedRef) {
       visitUrl(generateRefDestinationPath(this.projectRootPath, this.originalBranch, selectedRef));
     },
+    handleFindFile() {
+      InternalEvents.trackEvent(FIND_FILE_BUTTON_CLICK);
+      Shortcuts.focusSearchFile();
+    },
   },
 };
 </script>
 
 <template>
-  <section>
+  <section class="gl-flex gl-flex-col gl-items-stretch gl-gap-5 sm:gl-flex-row">
     <ref-selector
+      class="gl-max-w-26"
       :project-id="projectId"
       :value="refSelectorValue"
       use-symbolic-ref-names
@@ -111,7 +143,28 @@ export default {
       :upload-path="uploadPath"
       :new-dir-path="newDirPath"
     />
-    <gl-button :href="historyPath">{{ __('History') }}</gl-button>
+
+    <!-- Tree controls -->
+    <div v-if="isTreeView" class="gl-mb-3 gl-flex gl-flex-wrap gl-gap-3 sm:gl-mb-0">
+      <!-- = render_if_exists 'projects/tree/lock_link' -->
+      <!-- = render 'projects/buttons/compare' -->
+      <gl-button :href="historyPath" data-testid="tree-history-control">{{
+        $options.i18n.history
+      }}</gl-button>
+      <gl-button
+        v-gl-tooltip.html="findFileTooltip"
+        :aria-keyshortcuts="findFileShortcutKey"
+        data-testid="tree-find-file-control"
+        :class="$options.buttonClassList"
+        @click="handleFindFile"
+      >
+        {{ $options.i18n.findFile }}
+      </gl-button>
+      <!-- web ide for tree -->
+      <!-- code for tree + mobile panel -->
+    </div>
+
+    <!-- Blob controls -->
     <blob-controls :project-path="projectPath" :ref-type="getRefType" />
   </section>
 </template>
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index c053fd49220829..e2718ee535eca4 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -1,9 +1,11 @@
-import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { RouterLinkStub } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RefSelector from '~/ref/components/ref_selector.vue';
 import HeaderArea from '~/repository/components/header_area.vue';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import BlobControls from '~/repository/components/header_area/blob_controls.vue';
+import Shortcuts from '~/behaviors/shortcuts/shortcuts';
+import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
 
 const defaultMockRoute = {
   name: 'blobPath',
@@ -29,8 +31,12 @@ const defaultProvided = {
 describe('HeaderArea', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
-    return shallowMount(HeaderArea, {
+  const findHistoryButton = () => wrapper.findByTestId('tree-history-control');
+  const findFindFIleButton = () => wrapper.findByTestId('tree-find-file-control');
+  const { bindInternalEventDocument } = useMockInternalEventsTracking();
+
+  const createComponent = (props = {}, routeName = 'blobPathDecoded') => {
+    return shallowMountExtended(HeaderArea, {
       provide: {
         ...defaultProvided,
       },
@@ -57,6 +63,7 @@ describe('HeaderArea', () => {
           query: {
             ref_type: '',
           },
+          name: routeName,
         },
       },
     });
@@ -86,9 +93,34 @@ describe('HeaderArea', () => {
     expect(blobControls.props('refType')).toBe('');
   });
 
-  it('renders History button with correct href', () => {
-    const historyButton = wrapper.findComponent(GlButton);
-    expect(historyButton.exists()).toBe(true);
-    expect(historyButton.attributes('href')).toContain('/history');
+  describe('when rendered for tree view', () => {
+    beforeEach(() => {
+      wrapper = createComponent({}, 'treePathDecoded');
+    });
+
+    it('renders History button with correct href', () => {
+      expect(findHistoryButton().exists()).toBe(true);
+      expect(findHistoryButton().attributes('href')).toContain('/history');
+    });
+
+    it('renders Find file button', () => {
+      expect(findFindFIleButton().exists()).toBe(true);
+    });
+
+    it('triggers a `focusSearchFile` shortcut when the findFile button is clicked', () => {
+      jest.spyOn(Shortcuts, 'focusSearchFile').mockResolvedValue();
+      findFindFIleButton().vm.$emit('click');
+
+      expect(Shortcuts.focusSearchFile).toHaveBeenCalled();
+    });
+
+    it('emits a tracking event when the Find file button is clicked', () => {
+      const { trackEventSpy } = bindInternalEventDocument(wrapper.element);
+      jest.spyOn(Shortcuts, 'focusSearchFile').mockResolvedValue();
+
+      findFindFIleButton().vm.$emit('click');
+
+      expect(trackEventSpy).toHaveBeenCalledWith('click_find_file_button_on_repository_pages');
+    });
   });
 });
-- 
GitLab


From 0dce4deb27ac401605ad96d9cf08fa58d7480f49 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Thu, 10 Oct 2024 12:45:48 +0200
Subject: [PATCH 09/17] Add Compare control

Recreate Compare control for refs different than
a root ref.
Organize growing unit tests for the new header app.
---
 .../repository/components/header_area.vue     | 22 +++--
 app/assets/javascripts/repository/index.js    |  2 +
 .../projects/tree/_tree_header.html.haml      |  4 +-
 .../repository/components/header_area_spec.js | 91 +++++++++++--------
 4 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 4829f4bdaab003..7d4827444d2dcb 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -16,6 +16,7 @@ import BlobControls from '~/repository/components/header_area/blob_controls.vue'
 export default {
   name: 'HeaderArea',
   i18n: {
+    compare: __('Compare'),
     findFile: __('Find file'),
     history: __('History'),
   },
@@ -44,6 +45,7 @@ export default {
     'uploadPath',
     'newDirPath',
     'projectRootPath',
+    'comparePath',
   ],
   props: {
     projectPath: {
@@ -71,7 +73,7 @@ export default {
   },
   computed: {
     isTreeView() {
-      return this.$route.name === 'treePathDecoded';
+      return this.$route.name !== 'blobPathDecoded';
     },
     historyPath() {
       const url = new URL(window.location.href);
@@ -88,7 +90,7 @@ export default {
     currentPath() {
       return this.$route.params.path;
     },
-    reSelectorQueryParams() {
+    refSelectorQueryParams() {
       return {
         sort: 'updated_desc',
       };
@@ -123,7 +125,7 @@ export default {
       :project-id="projectId"
       :value="refSelectorValue"
       use-symbolic-ref-names
-      :query-params="reSelectorQueryParams"
+      :query-params="refSelectorQueryParams"
       @input="onInput"
     />
     <breadcrumbs
@@ -146,8 +148,14 @@ export default {
 
     <!-- Tree controls -->
     <div v-if="isTreeView" class="gl-mb-3 gl-flex gl-flex-wrap gl-gap-3 sm:gl-mb-0">
-      <!-- = render_if_exists 'projects/tree/lock_link' -->
-      <!-- = render 'projects/buttons/compare' -->
+      <!-- EE: = render_if_exists 'projects/tree/lock_link' -->
+      <gl-button
+        v-if="comparePath"
+        data-testid="tree-compare-control"
+        :href="comparePath"
+        class="shortcuts-compare"
+        >{{ $options.i18n.compare }}</gl-button
+      >
       <gl-button :href="historyPath" data-testid="tree-history-control">{{
         $options.i18n.history
       }}</gl-button>
@@ -160,8 +168,8 @@ export default {
       >
         {{ $options.i18n.findFile }}
       </gl-button>
-      <!-- web ide for tree -->
-      <!-- code for tree + mobile panel -->
+      <!-- web ide -->
+      <!-- code + mobile panel -->
     </div>
 
     <!-- Blob controls -->
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 54e12fbeca2ee9..4f86ac11a71286 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -226,6 +226,7 @@ export default function setupVueRepositoryList() {
       breadcrumbsUploadPath,
       breadcrumbsNewDirPath,
       projectRootPath,
+      comparePath,
     } = headerEl.dataset;
 
     // eslint-disable-next-line no-new
@@ -246,6 +247,7 @@ export default function setupVueRepositoryList() {
         uploadPath: breadcrumbsUploadPath,
         newDirPath: breadcrumbsNewDirPath,
         projectRootPath,
+        comparePath,
       },
       apolloProvider,
       router,
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index b3dae609281c1e..f0907ae49d21a8 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,7 +1,9 @@
 - add_page_specific_style 'page_bundles/projects'
+- unless @ref.blank? ||  @repository&.root_ref == @ref
+  - compare_path = project_compare_index_path(@project, from:  @repository&.root_ref, to: @ref)
 
 - if Feature.enabled?(:common_repository_blob_header_app, current_user)
-  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project) } }
+  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
 
 - else
   .tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index e2718ee535eca4..47d07139496c06 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -8,7 +8,15 @@ import Shortcuts from '~/behaviors/shortcuts/shortcuts';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
 
 const defaultMockRoute = {
-  name: 'blobPath',
+  params: {
+    path: '',
+  },
+  meta: {
+    refType: '',
+  },
+  query: {
+    ref_type: '',
+  },
 };
 
 const defaultProvided = {
@@ -26,19 +34,22 @@ const defaultProvided = {
   uploadPath: '/project/upload',
   newDirPath: '/project/new-directory',
   projectRootPath: '/project/root/path',
+  comparePath: undefined,
 };
 
 describe('HeaderArea', () => {
   let wrapper;
 
   const findHistoryButton = () => wrapper.findByTestId('tree-history-control');
-  const findFindFIleButton = () => wrapper.findByTestId('tree-find-file-control');
+  const findFindFileButton = () => wrapper.findByTestId('tree-find-file-control');
+  const findCompareButton = () => wrapper.findByTestId('tree-compare-control');
   const { bindInternalEventDocument } = useMockInternalEventsTracking();
 
-  const createComponent = (props = {}, routeName = 'blobPathDecoded') => {
+  const createComponent = (props = {}, routeName = 'blobPathDecoded', provided = {}) => {
     return shallowMountExtended(HeaderArea, {
       provide: {
         ...defaultProvided,
+        ...provided,
       },
       propsData: {
         projectPath: 'test/project',
@@ -53,16 +64,7 @@ describe('HeaderArea', () => {
       },
       mocks: {
         $route: {
-          defaultMockRoute,
-          params: {
-            path: '',
-          },
-          meta: {
-            refType: '',
-          },
-          query: {
-            ref_type: '',
-          },
+          ...defaultMockRoute,
           name: routeName,
         },
       },
@@ -85,42 +87,59 @@ describe('HeaderArea', () => {
     expect(wrapper.findComponent(Breadcrumbs).exists()).toBe(true);
   });
 
-  it('renders BlobControls component with correct props', () => {
-    wrapper = createComponent({ refType: 'branch' });
-    const blobControls = wrapper.findComponent(BlobControls);
-    expect(blobControls.exists()).toBe(true);
-    expect(blobControls.props('projectPath')).toBe('test/project');
-    expect(blobControls.props('refType')).toBe('');
-  });
-
   describe('when rendered for tree view', () => {
     beforeEach(() => {
       wrapper = createComponent({}, 'treePathDecoded');
     });
 
-    it('renders History button with correct href', () => {
-      expect(findHistoryButton().exists()).toBe(true);
-      expect(findHistoryButton().attributes('href')).toContain('/history');
+    describe('History button', () => {
+      it('renders History button with correct href', () => {
+        expect(findHistoryButton().exists()).toBe(true);
+        expect(findHistoryButton().attributes('href')).toContain('/history');
+      });
     });
 
-    it('renders Find file button', () => {
-      expect(findFindFIleButton().exists()).toBe(true);
-    });
+    describe('Find file button', () => {
+      it('renders Find file button', () => {
+        expect(findFindFileButton().exists()).toBe(true);
+      });
+
+      it('triggers a `focusSearchFile` shortcut when the findFile button is clicked', () => {
+        jest.spyOn(Shortcuts, 'focusSearchFile').mockResolvedValue();
+        findFindFileButton().vm.$emit('click');
 
-    it('triggers a `focusSearchFile` shortcut when the findFile button is clicked', () => {
-      jest.spyOn(Shortcuts, 'focusSearchFile').mockResolvedValue();
-      findFindFIleButton().vm.$emit('click');
+        expect(Shortcuts.focusSearchFile).toHaveBeenCalled();
+      });
 
-      expect(Shortcuts.focusSearchFile).toHaveBeenCalled();
+      it('emits a tracking event when the Find file button is clicked', () => {
+        const { trackEventSpy } = bindInternalEventDocument(wrapper.element);
+        jest.spyOn(Shortcuts, 'focusSearchFile').mockResolvedValue();
+
+        findFindFileButton().vm.$emit('click');
+
+        expect(trackEventSpy).toHaveBeenCalledWith('click_find_file_button_on_repository_pages');
+      });
     });
 
-    it('emits a tracking event when the Find file button is clicked', () => {
-      const { trackEventSpy } = bindInternalEventDocument(wrapper.element);
-      jest.spyOn(Shortcuts, 'focusSearchFile').mockResolvedValue();
+    describe('Compare button', () => {
+      it('does not render Compare button for root ref', () => {
+        expect(findCompareButton().exists()).not.toBe(true);
+      });
 
-      findFindFIleButton().vm.$emit('click');
+      it('renders Compare button for non-root ref', () => {
+        wrapper = createComponent({}, 'treePathDecoded', { comparePath: 'test/project/compare' });
+        expect(findCompareButton().exists()).toBe(true);
+      });
+    });
+  });
 
-      expect(trackEventSpy).toHaveBeenCalledWith('click_find_file_button_on_repository_pages');
+  describe('when rendered for blob view', () => {
+    it('renders BlobControls component with correct props', () => {
+      wrapper = createComponent({ refType: 'branch' });
+      const blobControls = wrapper.findComponent(BlobControls);
+      expect(blobControls.exists()).toBe(true);
+      expect(blobControls.props('projectPath')).toBe('test/project');
+      expect(blobControls.props('refType')).toBe('');
     });
   });
 });
-- 
GitLab


From c0fadfe61acc34451f121a0da054aee7e37f201b Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Thu, 10 Oct 2024 16:35:00 +0200
Subject: [PATCH 10/17] Apply current layout

Move the point of decision for the new header app in order
to reapply current layout.
Move page specific CSS to one file up.
---
 .../repository/components/header_area.vue     | 57 ++++++++++---------
 app/views/projects/_files.html.haml           | 11 +++-
 app/views/projects/_readme.html.haml          | 12 +++-
 .../projects/tree/_tree_header.html.haml      | 42 ++++++--------
 4 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 7d4827444d2dcb..a80a35d2349696 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -119,35 +119,38 @@ export default {
 </script>
 
 <template>
-  <section class="gl-flex gl-flex-col gl-items-stretch gl-gap-5 sm:gl-flex-row">
-    <ref-selector
-      class="gl-max-w-26"
-      :project-id="projectId"
-      :value="refSelectorValue"
-      use-symbolic-ref-names
-      :query-params="refSelectorQueryParams"
-      @input="onInput"
-    />
-    <breadcrumbs
-      :current-path="currentPath"
-      :ref-type="getRefType"
-      :can-collaborate="canCollaborate"
-      :can-edit-tree="canEditTree"
-      :can-push-code="canPushCode"
-      :original-branch="originalBranch"
-      :selected-branch="selectedBranch"
-      :new-branch-path="newBranchPath"
-      :new-tag-path="newTagPath"
-      :new-blob-path="newBlobPath"
-      :fork-new-blob-path="forkNewBlobPath"
-      :fork-new-directory-path="forkNewDirectoryPath"
-      :fork-upload-blob-path="forkUploadBlobPath"
-      :upload-path="uploadPath"
-      :new-dir-path="newDirPath"
-    />
+  <section class="nav-block gl-flex gl-flex-col gl-items-stretch sm:gl-flex-row">
+    <div class="tree-ref-container mb-2 mb-md-0 gl-flex gl-flex-wrap gl-gap-2">
+      <ref-selector
+        class="tree-ref-holder gl-max-w-26"
+        :project-id="projectId"
+        :value="refSelectorValue"
+        use-symbolic-ref-names
+        :query-params="refSelectorQueryParams"
+        @input="onInput"
+      />
+      <breadcrumbs
+        class="js-repo-breadcrumbs"
+        :current-path="currentPath"
+        :ref-type="getRefType"
+        :can-collaborate="canCollaborate"
+        :can-edit-tree="canEditTree"
+        :can-push-code="canPushCode"
+        :original-branch="originalBranch"
+        :selected-branch="selectedBranch"
+        :new-branch-path="newBranchPath"
+        :new-tag-path="newTagPath"
+        :new-blob-path="newBlobPath"
+        :fork-new-blob-path="forkNewBlobPath"
+        :fork-new-directory-path="forkNewDirectoryPath"
+        :fork-upload-blob-path="forkUploadBlobPath"
+        :upload-path="uploadPath"
+        :new-dir-path="newDirPath"
+      />
+    </div>
 
     <!-- Tree controls -->
-    <div v-if="isTreeView" class="gl-mb-3 gl-flex gl-flex-wrap gl-gap-3 sm:gl-mb-0">
+    <div v-if="isTreeView" class="tree-controls gl-mb-3 gl-flex gl-flex-wrap gl-gap-3 sm:gl-mb-0">
       <!-- EE: = render_if_exists 'projects/tree/lock_link' -->
       <gl-button
         v-if="comparePath"
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 138c99852c1644..b51937e404affd 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -4,10 +4,17 @@
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 - add_page_specific_style 'page_bundles/commit_description'
+- add_page_specific_style 'page_bundles/projects'
+- unless @ref.blank? ||  @repository&.root_ref == @ref
+  - compare_path = project_compare_index_path(@project, from:  @repository&.root_ref, to: @ref)
 
 #tree-holder.tree-holder.clearfix.js-per-page.gl-mt-5{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
-  .nav-block.gl-flex.gl-flex-col.sm:gl-flex-row.gl-items-stretch
-    = render 'projects/tree/tree_header', tree: @tree
+  - if Feature.enabled?(:common_repository_blob_header_app, current_user)
+    #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
+
+  - else
+    .nav-block.gl-flex.gl-flex-col.sm:gl-flex-row.gl-items-stretch
+      = render 'projects/tree/tree_header', tree: @tree
 
   - if project.forked?
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index fc9ddb650e9cf1..0a71ca7ef29f59 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -1,7 +1,15 @@
+- add_page_specific_style 'page_bundles/projects'
+- unless @ref.blank? ||  @repository&.root_ref == @ref
+  - compare_path = project_compare_index_path(@project, from:  @repository&.root_ref, to: @ref)
+
 - if (readme = @repository.readme) && readme.rich_viewer
   .tree-holder.gl-mt-5
-    .nav-block.mt-0
-      = render 'projects/tree/tree_header', tree: @tree
+    - if Feature.enabled?(:common_repository_blob_header_app, current_user)
+      #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
+
+    - else
+      .nav-block.mt-0
+        = render 'projects/tree/tree_header', tree: @tree
   %article.file-holder.readme-holder{ id: 'readme', class: ("limited-width-container" unless fluid_layout) }
     .js-file-title.file-title-flex-parent
       .file-header-content
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index f0907ae49d21a8..53adf6b4d7b056 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,31 +1,23 @@
-- add_page_specific_style 'page_bundles/projects'
-- unless @ref.blank? ||  @repository&.root_ref == @ref
-  - compare_path = project_compare_index_path(@project, from:  @repository&.root_ref, to: @ref)
+.tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
+  .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
+    #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
 
-- if Feature.enabled?(:common_repository_blob_header_app, current_user)
-  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
+  #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
 
-- else
-  .tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
-    .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
-      #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
+#js-blob-controls
+.tree-controls
+  .gl-flex.gl-flex-wrap.gl-gap-3.gl-mb-3.sm:gl-mb-0
+    = render_if_exists 'projects/tree/lock_link'
+    = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
 
-    #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
-  #js-blob-controls
-  .tree-controls
-    .gl-flex.gl-flex-wrap.gl-gap-3.gl-mb-3.sm:gl-mb-0
-      = render_if_exists 'projects/tree/lock_link'
-      = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
+    = render 'projects/find_file_link'
+    = render 'shared/web_ide_button', blob: nil, css_classes: 'gl-w-full sm:gl-w-auto'
 
-      #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
+    .project-code-holder.gl-hidden.sm:gl-inline-block
+      = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
 
-      = render 'projects/find_file_link'
-      = render 'shared/web_ide_button', blob: nil, css_classes: 'gl-w-full sm:gl-w-auto'
-
-      .project-code-holder.gl-hidden.sm:gl-inline-block
-        = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
-
-    .project-code-holder.gl-flex.gl-gap-3{ class: 'sm:!gl-hidden' }
-      = render 'projects/buttons/download', project: @project, ref: @ref
-      = render "shared/mobile_clone_panel", ref: @ref
+  .project-code-holder.gl-flex.gl-gap-3{ class: 'sm:!gl-hidden' }
+    = render 'projects/buttons/download', project: @project, ref: @ref
+    = render "shared/mobile_clone_panel", ref: @ref
-- 
GitLab


From a984debe155913f0bba13748b8e1f8e8d07f84f0 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Thu, 10 Oct 2024 16:53:13 +0200
Subject: [PATCH 11/17] Temporarily run feature tests only for old version

---
 spec/features/projects/files/user_searches_for_files_spec.rb     | 1 +
 spec/features/projects/show/clone_button_spec.rb                 | 1 +
 .../features/projects/show/user_sees_collaboration_links_spec.rb | 1 +
 spec/features/projects/show/user_sees_git_instructions_spec.rb   | 1 +
 spec/features/projects/tree/create_directory_spec.rb             | 1 +
 spec/features/projects/tree/create_file_spec.rb                  | 1 +
 spec/features/projects/tree/tree_show_spec.rb                    | 1 +
 spec/views/projects/tree/show.html.haml_spec.rb                  | 1 +
 8 files changed, 8 insertions(+)

diff --git a/spec/features/projects/files/user_searches_for_files_spec.rb b/spec/features/projects/files/user_searches_for_files_spec.rb
index 587e87a21ddab0..fb465de6994fff 100644
--- a/spec/features/projects/files/user_searches_for_files_spec.rb
+++ b/spec/features/projects/files/user_searches_for_files_spec.rb
@@ -7,6 +7,7 @@
   let_it_be(:project) { create(:project, :repository, namespace: user.namespace) }
 
   before do
+    stub_feature_flags(common_repository_blob_header_app: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/show/clone_button_spec.rb b/spec/features/projects/show/clone_button_spec.rb
index 0dea5887c013a8..7cf76c58907fa1 100644
--- a/spec/features/projects/show/clone_button_spec.rb
+++ b/spec/features/projects/show/clone_button_spec.rb
@@ -10,6 +10,7 @@
   describe 'when checking project main page user' do
     context 'with an admin role' do
       before do
+        stub_feature_flags(common_repository_blob_header_app: false)
         project.add_owner(admin)
         sign_in(admin)
         visit project_path(project)
diff --git a/spec/features/projects/show/user_sees_collaboration_links_spec.rb b/spec/features/projects/show/user_sees_collaboration_links_spec.rb
index fa065cf0a1021c..09419e8d6fd430 100644
--- a/spec/features/projects/show/user_sees_collaboration_links_spec.rb
+++ b/spec/features/projects/show/user_sees_collaboration_links_spec.rb
@@ -9,6 +9,7 @@
   let_it_be(:user) { create(:user) }
 
   before do
+    stub_feature_flags(common_repository_blob_header_app: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/show/user_sees_git_instructions_spec.rb b/spec/features/projects/show/user_sees_git_instructions_spec.rb
index 52aa32f58f8c8c..815cc0c78d5c81 100644
--- a/spec/features/projects/show/user_sees_git_instructions_spec.rb
+++ b/spec/features/projects/show/user_sees_git_instructions_spec.rb
@@ -10,6 +10,7 @@
     # validation failure on NotificationSetting.
     # See https://gitlab.com/gitlab-org/gitlab/-/issues/299822#note_492817174
     user.notification_settings.reset
+    stub_feature_flags(common_repository_blob_header_app: false)
   end
 
   shared_examples_for 'redirects to the sign in page' do
diff --git a/spec/features/projects/tree/create_directory_spec.rb b/spec/features/projects/tree/create_directory_spec.rb
index 7345082b6fe3ad..16911e507a5dc8 100644
--- a/spec/features/projects/tree/create_directory_spec.rb
+++ b/spec/features/projects/tree/create_directory_spec.rb
@@ -10,6 +10,7 @@
 
   before do
     stub_feature_flags(vscode_web_ide: false)
+    stub_feature_flags(common_repository_blob_header_app: false)
 
     project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/features/projects/tree/create_file_spec.rb b/spec/features/projects/tree/create_file_spec.rb
index a3ff8de719a407..ece719f65b7c2b 100644
--- a/spec/features/projects/tree/create_file_spec.rb
+++ b/spec/features/projects/tree/create_file_spec.rb
@@ -10,6 +10,7 @@
 
   before do
     stub_feature_flags(vscode_web_ide: false)
+    stub_feature_flags(common_repository_blob_header_app: false)
 
     project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/features/projects/tree/tree_show_spec.rb b/spec/features/projects/tree/tree_show_spec.rb
index 4a913d82a78ec7..db896d54e2a506 100644
--- a/spec/features/projects/tree/tree_show_spec.rb
+++ b/spec/features/projects/tree/tree_show_spec.rb
@@ -16,6 +16,7 @@
 
   before do
     stub_application_setting(gravatar_enabled: gravatar_enabled)
+    stub_feature_flags(common_repository_blob_header_app: false)
 
     project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/views/projects/tree/show.html.haml_spec.rb b/spec/views/projects/tree/show.html.haml_spec.rb
index 942c352c6b64b4..8233f2a105fc90 100644
--- a/spec/views/projects/tree/show.html.haml_spec.rb
+++ b/spec/views/projects/tree/show.html.haml_spec.rb
@@ -13,6 +13,7 @@
   let(:tree) { repository.tree(commit.id, path) }
 
   before do
+    stub_feature_flags(common_repository_blob_header_app: false)
     assign(:project, project)
     assign(:repository, repository)
 
-- 
GitLab


From 5816bac07475c003586c2e8f920249d3e38e98ac Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 11 Oct 2024 14:45:06 +0200
Subject: [PATCH 12/17] Data-testid for refSelector

---
 app/assets/javascripts/repository/components/header_area.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index a80a35d2349696..330ab5bf8feb85 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -123,6 +123,7 @@ export default {
     <div class="tree-ref-container mb-2 mb-md-0 gl-flex gl-flex-wrap gl-gap-2">
       <ref-selector
         class="tree-ref-holder gl-max-w-26"
+        data-testid="ref-dropdown-container"
         :project-id="projectId"
         :value="refSelectorValue"
         use-symbolic-ref-names
-- 
GitLab


From ac89ab22f4e17f82fb69817aa12052ecaf22d584 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 11 Oct 2024 16:19:25 +0200
Subject: [PATCH 13/17] Update a path for a QA selector

---
 qa/qa/page/project/show.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/qa/qa/page/project/show.rb b/qa/qa/page/project/show.rb
index 1652e15cb21da2..f45852a1d46156 100644
--- a/qa/qa/page/project/show.rb
+++ b/qa/qa/page/project/show.rb
@@ -48,7 +48,7 @@ class Show < Page::Base
           element 'quick-actions-container'
         end
 
-        view 'app/assets/javascripts/repository/components/breadcrumbs.vue' do
+        view 'app/assets/javascripts/repository/components/header_area/breadcrumbs.vue' do
           element 'add-to-tree'
           element 'new-file-menu-item'
         end
-- 
GitLab


From 2f65e782ec6d511d80e5d6ac7ad42d3f80918fb3 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 29 Oct 2024 13:31:45 +0100
Subject: [PATCH 14/17] Replace feature flag with URL param

Temporarily replaces the FF check with URL param to avoid E2E failures
---
 app/views/projects/_files.html.haml                      | 2 +-
 app/views/projects/_readme.html.haml                     | 2 +-
 .../common_repository_blob_header_app.yml                | 9 ---------
 lib/gitlab/gon_helper.rb                                 | 1 -
 .../projects/files/user_searches_for_files_spec.rb       | 1 -
 spec/features/projects/show/clone_button_spec.rb         | 1 -
 .../projects/show/user_sees_collaboration_links_spec.rb  | 1 -
 .../projects/show/user_sees_git_instructions_spec.rb     | 1 -
 spec/features/projects/tree/create_directory_spec.rb     | 1 -
 spec/features/projects/tree/create_file_spec.rb          | 1 -
 spec/features/projects/tree/tree_show_spec.rb            | 1 -
 spec/views/projects/tree/show.html.haml_spec.rb          | 1 -
 12 files changed, 2 insertions(+), 20 deletions(-)
 delete mode 100644 config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml

diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index b51937e404affd..1df7d5f2f2b071 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -9,7 +9,7 @@
   - compare_path = project_compare_index_path(@project, from:  @repository&.root_ref, to: @ref)
 
 #tree-holder.tree-holder.clearfix.js-per-page.gl-mt-5{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
-  - if Feature.enabled?(:common_repository_blob_header_app, current_user)
+  - if params[:common_repository_blob_header_app] == 'true'
     #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
 
   - else
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index 0a71ca7ef29f59..a915481a7858e3 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -4,7 +4,7 @@
 
 - if (readme = @repository.readme) && readme.rich_viewer
   .tree-holder.gl-mt-5
-    - if Feature.enabled?(:common_repository_blob_header_app, current_user)
+    - if params[:common_repository_blob_header_app] == 'true'
       #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
 
     - else
diff --git a/config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml b/config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml
deleted file mode 100644
index 2863e0ce0ed6de..00000000000000
--- a/config/feature_flags/gitlab_com_derisk/common_repository_blob_header_app.yml
+++ /dev/null
@@ -1,9 +0,0 @@
----
-name: common_repository_blob_header_app
-feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/497051
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167906
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/497345
-milestone: '17.5'
-group: group::source code
-type: gitlab_com_derisk
-default_enabled: false
diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index 938deeaf9e4070..5d6963307b14fe 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -80,7 +80,6 @@ def add_gon_variables
 
       # Initialize gon.features with any flags that should be
       # made globally available to the frontend
-      push_frontend_feature_flag(:common_repository_blob_header_app, current_user)
       push_frontend_feature_flag(:source_editor_toolbar)
       push_frontend_feature_flag(:vscode_web_ide, current_user)
       push_frontend_feature_flag(:ui_for_organizations, current_user)
diff --git a/spec/features/projects/files/user_searches_for_files_spec.rb b/spec/features/projects/files/user_searches_for_files_spec.rb
index fb465de6994fff..587e87a21ddab0 100644
--- a/spec/features/projects/files/user_searches_for_files_spec.rb
+++ b/spec/features/projects/files/user_searches_for_files_spec.rb
@@ -7,7 +7,6 @@
   let_it_be(:project) { create(:project, :repository, namespace: user.namespace) }
 
   before do
-    stub_feature_flags(common_repository_blob_header_app: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/show/clone_button_spec.rb b/spec/features/projects/show/clone_button_spec.rb
index 7cf76c58907fa1..0dea5887c013a8 100644
--- a/spec/features/projects/show/clone_button_spec.rb
+++ b/spec/features/projects/show/clone_button_spec.rb
@@ -10,7 +10,6 @@
   describe 'when checking project main page user' do
     context 'with an admin role' do
       before do
-        stub_feature_flags(common_repository_blob_header_app: false)
         project.add_owner(admin)
         sign_in(admin)
         visit project_path(project)
diff --git a/spec/features/projects/show/user_sees_collaboration_links_spec.rb b/spec/features/projects/show/user_sees_collaboration_links_spec.rb
index 09419e8d6fd430..fa065cf0a1021c 100644
--- a/spec/features/projects/show/user_sees_collaboration_links_spec.rb
+++ b/spec/features/projects/show/user_sees_collaboration_links_spec.rb
@@ -9,7 +9,6 @@
   let_it_be(:user) { create(:user) }
 
   before do
-    stub_feature_flags(common_repository_blob_header_app: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/show/user_sees_git_instructions_spec.rb b/spec/features/projects/show/user_sees_git_instructions_spec.rb
index 815cc0c78d5c81..52aa32f58f8c8c 100644
--- a/spec/features/projects/show/user_sees_git_instructions_spec.rb
+++ b/spec/features/projects/show/user_sees_git_instructions_spec.rb
@@ -10,7 +10,6 @@
     # validation failure on NotificationSetting.
     # See https://gitlab.com/gitlab-org/gitlab/-/issues/299822#note_492817174
     user.notification_settings.reset
-    stub_feature_flags(common_repository_blob_header_app: false)
   end
 
   shared_examples_for 'redirects to the sign in page' do
diff --git a/spec/features/projects/tree/create_directory_spec.rb b/spec/features/projects/tree/create_directory_spec.rb
index 16911e507a5dc8..7345082b6fe3ad 100644
--- a/spec/features/projects/tree/create_directory_spec.rb
+++ b/spec/features/projects/tree/create_directory_spec.rb
@@ -10,7 +10,6 @@
 
   before do
     stub_feature_flags(vscode_web_ide: false)
-    stub_feature_flags(common_repository_blob_header_app: false)
 
     project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/features/projects/tree/create_file_spec.rb b/spec/features/projects/tree/create_file_spec.rb
index ece719f65b7c2b..a3ff8de719a407 100644
--- a/spec/features/projects/tree/create_file_spec.rb
+++ b/spec/features/projects/tree/create_file_spec.rb
@@ -10,7 +10,6 @@
 
   before do
     stub_feature_flags(vscode_web_ide: false)
-    stub_feature_flags(common_repository_blob_header_app: false)
 
     project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/features/projects/tree/tree_show_spec.rb b/spec/features/projects/tree/tree_show_spec.rb
index db896d54e2a506..4a913d82a78ec7 100644
--- a/spec/features/projects/tree/tree_show_spec.rb
+++ b/spec/features/projects/tree/tree_show_spec.rb
@@ -16,7 +16,6 @@
 
   before do
     stub_application_setting(gravatar_enabled: gravatar_enabled)
-    stub_feature_flags(common_repository_blob_header_app: false)
 
     project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/views/projects/tree/show.html.haml_spec.rb b/spec/views/projects/tree/show.html.haml_spec.rb
index 8233f2a105fc90..942c352c6b64b4 100644
--- a/spec/views/projects/tree/show.html.haml_spec.rb
+++ b/spec/views/projects/tree/show.html.haml_spec.rb
@@ -13,7 +13,6 @@
   let(:tree) { repository.tree(commit.id, path) }
 
   before do
-    stub_feature_flags(common_repository_blob_header_app: false)
     assign(:project, project)
     assign(:repository, repository)
 
-- 
GitLab


From 7ea45c794136e141b3527f7d79b2fc3e4b89c979 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Wed, 30 Oct 2024 09:09:42 +0100
Subject: [PATCH 15/17] Update file paths in quarantined vue3 specs

Update the file paths of moved files in quarantined specs
---
 scripts/frontend/quarantined_vue3_specs.txt | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/frontend/quarantined_vue3_specs.txt b/scripts/frontend/quarantined_vue3_specs.txt
index 1adfae5b8a917b..2ca7cbc9a0fcf3 100644
--- a/scripts/frontend/quarantined_vue3_specs.txt
+++ b/scripts/frontend/quarantined_vue3_specs.txt
@@ -379,8 +379,8 @@ spec/frontend/releases/components/asset_links_form_spec.js
 spec/frontend/releases/components/tag_create_spec.js
 spec/frontend/releases/components/tag_field_exsting_spec.js
 spec/frontend/releases/components/tag_search_spec.js
-spec/frontend/repository/components/blob_controls_spec.js
-spec/frontend/repository/components/breadcrumbs_spec.js
+spec/frontend/repository/components/header_area/blob_controls_spec.js
+spec/frontend/repository/components/header_area/breadcrumbs_spec.js
 spec/frontend/repository/components/table/index_spec.js
 spec/frontend/repository/components/table/row_spec.js
 spec/frontend/repository/router_spec.js
-- 
GitLab


From 09a33b87e8f4c0186b83a3fef3c1db0db2655d50 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 4 Nov 2024 11:13:36 +0100
Subject: [PATCH 16/17] Address code review comments

Fixed readme header + general cleanup
---
 .../javascripts/pages/projects/show/index.js  |  2 +
 .../repository/components/header_area.vue     | 20 ++++--
 .../components/header_area/breadcrumbs.vue    |  7 +-
 app/assets/javascripts/repository/index.js    | 63 +---------------
 .../javascripts/repository/init_header_app.js | 71 +++++++++++++++++++
 app/views/projects/_files.html.haml           |  2 +-
 app/views/projects/_readme.html.haml          |  4 +-
 .../header_area/breadcrumbs_spec.js           |  3 +
 .../repository/components/header_area_spec.js | 19 ++++-
 9 files changed, 118 insertions(+), 73 deletions(-)
 create mode 100644 app/assets/javascripts/repository/init_header_app.js

diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index eb6cb11832cf3e..8c05fabbb24289 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -11,6 +11,7 @@ import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 import CodeDropdown from '~/vue_shared/components/code_dropdown/code_dropdown.vue';
 import initSourceCodeDropdowns from '~/vue_shared/components/download_dropdown/init_download_dropdowns';
 import EmptyProject from '~/pages/projects/show/empty_project';
+import initHeaderApp from '~/repository/init_header_app';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import { initHomePanel } from '../home_panel';
 
@@ -27,6 +28,7 @@ if (document.querySelector('.blob-viewer')) {
   import(/* webpackChunkName: 'blobViewer' */ '~/blob/viewer')
     .then(({ BlobViewer }) => {
       new BlobViewer(); // eslint-disable-line no-new
+      initHeaderApp(true);
     })
     .catch(() => {});
 }
diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 330ab5bf8feb85..e0f480c2ac1373 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -7,7 +7,7 @@ import { keysFor, START_SEARCH_PROJECT_FILE } from '~/behaviors/shortcuts/keybin
 import { sanitize } from '~/lib/dompurify';
 import { InternalEvents } from '~/tracking';
 import { FIND_FILE_BUTTON_CLICK } from '~/tracking/constants';
-import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
+import { escapeFileUrl, visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import { generateRefDestinationPath } from '~/repository/utils/ref_switcher_utils';
 import RefSelector from '~/ref/components/ref_selector.vue';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
@@ -46,6 +46,7 @@ export default {
     'newDirPath',
     'projectRootPath',
     'comparePath',
+    'isReadmeView',
   ],
   props: {
     projectPath: {
@@ -57,6 +58,11 @@ export default {
       required: false,
       default: null,
     },
+    currentRef: {
+      type: String,
+      required: false,
+      default: null,
+    },
     historyLink: {
       type: String,
       required: true,
@@ -65,11 +71,6 @@ export default {
       type: String,
       required: true,
     },
-    refSelectorValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     isTreeView() {
@@ -95,6 +96,9 @@ export default {
         sort: 'updated_desc',
       };
     },
+    refSelectorValue() {
+      return this.refType ? joinPaths('refs', this.refType, this.currentRef) : this.currentRef;
+    },
     findFileTooltip() {
       const { description } = START_SEARCH_PROJECT_FILE;
       const key = this.findFileShortcutKey;
@@ -122,6 +126,7 @@ export default {
   <section class="nav-block gl-flex gl-flex-col gl-items-stretch sm:gl-flex-row">
     <div class="tree-ref-container mb-2 mb-md-0 gl-flex gl-flex-wrap gl-gap-2">
       <ref-selector
+        v-if="!isReadmeView"
         class="tree-ref-holder gl-max-w-26"
         data-testid="ref-dropdown-container"
         :project-id="projectId"
@@ -131,6 +136,7 @@ export default {
         @input="onInput"
       />
       <breadcrumbs
+        v-if="!isReadmeView"
         class="js-repo-breadcrumbs"
         :current-path="currentPath"
         :ref-type="getRefType"
@@ -160,7 +166,7 @@ export default {
         class="shortcuts-compare"
         >{{ $options.i18n.compare }}</gl-button
       >
-      <gl-button :href="historyPath" data-testid="tree-history-control">{{
+      <gl-button v-if="!isReadmeView" :href="historyPath" data-testid="tree-history-control">{{
         $options.i18n.history
       }}</gl-button>
       <gl-button
diff --git a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
index dc5813dff823d6..b53607f08b7c07 100644
--- a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
@@ -31,7 +31,7 @@ export default {
       query: permissionsQuery,
       variables() {
         return {
-          projectPath: this.projectPath,
+          projectPath: this.projectPath || this.projectRootPath,
         };
       },
       update: (data) => data.project?.userPermissions,
@@ -44,6 +44,11 @@ export default {
     GlModal: GlModalDirective,
   },
   mixins: [getRefMixin],
+  inject: {
+    projectRootPath: {
+      default: '',
+    },
+  },
   props: {
     currentPath: {
       type: String,
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 4f86ac11a71286..60dee669c60ff5 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -16,7 +16,6 @@ import Breadcrumbs from './components/header_area/breadcrumbs.vue';
 import ForkInfo from './components/fork_info.vue';
 import LastCommit from './components/last_commit.vue';
 import BlobControls from './components/header_area/blob_controls.vue';
-import HeaderArea from './components/header_area.vue';
 import apolloProvider from './graphql';
 import commitsQuery from './queries/commits.query.graphql';
 import projectPathQuery from './queries/project_path.query.graphql';
@@ -26,6 +25,7 @@ import createRouter from './router';
 import { updateFormAction } from './utils/dom';
 import { setTitle } from './utils/title';
 import { generateRefDestinationPath } from './utils/ref_switcher_utils';
+import initHeaderApp from './init_header_app';
 
 Vue.use(Vuex);
 Vue.use(PerformancePlugin, {
@@ -197,6 +197,7 @@ export default function setupVueRepositoryList() {
     });
   };
 
+  initHeaderApp();
   initCodeDropdown();
   initLastCommitApp();
   initBlobControlsApp();
@@ -207,66 +208,6 @@ export default function setupVueRepositoryList() {
     setTitle(path, ref, fullName);
   });
 
-  const headerEl = document.getElementById('js-repository-blob-header-app');
-  if (headerEl) {
-    const {
-      historyLink,
-      refType,
-      projectId,
-      breadcrumbsCanCollaborate,
-      breadcrumbsCanEditTree,
-      breadcrumbsCanPushCode,
-      breadcrumbsSelectedBranch,
-      breadcrumbsNewBranchPath,
-      breadcrumbsNewTagPath,
-      breadcrumbsNewBlobPath,
-      breadcrumbsForkNewBlobPath,
-      breadcrumbsForkNewDirectoryPath,
-      breadcrumbsForkUploadBlobPath,
-      breadcrumbsUploadPath,
-      breadcrumbsNewDirPath,
-      projectRootPath,
-      comparePath,
-    } = headerEl.dataset;
-
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: headerEl,
-      provide: {
-        canCollaborate: parseBoolean(breadcrumbsCanCollaborate),
-        canEditTree: parseBoolean(breadcrumbsCanEditTree),
-        canPushCode: parseBoolean(breadcrumbsCanPushCode),
-        originalBranch: ref,
-        selectedBranch: breadcrumbsSelectedBranch,
-        newBranchPath: breadcrumbsNewBranchPath,
-        newTagPath: breadcrumbsNewTagPath,
-        newBlobPath: breadcrumbsNewBlobPath,
-        forkNewBlobPath: breadcrumbsForkNewBlobPath,
-        forkNewDirectoryPath: breadcrumbsForkNewDirectoryPath,
-        forkUploadBlobPath: breadcrumbsForkUploadBlobPath,
-        uploadPath: breadcrumbsUploadPath,
-        newDirPath: breadcrumbsNewDirPath,
-        projectRootPath,
-        comparePath,
-      },
-      apolloProvider,
-      router,
-      render(h) {
-        return h(HeaderArea, {
-          props: {
-            refType,
-            historyLink,
-            // BlobControls:
-            projectPath,
-            // RefSelector:
-            projectId,
-            refSelectorValue: refType ? joinPaths('refs', refType, ref) : ref,
-          },
-        });
-      },
-    });
-  }
-
   const breadcrumbEl = document.getElementById('js-repo-breadcrumb');
 
   if (breadcrumbEl) {
diff --git a/app/assets/javascripts/repository/init_header_app.js b/app/assets/javascripts/repository/init_header_app.js
new file mode 100644
index 00000000000000..a2d932582c8c74
--- /dev/null
+++ b/app/assets/javascripts/repository/init_header_app.js
@@ -0,0 +1,71 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import apolloProvider from './graphql';
+import HeaderArea from './components/header_area.vue';
+import createRouter from './router';
+
+export default function initHeaderApp(isReadmeView = false) {
+  const headerEl = document.getElementById('js-repository-blob-header-app');
+  if (headerEl) {
+    const {
+      historyLink,
+      ref,
+      escapedRef,
+      refType,
+      projectId,
+      breadcrumbsCanCollaborate,
+      breadcrumbsCanEditTree,
+      breadcrumbsCanPushCode,
+      breadcrumbsSelectedBranch,
+      breadcrumbsNewBranchPath,
+      breadcrumbsNewTagPath,
+      breadcrumbsNewBlobPath,
+      breadcrumbsForkNewBlobPath,
+      breadcrumbsForkNewDirectoryPath,
+      breadcrumbsForkUploadBlobPath,
+      breadcrumbsUploadPath,
+      breadcrumbsNewDirPath,
+      projectRootPath,
+      comparePath,
+      projectPath,
+    } = headerEl.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: headerEl,
+      provide: {
+        canCollaborate: parseBoolean(breadcrumbsCanCollaborate),
+        canEditTree: parseBoolean(breadcrumbsCanEditTree),
+        canPushCode: parseBoolean(breadcrumbsCanPushCode),
+        originalBranch: ref,
+        selectedBranch: breadcrumbsSelectedBranch,
+        newBranchPath: breadcrumbsNewBranchPath,
+        newTagPath: breadcrumbsNewTagPath,
+        newBlobPath: breadcrumbsNewBlobPath,
+        forkNewBlobPath: breadcrumbsForkNewBlobPath,
+        forkNewDirectoryPath: breadcrumbsForkNewDirectoryPath,
+        forkUploadBlobPath: breadcrumbsForkUploadBlobPath,
+        uploadPath: breadcrumbsUploadPath,
+        newDirPath: breadcrumbsNewDirPath,
+        projectRootPath,
+        comparePath,
+        isReadmeView,
+      },
+      apolloProvider,
+      router: createRouter(projectPath, escapedRef),
+      render(h) {
+        return h(HeaderArea, {
+          props: {
+            refType,
+            currentRef: ref,
+            historyLink,
+            // BlobControls:
+            projectPath,
+            // RefSelector:
+            projectId,
+          },
+        });
+      },
+    });
+  }
+}
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 1df7d5f2f2b071..f665c0e4846452 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -10,7 +10,7 @@
 
 #tree-holder.tree-holder.clearfix.js-per-page.gl-mt-5{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
   - if params[:common_repository_blob_header_app] == 'true'
-    #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
+    #js-repository-blob-header-app{ data: { project_id: @project.id, ref: ref, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), project_path: project.full_path, compare_path: compare_path, escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref) } }
 
   - else
     .nav-block.gl-flex.gl-flex-col.sm:gl-flex-row.gl-items-stretch
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index a915481a7858e3..08dc61e5694d01 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -1,3 +1,5 @@
+- ref = local_assigns.fetch(:ref) { current_ref }
+- project = local_assigns.fetch(:project) { @project }
 - add_page_specific_style 'page_bundles/projects'
 - unless @ref.blank? ||  @repository&.root_ref == @ref
   - compare_path = project_compare_index_path(@project, from:  @repository&.root_ref, to: @ref)
@@ -5,7 +7,7 @@
 - if (readme = @repository.readme) && readme.rich_viewer
   .tree-holder.gl-mt-5
     - if params[:common_repository_blob_header_app] == 'true'
-      #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), compare_path: compare_path } }
+      #js-repository-blob-header-app{ data: { project_id: @project.id, ref: ref, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref), breadcrumbs: breadcrumb_data_attributes, project_root_path: project_path(@project), project_path: project.full_path, compare_path: compare_path, escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref) } }
 
     - else
       .nav-block.mt-0
diff --git a/spec/frontend/repository/components/header_area/breadcrumbs_spec.js b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
index 5f4f6e19b4ecdc..92f888c678bc9a 100644
--- a/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
@@ -55,6 +55,9 @@ describe('Repository breadcrumbs component', () => {
 
     wrapper = shallowMount(Breadcrumbs, {
       apolloProvider,
+      provide: {
+        projectRootPath: TEST_PROJECT_PATH,
+      },
       propsData: {
         currentPath,
         ...extraProps,
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index 47d07139496c06..a4f768b1e364a9 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -35,11 +35,14 @@ const defaultProvided = {
   newDirPath: '/project/new-directory',
   projectRootPath: '/project/root/path',
   comparePath: undefined,
+  isReadmeView: false,
 };
 
 describe('HeaderArea', () => {
   let wrapper;
 
+  const findBreadcrumbs = () => wrapper.findComponent(Breadcrumbs);
+  const findRefSelector = () => wrapper.findComponent(RefSelector);
   const findHistoryButton = () => wrapper.findByTestId('tree-history-control');
   const findFindFileButton = () => wrapper.findByTestId('tree-find-file-control');
   const findCompareButton = () => wrapper.findByTestId('tree-compare-control');
@@ -80,11 +83,11 @@ describe('HeaderArea', () => {
   });
 
   it('renders RefSelector', () => {
-    expect(wrapper.findComponent(RefSelector).exists()).toBe(true);
+    expect(findRefSelector().exists()).toBe(true);
   });
 
   it('renders Breadcrumbs component', () => {
-    expect(wrapper.findComponent(Breadcrumbs).exists()).toBe(true);
+    expect(findBreadcrumbs().exists()).toBe(true);
   });
 
   describe('when rendered for tree view', () => {
@@ -142,4 +145,16 @@ describe('HeaderArea', () => {
       expect(blobControls.props('refType')).toBe('');
     });
   });
+
+  describe('when isReadmeView is true', () => {
+    beforeEach(() => {
+      wrapper = createComponent({}, 'treePathDecoded', { isReadmeView: true });
+    });
+
+    it('does not render RefSelector, Breadcrumbs and History button', () => {
+      expect(findRefSelector().exists()).toBe(false);
+      expect(findBreadcrumbs().exists()).toBe(false);
+      expect(findHistoryButton().exists()).toBe(false);
+    });
+  });
 });
-- 
GitLab


From f1c78fb2a6dab8d028d26900153927310a4778b3 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 5 Nov 2024 10:59:20 +0100
Subject: [PATCH 17/17] Cleanup $options + create util for history link

Cleaned up the $options prop and moved history link logic to util
---
 .../repository/components/header_area.vue     | 16 ++++----
 app/assets/javascripts/repository/index.js    | 13 ++++---
 .../repository/utils/url_utility.js           | 10 +++++
 .../repository/utils/url_utility_spec.js      | 38 +++++++++++++++++++
 4 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 app/assets/javascripts/repository/utils/url_utility.js
 create mode 100644 spec/frontend/repository/utils/url_utility_spec.js

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index e0f480c2ac1373..b301b9a7f928f3 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -7,7 +7,8 @@ import { keysFor, START_SEARCH_PROJECT_FILE } from '~/behaviors/shortcuts/keybin
 import { sanitize } from '~/lib/dompurify';
 import { InternalEvents } from '~/tracking';
 import { FIND_FILE_BUTTON_CLICK } from '~/tracking/constants';
-import { escapeFileUrl, visitUrl, joinPaths } from '~/lib/utils/url_utility';
+import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
+import { generateHistoryUrl } from '~/repository/utils/url_utility';
 import { generateRefDestinationPath } from '~/repository/utils/ref_switcher_utils';
 import RefSelector from '~/ref/components/ref_selector.vue';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
@@ -20,7 +21,6 @@ export default {
     findFile: __('Find file'),
     history: __('History'),
   },
-  buttonClassList: 'sm:gl-w-auto gl-w-full sm:gl-mt-0 gl-mt-3',
   components: {
     GlButton,
     RefSelector,
@@ -77,11 +77,11 @@ export default {
       return this.$route.name !== 'blobPathDecoded';
     },
     historyPath() {
-      const url = new URL(window.location.href);
-      url.pathname = `${this.historyLink}/${
-        this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
-      }`;
-      url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
+      const url = generateHistoryUrl(
+        this.historyLink,
+        this.$route.params.path,
+        this.$route.meta.refType || this.$route.query.ref_type,
+      );
 
       return url.href;
     },
@@ -173,7 +173,7 @@ export default {
         v-gl-tooltip.html="findFileTooltip"
         :aria-keyshortcuts="findFileShortcutKey"
         data-testid="tree-find-file-control"
-        :class="$options.buttonClassList"
+        class="gl-mt-3 gl-w-full sm:gl-mt-0 sm:gl-w-auto"
         @click="handleFindFile"
       >
         {{ $options.i18n.findFile }}
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 60dee669c60ff5..17b8d618bf9265 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 // eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import { joinPaths, escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
+import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import PerformancePlugin from '~/performance/vue_performance_plugin';
@@ -24,6 +24,7 @@ import refsQuery from './queries/ref.query.graphql';
 import createRouter from './router';
 import { updateFormAction } from './utils/dom';
 import { setTitle } from './utils/title';
+import { generateHistoryUrl } from './utils/url_utility';
 import { generateRefDestinationPath } from './utils/ref_switcher_utils';
 import initHeaderApp from './init_header_app';
 
@@ -267,11 +268,11 @@ export default function setupVueRepositoryList() {
       el: treeHistoryLinkEl,
       router,
       render(h) {
-        const url = new URL(window.location.href);
-        url.pathname = `${historyLink}/${
-          this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
-        }`;
-        url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
+        const url = generateHistoryUrl(
+          historyLink,
+          this.$route.params.path,
+          this.$route.meta.refType || this.$route.query.ref_type,
+        );
         return h(
           GlButton,
           {
diff --git a/app/assets/javascripts/repository/utils/url_utility.js b/app/assets/javascripts/repository/utils/url_utility.js
new file mode 100644
index 00000000000000..91f004ba9b3f27
--- /dev/null
+++ b/app/assets/javascripts/repository/utils/url_utility.js
@@ -0,0 +1,10 @@
+import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
+
+export function generateHistoryUrl(historyLink, path, refType) {
+  const url = new URL(window.location.href);
+
+  url.pathname = joinPaths(historyLink, path ? escapeFileUrl(path) : '');
+  url.searchParams.set('ref_type', refType);
+
+  return url;
+}
diff --git a/spec/frontend/repository/utils/url_utility_spec.js b/spec/frontend/repository/utils/url_utility_spec.js
new file mode 100644
index 00000000000000..19128340a6f377
--- /dev/null
+++ b/spec/frontend/repository/utils/url_utility_spec.js
@@ -0,0 +1,38 @@
+import { generateHistoryUrl } from '~/repository/utils/url_utility';
+
+describe('Repository URL utilities', () => {
+  describe('generateHistoryUrl', () => {
+    it('generates correct URL with path and ref type', () => {
+      const historyLink = '/-/commits';
+      const path = 'path/to/file.js';
+      const refType = 'branch';
+
+      const result = generateHistoryUrl(historyLink, path, refType);
+
+      expect(result.pathname).toBe('/-/commits/path/to/file.js');
+      expect(result.searchParams.get('ref_type')).toBe('branch');
+    });
+
+    it('generates correct URL when path is empty', () => {
+      const historyLink = '/-/commits';
+      const path = '';
+      const refType = 'tag';
+
+      const result = generateHistoryUrl(historyLink, path, refType);
+
+      expect(result.pathname).toBe('/-/commits');
+      expect(result.searchParams.get('ref_type')).toBe('tag');
+    });
+
+    it('escapes special characters in path', () => {
+      const historyLink = '/-/commits';
+      const path = 'path/to/file with spaces.js';
+      const refType = 'branch';
+
+      const result = generateHistoryUrl(historyLink, path, refType);
+
+      expect(result.pathname).toBe('/-/commits/path/to/file%20with%20spaces.js');
+      expect(result.searchParams.get('ref_type')).toBe('branch');
+    });
+  });
+});
-- 
GitLab