Replaced browser confirm modal with GlModal for lock button

This commit solves: https://gitlab.com/gitlab-org/gitlab/-/issues/344120
it replaces a browser confirm modal
with GlModal for the file lock button.

Changelog: changed
EE: true

ee/app/assets/javascripts/repository/components/lock_button.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlModal } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { sprintf, __ } from '~/locale';
 import lockPathMutation from '~/repository/mutations/lock_path.mutation.graphql';
@@ -8,9 +8,13 @@ export default {
   i18n: {
     lock: __('Lock'),
     unlock: __('Unlock'),
+    modalTitle: __('Lock File?'),
+    actionPrimary: __('Okay'),
+    actionCancel: __('Cancel'),
   },
   components: {
     GlButton,
+    GlModal,
   },
   props: {
     name: {
@@ -36,6 +40,7 @@ export default {
   },
   data() {
     return {
+      isModalVisible: false,
       lockLoading: false,
       locked: this.isLocked,
     };
@@ -52,11 +57,14 @@ export default {
     },
   },
   methods: {
-    onLockToggle() {
-      // eslint-disable-next-line no-alert
-      if (window.confirm(this.lockConfirmText)) {
-        this.toggleLock();
-      }
+    hideModal() {
+      this.isModalVisible = false;
+    },
+    handleModalPrimary() {
+      this.toggleLock();
+    },
+    showModal() {
+      this.isModalVisible = true;
     },
     toggleLock() {
       this.lockLoading = true;
@@ -82,7 +90,23 @@ export default {
 </script>
 
 <template>
-  <gl-button :disabled="!canLock" :loading="lockLoading" @click="onLockToggle">
-    {{ lockButtonTitle }}
-  </gl-button>
+  <span>
+    <gl-button :disabled="!canLock" :loading="lockLoading" @click="showModal">
+      {{ lockButtonTitle }}
+    </gl-button>
+
+    <gl-modal
+      modal-id="lock-file-modal"
+      :visible="isModalVisible"
+      :title="$options.i18n.modalTitle"
+      :action-primary="{ text: $options.i18n.actionPrimary }"
+      :action-cancel="{ text: $options.i18n.actionCancel }"
+      @primary="handleModalPrimary"
+      @hide="hideModal"
+    >
+      <p>
+        {{ lockConfirmText }}
+      </p>
+    </gl-modal>
+  </span>
 </template>

ee/spec/frontend/repository/components/lock_button_spec.js

-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlModal } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -39,18 +39,17 @@ describe('LockButton component', () => {
   });
 
   describe('lock button', () => {
-    let confirmSpy;
     let lockMutationMock;
+    const mockEvent = { preventDefault: jest.fn() };
     const findLockButton = () => wrapper.find(GlButton);
+    const findModal = () => wrapper.findComponent(GlModal);
+    const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
+    const clickHide = () => findModal().vm.$emit('hide', mockEvent);
 
     beforeEach(() => {
-      confirmSpy = jest.spyOn(window, 'confirm');
-      confirmSpy.mockImplementation(jest.fn());
       lockMutationMock = jest.fn();
     });
 
-    afterEach(() => confirmSpy.mockRestore());
-
     it('disables the lock button if canLock is set to false', () => {
       createComponent({ canLock: false });
 
@@ -78,18 +77,24 @@ describe('LockButton component', () => {
       expect(findLockButton().props('loading')).toBe(true);
     });
 
-    it('displays a confirm dialog when the lock button is clicked', () => {
+    it('displays a confirm modal when the lock button is clicked', () => {
       createComponent();
       findLockButton().vm.$emit('click');
+      expect(findModal().text()).toBe('Are you sure you want to lock some_file.js?');
+    });
 
-      expect(confirmSpy).toHaveBeenCalledWith('Are you sure you want to lock some_file.js?');
+    it('should hide the confirm modal when a hide action is triggered', () => {
+      createComponent();
+      findLockButton().vm.$emit('click');
+      expect(wrapper.vm.isModalVisible).toBe(true);
+      clickHide();
+      expect(wrapper.vm.isModalVisible).toBe(false);
     });
 
-    it('executes a lock mutation once lock is confirmed', () => {
-      confirmSpy.mockReturnValue(true);
+    it('executes a lock mutation once lock is confirmed', async () => {
       createComponent({}, lockMutationMock);
       findLockButton().vm.$emit('click');
-
+      clickSubmit();
       expect(lockMutationMock).toHaveBeenCalledWith({
         filePath: 'some/path',
         lock: true,
@@ -98,7 +103,6 @@ describe('LockButton component', () => {
     });
 
     it('does not execute a lock mutation if lock not confirmed', () => {
-      confirmSpy.mockReturnValue(false);
       createComponent({}, lockMutationMock);
       findLockButton().vm.$emit('click');
 

locale/gitlab.pot

@@ -21420,6 +21420,9 @@ msgstr ""
 msgid "Lock %{issuableDisplayName}"
 msgstr ""
 
+msgid "Lock File?"
+msgstr ""
+
 msgid "Lock memberships to LDAP synchronization"
 msgstr ""