Replace window.confirm with GlModal for board setting sidebar

This commit replaces window.confirm dialog with
a GlModal for the reset of the board setting sidebar.

Changelog: changed

app/assets/javascripts/boards/components/board_settings_sidebar.vue

 <script>
-import { GlButton, GlDrawer, GlLabel } from '@gitlab/ui';
+import { GlButton, GlDrawer, GlLabel, GlModal, GlModalDirective } from '@gitlab/ui';
 import { MountingPortal } from 'portal-vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { LIST, ListType, ListTypeTitles } from '~/boards/constants';
@@ -11,8 +11,14 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   listSettingsText: __('List settings'),
+  i18n: {
+    modalAction: __('Remove list'),
+    modalCopy: __('Are you sure you want to remove this list?'),
+    modalCancel: __('Cancel'),
+  },
   components: {
     GlButton,
+    GlModal,
     GlDrawer,
     GlLabel,
     MountingPortal,
@@ -21,6 +27,9 @@ export default {
     BoardSettingsListTypes: () =>
       import('ee_component/boards/components/board_settings_list_types.vue'),
   },
+  directives: {
+    GlModal: GlModalDirective,
+  },
   mixins: [glFeatureFlagMixin(), Tracking.mixin()],
   inject: ['canAdminList', 'scopedLabelsAvailable'],
   inheritAttrs: false,
@@ -29,6 +38,7 @@ export default {
       ListType,
     };
   },
+  modalId: 'board-settings-sidebar-modal',
   computed: {
     ...mapGetters(['isSidebarOpen', 'isEpicBoard']),
     ...mapState(['activeId', 'sidebarType', 'boardLists']),
@@ -59,16 +69,16 @@ export default {
   },
   methods: {
     ...mapActions(['unsetActiveId', 'removeList']),
+    handleModalPrimary() {
+      this.deleteBoard();
+    },
     showScopedLabels(label) {
       return this.scopedLabelsAvailable && isScopedLabel(label);
     },
     deleteBoard() {
-      // eslint-disable-next-line no-alert
-      if (window.confirm(__('Are you sure you want to remove this list?'))) {
-        this.track('click_button', { label: 'remove_list' });
-        this.removeList(this.activeId);
-        this.unsetActiveId();
-      }
+      this.track('click_button', { label: 'remove_list' });
+      this.removeList(this.activeId);
+      this.unsetActiveId();
     },
   },
 };
@@ -92,11 +102,10 @@ export default {
       <template #header>
         <div v-if="canAdminList && activeList.id" class="gl-mt-3">
           <gl-button
+            v-gl-modal="$options.modalId"
             variant="danger"
             category="secondary"
             size="small"
-            data-testid="remove-list"
-            @click.stop="deleteBoard"
             >{{ __('Remove list') }}
           </gl-button>
         </div>
@@ -122,5 +131,21 @@ export default {
         />
       </template>
     </gl-drawer>
+    <gl-modal
+      :modal-id="$options.modalId"
+      :title="$options.i18n.modalAction"
+      size="sm"
+      :action-primary="{
+        text: $options.i18n.modalAction,
+        attributes: [{ variant: 'danger' }],
+      }"
+      :action-secondary="{
+        text: $options.i18n.modalCancel,
+        attributes: [{ variant: 'default' }],
+      }"
+      @primary="handleModalPrimary"
+    >
+      <p>{{ $options.i18n.modalCopy }}</p>
+    </gl-modal>
   </mounting-portal>
 </template>

ee/spec/features/epic_boards/epic_boards_spec.rb

@@ -153,7 +153,11 @@ RSpec.describe 'epic boards', :js do
           click_button 'List settings'
         end
 
-        accept_confirm { click_button 'Remove list' }
+        click_button 'Remove list'
+
+        page.within('.modal') do
+          click_button('Remove list', match: :first)
+        end
 
         expect(page).not_to have_content(label.name)
       end

spec/features/boards/boards_spec.rb

@@ -583,7 +583,11 @@ RSpec.describe 'Project issue boards', :js do
     end
 
     page.within(find('.js-board-settings-sidebar')) do
-      accept_confirm { find('[data-testid="remove-list"]').click }
+      click_button 'Remove list'
+    end
+
+    page.within('.modal') do
+      click_button 'Remove list'
     end
   end
 

spec/frontend/boards/components/board_settings_sidebar_spec.js

-import { GlDrawer, GlLabel } from '@gitlab/ui';
+import { GlDrawer, GlLabel, GlModal, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { MountingPortal } from 'portal-vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
@@ -20,8 +21,7 @@ describe('BoardSettingsSidebar', () => {
   const labelTitle = mockLabelList.label.title;
   const labelColor = mockLabelList.label.color;
   const listId = mockLabelList.id;
-
-  const findRemoveButton = () => wrapper.findByTestId('remove-list');
+  const modalID = 'board-settings-sidebar-modal';
 
   const createComponent = ({
     canAdminList = false,
@@ -46,6 +46,9 @@ describe('BoardSettingsSidebar', () => {
           canAdminList,
           scopedLabelsAvailable: false,
         },
+        directives: {
+          GlModal: createMockDirective(),
+        },
         stubs: {
           GlDrawer: stubComponent(GlDrawer, {
             template: '<div><slot name="header"></slot><slot></slot></div>',
@@ -56,6 +59,8 @@ describe('BoardSettingsSidebar', () => {
   };
   const findLabel = () => wrapper.find(GlLabel);
   const findDrawer = () => wrapper.find(GlDrawer);
+  const findModal = () => wrapper.find(GlModal);
+  const findRemoveButton = () => wrapper.find(GlButton);
 
   afterEach(() => {
     jest.restoreAllMocks();
@@ -161,5 +166,16 @@ describe('BoardSettingsSidebar', () => {
 
       expect(findRemoveButton().exists()).toBe(true);
     });
+
+    it('has the correct ID on the button', () => {
+      createComponent({ canAdminList: true, activeId: listId, list: mockLabelList });
+      const binding = getBinding(findRemoveButton().element, 'gl-modal');
+      expect(binding.value).toBe(modalID);
+    });
+
+    it('has the correct ID on the modal', () => {
+      createComponent({ canAdminList: true, activeId: listId, list: mockLabelList });
+      expect(findModal().props('modalId')).toBe(modalID);
+    });
   });
 });