1 files changed, 23 insertions, 15 deletions

diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index fcd1c3fdceb..2a064aaa885 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -1,5 +1,4 @@
 <script>
-import { throttle } from 'lodash';
 import {
   GlLoadingIcon,
   GlSearchBoxByType,
@@ -9,14 +8,16 @@ import {
   GlDropdownItem,
   GlModalDirective,
 } from '@gitlab/ui';
+import { throttle } from 'lodash';
 
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import projectQuery from '../graphql/project_boards.query.graphql';
+import eventHub from '../eventhub';
 import groupQuery from '../graphql/group_boards.query.graphql';
+import projectQuery from '../graphql/project_boards.query.graphql';
 
-import boardsStore from '../stores/boards_store';
 import BoardForm from './board_form.vue';
 
 const MIN_BOARDS_TO_VIEW_RECENT = 10;
@@ -35,6 +36,7 @@ export default {
   directives: {
     GlModalDirective,
   },
+  inject: ['fullPath', 'recentBoardsEndpoint'],
   props: {
     currentBoard: {
       type: Object,
@@ -99,12 +101,11 @@ export default {
       scrollFadeInitialized: false,
       boards: [],
       recentBoards: [],
-      state: boardsStore.state,
       throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
       contentClientHeight: 0,
       maxPosition: 0,
-      store: boardsStore,
       filterTerm: '',
+      currentPage: '',
     };
   },
   computed: {
@@ -114,16 +115,13 @@ export default {
     loading() {
       return this.loadingRecentBoards || Boolean(this.loadingBoards);
     },
-    currentPage() {
-      return this.state.currentPage;
-    },
     filteredBoards() {
       return this.boards.filter((board) =>
         board.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
       );
     },
     board() {
-      return this.state.currentBoard;
+      return this.currentBoard;
     },
     showDelete() {
       return this.boards.length > 1;
@@ -148,11 +146,17 @@ export default {
     },
   },
   created() {
-    boardsStore.setCurrentBoard(this.currentBoard);
+    eventHub.$on('showBoardModal', this.showPage);
+  },
+  beforeDestroy() {
+    eventHub.$off('showBoardModal', this.showPage);
   },
   methods: {
     showPage(page) {
-      boardsStore.showPage(page);
+      this.currentPage = page;
+    },
+    cancel() {
+      this.showPage('');
     },
     loadBoards(toggleDropdown = true) {
       if (toggleDropdown && this.boards.length > 0) {
@@ -161,7 +165,7 @@ export default {
 
       this.$apollo.addSmartQuery('boards', {
         variables() {
-          return { fullPath: this.state.endpoints.fullPath };
+          return { fullPath: this.fullPath };
         },
         query() {
           return this.groupId ? groupQuery : projectQuery;
@@ -179,8 +183,10 @@ export default {
       });
 
       this.loadingRecentBoards = true;
-      boardsStore
-        .recentBoards()
+      // Follow up to fetch recent boards using GraphQL
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/300985
+      axios
+        .get(this.recentBoardsEndpoint)
         .then((res) => {
           this.recentBoards = res.data;
         })
@@ -346,6 +352,8 @@ export default {
         :weights="weights"
         :enable-scoped-labels="enabledScopedLabels"
         :current-board="currentBoard"
+        :current-page="currentPage"
+        @cancel="cancel"
       />
     </span>
   </div>