Replace window.confirm with GlModal for registration token reset

This commit replaces window.confirm dialog with
a GlModal for the reset of the registration token.

Changelog: changed

app/assets/javascripts/runner/components/registration/registration_token_reset_dropdown_item.vue

 <script>
-import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { GlDropdownItem, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { TYPE_GROUP, TYPE_PROJECT } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
@@ -10,9 +10,17 @@ import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants';
 
 export default {
   name: 'RunnerRegistrationTokenReset',
+  i18n: {
+    modalTitle: __('Reset registration token'),
+    modalCopy: __('Are you sure you want to reset the registration token?'),
+  },
   components: {
     GlDropdownItem,
     GlLoadingIcon,
+    GlModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
   },
   inject: {
     groupId: {
@@ -22,6 +30,7 @@ export default {
       default: null,
     },
   },
+  modalID: 'token-reset-modal',
   props: {
     type: {
       type: String,
@@ -59,14 +68,10 @@ export default {
     },
   },
   methods: {
+    handleModalPrimary() {
+      this.resetToken();
+    },
     async resetToken() {
-      // TODO Replace confirmation with gl-modal
-      // See: https://gitlab.com/gitlab-org/gitlab/-/issues/333810
-      // eslint-disable-next-line no-alert
-      if (!window.confirm(__('Are you sure you want to reset the registration token?'))) {
-        return;
-      }
-
       this.loading = true;
       try {
         const {
@@ -106,8 +111,15 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown-item @click.capture.native.stop="resetToken">
+  <gl-dropdown-item v-gl-modal="$options.modalID">
     {{ __('Reset registration token') }}
+    <gl-modal
+      :modal-id="$options.modalID"
+      :title="$options.i18n.modalTitle"
+      @primary="handleModalPrimary"
+    >
+      <p>{{ $options.i18n.modalCopy }}</p>
+    </gl-modal>
     <gl-loading-icon v-if="loading" inline />
   </gl-dropdown-item>
 </template>

spec/features/admin/admin_runners_spec.rb

@@ -451,7 +451,9 @@ RSpec.describe "Admin Runners" do
         before do
           click_on 'Reset registration token'
 
-          page.accept_alert
+          within_modal do
+            click_button('OK', match: :first)
+          end
 
           wait_for_requests
         end

spec/frontend/runner/components/registration/registration_token_reset_dropdown_item_spec.js

-import { GlDropdownItem, GlLoadingIcon, GlToast } from '@gitlab/ui';
+import { GlDropdownItem, GlLoadingIcon, GlToast, GlModal } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -9,6 +9,7 @@ import RegistrationTokenResetDropdownItem from '~/runner/components/registration
 import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/runner/constants';
 import runnersRegistrationTokenResetMutation from '~/runner/graphql/runners_registration_token_reset.mutation.graphql';
 import { captureException } from '~/runner/sentry_utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
@@ -18,14 +19,18 @@ localVue.use(VueApollo);
 localVue.use(GlToast);
 
 const mockNewToken = 'NEW_TOKEN';
+const modalID = 'token-reset-modal';
 
 describe('RegistrationTokenResetDropdownItem', () => {
   let wrapper;
   let runnersRegistrationTokenResetMutationHandler;
   let showToast;
 
+  const mockEvent = { preventDefault: jest.fn() };
   const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
 
   const createComponent = ({ props, provide = {} } = {}) => {
     wrapper = shallowMount(RegistrationTokenResetDropdownItem, {
@@ -38,6 +43,9 @@ describe('RegistrationTokenResetDropdownItem', () => {
       apolloProvider: createMockApollo([
         [runnersRegistrationTokenResetMutation, runnersRegistrationTokenResetMutationHandler],
       ]),
+      directives: {
+        GlModal: createMockDirective(),
+      },
     });
 
     showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null;
@@ -54,8 +62,6 @@ describe('RegistrationTokenResetDropdownItem', () => {
     });
 
     createComponent();
-
-    jest.spyOn(window, 'confirm');
   });
 
   afterEach(() => {
@@ -66,6 +72,18 @@ describe('RegistrationTokenResetDropdownItem', () => {
     expect(findDropdownItem().exists()).toBe(true);
   });
 
+  describe('modal directive integration', () => {
+    it('has the correct ID on the dropdown', () => {
+      const binding = getBinding(findDropdownItem().element, 'gl-modal');
+
+      expect(binding.value).toBe(modalID);
+    });
+
+    it('has the correct ID on the modal', () => {
+      expect(findModal().props('modalId')).toBe(modalID);
+    });
+  });
+
   describe('On click and confirmation', () => {
     const mockGroupId = '11';
     const mockProjectId = '22';
@@ -82,9 +100,8 @@ describe('RegistrationTokenResetDropdownItem', () => {
           props: { type },
         });
 
-        window.confirm.mockReturnValueOnce(true);
-
         findDropdownItem().trigger('click');
+        clickSubmit();
         await waitForPromises();
       });
 
@@ -114,7 +131,6 @@ describe('RegistrationTokenResetDropdownItem', () => {
 
   describe('On click without confirmation', () => {
     beforeEach(async () => {
-      window.confirm.mockReturnValueOnce(false);
       findDropdownItem().vm.$emit('click');
       await waitForPromises();
     });
@@ -142,8 +158,8 @@ describe('RegistrationTokenResetDropdownItem', () => {
 
       runnersRegistrationTokenResetMutationHandler.mockRejectedValueOnce(new Error(mockErrorMsg));
 
-      window.confirm.mockReturnValueOnce(true);
       findDropdownItem().trigger('click');
+      clickSubmit();
       await waitForPromises();
 
       expect(createAlert).toHaveBeenLastCalledWith({
@@ -168,8 +184,8 @@ describe('RegistrationTokenResetDropdownItem', () => {
         },
       });
 
-      window.confirm.mockReturnValueOnce(true);
       findDropdownItem().trigger('click');
+      clickSubmit();
       await waitForPromises();
 
       expect(createAlert).toHaveBeenLastCalledWith({
@@ -184,8 +200,8 @@ describe('RegistrationTokenResetDropdownItem', () => {
 
   describe('Immediately after click', () => {
     it('shows loading state', async () => {
-      window.confirm.mockReturnValue(true);
       findDropdownItem().trigger('click');
+      clickSubmit();
       await nextTick();
 
       expect(findLoadingIcon().exists()).toBe(true);