Migrate `deleteBoard` board_store function to GraphQL mutation

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

@@ -10,6 +10,7 @@ import { fullLabelId, fullBoardId } from '../boards_util';
 import BoardConfigurationOptions from './board_configuration_options.vue';
 import updateBoardMutation from '../graphql/board_update.mutation.graphql';
 import createBoardMutation from '../graphql/board_create.mutation.graphql';
+import destroyBoardMutation from '../graphql/board_destroy.mutation.graphql';
 
 const boardDefaults = {
   id: false,
@@ -95,6 +96,9 @@ export default {
     fullPath: {
       default: '',
     },
+    rootPath: {
+      default: '',
+    },
   },
   data() {
     return {
@@ -221,8 +225,13 @@ export default {
       this.isLoading = true;
       if (this.isDeleteForm) {
         try {
-          await boardsStore.deleteBoard(this.currentBoard);
-          visitUrl(boardsStore.rootPath);
+          await this.$apollo.mutate({
+            mutation: destroyBoardMutation,
+            variables: {
+              id: fullBoardId(this.board.id),
+            },
+          });
+          visitUrl(this.rootPath);
         } catch {
           Flash(this.$options.i18n.deleteErrorMessage);
         } finally {

app/assets/javascripts/boards/graphql/board_destroy.mutation.graphql

+mutation destroyBoard($id: BoardID!) {
+  destroyBoard(input: { id: $id }) {
+    board {
+      id
+    }
+  }
+}

app/assets/javascripts/boards/index.js

@@ -336,5 +336,6 @@ export default () => {
 
   mountMultipleBoardsSwitcher({
     fullPath: $boardApp.dataset.fullPath,
+    rootPath: $boardApp.dataset.boardsEndpoint,
   });
 };

app/assets/javascripts/boards/mount_multiple_boards_switcher.js

@@ -37,6 +37,7 @@ export default (params = {}) => {
     },
     provide: {
       fullPath: params.fullPath,
+      rootPath: params.rootPath,
     },
     render(createElement) {
       return createElement(BoardsSelector, {

app/assets/javascripts/boards/stores/boards_store.js

@@ -753,10 +753,6 @@ const boardsStore = {
     return axios.get(this.state.endpoints.recentBoardsEndpoint);
   },
 
-  deleteBoard({ id }) {
-    return axios.delete(this.generateBoardsPath(id));
-  },
-
   setCurrentBoard(board) {
     this.state.currentBoard = board;
   },

changelogs/unreleased/244274-boards-migrate-deleteboard-board_store-function-to-vuex-action.yml

+---
+title: Migrate `deleteBoard` board_store function to GraphQL mutation
+merge_request: 51069
+author:
+type: changed

spec/frontend/boards/boards_store_spec.js

@@ -456,24 +456,6 @@ describe('boardsStore', () => {
     });
   });
 
-  describe('deleteBoard', () => {
-    const id = 'capsized';
-    const url = `${endpoints.boardsEndpoint}/${id}.json`;
-
-    it('makes a request to delete a boards', () => {
-      axiosMock.onDelete(url).replyOnce(200, dummyResponse);
-      const expectedResponse = expect.objectContaining({ data: dummyResponse });
-
-      return expect(boardsStore.deleteBoard({ id })).resolves.toEqual(expectedResponse);
-    });
-
-    it('fails for error response', () => {
-      axiosMock.onDelete(url).replyOnce(500);
-
-      return expect(boardsStore.deleteBoard({ id })).rejects.toThrow();
-    });
-  });
-
   describe('when created', () => {
     beforeEach(() => {
       setupDefaultResponses();

spec/frontend/boards/components/board_form_spec.js

@@ -4,16 +4,19 @@ import { TEST_HOST } from 'jest/helpers/test_constants';
 import { GlModal } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import boardsStore from '~/boards/stores/boards_store';
 import BoardForm from '~/boards/components/board_form.vue';
 import updateBoardMutation from '~/boards/graphql/board_update.mutation.graphql';
 import createBoardMutation from '~/boards/graphql/board_create.mutation.graphql';
+import destroyBoardMutation from '~/boards/graphql/board_destroy.mutation.graphql';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn().mockName('visitUrlMock'),
   stripFinalUrlSegment: jest.requireActual('~/lib/utils/url_utility').stripFinalUrlSegment,
 }));
+jest.mock('~/flash');
 
 const currentBoard = {
   id: 1,
@@ -34,19 +37,9 @@ const defaultProps = {
   currentBoard,
 };
 
-const endpoints = {
-  boardsEndpoint: 'test-endpoint',
-};
-
-const mutate = jest.fn().mockResolvedValue({
-  data: {
-    createBoard: { board: { id: 'gid://gitlab/Board/123' } },
-    updateBoard: { board: { id: 'gid://gitlab/Board/321' } },
-  },
-});
-
 describe('BoardForm', () => {
   let wrapper;
+  let mutate;
 
   const findModal = () => wrapper.find(GlModal);
   const findModalActionPrimary = () => findModal().props('actionPrimary');
@@ -64,7 +57,7 @@ describe('BoardForm', () => {
         };
       },
       provide: {
-        endpoints,
+        rootPath: 'root',
       },
       mocks: {
         $apollo: {
@@ -83,6 +76,7 @@ describe('BoardForm', () => {
     wrapper.destroy();
     wrapper = null;
     boardsStore.state.currentPage = null;
+    mutate = null;
   });
 
   describe('when user can not admin the board', () => {
@@ -156,6 +150,20 @@ describe('BoardForm', () => {
     });
 
     describe('when submitting a create event', () => {
+      const fillForm = () => {
+        findInput().value = 'Test name';
+        findInput().trigger('input');
+        findInput().trigger('keyup.enter', { metaKey: true });
+      };
+
+      beforeEach(() => {
+        mutate = jest.fn().mockResolvedValue({
+          data: {
+            createBoard: { board: { id: 'gid://gitlab/Board/123' } },
+          },
+        });
+      });
+
       it('does not call API if board name is empty', async () => {
         createComponent({ canAdminBoard: true });
         findInput().trigger('keyup.enter', { metaKey: true });
@@ -168,10 +176,7 @@ describe('BoardForm', () => {
       it('calls a correct GraphQL mutation and redirects to correct page from existing board', async () => {
         window.location = new URL('https://test/boards/1');
         createComponent({ canAdminBoard: true });
-
-        findInput().value = 'Test name';
-        findInput().trigger('input');
-        findInput().trigger('keyup.enter', { metaKey: true });
+        fillForm();
 
         await waitForPromises();
 
@@ -191,10 +196,7 @@ describe('BoardForm', () => {
       it('calls a correct GraphQL mutation and redirects to correct page from boards list', async () => {
         window.location = new URL('https://test/boards');
         createComponent({ canAdminBoard: true });
-
-        findInput().value = 'Test name';
-        findInput().trigger('input');
-        findInput().trigger('keyup.enter', { metaKey: true });
+        fillForm();
 
         await waitForPromises();
 
@@ -210,6 +212,20 @@ describe('BoardForm', () => {
         await waitForPromises();
         expect(visitUrl).toHaveBeenCalledWith('boards/123');
       });
+
+      it('shows an error flash if GraphQL mutation fails', async () => {
+        mutate = jest.fn().mockRejectedValue('Houston, we have a problem');
+        createComponent({ canAdminBoard: true });
+        fillForm();
+
+        await waitForPromises();
+
+        expect(mutate).toHaveBeenCalled();
+
+        await waitForPromises();
+        expect(visitUrl).not.toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalled();
+      });
     });
   });
 
@@ -245,27 +261,93 @@ describe('BoardForm', () => {
       });
     });
 
-    describe('when submitting an update event', () => {
-      it('calls REST and GraphQL API with correct parameters', async () => {
-        window.location = new URL('https://test/boards/1');
-        createComponent({ canAdminBoard: true });
+    it('calls GraphQL mutation with correct parameters', async () => {
+      mutate = jest.fn().mockResolvedValue({
+        data: {
+          updateBoard: { board: { id: 'gid://gitlab/Board/321' } },
+        },
+      });
+      window.location = new URL('https://test/boards/1');
+      createComponent({ canAdminBoard: true });
 
-        findInput().trigger('keyup.enter', { metaKey: true });
+      findInput().trigger('keyup.enter', { metaKey: true });
 
-        await waitForPromises();
+      await waitForPromises();
 
-        expect(mutate).toHaveBeenCalledWith({
-          mutation: updateBoardMutation,
-          variables: {
-            input: expect.objectContaining({
-              id: `gid://gitlab/Board/${currentBoard.id}`,
-            }),
-          },
-        });
+      expect(mutate).toHaveBeenCalledWith({
+        mutation: updateBoardMutation,
+        variables: {
+          input: expect.objectContaining({
+            id: `gid://gitlab/Board/${currentBoard.id}`,
+          }),
+        },
+      });
 
-        await waitForPromises();
-        expect(visitUrl).toHaveBeenCalledWith('321');
+      await waitForPromises();
+      expect(visitUrl).toHaveBeenCalledWith('321');
+    });
+
+    it('shows an error flash if GraphQL mutation fails', async () => {
+      mutate = jest.fn().mockRejectedValue('Houston, we have a problem');
+      createComponent({ canAdminBoard: true });
+      findInput().trigger('keyup.enter', { metaKey: true });
+
+      await waitForPromises();
+
+      expect(mutate).toHaveBeenCalled();
+
+      await waitForPromises();
+      expect(visitUrl).not.toHaveBeenCalled();
+      expect(createFlash).toHaveBeenCalled();
+    });
+  });
+
+  describe('when deleting a board', () => {
+    beforeEach(() => {
+      boardsStore.state.currentPage = 'delete';
+    });
+
+    it('passes correct primary action text and variant', () => {
+      createComponent({ canAdminBoard: true });
+      expect(findModalActionPrimary().text).toBe('Delete');
+      expect(findModalActionPrimary().attributes[0].variant).toBe('danger');
+    });
+
+    it('renders delete confirmation message', () => {
+      createComponent({ canAdminBoard: true });
+      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 });
+      findModal().vm.$emit('primary');
+
+      await waitForPromises();
+
+      expect(mutate).toHaveBeenCalledWith({
+        mutation: destroyBoardMutation,
+        variables: {
+          id: 'gid://gitlab/Board/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 });
+      findModal().vm.$emit('primary');
+
+      await waitForPromises();
+
+      expect(mutate).toHaveBeenCalled();
+
+      await waitForPromises();
+      expect(visitUrl).not.toHaveBeenCalled();
+      expect(createFlash).toHaveBeenCalled();
     });
   });
 });