diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_content_sidebar.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_content_sidebar.vue | 64 |
1 files changed, 62 insertions, 2 deletions
diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue index e0105d63d99..9bbb8a1a1b2 100644 --- a/app/assets/javascripts/boards/components/board_content_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue @@ -3,15 +3,18 @@ import { GlDrawer } from '@gitlab/ui'; import { MountingPortal } from 'portal-vue'; import { mapState, mapActions, mapGetters } from 'vuex'; import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdown_widget.vue'; +import { __, sprintf } from '~/locale'; import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue'; import BoardSidebarTimeTracker from '~/boards/components/sidebar/board_sidebar_time_tracker.vue'; import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue'; import { ISSUABLE } from '~/boards/constants'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue'; import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue'; import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue'; import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue'; import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue'; +import SidebarLabelsWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { @@ -23,6 +26,7 @@ export default { SidebarConfidentialityWidget, BoardSidebarTimeTracker, BoardSidebarLabelsSelect, + SidebarLabelsWidget, SidebarSubscriptionsWidget, SidebarDropdownWidget, SidebarTodoWidget, @@ -46,16 +50,20 @@ export default { weightFeatureAvailable: { default: false, }, + allowLabelEdit: { + default: false, + }, }, inheritAttrs: false, computed: { ...mapGetters([ + 'isGroupBoard', 'isSidebarOpen', 'activeBoardItem', 'groupPathForActiveIssue', 'projectPathForActiveIssue', ]), - ...mapState(['sidebarType', 'issuableType']), + ...mapState(['sidebarType', 'issuableType', 'isSettingLabels']), isIssuableSidebar() { return this.sidebarType === ISSUABLE; }, @@ -65,17 +73,48 @@ export default { fullPath() { return this.activeBoardItem?.referencePath?.split('#')[0] || ''; }, + createLabelTitle() { + return sprintf(__('Create %{workspace} label'), { + workspace: this.isGroupBoard ? 'group' : 'project', + }); + }, + manageLabelTitle() { + return sprintf(__('Manage %{workspace} labels'), { + workspace: this.isGroupBoard ? 'group' : 'project', + }); + }, + attrWorkspacePath() { + return this.isGroupBoard ? this.groupPathForActiveIssue : undefined; + }, }, methods: { ...mapActions([ 'toggleBoardItem', 'setAssignees', 'setActiveItemConfidential', + 'setActiveBoardItemLabels', 'setActiveItemWeight', ]), handleClose() { this.toggleBoardItem({ boardItem: this.activeBoardItem, sidebarType: this.sidebarType }); }, + handleUpdateSelectedLabels(input) { + this.setActiveBoardItemLabels({ + iid: this.activeBoardItem.iid, + projectPath: this.projectPathForActiveIssue, + addLabelIds: input.map((label) => getIdFromGraphQLId(label.id)), + removeLabelIds: this.activeBoardItem.labels + .filter((label) => !input.find((selected) => selected.id === label.id)) + .map((label) => label.id), + }); + }, + handleLabelRemove(input) { + this.setActiveBoardItemLabels({ + iid: this.activeBoardItem.iid, + projectPath: this.projectPathForActiveIssue, + removeLabelIds: [input], + }); + }, }, }; </script> @@ -160,7 +199,28 @@ export default { :issuable-type="issuableType" data-testid="sidebar-due-date" /> - <board-sidebar-labels-select class="block labels" /> + <sidebar-labels-widget + v-if="glFeatures.labelsWidget" + class="block labels" + data-testid="sidebar-labels" + :iid="activeBoardItem.iid" + :full-path="projectPathForActiveIssue" + :allow-label-remove="allowLabelEdit" + :allow-multiselect="true" + :selected-labels="activeBoardItem.labels" + :labels-select-in-progress="isSettingLabels" + :footer-create-label-title="createLabelTitle" + :footer-manage-label-title="manageLabelTitle" + :labels-create-title="createLabelTitle" + :labels-filter-base-path="projectPathForActiveIssue" + :attr-workspace-path="attrWorkspacePath" + :issuable-type="issuableType" + @onLabelRemove="handleLabelRemove" + @updateSelectedLabels="handleUpdateSelectedLabels" + > + {{ __('None') }} + </sidebar-labels-widget> + <board-sidebar-labels-select v-else class="block labels" /> <sidebar-weight-widget v-if="weightFeatureAvailable" :iid="activeBoardItem.iid" |