From 62b1e71a0d1898496a937b8300a364a905f874fa Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Tue, 18 Feb 2025 21:55:05 -0500
Subject: [PATCH 1/5] Change Permalink button into dropdown item

Add a new permalink_dropdown_item.vue component that copies
permalink to clipboard with a successful toast.

Show new component to blob overflow menu when
`blob_overflow_menu` flag is on.
---
 .../blob/blob_line_permalink_updater.js       |  15 +-
 app/assets/javascripts/blob/utils.js          |   5 +-
 .../header_area/blob_button_group.vue         |   2 +-
 .../components/header_area/blob_controls.vue  |   1 +
 .../header_area/blob_overflow_menu.vue        |   3 +
 .../header_area/permalink_dropdown_item.vue   |  80 ++++++++
 locale/gitlab.pot                             |   6 +
 .../blobs/blob_line_permalink_updater_spec.rb | 174 +++++++++++++-----
 .../header_area/blob_overflow_menu_spec.js    |   8 +
 .../permalink_dropdown_item_spec.js           | 123 +++++++++++++
 10 files changed, 370 insertions(+), 47 deletions(-)
 create mode 100644 app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
 create mode 100644 spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js

diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js
index 928035d7c1ef7e..7d3165a417b1ef 100644
--- a/app/assets/javascripts/blob/blob_line_permalink_updater.js
+++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js
@@ -1,4 +1,4 @@
-import { getLocationHash } from '../lib/utils/url_utility';
+import { getLocationHash } from '~/lib/utils/url_utility';
 import { getPageParamValue, getPageSearchString } from './utils';
 
 const lineNumberRe = /^(L|LC)[0-9]+/;
@@ -11,16 +11,27 @@ const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
     [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
       const baseHref =
         permalinkButton.dataset.originalHref ||
+        permalinkButton.dataset.clipboardText?.split('#')[0] ||
         (() => {
-          const href = permalinkButton.getAttribute('href');
+          const href =
+            permalinkButton.getAttribute('href') ||
+            // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+            permalinkButton.getAttribute('data-clipboard-text')?.split('#')[0];
           // eslint-disable-next-line no-param-reassign
           permalinkButton.dataset.originalHref = href;
+          // eslint-disable-next-line no-param-reassign
+          permalinkButton.dataset.clipboardText = href;
           return href;
         })();
       const lineNum = parseInt(hash.split('L')[1], 10);
       const page = getPageParamValue(lineNum);
       const searchString = getPageSearchString(baseHref, page);
       permalinkButton.setAttribute('href', `${baseHref}${searchString}${hashUrlString}`);
+      // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+      permalinkButton.setAttribute(
+        'data-clipboard-text',
+        `${baseHref}${searchString}${hashUrlString}`,
+      );
     });
   }
 };
diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js
index 0ecc8be1027211..b245a5c630518a 100644
--- a/app/assets/javascripts/blob/utils.js
+++ b/app/assets/javascripts/blob/utils.js
@@ -24,7 +24,9 @@ export const getPageSearchString = (path, page) => {
 
 export function moveToFilePermalink() {
   const fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
-  const permalink = fileBlobPermalinkUrlElement?.getAttribute('href');
+  const permalink =
+    fileBlobPermalinkUrlElement?.getAttribute('href') ||
+    fileBlobPermalinkUrlElement?.getAttribute('data-clipboard-text');
 
   if (!permalink) {
     return;
@@ -49,7 +51,6 @@ function eventHasModifierKeys(event) {
 
 export function shortcircuitPermalinkButton() {
   const fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
-
   fileBlobPermalinkUrlElement?.addEventListener('click', (e) => {
     if (!eventHasModifierKeys(e)) {
       e.preventDefault();
diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index bcaecfc0b5d8a5..bcbbb5138b4f9d 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -110,7 +110,7 @@ export default {
 </script>
 
 <template>
-  <gl-disclosure-dropdown-group>
+  <gl-disclosure-dropdown-group bordered>
     <lock-file-dropdown-item
       v-if="glFeatures.fileLocks"
       :name="blobInfo.name"
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 3c6e1efb00b841..974ecc09b207f8 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -212,6 +212,7 @@ export default {
     </gl-button>
 
     <gl-button
+      v-if="!glFeatures.blobOverflowMenu"
       v-gl-tooltip.html="permalinkTooltip"
       :aria-keyshortcuts="permalinkShortcutKey"
       data-testid="permalink"
diff --git a/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue b/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue
index 1b83e6e4819d68..845b457f4299d0 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue
@@ -10,6 +10,7 @@ import { DEFAULT_BLOB_INFO } from '~/repository/constants';
 import BlobDefaultActionsGroup from './blob_default_actions_group.vue';
 import BlobButtonGroup from './blob_button_group.vue';
 import BlobDeleteFileGroup from './blob_delete_file_group.vue';
+import PermalinkDropdownItem from './permalink_dropdown_item.vue';
 
 export const i18n = {
   dropdownLabel: __('Actions'),
@@ -19,6 +20,7 @@ export const i18n = {
 export default {
   i18n,
   components: {
+    PermalinkDropdownItem,
     GlDisclosureDropdown,
     BlobDefaultActionsGroup,
     BlobButtonGroup,
@@ -124,6 +126,7 @@ export default {
     :toggle-text="$options.i18n.dropdownLabel"
     text-sr-only
   >
+    <permalink-dropdown-item :permalink-path="blobInfo.permalinkPath" />
     <blob-button-group
       v-if="isLoggedIn && !blobInfo.archived"
       :current-ref="currentRef"
diff --git a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
new file mode 100644
index 00000000000000..813d7a61684eea
--- /dev/null
+++ b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
@@ -0,0 +1,80 @@
+<script>
+import Vue from 'vue';
+import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlToast } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { keysFor, PROJECT_FILES_GO_TO_PERMALINK } from '~/behaviors/shortcuts/keybindings';
+import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
+import { Mousetrap } from '~/lib/mousetrap';
+import { moveToFilePermalink } from '~/blob/utils';
+import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
+
+Vue.use(GlToast);
+export default {
+  components: {
+    GlDisclosureDropdownGroup,
+    GlDisclosureDropdownItem,
+  },
+  props: {
+    permalinkPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    permalinkShortcutKey() {
+      return keysFor(PROJECT_FILES_GO_TO_PERMALINK)[0];
+    },
+    shortcutsDisabled() {
+      return shouldDisableShortcuts();
+    },
+  },
+  mounted() {
+    this.initLinksUpdate();
+    Mousetrap.bind(keysFor(PROJECT_FILES_GO_TO_PERMALINK), () => this.onCopyPermalink(true));
+  },
+  beforeDestroy() {
+    Mousetrap.unbind(keysFor(PROJECT_FILES_GO_TO_PERMALINK), () => this.onCopyPermalink(true));
+  },
+  methods: {
+    initLinksUpdate() {
+      // eslint-disable-next-line no-new
+      new BlobLinePermalinkUpdater(
+        document.querySelector('.tree-holder'),
+        '.file-line-num[data-line-number], .file-line-num[data-line-number] *',
+        document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
+      );
+    },
+    onCopyPermalink(isTriggeredByShortcut = false) {
+      if (isTriggeredByShortcut) {
+        const buttonElement = document.querySelector('.js-data-file-blob-permalink-url');
+        buttonElement.click();
+      }
+      moveToFilePermalink();
+      this.$toast.show(__('Permalink copied to clipboard.'));
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown-group>
+    <gl-disclosure-dropdown-item
+      :aria-keyshortcuts="permalinkShortcutKey"
+      data-testid="permalink"
+      :data-clipboard-text="permalinkPath"
+      data-clipboard-handle-tooltip="false"
+      class="js-data-file-blob-permalink-url"
+      @action="onCopyPermalink"
+    >
+      <template #list-item>
+        <span class="gl-mb-2 gl-flex gl-items-center gl-justify-between">
+          <span>{{ __('Copy permalink') }}</span>
+          <kbd v-if="permalinkShortcutKey && !shortcutsDisabled" class="flat">{{
+            permalinkShortcutKey
+          }}</kbd>
+        </span>
+      </template>
+    </gl-disclosure-dropdown-item>
+  </gl-disclosure-dropdown-group>
+</template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index dd3dd40140d0cd..aca64890fed662 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -16819,6 +16819,9 @@ msgstr ""
 msgid "Copy link URL"
 msgstr ""
 
+msgid "Copy permalink"
+msgstr ""
+
 msgid "Copy reference"
 msgstr ""
 
@@ -42052,6 +42055,9 @@ msgstr ""
 msgid "Permalink"
 msgstr ""
 
+msgid "Permalink copied to clipboard."
+msgstr ""
+
 msgid "Permissions"
 msgstr ""
 
diff --git a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
index ae942cda29b4e3..6a1c8ec4737840 100644
--- a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
+++ b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
@@ -18,75 +18,165 @@ def visit_blob(fragment = nil)
       visit project_blob_path(project, tree_join('master', path), anchor: fragment)
     end
 
-    describe 'Click "Permalink" button' do
-      it 'works with no initial line number fragment hash' do
-        visit_blob
-
-        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
+    context 'when `blob_overflow_menu` flag is off' do
+      before do
+        stub_feature_flags(blob_overflow_menu: false)
       end
 
-      it 'maintains intitial fragment hash' do
-        fragment = "L3"
+      describe 'Click "Permalink" button' do
+        it 'works with no initial line number fragment hash' do
+          visit_blob
 
-        visit_blob(fragment)
+          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
+        end
 
-        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: fragment)))
-      end
+        it 'maintains initial fragment hash' do
+          fragment = "L3"
+
+          visit_blob(fragment)
+
+          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: fragment)))
+        end
+
+        it 'changes fragment hash if line number clicked' do
+          visit_blob
 
-      it 'changes fragment hash if line number clicked' do
-        visit_blob
+          find('#L3').click
+          find("#L5").click
 
-        find('#L3').click
-        find("#L5").click
+          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
+        end
 
-        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
+        it 'with initial fragment hash, changes fragment hash if line number clicked' do
+          fragment = "L1"
+
+          visit_blob(fragment)
+
+          find('#L3').click
+          find("#L5").click
+
+          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
+        end
       end
 
-      it 'with initial fragment hash, changes fragment hash if line number clicked' do
-        fragment = "L1"
+      describe 'Click "Blame" button' do
+        it 'works with no initial line number fragment hash' do
+          visit_blob
+
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
+        end
 
-        visit_blob(fragment)
+        it 'maintains initial fragment hash' do
+          fragment = "L3"
 
-        find('#L3').click
-        find("#L5").click
+          visit_blob(fragment)
 
-        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: fragment)))
+        end
+
+        it 'changes fragment hash if line number clicked' do
+          visit_blob
+
+          find('#L3').click
+          find("#L5").click
+
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+        end
+
+        it 'with initial fragment hash, changes fragment hash if line number clicked' do
+          fragment = "L1"
+
+          visit_blob(fragment)
+
+          find('#L3').click
+          find("#L5").click
+
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+        end
       end
     end
 
-    describe 'Click "Blame" button' do
-      it 'works with no initial line number fragment hash' do
-        visit_blob
-
-        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
+    context 'when `blob_overflow_menu` flag is on' do
+      before do
+        stub_feature_flags(blob_overflow_menu: true)
       end
 
-      it 'maintains intitial fragment hash' do
-        fragment = "L3"
+      describe 'Click "Permalink" button' do
+        it 'works with no initial line number fragment hash' do
+          visit_blob
+          find_by_testid('default-actions-container').click
 
-        visit_blob(fragment)
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path)))
+        end
 
-        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: fragment)))
-      end
+        it 'maintains initial fragment hash' do
+          fragment = "L3"
+
+          visit_blob(fragment)
+          find_by_testid('default-actions-container').click
+
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path), anchor: fragment))
+        end
+
+        it 'changes fragment hash if line number clicked' do
+          visit_blob
+
+          find('#L3').click
+          find("#L5").click
+
+          find_by_testid('default-actions-container').click
+
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path), anchor: "L5"))
+        end
+
+        it 'with initial fragment hash, changes fragment hash if line number clicked' do
+          fragment = "L1"
+
+          visit_blob(fragment)
 
-      it 'changes fragment hash if line number clicked' do
-        visit_blob
+          find('#L3').click
+          find("#L5").click
 
-        find('#L3').click
-        find("#L5").click
+          find_by_testid('default-actions-container').click
 
-        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path), anchor: "L5"))
+        end
       end
 
-      it 'with initial fragment hash, changes fragment hash if line number clicked' do
-        fragment = "L1"
+      describe 'Click "Blame" button' do
+        it 'works with no initial line number fragment hash' do
+          visit_blob
+
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
+        end
+
+        it 'maintains initial fragment hash' do
+          fragment = "L3"
+
+          visit_blob(fragment)
+
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: fragment)))
+        end
+
+        it 'changes fragment hash if line number clicked' do
+          visit_blob
+
+          find('#L3').click
+          find("#L5").click
+
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+        end
+
+        it 'with initial fragment hash, changes fragment hash if line number clicked' do
+          fragment = "L1"
 
-        visit_blob(fragment)
+          visit_blob(fragment)
 
-        find('#L3').click
-        find("#L5").click
+          find('#L3').click
+          find("#L5").click
 
-        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+        end
       end
     end
   end
diff --git a/spec/frontend/repository/components/header_area/blob_overflow_menu_spec.js b/spec/frontend/repository/components/header_area/blob_overflow_menu_spec.js
index 83c608d5b767f0..1e14b2d4358e14 100644
--- a/spec/frontend/repository/components/header_area/blob_overflow_menu_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_overflow_menu_spec.js
@@ -9,6 +9,7 @@ import { createAlert } from '~/alert';
 import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.graphql';
 import BlobOverflowMenu from '~/repository/components/header_area/blob_overflow_menu.vue';
 import BlobDefaultActionsGroup from '~/repository/components/header_area/blob_default_actions_group.vue';
+import PermalinkDropdownItem from '~/repository/components/header_area/permalink_dropdown_item.vue';
 import BlobButtonGroup from '~/repository/components/header_area/blob_button_group.vue';
 import BlobDeleteFileGroup from '~/repository/components/header_area/blob_delete_file_group.vue';
 import createRouter from '~/repository/router';
@@ -62,6 +63,7 @@ describe('Blob Overflow Menu', () => {
 
   const findBlobDefaultActionsGroup = () => wrapper.findComponent(BlobDefaultActionsGroup);
   const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
+  const findPermalinkDropdownItem = () => wrapper.findComponent(PermalinkDropdownItem);
   const findBlobDeleteFileGroup = () => wrapper.findComponent(BlobDeleteFileGroup);
 
   beforeEach(async () => {
@@ -162,4 +164,10 @@ describe('Blob Overflow Menu', () => {
       expect(findBlobDeleteFileGroup().exists()).toBe(false);
     });
   });
+
+  describe('Permalink Dropdown Item', () => {
+    it('renders component', () => {
+      expect(findPermalinkDropdownItem().exists()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
new file mode 100644
index 00000000000000..e1c087a30dbde3
--- /dev/null
+++ b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
@@ -0,0 +1,123 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem } from '@gitlab/ui';
+import PermalinkDropdownItem from '~/repository/components/header_area/permalink_dropdown_item.vue';
+import { keysFor, PROJECT_FILES_GO_TO_PERMALINK } from '~/behaviors/shortcuts/keybindings';
+import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
+import * as blobUtils from '~/blob/utils';
+import { Mousetrap } from '~/lib/mousetrap';
+
+jest.mock('~/behaviors/shortcuts/shortcuts_toggle');
+
+describe('PermalinkDropdownItem', () => {
+  let wrapper;
+
+  const $toast = {
+    show: jest.fn(),
+  };
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(PermalinkDropdownItem, {
+      propsData: {
+        permalinkPath: 'https://example.com/permalink',
+        ...props,
+      },
+      stubs: {
+        GlDisclosureDropdownGroup,
+        GlDisclosureDropdownItem,
+      },
+      mocks: { $toast },
+    });
+  };
+
+  const findDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+  const findDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup);
+
+  it('renders correctly', () => {
+    createComponent();
+    expect(findDropdownGroup().exists()).toBe(true);
+    expect(findDropdownItem().exists()).toBe(true);
+  });
+
+  it('sets the correct data-clipboard-text', () => {
+    createComponent();
+    expect(findDropdownItem().attributes('data-clipboard-text')).toBe(
+      'https://example.com/permalink',
+    );
+  });
+
+  describe('handles onCopyPermalink correctly', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+      <ul class="gl-mb-0 gl-list-none gl-pl-0">
+        <li tabindex="0" data-testid="permalink" class="js-data-file-blob-permalink-url gl-new-dropdown-item" aria-keyshortcuts="y" data-clipboard-text="https://example.com/permalink" data-clipboard-handle-tooltip="false">
+          <button tabindex="-1" type="button" class="gl-new-dropdown-item-content">
+            <span class="gl-new-dropdown-item-text-wrapper">
+              <span class="gl-mb-2 gl-flex gl-items-center gl-justify-between">
+                <span>Copy permalink</span>
+                <kbd class="flat">y</kbd>
+              </span>
+            </span>
+          </button>
+          </li>
+      </ul>
+    `;
+      jest.spyOn(blobUtils, 'moveToFilePermalink').mockImplementation(() => {});
+      createComponent();
+    });
+
+    afterEach(() => {
+      document.body.innerHTML = '';
+      jest.clearAllMocks();
+    });
+
+    it('handles onCopyPermalink correctly when dropdown item is clicked', () => {
+      findDropdownItem().vm.$emit('action');
+
+      expect(blobUtils.moveToFilePermalink).toHaveBeenCalled();
+      expect($toast.show).toHaveBeenCalledWith('Permalink copied to clipboard.');
+    });
+    it('handles onCopyPermalink correctly when shortcut item is pressed', () => {
+      const mockButtonElement = {
+        click: jest.fn(),
+      };
+      jest.spyOn(document, 'querySelector').mockReturnValue(mockButtonElement);
+
+      Mousetrap.trigger('y');
+
+      expect(mockButtonElement.click).toHaveBeenCalled();
+      expect(blobUtils.moveToFilePermalink).toHaveBeenCalled();
+      expect($toast.show).toHaveBeenCalledWith('Permalink copied to clipboard.');
+    });
+  });
+
+  describe('lifecycle hooks', () => {
+    it('binds and unbinds Mousetrap shortcuts', () => {
+      const bindSpy = jest.spyOn(Mousetrap, 'bind');
+      const unbindSpy = jest.spyOn(Mousetrap, 'unbind');
+
+      createComponent();
+      expect(bindSpy).toHaveBeenCalledWith(
+        keysFor(PROJECT_FILES_GO_TO_PERMALINK),
+        expect.any(Function),
+      );
+
+      wrapper.destroy();
+      expect(unbindSpy).toHaveBeenCalledWith(
+        keysFor(PROJECT_FILES_GO_TO_PERMALINK),
+        expect.any(Function),
+      );
+    });
+  });
+
+  it('displays the shortcut key when shortcuts are not disabled', () => {
+    shouldDisableShortcuts.mockReturnValue(false);
+    createComponent();
+    expect(wrapper.find('kbd').exists()).toBe(true);
+    expect(wrapper.find('kbd').text()).toBe(keysFor(PROJECT_FILES_GO_TO_PERMALINK)[0]);
+  });
+
+  it('does not display the shortcut key when shortcuts are disabled', () => {
+    shouldDisableShortcuts.mockReturnValue(true);
+    createComponent();
+    expect(wrapper.find('kbd').exists()).toBe(false);
+  });
+});
-- 
GitLab


From 3776b8c32566c2605a0a7c05de14c18009eae83d Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 20 Feb 2025 10:40:41 -0500
Subject: [PATCH 2/5] UX and frontend review comments

- Update to output absolute path
- Clean up tests
---
 .../header_area/permalink_dropdown_item.vue   |  9 ++++---
 .../blobs/blob_line_permalink_updater_spec.rb |  8 +++---
 .../permalink_dropdown_item_spec.js           | 27 +++++--------------
 3 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
index 813d7a61684eea..5acaecec7705d4 100644
--- a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
+++ b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
@@ -7,6 +7,7 @@ import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import { Mousetrap } from '~/lib/mousetrap';
 import { moveToFilePermalink } from '~/blob/utils';
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
+import { getBaseURL, relativePathToAbsolute } from '~/lib/utils/url_utility';
 
 Vue.use(GlToast);
 export default {
@@ -17,8 +18,7 @@ export default {
   props: {
     permalinkPath: {
       type: String,
-      required: false,
-      default: null,
+      required: true,
     },
   },
   computed: {
@@ -28,6 +28,9 @@ export default {
     shortcutsDisabled() {
       return shouldDisableShortcuts();
     },
+    absolutePermalinkPath() {
+      return relativePathToAbsolute(this.permalinkPath, getBaseURL());
+    },
   },
   mounted() {
     this.initLinksUpdate();
@@ -62,7 +65,7 @@ export default {
     <gl-disclosure-dropdown-item
       :aria-keyshortcuts="permalinkShortcutKey"
       data-testid="permalink"
-      :data-clipboard-text="permalinkPath"
+      :data-clipboard-text="absolutePermalinkPath"
       data-clipboard-handle-tooltip="false"
       class="js-data-file-blob-permalink-url"
       @action="onCopyPermalink"
diff --git a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
index 6a1c8ec4737840..b6e582d000d9b8 100644
--- a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
+++ b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
@@ -106,7 +106,7 @@ def visit_blob(fragment = nil)
           visit_blob
           find_by_testid('default-actions-container').click
 
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path)))
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
         end
 
         it 'maintains initial fragment hash' do
@@ -115,7 +115,7 @@ def visit_blob(fragment = nil)
           visit_blob(fragment)
           find_by_testid('default-actions-container').click
 
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path), anchor: fragment))
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: fragment)))
         end
 
         it 'changes fragment hash if line number clicked' do
@@ -126,7 +126,7 @@ def visit_blob(fragment = nil)
 
           find_by_testid('default-actions-container').click
 
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path), anchor: "L5"))
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
         end
 
         it 'with initial fragment hash, changes fragment hash if line number clicked' do
@@ -139,7 +139,7 @@ def visit_blob(fragment = nil)
 
           find_by_testid('default-actions-container').click
 
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(project_blob_path(project, tree_join(sha, path), anchor: "L5"))
+          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
         end
       end
 
diff --git a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
index e1c087a30dbde3..76f6622e392ed8 100644
--- a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
+++ b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
@@ -7,6 +7,10 @@ import * as blobUtils from '~/blob/utils';
 import { Mousetrap } from '~/lib/mousetrap';
 
 jest.mock('~/behaviors/shortcuts/shortcuts_toggle');
+const relativePermalinkPath =
+  'flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json#L13';
+const absolutePermalinkPath =
+  'http://test.host/flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json#L13';
 
 describe('PermalinkDropdownItem', () => {
   let wrapper;
@@ -17,7 +21,7 @@ describe('PermalinkDropdownItem', () => {
   const createComponent = (props = {}) => {
     wrapper = shallowMount(PermalinkDropdownItem, {
       propsData: {
-        permalinkPath: 'https://example.com/permalink',
+        permalinkPath: relativePermalinkPath,
         ...props,
       },
       stubs: {
@@ -37,35 +41,18 @@ describe('PermalinkDropdownItem', () => {
     expect(findDropdownItem().exists()).toBe(true);
   });
 
-  it('sets the correct data-clipboard-text', () => {
+  it('sets data-clipboard-text with absolute path', () => {
     createComponent();
-    expect(findDropdownItem().attributes('data-clipboard-text')).toBe(
-      'https://example.com/permalink',
-    );
+    expect(findDropdownItem().attributes('data-clipboard-text')).toBe(absolutePermalinkPath);
   });
 
   describe('handles onCopyPermalink correctly', () => {
     beforeEach(() => {
-      document.body.innerHTML = `
-      <ul class="gl-mb-0 gl-list-none gl-pl-0">
-        <li tabindex="0" data-testid="permalink" class="js-data-file-blob-permalink-url gl-new-dropdown-item" aria-keyshortcuts="y" data-clipboard-text="https://example.com/permalink" data-clipboard-handle-tooltip="false">
-          <button tabindex="-1" type="button" class="gl-new-dropdown-item-content">
-            <span class="gl-new-dropdown-item-text-wrapper">
-              <span class="gl-mb-2 gl-flex gl-items-center gl-justify-between">
-                <span>Copy permalink</span>
-                <kbd class="flat">y</kbd>
-              </span>
-            </span>
-          </button>
-          </li>
-      </ul>
-    `;
       jest.spyOn(blobUtils, 'moveToFilePermalink').mockImplementation(() => {});
       createComponent();
     });
 
     afterEach(() => {
-      document.body.innerHTML = '';
       jest.clearAllMocks();
     });
 
-- 
GitLab


From b313b6ee0d432cf514520cd30f072f79daecff77 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 27 Feb 2025 20:20:08 -0500
Subject: [PATCH 3/5] Maintainer review comments

- Refactor to use vue shared state to manage line number changes,
which essentially remove the usage of blob_line_permalink_updater.js
and blob/utils.js
- Separate out onCopyPermalink into two methods
- Update to use ref to grab the element
- Remove unnecessary margin
---
 .../blob/blob_line_permalink_updater.js       |  13 +-
 app/assets/javascripts/blob/state.js          |   9 +
 app/assets/javascripts/blob/utils.js          |   5 +-
 .../header_area/permalink_dropdown_item.vue   |  42 ++---
 .../source_viewer/components/chunk.vue        |   6 +
 .../blobs/blob_line_permalink_updater_spec.rb | 176 +++++-------------
 .../permalink_dropdown_item_spec.js           |  74 ++++----
 .../source_viewer/components/chunk_spec.js    |  15 ++
 8 files changed, 137 insertions(+), 203 deletions(-)
 create mode 100644 app/assets/javascripts/blob/state.js

diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js
index 7d3165a417b1ef..62d9da528f4cff 100644
--- a/app/assets/javascripts/blob/blob_line_permalink_updater.js
+++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js
@@ -11,27 +11,16 @@ const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
     [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
       const baseHref =
         permalinkButton.dataset.originalHref ||
-        permalinkButton.dataset.clipboardText?.split('#')[0] ||
         (() => {
-          const href =
-            permalinkButton.getAttribute('href') ||
-            // eslint-disable-next-line unicorn/prefer-dom-node-dataset
-            permalinkButton.getAttribute('data-clipboard-text')?.split('#')[0];
+          const href = permalinkButton.getAttribute('href');
           // eslint-disable-next-line no-param-reassign
           permalinkButton.dataset.originalHref = href;
-          // eslint-disable-next-line no-param-reassign
-          permalinkButton.dataset.clipboardText = href;
           return href;
         })();
       const lineNum = parseInt(hash.split('L')[1], 10);
       const page = getPageParamValue(lineNum);
       const searchString = getPageSearchString(baseHref, page);
       permalinkButton.setAttribute('href', `${baseHref}${searchString}${hashUrlString}`);
-      // eslint-disable-next-line unicorn/prefer-dom-node-dataset
-      permalinkButton.setAttribute(
-        'data-clipboard-text',
-        `${baseHref}${searchString}${hashUrlString}`,
-      );
     });
   }
 };
diff --git a/app/assets/javascripts/blob/state.js b/app/assets/javascripts/blob/state.js
new file mode 100644
index 00000000000000..21456a84a38843
--- /dev/null
+++ b/app/assets/javascripts/blob/state.js
@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+export const lineState = Vue.observable({
+  currentLineNumber: null,
+});
+
+export const updateLineNumber = (lineNumber) => {
+  lineState.currentLineNumber = lineNumber;
+};
diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js
index b245a5c630518a..0ecc8be1027211 100644
--- a/app/assets/javascripts/blob/utils.js
+++ b/app/assets/javascripts/blob/utils.js
@@ -24,9 +24,7 @@ export const getPageSearchString = (path, page) => {
 
 export function moveToFilePermalink() {
   const fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
-  const permalink =
-    fileBlobPermalinkUrlElement?.getAttribute('href') ||
-    fileBlobPermalinkUrlElement?.getAttribute('data-clipboard-text');
+  const permalink = fileBlobPermalinkUrlElement?.getAttribute('href');
 
   if (!permalink) {
     return;
@@ -51,6 +49,7 @@ function eventHasModifierKeys(event) {
 
 export function shortcircuitPermalinkButton() {
   const fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
+
   fileBlobPermalinkUrlElement?.addEventListener('click', (e) => {
     if (!eventHasModifierKeys(e)) {
       e.preventDefault();
diff --git a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
index 5acaecec7705d4..3b2861645763af 100644
--- a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
+++ b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
@@ -3,13 +3,14 @@ import Vue from 'vue';
 import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlToast } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { keysFor, PROJECT_FILES_GO_TO_PERMALINK } from '~/behaviors/shortcuts/keybindings';
-import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import { Mousetrap } from '~/lib/mousetrap';
-import { moveToFilePermalink } from '~/blob/utils';
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
 import { getBaseURL, relativePathToAbsolute } from '~/lib/utils/url_utility';
+import { lineState } from '~/blob/state';
+import { getPageParamValue, getPageSearchString } from '~/blob/utils';
 
 Vue.use(GlToast);
+
 export default {
   components: {
     GlDisclosureDropdownGroup,
@@ -31,29 +32,28 @@ export default {
     absolutePermalinkPath() {
       return relativePathToAbsolute(this.permalinkPath, getBaseURL());
     },
+    updatedPermalinkPath() {
+      if (lineState.currentLineNumber) {
+        const page = getPageParamValue(lineState.currentLineNumber);
+        const searchString = getPageSearchString(this.absolutePermalinkPath, page);
+        return `${this.absolutePermalinkPath}${searchString}#${lineState.currentLineNumber}`;
+      }
+      return this.absolutePermalinkPath;
+    },
   },
   mounted() {
-    this.initLinksUpdate();
-    Mousetrap.bind(keysFor(PROJECT_FILES_GO_TO_PERMALINK), () => this.onCopyPermalink(true));
+    Mousetrap.bind(keysFor(PROJECT_FILES_GO_TO_PERMALINK), this.triggerCopyPermalink);
   },
   beforeDestroy() {
-    Mousetrap.unbind(keysFor(PROJECT_FILES_GO_TO_PERMALINK), () => this.onCopyPermalink(true));
+    Mousetrap.unbind(keysFor(PROJECT_FILES_GO_TO_PERMALINK));
   },
   methods: {
-    initLinksUpdate() {
-      // eslint-disable-next-line no-new
-      new BlobLinePermalinkUpdater(
-        document.querySelector('.tree-holder'),
-        '.file-line-num[data-line-number], .file-line-num[data-line-number] *',
-        document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
-      );
+    triggerCopyPermalink() {
+      const buttonElement = this.$refs.copyPermalinkButton.$el;
+      buttonElement.click();
+      this.onCopyPermalink();
     },
-    onCopyPermalink(isTriggeredByShortcut = false) {
-      if (isTriggeredByShortcut) {
-        const buttonElement = document.querySelector('.js-data-file-blob-permalink-url');
-        buttonElement.click();
-      }
-      moveToFilePermalink();
+    onCopyPermalink() {
       this.$toast.show(__('Permalink copied to clipboard.'));
     },
   },
@@ -63,15 +63,15 @@ export default {
 <template>
   <gl-disclosure-dropdown-group>
     <gl-disclosure-dropdown-item
+      ref="copyPermalinkButton"
       :aria-keyshortcuts="permalinkShortcutKey"
       data-testid="permalink"
-      :data-clipboard-text="absolutePermalinkPath"
+      :data-clipboard-text="updatedPermalinkPath"
       data-clipboard-handle-tooltip="false"
-      class="js-data-file-blob-permalink-url"
       @action="onCopyPermalink"
     >
       <template #list-item>
-        <span class="gl-mb-2 gl-flex gl-items-center gl-justify-between">
+        <span class="gl-flex gl-items-center gl-justify-between">
           <span>{{ __('Copy permalink') }}</span>
           <kbd v-if="permalinkShortcutKey && !shortcutsDisabled" class="flat">{{
             permalinkShortcutKey
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
index 8d1ebb26cbb127..52d7d1290092a5 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
@@ -6,6 +6,7 @@ import { GlIntersectionObserver } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { getPageParamValue, getPageSearchString } from '~/blob/utils';
 import { addInteractionClass } from '~/code_navigation/utils';
+import { updateLineNumber } from '~/blob/state';
 
 /*
  * We only highlight the chunk that is currently visible to the user.
@@ -107,6 +108,10 @@ export default {
       this.hasAppeared = true;
       this.$emit('appear');
     },
+    handleOnClick(event) {
+      const { lineNumber } = event.target.dataset;
+      updateLineNumber(lineNumber);
+    },
     calculateLineNumber(index) {
       return this.startingFrom + index + 1;
     },
@@ -146,6 +151,7 @@ export default {
           class="file-line-num gl-select-none !gl-shadow-none"
           :href="`#L${calculateLineNumber(index)}`"
           :data-line-number="calculateLineNumber(index)"
+          @click="handleOnClick"
         >
           {{ calculateLineNumber(index) }}
         </a>
diff --git a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
index b6e582d000d9b8..60be9262f67bb2 100644
--- a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
+++ b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
@@ -18,165 +18,79 @@ def visit_blob(fragment = nil)
       visit project_blob_path(project, tree_join('master', path), anchor: fragment)
     end
 
-    context 'when `blob_overflow_menu` flag is off' do
-      before do
-        stub_feature_flags(blob_overflow_menu: false)
-      end
-
-      describe 'Click "Permalink" button' do
-        it 'works with no initial line number fragment hash' do
-          visit_blob
-
-          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
-        end
-
-        it 'maintains initial fragment hash' do
-          fragment = "L3"
-
-          visit_blob(fragment)
-
-          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: fragment)))
-        end
-
-        it 'changes fragment hash if line number clicked' do
-          visit_blob
-
-          find('#L3').click
-          find("#L5").click
-
-          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
-        end
-
-        it 'with initial fragment hash, changes fragment hash if line number clicked' do
-          fragment = "L1"
-
-          visit_blob(fragment)
+    before do
+      stub_feature_flags(blob_overflow_menu: false)
+    end
 
-          find('#L3').click
-          find("#L5").click
+    describe 'Click "Permalink" button' do
+      it 'works with no initial line number fragment hash' do
+        visit_blob
 
-          expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
-        end
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
       end
 
-      describe 'Click "Blame" button' do
-        it 'works with no initial line number fragment hash' do
-          visit_blob
-
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
-        end
+      it 'maintains intitial fragment hash' do
+        fragment = "L3"
 
-        it 'maintains initial fragment hash' do
-          fragment = "L3"
+        visit_blob(fragment)
 
-          visit_blob(fragment)
-
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: fragment)))
-        end
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: fragment)))
+      end
 
-        it 'changes fragment hash if line number clicked' do
-          visit_blob
+      it 'changes fragment hash if line number clicked' do
+        visit_blob
 
-          find('#L3').click
-          find("#L5").click
+        find('#L3').click
+        find("#L5").click
 
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
-        end
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
+      end
 
-        it 'with initial fragment hash, changes fragment hash if line number clicked' do
-          fragment = "L1"
+      it 'with initial fragment hash, changes fragment hash if line number clicked' do
+        fragment = "L1"
 
-          visit_blob(fragment)
+        visit_blob(fragment)
 
-          find('#L3').click
-          find("#L5").click
+        find('#L3').click
+        find("#L5").click
 
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
-        end
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
       end
     end
 
-    context 'when `blob_overflow_menu` flag is on' do
-      before do
-        stub_feature_flags(blob_overflow_menu: true)
-      end
-
-      describe 'Click "Permalink" button' do
-        it 'works with no initial line number fragment hash' do
-          visit_blob
-          find_by_testid('default-actions-container').click
-
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
-        end
-
-        it 'maintains initial fragment hash' do
-          fragment = "L3"
-
-          visit_blob(fragment)
-          find_by_testid('default-actions-container').click
-
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: fragment)))
-        end
-
-        it 'changes fragment hash if line number clicked' do
-          visit_blob
-
-          find('#L3').click
-          find("#L5").click
-
-          find_by_testid('default-actions-container').click
-
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
-        end
+    describe 'Click "Blame" button' do
+      it 'works with no initial line number fragment hash' do
+        visit_blob
 
-        it 'with initial fragment hash, changes fragment hash if line number clicked' do
-          fragment = "L1"
-
-          visit_blob(fragment)
-
-          find('#L3').click
-          find("#L5").click
-
-          find_by_testid('default-actions-container').click
-
-          expect(find('.js-data-file-blob-permalink-url')['data-clipboard-text']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: "L5")))
-        end
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
       end
 
-      describe 'Click "Blame" button' do
-        it 'works with no initial line number fragment hash' do
-          visit_blob
+      it 'maintains intitial fragment hash' do
+        fragment = "L3"
 
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
-        end
+        visit_blob(fragment)
 
-        it 'maintains initial fragment hash' do
-          fragment = "L3"
-
-          visit_blob(fragment)
-
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: fragment)))
-        end
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: fragment)))
+      end
 
-        it 'changes fragment hash if line number clicked' do
-          visit_blob
+      it 'changes fragment hash if line number clicked' do
+        visit_blob
 
-          find('#L3').click
-          find("#L5").click
+        find('#L3').click
+        find("#L5").click
 
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
-        end
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
+      end
 
-        it 'with initial fragment hash, changes fragment hash if line number clicked' do
-          fragment = "L1"
+      it 'with initial fragment hash, changes fragment hash if line number clicked' do
+        fragment = "L1"
 
-          visit_blob(fragment)
+        visit_blob(fragment)
 
-          find('#L3').click
-          find("#L5").click
+        find('#L3').click
+        find("#L5").click
 
-          expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
-        end
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: "L5")))
       end
     end
   end
diff --git a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
index 76f6622e392ed8..fed028069e1975 100644
--- a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
+++ b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
@@ -1,16 +1,17 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { GlDisclosureDropdownGroup } from '@gitlab/ui';
 import PermalinkDropdownItem from '~/repository/components/header_area/permalink_dropdown_item.vue';
 import { keysFor, PROJECT_FILES_GO_TO_PERMALINK } from '~/behaviors/shortcuts/keybindings';
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
-import * as blobUtils from '~/blob/utils';
 import { Mousetrap } from '~/lib/mousetrap';
+import { lineState } from '~/blob/state';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 jest.mock('~/behaviors/shortcuts/shortcuts_toggle');
+jest.mock('~/blob/state');
+
 const relativePermalinkPath =
-  'flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json#L13';
-const absolutePermalinkPath =
-  'http://test.host/flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json#L13';
+  'flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json';
 
 describe('PermalinkDropdownItem', () => {
   let wrapper;
@@ -18,60 +19,64 @@ describe('PermalinkDropdownItem', () => {
   const $toast = {
     show: jest.fn(),
   };
+
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(PermalinkDropdownItem, {
+    wrapper = shallowMountExtended(PermalinkDropdownItem, {
       propsData: {
         permalinkPath: relativePermalinkPath,
         ...props,
       },
       stubs: {
         GlDisclosureDropdownGroup,
-        GlDisclosureDropdownItem,
       },
       mocks: { $toast },
     });
   };
 
-  const findDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
   const findDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup);
 
-  it('renders correctly', () => {
+  const findPermalinkLinkDropdown = () => wrapper.findByTestId('permalink');
+
+  beforeEach(() => {
+    lineState.currentLineNumber = null;
     createComponent();
-    expect(findDropdownGroup().exists()).toBe(true);
-    expect(findDropdownItem().exists()).toBe(true);
   });
 
-  it('sets data-clipboard-text with absolute path', () => {
-    createComponent();
-    expect(findDropdownItem().attributes('data-clipboard-text')).toBe(absolutePermalinkPath);
+  it('renders correctly', () => {
+    expect(findDropdownGroup().exists()).toBe(true);
+    expect(findPermalinkLinkDropdown().exists()).toBe(true);
   });
 
-  describe('handles onCopyPermalink correctly', () => {
-    beforeEach(() => {
-      jest.spyOn(blobUtils, 'moveToFilePermalink').mockImplementation(() => {});
-      createComponent();
+  describe('updatedPermalinkPath', () => {
+    it('returns absolutePermalinkPath when no line number is set', () => {
+      expect(findPermalinkLinkDropdown().attributes('data-clipboard-text')).toBe(
+        'http://test.host/flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json',
+      );
     });
 
-    afterEach(() => {
-      jest.clearAllMocks();
-    });
+    it('returns updated path with line number when set', () => {
+      lineState.currentLineNumber = 'L10';
+      createComponent();
 
-    it('handles onCopyPermalink correctly when dropdown item is clicked', () => {
-      findDropdownItem().vm.$emit('action');
+      expect(findPermalinkLinkDropdown().attributes('data-clipboard-text')).toBe(
+        `http://test.host/flightjs/Flight/-/blob/46ca9ebd5a43ec240ee8d64e2bb829169dff744e/bower.json#L10`,
+      );
+    });
+  });
 
-      expect(blobUtils.moveToFilePermalink).toHaveBeenCalled();
+  describe('handles onCopyPermalink correctly', () => {
+    it('shows toast when dropdown item is clicked', () => {
+      findPermalinkLinkDropdown().vm.$emit('action');
       expect($toast.show).toHaveBeenCalledWith('Permalink copied to clipboard.');
     });
-    it('handles onCopyPermalink correctly when shortcut item is pressed', () => {
-      const mockButtonElement = {
-        click: jest.fn(),
-      };
-      jest.spyOn(document, 'querySelector').mockReturnValue(mockButtonElement);
+
+    it('triggers copy permalink when shortcut is used', async () => {
+      const clickSpy = jest.spyOn(findPermalinkLinkDropdown().element, 'click');
 
       Mousetrap.trigger('y');
+      await nextTick();
 
-      expect(mockButtonElement.click).toHaveBeenCalled();
-      expect(blobUtils.moveToFilePermalink).toHaveBeenCalled();
+      expect(clickSpy).toHaveBeenCalled();
       expect($toast.show).toHaveBeenCalledWith('Permalink copied to clipboard.');
     });
   });
@@ -88,10 +93,7 @@ describe('PermalinkDropdownItem', () => {
       );
 
       wrapper.destroy();
-      expect(unbindSpy).toHaveBeenCalledWith(
-        keysFor(PROJECT_FILES_GO_TO_PERMALINK),
-        expect.any(Function),
-      );
+      expect(unbindSpy).toHaveBeenCalledWith(keysFor(PROJECT_FILES_GO_TO_PERMALINK));
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
index 32833e58c3b9a1..fae586cd17aa9d 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
@@ -5,9 +5,11 @@ import { GlIntersectionObserver } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Chunk from '~/vue_shared/components/source_viewer/components/chunk.vue';
 import { addInteractionClass } from '~/code_navigation/utils';
+import { updateLineNumber } from '~/blob/state';
 import { CHUNK_1, CHUNK_2 } from '../mock_data';
 
 jest.mock('~/code_navigation/utils');
+jest.mock('~/blob/state');
 
 Vue.use(Vuex);
 
@@ -101,5 +103,18 @@ describe('Chunk component', () => {
 
       expect(addInteractionClass).toHaveBeenCalledWith({ d: 'test', path: 'index.js' });
     });
+
+    it('calls updateLineNumber with the correct line number when a line is clicked', async () => {
+      createComponent({ ...CHUNK_2, isHighlighted: true });
+
+      const lineNumber = '71';
+      const lineNumberElement = wrapper.find(`[data-line-number="${lineNumber}"]`);
+
+      expect(lineNumberElement.exists()).toBe(true);
+
+      await lineNumberElement.trigger('click');
+
+      expect(updateLineNumber).toHaveBeenCalledWith(lineNumber);
+    });
   });
 });
-- 
GitLab


From 64767f666bedc4c9dcab7d690591a4aed60dd992 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Fri, 28 Feb 2025 13:59:56 -0500
Subject: [PATCH 4/5] The missing L

---
 .../header_area/permalink_dropdown_item.vue          | 12 +++++-------
 .../header_area/permalink_dropdown_item_spec.js      |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
index 3b2861645763af..20804f914c1eda 100644
--- a/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
+++ b/app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue
@@ -30,15 +30,13 @@ export default {
       return shouldDisableShortcuts();
     },
     absolutePermalinkPath() {
-      return relativePathToAbsolute(this.permalinkPath, getBaseURL());
-    },
-    updatedPermalinkPath() {
+      const baseAbsolutePath = relativePathToAbsolute(this.permalinkPath, getBaseURL());
       if (lineState.currentLineNumber) {
         const page = getPageParamValue(lineState.currentLineNumber);
-        const searchString = getPageSearchString(this.absolutePermalinkPath, page);
-        return `${this.absolutePermalinkPath}${searchString}#${lineState.currentLineNumber}`;
+        const searchString = getPageSearchString(baseAbsolutePath, page);
+        return `${baseAbsolutePath}${searchString}#L${lineState.currentLineNumber}`;
       }
-      return this.absolutePermalinkPath;
+      return baseAbsolutePath;
     },
   },
   mounted() {
@@ -66,7 +64,7 @@ export default {
       ref="copyPermalinkButton"
       :aria-keyshortcuts="permalinkShortcutKey"
       data-testid="permalink"
-      :data-clipboard-text="updatedPermalinkPath"
+      :data-clipboard-text="absolutePermalinkPath"
       data-clipboard-handle-tooltip="false"
       @action="onCopyPermalink"
     >
diff --git a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
index fed028069e1975..f4a64c100cff76 100644
--- a/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
+++ b/spec/frontend/repository/components/header_area/permalink_dropdown_item_spec.js
@@ -55,7 +55,7 @@ describe('PermalinkDropdownItem', () => {
     });
 
     it('returns updated path with line number when set', () => {
-      lineState.currentLineNumber = 'L10';
+      lineState.currentLineNumber = '10';
       createComponent();
 
       expect(findPermalinkLinkDropdown().attributes('data-clipboard-text')).toBe(
-- 
GitLab


From 91c9e7086c8b3fb8cfc2d8a3a9a37becb8ef1dd6 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Fri, 28 Feb 2025 17:06:47 -0500
Subject: [PATCH 5/5] Add feature flag check in old shortcut tests

---
 .../blobs/blob_line_permalink_updater_spec.rb        | 12 ++++++------
 spec/features/projects/blobs/shortcuts_blob_spec.rb  |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
index 60be9262f67bb2..af4baa17ce6ed2 100644
--- a/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
+++ b/spec/features/projects/blobs/blob_line_permalink_updater_spec.rb
@@ -18,18 +18,18 @@ def visit_blob(fragment = nil)
       visit project_blob_path(project, tree_join('master', path), anchor: fragment)
     end
 
-    before do
-      stub_feature_flags(blob_overflow_menu: false)
-    end
-
     describe 'Click "Permalink" button' do
+      before do
+        stub_feature_flags(blob_overflow_menu: false)
+      end
+
       it 'works with no initial line number fragment hash' do
         visit_blob
 
         expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path))))
       end
 
-      it 'maintains intitial fragment hash' do
+      it 'maintains initial fragment hash' do
         fragment = "L3"
 
         visit_blob(fragment)
@@ -65,7 +65,7 @@ def visit_blob(fragment = nil)
         expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path))))
       end
 
-      it 'maintains intitial fragment hash' do
+      it 'maintains initial fragment hash' do
         fragment = "L3"
 
         visit_blob(fragment)
diff --git a/spec/features/projects/blobs/shortcuts_blob_spec.rb b/spec/features/projects/blobs/shortcuts_blob_spec.rb
index 0de9137f9ec70b..4a0422c15da960 100644
--- a/spec/features/projects/blobs/shortcuts_blob_spec.rb
+++ b/spec/features/projects/blobs/shortcuts_blob_spec.rb
@@ -18,6 +18,10 @@ def visit_blob(fragment = nil)
     end
 
     describe 'pressing "y"' do
+      before do
+        stub_feature_flags(blob_overflow_menu: false)
+      end
+
       it 'redirects to permalink with commit sha' do
         visit_blob
         wait_for_requests
-- 
GitLab