Fix missing create/manage label actions

- Fixes missing create/manage label actions.
- Fixes a bug which happened due to
`gon.suggested_label_colors` converted to map from
array.

app/assets/javascripts/boards/components/board_form.vue

@@ -29,6 +29,10 @@ export default {
       type: String,
       required: true,
     },
+    labelsWebUrl: {
+      type: String,
+      required: true,
+    },
     scopedIssueBoardFeatureEnabled: {
       type: Boolean,
       required: false,
@@ -198,6 +202,7 @@ export default {
           :board="board"
           :can-admin-board="canAdminBoard"
           :labels-path="labelsPath"
+          :labels-web-url="labelsWebUrl"
           :enable-scoped-labels="enableScopedLabels"
           :project-id="projectId"
           :group-id="groupId"

app/assets/javascripts/boards/components/boards_selector.vue

@@ -61,6 +61,10 @@ export default {
       type: String,
       required: true,
     },
+    labelsWebUrl: {
+      type: String,
+      required: true,
+    },
     projectId: {
       type: Number,
       required: true,
@@ -332,6 +336,7 @@ export default {
       <board-form
         v-if="currentPage"
         :labels-path="labelsPath"
+        :labels-web-url="labelsWebUrl"
         :project-id="projectId"
         :group-id="groupId"
         :can-admin-board="canAdminBoard"

app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue

@@ -14,7 +14,10 @@ import DropdownSearchInput from './dropdown_search_input.vue';
 import DropdownFooter from './dropdown_footer.vue';
 import DropdownCreateLabel from './dropdown_create_label.vue';
 
+import { DropdownVariant } from '../labels_select_vue/constants';
+
 export default {
+  DropdownVariant,
   components: {
     DropdownTitle,
     DropdownValue,
@@ -80,6 +83,11 @@ export default {
       required: false,
       default: false,
     },
+    variant: {
+      type: String,
+      required: false,
+      default: DropdownVariant.Sidebar,
+    },
   },
   computed: {
     hiddenInputName() {
@@ -123,7 +131,7 @@ export default {
 <template>
   <div class="block labels js-labels-block">
     <dropdown-value-collapsed
-      v-if="showCreate"
+      v-if="showCreate && variant === $options.DropdownVariant.Sidebar"
       :labels="context.labels"
       @onValueClick="handleCollapsedValueClick"
     />
@@ -150,18 +158,21 @@ export default {
           :labels-path="labelsPath"
           :namespace="namespace"
           :labels="context.labels"
-          :show-extra-options="!showCreate"
+          :show-extra-options="!showCreate || variant !== $options.DropdownVariant.Sidebar"
           :enable-scoped-labels="enableScopedLabels"
         />
         <div
-          class="dropdown-menu dropdown-select dropdown-menu-paging
-dropdown-menu-labels dropdown-menu-selectable"
+          class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable"
         >
           <div class="dropdown-page-one">
-            <dropdown-header v-if="showCreate" />
+            <dropdown-header v-if="showCreate && variant === $options.DropdownVariant.Sidebar" />
             <dropdown-search-input />
             <div class="dropdown-content" data-qa-selector="labels_dropdown_content"></div>
-            <div class="dropdown-loading"><gl-loading-icon /></div>
+            <div class="dropdown-loading">
+              <gl-loading-icon
+                class="gl-display-flex gl-justify-content-center gl-align-items-center gl-h-full"
+              />
+            </div>
             <dropdown-footer
               v-if="showCreate"
               :labels-web-url="labelsWebUrl"

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue

 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     headerTitle: {
       type: String,
@@ -10,7 +14,11 @@ export default {
     },
   },
   created() {
-    this.suggestedColors = gon.suggested_label_colors;
+    const rawLabelsColors = gon.suggested_label_colors;
+    this.suggestedColors = Object.keys(rawLabelsColors).map(colorCode => ({
+      colorCode,
+      title: rawLabelsColors[colorCode],
+    }));
   },
 };
 </script>
@@ -46,10 +54,12 @@ export default {
         <a
           v-for="(color, index) in suggestedColors"
           :key="index"
-          :data-color="color"
+          v-gl-tooltip
+          :data-color="color.colorCode"
           :style="{
-            backgroundColor: color,
+            backgroundColor: color.colorCode,
           }"
+          :title="color.title"
           href="#"
         >
           &nbsp;

app/assets/stylesheets/framework/dropdowns.scss

@@ -171,6 +171,13 @@
   }
 }
 
+.labels {
+  // Prevent double scroll-bars for labels dropdown.
+  .dropdown-menu-toggle.wide + .dropdown-select {
+    max-height: unset;
+  }
+}
+
 .gl-dropdown .dropdown-menu-toggle {
   padding-right: $gl-padding-8;
 

app/views/shared/boards/_switcher.html.haml

@@ -10,6 +10,7 @@
     can_admin_board: can?(current_user, :admin_board, parent).to_s,
     multiple_issue_boards_available: parent.multiple_issue_boards_available?.to_s,
     labels_path: labels_filter_path_with_defaults(only_group_labels: true, include_descendant_groups: true),
+    labels_web_url: parent.is_a?(Project) ? project_labels_path(@project) : group_labels_path(@group),
     project_id: @project&.id,
     group_id: @group&.id,
     scoped_issue_board_feature_enabled: Gitlab.ee? && parent.feature_available?(:scoped_issue_board) ? 'true' : 'false',

changelogs/unreleased/kp-fix-missing-create-manage-labels-issue-board.yml

+---
+title: Fix create & manage label actions in Labels dropdown
+merge_request: 40511
+author:
+type: fixed

ee/app/assets/javascripts/boards/components/board_scope.vue

@@ -31,6 +31,10 @@ export default {
       type: String,
       required: true,
     },
+    labelsWebUrl: {
+      type: String,
+      required: true,
+    },
     enableScopedLabels: {
       type: Boolean,
       required: false,
@@ -110,13 +114,15 @@ export default {
       <board-labels-select
         :context="board"
         :labels-path="labelsPath"
+        :labels-web-url="labelsWebUrl"
         :can-edit="canAdminBoard"
+        :show-create="canAdminBoard"
         :enable-scoped-labels="enableScopedLabels"
+        variant="standalone"
         ability-name="issue"
         @onLabelClick="handleLabelClick"
+        >{{ __('Any label') }}</board-labels-select
       >
-        {{ __('Any label') }}
-      </board-labels-select>
 
       <assignee-select
         :board="board"

ee/spec/features/boards/scoped_issue_board_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Scoped issue boards', :js do
   include FilteredSearchHelpers
+  include MobileHelpers
 
   let(:user) { create(:user) }
   let(:group) { create(:group, :public) }
@@ -34,10 +35,16 @@ RSpec.describe 'Scoped issue boards', :js do
 
       login_as(user)
 
+      # ensure there is enough vertical space for create/edit board modal
+      resize_window(1920, 1080)
       visit project_boards_path(project)
       wait_for_requests
     end
 
+    after do
+      restore_window_size
+    end
+
     context 'new board' do
       context 'milestone' do
         it 'creates board filtering by milestone' do

ee/spec/frontend/boards/components/board_scope_spec.js

@@ -15,6 +15,7 @@ describe('BoardScope', () => {
         assignee: {},
       },
       labelsPath: `${TEST_HOST}/labels`,
+      labelsWebUrl: `${TEST_HOST}/-/labels`,
     };
 
     wrapper = mount(BoardScope, {

spec/frontend/boards/components/board_form_spec.js

@@ -11,6 +11,7 @@ describe('board_form.vue', () => {
   const propsData = {
     canAdminBoard: false,
     labelsPath: `${TEST_HOST}/labels/path`,
+    labelsWebUrl: `${TEST_HOST}/-/labels`,
   };
 
   const findModal = () => wrapper.find(DeprecatedModal);

spec/frontend/boards/components/boards_selector_spec.js

@@ -86,6 +86,7 @@ describe('BoardsSelector', () => {
         canAdminBoard: true,
         multipleIssueBoardsAvailable: true,
         labelsPath: `${TEST_HOST}/labels/path`,
+        labelsWebUrl: `${TEST_HOST}/labels`,
         projectId: 42,
         groupId: 19,
         scopedIssueBoardFeatureEnabled: true,

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js

@@ -14,6 +14,7 @@ const createComponent = headerTitle => {
 };
 
 describe('DropdownCreateLabelComponent', () => {
+  const colorsCount = Object.keys(mockSuggestedColors).length;
   let vm;
 
   beforeEach(() => {
@@ -27,7 +28,7 @@ describe('DropdownCreateLabelComponent', () => {
 
   describe('created', () => {
     it('initializes `suggestedColors` prop on component from `gon.suggested_color_labels` object', () => {
-      expect(vm.suggestedColors.length).toBe(mockSuggestedColors.length);
+      expect(vm.suggestedColors.length).toBe(colorsCount);
     });
   });
 
@@ -78,11 +79,11 @@ describe('DropdownCreateLabelComponent', () => {
       const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown');
 
       expect(colorsListContainerEl).not.toBe(null);
-      expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length);
+      expect(colorsListContainerEl.querySelectorAll('a').length).toBe(colorsCount);
 
       const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0];
 
-      expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]);
+      expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0].colorCode);
       expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);');
     });
 

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

@@ -15,29 +15,29 @@ export const mockLabels = [
   },
 ];
 
-export const mockSuggestedColors = [
-  '#0033CC',
-  '#428BCA',
-  '#44AD8E',
-  '#A8D695',
-  '#5CB85C',
-  '#69D100',
-  '#004E00',
-  '#34495E',
-  '#7F8C8D',
-  '#A295D6',
-  '#5843AD',
-  '#8E44AD',
-  '#FFECDB',
-  '#AD4363',
-  '#D10069',
-  '#CC0033',
-  '#FF0000',
-  '#D9534F',
-  '#D1D100',
-  '#F0AD4E',
-  '#AD8D43',
-];
+export const mockSuggestedColors = {
+  '#0033CC': 'UA blue',
+  '#428BCA': 'Moderate blue',
+  '#44AD8E': 'Lime green',
+  '#A8D695': 'Feijoa',
+  '#5CB85C': 'Slightly desaturated green',
+  '#69D100': 'Bright green',
+  '#004E00': 'Very dark lime green',
+  '#34495E': 'Very dark desaturated blue',
+  '#7F8C8D': 'Dark grayish cyan',
+  '#A295D6': 'Slightly desaturated blue',
+  '#5843AD': 'Dark moderate blue',
+  '#8E44AD': 'Dark moderate violet',
+  '#FFECDB': 'Very pale orange',
+  '#AD4363': 'Dark moderate pink',
+  '#D10069': 'Strong pink',
+  '#CC0033': 'Strong red',
+  '#FF0000': 'Pure red',
+  '#D9534F': 'Soft red',
+  '#D1D100': 'Strong yellow',
+  '#F0AD4E': 'Soft orange',
+  '#AD8D43': 'Dark moderate orange',
+};
 
 export const mockConfig = {
   showCreate: true,