Delete Epic Board

Add ability to delete an epic board from boards selector dropdown

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

@@ -163,6 +163,9 @@ export default {
     currentMutation() {
       return this.board.id ? updateBoardMutation : createBoardMutation;
     },
+    deleteMutation() {
+      return destroyBoardMutation;
+    },
     baseMutationVariables() {
       const { board } = this;
       const variables = {
@@ -244,17 +247,20 @@ export default {
 
       return this.boardUpdateResponse(response.data);
     },
+    async deleteBoard() {
+      await this.$apollo.mutate({
+        mutation: this.deleteMutation,
+        variables: {
+          id: fullBoardId(this.board.id),
+        },
+      });
+    },
     async submit() {
       if (this.board.name.length === 0) return;
       this.isLoading = true;
       if (this.isDeleteForm) {
         try {
-          await this.$apollo.mutate({
-            mutation: destroyBoardMutation,
-            variables: {
-              id: fullBoardId(this.board.id),
-            },
-          });
+          await this.deleteBoard();
           visitUrl(this.rootPath);
         } catch {
           Flash(this.$options.i18n.deleteErrorMessage);

ee/app/assets/javascripts/boards/components/board_form.vue

@@ -3,18 +3,17 @@
 // extends a valid Vue single file component.
 /* eslint-disable @gitlab/no-runtime-template-compiler */
 import { mapGetters } from 'vuex';
+import { fullBoardId } from '~/boards/boards_util';
 import BoardFormFoss from '~/boards/components/board_form.vue';
 import { fullEpicBoardId } from '../boards_util';
 import createEpicBoardMutation from '../graphql/epic_board_create.mutation.graphql';
+import destroyEpicBoardMutation from '../graphql/epic_board_destroy.mutation.graphql';
 import updateEpicBoardMutation from '../graphql/epic_board_update.mutation.graphql';
 
 export default {
   extends: BoardFormFoss,
   computed: {
     ...mapGetters(['isEpicBoard']),
-    epicBoardCreateQuery() {
-      return createEpicBoardMutation;
-    },
     currentEpicBoardMutation() {
       return this.board.id ? updateEpicBoardMutation : createEpicBoardMutation;
     },
@@ -53,6 +52,14 @@ export default {
         ? this.epicBoardUpdateResponse(response.data)
         : this.boardUpdateResponse(response.data);
     },
+    async deleteBoard() {
+      await this.$apollo.mutate({
+        mutation: this.isEpicBoard ? destroyEpicBoardMutation : this.deleteMutation,
+        variables: {
+          id: this.isEpicBoard ? fullEpicBoardId(this.board.id) : fullBoardId(this.board.id),
+        },
+      });
+    },
   },
 };
 </script>

ee/app/assets/javascripts/boards/components/boards_selector.vue

@@ -15,7 +15,7 @@ export default {
       return this.isEpicBoard || this.multipleIssueBoardsAvailable;
     },
     showDelete() {
-      return this.boards.length > 1 && !this.isEpicBoard;
+      return this.boards.length > 1;
     },
   },
   methods: {

ee/app/assets/javascripts/boards/graphql/epic_board_destroy.mutation.graphql

+mutation destroyEpicBoard($id: BoardsEpicBoardID!) {
+  destroyEpicBoard(input: { id: $id }) {
+    epicBoard {
+      id
+    }
+  }
+}

ee/spec/features/epic_boards/multiple_epic_boards_spec.rb

@@ -54,6 +54,22 @@ RSpec.describe 'epic boards', :js do
 
       expect(page).to have_button('This is a new board')
     end
+
+    it 'deletes an epic board' do
+      in_boards_switcher_dropdown do
+        expect(page).to have_content(epic_board.name)
+        expect(page).to have_content(epic_board2.name)
+        click_button 'Delete board'
+      end
+
+      click_button 'Delete'
+      wait_for_requests
+
+      in_boards_switcher_dropdown do
+        expect(page).not_to have_content(epic_board.name)
+        expect(page).to have_content(epic_board2.name)
+      end
+    end
   end
 
   def visit_epic_boards_page

ee/spec/frontend/boards/components/board_form_spec.js

 import { GlModal } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 
 import BoardForm from 'ee/boards/components/board_form.vue';
 import createEpicBoardMutation from 'ee/boards/graphql/epic_board_create.mutation.graphql';
+import destroyEpicBoardMutation from 'ee/boards/graphql/epic_board_destroy.mutation.graphql';
 import updateEpicBoardMutation from 'ee/boards/graphql/epic_board_update.mutation.graphql';
 
 import { TEST_HOST } from 'helpers/test_constants';
@@ -19,8 +21,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
 }));
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const currentBoard = {
   id: 1,
@@ -68,7 +69,6 @@ describe('BoardForm', () => {
 
   const createComponent = (props) => {
     wrapper = shallowMount(BoardForm, {
-      localVue,
       propsData: { ...defaultProps, ...props },
       provide: {
         rootPath: 'root',
@@ -227,4 +227,49 @@ describe('BoardForm', () => {
       expect(createFlash).toHaveBeenCalled();
     });
   });
+
+  describe('when deleting an epic board', () => {
+    it('passes correct primary action text and variant', () => {
+      createComponent({ canAdminBoard: true, currentPage: formType.delete });
+      expect(findModalActionPrimary().text).toBe('Delete');
+      expect(findModalActionPrimary().attributes[0].variant).toBe('danger');
+    });
+
+    it('renders delete confirmation message', () => {
+      createComponent({ canAdminBoard: true, currentPage: formType.delete });
+      expect(findDeleteConfirmation().exists()).toBe(true);
+    });
+
+    it('calls a correct GraphQL mutation and redirects to correct page after deleting board', async () => {
+      mutate = jest.fn().mockResolvedValue({});
+      createComponent({ canAdminBoard: true, currentPage: formType.delete });
+      findModal().vm.$emit('primary');
+
+      await waitForPromises();
+
+      expect(mutate).toHaveBeenCalledWith({
+        mutation: destroyEpicBoardMutation,
+        variables: {
+          id: 'gid://gitlab/Boards::EpicBoard/1',
+        },
+      });
+
+      await waitForPromises();
+      expect(visitUrl).toHaveBeenCalledWith('root');
+    });
+
+    it('shows an error flash if GraphQL mutation fails', async () => {
+      mutate = jest.fn().mockRejectedValue('Houston, we have a problem');
+      createComponent({ canAdminBoard: true, currentPage: formType.delete });
+      findModal().vm.$emit('primary');
+
+      await waitForPromises();
+
+      expect(mutate).toHaveBeenCalled();
+
+      await waitForPromises();
+      expect(visitUrl).not.toHaveBeenCalled();
+      expect(createFlash).toHaveBeenCalled();
+    });
+  });
 });