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

---
 .../header_area/lock_file_dropdown_item_spec.js       | 11 +++++++++++
 1 file changed, 11 insertions(+)

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 73db421a766cd5..3587e4bc9be96e 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
@@ -202,6 +202,17 @@ 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');
 
-- 
GitLab


From c18c150834ffffc04b02536a0108e29ffca40c63 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 21 Jan 2025 17:02:14 +0100
Subject: [PATCH 02/13] Create BlobButtonGroup for overflow menu

---
 .../header_area/blob_button_group.vue         | 168 +++++++++++++++++
 .../components/header_area/blob_controls.vue  |  15 +-
 .../header_area/blob_overflow_menu.vue        |  48 +++++
 .../queries/blob_controls.query.graphql       |   5 +
 .../header_area/blob_button_group_spec.js     | 177 ++++++++++++++++++
 .../header_area/blob_controls_spec.js         |   7 +
 .../header_area/blob_overflow_menu_spec.js    |  38 +++-
 spec/frontend/repository/mock_data.js         |   5 +
 8 files changed, 456 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/repository/components/header_area/blob_button_group.vue
 create mode 100644 spec/frontend/repository/components/header_area/blob_button_group_spec.js

diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
new file mode 100644
index 00000000000000..c0fdd27ef461ee
--- /dev/null
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -0,0 +1,168 @@
+<script>
+import { GlDisclosureDropdownItem } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+import { sprintf, __ } from '~/locale';
+import { createAlert } from '~/alert';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.graphql';
+import { DEFAULT_BLOB_INFO } from '~/repository/constants';
+import getRefMixin from '~/repository/mixins/get_ref';
+import DeleteBlobModal from '~/repository/components/delete_blob_modal.vue';
+import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
+
+const REPLACE_BLOB_MODAL_ID = 'modal-replace-blob';
+
+export default {
+  i18n: {
+    replace: __('Replace'),
+    delete: __('Delete'),
+    fetchError: __('An error occurred while fetching lock information, please try again.'),
+  },
+  replaceBlobModalId: REPLACE_BLOB_MODAL_ID,
+  components: {
+    GlDisclosureDropdownItem,
+    DeleteBlobModal,
+    UploadBlobModal,
+  },
+  mixins: [getRefMixin],
+  inject: {
+    targetBranch: {
+      default: '',
+    },
+    originalBranch: {
+      default: '',
+    },
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    replacePath: {
+      type: String,
+      required: true,
+    },
+    deletePath: {
+      type: String,
+      required: true,
+    },
+    canPushToBranch: {
+      type: Boolean,
+      required: true,
+    },
+    isEmptyRepository: {
+      type: Boolean,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    showForkSuggestion: {
+      type: Boolean,
+      required: true,
+    },
+    isUsingLfs: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  apollo: {
+    // eslint-disable-next-line @gitlab/vue-no-undef-apollo-properties
+    projectInfo: {
+      query: projectInfoQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update({ project }) {
+        this.userPermissions = project?.userPermissions;
+      },
+      error() {
+        createAlert({ message: this.$options.i18n.fetchError });
+      },
+    },
+  },
+  data() {
+    return {
+      userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+    };
+  },
+  computed: {
+    replaceFileItem() {
+      return {
+        text: this.$options.i18n.replace,
+        extraAttrs: {
+          'data-testid': 'replace',
+        },
+      };
+    },
+    deleteFileItem() {
+      return {
+        text: this.$options.i18n.delete,
+        extraAttrs: {
+          'data-testid': 'delete',
+        },
+      };
+    },
+    deleteModalId() {
+      return uniqueId('delete-modal');
+    },
+    replaceCommitMessage() {
+      return sprintf(__('Replace %{name}'), { name: this.name });
+    },
+    deleteModalCommitMessage() {
+      return sprintf(__('Delete %{name}'), { name: this.name });
+    },
+  },
+  methods: {
+    showModal(modalId) {
+      if (this.showForkSuggestion) {
+        this.$emit('fork', 'view');
+        return;
+      }
+
+      this.$refs[modalId].show();
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-disclosure-dropdown-item
+      :item="replaceFileItem"
+      @action="showModal($options.replaceBlobModalId)"
+    />
+    <gl-disclosure-dropdown-item :item="deleteFileItem" @action="showModal(deleteModalId)" />
+    <upload-blob-modal
+      :ref="$options.replaceBlobModalId"
+      :modal-id="$options.replaceBlobModalId"
+      :commit-message="replaceCommitMessage"
+      :target-branch="targetBranch || ref"
+      :original-branch="originalBranch || ref"
+      :can-push-code="userPermissions.pushCode"
+      :can-push-to-branch="canPushToBranch"
+      :path="path"
+      :replace-path="replacePath"
+    />
+    <delete-blob-modal
+      :ref="deleteModalId"
+      :delete-path="deletePath"
+      :modal-id="deleteModalId"
+      :commit-message="deleteModalCommitMessage"
+      :target-branch="targetBranch || ref"
+      :original-branch="originalBranch || ref"
+      :can-push-code="userPermissions.pushCode"
+      :can-push-to-branch="canPushToBranch"
+      :empty-repo="isEmptyRepository"
+      :is-using-lfs="isUsingLfs"
+    />
+  </div>
+</template>
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 8948029cfb5700..3c335f1172e02a 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -56,6 +56,10 @@ export default {
       skip() {
         return !this.filePath;
       },
+      result({ data }) {
+        const repository = data.project.repository || {};
+        this.isEmptyRepository = repository.empty;
+      },
       error() {
         createAlert({ message: this.$options.i18n.errorMessage });
       },
@@ -80,6 +84,7 @@ export default {
   data() {
     return {
       project: {},
+      isEmptyRepository: false,
     };
   },
   computed: {
@@ -95,7 +100,7 @@ export default {
     blobInfo() {
       return this.project?.repository?.blobs?.nodes[0] || {};
     },
-    showBlameButton() {
+    isUsingLfs() {
       return !this.blobInfo.storedExternally && this.blobInfo.externalStorage !== 'lfs';
     },
     isBinaryFileType() {
@@ -175,7 +180,7 @@ export default {
       {{ $options.i18n.findFile }}
     </gl-button>
     <gl-button
-      v-if="showBlameButton"
+      v-if="isUsingLfs"
       data-testid="blame"
       :href="blobInfo.blamePath"
       :class="$options.buttonClassList"
@@ -208,6 +213,12 @@ export default {
       :environment-path="blobInfo.environmentExternalUrlForRouteMap"
       :is-empty="isEmpty"
       :override-copy="true"
+      :archived="blobInfo.archived"
+      :replace-path="blobInfo.replacePath"
+      :web-path="blobInfo.webPath"
+      :is-empty-repository="isEmptyRepository"
+      :can-current-user-push-to-branch="blobInfo.canCurrentUserPushToBranch"
+      :is-using-lfs="isUsingLfs"
       @copy="onCopy"
     />
   </div>
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 6c95b78315bb47..fd5a050926a351 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,9 +1,11 @@
 <script>
 import { GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 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';
+import BlobButtonGroup from './blob_button_group.vue';
 
 export const i18n = {
   dropdownLabel: __('Actions'),
@@ -14,6 +16,7 @@ export default {
   components: {
     GlDisclosureDropdown,
     BlobDefaultActionsGroup,
+    BlobButtonGroup,
     LockFileDropdownItem: () =>
       import('ee_component/repository/components/header_area/lock_file_dropdown_item.vue'),
   },
@@ -34,6 +37,10 @@ export default {
       type: String,
       required: true,
     },
+    archived: {
+      type: Boolean,
+      required: true,
+    },
     projectPath: {
       type: String,
       required: true,
@@ -46,6 +53,14 @@ export default {
       type: String,
       required: true,
     },
+    replacePath: {
+      type: String,
+      required: true,
+    },
+    webPath: {
+      type: String,
+      required: true,
+    },
     richViewer: {
       type: Object,
       required: false,
@@ -81,8 +96,25 @@ export default {
       required: false,
       default: false,
     },
+    isEmptyRepository: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canCurrentUserPushToBranch: {
+      type: Boolean,
+      required: true,
+    },
+    isUsingLfs: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
+    isLoggedIn() {
+      return isLoggedIn();
+    },
     activeViewerType() {
       if (this.$route?.query?.plain !== '1') {
         const richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
@@ -105,6 +137,9 @@ export default {
     },
   },
   methods: {
+    setForkTarget(target) {
+      this.forkTarget = target;
+    },
     onCopy() {
       if (this.overrideCopy) {
         this.$emit('copy');
@@ -129,6 +164,19 @@ export default {
         :path="path"
         :project-path="projectPath"
       />
+      <blob-button-group
+        v-if="isLoggedIn && !archived"
+        :path="path"
+        :name="name"
+        :replace-path="replacePath"
+        :delete-path="webPath"
+        :can-push-to-branch="canCurrentUserPushToBranch"
+        :is-empty-repository="isEmptyRepository"
+        :project-path="projectPath"
+        :show-fork-suggestion="false"
+        :is-using-lfs="isUsingLfs"
+        @fork="setForkTarget('view')"
+      />
       <blob-default-actions-group
         :name="name"
         :path="path"
diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
index 71470717d1a4c4..97ec85519339f2 100644
--- a/app/assets/javascripts/repository/queries/blob_controls.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
@@ -2,6 +2,7 @@ query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!, $ref
   project(fullPath: $projectPath) {
     id
     repository {
+      empty
       blobs(paths: [$filePath], ref: $ref, refType: $refType) {
         nodes {
           id
@@ -15,6 +16,10 @@ query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!, $ref
           path
           rawPath
           rawTextBlob
+          archived
+          replacePath
+          webPath
+          canCurrentUserPushToBranch
           simpleViewer {
             fileType
             tooLarge
diff --git a/spec/frontend/repository/components/header_area/blob_button_group_spec.js b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
new file mode 100644
index 00000000000000..0ffe83c3042482
--- /dev/null
+++ b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
@@ -0,0 +1,177 @@
+import { GlDisclosureDropdownItem } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
+import BlobButtonGroup from '~/repository/components/header_area/blob_button_group.vue';
+import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
+import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
+import { createAlert } from '~/alert';
+import { projectMock } from 'ee_jest/repository/mock_data';
+
+Vue.use(VueApollo);
+jest.mock('~/alert');
+
+const DEFAULT_PROPS = {
+  name: 'some name',
+  path: 'some/path',
+  replacePath: 'some/replace/path',
+  deletePath: 'some/delete/path',
+  canPushToBranch: true,
+  isEmptyRepository: false,
+  projectPath: 'some/project/path',
+  showForkSuggestion: false,
+  isUsingLfs: true,
+};
+
+const DEFAULT_INJECT = {
+  targetBranch: 'master',
+  originalBranch: 'master',
+};
+
+describe('BlobButtonGroup component', () => {
+  let wrapper;
+  let fakeApollo;
+
+  let showUploadBlobModalMock;
+  let showDeleteBlobModalMock;
+
+  const projectInfoQueryMockResolver = jest
+    .fn()
+    .mockResolvedValue({ data: { project: projectMock } });
+  const projectInfoQueryErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
+
+  const createComponent = ({
+    props = {},
+    projectInfoResolver = projectInfoQueryMockResolver,
+  } = {}) => {
+    showUploadBlobModalMock = jest.fn();
+    showDeleteBlobModalMock = jest.fn();
+
+    const UploadBlobModalStub = stubComponent(UploadBlobModal, {
+      methods: {
+        show: showUploadBlobModalMock,
+      },
+    });
+    const DeleteBlobModalStub = stubComponent(CommitChangesModal, {
+      methods: {
+        show: showDeleteBlobModalMock,
+      },
+    });
+
+    fakeApollo = createMockApollo([[projectInfoQuery, projectInfoResolver]]);
+
+    wrapper = mountExtended(BlobButtonGroup, {
+      apolloProvider: fakeApollo,
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...props,
+      },
+      provide: {
+        ...DEFAULT_INJECT,
+      },
+      stubs: {
+        UploadBlobModal: UploadBlobModalStub,
+        CommitChangesModal: DeleteBlobModalStub,
+      },
+    });
+  };
+
+  const findDropdownItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
+  const findDropdownItemWithText = (text) =>
+    findDropdownItems().wrappers.find((x) => x.props('item').text === text);
+  const findDeleteItem = () => findDropdownItemWithText('Delete');
+  const findReplaceItem = () => findDropdownItemWithText('Replace');
+  const findDeleteBlobModal = () => wrapper.findComponent(CommitChangesModal);
+  const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
+
+  beforeEach(async () => {
+    createComponent();
+    await waitForPromises();
+  });
+
+  afterEach(() => {
+    fakeApollo = null;
+  });
+
+  it('renders component', () => {
+    expect(wrapper.props()).toMatchObject({
+      name: 'some name',
+      path: 'some/path',
+    });
+  });
+
+  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('dropdown items', () => {
+    it('renders both the replace and delete item', () => {
+      expect(wrapper.findAllComponents(GlDisclosureDropdownItem)).toHaveLength(2);
+      expect(findReplaceItem().exists()).toBe(true);
+      expect(findDeleteItem().exists()).toBe(true);
+    });
+
+    it('triggers the UploadBlobModal from the replace item', () => {
+      findReplaceItem().vm.$emit('action');
+
+      expect(showUploadBlobModalMock).toHaveBeenCalled();
+    });
+
+    it('triggers the CommitChangesModal from the delete item', () => {
+      findDeleteItem().vm.$emit('action');
+
+      expect(showDeleteBlobModalMock).toHaveBeenCalled();
+    });
+
+    describe('showForkSuggestion set to true', () => {
+      beforeEach(() => {
+        createComponent({ props: { showForkSuggestion: true } });
+      });
+
+      it('does not trigger the UploadBlobModal from the replace item', () => {
+        findReplaceItem().vm.$emit('action');
+
+        expect(showUploadBlobModalMock).not.toHaveBeenCalled();
+        expect(wrapper.emitted().fork).toHaveLength(1);
+      });
+
+      it('does not trigger the DeleteBlobModal from the delete item', () => {
+        findDeleteItem().vm.$emit('action');
+
+        expect(showDeleteBlobModalMock).not.toHaveBeenCalled();
+        expect(wrapper.emitted().fork).toHaveLength(1);
+      });
+    });
+  });
+
+  it('renders UploadBlobModal', () => {
+    expect(findUploadBlobModal().props()).toMatchObject({
+      commitMessage: 'Replace some name',
+      targetBranch: 'master',
+      originalBranch: 'master',
+      canPushCode: true,
+      path: 'some/path',
+      replacePath: 'some/replace/path',
+    });
+  });
+
+  it('renders CommitChangesModal for delete', () => {
+    expect(findDeleteBlobModal().props()).toMatchObject({
+      commitMessage: 'Delete some name',
+      targetBranch: 'master',
+      originalBranch: 'master',
+      canPushCode: true,
+      emptyRepo: false,
+      isUsingLfs: true,
+    });
+  });
+});
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 95b9f9f1f2038a..1f194fc380a8c3 100644
--- a/spec/frontend/repository/components/header_area/blob_controls_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_controls_spec.js
@@ -40,6 +40,7 @@ const createComponent = async (
       project: {
         id: '1234',
         repository: {
+          empty: blobControlsDataMock.repository.empty,
           blobs: {
             nodes: [{ ...blobControlsDataMock.repository.blobs.nodes[0], ...blobInfoOverrides }],
           },
@@ -169,6 +170,10 @@ describe('Blob controls component', () => {
         environmentPath: '',
         isEmpty: false,
         overrideCopy: true,
+        archived: false,
+        replacePath: 'some/replace/file.js',
+        webPath: 'some/file.js',
+        canCurrentUserPushToBranch: true,
         simpleViewer: {
           renderError: null,
           tooLarge: false,
@@ -181,6 +186,8 @@ describe('Blob controls component', () => {
           type: 'rich',
           fileType: 'rich',
         },
+        isEmptyRepository: false,
+        isUsingLfs: true,
       });
     });
 
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 e9aaccf36f61d8..d4d1ff7603d14a 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,10 +1,16 @@
 import { GlDisclosureDropdown } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 import BlobOverflowMenu from '~/repository/components/header_area/blob_overflow_menu.vue';
 import BlobDefaultActionsGroup from '~/repository/components/header_area/blob_default_actions_group.vue';
+import BlobButtonGroup from '~/repository/components/header_area/blob_button_group.vue';
 import createRouter from '~/repository/router';
 import { blobControlsDataMock, refMock } from '../../mock_data';
 
+jest.mock('~/lib/utils/common_utils', () => ({
+  isLoggedIn: jest.fn().mockReturnValue(true),
+}));
+
 describe('Blob Overflow Menu', () => {
   let wrapper;
 
@@ -27,6 +33,11 @@ describe('Blob Overflow Menu', () => {
         simpleViewer: blobControlsDataMock.repository.blobs.nodes[0].simpleViewer,
         name: blobControlsDataMock.repository.blobs.nodes[0].name,
         isBinary: blobControlsDataMock.repository.blobs.nodes[0].binary,
+        archived: blobControlsDataMock.repository.blobs.nodes[0].archived,
+        replacePath: blobControlsDataMock.repository.blobs.nodes[0].replacePath,
+        webPath: blobControlsDataMock.repository.blobs.nodes[0].webPath,
+        canCurrentUserPushToBranch:
+          blobControlsDataMock.repository.blobs.nodes[0].canCurrentUserPushToBranch,
         ...propsData,
       },
       stub: {
@@ -35,18 +46,14 @@ describe('Blob Overflow Menu', () => {
     });
   }
 
-  const findDefaultBlobActions = () => wrapper.findByTestId('default-actions-container');
   const findBlobDefaultActionsGroup = () => wrapper.findComponent(BlobDefaultActionsGroup);
+  const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
 
   beforeEach(() => {
     createComponent();
   });
 
   describe('Default blob actions', () => {
-    it('renders component', () => {
-      expect(findDefaultBlobActions().exists()).toBe(true);
-    });
-
     it('renders BlobDefaultActionsGroup component', () => {
       expect(findBlobDefaultActionsGroup().exists()).toBe(true);
     });
@@ -71,4 +78,25 @@ describe('Blob Overflow Menu', () => {
       });
     });
   });
+
+  describe('Blob Button Group', () => {
+    it('renders component', () => {
+      expect(findBlobButtonGroup().exists()).toBe(true);
+    });
+
+    it('does not render when blob is archived', () => {
+      createComponent({
+        archived: true,
+      });
+
+      expect(findBlobButtonGroup().exists()).toBe(false);
+    });
+
+    it('does not render when user is not logged in', () => {
+      isLoggedIn.mockImplementationOnce(() => false);
+      createComponent();
+
+      expect(findBlobButtonGroup().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 422fabdc82495a..14d7fff240fc10 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -91,6 +91,7 @@ export const encodedRefWithSpecialCharMock = 'feat/selected-%23-ref-%23';
 export const blobControlsDataMock = {
   id: '1234',
   repository: {
+    empty: false,
     blobs: {
       nodes: [
         {
@@ -105,6 +106,10 @@ export const blobControlsDataMock = {
           environmentExternalUrlForRouteMap: '',
           rawPath: 'https://testing.com/flightjs/flight/snippets/51/raw',
           rawTextBlob: 'Example raw text content',
+          archived: false,
+          replacePath: 'some/replace/file.js',
+          webPath: 'some/file.js',
+          canCurrentUserPushToBranch: true,
           simpleViewer: {
             collapsed: false,
             loadingPartialName: 'loading',
-- 
GitLab


From ef92e39e91de702b6cb51358a3e00ac10ef234d9 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 21 Jan 2025 17:06:07 +0100
Subject: [PATCH 03/13] Move LockFileDropdownItem to BlobButtonGroup

---
 .../components/header_area/blob_button_group.vue       | 10 +++++++++-
 .../components/header_area/blob_overflow_menu.vue      | 10 ----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index c0fdd27ef461ee..c57a861ef7f940 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -23,8 +23,10 @@ export default {
     GlDisclosureDropdownItem,
     DeleteBlobModal,
     UploadBlobModal,
+    LockFileDropdownItem: () =>
+      import('ee_component/repository/components/header_area/lock_file_dropdown_item.vue'),
   },
-  mixins: [getRefMixin],
+  mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
     targetBranch: {
       default: '',
@@ -136,6 +138,12 @@ export default {
 
 <template>
   <div>
+    <lock-file-dropdown-item
+      v-if="glFeatures.fileLocks"
+      :name="name"
+      :path="path"
+      :project-path="projectPath"
+    />
     <gl-disclosure-dropdown-item
       :item="replaceFileItem"
       @action="showModal($options.replaceBlobModalId)"
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 fd5a050926a351..d0f04c9e1b57e8 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,7 +2,6 @@
 import { GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import { isLoggedIn } from '~/lib/utils/common_utils';
-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';
 import BlobButtonGroup from './blob_button_group.vue';
@@ -17,13 +16,10 @@ export default {
     GlDisclosureDropdown,
     BlobDefaultActionsGroup,
     BlobButtonGroup,
-    LockFileDropdownItem: () =>
-      import('ee_component/repository/components/header_area/lock_file_dropdown_item.vue'),
   },
   directives: {
     GlTooltipDirective,
   },
-  mixins: [glFeatureFlagMixin()],
   inject: {
     blobHash: {
       default: '',
@@ -158,12 +154,6 @@ 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"
-      />
       <blob-button-group
         v-if="isLoggedIn && !archived"
         :path="path"
-- 
GitLab


From ebb16d573d4131ca5073409a056274c322993fa9 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Tue, 21 Jan 2025 17:10:31 +0100
Subject: [PATCH 04/13] Use groups in BlobOverflowMenu

---
 .../components/header_area/blob_button_group.vue           | 7 ++++---
 .../components/header_area/blob_default_actions_group.vue  | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index c57a861ef7f940..d4038e4da8a6fb 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDisclosureDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdownItem, GlDisclosureDropdownGroup } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { sprintf, __ } from '~/locale';
 import { createAlert } from '~/alert';
@@ -21,6 +21,7 @@ export default {
   replaceBlobModalId: REPLACE_BLOB_MODAL_ID,
   components: {
     GlDisclosureDropdownItem,
+    GlDisclosureDropdownGroup,
     DeleteBlobModal,
     UploadBlobModal,
     LockFileDropdownItem: () =>
@@ -137,7 +138,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <gl-disclosure-dropdown-group>
     <lock-file-dropdown-item
       v-if="glFeatures.fileLocks"
       :name="name"
@@ -172,5 +173,5 @@ export default {
       :empty-repo="isEmptyRepository"
       :is-using-lfs="isUsingLfs"
     />
-  </div>
+  </gl-disclosure-dropdown-group>
 </template>
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
index 9801351f10a617..951d6d2dbfe6a6 100644
--- 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
@@ -1,5 +1,5 @@
 <script>
-import { GlDisclosureDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdownItem, GlDisclosureDropdownGroup } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import { setUrlParams, relativePathToAbsolute, getBaseURL } from '~/lib/utils/url_utility';
 
@@ -13,6 +13,7 @@ export default {
   i18n,
   components: {
     GlDisclosureDropdownItem,
+    GlDisclosureDropdownGroup,
   },
   inject: {
     blobHash: {
@@ -141,7 +142,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <gl-disclosure-dropdown-group bordered>
     <gl-disclosure-dropdown-item
       v-if="showCopyButton"
       data-testid="copy-item"
@@ -160,5 +161,5 @@ export default {
       data-testid="environment-item"
       :item="environmentItem"
     />
-  </div>
+  </gl-disclosure-dropdown-group>
 </template>
-- 
GitLab


From 7a1004ef56f78bb5f1fd837f3699a3b0a052ee61 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 22 Jan 2025 13:33:19 +0100
Subject: [PATCH 05/13] Remove duplcated test case

---
 .../header_area/lock_file_dropdown_item_spec.js       | 11 -----------
 1 file changed, 11 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 3587e4bc9be96e..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
@@ -202,17 +202,6 @@ 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');
 
-- 
GitLab


From a45158cc6facea0d9012d9718d8ac9f91c434b83 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 22 Jan 2025 16:25:12 +0100
Subject: [PATCH 06/13] Move project query to group component

---
 .../header_area/blob_button_group.vue         |  8 +++
 .../header_area/lock_file_dropdown_item.vue   | 45 ++++++-------
 .../lock_file_dropdown_item_spec.js           | 67 +++++--------------
 3 files changed, 44 insertions(+), 76 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index d4038e4da8a6fb..d02de2ca8377d4 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -85,6 +85,7 @@ export default {
         };
       },
       update({ project }) {
+        this.pathLocks = project?.pathLocks || DEFAULT_BLOB_INFO.pathLocks;
         this.userPermissions = project?.userPermissions;
       },
       error() {
@@ -94,10 +95,14 @@ export default {
   },
   data() {
     return {
+      pathLocks: DEFAULT_BLOB_INFO.pathLocks,
       userPermissions: DEFAULT_BLOB_INFO.userPermissions,
     };
   },
   computed: {
+    isLoading() {
+      return this.$apollo?.queries.projectInfo.loading;
+    },
     replaceFileItem() {
       return {
         text: this.$options.i18n.replace,
@@ -144,6 +149,9 @@ export default {
       :name="name"
       :path="path"
       :project-path="projectPath"
+      :path-locks="pathLocks"
+      :user-permissions="userPermissions"
+      :is-loading="isLoading"
     />
     <gl-disclosure-dropdown-item
       :item="replaceFileItem"
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 ebc8fe7dfaba0d..ca284ea0632bc1 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
@@ -2,7 +2,6 @@
 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';
 
@@ -12,7 +11,6 @@ export default {
     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: {
@@ -32,23 +30,20 @@ export default {
       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 });
-      },
+    pathLocks: {
+      type: Object,
+      required: false,
+      default: () => DEFAULT_BLOB_INFO.pathLocks,
+    },
+    userPermissions: {
+      type: Object,
+      required: false,
+      default: () => DEFAULT_BLOB_INFO.userPermissions,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
   },
   data() {
@@ -56,14 +51,9 @@ export default {
       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;
     },
@@ -112,8 +102,11 @@ export default {
     },
   },
   watch: {
-    isLocked(val) {
-      this.locked = val;
+    isLocked: {
+      immediate: true,
+      handler(val) {
+        this.locked = val;
+      },
     },
   },
   methods: {
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 73db421a766cd5..434b60e83ab762 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
@@ -5,7 +5,6 @@ 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';
@@ -17,22 +16,11 @@ 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 lockPathMutationResolver = jest.fn();
 
-  const lochPathMutationResolver = jest.fn();
-
-  const createComponent = ({
-    mutationResolver = lochPathMutationResolver,
-    projectInfoResolver = projectInfoQueryMockResolver,
-  } = {}) => {
+  const createComponent = ({ props = {}, mutationResolver = lockPathMutationResolver } = {}) => {
     window.gon = { current_username: projectMock.pathLocks.nodes[0].user.username };
-    fakeApollo = createMockApollo([
-      [projectInfoQuery, projectInfoResolver],
-      [lockPathMutation, mutationResolver],
-    ]);
+    fakeApollo = createMockApollo([[lockPathMutation, mutationResolver]]);
 
     wrapper = shallowMount(LockFileDropdownItem, {
       apolloProvider: fakeApollo,
@@ -40,6 +28,10 @@ describe('LockFileDropdownItem component', () => {
         name: 'locked_file.js',
         path: 'some/path/locked_file.js',
         projectPath: 'some/project/path',
+        isLoading: false,
+        userPermissions: userPermissionsMock,
+        pathLocks: projectMock.pathLocks,
+        ...props,
       },
     });
   };
@@ -60,19 +52,13 @@ describe('LockFileDropdownItem component', () => {
   });
 
   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({
+      props: {
+        userPermissions: {
+          ...userPermissionsMock,
+          pushCode: false,
         },
       },
-    };
-    createComponent({
-      projectInfoResolver: jest.fn().mockResolvedValue(projectWithNoPushPermission),
     });
     await waitForPromises();
 
@@ -82,12 +68,11 @@ describe('LockFileDropdownItem component', () => {
   });
 
   it('renders disabled until query fetches projects info', async () => {
-    const projectInfoQueryLoading = jest.fn().mockResolvedValue(new Promise(() => {}));
     createComponent({
-      projectInfoResolver: projectInfoQueryLoading,
+      props: { isLoading: true },
     });
     await waitForPromises();
-    expect(projectInfoQueryLoading).toHaveBeenCalled();
+
     expect(findLockFileDropdownItem().props('item')).toMatchObject({
       extraAttrs: { disabled: true },
     });
@@ -110,17 +95,8 @@ describe('LockFileDropdownItem component', () => {
   });
 
   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),
+      props: { pathLocks: { __typename: 'PathLockConnection', nodes: [] } },
     });
     await waitForPromises();
 
@@ -137,15 +113,6 @@ describe('LockFileDropdownItem component', () => {
     });
   });
 
-  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');
@@ -195,7 +162,7 @@ describe('LockFileDropdownItem component', () => {
       findLockFileDropdownItem().vm.$emit('action');
       clickSubmit();
 
-      expect(lochPathMutationResolver).toHaveBeenCalledWith({
+      expect(lockPathMutationResolver).toHaveBeenCalledWith({
         filePath: 'some/path/locked_file.js',
         lock: false,
         projectPath: 'some/project/path',
@@ -205,7 +172,7 @@ describe('LockFileDropdownItem component', () => {
     it('does not execute a lock mutation if lock not confirmed', () => {
       findLockFileDropdownItem().vm.$emit('action');
 
-      expect(lochPathMutationResolver).not.toHaveBeenCalled();
+      expect(lockPathMutationResolver).not.toHaveBeenCalled();
     });
   });
 });
-- 
GitLab


From ee0860cc6e7f679d38bb101e850a5b8c3aff484c Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 22 Jan 2025 19:16:35 +0100
Subject: [PATCH 07/13] Add check for fork suggestion

---
 .../header_area/blob_button_group.vue         | 32 ++++++++++++++---
 .../components/header_area/blob_controls.vue  |  7 ++++
 .../header_area/blob_overflow_menu.vue        | 19 ++++-------
 .../queries/blob_controls.query.graphql       |  2 ++
 .../header_area/blob_button_group_spec.js     | 34 ++++++++++++++-----
 .../header_area/blob_overflow_menu_spec.js    |  2 ++
 spec/frontend/repository/mock_data.js         |  2 ++
 7 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index d02de2ca8377d4..ea550aa5dc7604 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -3,6 +3,7 @@ import { GlDisclosureDropdownItem, GlDisclosureDropdownGroup } from '@gitlab/ui'
 import { uniqueId } from 'lodash';
 import { sprintf, __ } from '~/locale';
 import { createAlert } from '~/alert';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.graphql';
 import { DEFAULT_BLOB_INFO } from '~/repository/constants';
@@ -35,6 +36,12 @@ export default {
     originalBranch: {
       default: '',
     },
+    canModifyBlob: {
+      default: () => false,
+    },
+    canModifyBlobWithWebIde: {
+      default: () => false,
+    },
   },
   props: {
     name: {
@@ -65,10 +72,6 @@ export default {
       type: String,
       required: true,
     },
-    showForkSuggestion: {
-      type: Boolean,
-      required: true,
-    },
     isUsingLfs: {
       type: Boolean,
       required: false,
@@ -108,6 +111,8 @@ export default {
         text: this.$options.i18n.replace,
         extraAttrs: {
           'data-testid': 'replace',
+          // a temporary solution before resolving https://gitlab.com/gitlab-org/gitlab/-/issues/450774#note_2319974833
+          disabled: this.showForkSuggestion,
         },
       };
     },
@@ -116,6 +121,8 @@ export default {
         text: this.$options.i18n.delete,
         extraAttrs: {
           'data-testid': 'delete',
+          // a temporary solution before resolving https://gitlab.com/gitlab-org/gitlab/-/issues/450774#note_2319974833
+          disabled: this.showForkSuggestion,
         },
       };
     },
@@ -128,6 +135,23 @@ export default {
     deleteModalCommitMessage() {
       return sprintf(__('Delete %{name}'), { name: this.name });
     },
+    isLoggedIn() {
+      return isLoggedIn();
+    },
+    canFork() {
+      const { createMergeRequestIn, forkProject } = this.userPermissions;
+
+      return this.isLoggedIn && !this.isUsingLfs && createMergeRequestIn && forkProject;
+    },
+    showSingleFileEditorForkSuggestion() {
+      return this.canFork && !this.canModifyBlob;
+    },
+    showWebIdeForkSuggestion() {
+      return this.canFork && !this.canModifyBlobWithWebIde;
+    },
+    showForkSuggestion() {
+      return this.showSingleFileEditorForkSuggestion || this.showWebIdeForkSuggestion;
+    },
   },
   methods: {
     showModal(modalId) {
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 3c335f1172e02a..f438e5059b2f4e 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { computed } from 'vue';
 import { __ } from '~/locale';
 import { createAlert } from '~/alert';
 import getRefMixin from '~/repository/mixins/get_ref';
@@ -65,6 +66,12 @@ export default {
       },
     },
   },
+  provide() {
+    return {
+      canModifyBlob: computed(() => this.blobInfo?.canModifyBlob ?? false),
+      canModifyBlobWithWebIde: computed(() => this.blobInfo?.canModifyBlobWithWebIde ?? false),
+    };
+  },
   props: {
     projectPath: {
       type: String,
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 d0f04c9e1b57e8..2a54aaf4938712 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,5 +1,6 @@
 <script>
 import { GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui';
+import { computed } from 'vue';
 import { sprintf, s__, __ } from '~/locale';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
@@ -20,13 +21,12 @@ export default {
   directives: {
     GlTooltipDirective,
   },
-  inject: {
-    blobHash: {
-      default: '',
-    },
-    canDownloadCode: {
-      default: true,
-    },
+  inject: ['canModifyBlob', 'canModifyBlobWithWebIde'],
+  provide() {
+    return {
+      canModifyBlob: computed(() => this.canModifyBlob),
+      canModifyBlobWithWebIde: computed(() => this.canModifyBlobWithWebIde),
+    };
   },
   props: {
     name: {
@@ -133,9 +133,6 @@ export default {
     },
   },
   methods: {
-    setForkTarget(target) {
-      this.forkTarget = target;
-    },
     onCopy() {
       if (this.overrideCopy) {
         this.$emit('copy');
@@ -163,9 +160,7 @@ export default {
         :can-push-to-branch="canCurrentUserPushToBranch"
         :is-empty-repository="isEmptyRepository"
         :project-path="projectPath"
-        :show-fork-suggestion="false"
         :is-using-lfs="isUsingLfs"
-        @fork="setForkTarget('view')"
       />
       <blob-default-actions-group
         :name="name"
diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
index 97ec85519339f2..6c5dbb63c91493 100644
--- a/app/assets/javascripts/repository/queries/blob_controls.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
@@ -20,6 +20,8 @@ query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!, $ref
           replacePath
           webPath
           canCurrentUserPushToBranch
+          canModifyBlob
+          canModifyBlobWithWebIde
           simpleViewer {
             fileType
             tooLarge
diff --git a/spec/frontend/repository/components/header_area/blob_button_group_spec.js b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
index 0ffe83c3042482..564f53c18c9462 100644
--- a/spec/frontend/repository/components/header_area/blob_button_group_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
@@ -14,6 +14,9 @@ import { projectMock } from 'ee_jest/repository/mock_data';
 
 Vue.use(VueApollo);
 jest.mock('~/alert');
+jest.mock('~/lib/utils/common_utils', () => ({
+  isLoggedIn: jest.fn().mockReturnValue(true),
+}));
 
 const DEFAULT_PROPS = {
   name: 'some name',
@@ -23,13 +26,14 @@ const DEFAULT_PROPS = {
   canPushToBranch: true,
   isEmptyRepository: false,
   projectPath: 'some/project/path',
-  showForkSuggestion: false,
   isUsingLfs: true,
 };
 
 const DEFAULT_INJECT = {
   targetBranch: 'master',
   originalBranch: 'master',
+  canModifyBlob: true,
+  canModifyBlobWithWebIde: true,
 };
 
 describe('BlobButtonGroup component', () => {
@@ -44,9 +48,10 @@ describe('BlobButtonGroup component', () => {
     .mockResolvedValue({ data: { project: projectMock } });
   const projectInfoQueryErrorResolver = jest.fn().mockRejectedValue(new Error('Request failed'));
 
-  const createComponent = ({
+  const createComponent = async ({
     props = {},
     projectInfoResolver = projectInfoQueryMockResolver,
+    inject = {},
   } = {}) => {
     showUploadBlobModalMock = jest.fn();
     showDeleteBlobModalMock = jest.fn();
@@ -72,12 +77,14 @@ describe('BlobButtonGroup component', () => {
       },
       provide: {
         ...DEFAULT_INJECT,
+        ...inject,
       },
       stubs: {
         UploadBlobModal: UploadBlobModalStub,
         CommitChangesModal: DeleteBlobModalStub,
       },
     });
+    await waitForPromises();
   };
 
   const findDropdownItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
@@ -89,8 +96,7 @@ describe('BlobButtonGroup component', () => {
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
 
   beforeEach(async () => {
-    createComponent();
-    await waitForPromises();
+    await createComponent();
   });
 
   afterEach(() => {
@@ -105,8 +111,7 @@ describe('BlobButtonGroup component', () => {
   });
 
   it('creates an alert with the correct message, when projectInfo query fails', async () => {
-    createComponent({ projectInfoResolver: projectInfoQueryErrorResolver });
-    await waitForPromises();
+    await createComponent({ projectInfoResolver: projectInfoQueryErrorResolver });
 
     expect(createAlert).toHaveBeenCalledWith({
       message: 'An error occurred while fetching lock information, please try again.',
@@ -132,14 +137,21 @@ describe('BlobButtonGroup component', () => {
       expect(showDeleteBlobModalMock).toHaveBeenCalled();
     });
 
-    describe('showForkSuggestion set to true', () => {
-      beforeEach(() => {
-        createComponent({ props: { showForkSuggestion: true } });
+    describe('when user cannot modify blob', () => {
+      beforeEach(async () => {
+        await createComponent({
+          props: { isUsingLfs: false },
+          inject: { canModifyBlob: false, canModifyBlobWithWebIde: false },
+        });
       });
 
       it('does not trigger the UploadBlobModal from the replace item', () => {
         findReplaceItem().vm.$emit('action');
 
+        expect(findReplaceItem().props('item')).toMatchObject({
+          extraAttrs: { disabled: true },
+        });
+
         expect(showUploadBlobModalMock).not.toHaveBeenCalled();
         expect(wrapper.emitted().fork).toHaveLength(1);
       });
@@ -147,6 +159,10 @@ describe('BlobButtonGroup component', () => {
       it('does not trigger the DeleteBlobModal from the delete item', () => {
         findDeleteItem().vm.$emit('action');
 
+        expect(findDeleteItem().props('item')).toMatchObject({
+          extraAttrs: { disabled: true },
+        });
+
         expect(showDeleteBlobModalMock).not.toHaveBeenCalled();
         expect(wrapper.emitted().fork).toHaveLength(1);
       });
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 d4d1ff7603d14a..6a36820bd735cf 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
@@ -23,6 +23,8 @@ describe('Blob Overflow Menu', () => {
     wrapper = shallowMountExtended(BlobOverflowMenu, {
       router,
       provide: {
+        canModifyBlob: true,
+        canModifyBlobWithWebIde: true,
         ...provided,
       },
       propsData: {
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 14d7fff240fc10..9936cc0e5c719a 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -110,6 +110,8 @@ export const blobControlsDataMock = {
           replacePath: 'some/replace/file.js',
           webPath: 'some/file.js',
           canCurrentUserPushToBranch: true,
+          canModifyBlob: true,
+          canModifyBlobWithWebIde: true,
           simpleViewer: {
             collapsed: false,
             loadingPartialName: 'loading',
-- 
GitLab


From 2c3d94b3dffeb42b955622acd82f6ff22abc439b Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 29 Jan 2025 14:46:33 +0100
Subject: [PATCH 08/13] Refacto BlobControls to correctly show Blame

---
 .../components/header_area/blob_controls.vue  | 52 +++++++++++++------
 .../header_area/blob_controls_spec.js         |  6 ++-
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_controls.vue b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
index f438e5059b2f4e..6d83dd15d72bb4 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -57,10 +57,6 @@ export default {
       skip() {
         return !this.filePath;
       },
-      result({ data }) {
-        const repository = data.project.repository || {};
-        this.isEmptyRepository = repository.empty;
-      },
       error() {
         createAlert({ message: this.$options.i18n.errorMessage });
       },
@@ -107,8 +103,20 @@ export default {
     blobInfo() {
       return this.project?.repository?.blobs?.nodes[0] || {};
     },
+    storageInfo() {
+      const { storedExternally, externalStorage } = this.blobInfo;
+      return {
+        isExternallyStored: storedExternally,
+        storageType: externalStorage,
+        isLfs: storedExternally && externalStorage === 'lfs',
+      };
+    },
+    showBlameButton() {
+      const { isExternallyStored, isLfs } = this.storageInfo;
+      return !isExternallyStored && !isLfs;
+    },
     isUsingLfs() {
-      return !this.blobInfo.storedExternally && this.blobInfo.externalStorage !== 'lfs';
+      return this.storageInfo.isLfs;
     },
     isBinaryFileType() {
       return this.isBinary || this.blobInfo.simpleViewer?.fileType !== TEXT_FILE_TYPE;
@@ -116,25 +124,32 @@ export default {
     rawPath() {
       return this.blobInfo.externalStorageUrl || this.blobInfo.rawPath;
     },
+    shortcuts() {
+      const findFileKey = keysFor(START_SEARCH_PROJECT_FILE)[0];
+      const permalinkKey = keysFor(PROJECT_FILES_GO_TO_PERMALINK)[0];
+
+      return {
+        findFile: findFileKey,
+        permalink: permalinkKey,
+      };
+    },
     findFileShortcutKey() {
-      return keysFor(START_SEARCH_PROJECT_FILE)[0];
+      return this.shortcuts.findFile;
     },
     findFileTooltip() {
+      if (shouldDisableShortcuts()) return null;
+
       const { description } = START_SEARCH_PROJECT_FILE;
-      const key = this.findFileShortcutKey;
-      return shouldDisableShortcuts()
-        ? null
-        : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+      return this.formatTooltipWithShortcut(description, this.shortcuts.findFile);
     },
     permalinkShortcutKey() {
-      return keysFor(PROJECT_FILES_GO_TO_PERMALINK)[0];
+      return this.shortcuts.permalink;
     },
     permalinkTooltip() {
+      if (shouldDisableShortcuts()) return null;
+
       const description = this.$options.i18n.permalinkTooltip;
-      const key = this.permalinkShortcutKey;
-      return shouldDisableShortcuts()
-        ? null
-        : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+      return this.formatTooltipWithShortcut(description, this.shortcuts.permalink);
     },
     isEmpty() {
       return this.blobInfo.rawSize === '0';
@@ -153,6 +168,9 @@ export default {
     },
   },
   methods: {
+    formatTooltipWithShortcut(description, key) {
+      return sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+    },
     initShortcuts() {
       shortcircuitPermalinkButton();
       addShortcutsExtension(ShortcutsBlob);
@@ -187,7 +205,7 @@ export default {
       {{ $options.i18n.findFile }}
     </gl-button>
     <gl-button
-      v-if="isUsingLfs"
+      v-if="showBlameButton"
       data-testid="blame"
       :href="blobInfo.blamePath"
       :class="$options.buttonClassList"
@@ -223,7 +241,7 @@ export default {
       :archived="blobInfo.archived"
       :replace-path="blobInfo.replacePath"
       :web-path="blobInfo.webPath"
-      :is-empty-repository="isEmptyRepository"
+      :is-empty-repository="project.repository.empty"
       :can-current-user-push-to-branch="blobInfo.canCurrentUserPushToBranch"
       :is-using-lfs="isUsingLfs"
       @copy="onCopy"
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 1f194fc380a8c3..b08193118fae53 100644
--- a/spec/frontend/repository/components/header_area/blob_controls_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_controls_spec.js
@@ -56,6 +56,8 @@ const createComponent = async (
     apolloProvider: createMockApollo([[blobControlsQuery, mockResolver]]),
     provide: {
       glFeatures,
+      canModifyBlob: true,
+      canModifyBlobWithWebIde: true,
     },
     propsData: {
       projectPath,
@@ -113,7 +115,7 @@ describe('Blob controls component', () => {
     });
 
     it('does not render blame button when blobInfo.externalStorage is "lfs"', async () => {
-      await createComponent({}, { externalStorage: 'lfs' });
+      await createComponent({}, { storedExternally: true, externalStorage: 'lfs' });
 
       expect(findBlameButton().exists()).toBe(false);
     });
@@ -187,7 +189,7 @@ describe('Blob controls component', () => {
           fileType: 'rich',
         },
         isEmptyRepository: false,
-        isUsingLfs: true,
+        isUsingLfs: false,
       });
     });
 
-- 
GitLab


From 65cf7ecb4377ef2635d614a778bf34c4660812fb Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 29 Jan 2025 17:25:21 +0100
Subject: [PATCH 09/13] Fix imports in unit tests

---
 .../components/header_area/blob_button_group_spec.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/frontend/repository/components/header_area/blob_button_group_spec.js b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
index 564f53c18c9462..3fab9f3c049153 100644
--- a/spec/frontend/repository/components/header_area/blob_button_group_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
@@ -1,16 +1,16 @@
 import { GlDisclosureDropdownItem } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { projectMock } from 'ee_else_ce_jest/repository/mock_data';
+import projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
 import BlobButtonGroup from '~/repository/components/header_area/blob_button_group.vue';
 import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 import { createAlert } from '~/alert';
-import { projectMock } from 'ee_jest/repository/mock_data';
 
 Vue.use(VueApollo);
 jest.mock('~/alert');
-- 
GitLab


From 8c369f6ff26e30b5c7757fec5a05390e8b4d2d2e Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 29 Jan 2025 17:43:21 +0100
Subject: [PATCH 10/13] Address Duo review feedback

---
 .../repository/components/header_area/blob_button_group.vue   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index ea550aa5dc7604..c233bd2823da68 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -100,6 +100,7 @@ export default {
     return {
       pathLocks: DEFAULT_BLOB_INFO.pathLocks,
       userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+      isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
@@ -135,9 +136,6 @@ export default {
     deleteModalCommitMessage() {
       return sprintf(__('Delete %{name}'), { name: this.name });
     },
-    isLoggedIn() {
-      return isLoggedIn();
-    },
     canFork() {
       const { createMergeRequestIn, forkProject } = this.userPermissions;
 
-- 
GitLab


From 8fdd8aba3bc2f888c567faf409c1855956c52d74 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Wed, 29 Jan 2025 18:48:21 +0100
Subject: [PATCH 11/13] Fix imports in CE unit test file

---
 .../repository/components/header_area/blob_button_group_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/frontend/repository/components/header_area/blob_button_group_spec.js b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
index 3fab9f3c049153..374b55f0b53670 100644
--- a/spec/frontend/repository/components/header_area/blob_button_group_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
@@ -2,7 +2,7 @@ import { GlDisclosureDropdownItem } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { projectMock } from 'ee_else_ce_jest/repository/mock_data';
-import projectInfoQuery from 'ee_component/repository/queries/project_info.query.graphql';
+import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.graphql';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import createMockApollo from 'helpers/mock_apollo_helper';
-- 
GitLab


From 0ab04eca08a06d0a1be9eb8b32e7830bc69b65c5 Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 31 Jan 2025 15:46:06 +0100
Subject: [PATCH 12/13] Add __typename to blob controls query

---
 .../components/header_area/blob_overflow_menu.vue         | 8 +++++---
 .../repository/queries/blob_controls.query.graphql        | 6 ++++++
 .../components/header_area/blob_controls_spec.js          | 5 +++++
 spec/frontend/repository/mock_data.js                     | 6 ++++++
 4 files changed, 22 insertions(+), 3 deletions(-)

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 2a54aaf4938712..878bf4577909b6 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
@@ -107,10 +107,12 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      isLoggedIn: isLoggedIn(),
+    };
+  },
   computed: {
-    isLoggedIn() {
-      return isLoggedIn();
-    },
     activeViewerType() {
       if (this.$route?.query?.plain !== '1') {
         const richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
index 6c5dbb63c91493..9c50ba6236b9df 100644
--- a/app/assets/javascripts/repository/queries/blob_controls.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
@@ -1,10 +1,14 @@
 query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!, $refType: RefType) {
   project(fullPath: $projectPath) {
+    __typename
     id
     repository {
+      __typename
       empty
       blobs(paths: [$filePath], ref: $ref, refType: $refType) {
+        __typename
         nodes {
+          __typename
           id
           name
           blamePath
@@ -23,12 +27,14 @@ query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!, $ref
           canModifyBlob
           canModifyBlobWithWebIde
           simpleViewer {
+            __typename
             fileType
             tooLarge
             type
             renderError
           }
           richViewer {
+            __typename
             fileType
             tooLarge
             type
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 b08193118fae53..ad98ce073cbb68 100644
--- a/spec/frontend/repository/components/header_area/blob_controls_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_controls_spec.js
@@ -38,10 +38,13 @@ const createComponent = async (
   mockResolver = jest.fn().mockResolvedValue({
     data: {
       project: {
+        __typename: 'Project',
         id: '1234',
         repository: {
+          __typename: 'Repository',
           empty: blobControlsDataMock.repository.empty,
           blobs: {
+            __typename: 'RepositoryBlobConnection',
             nodes: [{ ...blobControlsDataMock.repository.blobs.nodes[0], ...blobInfoOverrides }],
           },
         },
@@ -177,12 +180,14 @@ describe('Blob controls component', () => {
         webPath: 'some/file.js',
         canCurrentUserPushToBranch: true,
         simpleViewer: {
+          __typename: 'BlobViewer',
           renderError: null,
           tooLarge: false,
           type: 'simple',
           fileType: 'rich',
         },
         richViewer: {
+          __typename: 'BlobViewer',
           renderError: 'too big file',
           tooLarge: false,
           type: 'rich',
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 9936cc0e5c719a..7c2682cc9f396e 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -89,12 +89,16 @@ export const refWithSpecialCharMock = 'feat/selected-#-ref-#';
 export const encodedRefWithSpecialCharMock = 'feat/selected-%23-ref-%23';
 
 export const blobControlsDataMock = {
+  __typename: 'Project',
   id: '1234',
   repository: {
+    __typename: 'Repository',
     empty: false,
     blobs: {
+      __typename: 'RepositoryBlobConnection',
       nodes: [
         {
+          __typename: 'RepositoryBlob',
           id: '5678',
           name: 'file.js',
           blamePath: 'blame/file.js',
@@ -113,6 +117,7 @@ export const blobControlsDataMock = {
           canModifyBlob: true,
           canModifyBlobWithWebIde: true,
           simpleViewer: {
+            __typename: 'BlobViewer',
             collapsed: false,
             loadingPartialName: 'loading',
             renderError: null,
@@ -121,6 +126,7 @@ export const blobControlsDataMock = {
             fileType: 'rich',
           },
           richViewer: {
+            __typename: 'BlobViewer',
             collapsed: false,
             loadingPartialName: 'loading',
             renderError: 'too big file',
-- 
GitLab


From e8b76b9492f8a9d35319358aaa5ec6c63517d40d Mon Sep 17 00:00:00 2001
From: psjakubowska <psedlak-jakubowska@gitlab.com>
Date: Fri, 31 Jan 2025 16:08:06 +0100
Subject: [PATCH 13/13] Remove div breaking the list syntax

---
 .../header_area/blob_overflow_menu.vue        | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

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 878bf4577909b6..fa6954d011d94e 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
@@ -144,39 +144,37 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <gl-disclosure-dropdown
-      v-gl-tooltip-directive.hover="$options.i18n.dropdownLabel"
-      no-caret
-      icon="ellipsis_v"
-      data-testid="default-actions-container"
-      :toggle-text="$options.i18n.dropdownLabel"
-      text-sr-only
-    >
-      <blob-button-group
-        v-if="isLoggedIn && !archived"
-        :path="path"
-        :name="name"
-        :replace-path="replacePath"
-        :delete-path="webPath"
-        :can-push-to-branch="canCurrentUserPushToBranch"
-        :is-empty-repository="isEmptyRepository"
-        :project-path="projectPath"
-        :is-using-lfs="isUsingLfs"
-      />
-      <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>
+  <gl-disclosure-dropdown
+    v-gl-tooltip-directive.hover="$options.i18n.dropdownLabel"
+    no-caret
+    icon="ellipsis_v"
+    data-testid="default-actions-container"
+    :toggle-text="$options.i18n.dropdownLabel"
+    text-sr-only
+  >
+    <blob-button-group
+      v-if="isLoggedIn && !archived"
+      :path="path"
+      :name="name"
+      :replace-path="replacePath"
+      :delete-path="webPath"
+      :can-push-to-branch="canCurrentUserPushToBranch"
+      :is-empty-repository="isEmptyRepository"
+      :project-path="projectPath"
+      :is-using-lfs="isUsingLfs"
+    />
+    <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>
 </template>
-- 
GitLab