Refactor remove topic avatar

This commit replaces the topic remove
avatar confirm dialog with a gitlab-ui modal

Changelog: fixed

app/assets/javascripts/admin/topics/components/remove_avatar.vue

+<script>
+import { uniqueId } from 'lodash';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+
+export default {
+  components: {
+    GlButton,
+    GlModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  inject: {
+    path: {
+      default: '',
+    },
+  },
+  data() {
+    return {
+      modalId: uniqueId('remove-topic-avatar-'),
+    };
+  },
+  methods: {
+    deleteApplication() {
+      this.$refs.deleteForm.submit();
+    },
+  },
+  i18n: {
+    remove: __('Remove avatar'),
+    title: __('Confirm remove avatar'),
+    body: __('Avatar will be removed. Are you sure?'),
+  },
+  modal: {
+    actionPrimary: {
+      text: __('Remove'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
+  },
+  csrf,
+};
+</script>
+<template>
+  <div>
+    <gl-button v-gl-modal="modalId" variant="danger" category="secondary" class="gl-mt-2">{{
+      $options.i18n.remove
+    }}</gl-button>
+    <gl-modal
+      :title="$options.i18n.title"
+      :action-primary="$options.modal.actionPrimary"
+      :action-secondary="$options.modal.actionSecondary"
+      :modal-id="modalId"
+      size="sm"
+      @primary="deleteApplication"
+      >{{ $options.i18n.body }}
+      <form ref="deleteForm" method="post" :action="path">
+        <input type="hidden" name="_method" value="delete" />
+        <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
+      </form>
+    </gl-modal>
+  </div>
+</template>

app/assets/javascripts/admin/topics/index.js

+import Vue from 'vue';
+import RemoveAvatar from './components/remove_avatar.vue';
+
+export default () => {
+  const el = document.querySelector('.js-remove-topic-avatar');
+
+  if (!el) {
+    return false;
+  }
+
+  const { path } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      path,
+    },
+    render(h) {
+      return h(RemoveAvatar);
+    },
+  });
+};

app/assets/javascripts/pages/admin/topics/edit/index.js

@@ -2,7 +2,10 @@ import $ from 'jquery';
 import GLForm from '~/gl_form';
 import initFilePickers from '~/file_pickers';
 import ZenMode from '~/zen_mode';
+import initRemoveAvatar from '~/admin/topics';
 
 new GLForm($('.js-project-topic-form')); // eslint-disable-line no-new
 initFilePickers();
 new ZenMode(); // eslint-disable-line no-new
+
+initRemoveAvatar();

app/views/admin/topics/_form.html.haml

@@ -27,7 +27,7 @@
         = topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s90')
     = render 'shared/choose_avatar_button', f: f
     - if @topic.avatar?
-      = link_to _('Remove avatar'), admin_topic_avatar_path(@topic), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary gl-mt-2'
+      .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic) } }
 
   - if @topic.new_record?
     .form-actions

locale/gitlab.pot

@@ -9336,6 +9336,9 @@ msgstr ""
 msgid "Confirm new password"
 msgstr ""
 
+msgid "Confirm remove avatar"
+msgstr ""
+
 msgid "Confirm user"
 msgstr ""
 

spec/frontend/admin/topics/components/__snapshots__/remove_avatar_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RemoveAvatar the modal component form matches the snapshot 1`] = `
+<form
+  action="topic/path/1"
+  method="post"
+>
+  <input
+    name="_method"
+    type="hidden"
+    value="delete"
+  />
+   
+  <input
+    name="authenticity_token"
+    type="hidden"
+    value="mock-csrf-token"
+  />
+</form>
+`;

spec/frontend/admin/topics/components/remove_avatar_spec.js

+import { GlButton, GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import RemoveAvatar from '~/admin/topics/components/remove_avatar.vue';
+
+const modalID = 'fake-id';
+const path = 'topic/path/1';
+
+jest.mock('lodash/uniqueId', () => () => 'fake-id');
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
+describe('RemoveAvatar', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(RemoveAvatar, {
+      provide: {
+        path,
+      },
+      directives: {
+        GlModal: createMockDirective(),
+      },
+    });
+  };
+
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findForm = () => wrapper.find('form');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('the button component', () => {
+    it('displays the remove button', () => {
+      const button = findButton();
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Remove avatar');
+    });
+
+    it('contains the correct modal ID', () => {
+      const buttonModalId = getBinding(findButton().element, 'gl-modal').value;
+
+      expect(buttonModalId).toBe(modalID);
+    });
+  });
+
+  describe('the modal component', () => {
+    it('displays the modal component', () => {
+      const modal = findModal();
+
+      expect(modal.exists()).toBe(true);
+      expect(modal.props('title')).toBe('Confirm remove avatar');
+      expect(modal.text()).toBe('Avatar will be removed. Are you sure?');
+    });
+
+    it('contains the correct modal ID', () => {
+      expect(findModal().props('modalId')).toBe(modalID);
+    });
+
+    describe('form', () => {
+      it('matches the snapshot', () => {
+        expect(findForm().element).toMatchSnapshot();
+      });
+
+      describe('form submission', () => {
+        let formSubmitSpy;
+
+        beforeEach(() => {
+          formSubmitSpy = jest.spyOn(wrapper.vm.$refs.deleteForm, 'submit');
+          findModal().vm.$emit('primary');
+        });
+
+        it('submits the form on the modal primary action', () => {
+          expect(formSubmitSpy).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});