diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 829cc757d67cce295aaad10269baf25449fb6dac..277668a186191580fa78ab04ea0baf05c4fa8cce 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"
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 7fe14d5720e61f76119b2956b9d0d168f80e1714..8948029cfb570066382e507f5cf4b3f76002f4ac 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_default_actions_group.vue b/app/assets/javascripts/repository/components/header_area/blob_default_actions_group.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9801351f10a6173a43f128e3e8f9d101d3285d02
--- /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 2911170258fed7569ebba9d1d6d00d87833dc8a9..6c95b78315bb47de2ca564644d65420550da2d3f 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,25 +1,26 @@
 <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'),
   },
   directives: {
     GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     blobHash: {
       default: '',
@@ -29,6 +30,18 @@ export default {
     },
   },
   props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
     rawPath: {
       type: String,
       required: true,
@@ -85,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() {
@@ -166,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"
@@ -174,17 +123,24 @@ export default {
       :toggle-text="$options.i18n.dropdownLabel"
       text-sr-only
     >
-      <gl-disclosure-dropdown-item
-        v-if="showCopyButton"
-        :item="copyFileContentsItem"
-        class="js-copy-blob-source-btn"
-        @action="onCopy"
+      <lock-file-dropdown-item
+        v-if="glFeatures.fileLocks"
+        :name="name"
+        :path="path"
+        :project-path="projectPath"
       />
-      <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="environmentName && environmentPath"
-        :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/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
index e6e6505932081e8110c97569d657a760138da1d7..71470717d1a4c433928fed2a7c3d811c34b0a745 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 0000000000000000000000000000000000000000..ebc8fe7dfaba0d1643bb52dfbb0507453b0b83ef
--- /dev/null
+++ b/ee/app/assets/javascripts/repository/components/header_area/lock_file_dropdown_item.vue
@@ -0,0 +1,169 @@
+<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?'),
+    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 {
+      isUpdating: false,
+      isModalVisible: false,
+      locked: false,
+      pathLocks: DEFAULT_BLOB_INFO.pathLocks,
+      userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo?.queries.projectInfo.loading;
+    },
+    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 || this.isLoading || this.isUpdating,
+        },
+      };
+    },
+    modalActions() {
+      return {
+        primary: {
+          text: this.lockButtonTitle,
+          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.isUpdating = true;
+      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;
+          this.isUpdating = false;
+        });
+    },
+  },
+};
+</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/features/projects/path_locks_spec.rb b/ee/spec/features/projects/path_locks_spec.rb
index 4a4c469d7a4c025bc864b4b5a92448110b2eaff5..7e40e92789a2feaae79aa238d9701f59c4744ad3 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/ee/spec/frontend/repository/components/blob_content_viewer_spec.js b/ee/spec/frontend/repository/components/blob_content_viewer_spec.js
index bb082aea5ac1771f82dd0b128c6ac3e250c00107..0dc282431a830cd8ffad54efa6d70397d181b6ff 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 0000000000000000000000000000000000000000..73db421a766cd5a77ea4095c4d7b83151b8152d6
--- /dev/null
+++ b/ee/spec/frontend/repository/components/header_area/lock_file_dropdown_item_spec.js
@@ -0,0 +1,211 @@
+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();
+  });
+
+  afterEach(() => {
+    fakeApollo = null;
+  });
+
+  it('renders disabled 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 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: {
+        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?');
+      expect(findModal().props('actionPrimary')).toMatchObject({
+        text: 'Unlock',
+      });
+    });
+
+    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('renders an alert when mutation results in an error', 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),
+      });
+
+      expect(findLockFileDropdownItem().props('item')).toMatchObject({
+        text: 'Unlock',
+        extraAttrs: { disabled: false },
+      });
+    });
+
+    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(lochPathMutationResolver).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index ac696a07e02f8dbbdf6c0287b982c16b750a90eb..0de032e553aa5028290e23615f52408fc54f238d 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/features/projects/files/user_browses_lfs_files_spec.rb b/spec/features/projects/files/user_browses_lfs_files_spec.rb
index 12acb98684c8e4124591ad6378269ca71291d9c0..1eda9f5687f527e233cdc906b841d62cf2ed963f 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 487b27a6cbe345b4203eb33ba47415193b6ef13b..6a864adadde71adb69caf9e34376b9dc6f8aa87a 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 5681d5c7744c4cb99ed868b47978d1604141a90d..9d6401aa1a4cad793533a03c4a1d0592067516ad 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
 
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 422164f79353c4451ff76cfe7c710448cc968aa4..95b9f9f1f2038a7beef8c331bdc085fb950dba47 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 0000000000000000000000000000000000000000..54930a587a9cf909267d43b553304a1e94b8c59c
--- /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 b9c6b9b3eac92fbfc9021313dd5ed4dab50e4fb8..e9aaccf36f61d8593027f81a93bb00f382b1c3b8 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 = () => findDropdownItems().at(0);
-  const findViewRawItem = () => findDropdownItems().at(1);
-  const findDownloadItem = () => findDropdownItems().at(2);
-  const findEnvironmentItem = () => findDropdownItems().at(3);
+  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 dc7d40ae7875573cbb11e6c87c126a9e529c721a..422fabdc82495a8b88c747a5f01f060a92a512bc 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: '',