Add latest changes from gitlab-org/gitlab@master

6 files changed, 112 insertions, 24 deletions

diff --git a/app/assets/javascripts/boards/boards_util.js b/app/assets/javascripts/boards/boards_util.js
index 8062460f052..cf04669ba43 100644
--- a/app/assets/javascripts/boards/boards_util.js
+++ b/app/assets/javascripts/boards/boards_util.js
@@ -1,7 +1,13 @@
 import { sortBy, cloneDeep } from 'lodash';
 import { TYPE_BOARD, TYPE_ITERATION, TYPE_MILESTONE, TYPE_USER } from '~/graphql_shared/constants';
 import { isGid, convertToGraphQLId } from '~/graphql_shared/utils';
-import { ListType, MilestoneIDs, AssigneeFilterType, MilestoneFilterType } from './constants';
+import {
+  ListType,
+  MilestoneIDs,
+  AssigneeFilterType,
+  MilestoneFilterType,
+  boardQuery,
+} from './constants';
 
 export function getMilestone() {
   return null;
@@ -305,6 +311,10 @@ export function transformBoardConfig() {
   return '';
 }
 
+export function getBoardQuery(boardType) {
+  return boardQuery[boardType].query;
+}
+
 export default {
   getMilestone,
   formatIssue,
diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue
index 970e3509d20..d41fc1e9300 100644
--- a/app/assets/javascripts/boards/components/board_app.vue
+++ b/app/assets/javascripts/boards/components/board_app.vue
@@ -11,7 +11,12 @@ export default {
     BoardSettingsSidebar,
     BoardTopBar,
   },
-  inject: ['fullBoardId'],
+  inject: ['initialBoardId'],
+  data() {
+    return {
+      boardId: this.initialBoardId,
+    };
+  },
   computed: {
     ...mapGetters(['isSidebarOpen']),
   },
@@ -21,13 +26,18 @@ export default {
   destroyed() {
     window.removeEventListener('popstate', refreshCurrentPage);
   },
+  methods: {
+    switchBoard(id) {
+      this.boardId = id;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="boards-app gl-relative" :class="{ 'is-compact': isSidebarOpen }">
-    <board-top-bar />
-    <board-content :board-id="fullBoardId" />
+    <board-top-bar :board-id="boardId" @switchBoard="switchBoard" />
+    <board-content :board-id="boardId" />
     <board-settings-sidebar />
   </div>
 </template>
diff --git a/app/assets/javascripts/boards/components/board_top_bar.vue b/app/assets/javascripts/boards/components/board_top_bar.vue
index 368feba9a44..2e20ed70bb0 100644
--- a/app/assets/javascripts/boards/components/board_top_bar.vue
+++ b/app/assets/javascripts/boards/components/board_top_bar.vue
@@ -2,6 +2,7 @@
 import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
 import BoardsSelector from 'ee_else_ce/boards/components/boards_selector.vue';
 import IssueBoardFilteredSearch from 'ee_else_ce/boards/components/issue_board_filtered_search.vue';
+import { getBoardQuery } from 'ee_else_ce/boards/boards_util';
 import ConfigToggle from './config_toggle.vue';
 import NewBoardButton from './new_board_button.vue';
 import ToggleFocus from './toggle_focus.vue';
@@ -19,7 +20,46 @@ export default {
     EpicBoardFilteredSearch: () =>
       import('ee_component/boards/components/epic_filtered_search.vue'),
   },
-  inject: ['swimlanesFeatureAvailable', 'canAdminList', 'isSignedIn', 'isIssueBoard'],
+  inject: [
+    'swimlanesFeatureAvailable',
+    'canAdminList',
+    'isSignedIn',
+    'isIssueBoard',
+    'fullPath',
+    'boardType',
+    'isEpicBoard',
+    'isApolloBoard',
+  ],
+  props: {
+    boardId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      board: {},
+    };
+  },
+  apollo: {
+    board: {
+      query() {
+        return getBoardQuery(this.boardType, this.isEpicBoard);
+      },
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          boardId: this.boardId,
+        };
+      },
+      skip() {
+        return !this.isApolloBoard;
+      },
+      update(data) {
+        return data.workspace.board;
+      },
+    },
+  },
 };
 </script>
 
@@ -31,7 +71,7 @@ export default {
       <div
         class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-flex-grow-1 gl-lg-mb-0 gl-mb-3 gl-w-full"
       >
-        <boards-selector />
+        <boards-selector :board-apollo="board" @switchBoard="$emit('switchBoard', $event)" />
         <new-board-button />
         <issue-board-filtered-search v-if="isIssueBoard" />
         <epic-board-filtered-search v-else />
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index d26aeb69dd5..33a82ab3827 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -51,6 +51,7 @@ export default {
     'weights',
     'boardType',
     'isGroupBoard',
+    'isApolloBoard',
   ],
   props: {
     throttleDuration: {
@@ -58,6 +59,11 @@ export default {
       default: 200,
       required: false,
     },
+    boardApollo: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -77,6 +83,9 @@ export default {
 
   computed: {
     ...mapState(['board', 'isBoardLoading']),
+    boardToUse() {
+      return this.isApolloBoard ? this.boardApollo : this.board;
+    },
     parentType() {
       return this.boardType;
     },
@@ -116,7 +125,7 @@ export default {
       this.scrollFadeInitialized = false;
       this.$nextTick(this.setScrollFade);
     },
-    board(newBoard) {
+    boardToUse(newBoard) {
       document.title = newBoard.name;
     },
   },
@@ -210,9 +219,14 @@ export default {
         boardType: this.boardType,
       });
     },
+    fullBoardId(boardId) {
+      return fullBoardId(boardId);
+    },
     async switchBoard(boardId, e) {
       if (isMetaKey(e)) {
         window.open(`${this.boardBaseUrl}/${boardId}`, '_blank');
+      } else if (this.isApolloBoard) {
+        this.$emit('switchBoard', this.fullBoardId(boardId));
       } else {
         this.unsetActiveId();
         this.fetchCurrentBoard(boardId);
@@ -235,7 +249,7 @@ export default {
         toggle-class="dropdown-menu-toggle"
         menu-class="flex-column dropdown-extended-height"
         :loading="isBoardLoading"
-        :text="board.name"
+        :text="boardToUse.name"
         @show="loadBoards"
       >
         <p class="gl-dropdown-header-top" @mousedown.prevent>
@@ -333,7 +347,7 @@ export default {
         :can-admin-board="canAdminBoard"
         :scoped-issue-board-feature-enabled="scopedIssueBoardFeatureEnabled"
         :weights="weights"
-        :current-board="board"
+        :current-board="boardToUse"
         :current-page="currentPage"
         @cancel="cancel"
       />
diff --git a/app/assets/javascripts/boards/constants.js b/app/assets/javascripts/boards/constants.js
index 91b7f5004ad..7a5ef01606f 100644
--- a/app/assets/javascripts/boards/constants.js
+++ b/app/assets/javascripts/boards/constants.js
@@ -7,6 +7,8 @@ import updateBoardListMutation from './graphql/board_list_update.mutation.graphq
 
 import issueSetSubscriptionMutation from './graphql/issue_set_subscription.mutation.graphql';
 import issueSetTitleMutation from './graphql/issue_set_title.mutation.graphql';
+import groupBoardQuery from './graphql/group_board.query.graphql';
+import projectBoardQuery from './graphql/project_board.query.graphql';
 
 /* eslint-disable-next-line @gitlab/require-i18n-strings */
 export const AssigneeIdParamValues = ['Any', 'None'];
@@ -59,6 +61,15 @@ export const INCIDENT = 'INCIDENT';
 
 export const flashAnimationDuration = 2000;
 
+export const boardQuery = {
+  [BoardType.group]: {
+    query: groupBoardQuery,
+  },
+  [BoardType.project]: {
+    query: projectBoardQuery,
+  },
+};
+
 export const listsQuery = {
   [issuableTypes.issue]: {
     query: boardListsQuery,
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 968832a092d..a44684ab12d 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -24,6 +24,7 @@ const apolloProvider = new VueApollo({
 
 function mountBoardApp(el) {
   const { boardId, groupId, fullPath, rootPath } = el.dataset;
+  const isApolloBoard = window.gon?.features?.apolloBoards;
 
   const rawFilterParams = queryToObject(window.location.search, { gatherArrays: true });
 
@@ -33,20 +34,22 @@ function mountBoardApp(el) {
 
   const boardType = el.dataset.parent;
 
-  store.dispatch('fetchBoard', {
-    fullPath,
-    fullBoardId: fullBoardId(boardId),
-    boardType,
-  });
+  if (!isApolloBoard) {
+    store.dispatch('fetchBoard', {
+      fullPath,
+      fullBoardId: fullBoardId(boardId),
+      boardType,
+    });
 
-  store.dispatch('setInitialBoardData', {
-    boardId,
-    fullBoardId: fullBoardId(boardId),
-    fullPath,
-    boardType,
-    disabled: parseBoolean(el.dataset.disabled) || true,
-    issuableType: issuableTypes.issue,
-  });
+    store.dispatch('setInitialBoardData', {
+      boardId,
+      fullBoardId: fullBoardId(boardId),
+      fullPath,
+      boardType,
+      disabled: parseBoolean(el.dataset.disabled) || true,
+      issuableType: issuableTypes.issue,
+    });
+  }
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -55,8 +58,8 @@ function mountBoardApp(el) {
     store,
     apolloProvider,
     provide: {
-      isApolloBoard: window.gon?.features?.apolloBoards,
-      fullBoardId: fullBoardId(boardId),
+      isApolloBoard,
+      initialBoardId: fullBoardId(boardId),
       disabled: parseBoolean(el.dataset.disabled),
       groupId: Number(groupId),
       rootPath,