1 files changed, 27 insertions, 40 deletions

diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 2951eda1112..eaf3facb450 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -14,15 +14,16 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import BoardForm from 'ee_else_ce/boards/components/board_form.vue';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { isMetaKey } from '~/lib/utils/common_utils';
+import { updateHistory } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
 import eventHub from '../eventhub';
 import groupBoardsQuery from '../graphql/group_boards.query.graphql';
 import projectBoardsQuery from '../graphql/project_boards.query.graphql';
-import groupBoardQuery from '../graphql/group_board.query.graphql';
-import projectBoardQuery from '../graphql/project_board.query.graphql';
 import groupRecentBoardsQuery from '../graphql/group_recent_boards.query.graphql';
 import projectRecentBoardsQuery from '../graphql/project_recent_boards.query.graphql';
+import { fullBoardId } from '../boards_util';
 
 const MIN_BOARDS_TO_VIEW_RECENT = 10;
 
@@ -69,48 +70,15 @@ export default {
       maxPosition: 0,
       filterTerm: '',
       currentPage: '',
-      board: {},
     };
   },
-  apollo: {
-    board: {
-      query() {
-        return this.currentBoardQuery;
-      },
-      variables() {
-        return {
-          fullPath: this.fullPath,
-          boardId: this.fullBoardId,
-        };
-      },
-      update(data) {
-        const board = data.workspace?.board;
-        this.setBoardConfig(board);
-        return {
-          ...board,
-          labels: board?.labels?.nodes,
-        };
-      },
-      error() {
-        this.setError({ message: this.$options.i18n.errorFetchingBoard });
-      },
-    },
-  },
+
   computed: {
-    ...mapState(['boardType', 'fullBoardId']),
+    ...mapState(['boardType', 'board', 'isBoardLoading']),
     ...mapGetters(['isGroupBoard', 'isProjectBoard']),
     parentType() {
       return this.boardType;
     },
-    currentBoardQueryCE() {
-      return this.isGroupBoard ? groupBoardQuery : projectBoardQuery;
-    },
-    currentBoardQuery() {
-      return this.currentBoardQueryCE;
-    },
-    isBoardLoading() {
-      return this.$apollo.queries.board.loading;
-    },
     loading() {
       return this.loadingRecentBoards || Boolean(this.loadingBoards);
     },
@@ -147,6 +115,9 @@ export default {
       this.scrollFadeInitialized = false;
       this.$nextTick(this.setScrollFade);
     },
+    board(newBoard) {
+      document.title = newBoard.name;
+    },
   },
   created() {
     eventHub.$on('showBoardModal', this.showPage);
@@ -155,7 +126,7 @@ export default {
     eventHub.$off('showBoardModal', this.showPage);
   },
   methods: {
-    ...mapActions(['setError', 'setBoardConfig']),
+    ...mapActions(['setError', 'fetchBoard', 'unsetActiveId']),
     showPage(page) {
       this.currentPage = page;
     },
@@ -231,6 +202,22 @@ export default {
 
       this.hasScrollFade = this.isScrolledUp();
     },
+    fetchCurrentBoard(boardId) {
+      this.fetchBoard({
+        fullPath: this.fullPath,
+        fullBoardId: fullBoardId(boardId),
+        boardType: this.boardType,
+      });
+    },
+    async switchBoard(boardId, e) {
+      if (isMetaKey(e)) {
+        window.open(`${this.boardBaseUrl}/${boardId}`, '_blank');
+      } else {
+        this.unsetActiveId();
+        this.fetchCurrentBoard(boardId);
+        updateHistory({ url: `${this.boardBaseUrl}/${boardId}` });
+      }
+    },
   },
   i18n: {
     errorFetchingBoard: s__('Board|An error occurred while fetching the board, please try again.'),
@@ -277,8 +264,8 @@ export default {
             <gl-dropdown-item
               v-for="recentBoard in recentBoards"
               :key="`recent-${recentBoard.id}`"
-              :href="`${boardBaseUrl}/${recentBoard.id}`"
               data-testid="dropdown-item"
+              @click.prevent="switchBoard(recentBoard.id, $event)"
             >
               {{ recentBoard.name }}
             </gl-dropdown-item>
@@ -293,8 +280,8 @@ export default {
           <gl-dropdown-item
             v-for="otherBoard in filteredBoards"
             :key="otherBoard.id"
-            :href="`${boardBaseUrl}/${otherBoard.id}`"
             data-testid="dropdown-item"
+            @click.prevent="switchBoard(otherBoard.id, $event)"
           >
             {{ otherBoard.name }}
           </gl-dropdown-item>