diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-29 06:08:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-29 06:08:22 +0300 |
commit | f26311e23466947e3b57914341866aa440e67267 (patch) | |
tree | 5e23f61d79bfb8ef6b8fb745f46d21401b141c04 /app/assets/javascripts/boards | |
parent | 2c99b3e0f38bd94ace525f35469dae1eda051c16 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/boards')
8 files changed, 106 insertions, 111 deletions
diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue index 28f4a267077..858aabb0f05 100644 --- a/app/assets/javascripts/boards/components/board_app.vue +++ b/app/assets/javascripts/boards/components/board_app.vue @@ -2,11 +2,13 @@ import { mapActions, mapGetters } from 'vuex'; import BoardContent from '~/boards/components/board_content.vue'; import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue'; +import BoardTopBar from '~/boards/components/board_top_bar.vue'; export default { components: { BoardContent, BoardSettingsSidebar, + BoardTopBar, }, inject: ['disabled'], computed: { @@ -23,6 +25,7 @@ export default { <template> <div class="boards-app gl-relative" :class="{ 'is-compact': isSidebarOpen }"> + <board-top-bar /> <board-content :disabled="disabled" /> <board-settings-sidebar /> </div> diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue index 5fcf9514708..aba1f42ead5 100644 --- a/app/assets/javascripts/boards/components/board_form.vue +++ b/app/assets/javascripts/boards/components/board_form.vue @@ -48,7 +48,7 @@ export default { fullPath: { default: '', }, - rootPath: { + boardBaseUrl: { default: '', }, }, @@ -209,7 +209,7 @@ export default { if (this.isDeleteForm) { try { await this.deleteBoard(); - visitUrl(this.rootPath); + visitUrl(this.boardBaseUrl); } catch { this.setError({ message: this.$options.i18n.deleteErrorMessage }); } finally { diff --git a/app/assets/javascripts/boards/components/board_top_bar.vue b/app/assets/javascripts/boards/components/board_top_bar.vue new file mode 100644 index 00000000000..f90ac1e9079 --- /dev/null +++ b/app/assets/javascripts/boards/components/board_top_bar.vue @@ -0,0 +1,54 @@ +<script> +import { mapGetters } from 'vuex'; +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 ConfigToggle from './config_toggle.vue'; +import NewBoardButton from './new_board_button.vue'; +import ToggleFocus from './toggle_focus.vue'; + +export default { + components: { + BoardAddNewColumnTrigger, + BoardsSelector, + IssueBoardFilteredSearch, + ConfigToggle, + NewBoardButton, + ToggleFocus, + ToggleLabels: () => import('ee_component/boards/components/toggle_labels.vue'), + ToggleEpicsSwimlanes: () => import('ee_component/boards/components/toggle_epics_swimlanes.vue'), + EpicBoardFilteredSearch: () => + import('ee_component/boards/components/epic_filtered_search.vue'), + }, + inject: ['swimlanesFeatureAvailable', 'canAdminList', 'isSignedIn'], + computed: { + ...mapGetters(['isEpicBoard']), + }, +}; +</script> + +<template> + <div class="issues-filters"> + <div + class="issues-details-filters filtered-search-block gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row row-content-block second-block" + > + <div + class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-flex-grow-1 gl-lg-mb-0! mb-md-2 mb-sm-0 gl-w-full" + > + <boards-selector /> + <new-board-button /> + <epic-board-filtered-search v-if="isEpicBoard" /> + <issue-board-filtered-search v-else /> + </div> + <div + class="filter-dropdown-container gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-align-items-flex-start" + > + <toggle-labels /> + <toggle-epics-swimlanes v-if="swimlanesFeatureAvailable && isSignedIn" /> + <config-toggle /> + <board-add-new-column-trigger v-if="canAdminList" /> + <toggle-focus /> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue index 91fdfd668fc..8333856e996 100644 --- a/app/assets/javascripts/boards/components/boards_selector.vue +++ b/app/assets/javascripts/boards/components/boards_selector.vue @@ -40,37 +40,21 @@ export default { directives: { GlModalDirective, }, - inject: ['fullPath'], + inject: [ + 'boardBaseUrl', + 'fullPath', + 'canAdminBoard', + 'multipleIssueBoardsAvailable', + 'hasMissingBoards', + 'scopedIssueBoardFeatureEnabled', + 'weights', + ], props: { throttleDuration: { type: Number, default: 200, required: false, }, - boardBaseUrl: { - type: String, - required: true, - }, - hasMissingBoards: { - type: Boolean, - required: true, - }, - canAdminBoard: { - type: Boolean, - required: true, - }, - multipleIssueBoardsAvailable: { - type: Boolean, - required: true, - }, - scopedIssueBoardFeatureEnabled: { - type: Boolean, - required: true, - }, - weights: { - type: Array, - required: true, - }, }, data() { return { diff --git a/app/assets/javascripts/boards/components/config_toggle.vue b/app/assets/javascripts/boards/components/config_toggle.vue index f39e4d90357..4746f598ab7 100644 --- a/app/assets/javascripts/boards/components/config_toggle.vue +++ b/app/assets/javascripts/boards/components/config_toggle.vue @@ -14,16 +14,7 @@ export default { GlModalDirective, }, mixins: [Tracking.mixin()], - props: { - canAdminList: { - type: Boolean, - required: true, - }, - hasScope: { - type: Boolean, - required: true, - }, - }, + inject: ['canAdminList', 'hasScope'], computed: { buttonText() { return this.canAdminList ? s__('Boards|Edit board') : s__('Boards|View scope'); diff --git a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue index 6bfdbb674a2..bab6fe26978 100644 --- a/app/assets/javascripts/boards/components/issue_board_filtered_search.vue +++ b/app/assets/javascripts/boards/components/issue_board_filtered_search.vue @@ -41,17 +41,7 @@ export default { confidential: __('Confidential'), }, components: { BoardFilteredSearch }, - inject: ['isSignedIn', 'releasesFetchPath'], - props: { - fullPath: { - type: String, - required: true, - }, - boardType: { - type: String, - required: true, - }, - }, + inject: ['isSignedIn', 'releasesFetchPath', 'fullPath', 'boardType'], computed: { isGroupBoard() { return this.boardType === BoardType.group; diff --git a/app/assets/javascripts/boards/components/toggle_focus.vue b/app/assets/javascripts/boards/components/toggle_focus.vue index 49f5e7d20a9..0169c9c72ed 100644 --- a/app/assets/javascripts/boards/components/toggle_focus.vue +++ b/app/assets/javascripts/boards/components/toggle_focus.vue @@ -10,12 +10,6 @@ export default { directives: { GlTooltip, }, - props: { - issueBoardsContentSelector: { - type: String, - required: true, - }, - }, data() { return { isFullscreen: false, @@ -25,7 +19,7 @@ export default { toggleFocusMode() { hide(this.$refs.toggleFocusModeButton); - const issueBoardsContent = document.querySelector(this.issueBoardsContentSelector); + const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board'); issueBoardsContent.classList.toggle('is-focused'); this.isFullscreen = !this.isFullscreen; diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index b31b56e6839..2abc283c5b4 100644 --- a/app/assets/javascripts/boards/index.js +++ b/app/assets/javascripts/boards/index.js @@ -1,22 +1,20 @@ import PortalVue from 'portal-vue'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; - -import toggleEpicsSwimlanes from 'ee_else_ce/boards/toggle_epics_swimlanes'; -import toggleLabels from 'ee_else_ce/boards/toggle_labels'; -import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue'; import BoardApp from '~/boards/components/board_app.vue'; import '~/boards/filters/due_date_filters'; import { issuableTypes } from '~/boards/constants'; -import initBoardsFilteredSearch from '~/boards/mount_filtered_search_issue_boards'; import store from '~/boards/stores'; -import toggleFocusMode from '~/boards/toggle_focus'; -import { NavigationType, isLoggedIn, parseBoolean } from '~/lib/utils/common_utils'; +import { + NavigationType, + isLoggedIn, + parseBoolean, + convertObjectPropsToCamelCase, +} from '~/lib/utils/common_utils'; +import { queryToObject } from '~/lib/utils/url_utility'; import { fullBoardId } from './boards_util'; -import boardConfigToggle from './config_toggle'; import initNewBoard from './new_board'; import { gqlClient } from './graphql'; -import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher'; Vue.use(VueApollo); Vue.use(PortalVue); @@ -28,6 +26,12 @@ const apolloProvider = new VueApollo({ function mountBoardApp(el) { const { boardId, groupId, fullPath, rootPath } = el.dataset; + const rawFilterParams = queryToObject(window.location.search, { gatherArrays: true }); + + const initialFilterParams = { + ...convertObjectPropsToCamelCase(rawFilterParams), + }; + store.dispatch('fetchBoard', { fullPath, fullBoardId: fullBoardId(boardId), @@ -54,26 +58,41 @@ function mountBoardApp(el) { boardId, groupId: Number(groupId), rootPath, + fullPath, + initialFilterParams, + boardBaseUrl: el.dataset.boardBaseUrl, + boardType: el.dataset.parent, currentUserId: gon.current_user_id || null, - canUpdate: parseBoolean(el.dataset.canUpdate), - canAdminList: parseBoolean(el.dataset.canAdminList), + boardWeight: el.dataset.boardWeight ? parseInt(el.dataset.boardWeight, 10) : null, labelsManagePath: el.dataset.labelsManagePath, labelsFilterBasePath: el.dataset.labelsFilterBasePath, + releasesFetchPath: el.dataset.releasesFetchPath, timeTrackingLimitToHours: parseBoolean(el.dataset.timeTrackingLimitToHours), + issuableType: issuableTypes.issue, + emailsDisabled: parseBoolean(el.dataset.emailsDisabled), + hasScope: parseBoolean(el.dataset.hasScope), + hasMissingBoards: parseBoolean(el.dataset.hasMissingBoards), + weights: el.dataset.weights ? JSON.parse(el.dataset.weights) : [], + // Permissions + canUpdate: parseBoolean(el.dataset.canUpdate), + canAdminList: parseBoolean(el.dataset.canAdminList), + canAdminBoard: parseBoolean(el.dataset.canAdminBoard), + allowLabelCreate: parseBoolean(el.dataset.canUpdate), + allowLabelEdit: parseBoolean(el.dataset.canUpdate), + isSignedIn: isLoggedIn(), + // Features multipleAssigneesFeatureAvailable: parseBoolean(el.dataset.multipleAssigneesFeatureAvailable), epicFeatureAvailable: parseBoolean(el.dataset.epicFeatureAvailable), iterationFeatureAvailable: parseBoolean(el.dataset.iterationFeatureAvailable), weightFeatureAvailable: parseBoolean(el.dataset.weightFeatureAvailable), - boardWeight: el.dataset.boardWeight ? parseInt(el.dataset.boardWeight, 10) : null, scopedLabelsAvailable: parseBoolean(el.dataset.scopedLabels), milestoneListsAvailable: parseBoolean(el.dataset.milestoneListsAvailable), assigneeListsAvailable: parseBoolean(el.dataset.assigneeListsAvailable), iterationListsAvailable: parseBoolean(el.dataset.iterationListsAvailable), - issuableType: issuableTypes.issue, - emailsDisabled: parseBoolean(el.dataset.emailsDisabled), - allowLabelCreate: parseBoolean(el.dataset.canUpdate), - allowLabelEdit: parseBoolean(el.dataset.canUpdate), allowScopedLabels: parseBoolean(el.dataset.scopedLabels), + swimlanesFeatureAvailable: gon.licensed_features?.swimlanes, + multipleIssueBoardsAvailable: parseBoolean(el.dataset.multipleBoardsAvailable), + scopedIssueBoardFeatureEnabled: parseBoolean(el.dataset.scopedIssueBoardFeatureEnabled), }, render: (createComponent) => createComponent(BoardApp), }); @@ -92,47 +111,7 @@ export default () => { } }); - const { releasesFetchPath, epicFeatureAvailable, iterationFeatureAvailable } = $boardApp.dataset; - initBoardsFilteredSearch( - apolloProvider, - isLoggedIn(), - releasesFetchPath, - parseBoolean(epicFeatureAvailable), - parseBoolean(iterationFeatureAvailable), - ); - mountBoardApp($boardApp); - const createColumnTriggerEl = document.querySelector('.js-create-column-trigger'); - if (createColumnTriggerEl) { - // eslint-disable-next-line no-new - new Vue({ - el: createColumnTriggerEl, - name: 'BoardAddNewColumnTriggerRoot', - components: { - BoardAddNewColumnTrigger, - }, - store, - render(createElement) { - return createElement('board-add-new-column-trigger'); - }, - }); - } - - boardConfigToggle(); initNewBoard(); - - toggleFocusMode(); - toggleLabels(); - - if (gon.licensed_features?.swimlanes) { - toggleEpicsSwimlanes(); - } - - mountMultipleBoardsSwitcher({ - fullPath: $boardApp.dataset.fullPath, - rootPath: $boardApp.dataset.boardsEndpoint, - allowScopedLabels: $boardApp.dataset.scopedLabels, - labelsManagePath: $boardApp.dataset.labelsManagePath, - }); }; |