Merge branch...

Merge branch '378889-refactor-removing-board-list-from-vuex-action-to-apollo-mutation' into 'master' Apollo boards - Refactor deleting list See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/119428 Merged-by: Simon Knox <simon@gitlab.com> Approved-by: Deepika Guliani <dguliani@gitlab.com> Approved-by: Simon Knox <simon@gitlab.com> Reviewed-by: Simon Knox <simon@gitlab.com> Reviewed-by: Florie Guibert <fguibert@gitlab.com> Reviewed-by: Deepika Guliani <dguliani@gitlab.com> Co-authored-by: Florie Guibert <fguibert@gitlab.com>

Merge branch...
Merge branch '378889-refactor-removing-board-list-from-vuex-action-to-apollo-mutation' into 'master' Apollo boards - Refactor deleting list See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/119428 Merged-by: Simon Knox <simon@gitlab.com> Approved-by: Deepika Guliani <dguliani@gitlab.com> Approved-by: Simon Knox <simon@gitlab.com> Reviewed-by: Simon Knox <simon@gitlab.com> Reviewed-by: Florie Guibert <fguibert@gitlab.com> Reviewed-by: Deepika Guliani <dguliani@gitlab.com> Co-authored-by: Florie Guibert <fguibert@gitlab.com>
43cc6292 · Simon Knox · 13c2936e · 76dc2ba1 · 43cc6292 · 43cc6292
--- a/app/assets/javascripts/boards/components/board_app.vue
+++ b/app/assets/javascripts/boards/components/board_app.vue
 <script>
 import { mapGetters } from 'vuex';
 import { refreshCurrentPage, queryToObject } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import BoardTopBar from '~/boards/components/board_top_bar.vue';
+import { listsQuery } from 'ee_else_ce/boards/constants';
+import { formatBoardLists } from 'ee_else_ce/boards/boards_util';
 import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql';
 export default {
+  i18n: {
+    fetchError: s__(
+      'Boards|An error occurred while fetching the board lists. Please reload the page.',
+    ),
+  },
  components: {
    BoardContent,
    BoardSettingsSidebar,
    BoardTopBar,
  },
-  inject: ['initialBoardId', 'initialFilterParams', 'isIssueBoard', 'isApolloBoard'],
+  inject: [
+    'fullPath',
+    'initialBoardId',
+    'initialFilterParams',
+    'isIssueBoard',
+    'isGroupBoard',
+    'issuableType',
+    'boardType',
+    'isApolloBoard',
+  ],
  data() {
    return {
      activeListId: '',
      boardId: this.initialBoardId,
      filterParams: { ...this.initialFilterParams },
      isShowingEpicsSwimlanes: Boolean(queryToObject(window.location.search).group_by),
+      apolloError: null,
    };
  },
  apollo: {
@@ -38,10 +56,39 @@ export default {
        return !this.isApolloBoard;
      },
    },
+    boardListsApollo: {
+      query() {
+        return listsQuery[this.issuableType].query;
+      },
+      variables() {
+        return this.listQueryVariables;
+      },
+      skip() {
+        return !this.isApolloBoard;
+      },
+      update(data) {
+        const { lists } = data[this.boardType].board;
+        return formatBoardLists(lists);
+      },
+      error() {
+        this.apolloError = this.$options.i18n.fetchError;
+      },
+    },
  },
  computed: {
    ...mapGetters(['isSidebarOpen']),
+    listQueryVariables() {
+      return {
+        ...(this.isIssueBoard && {
+          isGroup: this.isGroupBoard,
+          isProject: !this.isGroupBoard,
+        }),
+        fullPath: this.fullPath,
+        boardId: this.boardId,
+        filters: this.filterParams,
+      };
+    },
    isSwimlanesOn() {
      return (gon?.licensed_features?.swimlanes && this.isShowingEpicsSwimlanes) ?? false;
    },
@@ -51,6 +98,9 @@ export default {
      }
      return this.isSidebarOpen;
    },
+    activeList() {
+      return this.activeListId ? this.boardListsApollo[this.activeListId] : undefined;
+    },
  },
  created() {
    window.addEventListener('popstate', refreshCurrentPage);
@@ -85,14 +135,20 @@ export default {
      @toggleSwimlanes="isShowingEpicsSwimlanes = $event"
    />
    <board-content
+      v-if="!isApolloBoard || boardListsApollo"
      :board-id="boardId"
      :is-swimlanes-on="isSwimlanesOn"
      :filter-params="filterParams"
+      :board-lists-apollo="boardListsApollo"
+      :apollo-error="apolloError"
      @setActiveList="setActiveId"
    />
    <board-settings-sidebar
+      v-if="!isApolloBoard || activeList"
+      :list="activeList"
      :list-id="activeListId"
      :board-id="boardId"
+      :query-variables="listQueryVariables"
      @unsetActiveId="setActiveId('')"
    />
  </div>

--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -5,20 +5,13 @@ import { sortBy, throttle } from 'lodash';
 import Draggable from 'vuedraggable';
 import { mapState, mapActions } from 'vuex';
 import { contentTop } from '~/lib/utils/common_utils';
-import { s__ } from '~/locale';
 import eventHub from '~/boards/eventhub';
-import { formatBoardLists } from 'ee_else_ce/boards/boards_util';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
 import { defaultSortableOptions } from '~/sortable/constants';
-import { DraggableItemTypes, listsQuery } from 'ee_else_ce/boards/constants';
+import { DraggableItemTypes } from 'ee_else_ce/boards/constants';
 import BoardColumn from './board_column.vue';
 export default {
-  i18n: {
-    fetchError: s__(
-      'Boards|An error occurred while fetching the board lists. Please reload the page.',
-    ),
-  },
  draggableItemTypes: DraggableItemTypes,
  components: {
    BoardAddNewColumn,
@@ -29,17 +22,7 @@ export default {
    EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
    GlAlert,
  },
-  inject: [
+  inject: ['canAdminList', 'isIssueBoard', 'isEpicBoard', 'disabled', 'isApolloBoard'],
-    'canAdminList',
-    'boardType',
-    'fullPath',
-    'issuableType',
-    'isIssueBoard',
-    'isEpicBoard',
-    'isGroupBoard',
-    'disabled',
-    'isApolloBoard',
-  ],
  props: {
    boardId: {
      type: String,
@@ -53,56 +36,27 @@ export default {
      type: Boolean,
      required: true,
    },
+    boardListsApollo: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+    apolloError: {
+      type: String,
+      required: false,
+      default: null,
+    },
  },
  data() {
    return {
      boardHeight: null,
-      boardListsApollo: {},
-      apolloError: null,
-      updatedBoardId: this.boardId,
    };
  },
-  apollo: {
-    boardListsApollo: {
-      query() {
-        return listsQuery[this.issuableType].query;
-      },
-      variables() {
-        return this.queryVariables;
-      },
-      skip() {
-        return !this.isApolloBoard;
-      },
-      update(data) {
-        const { lists } = data[this.boardType].board;
-        return formatBoardLists(lists);
-      },
-      result() {
-        // this allows us to delay fetching lists when we switch a board to fetch the actual board lists
-        // instead of fetching lists for the "previous" board
-        this.updatedBoardId = this.boardId;
-      },
-      error() {
-        this.apolloError = this.$options.i18n.fetchError;
-      },
-    },
-  },
  computed: {
    ...mapState(['boardLists', 'error', 'addColumnForm']),
    addColumnFormVisible() {
      return this.addColumnForm?.visible;
    },
-    queryVariables() {
-      return {
-        ...(this.isIssueBoard && {
-          isGroup: this.isGroupBoard,
-          isProject: !this.isGroupBoard,
-        }),
-        fullPath: this.fullPath,
-        boardId: this.boardId,
-        filters: this.filterParams,
-      };
-    },
    boardListsToUse() {
      const lists = this.isApolloBoard ? this.boardListsApollo : this.boardLists;
      return sortBy([...Object.values(lists)], 'position');

--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
 <script>
-import { GlButton, GlDrawer, GlLabel, GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import produce from 'immer';
+import { GlButton, GlDrawer, GlLabel, GlModal, GlModalDirective } from '@gitlab/ui';
 import { MountingPortal } from 'portal-vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { LIST, ListType, ListTypeTitles, listsQuery } from 'ee_else_ce/boards/constants';
+import {
+  LIST,
+  ListType,
+  ListTypeTitles,
+  listsQuery,
+  deleteListQueries,
+} from 'ee_else_ce/boards/constants';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
@@ -21,7 +28,6 @@ export default {
    GlModal,
    GlDrawer,
    GlLabel,
-    GlLoadingIcon,
    MountingPortal,
    BoardSettingsSidebarWipLimit: () =>
      import('ee_component/boards/components/board_settings_wip_limit.vue'),
@@ -35,11 +41,9 @@ export default {
  inject: [
    'boardType',
    'canAdminList',
-    'fullPath',
    'issuableType',
    'scopedLabelsAvailable',
    'isIssueBoard',
-    'isGroupBoard',
    'isApolloBoard',
  ],
  inheritAttrs: false,
@@ -52,57 +56,33 @@ export default {
      type: String,
      required: true,
    },
+    list: {
+      type: Object,
+      required: false,
+      default: () => null,
+    },
+    queryVariables: {
+      type: Object,
+      required: true,
+    },
  },
  data() {
    return {
      ListType,
-      list: {},
    };
  },
  modalId: 'board-settings-sidebar-modal',
-  apollo: {
-    list: {
-      query() {
-        return listsQuery[this.issuableType].query;
-      },
-      variables() {
-        return this.queryVariables;
-      },
-      update(data) {
-        const { lists } = data[this.boardType].board;
-        return lists.nodes[0];
-      },
-      skip() {
-        return !this.isApolloBoard || !this.listId;
-      },
-      error() {
-        this.error = this.$options.i18n.fetchError;
-      },
-    },
-  },
  computed: {
    ...mapGetters(['isSidebarOpen']),
    ...mapState(['activeId', 'sidebarType', 'boardLists']),
    isWipLimitsOn() {
      return this.glFeatures.wipLimits && this.isIssueBoard;
    },
-    queryVariables() {
-      return {
-        ...(this.isIssueBoard && {
-          isGroup: this.isGroupBoard,
-          isProject: !this.isGroupBoard,
-        }),
-        fullPath: this.fullPath,
-        boardId: this.boardId,
-        filters: this.filterParams,
-        listId: this.activeListId,
-      };
-    },
    activeListId() {
      return this.isApolloBoard ? this.listId : this.activeId;
    },
    activeList() {
-      return this.isApolloBoard ? this.list : this.boardLists[this.activeId] || {};
+      return (this.isApolloBoard ? this.list : this.boardLists[this.activeId]) || {};
    },
    activeListLabel() {
      return this.activeList.label;
@@ -119,9 +99,6 @@ export default {
      }
      return this.sidebarType === LIST && this.isSidebarOpen;
    },
-    isLoading() {
-      return this.isApolloBoard && this.$apollo.queries.list.loading;
-    },
  },
  created() {
    eventHub.$on('sidebar.closeAll', this.unsetActiveListId);
@@ -132,14 +109,18 @@ export default {
  methods: {
    ...mapActions(['unsetActiveId', 'removeList']),
    handleModalPrimary() {
-      this.deleteBoard();
+      this.deleteBoardList();
    },
    showScopedLabels(label) {
      return this.scopedLabelsAvailable && isScopedLabel(label);
    },
-    deleteBoard() {
+    async deleteBoardList() {
      this.track('click_button', { label: 'remove_list' });
-      this.removeList(this.activeId);
+      if (this.isApolloBoard) {
+        await this.deleteList(this.activeListId);
+      } else {
+        this.removeList(this.activeId);
+      }
      this.unsetActiveListId();
    },
    unsetActiveListId() {
@@ -149,6 +130,25 @@ export default {
        this.unsetActiveId();
      }
    },
+    async deleteList(listId) {
+      await this.$apollo.mutate({
+        mutation: deleteListQueries[this.issuableType].mutation,
+        variables: {
+          listId,
+        },
+        update: (store) => {
+          store.updateQuery(
+            { query: listsQuery[this.issuableType].query, variables: this.queryVariables },
+            (sourceData) =>
+              produce(sourceData, (draftData) => {
+                draftData[this.boardType].board.lists.nodes = draftData[
+                  this.boardType
+                ].board.lists.nodes.filter((list) => list.id !== listId);
+              }),
+          );
+        },
+      });
+    },
  },
 };
 </script>
@@ -166,9 +166,8 @@ export default {
        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">
          {{ $options.listSettingsText }}
        </h2>
-        <gl-loading-icon v-if="isLoading" />
      </template>
-      <template v-if="!isLoading" #header>
+      <template #header>
        <div v-if="canAdminList && activeList.id" class="gl-mt-3">
          <gl-button
            v-gl-modal="$options.modalId"
@@ -179,7 +178,7 @@ export default {
          </gl-button>
        </div>
      </template>
-      <template v-if="showSidebar && !isLoading">
+      <template v-if="showSidebar">
        <div v-if="boardListType === ListType.label">
          <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
          <gl-label

--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -144,6 +144,9 @@ export default {
  },
  methods: {
    ...mapActions(['setError', 'fetchBoard', 'unsetActiveId']),
+    fullBoardId(boardId) {
+      return fullBoardId(boardId);
+    },
    showPage(page) {
      this.currentPage = page;
    },
@@ -254,7 +257,8 @@ export default {
      if (isMetaKey(e)) {
        window.open(`${this.boardBaseUrl}/${boardId}`, '_blank');
      } else if (this.isApolloBoard) {
-        this.$emit('switchBoard', fullBoardId(boardId));
+        // Epic board ID is supported in EE version of this file
+        this.$emit('switchBoard', this.fullBoardId(boardId));
        updateHistory({ url: `${this.boardBaseUrl}/${boardId}` });
      } else {
        this.unsetActiveId();

--- a/ee/spec/frontend/boards/components/board_app_spec.js
+++ b/ee/spec/frontend/boards/components/board_app_spec.js
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { issueBoardListsQueryResponse } from 'jest/boards/mock_data';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import BoardApp from '~/boards/components/board_app.vue';
+import epicBoardListsQuery from 'ee_component/boards/graphql/epic_board_lists.query.graphql';
+import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql';
+import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
+import { rawIssue, epicBoardListsQueryResponse } from '../mock_data';
+describe('BoardApp', () => {
+  const boardListQueryHandler = jest.fn().mockResolvedValue(issueBoardListsQueryResponse);
+  const epicBoardListQueryHandler = jest.fn().mockResolvedValue(epicBoardListsQueryResponse);
+  const mockApollo = createMockApollo([
+    [boardListsQuery, boardListQueryHandler],
+    [epicBoardListsQuery, epicBoardListQueryHandler],
+  ]);
+  Vue.use(VueApollo);
+  const createComponent = ({ issue = rawIssue, provide = {} } = {}) => {
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: activeBoardItemQuery,
+      data: {
+        activeBoardItem: issue,
+      },
+    });
+    shallowMount(BoardApp, {
+      apolloProvider: mockApollo,
+      provide: {
+        fullPath: 'gitlab-org',
+        initialBoardId: 'gid://gitlab/Board/1',
+        initialFilterParams: {},
+        issuableType: 'issue',
+        boardType: 'group',
+        isIssueBoard: true,
+        isGroupBoard: true,
+        isApolloBoard: true,
+        ...provide,
+      },
+    });
+  };
+  it.each`
+    issuableType | isIssueBoard | isEpicBoard | queryHandler                 | notCalledHandler
+    ${'epic'}    | ${false}     | ${true}     | ${epicBoardListQueryHandler} | ${boardListQueryHandler}
+    ${'issue'}   | ${true}      | ${false}    | ${boardListQueryHandler}     | ${epicBoardListQueryHandler}
+  `(
+    'fetches $issuableType lists',
+    ({ issuableType, isIssueBoard, isEpicBoard, queryHandler, notCalledHandler }) => {
+      createComponent({
+        provide: { isApolloBoard: true, issuableType, isEpicBoard, isIssueBoard },
+      });
+      expect(queryHandler).toHaveBeenCalled();
+      expect(notCalledHandler).not.toHaveBeenCalled();
+    },
+  );
+});
--- a/ee/spec/frontend/boards/components/board_settings_sidebar_spec.js
+++ b/ee/spec/frontend/boards/components/board_settings_sidebar_spec.js
 import { GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
-import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
-import createMockApollo from 'helpers/mock_apollo_helper';
 import BoardSettingsListTypes from 'ee_component/boards/components/board_settings_list_types.vue';
 import BoardSettingsWipLimit from 'ee_component/boards/components/board_settings_wip_limit.vue';
-import epicBoardListsQuery from 'ee_component/boards/graphql/epic_board_lists.query.graphql';
+import { mockLabelList, mockMilestoneList } from 'jest/boards/mock_data';
-import {
-  mockLabelList,
-  mockMilestoneList,
-  issueBoardListsQueryResponse,
-} from 'jest/boards/mock_data';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import { LIST } from '~/boards/constants';
 import getters from '~/boards/stores/getters';
-import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
-import { epicBoardListsQueryResponse } from '../mock_data';
-Vue.use(VueApollo);
 Vue.use(Vuex);
 describe('ee/BoardSettingsSidebar', () => {
  let wrapper;
-  let mockApollo;
  let storeActions;
-  const boardListQueryHandler = jest.fn().mockResolvedValue(issueBoardListsQueryResponse);
-  const epicBoardListQueryHandler = jest.fn().mockResolvedValue(epicBoardListsQueryResponse);
  const createComponent = ({
    actions = {},
    isWipLimitsOn = false,
@@ -46,13 +32,7 @@ describe('ee/BoardSettingsSidebar', () => {
      actions: storeActions,
    });
-    mockApollo = createMockApollo([
-      [boardListsQuery, boardListQueryHandler],
-      [epicBoardListsQuery, epicBoardListQueryHandler],
-    ]);
    wrapper = shallowMount(BoardSettingsSidebar, {
-      apolloProvider: mockApollo,
      store,
      provide: {
        glFeatures: {
@@ -62,15 +42,15 @@ describe('ee/BoardSettingsSidebar', () => {
        scopedLabelsAvailable: true,
        isIssueBoard: true,
        boardType: 'group',
-        fullPath: 'gitlab-org',
        issuableType: 'issue',
-        isGroupBoard: true,
        isApolloBoard: false,
        ...provide,
      },
      propsData: {
-        listId: 'gid://gitlab/List/1',
+        listId: list.id,
        boardId: 'gid://gitlab/Board/1',
+        list,
+        queryVariables: {},
      },
      stubs: {
        'board-settings-sidebar-wip-limit': BoardSettingsWipLimit,
@@ -98,22 +78,4 @@ describe('ee/BoardSettingsSidebar', () => {
    expect(wrapper.findComponent(GlLabel).props('scoped')).toBe(true);
  });
-  describe('Apollo boards', () => {
-    it.each`
-      issuableType | isIssueBoard | isEpicBoard | queryHandler                 | notCalledHandler
-      ${'epic'}    | ${false}     | ${true}     | ${epicBoardListQueryHandler} | ${boardListQueryHandler}
-      ${'issue'}   | ${true}      | ${false}    | ${boardListQueryHandler}     | ${epicBoardListQueryHandler}
-    `(
-      'fetches $issuableType list info',
-      ({ issuableType, isIssueBoard, isEpicBoard, queryHandler, notCalledHandler }) => {
-        createComponent({
-          provide: { isApolloBoard: true, issuableType, isEpicBoard, isIssueBoard },
-        });
-        expect(queryHandler).toHaveBeenCalled();
-        expect(notCalledHandler).not.toHaveBeenCalled();
-      },
-    );
-  });
 });
--- a/spec/frontend/boards/components/board_app_spec.js
+++ b/spec/frontend/boards/components/board_app_spec.js
@@ -6,12 +6,14 @@ import Vuex from 'vuex';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import BoardApp from '~/boards/components/board_app.vue';
 import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql';
-import { rawIssue } from '../mock_data';
+import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
+import { rawIssue, boardListsQueryResponse } from '../mock_data';
 describe('BoardApp', () => {
  let wrapper;
  let store;
-  const mockApollo = createMockApollo();
+  const boardListQueryHandler = jest.fn().mockResolvedValue(boardListsQueryResponse);
+  const mockApollo = createMockApollo([[boardListsQuery, boardListQueryHandler]]);
  Vue.use(Vuex);
  Vue.use(VueApollo);
@@ -41,9 +43,13 @@ describe('BoardApp', () => {
      apolloProvider: mockApollo,
      store,
      provide: {
+        fullPath: 'gitlab-org',
        initialBoardId: 'gid://gitlab/Board/1',
        initialFilterParams: {},
+        issuableType: 'issue',
+        boardType: 'group',
        isIssueBoard: true,
+        isGroupBoard: true,
        isApolloBoard,
      },
    });
@@ -73,6 +79,10 @@ describe('BoardApp', () => {
      await nextTick();
    });
+    it('fetches lists', () => {
+      expect(boardListQueryHandler).toHaveBeenCalled();
+    });
    it('should have is-compact class when a card is selected', () => {
      expect(wrapper.classes()).toContain('is-compact');
    });

--- a/spec/frontend/boards/components/board_content_spec.js
+++ b/spec/frontend/boards/components/board_content_spec.js
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
-import VueApollo from 'vue-apollo';
 import Draggable from 'vuedraggable';
 import Vuex from 'vuex';
 import eventHub from '~/boards/eventhub';
 import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
-import createMockApollo from 'helpers/mock_apollo_helper';
 import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
 import getters from 'ee_else_ce/boards/stores/getters';
-import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
 import BoardColumn from '~/boards/components/board_column.vue';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
-import { mockLists, boardListsQueryResponse } from '../mock_data';
+import { mockLists, mockListsById } from '../mock_data';
-Vue.use(VueApollo);
 Vue.use(Vuex);
 const actions = {
@@ -26,7 +22,6 @@ const actions = {
 describe('BoardContent', () => {
  let wrapper;
-  let fakeApollo;
  const defaultState = {
    isShowingEpicsSwimlanes: false,
@@ -51,26 +46,21 @@ describe('BoardContent', () => {
    issuableType = 'issue',
    isIssueBoard = true,
    isEpicBoard = false,
-    boardListQueryHandler = jest.fn().mockResolvedValue(boardListsQueryResponse),
  } = {}) => {
-    fakeApollo = createMockApollo([[boardListsQuery, boardListQueryHandler]]);
    const store = createStore({
      ...defaultState,
      ...state,
    });
    wrapper = shallowMount(BoardContent, {
-      apolloProvider: fakeApollo,
      propsData: {
        boardId: 'gid://gitlab/Board/1',
        filterParams: {},
        isSwimlanesOn: false,
+        boardListsApollo: mockListsById,
        ...props,
      },
      provide: {
        canAdminList,
-        boardType: 'group',
-        fullPath: 'gitlab-org/gitlab',
        issuableType,
        isIssueBoard,
        isEpicBoard,
@@ -110,10 +100,6 @@ describe('BoardContent', () => {
    };
  });
-  afterEach(() => {
-    fakeApollo = null;
-  });
  describe('default', () => {
    beforeEach(() => {
      createComponent();

--- a/spec/frontend/boards/components/board_settings_sidebar_spec.js
+++ b/spec/frontend/boards/components/board_settings_sidebar_spec.js
@@ -10,12 +10,12 @@ import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import { inactiveId, LIST } from '~/boards/constants';
+import destroyBoardListMutation from '~/boards/graphql/board_list_destroy.mutation.graphql';
 import actions from '~/boards/stores/actions';
 import getters from '~/boards/stores/getters';
 import mutations from '~/boards/stores/mutations';
 import sidebarEventHub from '~/sidebar/event_hub';
-import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql';
+import { mockLabelList, destroyBoardListMutationResponse } from '../mock_data';
-import { mockLabelList, issueBoardListsQueryResponse } from '../mock_data';
 Vue.use(VueApollo);
 Vue.use(Vuex);
@@ -28,7 +28,9 @@ describe('BoardSettingsSidebar', () => {
  const listId = mockLabelList.id;
  const modalID = 'board-settings-sidebar-modal';
-  const boardListQueryHandler = jest.fn().mockResolvedValue(issueBoardListsQueryResponse);
+  const destroyBoardListMutationHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(destroyBoardListMutationResponse);
  const createComponent = ({
    canAdminList = false,
@@ -46,25 +48,28 @@ describe('BoardSettingsSidebar', () => {
      mutations,
      actions,
    });
-    mockApollo = createMockApollo([[boardListsQuery, boardListQueryHandler]]);
+    mockApollo = createMockApollo([
+      [destroyBoardListMutation, destroyBoardListMutationHandlerSuccess],
+    ]);
    wrapper = extendedWrapper(
      shallowMount(BoardSettingsSidebar, {
-        apolloProvider: mockApollo,
        store,
+        apolloProvider: mockApollo,
        provide: {
          canAdminList,
          scopedLabelsAvailable: false,
          isIssueBoard: true,
          boardType: 'group',
-          fullPath: 'gitlab-org',
          issuableType: 'issue',
-          isGroupBoard: true,
          isApolloBoard,
        },
        propsData: {
-          listId: 'gid://gitlab/List/1',
+          listId: list.id || '',
          boardId: 'gid://gitlab/Board/1',
+          list,
+          queryVariables: {},
        },
        directives: {
          GlModal: createMockDirective('gl-modal'),
@@ -76,6 +81,9 @@ describe('BoardSettingsSidebar', () => {
        },
      }),
    );
+    // Necessary for cache update
+    mockApollo.clients.defaultClient.cache.updateQuery = jest.fn();
  };
  const findLabel = () => wrapper.findComponent(GlLabel);
  const findDrawer = () => wrapper.findComponent(GlDrawer);
@@ -185,6 +193,21 @@ describe('BoardSettingsSidebar', () => {
      expect(findRemoveButton().exists()).toBe(true);
    });
+    it('removes the list', () => {
+      createComponent({
+        canAdminList: true,
+        activeId: listId,
+        list: mockLabelList,
+        isApolloBoard: true,
+      });
+      findRemoveButton().vm.$emit('click');
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+      expect(destroyBoardListMutationHandlerSuccess).toHaveBeenCalled();
+    });
    it('has the correct ID on the button', () => {
      createComponent({ canAdminList: true, activeId: listId, list: mockLabelList });
      const binding = getBinding(findRemoveButton().element, 'gl-modal');
@@ -196,12 +219,4 @@ describe('BoardSettingsSidebar', () => {
      expect(findModal().props('modalId')).toBe(modalID);
    });
  });
-  describe('Apollo boards', () => {
-    it('fetches list', () => {
-      createComponent({ isApolloBoard: true });
-      expect(boardListQueryHandler).toHaveBeenCalled();
-    });
-  });
 });
--- a/spec/frontend/boards/mock_data.js
+++ b/spec/frontend/boards/mock_data.js
@@ -997,4 +997,13 @@ export const updateBoardListResponse = {
  },
 };
+export const destroyBoardListMutationResponse = {
+  data: {
+    destroyBoardList: {
+      errors: [],
+      __typename: 'DestroyBoardListPayload',
+    },
+  },
+};
 export const DEFAULT_COLOR = '#1068bf';