Board sidebar - Migrate labels select to widget [RUN AS-IF-FOSS]

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"

app/assets/javascripts/boards/index.js

@@ -87,6 +87,9 @@ function mountBoardApp(el) {
       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),
     },
     render: (createComponent) => createComponent(BoardApp),
   });

app/assets/javascripts/boards/stores/actions.js

@@ -656,6 +656,7 @@ export default {
   },
 
   setActiveIssueLabels: async ({ commit, getters }, input) => {
+    commit(types.SET_LABELS_LOADING, true);
     const { activeBoardItem } = getters;
     const { data } = await gqlClient.mutate({
       mutation: issueSetLabelsMutation,
@@ -669,6 +670,8 @@ export default {
       },
     });
 
+    commit(types.SET_LABELS_LOADING, false);
+
     if (data.updateIssue?.errors?.length > 0) {
       throw new Error(data.updateIssue.errors);
     }

app/assets/javascripts/boards/stores/mutation_types.js

@@ -28,6 +28,7 @@ export const ADD_BOARD_ITEM_TO_LIST = 'ADD_BOARD_ITEM_TO_LIST';
 export const REMOVE_BOARD_ITEM_FROM_LIST = 'REMOVE_BOARD_ITEM_FROM_LIST';
 export const SET_ACTIVE_ID = 'SET_ACTIVE_ID';
 export const UPDATE_BOARD_ITEM_BY_ID = 'UPDATE_BOARD_ITEM_BY_ID';
+export const SET_LABELS_LOADING = 'SET_LABELS_LOADING';
 export const SET_ASSIGNEE_LOADING = 'SET_ASSIGNEE_LOADING';
 export const RESET_ISSUES = 'RESET_ISSUES';
 export const REQUEST_GROUP_PROJECTS = 'REQUEST_GROUP_PROJECTS';

app/assets/javascripts/boards/stores/mutations.js

@@ -195,6 +195,10 @@ export default {
     Vue.set(state.boardItems[itemId], prop, value);
   },
 
+  [mutationTypes.SET_LABELS_LOADING](state, isLoading) {
+    state.isSettingLabels = isLoading;
+  },
+
   [mutationTypes.SET_ASSIGNEE_LOADING](state, isLoading) {
     state.isSettingAssignees = isLoading;
   },

app/assets/javascripts/boards/stores/state.js

@@ -12,6 +12,7 @@ export default () => ({
   listsFlags: {},
   boardItemsByListId: {},
   backupItemsList: [],
+  isSettingLabels: false,
   isSettingAssignees: false,
   pageInfoByListId: {},
   boardItems: {},

app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue

@@ -36,6 +36,7 @@ export default {
     'allowLabelEdit',
     'allowScopedLabels',
     'iid',
+    'fullPath',
     'initiallySelectedLabels',
     'issuableType',
     'labelsFetchPath',
@@ -145,6 +146,8 @@ export default {
   <labels-select-widget
     v-if="glFeatures.labelsWidget"
     class="block labels js-labels-block"
+    :iid="iid"
+    :full-path="fullPath"
     :allow-label-remove="allowLabelEdit"
     :allow-multiselect="true"
     :footer-create-label-title="__('Create project label')"

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue

@@ -57,6 +57,15 @@ export default {
       required: false,
       default: false,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    attrWorkspacePath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -182,6 +191,8 @@ export default {
         :selected-labels="selectedLabels"
         :allow-multiselect="allowMultiselect"
         :issuable-type="issuableType"
+        :full-path="fullPath"
+        :attr-workspace-path="attrWorkspacePath"
         @hideCreateView="toggleDropdownContentsCreateView"
       />
     </template>

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue

@@ -19,16 +19,20 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: {
-    fullPath: {
-      default: '',
-    },
-  },
   props: {
     issuableType: {
       type: String,
       required: true,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    attrWorkspacePath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -46,11 +50,19 @@ export default {
       return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] }));
     },
     mutationVariables() {
-      return this.issuableType === IssuableType.Epic
-        ? {
+      if (this.issuableType === IssuableType.Epic) {
+        return {
           title: this.labelTitle,
           color: this.selectedColor,
           groupPath: this.fullPath,
+        };
+      }
+
+      return this.attrWorkspacePath !== undefined
+        ? {
+            title: this.labelTitle,
+            color: this.selectedColor,
+            groupPath: this.attrWorkspacePath,
           }
         : {
             title: this.labelTitle,

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue

@@ -24,7 +24,6 @@ export default {
     GlIntersectionObserver,
     LabelItem,
   },
-  inject: ['fullPath'],
   model: {
     prop: 'localSelectedLabels',
   },
@@ -45,6 +44,10 @@ export default {
       type: Array,
       required: true,
     },
+    fullPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -84,7 +87,7 @@ export default {
       return this.$apollo.queries.labels.loading;
     },
     localSelectedLabelsIds() {
-      return this.localSelectedLabels.map((label) => label.id);
+      return this.localSelectedLabels.map((label) => getIdFromGraphQLId(label.id));
     },
     visibleLabels() {
       if (this.searchKey) {
@@ -130,7 +133,9 @@ export default {
     updateSelectedLabels(label) {
       let labels;
       if (this.isLabelSelected(label)) {
-        labels = this.localSelectedLabels.filter(({ id }) => id !== getIdFromGraphQLId(label.id));
+        labels = this.localSelectedLabels.filter(
+          ({ id }) => id !== getIdFromGraphQLId(label.id) && id !== label.id,
+        );
       } else {
         labels = [
           ...this.localSelectedLabels,

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue

@@ -21,15 +21,20 @@ export default {
     SidebarEditableItem,
   },
   inject: {
-    iid: {
-      default: '',
-    },
     allowLabelEdit: {
       default: false,
     },
-    fullPath: {},
   },
   props: {
+    iid: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
     allowLabelRemove: {
       type: Boolean,
       required: false,
@@ -99,6 +104,11 @@ export default {
       type: String,
       required: true,
     },
+    attrWorkspacePath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -206,6 +216,8 @@ export default {
             :variant="variant"
             :issuable-type="issuableType"
             :is-visible="edit"
+            :full-path="fullPath"
+            :attr-workspace-path="attrWorkspacePath"
             @setLabels="handleDropdownClose"
             @closeDropdown="collapseEditableItem"
           />
@@ -224,6 +236,7 @@ export default {
       :selected-labels="selectedLabels"
       :variant="variant"
       :issuable-type="issuableType"
+      :full-path="fullPath"
       @setLabels="handleDropdownClose"
     />
   </div>

app/controllers/groups/boards_controller.rb

@@ -11,6 +11,7 @@ class Groups::BoardsController < Groups::ApplicationController
     push_frontend_feature_flag(:board_multi_select, group, default_enabled: :yaml)
     push_frontend_feature_flag(:swimlanes_buffered_rendering, group, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, group, default_enabled: :yaml)
+    push_frontend_feature_flag(:labels_widget, group, default_enabled: :yaml)
   end
 
   feature_category :boards

app/controllers/projects/boards_controller.rb

@@ -11,6 +11,7 @@ class Projects::BoardsController < Projects::ApplicationController
     push_frontend_feature_flag(:issue_boards_filtered_search, project, default_enabled: :yaml)
     push_frontend_feature_flag(:board_multi_select, project, default_enabled: :yaml)
     push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
+    push_frontend_feature_flag(:labels_widget, project, default_enabled: :yaml)
   end
 
   feature_category :boards

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -31,6 +31,7 @@ export default {
   },
   mixins: [glFeatureFlagMixin()],
   inject: [
+    'iid',
     'groupPath',
     'groupEpicsPath',
     'labelsFetchPath',
@@ -189,6 +190,8 @@ export default {
         <labels-select-widget
           v-if="glFeatures.labelsWidget"
           class="block labels js-labels-block"
+          :iid="iid"
+          :full-path="groupPath"
           :allow-label-create="true"
           :allow-multiselect="true"
           :allow-scoped-labels="false"

ee/spec/features/boards/sidebar_spec.rb

@@ -295,15 +295,15 @@ RSpec.describe 'Issue Boards', :js do
 
         wait_for_requests
 
-        click_link scoped_label_1.title
+        click_button scoped_label_1.title
 
         wait_for_requests
 
-        click_link scoped_label_2.title
+        click_button scoped_label_2.title
 
         wait_for_requests
 
-        find('[data-testid="close-icon"]').click
+        click_button 'Close'
 
         page.within('.value') do
           aggregate_failures do
@@ -335,11 +335,11 @@ RSpec.describe 'Issue Boards', :js do
 
           wait_for_requests
 
-          click_link scoped_label_2.title
+          click_button scoped_label_2.title
 
           wait_for_requests
 
-          find('[data-testid="close-icon"]').click
+          click_button 'Close'
 
           page.within('.value') do
             aggregate_failures do

ee/spec/frontend/epic/components/epic_form_spec.js

@@ -22,6 +22,7 @@ describe('ee/epic/components/epic_form.vue', () => {
   const createWrapper = ({ mutationResult = TEST_NEW_EPIC } = {}) => {
     wrapper = shallowMount(EpicForm, {
       provide: {
+        iid: '1',
         groupPath: TEST_GROUP_PATH,
         groupEpicsPath: TEST_HOST,
         labelsFetchPath: TEST_HOST,

locale/gitlab.pot

@@ -9543,6 +9543,9 @@ msgstr ""
 msgid "Create %{type}"
 msgstr ""
 
+msgid "Create %{workspace} label"
+msgstr ""
+
 msgid "Create New Directory"
 msgstr ""
 
@@ -20760,6 +20763,9 @@ msgstr ""
 msgid "Makes this issue confidential."
 msgstr ""
 
+msgid "Manage %{workspace} labels"
+msgstr ""
+
 msgid "Manage Web IDE features."
 msgstr ""
 

spec/features/boards/sidebar_labels_spec.rb

@@ -29,12 +29,11 @@ RSpec.describe 'Project issue boards sidebar labels', :js do
   end
 
   context 'labels' do
-    # https://gitlab.com/gitlab-org/gitlab/-/issues/322725
-    xit 'shows current labels when editing' do
+    it 'shows current labels when editing' do
       click_card(card)
 
       page.within('.labels') do
-        click_link 'Edit'
+        click_button 'Edit'
 
         wait_for_requests
 
@@ -54,9 +53,9 @@ RSpec.describe 'Project issue boards sidebar labels', :js do
 
         wait_for_requests
 
-        click_link bug.title
+        click_on bug.title
 
-        find('[data-testid="close-icon"]').click
+        click_button 'Close'
 
         wait_for_requests
 
@@ -79,11 +78,11 @@ RSpec.describe 'Project issue boards sidebar labels', :js do
 
         wait_for_requests
 
-        click_link bug.title
+        click_on bug.title
 
-        click_link regression.title
+        click_on regression.title
 
-        find('[data-testid="close-icon"]').click
+        click_button 'Close'
 
         wait_for_requests
 
@@ -108,9 +107,9 @@ RSpec.describe 'Project issue boards sidebar labels', :js do
 
         wait_for_requests
 
-        click_link stretch.title
+        click_button stretch.title
 
-        find('[data-testid="close-icon"]').click
+        click_button 'Close'
 
         wait_for_requests
 
@@ -125,43 +124,22 @@ RSpec.describe 'Project issue boards sidebar labels', :js do
       expect(card).not_to have_content(stretch.title)
     end
 
-    # https://gitlab.com/gitlab-org/gitlab/-/issues/324290
-    xit 'creates project label' do
+    it 'creates project label' do
       click_card(card)
 
       page.within('.labels') do
-        click_link 'Edit'
+        click_button 'Edit'
         wait_for_requests
 
-        click_link 'Create project label'
-        fill_in 'new_label_name', with: 'test label'
+        click_on 'Create project label'
+        fill_in 'Name new label', with: 'test label'
         first('.suggest-colors-dropdown a').click
         click_button 'Create'
         wait_for_requests
 
-        expect(page).to have_link 'test label'
+        expect(page).to have_button 'test label'
       end
       expect(page).to have_selector('.board', count: 3)
     end
-
-    # https://gitlab.com/gitlab-org/gitlab/-/issues/324290
-    xit 'creates project label and list' do
-      click_card(card)
-
-      page.within('.labels') do
-        click_link 'Edit'
-        wait_for_requests
-
-        click_link 'Create project label'
-        fill_in 'new_label_name', with: 'test label'
-        first('.suggest-colors-dropdown a').click
-        first('.js-add-list').click
-        click_button 'Create'
-        wait_for_requests
-
-        expect(page).to have_link 'test label'
-      end
-      expect(page).to have_selector('.board', count: 4)
-    end
   end
 end

spec/frontend/boards/stores/actions_spec.js

@@ -1577,7 +1577,7 @@ describe('setActiveIssueLabels', () => {
     projectPath: 'h/b',
   };
 
-  it('should assign labels on success', (done) => {
+  it('should assign labels on success, and sets loading state for labels', (done) => {
     jest
       .spyOn(gqlClient, 'mutate')
       .mockResolvedValue({ data: { updateIssue: { issue: { labels: { nodes: labels } } } } });
@@ -1593,6 +1593,14 @@ describe('setActiveIssueLabels', () => {
       input,
       { ...state, ...getters },
       [
+        {
+          type: types.SET_LABELS_LOADING,
+          payload: true,
+        },
+        {
+          type: types.SET_LABELS_LOADING,
+          payload: false,
+        },
         {
           type: types.UPDATE_BOARD_ITEM_BY_ID,
           payload,

spec/frontend/sidebar/sidebar_labels_spec.js

@@ -27,6 +27,7 @@ describe('sidebar labels', () => {
     labelsManagePath: '/gitlab-org/gitlab-test/-/labels',
     projectIssuesPath: '/gitlab-org/gitlab-test/-/issues',
     projectPath: 'gitlab-org/gitlab-test',
+    fullPath: 'gitlab-org/gitlab-test',
   };
 
   const $apollo = {

spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js

@@ -67,6 +67,7 @@ describe('DropdownContentsCreateView', () => {
       apolloProvider: mockApollo,
       propsData: {
         issuableType,
+        fullPath: '',
       },
     });
   };

spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js

@@ -50,8 +50,6 @@ describe('DropdownContentsLabelsView', () => {
       localVue,
       apolloProvider: mockApollo,
       provide: {
-        fullPath: 'test',
-        iid: 1,
         variant: DropdownVariant.Sidebar,
         ...injected,
       },

spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_spec.js

@@ -38,6 +38,7 @@ describe('DropdownContent', () => {
         dropdownButtonText: 'Labels',
         variant: 'sidebar',
         issuableType: 'issue',
+        fullPath: 'test',
         ...props,
       },
       data() {

spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js

@@ -46,8 +46,6 @@ describe('LabelsSelectRoot', () => {
         SidebarEditableItem,
       },
       provide: {
-        iid: '1',
-        fullPath: 'test',
         canUpdate: true,
         allowLabelEdit: true,
         allowLabelCreate: true,

spec/frontend/vue_shared/components/sidebar/labels_select_widget/mock_data.js

@@ -34,6 +34,8 @@ export const mockLabels = [
 ];
 
 export const mockConfig = {
+  iid: '1',
+  fullPath: 'test',
   allowMultiselect: true,
   labelsListTitle: 'Assign labels',
   labelsCreateTitle: 'Create label',