Merge branch...

Merge branch '344207-replace-data-confirm-modals-with-glmodal-in-app-views-admin-applications-_delete_form-html' into 'master'

Replace `data-confirm` modal with `GlModal` in `app/views/admin/applications/_delete_form.html.haml`

See merge request gitlab-org/gitlab!80799

app/assets/javascripts/admin/applications/components/delete_application.vue

+<script>
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+
+export default {
+  components: {
+    GlModal,
+    GlSprintf,
+  },
+  data() {
+    return {
+      name: '',
+      path: '',
+      buttons: [],
+    };
+  },
+  mounted() {
+    this.buttons = document.querySelectorAll('.js-application-delete-button');
+
+    this.buttons.forEach((button) => button.addEventListener('click', this.buttonEvent));
+  },
+  destroy() {
+    this.buttons.forEach((button) => button.removeEventListener('click', this.buttonEvent));
+  },
+  methods: {
+    buttonEvent(e) {
+      e.preventDefault();
+      this.show(e.target.dataset);
+    },
+    show(dataset) {
+      const { name, path } = dataset;
+
+      this.name = name;
+      this.path = path;
+
+      this.$refs.deleteModal.show();
+    },
+    deleteApplication() {
+      this.$refs.deleteForm.submit();
+    },
+  },
+  i18n: {
+    destroy: __('Destroy'),
+    title: __('Confirm destroy application'),
+    body: __('Are you sure that you want to destroy %{application}'),
+  },
+  modal: {
+    actionPrimary: {
+      text: __('Destroy'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
+  },
+  csrf,
+};
+</script>
+<template>
+  <gl-modal
+    ref="deleteModal"
+    :title="$options.i18n.title"
+    :action-primary="$options.modal.actionPrimary"
+    :action-secondary="$options.modal.actionSecondary"
+    modal-id="delete-application-modal"
+    size="sm"
+    @primary="deleteApplication"
+    ><gl-sprintf :message="$options.i18n.body">
+      <template #application>
+        <strong>{{ name }}</strong>
+      </template></gl-sprintf
+    >
+    <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>
+</template>

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

+import Vue from 'vue';
+import DeleteApplication from './components/delete_application.vue';
+
+export default () => {
+  const el = document.querySelector('.js-application-delete-modal');
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(DeleteApplication);
+    },
+  });
+};

app/assets/javascripts/pages/admin/applications/index.js

+import initApplicationDeleteButtons from '~/admin/applications';
+
+initApplicationDeleteButtons();

app/views/admin/applications/_delete_form.html.haml

-- submit_btn_css ||= 'gl-button btn btn-danger btn-sm'
-= form_tag admin_application_path(application) do
-  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
-  = submit_tag 'Destroy', class: submit_btn_css, data: { confirm: _('Are you sure?') }
+
+- submit_btn_css ||= 'gl-button btn btn-danger btn-sm js-application-delete-button'
+%button{ class: submit_btn_css, data: { path: admin_application_path(application), name: application.name } }
+  = _('Destroy')
+

app/views/admin/applications/index.html.haml

@@ -33,3 +33,5 @@
           %td= render 'delete_form', application: application
 
 = paginate @applications, theme: 'gitlab'
+
+.js-application-delete-modal

locale/gitlab.pot

@@ -4696,6 +4696,9 @@ msgstr ""
 msgid "Are you sure that you want to archive this project?"
 msgstr ""
 
+msgid "Are you sure that you want to destroy %{application}"
+msgstr ""
+
 msgid "Are you sure that you want to unarchive this project?"
 msgstr ""
 
@@ -9284,6 +9287,9 @@ msgstr ""
 msgid "Confirm approval"
 msgstr ""
 
+msgid "Confirm destroy application"
+msgstr ""
+
 msgid "Confirm new password"
 msgstr ""
 

spec/frontend/admin/applications/components/__snapshots__/delete_application_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeleteApplication the modal component form matches the snapshot 1`] = `
+<form
+  action="application/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/applications/components/delete_application_spec.js

+import { GlModal, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import DeleteApplication from '~/admin/applications/components/delete_application.vue';
+
+const path = 'application/path/1';
+const name = 'Application name';
+
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
+describe('DeleteApplication', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(DeleteApplication, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findForm = () => wrapper.find('form');
+
+  beforeEach(() => {
+    setFixtures(`
+      <button class="js-application-delete-button" data-path="${path}" data-name="${name}">Destroy</button>
+    `);
+
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('the modal component', () => {
+    beforeEach(() => {
+      wrapper.vm.$refs.deleteModal.show = jest.fn();
+      document.querySelector('.js-application-delete-button').click();
+    });
+
+    it('displays the modal component', () => {
+      const modal = findModal();
+
+      expect(modal.exists()).toBe(true);
+      expect(modal.props('title')).toBe('Confirm destroy application');
+      expect(modal.text()).toBe(`Are you sure that you want to destroy ${name}`);
+    });
+
+    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();
+        });
+      });
+    });
+  });
+});

spec/support/shared_examples/features/manage_applications_shared_examples.rb

@@ -5,7 +5,7 @@ RSpec.shared_examples 'manage applications' do
   let_it_be(:application_name_changed) { "#{application_name} changed" }
   let_it_be(:application_redirect_uri) { 'https://foo.bar' }
 
-  it 'allows user to manage applications' do
+  it 'allows user to manage applications', :js do
     visit new_application_path
 
     expect(page).to have_content 'Add new application'