From 0c12637bb295ce6f6ecd15241de3b39f46051679 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Thu, 9 Jan 2025 13:16:57 +0100
Subject: [PATCH 1/7] Create dopdown item component for file lock button

---
 .../components/header_area/blob_controls.vue  |   3 +
 .../header_area/blob_overflow_menu.vue        |  36 +++-
 .../queries/blob_controls.query.graphql       |   2 +
 .../header_area/lock_file_dropdown_item.vue   | 164 ++++++++++++++++++
 .../components/blob_content_viewer_spec.js    |   2 +-
 .../lock_file_dropdown_item_spec.js           | 159 +++++++++++++++++
 ee/spec/frontend/repository/mock_data.js      |   2 +-
 .../header_area/blob_overflow_menu_spec.js    |   8 +-
 8 files changed, 368 insertions(+), 8 deletions(-)
 create mode 100644 ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
 create mode 100644 ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js

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 7fe14d5720e61f..8948029cfb5700 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -197,6 +197,9 @@ export default {
 
     <overflow-menu
       v-if="!isLoadingRepositoryBlob && glFeatures.blobOverflowMenu"
+      :name="blobInfo.name"
+      :project-path="projectPath"
+      :path="blobInfo.path"
       :raw-path="rawPath"
       :rich-viewer="blobInfo.richViewer"
       :simple-viewer="blobInfo.simpleViewer"
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 2911170258fed7..04294959240abe 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
@@ -2,6 +2,7 @@
 import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import { setUrlParams, relativePathToAbsolute, getBaseURL } from '~/lib/utils/url_utility';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 
 export const i18n = {
@@ -16,10 +17,13 @@ export default {
   components: {
     GlDisclosureDropdown,
     GlDisclosureDropdownItem,
+    LockFileDropdownItem: () =>
+      import('ee_component/repository/components/header_area/lock_file_dropdown_item.vue'),
   },
   directives: {
     GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     blobHash: {
       default: '',
@@ -29,6 +33,18 @@ export default {
     },
   },
   props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
     rawPath: {
       type: String,
       required: true,
@@ -174,16 +190,32 @@ export default {
       :toggle-text="$options.i18n.dropdownLabel"
       text-sr-only
     >
+      <lock-file-dropdown-item
+        v-if="glFeatures.fileLocks"
+        :name="name"
+        :path="path"
+        :project-path="projectPath"
+      />
       <gl-disclosure-dropdown-item
         v-if="showCopyButton"
+        data-testid="copy-item"
         :item="copyFileContentsItem"
         class="js-copy-blob-source-btn"
         @action="onCopy"
       />
-      <gl-disclosure-dropdown-item v-if="!isBinary" :item="openRawItem" />
-      <gl-disclosure-dropdown-item v-if="!isEmpty && canDownloadCode" :item="downloadItem" />
+      <gl-disclosure-dropdown-item
+        v-if="!isBinary"
+        data-testid="open-raw-item"
+        :item="openRawItem"
+      />
+      <gl-disclosure-dropdown-item
+        v-if="!isEmpty && canDownloadCode"
+        data-test="download-item"
+        :item="downloadItem"
+      />
       <gl-disclosure-dropdown-item
         v-if="environmentName && environmentPath"
+        data-testid="environment-item"
         :item="environmentItem"
       />
     </gl-disclosure-dropdown>
diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
index e6e6505932081e..71470717d1a4c4 100644
--- a/app/assets/javascripts/repository/queries/blob_controls.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
@@ -5,12 +5,14 @@ query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!, $ref
       blobs(paths: [$filePath], ref: $ref, refType: $refType) {
         nodes {
           id
+          name
           blamePath
           permalinkPath
           storedExternally
           externalStorage
           environmentFormattedExternalUrl
           environmentExternalUrlForRouteMap
+          path
           rawPath
           rawTextBlob
           simpleViewer {
diff --git a/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
new file mode 100644
index 00000000000000..72a3fc73227bf9
--- /dev/null
+++ b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
@@ -0,0 +1,164 @@
+<script>
+import { GlDisclosureDropdownItem, GlModal } from '@gitlab/ui';
+import { createAlert } from '~/alert';
+import { sprintf, __ } from '~/locale';
+import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.graphql';
+import lockPathMutation from '~/repository/mutations/lock_path.mutation.graphql';
+import { DEFAULT_BLOB_INFO } from '~/repository/constants';
+
+export default {
+  i18n: {
+    lock: __('Lock'),
+    unlock: __('Unlock'),
+    modalTitle: __('Lock file?'),
+    actionPrimary: __('Okay'),
+    actionCancel: __('Cancel'),
+    fetchError: __('An error occurred while fetching lock information, please try again.'),
+    mutationError: __('An error occurred while editing lock information, please try again.'),
+  },
+  components: {
+    GlDisclosureDropdownItem,
+    GlModal,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
+    projectInfo: {
+      query: projectInfoQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update({ project }) {
+        this.pathLocks = project?.pathLocks || DEFAULT_BLOB_INFO.pathLocks;
+        this.userPermissions = project?.userPermissions;
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.fetchError });
+      },
+    },
+  },
+  data() {
+    return {
+      isModalVisible: false,
+      locked: false,
+      pathLocks: DEFAULT_BLOB_INFO.pathLocks,
+      userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+    };
+  },
+  computed: {
+    lockButtonTitle() {
+      return this.isLocked ? this.$options.i18n.unlock : this.$options.i18n.lock;
+    },
+    lockConfirmText() {
+      return sprintf(__('Are you sure you want to %{action} %{name}?'), {
+        action: this.lockButtonTitle.toLowerCase(),
+        name: this.name,
+      });
+    },
+    lockFileItem() {
+      return {
+        text: this.lockButtonTitle,
+        extraAttrs: {
+          disabled: !this.canLock,
+        },
+      };
+    },
+    modalActions() {
+      return {
+        primary: {
+          text: this.$options.i18n.actionPrimary,
+          attributes: { variant: 'confirm', 'data-testid': 'confirm-ok-button' },
+        },
+        cancel: {
+          text: this.$options.i18n.actionCancel,
+        },
+      };
+    },
+    canLock() {
+      const { pushCode, downloadCode } = this.userPermissions;
+      const currentUsername = window.gon?.current_username;
+
+      if (this.pathLockedByUser && this.pathLockedByUser.username !== currentUsername) {
+        return false;
+      }
+
+      return pushCode && downloadCode;
+    },
+    pathLockedByUser() {
+      const pathLock = this.pathLocks?.nodes.find((node) => node.path === this.path);
+
+      return pathLock ? pathLock.user : null;
+    },
+    isLocked() {
+      return Boolean(this.pathLockedByUser);
+    },
+  },
+  watch: {
+    isLocked(val) {
+      this.locked = val;
+    },
+  },
+  methods: {
+    hideModal() {
+      this.isModalVisible = false;
+    },
+    showModal() {
+      if (this.canLock) {
+        this.isModalVisible = true;
+      }
+    },
+    toggleLock() {
+      const locked = !this.locked;
+      this.$apollo
+        .mutate({
+          mutation: lockPathMutation,
+          variables: {
+            filePath: this.path,
+            projectPath: this.projectPath,
+            lock: locked,
+          },
+        })
+        .catch((error) => {
+          createAlert({ message: this.$options.i18n.mutationError, captureError: true, error });
+        })
+        .finally(() => {
+          this.locked = locked;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-disclosure-dropdown-item :item="lockFileItem" @action="showModal" />
+    <gl-modal
+      modal-id="lock-file-modal"
+      :visible="isModalVisible"
+      :title="$options.i18n.modalTitle"
+      :action-primary="modalActions.primary"
+      :action-cancel="modalActions.cancel"
+      @primary="toggleLock"
+      @hide="hideModal"
+    >
+      <p>
+        {{ lockConfirmText }}
+      </p>
+    </gl-modal>
+  </div>
+</template>
diff --git a/ee/spec/frontend/repository/components/blob_content_viewer_spec.js b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
index bb082aea5ac177..0dc282431a830c 100644
--- a/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -175,7 +175,7 @@ describe('Blob content viewer component', () => {
             pushCode: canPushCode,
             downloadCode: canDownloadCode,
             empty,
-            path: 'locked_file.js',
+            path: 'some/path/locked_file.js',
           });
 
           expect(findBlobButtonGroup().props('canLock')).toBe(canLock);
diff --git a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
new file mode 100644
index 00000000000000..151ce7daf4c5dc
--- /dev/null
+++ b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
@@ -0,0 +1,159 @@
+import { GlDisclosureDropdownItem, GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import lockPathMutation from '~/repository/mutations/lock_path.mutation.graphql';
+import projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
+import { projectMock, userPermissionsMock } from 'ee_jest/repository/mock_data';
+import LockFileDropdownItem from 'ee_component/repository/components/header_area/lock_file_dropdown_item.vue';
+import { createAlert } from '~/alert';
+
+Vue.use(VueApollo);
+jest.mock('~/alert');
+
+describe('LockFileDropdownItem component', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const projectInfoQueryMockResolver = jest
+    .fn()
+    .mockResolvedValue({ data: { project: projectMock } });
+  const projectInfoQueryErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
+
+  const lochPathMutationResolver = jest.fn();
+
+  const createComponent = ({
+    mutationResolver = lochPathMutationResolver,
+    projectInfoResolver = projectInfoQueryMockResolver,
+  } = {}) => {
+    window.gon = { current_username: projectMock.pathLocks.nodes[0].user.username };
+    fakeApollo = createMockApollo([
+      [projectInfoQuery, projectInfoResolver],
+      [lockPathMutation, mutationResolver],
+    ]);
+
+    wrapper = shallowMount(LockFileDropdownItem, {
+      apolloProvider: fakeApollo,
+      propsData: {
+        name: 'locked_file.js',
+        path: 'some/path/locked_file.js',
+        projectPath: 'some/project/path',
+      },
+    });
+  };
+
+  let lockMutationMock;
+  const findLockFileDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const clickSubmit = () => findModal().vm.$emit('primary');
+  const clickHide = () => findModal().vm.$emit('hide');
+
+  beforeEach(async () => {
+    createComponent();
+    await waitForPromises();
+  });
+
+  it('disables the lock dropdown item if user can not lock a file', async () => {
+    const projectWithNoPushPermission = {
+      data: {
+        project: {
+          ...projectMock,
+          userPermissions: {
+            ...userPermissionsMock,
+            pushCode: false,
+          },
+        },
+      },
+    };
+    createComponent({
+      projectInfoResolver: jest.fn().mockResolvedValue(projectWithNoPushPermission),
+    });
+    await waitForPromises();
+
+    expect(findLockFileDropdownItem().props('item')).toMatchObject({
+      extraAttrs: { disabled: true },
+    });
+  });
+
+  it('renders the Lock dropdown item label, when file is not locked', async () => {
+    const projectWithNoLocks = {
+      data: {
+        project: {
+          ...projectMock,
+          pathLocks: { __typename: 'PathLockConnection', nodes: [] },
+        },
+      },
+    };
+
+    createComponent({
+      projectInfoResolver: jest.fn().mockResolvedValue(projectWithNoLocks),
+    });
+    await waitForPromises();
+
+    expect(findLockFileDropdownItem().props('item')).toMatchObject({
+      text: 'Lock',
+      extraAttrs: { disabled: false },
+    });
+  });
+
+  it('renders the Unlock dropdown item label, when file is locked', () => {
+    expect(findLockFileDropdownItem().props('item')).toMatchObject({
+      text: 'Unlock',
+      extraAttrs: { disabled: false },
+    });
+  });
+
+  it('creates an alert with the correct message, when projectInfo query fails', async () => {
+    createComponent({ projectInfoResolver: projectInfoQueryErrorResolver });
+    await waitForPromises();
+
+    expect(createAlert).toHaveBeenCalledWith({
+      message: 'An error occurred while fetching lock information, please try again.',
+    });
+  });
+
+  describe('Modal', () => {
+    it('displays a confirm modal when the lock dropdown item is clicked', () => {
+      findLockFileDropdownItem().vm.$emit('action');
+      expect(findModal().text()).toBe('Are you sure you want to unlock locked_file.js?');
+    });
+
+    it('should hide the confirm modal when a hide action is triggered', async () => {
+      await findLockFileDropdownItem().vm.$emit('action');
+      expect(findModal().props('visible')).toBe(true);
+
+      await clickHide();
+      expect(findModal().props('visible')).toBe(false);
+    });
+
+    it('executes a lock mutation once lock is confirmed', async () => {
+      lockMutationMock = jest.fn().mockRejectedValue(new Error('Request failed'));
+      createComponent({ mutationResolver: lockMutationMock });
+      await waitForPromises();
+
+      findLockFileDropdownItem().vm.$emit('action');
+      clickSubmit();
+
+      expect(lockMutationMock).toHaveBeenCalledWith({
+        filePath: 'some/path/locked_file.js',
+        lock: false,
+        projectPath: 'some/project/path',
+      });
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'An error occurred while editing lock information, please try again.',
+        captureError: true,
+        error: expect.any(Error),
+      });
+    });
+
+    it('does not execute a lock mutation if lock not confirmed', () => {
+      findLockFileDropdownItem().vm.$emit('action');
+
+      expect(lockMutationMock).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index ac696a07e02f8d..0de032e553aa50 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -87,7 +87,7 @@ export const projectMock = {
       {
         __typename: 'PathLock',
         id: 'gid://gitlab/PathLock/2',
-        path: 'locked_file.js',
+        path: 'some/path/locked_file.js',
         user: {
           id: 'gid://gitlab/User/1',
           username: 'root',
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 b9c6b9b3eac92f..699abb0b82f1b5 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
@@ -72,10 +72,10 @@ describe('Blob Overflow Menu', () => {
     findDropdownItems().wrappers.find((x) => {
       return x.props('item').text === text;
     });
-  const findCopyFileContentItem = () => findDropdownItems().at(0);
-  const findViewRawItem = () => findDropdownItems().at(1);
-  const findDownloadItem = () => findDropdownItems().at(2);
-  const findEnvironmentItem = () => findDropdownItems().at(3);
+  const findCopyFileContentItem = () => findDropdownItemWithText('Copy file contents');
+  const findViewRawItem = () => findDropdownItemWithText('Open raw');
+  const findDownloadItem = () => findDropdownItemWithText('Download');
+  const findEnvironmentItem = () => findDropdownItemWithText('View on my.testing.environment');
 
   beforeEach(() => {
     createComponent();
-- 
GitLab


From e3f84534f1fb02811a5e48ec2c16f016b1a0b03a Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Mon, 20 Jan 2025 14:28:39 +0100
Subject: [PATCH 2/7] Extract BlobDefaultActions group

---
 .../blob_default_actions_group.vue            | 164 ++++++++++++++++++
 .../header_area/blob_overflow_menu.vue        | 106 ++---------
 .../header_area/blob_controls_spec.js         |   3 +
 .../blob_default_actions_group_spec.js        | 148 ++++++++++++++++
 .../header_area/blob_overflow_menu_spec.js    | 161 ++---------------
 spec/frontend/repository/mock_data.js         |   2 +
 6 files changed, 349 insertions(+), 235 deletions(-)
 create mode 100644 app/assets/javascripts/repository/components/header_area/blob_default_actions_group.vue
 create mode 100644 spec/frontend/repository/components/header_area/blob_default_actions_group_spec.js

diff --git a/app/assets/javascripts/repository/components/header_area/blob_default_actions_group.vue b/app/assets/javascripts/repository/components/header_area/blob_default_actions_group.vue
new file mode 100644
index 00000000000000..9801351f10a617
--- /dev/null
+++ b/app/assets/javascripts/repository/components/header_area/blob_default_actions_group.vue
@@ -0,0 +1,164 @@
+<script>
+import { GlDisclosureDropdownItem } from '@gitlab/ui';
+import { sprintf, s__, __ } from '~/locale';
+import { setUrlParams, relativePathToAbsolute, getBaseURL } from '~/lib/utils/url_utility';
+
+export const i18n = {
+  btnCopyContentsTitle: __('Copy file contents'),
+  btnDownloadTitle: __('Download'),
+  btnRawTitle: s__('BlobViewer|Open raw'),
+};
+
+export default {
+  i18n,
+  components: {
+    GlDisclosureDropdownItem,
+  },
+  inject: {
+    blobHash: {
+      default: '',
+    },
+    canDownloadCode: {
+      default: true,
+    },
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    rawPath: {
+      type: String,
+      required: true,
+    },
+    activeViewerType: {
+      type: String,
+      required: true,
+    },
+    hasRenderError: {
+      type: Boolean,
+      required: true,
+    },
+    isBinary: {
+      type: Boolean,
+      required: true,
+    },
+    isEmpty: {
+      type: Boolean,
+      required: true,
+    },
+    overrideCopy: {
+      type: Boolean,
+      required: true,
+    },
+    environmentName: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    environmentPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    copyFileContentsItem() {
+      return {
+        text: i18n.btnCopyContentsTitle,
+        extraAttrs: {
+          'data-testid': 'copy-contents-button',
+          'data-clipboard-target': this.getBlobHashTarget,
+          disabled: this.copyDisabled,
+        },
+      };
+    },
+    openRawItem() {
+      return {
+        text: i18n.btnRawTitle,
+        href: this.rawPath,
+        extraAttrs: {
+          target: '_blank',
+        },
+      };
+    },
+    downloadItem() {
+      return {
+        text: i18n.btnDownloadTitle,
+        href: this.downloadUrl,
+        extraAttrs: {
+          target: '_blank',
+          'data-testid': 'download-button',
+        },
+      };
+    },
+    environmentItem() {
+      return {
+        text: this.environmentTitle,
+        href: this.environmentPath,
+        extraAttrs: {
+          target: '_blank',
+          'data-testid': 'environment',
+        },
+      };
+    },
+    showCopyButton() {
+      return !this.hasRenderError && !this.isBinary;
+    },
+    copyDisabled() {
+      return this.activeViewerType === 'rich';
+    },
+    getBlobHashTarget() {
+      if (this.overrideCopy) {
+        return null;
+      }
+      return `[data-blob-hash="${this.blobHash}"]`;
+    },
+    downloadUrl() {
+      return setUrlParams({ inline: false }, relativePathToAbsolute(this.rawPath, getBaseURL()));
+    },
+    showEnvironmentItem() {
+      return this.environmentName && this.environmentPath;
+    },
+    environmentTitle() {
+      return sprintf(s__('BlobViewer|View on %{environmentName}'), {
+        environmentName: this.environmentName,
+      });
+    },
+  },
+  methods: {
+    onCopy() {
+      if (this.overrideCopy) {
+        this.$emit('copy');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-disclosure-dropdown-item
+      v-if="showCopyButton"
+      data-testid="copy-item"
+      :item="copyFileContentsItem"
+      class="js-copy-blob-source-btn"
+      @action="onCopy"
+    />
+    <gl-disclosure-dropdown-item v-if="!isBinary" data-testid="open-raw-item" :item="openRawItem" />
+    <gl-disclosure-dropdown-item
+      v-if="!isEmpty && canDownloadCode"
+      data-test="download-item"
+      :item="downloadItem"
+    />
+    <gl-disclosure-dropdown-item
+      v-if="showEnvironmentItem"
+      data-testid="environment-item"
+      :item="environmentItem"
+    />
+  </div>
+</template>
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 04294959240abe..6c95b78315bb47 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
@@ -1,22 +1,19 @@
 <script>
-import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlTooltipDirective } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
-import { setUrlParams, relativePathToAbsolute, getBaseURL } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
+import BlobDefaultActionsGroup from './blob_default_actions_group.vue';
 
 export const i18n = {
   dropdownLabel: __('Actions'),
-  btnCopyContentsTitle: __('Copy file contents'),
-  btnDownloadTitle: __('Download'),
-  btnRawTitle: s__('BlobViewer|Open raw'),
 };
 
 export default {
   i18n,
   components: {
     GlDisclosureDropdown,
-    GlDisclosureDropdownItem,
+    BlobDefaultActionsGroup,
     LockFileDropdownItem: () =>
       import('ee_component/repository/components/header_area/lock_file_dropdown_item.vue'),
   },
@@ -101,74 +98,11 @@ export default {
     hasRenderError() {
       return Boolean(this.viewer.renderError);
     },
-    downloadUrl() {
-      return setUrlParams({ inline: false }, relativePathToAbsolute(this.rawPath, getBaseURL()));
-    },
-    copyDisabled() {
-      return this.activeViewerType === RICH_BLOB_VIEWER;
-    },
-    getBlobHashTarget() {
-      if (this.overrideCopy) {
-        return null;
-      }
-
-      return `[data-blob-hash="${this.blobHash}"]`;
-    },
-    showCopyButton() {
-      return !this.hasRenderError && !this.isBinary;
-    },
     environmentTitle() {
       return sprintf(s__('BlobViewer|View on %{environmentName}'), {
         environmentName: this.environmentName,
       });
     },
-    showDefaultActions() {
-      return (
-        this.showCopyButton ||
-        !this.isBinary ||
-        (!this.isEmpty && this.canDownloadCode) ||
-        (this.environmentName && this.environmentPath)
-      );
-    },
-    copyFileContentsItem() {
-      return {
-        text: i18n.btnCopyContentsTitle,
-        extraAttrs: {
-          'data-testid': 'copy-contents-button',
-          'data-clipboard-target': this.getBlobHashTarget,
-          disabled: this.copyDisabled,
-        },
-      };
-    },
-    openRawItem() {
-      return {
-        text: i18n.btnRawTitle,
-        href: this.rawPath,
-        extraAttrs: {
-          target: '_blank',
-        },
-      };
-    },
-    downloadItem() {
-      return {
-        text: i18n.btnDownloadTitle,
-        href: this.downloadUrl,
-        extraAttrs: {
-          target: '_blank',
-          'data-testid': 'download-button',
-        },
-      };
-    },
-    environmentItem() {
-      return {
-        text: this.environmentTitle,
-        href: this.environmentPath,
-        extraAttrs: {
-          target: '_blank',
-          'data-testid': 'environment',
-        },
-      };
-    },
   },
   methods: {
     onCopy() {
@@ -182,7 +116,6 @@ export default {
 <template>
   <div>
     <gl-disclosure-dropdown
-      v-if="showDefaultActions"
       v-gl-tooltip-directive.hover="$options.i18n.dropdownLabel"
       no-caret
       icon="ellipsis_v"
@@ -196,27 +129,18 @@ export default {
         :path="path"
         :project-path="projectPath"
       />
-      <gl-disclosure-dropdown-item
-        v-if="showCopyButton"
-        data-testid="copy-item"
-        :item="copyFileContentsItem"
-        class="js-copy-blob-source-btn"
-        @action="onCopy"
-      />
-      <gl-disclosure-dropdown-item
-        v-if="!isBinary"
-        data-testid="open-raw-item"
-        :item="openRawItem"
-      />
-      <gl-disclosure-dropdown-item
-        v-if="!isEmpty && canDownloadCode"
-        data-test="download-item"
-        :item="downloadItem"
-      />
-      <gl-disclosure-dropdown-item
-        v-if="environmentName && environmentPath"
-        data-testid="environment-item"
-        :item="environmentItem"
+      <blob-default-actions-group
+        :name="name"
+        :path="path"
+        :raw-path="rawPath"
+        :active-viewer-type="activeViewerType"
+        :has-render-error="hasRenderError"
+        :is-binary="isBinary"
+        :is-empty="isEmpty"
+        :override-copy="overrideCopy"
+        :environment-name="environmentName"
+        :environment-path="environmentPath"
+        @copy="onCopy"
       />
     </gl-disclosure-dropdown>
   </div>
diff --git a/spec/frontend/repository/components/header_area/blob_controls_spec.js b/spec/frontend/repository/components/header_area/blob_controls_spec.js
index 422164f79353c4..95b9f9f1f2038a 100644
--- a/spec/frontend/repository/components/header_area/blob_controls_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_controls_spec.js
@@ -160,6 +160,9 @@ describe('Blob controls component', () => {
 
       expect(findOverflowMenu().exists()).toBe(true);
       expect(findOverflowMenu().props()).toEqual({
+        name: 'file.js',
+        projectPath: 'some/project',
+        path: 'some/file.js',
         rawPath: 'https://testing.com/flightjs/flight/snippets/51/raw',
         isBinary: true,
         environmentName: '',
diff --git a/spec/frontend/repository/components/header_area/blob_default_actions_group_spec.js b/spec/frontend/repository/components/header_area/blob_default_actions_group_spec.js
new file mode 100644
index 00000000000000..54930a587a9cf9
--- /dev/null
+++ b/spec/frontend/repository/components/header_area/blob_default_actions_group_spec.js
@@ -0,0 +1,148 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlDisclosureDropdownItem } from '@gitlab/ui';
+import BlobDefaultActionsGroup from '~/repository/components/header_area/blob_default_actions_group.vue';
+
+const mockBlobHash = 'foo-bar';
+const mockEnvironmentName = 'my.testing.environment';
+const mockEnvironmentPath = 'https://my.testing.environment';
+
+describe('Blob Default Actions Group', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, provide = {}) => {
+    wrapper = shallowMount(BlobDefaultActionsGroup, {
+      propsData: {
+        name: 'dummy.md',
+        path: 'foo/bar/dummy.md',
+        rawPath: 'https://testing.com/flightjs/flight/snippets/51/raw',
+        blobHash: mockBlobHash,
+        activeViewerType: 'simple',
+        hasRenderError: false,
+        isBinary: false,
+        isEmpty: false,
+        canDownloadCode: true,
+        overrideCopy: false,
+        ...props,
+      },
+      provide: {
+        blobHash: mockBlobHash,
+        canDownloadCode: true,
+        ...provide,
+      },
+    });
+  };
+
+  const findDropdownItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
+  const findDropdownItemWithText = (text) =>
+    findDropdownItems().wrappers.find((x) => x.props('item').text === text);
+  const findCopyFileContentItem = () => findDropdownItemWithText('Copy file contents');
+  const findViewRawItem = () => findDropdownItemWithText('Open raw');
+  const findDownloadItem = () => findDropdownItemWithText('Download');
+  const findEnvironmentItem = () => findDropdownItemWithText(`View on ${mockEnvironmentName}`);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('Copy file contents', () => {
+    it('renders "Copy file contents" button as enabled if the viewer is Simple', () => {
+      expect(findCopyFileContentItem().props('item')).toMatchObject({
+        extraAttrs: { disabled: false },
+      });
+    });
+
+    it('renders "Copy file contents" button as disabled if the viewer is Rich', () => {
+      createComponent({ activeViewerType: 'rich' });
+
+      expect(findCopyFileContentItem().props('item')).toMatchObject({
+        extraAttrs: { disabled: true },
+      });
+    });
+
+    it('does not render the copy button if a rendering error is set', () => {
+      createComponent({ hasRenderError: true });
+
+      expect(findCopyFileContentItem()).toBeUndefined();
+    });
+  });
+
+  describe('Open raw', () => {
+    it('renders with correct props', () => {
+      expect(findViewRawItem().props('item')).toMatchObject({
+        href: 'https://testing.com/flightjs/flight/snippets/51/raw',
+      });
+    });
+  });
+
+  it('does not render the Copy and view Raw button if isBinary is set to true', () => {
+    createComponent({ isBinary: true });
+
+    expect(findCopyFileContentItem()).toBeUndefined();
+    expect(findViewRawItem()).toBeUndefined();
+  });
+
+  describe('Download', () => {
+    it('renders with correct props', () => {
+      expect(findDownloadItem().props('item')).toMatchObject({
+        href: 'https://testing.com/flightjs/flight/snippets/51/raw?inline=false',
+      });
+    });
+
+    it('does not render the download button if canDownloadCode is set to false', () => {
+      createComponent({}, { canDownloadCode: false });
+
+      expect(findDownloadItem()).toBeUndefined();
+    });
+  });
+
+  describe('View on environment', () => {
+    describe.each`
+      environmentName        | environmentPath        | isVisible
+      ${null}                | ${null}                | ${undefined}
+      ${null}                | ${mockEnvironmentPath} | ${undefined}
+      ${mockEnvironmentName} | ${null}                | ${undefined}
+      ${mockEnvironmentName} | ${mockEnvironmentPath} | ${expect.any(Object)}
+    `(
+      'when environmentName is $environmentName and environmentPath is $environmentPath',
+      ({ environmentName, environmentPath, isVisible }) => {
+        it(`${isVisible ? 'renders' : 'does not render'} the button`, () => {
+          createComponent({ environmentName, environmentPath });
+
+          expect(findEnvironmentItem()).toEqual(isVisible);
+        });
+      },
+    );
+
+    it('renders the correct props', () => {
+      createComponent({
+        environmentName: mockEnvironmentName,
+        environmentPath: mockEnvironmentPath,
+      });
+
+      expect(findEnvironmentItem().props('item')).toMatchObject({
+        text: `View on ${mockEnvironmentName}`,
+        href: mockEnvironmentPath,
+      });
+    });
+  });
+
+  describe('events', () => {
+    it('emits copy event when overrideCopy is true', () => {
+      createComponent({
+        overrideCopy: true,
+      });
+
+      findCopyFileContentItem().vm.$emit('action');
+      expect(wrapper.emitted('copy')).toHaveLength(1);
+    });
+
+    it('does not emit copy event when overrideCopy is false', () => {
+      createComponent({
+        overrideCopy: false,
+      });
+
+      findCopyFileContentItem().vm.$emit('action');
+      expect(wrapper.emitted('copy')).toBeUndefined();
+    });
+  });
+});
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 699abb0b82f1b5..e9aaccf36f61d8 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
@@ -1,39 +1,9 @@
-import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BlobOverflowMenu from '~/repository/components/header_area/blob_overflow_menu.vue';
+import BlobDefaultActionsGroup from '~/repository/components/header_area/blob_default_actions_group.vue';
 import createRouter from '~/repository/router';
-import { refMock } from '../../mock_data';
-
-const Blob = {
-  binary: false,
-  name: 'dummy.md',
-  path: 'foo/bar/dummy.md',
-  rawPath: 'https://testing.com/flightjs/flight/snippets/51/raw',
-  size: 75,
-  simpleViewer: {
-    collapsed: false,
-    loadingPartialName: 'loading',
-    renderError: null,
-    tooLarge: false,
-    type: 'simple',
-    fileType: 'text',
-  },
-  richViewer: {
-    collapsed: false,
-    loadingPartialName: 'loading',
-    renderError: null,
-    tooLarge: false,
-    type: 'rich',
-    fileType: 'markdown',
-  },
-  ideEditPath: 'ide/edit',
-  editBlobPath: 'edit/blob',
-  gitpodBlobUrl: 'gitpod/blob/url',
-  pipelineEditorPath: 'pipeline/editor/path',
-};
-
-const mockEnvironmentName = 'my.testing.environment';
-const mockEnvironmentPath = 'https://my.testing.environment';
+import { blobControlsDataMock, refMock } from '../../mock_data';
 
 describe('Blob Overflow Menu', () => {
   let wrapper;
@@ -43,39 +13,30 @@ describe('Blob Overflow Menu', () => {
 
   router.replace({ name: 'blobPath', params: { path: '/some/file.js' } });
 
-  const blobHash = 'foo-bar';
-
   function createComponent(propsData = {}, provided = {}) {
     wrapper = shallowMountExtended(BlobOverflowMenu, {
       router,
       provide: {
-        blobHash,
         ...provided,
       },
       propsData: {
-        rawPath: Blob.rawPath,
-        richViewer: Blob.richViewer,
-        simpleViewer: Blob.simpleViewer,
-        isBinary: false,
+        path: blobControlsDataMock.repository.blobs.nodes[0].path,
+        rawPath: blobControlsDataMock.repository.blobs.nodes[0].rawPath,
+        projectPath,
+        richViewer: blobControlsDataMock.repository.blobs.nodes[0].richViewer,
+        simpleViewer: blobControlsDataMock.repository.blobs.nodes[0].simpleViewer,
+        name: blobControlsDataMock.repository.blobs.nodes[0].name,
+        isBinary: blobControlsDataMock.repository.blobs.nodes[0].binary,
         ...propsData,
       },
       stub: {
         GlDisclosureDropdown,
-        GlDisclosureDropdownItem,
       },
     });
   }
 
   const findDefaultBlobActions = () => wrapper.findByTestId('default-actions-container');
-  const findDropdownItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
-  const findDropdownItemWithText = (text) =>
-    findDropdownItems().wrappers.find((x) => {
-      return x.props('item').text === text;
-    });
-  const findCopyFileContentItem = () => findDropdownItemWithText('Copy file contents');
-  const findViewRawItem = () => findDropdownItemWithText('Open raw');
-  const findDownloadItem = () => findDropdownItemWithText('Download');
-  const findEnvironmentItem = () => findDropdownItemWithText('View on my.testing.environment');
+  const findBlobDefaultActionsGroup = () => wrapper.findComponent(BlobDefaultActionsGroup);
 
   beforeEach(() => {
     createComponent();
@@ -86,114 +47,26 @@ describe('Blob Overflow Menu', () => {
       expect(findDefaultBlobActions().exists()).toBe(true);
     });
 
-    describe('Copy file contents', () => {
-      it('renders "Copy file contents" button as enabled if the viewer is Simple', () => {
-        expect(findCopyFileContentItem().props('item')).toMatchObject({
-          extraAttrs: { disabled: false },
-        });
-      });
-
-      it('renders "Copy file contents" button as disabled if the viewer is Rich', () => {
-        // Create rich viewer element in DOM
-        const richViewer = document.createElement('div');
-        richViewer.className = 'blob-viewer';
-        richViewer.dataset.type = 'rich';
-        document.body.appendChild(richViewer);
-        createComponent();
-
-        expect(findCopyFileContentItem().props('item')).toMatchObject({
-          extraAttrs: { disabled: true },
-        });
-      });
-
-      it('does not render the copy button if a rendering error is set', () => {
-        createComponent({
-          richViewer: {
-            ...Blob.richViewer,
-            renderError: 'File too big',
-          },
-        });
-
-        expect(findDropdownItemWithText('Copy file contents')).toBeUndefined();
-      });
-    });
-
-    describe('Open raw', () => {
-      it('renders with correct props', () => {
-        expect(findViewRawItem().props('item')).toMatchObject({
-          href: Blob.rawPath,
-        });
-      });
-    });
-
-    describe('Download', () => {
-      it('renders with correct props', () => {
-        expect(findDownloadItem().props('item')).toMatchObject({
-          href: `${Blob.rawPath}?inline=false`,
-        });
-      });
-    });
-
-    it('does not render the copy and view raw button if isBinary is set to true', () => {
-      createComponent({ isBinary: true });
-
-      expect(findDropdownItemWithText('Copy file contents')).toBeUndefined();
-      expect(findDropdownItemWithText('Open raw')).toBeUndefined();
-    });
-
-    it('does not render the download button if canDownloadCode is set to false', () => {
-      createComponent({}, { canDownloadCode: false });
-
-      expect(findDropdownItemWithText('Download')).toBeUndefined();
-    });
-
-    describe('View on environment', () => {
-      describe.each`
-        environmentName        | environmentPath        | isVisible
-        ${null}                | ${null}                | ${undefined}
-        ${null}                | ${mockEnvironmentPath} | ${undefined}
-        ${mockEnvironmentName} | ${null}                | ${undefined}
-        ${mockEnvironmentName} | ${mockEnvironmentPath} | ${expect.any(Object)}
-      `(
-        'when environmentName is $environmentName and environmentPath is $environmentPath',
-        ({ environmentName, environmentPath, isVisible }) => {
-          it(`${isVisible ? 'renders' : 'does not render'} the button`, () => {
-            createComponent({ environmentName, environmentPath });
-
-            expect(findDropdownItemWithText(`View on ${environmentName}`)).toEqual(isVisible);
-          });
-        },
-      );
-
-      it('renders the correct props', () => {
-        createComponent({
-          environmentName: mockEnvironmentName,
-          environmentPath: mockEnvironmentPath,
-        });
-
-        expect(findEnvironmentItem().props('item')).toMatchObject({
-          text: `View on ${mockEnvironmentName}`,
-          href: mockEnvironmentPath,
-        });
-      });
+    it('renders BlobDefaultActionsGroup component', () => {
+      expect(findBlobDefaultActionsGroup().exists()).toBe(true);
     });
 
     describe('events', () => {
-      it('emits copy event when overrideCopy is true', () => {
+      it('proxy copy event when overrideCopy is true', () => {
         createComponent({
           overrideCopy: true,
         });
 
-        findCopyFileContentItem().vm.$emit('action');
+        findBlobDefaultActionsGroup().vm.$emit('copy');
         expect(wrapper.emitted('copy')).toHaveLength(1);
       });
 
-      it('does not emit copy event when overrideCopy is false', () => {
+      it('does not proxy copy event when overrideCopy is false', () => {
         createComponent({
           overrideCopy: false,
         });
 
-        findCopyFileContentItem().vm.$emit('action');
+        findBlobDefaultActionsGroup().vm.$emit('copy');
         expect(wrapper.emitted('copy')).toBeUndefined();
       });
     });
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index dc7d40ae787557..422fabdc82495a 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -95,8 +95,10 @@ export const blobControlsDataMock = {
       nodes: [
         {
           id: '5678',
+          name: 'file.js',
           blamePath: 'blame/file.js',
           permalinkPath: 'permalink/file.js',
+          path: 'some/file.js',
           storedExternally: false,
           externalStorage: 'https://external-storage',
           environmentFormattedExternalUrl: '',
-- 
GitLab


From 1a28c81b5f767dfb5107fd2c1edbbe24f6fd1532 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Mon, 20 Jan 2025 17:23:20 +0100
Subject: [PATCH 3/7] Hide BlobButtonGroup behind WIP feature flag

---
 .../javascripts/repository/components/blob_content_viewer.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 829cc757d67cce..277668a1861915 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -356,7 +356,7 @@ export default {
       >
         <template #actions>
           <blob-button-group
-            v-if="isLoggedIn && !blobInfo.archived"
+            v-if="isLoggedIn && !blobInfo.archived && !glFeatures.blobOverflowMenu"
             :path="path"
             :name="blobInfo.name"
             :replace-path="blobInfo.replacePath"
-- 
GitLab


From d1fae48238fe3d22c52432ad37822d1fd5a616c2 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Mon, 20 Jan 2025 17:53:27 +0100
Subject: [PATCH 4/7] Improve test cases for LockFileDropdownItem

---
 .../header_area/lock_file_dropdown_item_spec.js   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
index 151ce7daf4c5dc..b38269b2760ae2 100644
--- a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
+++ b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
@@ -128,7 +128,7 @@ describe('LockFileDropdownItem component', () => {
       expect(findModal().props('visible')).toBe(false);
     });
 
-    it('executes a lock mutation once lock is confirmed', async () => {
+    it('renders an alert when mutation results in an error', async () => {
       lockMutationMock = jest.fn().mockRejectedValue(new Error('Request failed'));
       createComponent({ mutationResolver: lockMutationMock });
       await waitForPromises();
@@ -150,10 +150,21 @@ describe('LockFileDropdownItem component', () => {
       });
     });
 
+    it('executes a lock mutation once lock is confirmed', () => {
+      findLockFileDropdownItem().vm.$emit('action');
+      clickSubmit();
+
+      expect(lochPathMutationResolver).toHaveBeenCalledWith({
+        filePath: 'some/path/locked_file.js',
+        lock: false,
+        projectPath: 'some/project/path',
+      });
+    });
+
     it('does not execute a lock mutation if lock not confirmed', () => {
       findLockFileDropdownItem().vm.$emit('action');
 
-      expect(lockMutationMock).not.toHaveBeenCalled();
+      expect(lochPathMutationResolver).not.toHaveBeenCalled();
     });
   });
 });
-- 
GitLab


From ab9ad0d2b532341af4c4e1cf6ac7726dccbf828f Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 21 Jan 2025 10:50:14 +0100
Subject: [PATCH 5/7] Address review feedback

---
 .../components/header_area/lock_file_dropdown_item.vue   | 3 +--
 .../header_area/lock_file_dropdown_item_spec.js          | 9 +++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
index 72a3fc73227bf9..aee4f9a61e9706 100644
--- a/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
+++ b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
@@ -11,7 +11,6 @@ export default {
     lock: __('Lock'),
     unlock: __('Unlock'),
     modalTitle: __('Lock file?'),
-    actionPrimary: __('Okay'),
     actionCancel: __('Cancel'),
     fetchError: __('An error occurred while fetching lock information, please try again.'),
     mutationError: __('An error occurred while editing lock information, please try again.'),
@@ -81,7 +80,7 @@ export default {
     modalActions() {
       return {
         primary: {
-          text: this.$options.i18n.actionPrimary,
+          text: this.lockButtonTitle,
           attributes: { variant: 'confirm', 'data-testid': 'confirm-ok-button' },
         },
         cancel: {
diff --git a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
index b38269b2760ae2..e38b64ba53c754 100644
--- a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
+++ b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
@@ -117,7 +117,11 @@ describe('LockFileDropdownItem component', () => {
   describe('Modal', () => {
     it('displays a confirm modal when the lock dropdown item is clicked', () => {
       findLockFileDropdownItem().vm.$emit('action');
+
       expect(findModal().text()).toBe('Are you sure you want to unlock locked_file.js?');
+      expect(findModal().props('actionPrimary')).toMatchObject({
+        text: 'Unlock',
+      });
     });
 
     it('should hide the confirm modal when a hide action is triggered', async () => {
@@ -148,6 +152,11 @@ describe('LockFileDropdownItem component', () => {
         captureError: true,
         error: expect.any(Error),
       });
+
+      expect(findLockFileDropdownItem().props('item')).toMatchObject({
+        text: 'Unlock',
+        extraAttrs: { disabled: false },
+      });
     });
 
     it('executes a lock mutation once lock is confirmed', () => {
-- 
GitLab


From 8285dc0a49d803a2a97957cf1537521be185b699 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 21 Jan 2025 12:36:48 +0100
Subject: [PATCH 6/7] Disable the control while query and mutation execute

---
 .../header_area/lock_file_dropdown_item.vue   |  8 ++++-
 .../lock_file_dropdown_item_spec.js           | 34 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
index aee4f9a61e9706..ebc8fe7dfaba0d 100644
--- a/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
+++ b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
@@ -53,6 +53,7 @@ export default {
   },
   data() {
     return {
+      isUpdating: false,
       isModalVisible: false,
       locked: false,
       pathLocks: DEFAULT_BLOB_INFO.pathLocks,
@@ -60,6 +61,9 @@ export default {
     };
   },
   computed: {
+    isLoading() {
+      return this.$apollo?.queries.projectInfo.loading;
+    },
     lockButtonTitle() {
       return this.isLocked ? this.$options.i18n.unlock : this.$options.i18n.lock;
     },
@@ -73,7 +77,7 @@ export default {
       return {
         text: this.lockButtonTitle,
         extraAttrs: {
-          disabled: !this.canLock,
+          disabled: !this.canLock || this.isLoading || this.isUpdating,
         },
       };
     },
@@ -123,6 +127,7 @@ export default {
     },
     toggleLock() {
       const locked = !this.locked;
+      this.isUpdating = true;
       this.$apollo
         .mutate({
           mutation: lockPathMutation,
@@ -137,6 +142,7 @@ export default {
         })
         .finally(() => {
           this.locked = locked;
+          this.isUpdating = false;
         });
     },
   },
diff --git a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
index e38b64ba53c754..73db421a766cd5 100644
--- a/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
+++ b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
@@ -55,7 +55,11 @@ describe('LockFileDropdownItem component', () => {
     await waitForPromises();
   });
 
-  it('disables the lock dropdown item if user can not lock a file', async () => {
+  afterEach(() => {
+    fakeApollo = null;
+  });
+
+  it('renders disabled the lock dropdown item if user can not lock a file', async () => {
     const projectWithNoPushPermission = {
       data: {
         project: {
@@ -77,6 +81,34 @@ describe('LockFileDropdownItem component', () => {
     });
   });
 
+  it('renders disabled until query fetches projects info', async () => {
+    const projectInfoQueryLoading = jest.fn().mockResolvedValue(new Promise(() => {}));
+    createComponent({
+      projectInfoResolver: projectInfoQueryLoading,
+    });
+    await waitForPromises();
+    expect(projectInfoQueryLoading).toHaveBeenCalled();
+    expect(findLockFileDropdownItem().props('item')).toMatchObject({
+      extraAttrs: { disabled: true },
+    });
+  });
+
+  it('renders disabled while mutation is executed', async () => {
+    const lockMutationExecuting = jest.fn().mockResolvedValue(new Promise(() => {}));
+    createComponent({
+      mutationResolver: lockMutationExecuting,
+    });
+    await waitForPromises();
+    findLockFileDropdownItem().vm.$emit('action');
+    clickSubmit();
+    await waitForPromises();
+
+    expect(lockMutationExecuting).toHaveBeenCalled();
+    expect(findLockFileDropdownItem().props('item')).toMatchObject({
+      extraAttrs: { disabled: true },
+    });
+  });
+
   it('renders the Lock dropdown item label, when file is not locked', async () => {
     const projectWithNoLocks = {
       data: {
-- 
GitLab


From 232f50668015043d7dae9c7062e8763d58d7dc40 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 21 Jan 2025 14:15:30 +0100
Subject: [PATCH 7/7] Stub the flag for the time while blob header app is
 behind a param

---
 ee/spec/features/projects/path_locks_spec.rb                | 1 +
 spec/features/projects/files/user_browses_lfs_files_spec.rb | 1 +
 spec/features/projects/files/user_deletes_files_spec.rb     | 1 +
 spec/features/projects/files/user_replaces_files_spec.rb    | 1 +
 4 files changed, 4 insertions(+)

diff --git a/ee/spec/features/projects/path_locks_spec.rb b/ee/spec/features/projects/path_locks_spec.rb
index 4a4c469d7a4c02..7e40e92789a2fe 100644
--- a/ee/spec/features/projects/path_locks_spec.rb
+++ b/ee/spec/features/projects/path_locks_spec.rb
@@ -10,6 +10,7 @@
   let(:tree_path) { project_tree_path(project, project.repository.root_ref) }
 
   before do
+    stub_feature_flags(blob_overflow_menu: false)
     project.add_maintainer(user)
     sign_in(user)
 
diff --git a/spec/features/projects/files/user_browses_lfs_files_spec.rb b/spec/features/projects/files/user_browses_lfs_files_spec.rb
index 12acb98684c8e4..1eda9f5687f527 100644
--- a/spec/features/projects/files/user_browses_lfs_files_spec.rb
+++ b/spec/features/projects/files/user_browses_lfs_files_spec.rb
@@ -7,6 +7,7 @@
   let(:user) { project.first_owner }
 
   before do
+    stub_feature_flags(blob_overflow_menu: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/files/user_deletes_files_spec.rb b/spec/features/projects/files/user_deletes_files_spec.rb
index 487b27a6cbe345..6a864adadde71a 100644
--- a/spec/features/projects/files/user_deletes_files_spec.rb
+++ b/spec/features/projects/files/user_deletes_files_spec.rb
@@ -25,6 +25,7 @@
   let_it_be(:user) { create(:user) }
 
   before do
+    stub_feature_flags(blob_overflow_menu: false)
     sign_in(user)
   end
 
diff --git a/spec/features/projects/files/user_replaces_files_spec.rb b/spec/features/projects/files/user_replaces_files_spec.rb
index 5681d5c7744c4c..9d6401aa1a4cad 100644
--- a/spec/features/projects/files/user_replaces_files_spec.rb
+++ b/spec/features/projects/files/user_replaces_files_spec.rb
@@ -27,6 +27,7 @@
   let_it_be(:user) { create(:user) }
 
   before do
+    stub_feature_flags(blob_overflow_menu: false)
     sign_in(user)
   end
 
-- 
GitLab