diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_settings_sidebar.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_settings_sidebar.vue | 53 |
1 files changed, 24 insertions, 29 deletions
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue index c089a6a39af..6b7c08d05a5 100644 --- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue @@ -3,7 +3,6 @@ import { GlButton, GlDrawer, GlLabel } from '@gitlab/ui'; import { MountingPortal } from 'portal-vue'; import { mapActions, mapState, mapGetters } from 'vuex'; import { LIST, ListType, ListTypeTitles } from '~/boards/constants'; -import boardsStore from '~/boards/stores/boards_store'; import { isScopedLabel } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; import eventHub from '~/sidebar/event_hub'; @@ -23,7 +22,7 @@ export default { import('ee_component/boards/components/board_settings_list_types.vue'), }, mixins: [glFeatureFlagMixin(), Tracking.mixin()], - inject: ['canAdminList'], + inject: ['canAdminList', 'scopedLabelsAvailable'], inheritAttrs: false, data() { return { @@ -31,20 +30,13 @@ export default { }; }, computed: { - ...mapGetters(['isSidebarOpen', 'shouldUseGraphQL', 'isEpicBoard']), + ...mapGetters(['isSidebarOpen', 'isEpicBoard']), ...mapState(['activeId', 'sidebarType', 'boardLists']), isWipLimitsOn() { return this.glFeatures.wipLimits && !this.isEpicBoard; }, activeList() { - /* - Warning: Though a computed property it is not reactive because we are - referencing a List Model class. Reactivity only applies to plain JS objects - */ - if (this.shouldUseGraphQL || this.isEpicBoard) { - return this.boardLists[this.activeId]; - } - return boardsStore.state.lists.find(({ id }) => id === this.activeId); + return this.boardLists[this.activeId] || {}; }, activeListLabel() { return this.activeList.label; @@ -68,17 +60,13 @@ export default { methods: { ...mapActions(['unsetActiveId', 'removeList']), showScopedLabels(label) { - return boardsStore.scopedLabels.enabled && isScopedLabel(label); + return this.scopedLabelsAvailable && isScopedLabel(label); }, deleteBoard() { // eslint-disable-next-line no-alert if (window.confirm(__('Are you sure you want to remove this list?'))) { - if (this.shouldUseGraphQL || this.isEpicBoard) { - this.track('click_button', { label: 'remove_list' }); - this.removeList(this.activeId); - } else { - this.activeList.destroy(); - } + this.track('click_button', { label: 'remove_list' }); + this.removeList(this.activeId); this.unsetActiveId(); } }, @@ -93,9 +81,26 @@ export default { v-bind="$attrs" class="js-board-settings-sidebar gl-absolute" :open="isSidebarOpen" + variant="sidebar" @close="unsetActiveId" > - <template #title>{{ $options.listSettingsText }}</template> + <template #title> + <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24"> + {{ $options.listSettingsText }} + </h2> + </template> + <template #header> + <div v-if="canAdminList && activeList.id" class="gl-mt-3"> + <gl-button + variant="danger" + category="secondary" + size="small" + data-testid="remove-list" + @click.stop="deleteBoard" + >{{ __('Remove list') }} + </gl-button> + </div> + </template> <template v-if="isSidebarOpen"> <div v-if="boardListType === ListType.label"> <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label> @@ -115,16 +120,6 @@ export default { v-if="isWipLimitsOn" :max-issue-count="activeList.maxIssueCount" /> - <div v-if="canAdminList && !activeList.preset && activeList.id" class="gl-mt-4"> - <gl-button - variant="danger" - category="secondary" - icon="remove" - data-testid="remove-list" - @click.stop="deleteBoard" - >{{ __('Remove list') }} - </gl-button> - </div> </template> </gl-drawer> </mounting-portal> |