From fb23080bf4b0be960053c0b360f7423dec2ea322 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 12 Nov 2024 13:51:11 +0100
Subject: [PATCH 1/4] Use common header app when viewing blobs

Ensures the common header app is used when viewing blobs
---
 .../pages/projects/blob/show/index.js         |  7 ++--
 .../javascripts/pages/projects/show/index.js  |  2 +-
 .../components/header_area/breadcrumbs.vue    | 25 +++++++++++---
 app/assets/javascripts/repository/index.js    |  2 +-
 .../javascripts/repository/init_header_app.js | 34 +++++++++++++++++--
 app/views/projects/blob/_blob.html.haml       |  6 +++-
 .../header_area/breadcrumbs_spec.js           | 27 +++++++++++----
 7 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 1fdc0e86318921..235e3d08d065a0 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -26,6 +26,8 @@ import HighlightWorker from '~/vue_shared/components/source_viewer/workers/highl
 import initAmbiguousRefModal from '~/ref/init_ambiguous_ref_modal';
 import { InternalEvents } from '~/tracking';
 import { initFindFileShortcut } from '~/projects/behaviors';
+import initHeaderApp from '~/repository/init_header_app';
+import createRouter from '~/repository/router';
 
 Vue.use(Vuex);
 Vue.use(VueApollo);
@@ -35,8 +37,6 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-const router = new VueRouter({ mode: 'history' });
-
 const viewBlobEl = document.querySelector('#js-view-blob-app');
 
 const initRefSwitcher = () => {
@@ -84,6 +84,9 @@ if (viewBlobEl) {
     canDownloadCode,
     ...dataset
   } = viewBlobEl.dataset;
+  const router = createRouter(projectPath, originalBranch);
+
+  initHeaderApp({ router, isBlobView: true });
 
   // eslint-disable-next-line no-new
   new Vue({
diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js
index 8c05fabbb24289..2adbc94b99e68a 100644
--- a/app/assets/javascripts/pages/projects/show/index.js
+++ b/app/assets/javascripts/pages/projects/show/index.js
@@ -28,7 +28,7 @@ if (document.querySelector('.blob-viewer')) {
   import(/* webpackChunkName: 'blobViewer' */ '~/blob/viewer')
     .then(({ BlobViewer }) => {
       new BlobViewer(); // eslint-disable-line no-new
-      initHeaderApp(true);
+      initHeaderApp({ isReadmeView: true });
     })
     .catch(() => {});
 }
diff --git a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
index b53607f08b7c07..1945f7cf3bb759 100644
--- a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlDisclosureDropdown, GlModalDirective } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlModalDirective, GlLink } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
 import { joinPaths, escapeFileUrl, buildURLwithRefType } from '~/lib/utils/url_utility';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
@@ -19,6 +19,7 @@ export default {
     GlDisclosureDropdown,
     UploadBlobModal,
     NewDirectoryModal,
+    GlLink,
   },
   apollo: {
     projectShortPath: {
@@ -48,6 +49,9 @@ export default {
     projectRootPath: {
       default: '',
     },
+    isBlobView: {
+      default: false,
+    },
   },
   props: {
     currentPath: {
@@ -162,6 +166,10 @@ export default {
               name,
               path,
               to: buildURLwithRefType({ path: to, refType: this.refType }),
+              url: buildURLwithRefType({
+                path: joinPaths(this.projectPath, to),
+                refType: this.refType,
+              }),
             });
           },
           [
@@ -172,6 +180,10 @@ export default {
                 path: joinPaths('/-/tree', this.escapedRef),
                 refType: this.refType,
               }),
+              url: buildURLwithRefType({
+                path: joinPaths(this.projectPath, '/-/tree', this.escapedRef),
+                refType: this.refType,
+              }),
             },
           ],
         );
@@ -293,9 +305,14 @@ export default {
   >
     <ol class="breadcrumb repo-breadcrumb">
       <li v-for="(link, i) in pathLinks" :key="i" class="breadcrumb-item">
-        <router-link :to="link.to" :aria-current="isLast(i) ? 'page' : null">
-          {{ link.name }}
-        </router-link>
+        <gl-link
+          :to="!isBlobView && link.to"
+          :href="link.url"
+          :aria-current="isLast(i) ? 'page' : null"
+        >
+          <strong v-if="isLast(i)">{{ link.name }}</strong>
+          <span v-else>{{ link.name }}</span>
+        </gl-link>
       </li>
       <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
         <gl-disclosure-dropdown
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index adbcdf33596c73..bc5d63bfaecda9 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -207,7 +207,7 @@ export default function setupVueRepositoryList() {
     });
   };
 
-  initHeaderApp();
+  initHeaderApp({ router });
   initCodeDropdown();
   initLastCommitApp();
   initBlobControlsApp();
diff --git a/app/assets/javascripts/repository/init_header_app.js b/app/assets/javascripts/repository/init_header_app.js
index d0329286f35bc6..d5fd179b2e6ae4 100644
--- a/app/assets/javascripts/repository/init_header_app.js
+++ b/app/assets/javascripts/repository/init_header_app.js
@@ -1,10 +1,35 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import apolloProvider from './graphql';
+import projectShortPathQuery from './queries/project_short_path.query.graphql';
+import projectPathQuery from './queries/project_path.query.graphql';
 import HeaderArea from './components/header_area.vue';
 import createRouter from './router';
+import refsQuery from './queries/ref.query.graphql';
 
-export default function initHeaderApp(isReadmeView = false) {
+const initClientQueries = ({ projectPath, projectShortPath, ref, escapedRef }) => {
+  // These queries are used in the breadcrumbs component as GraphQL client queries.
+
+  if (projectPath)
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: projectPathQuery,
+      data: { projectPath },
+    });
+
+  if (projectShortPath)
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: projectShortPathQuery,
+      data: { projectShortPath },
+    });
+
+  if (ref || escapedRef)
+    apolloProvider.clients.defaultClient.cache.writeQuery({
+      query: refsQuery,
+      data: { ref, escapedRef },
+    });
+};
+
+export default function initHeaderApp({ router, isReadmeView = false, isBlobView = false }) {
   const headerEl = document.getElementById('js-repository-blob-header-app');
   if (headerEl) {
     const {
@@ -27,8 +52,11 @@ export default function initHeaderApp(isReadmeView = false) {
       projectRootPath,
       comparePath,
       projectPath,
+      projectShortPath,
     } = headerEl.dataset;
 
+    initClientQueries({ projectPath, projectShortPath, ref, escapedRef });
+
     // eslint-disable-next-line no-new
     new Vue({
       el: headerEl,
@@ -47,11 +75,13 @@ export default function initHeaderApp(isReadmeView = false) {
         uploadPath: breadcrumbsUploadPath,
         newDirPath: breadcrumbsNewDirPath,
         projectRootPath,
+        projectShortPath,
         comparePath,
         isReadmeView,
+        isBlobView,
       },
       apolloProvider,
-      router: createRouter(projectPath, escapedRef),
+      router: router || createRouter(projectPath, escapedRef),
       render(h) {
         return h(HeaderArea, {
           props: {
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index e84b958f92187b..801bac5ed08c91 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -1,4 +1,3 @@
-= render "projects/blob/breadcrumb", blob: blob
 - project = @project.present(current_user: current_user)
 - ref = local_assigns[:ref] || @ref
 - expanded = params[:expanded].present?
@@ -7,6 +6,11 @@
 - if blob.rich_viewer && blob.extension != 'geojson'
   - add_page_startup_api_call local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: blob.rich_viewer.type, format: :json)) }
 
+- if params[:common_repository_blob_header_app] == 'true'
+  #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, project_short_path: project.path, escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref), blob_path: blob.path } }
+- else
+  = render "projects/blob/breadcrumb", blob: blob
+
 - if project.forked?
   #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
 
diff --git a/spec/frontend/repository/components/header_area/breadcrumbs_spec.js b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
index 92f888c678bc9a..f9653521b50895 100644
--- a/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/header_area/breadcrumbs_spec.js
@@ -1,6 +1,6 @@
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlDisclosureDropdown, GlDisclosureDropdownGroup } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownGroup, GlLink } from '@gitlab/ui';
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
@@ -57,6 +57,7 @@ describe('Repository breadcrumbs component', () => {
       apolloProvider,
       provide: {
         projectRootPath: TEST_PROJECT_PATH,
+        isBlobView: extraProps.isBlobView,
       },
       propsData: {
         currentPath,
@@ -79,7 +80,7 @@ describe('Repository breadcrumbs component', () => {
   const findDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup);
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
   const findNewDirectoryModal = () => wrapper.findComponent(NewDirectoryModal);
-  const findRouterLink = () => wrapper.findAllComponents(RouterLinkStub);
+  const findRouterLinks = () => wrapper.findAllComponents(GlLink);
 
   beforeEach(() => {
     permissionsQuerySpy = jest.fn().mockResolvedValue(createPermissionsQueryResponse());
@@ -105,7 +106,7 @@ describe('Repository breadcrumbs component', () => {
   `('renders $linkCount links for path $path', ({ path, linkCount }) => {
     factory(path);
 
-    expect(findRouterLink().length).toEqual(linkCount);
+    expect(findRouterLinks().length).toEqual(linkCount);
   });
 
   it.each`
@@ -118,20 +119,20 @@ describe('Repository breadcrumbs component', () => {
     'links to the correct router path when routeName is $routeName',
     ({ routeName, path, linkTo }) => {
       factory(path, {}, { name: routeName });
-      expect(findRouterLink().at(3).props('to')).toEqual(linkTo);
+      expect(findRouterLinks().at(3).attributes('to')).toEqual(linkTo);
     },
   );
 
   it('escapes hash in directory path', () => {
     factory('app/assets/javascripts#');
 
-    expect(findRouterLink().at(3).props('to')).toEqual('/-/tree/app/assets/javascripts%23');
+    expect(findRouterLinks().at(3).attributes('to')).toEqual('/-/tree/app/assets/javascripts%23');
   });
 
   it('renders last link as active', () => {
     factory('app/assets');
 
-    expect(findRouterLink().at(2).attributes('aria-current')).toEqual('page');
+    expect(findRouterLinks().at(2).attributes('aria-current')).toEqual('page');
   });
 
   it('does not render add to tree dropdown when permissions are false', async () => {
@@ -244,4 +245,18 @@ describe('Repository breadcrumbs component', () => {
       expect(findDropdownGroup().exists()).toBe(false);
     });
   });
+
+  describe('link rendering', () => {
+    it('passes `href` to GlLink when isBlobView is true', () => {
+      factory('/', { isBlobView: true });
+
+      expect(findRouterLinks().at(0).attributes('href')).toBe('/test-project/path/-/tree');
+    });
+
+    it('passes `to` to GlLink when isBlobView is false', () => {
+      factory('/', { isBlobView: false });
+
+      expect(findRouterLinks().at(0).attributes('to')).toBe('/-/tree');
+    });
+  });
 });
-- 
GitLab


From 6d5e47e37e0d8835b08906509903317b093d9b10 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Wed, 27 Nov 2024 10:12:30 +0100
Subject: [PATCH 2/4] Address code review comments

General cleanup of the code
---
 .../pages/projects/blob/show/index.js         |  2 +-
 .../components/header_area/breadcrumbs.vue    | 20 ++++++------
 app/helpers/blob_helper.rb                    | 15 +++++++++
 app/views/projects/blob/_blob.html.haml       |  2 +-
 spec/helpers/blob_helper_spec.rb              | 31 +++++++++++++++++++
 5 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 235e3d08d065a0..b4fdb8fb295b76 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -218,7 +218,7 @@ if (treeHistoryLinkEl) {
   // eslint-disable-next-line no-new
   new Vue({
     el: treeHistoryLinkEl,
-    router,
+    router: new VueRouter({ mode: 'history' }),
     render(h) {
       const url = generateHistoryUrl(
         historyLink,
diff --git a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
index 1945f7cf3bb759..1f1c2f24c7aca0 100644
--- a/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/header_area/breadcrumbs.vue
@@ -165,7 +165,9 @@ export default {
             return acc.concat({
               name,
               path,
-              to: buildURLwithRefType({ path: to, refType: this.refType }),
+              to: !this.isBlobView
+                ? buildURLwithRefType({ path: to, refType: this.refType })
+                : null,
               url: buildURLwithRefType({
                 path: joinPaths(this.projectPath, to),
                 refType: this.refType,
@@ -176,10 +178,12 @@ export default {
             {
               name: this.projectShortPath,
               path: '/',
-              to: buildURLwithRefType({
-                path: joinPaths('/-/tree', this.escapedRef),
-                refType: this.refType,
-              }),
+              to: !this.isBlobView
+                ? buildURLwithRefType({
+                    path: joinPaths('/-/tree', this.escapedRef),
+                    refType: this.refType,
+                  })
+                : null,
               url: buildURLwithRefType({
                 path: joinPaths(this.projectPath, '/-/tree', this.escapedRef),
                 refType: this.refType,
@@ -305,11 +309,7 @@ export default {
   >
     <ol class="breadcrumb repo-breadcrumb">
       <li v-for="(link, i) in pathLinks" :key="i" class="breadcrumb-item">
-        <gl-link
-          :to="!isBlobView && link.to"
-          :href="link.url"
-          :aria-current="isLast(i) ? 'page' : null"
-        >
+        <gl-link :to="link.to" :href="link.url" :aria-current="isLast(i) ? 'page' : null">
           <strong v-if="isLast(i)">{{ link.name }}</strong>
           <span v-else>{{ link.name }}</span>
         </gl-link>
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 1cbf67429803eb..5ad8ae2529ac3c 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -302,6 +302,21 @@ def vue_blob_app_data(project, blob, ref)
       can_download_code: can?(current_user, :download_code, project).to_s
     }
   end
+
+  def vue_blob_header_app_data(project, blob, ref)
+    {
+      blob_path: blob.path,
+      breadcrumbs: breadcrumb_data_attributes,
+      escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref),
+      history_link: project_commits_path(@project, @ref),
+      project_id: @project.id,
+      project_root_path: project_path(@project),
+      project_path: project.full_path,
+      project_short_path: project.path,
+      ref_type: @ref_type.to_s,
+      ref: ref
+    }
+  end
 end
 
 BlobHelper.prepend_mod_with('BlobHelper')
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 801bac5ed08c91..cfa2b236728dfd 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -7,7 +7,7 @@
   - add_page_startup_api_call local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: blob.rich_viewer.type, format: :json)) }
 
 - if params[:common_repository_blob_header_app] == 'true'
-  #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, project_short_path: project.path, escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref), blob_path: blob.path } }
+  #js-repository-blob-header-app{ data: vue_blob_header_app_data(project, blob, ref) }
 - else
   = render "projects/blob/breadcrumb", blob: blob
 
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index 5027ec805ffe62..7bf6fc7300e4cb 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -5,6 +5,7 @@
 RSpec.describe BlobHelper do
   include TreeHelper
   include FakeBlobHelpers
+  include Devise::Test::ControllerHelpers
 
   describe "#sanitize_svg_data" do
     let(:input_svg_path) { File.join(Rails.root, 'spec', 'fixtures', 'unsanitized.svg') }
@@ -477,4 +478,34 @@
       expect(rendered_button).to have_selector('button[data-action="edit"]')
     end
   end
+
+  describe '#vue_blob_header_app_data' do
+    let_it_be(:project) { create(:project) }
+    let_it_be(:blob) { fake_blob(path: 'README.md') }
+    let(:ref) { 'main' }
+    let(:ref_type) { :branch }
+    let(:breadcrumb_data) { { title: 'README.md', 'is-last': true } }
+
+    before do
+      assign(:project, project)
+      assign(:ref, ref)
+      assign(:ref_type, ref_type)
+      allow(helper).to receive(:breadcrumb_data_attributes).and_return(breadcrumb_data)
+    end
+
+    it 'returns data related to blob header' do
+      expect(helper.vue_blob_header_app_data(project, blob, ref)).to include({
+        blob_path: blob.path,
+        breadcrumbs: breadcrumb_data,
+        escaped_ref: ref,
+        history_link: project_commits_path(project, ref),
+        project_id: project.id,
+        project_root_path: project_path(project),
+        project_path: project.full_path,
+        project_short_path: project.path,
+        ref_type: ref_type.to_s,
+        ref: ref
+      })
+    end
+  end
 end
-- 
GitLab


From 571ea087cacf9718d4f90bfe7f78ab0b45740f32 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Thu, 28 Nov 2024 09:22:16 +0100
Subject: [PATCH 3/4] Use method params inside the helper

Updated the method to use the method params instead of global project and ref
---
 app/helpers/blob_helper.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 5ad8ae2529ac3c..91c82bdea76258 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -308,9 +308,9 @@ def vue_blob_header_app_data(project, blob, ref)
       blob_path: blob.path,
       breadcrumbs: breadcrumb_data_attributes,
       escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref),
-      history_link: project_commits_path(@project, @ref),
-      project_id: @project.id,
-      project_root_path: project_path(@project),
+      history_link: project_commits_path(project, ref),
+      project_id: project.id,
+      project_root_path: project_path(project),
       project_path: project.full_path,
       project_short_path: project.path,
       ref_type: @ref_type.to_s,
-- 
GitLab


From 84bf288bb796388ed606df5b1df50989b2fe4c8a Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Thu, 28 Nov 2024 14:22:15 +0100
Subject: [PATCH 4/4] Ensure blob controls adapt to small screens

Added missing flex-wrap class
---
 .../repository/components/header_area/blob_controls.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 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 2202faf7b840fc..ddc5af4f43a937 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -157,7 +157,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="showBlobControls" class="gl-flex gl-items-baseline gl-gap-3">
+  <div v-if="showBlobControls" class="gl-flex gl-flex-wrap gl-items-baseline gl-gap-3">
     <gl-button
       v-gl-tooltip.html="findFileTooltip"
       :aria-keyshortcuts="findFileShortcutKey"
@@ -181,7 +181,7 @@ export default {
       data-testid="history"
       :href="blobInfo.historyPath"
       :class="$options.buttonClassList"
-      class="gl-block sm:gl-hidden"
+      class="sm:gl-hidden"
     >
       {{ $options.i18n.history }}
     </gl-button>
-- 
GitLab