Show fork suggestion when replacing or deleting a blob

Shows a fork suggestion when a user tries to delete or replace a blob

app/assets/javascripts/repository/components/blob_button_group.vue

 <script>
-import { GlButtonGroup, GlButton, GlModalDirective } from '@gitlab/ui';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { sprintf, __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -20,9 +20,6 @@ export default {
     DeleteBlobModal,
     LockButton: () => import('ee_component/repository/components/lock_button.vue'),
   },
-  directives: {
-    GlModal: GlModalDirective,
-  },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
     targetBranch: {
@@ -73,6 +70,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    showForkSuggestion: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     replaceModalId() {
@@ -91,6 +92,16 @@ export default {
       return this.canLock ? 'lock_button' : 'disabled_lock_button';
     },
   },
+  methods: {
+    showModal(modalId) {
+      if (this.showForkSuggestion) {
+        this.$emit('fork');
+        return;
+      }
+
+      this.$refs[modalId].show();
+    },
+  },
 };
 </script>
 
@@ -107,14 +118,15 @@ export default {
         data-testid="lock"
         :data-qa-selector="lockBtnQASelector"
       />
-      <gl-button v-gl-modal="replaceModalId" data-testid="replace">
+      <gl-button data-testid="replace" @click="showModal(replaceModalId)">
         {{ $options.i18n.replace }}
       </gl-button>
-      <gl-button v-gl-modal="deleteModalId" data-testid="delete">
+      <gl-button data-testid="delete" @click="showModal(deleteModalId)">
         {{ $options.i18n.delete }}
       </gl-button>
     </gl-button-group>
     <upload-blob-modal
+      :ref="replaceModalId"
       :modal-id="replaceModalId"
       :modal-title="replaceModalTitle"
       :commit-message="replaceModalTitle"
@@ -126,6 +138,7 @@ export default {
       :primary-btn-text="$options.i18n.replacePrimaryBtnText"
     />
     <delete-blob-modal
+      :ref="deleteModalId"
       :modal-id="deleteModalId"
       :modal-title="deleteModalTitle"
       :delete-path="deletePath"

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -280,6 +280,8 @@ export default {
             :project-path="projectPath"
             :is-locked="Boolean(pathLockedByUser)"
             :can-lock="canLock"
+            :show-fork-suggestion="showForkSuggestion"
+            @fork="setForkTarget('ide')"
           />
         </template>
       </blob-header>

app/assets/javascripts/repository/components/delete_blob_modal.vue

@@ -146,6 +146,9 @@ export default {
     /* eslint-enable dot-notation */
   },
   methods: {
+    show() {
+      this.$refs[this.modalId].show();
+    },
     submitForm(e) {
       e.preventDefault(); // Prevent modal from closing
       this.form.showValidation = true;
@@ -164,6 +167,7 @@ export default {
 
 <template>
   <gl-modal
+    :ref="modalId"
     v-bind="$attrs"
     data-testid="modal-delete"
     :modal-id="modalId"

app/assets/javascripts/repository/components/fork_suggestion.vue

@@ -32,6 +32,7 @@ export default {
       class="gl-mr-3"
       category="secondary"
       variant="confirm"
+      data-method="post"
       :href="forkPath"
       data-testid="fork"
     >

app/assets/javascripts/repository/components/upload_blob_modal.vue

@@ -136,6 +136,9 @@ export default {
     },
   },
   methods: {
+    show() {
+      this.$refs[this.modalId].show();
+    },
     setFile(file) {
       this.file = file;
 
@@ -206,6 +209,7 @@ export default {
 <template>
   <gl-form>
     <gl-modal
+      :ref="modalId"
       :modal-id="modalId"
       :title="modalTitle"
       :action-primary="primaryOptions"

ee/spec/frontend/repository/components/blob_button_group_spec.js

@@ -13,6 +13,7 @@ const DEFAULT_PROPS = {
   projectPath: 'some/project/path',
   isLocked: false,
   canLock: true,
+  showForkSuggestion: false,
 };
 
 const DEFAULT_INJECT = {

spec/frontend/repository/components/blob_button_group_spec.js

 import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import DeleteBlobModal from '~/repository/components/delete_blob_modal.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
@@ -16,6 +15,7 @@ const DEFAULT_PROPS = {
   projectPath: 'some/project/path',
   isLocked: false,
   canLock: true,
+  showForkSuggestion: false,
 };
 
 const DEFAULT_INJECT = {
@@ -27,7 +27,7 @@ describe('BlobButtonGroup component', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(BlobButtonGroup, {
+    wrapper = mountExtended(BlobButtonGroup, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
@@ -35,9 +35,6 @@ describe('BlobButtonGroup component', () => {
       provide: {
         ...DEFAULT_INJECT,
       },
-      directives: {
-        GlModal: createMockDirective(),
-      },
     });
   };
 
@@ -47,7 +44,8 @@ describe('BlobButtonGroup component', () => {
 
   const findDeleteBlobModal = () => wrapper.findComponent(DeleteBlobModal);
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
-  const findReplaceButton = () => wrapper.find('[data-testid="replace"]');
+  const findDeleteButton = () => wrapper.findByTestId('delete');
+  const findReplaceButton = () => wrapper.findByTestId('replace');
 
   it('renders component', () => {
     createComponent();
@@ -63,6 +61,8 @@ describe('BlobButtonGroup component', () => {
   describe('buttons', () => {
     beforeEach(() => {
       createComponent();
+      jest.spyOn(findUploadBlobModal().vm, 'show');
+      jest.spyOn(findDeleteBlobModal().vm, 'show');
     });
 
     it('renders both the replace and delete button', () => {
@@ -75,10 +75,37 @@ describe('BlobButtonGroup component', () => {
     });
 
     it('triggers the UploadBlobModal from the replace button', () => {
-      const { value } = getBinding(findReplaceButton().element, 'gl-modal');
-      const modalId = findUploadBlobModal().props('modalId');
+      findReplaceButton().trigger('click');
+
+      expect(findUploadBlobModal().vm.show).toHaveBeenCalled();
+    });
+
+    it('triggers the DeleteBlobModal from the delete button', () => {
+      findDeleteButton().trigger('click');
+
+      expect(findDeleteBlobModal().vm.show).toHaveBeenCalled();
+    });
+
+    describe('showForkSuggestion set to true', () => {
+      beforeEach(() => {
+        createComponent({ showForkSuggestion: true });
+        jest.spyOn(findUploadBlobModal().vm, 'show');
+        jest.spyOn(findDeleteBlobModal().vm, 'show');
+      });
+
+      it('does not trigger the UploadBlobModal from the replace button', () => {
+        findReplaceButton().trigger('click');
+
+        expect(findUploadBlobModal().vm.show).not.toHaveBeenCalled();
+        expect(wrapper.emitted().fork).toBeTruthy();
+      });
+
+      it('does not trigger the DeleteBlobModal from the delete button', () => {
+        findDeleteButton().trigger('click');
 
-      expect(modalId).toEqual(value);
+        expect(findDeleteBlobModal().vm.show).not.toHaveBeenCalled();
+        expect(wrapper.emitted().fork).toBeTruthy();
+      });
     });
   });