diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/boards_selector.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/boards_selector.vue | 38 |
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> |