From dca92919e71eb51ff0a65cdd605d740a5645eb04 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Fri, 7 Mar 2025 15:43:24 -0500
Subject: [PATCH] Add copy permalink to repository overflow menu

This MR adds the new copy permalink item to the repository overflow
menu. This feature currently only exists on blob page.

Changelog: added
---
 .../repository/components/header_area.vue     |  7 +++---
 .../header_area/repository_overflow_menu.vue  | 14 +++++++++++
 .../repository_overflow_menu_spec.js          | 25 ++++++++++++++++++-
 .../repository/components/header_area_spec.js |  7 ++----
 4 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 93c8481a3b7548..aebc507b7f3f39 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -335,7 +335,7 @@ export default {
               :show-web-ide-button="showWebIdeButton"
               :show-gitpod-button="showGitpodButton"
             />
-            <repository-overflow-menu v-if="comparePath" />
+            <repository-overflow-menu :project-path="projectPath" />
           </div>
           <template v-else>
             <code-dropdown
@@ -358,12 +358,13 @@ export default {
                 :http-url="httpUrl"
                 :kerberos-url="kerberosUrl"
               />
-              <repository-overflow-menu v-if="comparePath" />
+              <repository-overflow-menu :project-path="projectPath" />
             </div>
           </template>
         </div>
         <repository-overflow-menu
-          v-if="comparePath && !showCompactCodeDropdown"
+          v-if="!showCompactCodeDropdown"
+          :project-path="projectPath"
           class="gl-hidden sm:gl-inline-flex"
         />
       </div>
diff --git a/app/assets/javascripts/repository/components/header_area/repository_overflow_menu.vue b/app/assets/javascripts/repository/components/header_area/repository_overflow_menu.vue
index 55ebdcd2573843..9818d955f4090c 100644
--- a/app/assets/javascripts/repository/components/header_area/repository_overflow_menu.vue
+++ b/app/assets/javascripts/repository/components/header_area/repository_overflow_menu.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { joinPaths } from '~/lib/utils/url_utility';
+import PermalinkDropdownItem from './permalink_dropdown_item.vue';
 
 export const i18n = {
   dropdownLabel: __('Actions'),
@@ -12,11 +14,18 @@ export default {
   components: {
     GlDisclosureDropdown,
     GlDisclosureDropdownItem,
+    PermalinkDropdownItem,
   },
   directives: {
     GlTooltipDirective,
   },
   inject: ['comparePath'],
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     compareItem() {
       return {
@@ -28,6 +37,10 @@ export default {
         },
       };
     },
+    permalinkPath() {
+      const isRootRoute = this.$route.fullPath !== '/';
+      return isRootRoute ? joinPaths(this.projectPath, this.$route.fullPath) : this.projectPath;
+    },
   },
 };
 </script>
@@ -42,6 +55,7 @@ export default {
     :toggle-text="$options.i18n.dropdownLabel"
     text-sr-only
   >
+    <permalink-dropdown-item :permalink-path="permalinkPath" />
     <gl-disclosure-dropdown-item v-if="comparePath" :item="compareItem" class="shortcuts-compare" />
   </gl-disclosure-dropdown>
 </template>
diff --git a/spec/frontend/repository/components/header_area/repository_overflow_menu_spec.js b/spec/frontend/repository/components/header_area/repository_overflow_menu_spec.js
index 3f9c2483e3ec9b..00d86e518e67bd 100644
--- a/spec/frontend/repository/components/header_area/repository_overflow_menu_spec.js
+++ b/spec/frontend/repository/components/header_area/repository_overflow_menu_spec.js
@@ -2,6 +2,10 @@ import { RouterLinkStub } from '@vue/test-utils';
 import { GlDisclosureDropdownItem } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RepositoryOverflowMenu from '~/repository/components/header_area/repository_overflow_menu.vue';
+import PermalinkDropdownItem from '~/repository/components/header_area/permalink_dropdown_item.vue';
+
+const testPath = '/-/tree/id-update-golang/.gitlab?ref_type=heads';
+const projectPath = 'test/project';
 
 const defaultMockRoute = {
   params: {
@@ -14,6 +18,7 @@ const defaultMockRoute = {
     ref_type: '',
   },
   name: 'treePathDecoded',
+  fullPath: testPath,
 };
 
 describe('RepositoryOverflowMenu', () => {
@@ -23,13 +28,18 @@ describe('RepositoryOverflowMenu', () => {
   const findDropdownItemWithText = (text) =>
     findDropdownItems().wrappers.find((x) => x.props('item').text === text);
   const findCompareItem = () => findDropdownItemWithText('Compare');
+  const findPermalinkItem = () => wrapper.findComponent(PermalinkDropdownItem);
 
-  const createComponent = (route = {}, provide = {}) => {
+  const createComponent = (route = {}, provide = {}, props = {}) => {
     return shallowMountExtended(RepositoryOverflowMenu, {
       provide: {
         comparePath: null,
         ...provide,
       },
+      propsData: {
+        projectPath,
+        ...props,
+      },
       stubs: {
         RouterLink: RouterLinkStub,
       },
@@ -72,4 +82,17 @@ describe('RepositoryOverflowMenu', () => {
       expect(findCompareItem()).toBeUndefined();
     });
   });
+
+  describe('Permalink item', () => {
+    it('renders Permalink button for non-root route', () => {
+      expect(findPermalinkItem().props('permalinkPath')).toBe(
+        'test/project/-/tree/id-update-golang/.gitlab?ref_type=heads',
+      );
+    });
+
+    it('renders Permalink button with projectPath for root route', () => {
+      wrapper = createComponent({ fullPath: '/' });
+      expect(findPermalinkItem().props('permalinkPath')).toBe('test/project');
+    });
+  });
 });
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index 6f68c509cc34f3..d9aad22eaa4a76 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -194,16 +194,13 @@ describe('HeaderArea', () => {
     });
 
     describe('RepositoryOverflowMenu', () => {
-      it('does not render RepositoryOverflowMenu component on default ref', () => {
-        expect(findRepositoryOverflowMenu().exists()).toBe(false);
-      });
-
-      it('renders RepositoryOverflowMenu component with correct props when on ref different than default branch', () => {
+      it('renders RepositoryOverflowMenu component with correct props', () => {
         wrapper = createComponent({}, 'treePathDecoded', { comparePath: 'test/project/compare' });
         expect(findRepositoryOverflowMenu().exists()).toBe(true);
         expect(findRepositoryOverflowMenu().props('comparePath')).toBe(
           headerAppInjected.comparePath,
         );
+        expect(findRepositoryOverflowMenu().props('projectPath')).toBe('test/project');
       });
     });
   });
-- 
GitLab