Merge branch '205900-vue-confirm-modal' into 'master'

Generic Confirm Modal in JS

Closes #205900

See merge request gitlab-org/gitlab!25471

app/assets/javascripts/confirm_modal.js

+import Vue from 'vue';
+import ConfirmModal from '~/vue_shared/components/confirm_modal.vue';
+
+const mountConfirmModal = button => {
+  const props = {
+    path: button.dataset.path,
+    method: button.dataset.method,
+    modalAttributes: JSON.parse(button.dataset.modalAttributes),
+  };
+
+  return new Vue({
+    render(h) {
+      return h(ConfirmModal, { props });
+    },
+  }).$mount();
+};
+
+export default () => {
+  document.getElementsByClassName('js-confirm-modal-button').forEach(button => {
+    button.addEventListener('click', e => {
+      e.preventDefault();
+
+      mountConfirmModal(button);
+    });
+  });
+};

app/assets/javascripts/vue_shared/components/confirm_modal.vue

+<script>
+import { GlModal } from '@gitlab/ui';
+import csrf from '~/lib/utils/csrf';
+
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    modalAttributes: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    method: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isDismissed: false,
+    };
+  },
+  mounted() {
+    this.openModal();
+  },
+  methods: {
+    openModal() {
+      this.$refs.modal.show();
+    },
+    submitModal() {
+      this.$refs.form.requestSubmit();
+    },
+    dismiss() {
+      this.isDismissed = true;
+    },
+  },
+  csrf,
+};
+</script>
+
+<template>
+  <gl-modal
+    v-if="!isDismissed"
+    ref="modal"
+    v-bind="modalAttributes"
+    @primary="submitModal"
+    @canceled="dismiss"
+  >
+    <form ref="form" :action="path" method="post">
+      <!-- Rails workaround for <form method="delete" />
+      https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/features/method.coffee
+      -->
+      <input type="hidden" name="_method" :value="method" />
+      <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
+      <div>{{ modalAttributes.message }}</div>
+    </form>
+  </gl-modal>
+</template>

spec/frontend/confirm_modal_spec.js

+import Vue from 'vue';
+import initConfirmModal from '~/confirm_modal';
+import { TEST_HOST } from 'helpers/test_constants';
+
+describe('ConfirmModal', () => {
+  const buttons = [
+    {
+      path: `${TEST_HOST}/1`,
+      method: 'delete',
+      modalAttributes: {
+        modalId: 'geo-entry-removal-modal',
+        title: 'Remove tracking database entry',
+        message: 'Tracking database entry will be removed. Are you sure?',
+        okVariant: 'danger',
+        okTitle: 'Remove entry',
+      },
+    },
+    {
+      path: `${TEST_HOST}/1`,
+      method: 'post',
+      modalAttributes: {
+        modalId: 'geo-entry-removal-modal',
+        title: 'Update tracking database entry',
+        message: 'Tracking database entry will be updated. Are you sure?',
+        okVariant: 'success',
+        okTitle: 'Update entry',
+      },
+    },
+  ];
+
+  beforeEach(() => {
+    const buttonContainer = document.createElement('div');
+
+    buttons.forEach(x => {
+      const button = document.createElement('button');
+      button.setAttribute('class', 'js-confirm-modal-button');
+      button.setAttribute('data-path', x.path);
+      button.setAttribute('data-method', x.method);
+      button.setAttribute('data-modal-attributes', JSON.stringify(x.modalAttributes));
+      button.innerHTML = 'Action';
+      buttonContainer.appendChild(button);
+    });
+
+    document.body.appendChild(buttonContainer);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const findJsHooks = () => document.querySelectorAll('.js-confirm-modal-button');
+  const findModal = () => document.querySelector('.gl-modal');
+  const findModalOkButton = (modal, variant) =>
+    modal.querySelector(`.modal-footer .btn-${variant}`);
+  const findModalCancelButton = modal => modal.querySelector('.modal-footer .btn-secondary');
+
+  const serializeModal = (modal, buttonIndex) => {
+    const { modalAttributes } = buttons[buttonIndex];
+
+    return {
+      path: modal.querySelector('form').action,
+      method: modal.querySelector('input[name="_method"]').value,
+      modalAttributes: {
+        modalId: modal.id,
+        title: modal.querySelector('.modal-title').innerHTML,
+        message: modal.querySelector('.modal-body div').innerHTML,
+        okVariant: [...findModalOkButton(modal, modalAttributes.okVariant).classList]
+          .find(x => x.match('btn-'))
+          .replace('btn-', ''),
+        okTitle: findModalOkButton(modal, modalAttributes.okVariant).innerHTML,
+      },
+    };
+  };
+
+  it('starts with only JsHooks', () => {
+    expect(findJsHooks()).toHaveLength(buttons.length);
+    expect(findModal()).not.toExist();
+  });
+
+  describe('when button clicked', () => {
+    beforeEach(() => {
+      initConfirmModal();
+      findJsHooks()
+        .item(0)
+        .click();
+    });
+
+    it('does not replace JsHook with GlModal', () => {
+      expect(findJsHooks()).toHaveLength(buttons.length);
+    });
+
+    describe('GlModal', () => {
+      it('is rendered', () => {
+        expect(findModal()).toExist();
+      });
+
+      describe('Cancel Button', () => {
+        beforeEach(() => {
+          findModalCancelButton(findModal()).click();
+
+          return Vue.nextTick();
+        });
+
+        it('closes the modal', () => {
+          expect(findModal()).not.toExist();
+        });
+      });
+    });
+  });
+
+  describe.each`
+    index
+    ${0}
+    ${1}
+  `(`when multiple buttons exist`, ({ index }) => {
+    beforeEach(() => {
+      initConfirmModal();
+      findJsHooks()
+        .item(index)
+        .click();
+    });
+
+    it('correct props are passed to gl-modal', () => {
+      expect(serializeModal(findModal(), index)).toEqual(buttons[index]);
+    });
+  });
+});

spec/frontend/vue_shared/components/confirm_modal_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import { TEST_HOST } from 'helpers/test_constants';
+import ConfirmModal from '~/vue_shared/components/confirm_modal.vue';
+
+describe('vue_shared/components/confirm_modal', () => {
+  const testModalProps = {
+    path: `${TEST_HOST}/1`,
+    method: 'delete',
+    modalAttributes: {
+      modalId: 'test-confirm-modal',
+      title: 'Are you sure?',
+      message: 'This will remove item 1',
+      okVariant: 'danger',
+      okTitle: 'Remove item',
+    },
+  };
+
+  const actionSpies = {
+    openModal: jest.fn(),
+  };
+
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(ConfirmModal, {
+      propsData: {
+        ...testModalProps,
+        ...props,
+      },
+      methods: {
+        ...actionSpies,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findModal = () => wrapper.find(GlModal);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('calls openModal on mount', () => {
+      expect(actionSpies.openModal).toHaveBeenCalled();
+    });
+
+    it('renders GlModal', () => {
+      expect(findModal().exists()).toBeTruthy();
+    });
+  });
+
+  describe('methods', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    describe('submitModal', () => {
+      beforeEach(() => {
+        wrapper.vm.$refs.form.requestSubmit = jest.fn();
+      });
+
+      it('calls requestSubmit', () => {
+        wrapper.vm.submitModal();
+        expect(wrapper.vm.$refs.form.requestSubmit).toHaveBeenCalled();
+      });
+    });
+
+    describe('dismiss', () => {
+      it('removes gl-modal', () => {
+        expect(findModal().exists()).toBeTruthy();
+        wrapper.vm.dismiss();
+
+        return wrapper.vm.$nextTick(() => {
+          expect(findModal().exists()).toBeFalsy();
+        });
+      });
+    });
+  });
+});