Merge branch '323210-vue-blob-header-delete-button' into 'master'

Update blob header to support delete button group

See merge request gitlab-org/gitlab!64666

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

 <script>
-import { GlButton, GlModalDirective } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlModalDirective } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { sprintf, __ } from '~/locale';
 import getRefMixin from '../mixins/get_ref';
@@ -9,8 +9,10 @@ export default {
   i18n: {
     replace: __('Replace'),
     replacePrimaryBtnText: __('Replace file'),
+    delete: __('Delete'),
   },
   components: {
+    GlButtonGroup,
     GlButton,
     UploadBlobModal,
   },
@@ -48,7 +50,7 @@ export default {
     replaceModalId() {
       return uniqueId('replace-modal');
     },
-    title() {
+    replaceModalTitle() {
       return sprintf(__('Replace %{name}'), { name: this.name });
     },
   },
@@ -57,13 +59,16 @@ export default {
 
 <template>
   <div class="gl-mr-3">
-    <gl-button v-gl-modal="replaceModalId">
-      {{ $options.i18n.replace }}
-    </gl-button>
+    <gl-button-group>
+      <gl-button v-gl-modal="replaceModalId">
+        {{ $options.i18n.replace }}
+      </gl-button>
+      <gl-button>{{ $options.i18n.delete }}</gl-button>
+    </gl-button-group>
     <upload-blob-modal
       :modal-id="replaceModalId"
-      :modal-title="title"
-      :commit-message="title"
+      :modal-title="replaceModalTitle"
+      :commit-message="replaceModalTitle"
       :target-branch="targetBranch || ref"
       :original-branch="originalBranch || ref"
       :can-push-code="canPushCode"

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

@@ -7,14 +7,14 @@ import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constant
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
+import BlobButtonGroup from './blob_button_group.vue';
 import BlobEdit from './blob_edit.vue';
-import BlobReplace from './blob_replace.vue';
 
 export default {
   components: {
     BlobHeader,
     BlobEdit,
-    BlobReplace,
+    BlobButtonGroup,
     BlobContent,
     GlLoadingIcon,
   },
@@ -132,7 +132,7 @@ export default {
       >
         <template #actions>
           <blob-edit :edit-path="blobInfo.editBlobPath" :web-ide-path="blobInfo.ideEditPath" />
-          <blob-replace
+          <blob-button-group
             v-if="isLoggedIn"
             :path="path"
             :name="blobInfo.name"

spec/frontend/repository/components/blob_replace_spec.js → spec/frontend/repository/components/blob_button_group_spec.js

+import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import BlobReplace from '~/repository/components/blob_replace.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+
+import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 
 const DEFAULT_PROPS = {
@@ -14,11 +17,11 @@ const DEFAULT_INJECT = {
   originalBranch: 'master',
 };
 
-describe('BlobReplace component', () => {
+describe('BlobButtonGroup component', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(BlobReplace, {
+    wrapper = shallowMount(BlobButtonGroup, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
@@ -26,6 +29,9 @@ describe('BlobReplace component', () => {
       provide: {
         ...DEFAULT_INJECT,
       },
+      directives: {
+        GlModal: createMockDirective(),
+      },
     });
   };
 
@@ -34,6 +40,7 @@ describe('BlobReplace component', () => {
   });
 
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
+  const findReplaceButton = () => wrapper.findAll(GlButton).at(0);
 
   it('renders component', () => {
     createComponent();
@@ -46,6 +53,28 @@ describe('BlobReplace component', () => {
     });
   });
 
+  describe('buttons', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders both the replace and delete button', () => {
+      expect(wrapper.findAll(GlButton)).toHaveLength(2);
+    });
+
+    it('renders the buttons in the correct order', () => {
+      expect(wrapper.findAll(GlButton).at(0).text()).toBe('Replace');
+      expect(wrapper.findAll(GlButton).at(1).text()).toBe('Delete');
+    });
+
+    it('triggers the UploadBlobModal from the replace button', () => {
+      const { value } = getBinding(findReplaceButton().element, 'gl-modal');
+      const modalId = findUploadBlobModal().props('modalId');
+
+      expect(modalId).toEqual(value);
+    });
+  });
+
   it('renders UploadBlobModal', () => {
     createComponent();
 

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -3,9 +3,9 @@ import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
+import BlobButtonGroup from '~/repository/components/blob_button_group.vue';
 import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import BlobEdit from '~/repository/components/blob_edit.vue';
-import BlobReplace from '~/repository/components/blob_replace.vue';
 
 let wrapper;
 const simpleMockData = {
@@ -80,7 +80,7 @@ describe('Blob content viewer component', () => {
   const findBlobHeader = () => wrapper.findComponent(BlobHeader);
   const findBlobEdit = () => wrapper.findComponent(BlobEdit);
   const findBlobContent = () => wrapper.findComponent(BlobContent);
-  const findBlobReplace = () => wrapper.findComponent(BlobReplace);
+  const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
 
   afterEach(() => {
     wrapper.destroy();
@@ -200,7 +200,7 @@ describe('Blob content viewer component', () => {
       });
     });
 
-    describe('BlobReplace', () => {
+    describe('BlobButtonGroup', () => {
       const { name, path } = simpleMockData;
 
       it('renders component', async () => {
@@ -210,13 +210,13 @@ describe('Blob content viewer component', () => {
           mockData: { blobInfo: simpleMockData },
           stubs: {
             BlobContent: true,
-            BlobReplace: true,
+            BlobButtonGroup: true,
           },
         });
 
         await nextTick();
 
-        expect(findBlobReplace().props()).toMatchObject({
+        expect(findBlobButtonGroup().props()).toMatchObject({
           name,
           path,
         });
@@ -235,7 +235,7 @@ describe('Blob content viewer component', () => {
 
         await nextTick();
 
-        expect(findBlobReplace().exists()).toBe(false);
+        expect(findBlobButtonGroup().exists()).toBe(false);
       });
     });
   });