Generic Confirm Modal in JS

Currently, we cannot call GlModal from HAML very easily.
Throughout the backend there are countless uses of the browser
default confirm box.

This new component will be used to open the door to replace all
those instances of browser confirms with this.

An example of this being done can be found here:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/24808

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();
+        });
+      });
+    });
+  });
+});