From 84ac02ef90d3c5567d38630a956caab564fd3ba9 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Tue, 22 Jun 2021 17:16:53 -0700
Subject: [PATCH] Update blob header to support delete button group

Part of issue: https://gitlab.com/gitlab-org/gitlab/-/issues/333773
---
 ...blob_replace.vue => blob_button_group.vue} | 19 ++++++----
 .../components/blob_content_viewer.vue        |  6 ++--
 ...lace_spec.js => blob_button_group_spec.js} | 35 +++++++++++++++++--
 .../components/blob_content_viewer_spec.js    | 12 +++----
 4 files changed, 53 insertions(+), 19 deletions(-)
 rename app/assets/javascripts/repository/components/{blob_replace.vue => blob_button_group.vue} (75%)
 rename spec/frontend/repository/components/{blob_replace_spec.js => blob_button_group_spec.js} (54%)

diff --git a/app/assets/javascripts/repository/components/blob_replace.vue b/app/assets/javascripts/repository/components/blob_button_group.vue
similarity index 75%
rename from app/assets/javascripts/repository/components/blob_replace.vue
rename to app/assets/javascripts/repository/components/blob_button_group.vue
index 91d7811eb6dbe2..424dc4529ffacd 100644
--- a/app/assets/javascripts/repository/components/blob_replace.vue
+++ b/app/assets/javascripts/repository/components/blob_button_group.vue
@@ -1,5 +1,5 @@
 <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"
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index aa94f9cefdfe84..9cf853e1b86edb 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/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"
diff --git a/spec/frontend/repository/components/blob_replace_spec.js b/spec/frontend/repository/components/blob_button_group_spec.js
similarity index 54%
rename from spec/frontend/repository/components/blob_replace_spec.js
rename to spec/frontend/repository/components/blob_button_group_spec.js
index 4a6f147da221bf..b9a11dd1270270 100644
--- a/spec/frontend/repository/components/blob_replace_spec.js
+++ b/spec/frontend/repository/components/blob_button_group_spec.js
@@ -1,5 +1,8 @@
+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();
 
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 5492fdd3065c10..bbfceb4ae5fcc6 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/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);
       });
     });
   });
-- 
GitLab