1 files changed, 34 insertions, 9 deletions

diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
index 6b7c08d05a5..24071c6f0b4 100644
--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -1,5 +1,5 @@
 <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>