Fetch epics swimlanes action

- Feedback

app/assets/javascripts/boards/components/boards_lists.vue → app/assets/javascripts/boards/components/board_content.vue

@@ -19,7 +19,8 @@ export default {
     },
     groupId: {
       type: Number,
-      required: true,
+      required: false,
+      default: null,
     },
     disabled: {
       type: Boolean,

app/assets/javascripts/boards/index.js

@@ -4,7 +4,7 @@ import { mapActions } from 'vuex';
 
 import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
-import BoardsLists from '~/boards/components/boards_lists.vue';
+import BoardContent from '~/boards/components/board_content.vue';
 import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
 import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
@@ -79,7 +79,7 @@ export default () => {
   issueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      BoardsLists,
+      BoardContent,
       Board: () =>
         window?.gon?.features?.sfcIssueBoards
           ? import('ee_else_ce/boards/components/board_column.vue')

app/controllers/groups/boards_controller.rb

@@ -9,7 +9,7 @@ class Groups::BoardsController < Groups::ApplicationController
   before_action do
     push_frontend_feature_flag(:multi_select_board, default_enabled: true)
     push_frontend_feature_flag(:sfc_issue_boards, default_enabled: true)
-    push_frontend_feature_flag(:boards_with_swimlanes, default_enabled: false)
+    push_frontend_feature_flag(:boards_with_swimlanes, group, default_enabled: false)
   end
 
   private

app/views/shared/boards/_show.html.haml

@@ -20,9 +20,9 @@
 #board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
   = render 'shared/issuable/search_bar', type: :boards, board: board
 
-  - if Feature.enabled?(:boards_with_swimlanes)
-    %boards-lists{ "v-cloak" => "true",
-      "ref" => "boards_lists",
+  - if Feature.enabled?(:boards_with_swimlanes, current_board_parent)
+    %board-content{ "v-cloak" => "true",
+      "ref" => "board_content",
       ":lists" => "state.lists",
       ":can-admin-list" => can_admin_list,
       ":group-id" => group_id,

ee/app/assets/javascripts/boards/queries/epics_swimlanes.query.graphql

 #import "ee_else_ce/boards/queries/board_list.fragment.graphql"
 
 query GroupBoard($fullPath: ID!, $boardId: ID!) {
-  group(fullPath: $fullPath) @client {
+  group(fullPath: $fullPath) {
     board(id: $boardId) {
       lists {
         nodes {

ee/app/assets/javascripts/boards/stores/actions.js

@@ -22,9 +22,13 @@ const fetchEpicsSwimlanes = ({ endpoints }) => {
     boardId: `gid://gitlab/Board/${boardId}`,
   };
 
-  return gqlClient.query({
+  return gqlClient
+    .query({
       query,
       variables,
+    })
+    .then(({ data }) => {
+      return data;
     });
 };
 
@@ -72,8 +76,23 @@ export default {
     notImplemented();
   },
 
-  toggleEpicSwimlanes: ({ state, commit }) => {
+  toggleEpicSwimlanes: ({ state, commit, dispatch }) => {
     commit(types.TOGGLE_EPICS_SWIMLANES);
-    fetchEpicsSwimlanes(state);
+
+    if (state.isShowingEpicsSwimlanes) {
+      fetchEpicsSwimlanes(state)
+        .then(swimlanes => {
+          dispatch('receiveSwimlanesSuccess', swimlanes);
+        })
+        .catch(() => dispatch('receiveSwimlanesFailure'));
+    }
+  },
+
+  receiveSwimlanesSuccess: ({ commit }, swimlanes) => {
+    commit(types.RECEIVE_SWIMLANES_SUCCESS, swimlanes);
+  },
+
+  receiveSwimlanesFailure: ({ commit }) => {
+    commit(types.RECEIVE_SWIMLANES_FAILURE);
   },
 };

ee/app/assets/javascripts/boards/stores/mutation_types.js

@@ -13,4 +13,6 @@ export const RECEIVE_REMOVE_BOARD_ERROR = 'RECEIVE_REMOVE_BOARD_ERROR';
 export const TOGGLE_PROMOTION_STATE = 'TOGGLE_PROMOTION_STATE';
 export const TOGGLE_LABELS = 'TOGGLE_LABELS';
 export const TOGGLE_EPICS_SWIMLANES = 'TOGGLE_EPICS_SWIMLANES';
+export const RECEIVE_SWIMLANES_SUCCESS = 'RECEIVE_SWIMLANES_SUCCESS';
+export const RECEIVE_SWIMLANES_FAILURE = 'RECEIVE_SWIMLANES_FAILURE';
 export const SET_ACTIVE_LIST_ID = 'SET_ACTIVE_LIST_ID';

ee/app/assets/javascripts/boards/stores/mutations.js

@@ -69,5 +69,16 @@ export default {
 
   [mutationTypes.TOGGLE_EPICS_SWIMLANES]: state => {
     state.isShowingEpicsSwimlanes = !state.isShowingEpicsSwimlanes;
+    state.epicsSwimlanesFetchInProgress = true;
+  },
+
+  [mutationTypes.RECEIVE_SWIMLANES_SUCCESS]: (state, swimlanes) => {
+    state.epicsSwimlanes = swimlanes;
+    state.epicsSwimlanesFetchInProgress = false;
+  },
+
+  [mutationTypes.RECEIVE_SWIMLANES_FAILURE]: state => {
+    state.epicsSwimlanesFetchFailure = true;
+    state.epicsSwimlanesFetchInProgress = false;
   },
 };

ee/app/assets/javascripts/boards/stores/state.js

@@ -4,4 +4,7 @@ export default () => ({
   ...createStateCE(),
 
   isShowingEpicsSwimlanes: false,
+  epicsSwimlanesFetchInProgress: false,
+  epicsSwimlanesFetchFailure: false,
+  epicsSwimlanes: {},
 });

ee/spec/frontend/boards/stores/actions_spec.js

@@ -92,21 +92,46 @@ describe('togglePromotionState', () => {
 });
 
 describe('toggleEpicSwimlanes', () => {
-  it('should commit mutation TOGGLE_EPICS_SWIMLANES', done => {
+  it('should commit mutation TOGGLE_EPICS_SWIMLANES', () => {
     const state = {
-      isShowingEpicsSwimlanes: true,
+      isShowingEpicsSwimlanes: false,
       endpoints: {
         fullPath: 'gitlab-org',
         boardId: 1,
       },
     };
 
-    testAction(
+    return testAction(
       actions.toggleEpicSwimlanes,
       null,
       state,
       [{ type: types.TOGGLE_EPICS_SWIMLANES }],
       [],
+    );
+  });
+});
+
+describe('receiveSwimlanesSuccess', () => {
+  it('should commit mutation RECEIVE_SWIMLANES_SUCCESS', done => {
+    testAction(
+      actions.receiveSwimlanesSuccess,
+      {},
+      {},
+      [{ type: types.RECEIVE_SWIMLANES_SUCCESS, payload: {} }],
+      [],
+      done,
+    );
+  });
+});
+
+describe('receiveSwimlanesFailure', () => {
+  it('should commit mutation RECEIVE_SWIMLANES_SUCCESS', done => {
+    testAction(
+      actions.receiveSwimlanesFailure,
+      null,
+      {},
+      [{ type: types.RECEIVE_SWIMLANES_FAILURE }],
+      [],
       done,
     );
   });