From a1db9128e5a4dd00d01e4a6f4d2021ca5b6e1b73 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Tue, 14 Jun 2022 23:05:55 +1000
Subject: [PATCH 01/24] Add colour widget to epic create form and epic sidebar

Ref https://gitlab.com/gitlab-org/gitlab/-/issues/7641

Changelog: added
EE: true
Signed-off-by: Andrew Smith <espadav8@gmail.com>
---
 .../color_select_dropdown/color_item.vue      |  2 +-
 .../color_select_root.vue                     | 15 +++-
 .../color_select_dropdown/constants.js        |  4 +-
 .../dropdown_contents_color_view.vue          |  4 +-
 .../color_select_dropdown/dropdown_value.vue  | 16 +++-
 .../javascripts/epic/components/epic_form.vue | 73 +++++++++++++------
 .../epic/components/epic_sidebar.vue          | 20 +++++
 ee/app/controllers/groups/epics_controller.rb |  1 +
 ee/spec/features/epics/epic_show_spec.rb      | 56 ++++++++++++++
 locale/gitlab.pot                             |  6 ++
 10 files changed, 164 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
index 92817d5fa70640..aa4da607a48e1c 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
@@ -16,7 +16,7 @@ export default {
 <template>
   <div>
     <span
-      class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-0"
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-3"
       data-testid="color-item"
       :style="{ backgroundColor: color }"
     ></span>
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
index 6b79883d76ba64..e842af62f8a7c9 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
@@ -52,13 +52,20 @@ export default {
       required: false,
       default: s__('ColorWidget|Assign epic color'),
     },
+    defaultColor: {
+      type: Object,
+      required: false,
+      default() {
+        return {
+          color: '',
+          title: '',
+        };
+      },
+    },
   },
   data() {
     return {
-      issuableColor: {
-        color: '',
-        title: '',
-      },
+      issuableColor: this.defaultColor,
       colorUpdateInProgress: false,
       oldIid: null,
       sidebarExpandedOnClick: false,
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js
index c70785abd1eb78..701ac71d755269 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js
@@ -1,4 +1,4 @@
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 
 export const COLOR_WIDGET_COLOR = s__('ColorWidget|Color');
 
@@ -7,7 +7,7 @@ export const DROPDOWN_VARIANT = {
   Embedded: 'embedded',
 };
 
-export const DEFAULT_COLOR = { title: __('SuggestedColors|Blue'), color: '#1068bf' };
+export const DEFAULT_COLOR = { title: s__('SuggestedColors|Blue'), color: '#1068bf' };
 
 export const ISSUABLE_COLORS = [
   DEFAULT_COLOR,
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue
index 62f4cf59c148f3..91906388049e30 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue
@@ -36,8 +36,8 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown-form>
-    <div>
+  <gl-dropdown-form class="js-colors-list">
+    <div data-testid="dropdown-content">
       <gl-dropdown-item
         v-for="color in colors"
         :key="color.color"
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
index 4cba66eefd22a0..a61fd5f78a5683 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
@@ -20,6 +20,11 @@ export default {
       required: true,
     },
   },
+  methods: {
+    hasColor() {
+      return this.selectedColor.color !== '';
+    },
+  },
 };
 </script>
 
@@ -38,6 +43,15 @@ export default {
       />
     </div>
 
-    <color-item class="hide-collapsed" :color="selectedColor.color" :title="selectedColor.title" />
+    <span v-if="!hasColor()" class="no-value hide-collapsed">
+      <slot></slot>
+    </span>
+    <template v-else>
+      <color-item
+        class="hide-collapsed"
+        :color="selectedColor.color"
+        :title="selectedColor.title"
+      />
+    </template>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index 953700cb3fbe93..5f3eacdb2f9647 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -16,25 +16,31 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
+import ColorSelectDropdown from '~/vue_shared/components/color_select_dropdown/color_select_root.vue';
 import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
+import { DEFAULT_COLOR } from '~/vue_shared/components/color_select_dropdown/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import createEpic from '../queries/create_epic.mutation.graphql';
 
 export default {
   components: {
+    ColorSelectDropdown,
     GlButton,
     GlDatepicker,
     GlForm,
     GlFormCheckbox,
-    GlFormInput,
     GlFormGroup,
-    MarkdownField,
+    GlFormInput,
     LabelsSelectWidget,
+    MarkdownField,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['groupPath', 'groupEpicsPath', 'markdownPreviewPath', 'markdownDocsPath'],
   data() {
     return {
       title: '',
       description: '',
+      color: DEFAULT_COLOR,
       confidential: false,
       labels: [],
       startDateFixed: null,
@@ -83,24 +89,26 @@ export default {
     save() {
       this.loading = true;
 
+      const input = {
+        addLabelIds: this.labelIds,
+        groupPath: this.groupPath,
+        title: this.title,
+        description: this.description,
+        confidential: this.confidential,
+        startDateFixed: this.startDateFixed ? formatDate(this.startDateFixed, 'yyyy-mm-dd') : null,
+        startDateIsFixed: Boolean(this.startDateFixed),
+        dueDateFixed: this.dueDateFixed ? formatDate(this.dueDateFixed, 'yyyy-mm-dd') : null,
+        dueDateIsFixed: Boolean(this.dueDateFixed),
+      };
+
+      if (this.isEpicColorEnabled() && this.color?.color !== '') {
+        input.color = this.color.color;
+      }
+
       return this.$apollo
         .mutate({
           mutation: createEpic,
-          variables: {
-            input: {
-              addLabelIds: this.labelIds,
-              groupPath: this.groupPath,
-              title: this.title,
-              description: this.description,
-              confidential: this.confidential,
-              startDateFixed: this.startDateFixed
-                ? formatDate(this.startDateFixed, 'yyyy-mm-dd')
-                : null,
-              startDateIsFixed: Boolean(this.startDateFixed),
-              dueDateFixed: this.dueDateFixed ? formatDate(this.dueDateFixed, 'yyyy-mm-dd') : null,
-              dueDateIsFixed: Boolean(this.dueDateFixed),
-            },
-          },
+          variables: { input },
         })
         .then(({ data }) => {
           const { errors, epic } = data.createEpic;
@@ -131,6 +139,12 @@ export default {
     handleUpdateSelectedLabels(labels) {
       this.labels = labels.map((label) => ({ ...label, id: getIdFromGraphQLId(label.id) }));
     },
+    handleUpdateSelectedColor(color) {
+      this.color = color;
+    },
+    isEpicColorEnabled() {
+      return this.glFeatures.epicColorHighlight;
+    },
   },
 };
 </script>
@@ -189,6 +203,7 @@ export default {
           >{{ $options.i18n.confidentialityLabel }}</gl-form-checkbox
         >
       </gl-form-group>
+
       <gl-form-group :label="__('Labels')">
         <labels-select-widget
           class="block labels js-labels-block"
@@ -220,11 +235,7 @@ export default {
           >{{ __('Clear start date') }}</gl-button
         >
       </gl-form-group>
-      <gl-form-group
-        class="gl-pb-4"
-        :label="__('Due date')"
-        :description="$options.i18n.epicDatesHint"
-      >
+      <gl-form-group :label="__('Due date')" :description="$options.i18n.epicDatesHint">
         <div class="gl-display-inline-block gl-mr-2">
           <gl-datepicker v-model="dueDateFixed" data-testid="epic-due-date" />
         </div>
@@ -238,7 +249,23 @@ export default {
         >
       </gl-form-group>
 
-      <div class="footer-block">
+      <gl-form-group v-if="isEpicColorEnabled()" :label="__('Color')" label-for="epic-color">
+        <color-select-dropdown
+          class="block colors js-colors-block"
+          :full-path="groupPath"
+          :attr-workspace-path="groupPath"
+          workspace-type="group"
+          :label-create-type="LabelType.group"
+          :default-color="color"
+          issuable-type="epic"
+          variant="embedded"
+          @updateSelectedColor="handleUpdateSelectedColor($event.color)"
+        >
+          {{ __('Select a color') }}
+        </color-select-dropdown>
+      </gl-form-group>
+
+      <div class="footer-block gl-pt-4">
         <gl-button
           type="submit"
           variant="confirm"
diff --git a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
index 9bb9b32e37e457..00b40aa31cccf1 100644
--- a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
@@ -15,6 +15,7 @@ import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sideb
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import sidebarEventHub from '~/sidebar/event_hub';
 import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
+import ColorSelectDropdown from '~/vue_shared/components/color_select_dropdown/color_select_root.vue';
 import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -34,6 +35,7 @@ export default {
     SidebarReferenceWidget,
     SidebarTodoWidget,
     LabelsSelectWidget,
+    ColorSelectDropdown,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['iid'],
@@ -87,6 +89,9 @@ export default {
         this.toggleSidebar({ sidebarCollapsed: false });
       }
     },
+    isEpicColorEnabled() {
+      return this.glFeatures.epicColorHighlight;
+    },
   },
 };
 </script>
@@ -145,6 +150,21 @@ export default {
       >
         {{ __('None') }}
       </labels-select-widget>
+
+      <color-select-dropdown
+        v-if="isEpicColorEnabled()"
+        class="block colors js-colors-block"
+        :allow-edit="canUpdate"
+        :iid="String(iid)"
+        :full-path="fullPath"
+        workspace-type="group"
+        issuable-type="epic"
+        variant="sidebar"
+        data-qa-selector="color_block"
+        data-testid="colors-select"
+      >
+        {{ __('None') }}
+      </color-select-dropdown>
       <sidebar-confidentiality-widget
         :iid="String(iid)"
         :full-path="fullPath"
diff --git a/ee/app/controllers/groups/epics_controller.rb b/ee/app/controllers/groups/epics_controller.rb
index 9bb070dba5573d..b2f6799e33cff7 100644
--- a/ee/app/controllers/groups/epics_controller.rb
+++ b/ee/app/controllers/groups/epics_controller.rb
@@ -19,6 +19,7 @@ class Groups::EpicsController < Groups::ApplicationController
   before_action do
     push_frontend_feature_flag(:confidential_notes, @group, type: :development)
     push_frontend_feature_flag(:realtime_labels, group)
+    push_frontend_feature_flag(:epic_color_highlight)
   end
 
   feature_category :portfolio_management
diff --git a/ee/spec/features/epics/epic_show_spec.rb b/ee/spec/features/epics/epic_show_spec.rb
index fce430261f2bd6..abaaab859c72d9 100644
--- a/ee/spec/features/epics/epic_show_spec.rb
+++ b/ee/spec/features/epics/epic_show_spec.rb
@@ -45,6 +45,12 @@ def add_existing_item(type)
     end
   end
 
+  def open_colors_dropdown
+    page.within('aside.right-sidebar [data-testid="colors-select"]') do
+      click_button 'Edit'
+    end
+  end
+
   describe 'when sub-epics feature is available' do
     before do
       visit group_epic_path(group, epic)
@@ -302,6 +308,56 @@ def add_existing_item(type)
         end
       end
     end
+
+    describe 'Colors select' do
+      context 'when feature flag is disabled' do
+        before do
+          stub_feature_flags(epic_color_highlight: false)
+          visit group_epic_path(group, epic)
+        end
+
+        it 'does not show the color select dropdown' do
+          expect(page).not_to have_selector('[data-testid="colors-select"]')
+        end
+      end
+
+      context 'when feature flag is enabled' do
+        it 'shows the color select dropdown' do
+          expect(page).to have_selector('[data-testid="colors-select"]')
+        end
+
+        it 'opens dropdown when `Edit` is clicked' do
+          open_colors_dropdown
+
+          expect(page).to have_css('.js-colors-block .js-colors-list')
+        end
+
+        context 'when dropdown is open' do
+          before do
+            open_colors_dropdown
+          end
+
+          it 'shows colors within the color dropdown' do
+            page.within('.js-colors-list [data-testid="dropdown-content"]') do
+              expect(page).to have_selector('li', count: 5)
+            end
+          end
+
+          it 'shows checkmark next to color after a new color has been selected' do
+            page.within('.js-colors-list [data-testid="dropdown-content"]') do
+              find('li', text: 'Green').click
+              wait_for_all_requests
+            end
+
+            open_colors_dropdown
+
+            page.within('.js-colors-list [data-testid="dropdown-content"]') do
+              expect(find('li', text: 'Green')).to have_selector('.gl-icon', visible: true)
+            end
+          end
+        end
+      end
+    end
   end
 
   describe 'epic actions', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/297505' do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 1e32acd7cf65cc..dca75105314d99 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9020,6 +9020,9 @@ msgstr ""
 msgid "Collector hostname"
 msgstr ""
 
+msgid "Color"
+msgstr ""
+
 msgid "ColorWidget|An error occurred while updating color."
 msgstr ""
 
@@ -34737,6 +34740,9 @@ msgstr ""
 msgid "Select a branch to compare"
 msgstr ""
 
+msgid "Select a color"
+msgstr ""
+
 msgid "Select a compliance framework to apply to this project. %{linkStart}How are these added?%{linkEnd}"
 msgstr ""
 
-- 
GitLab


From 3974349030e32d1f9ee286b352e93f7a945ed87d Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Sat, 18 Jun 2022 21:31:25 +1000
Subject: [PATCH 02/24] Show colour item after selecting a colour

Signed-off-by: Andrew Smith <espadav8@gmail.com>
---
 .../color_select_dropdown/dropdown_contents.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
index 4eb1d3d08ca190..727abce77d461a 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
@@ -1,11 +1,13 @@
 <script>
 import { GlDropdown } from '@gitlab/ui';
+import ColorItem from './color_item.vue';
 import DropdownContentsColorView from './dropdown_contents_color_view.vue';
 import DropdownHeader from './dropdown_header.vue';
 import { isDropdownVariantSidebar } from './utils';
 
 export default {
   components: {
+    ColorItem,
     DropdownContentsColorView,
     DropdownHeader,
     GlDropdown,
@@ -42,7 +44,7 @@ export default {
   },
   computed: {
     buttonText() {
-      if (!this.localSelectedColor?.title) {
+      if (!this.hasSelectedColor()) {
         return this.dropdownButtonText;
       }
 
@@ -86,12 +88,23 @@ export default {
       }
       this.$refs.dropdown.hide();
     },
+    hasSelectedColor() {
+      return this.localSelectedColor?.title;
+    },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown ref="dropdown" :text="buttonText" class="gl-w-full" @hide="handleDropdownHide">
+  <gl-dropdown ref="dropdown" class="gl-w-full" @hide="handleDropdownHide">
+    <template #button-text>
+      <color-item
+        v-if="hasSelectedColor()"
+        :color="localSelectedColor.color"
+        :title="localSelectedColor.title"
+      />
+      <span v-else>{{ buttonText }}</span>
+    </template>
     <template #header>
       <dropdown-header
         ref="header"
-- 
GitLab


From 39cca49758d71423887030e36a64a6aa9dbd2f20 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Tue, 21 Jun 2022 09:21:47 +1000
Subject: [PATCH 03/24] Address MR comments

Signed-off-by: Andrew Smith <espadav8@gmail.com>
---
 .../components/color_select_dropdown/color_item.vue    |  4 ++--
 .../color_select_dropdown/color_select_root.vue        |  4 ++++
 .../color_select_dropdown/dropdown_contents.vue        |  8 ++++----
 .../color_select_dropdown/dropdown_value.vue           |  4 ++--
 .../assets/javascripts/epic/components/epic_form.vue   | 10 +++++-----
 .../javascripts/epic/components/epic_sidebar.vue       |  1 -
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
index aa4da607a48e1c..72f0be0783673f 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
@@ -14,9 +14,9 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-align-items-center">
     <span
-      class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-3"
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
       data-testid="color-item"
       :style="{ backgroundColor: color }"
     ></span>
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
index e842af62f8a7c9..e567040bc510b3 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
@@ -1,4 +1,5 @@
 <script>
+import { isString } from 'lodash';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
@@ -55,6 +56,9 @@ export default {
     defaultColor: {
       type: Object,
       required: false,
+      validator(value) {
+        return isString(value?.color) && isString(value?.title);
+      },
       default() {
         return {
           color: '',
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
index 727abce77d461a..315ae126e3e467 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
@@ -50,6 +50,9 @@ export default {
 
       return this.localSelectedColor.title;
     },
+    hasSelectedColor() {
+      return this.localSelectedColor?.title;
+    },
   },
   watch: {
     localSelectedColor: {
@@ -88,9 +91,6 @@ export default {
       }
       this.$refs.dropdown.hide();
     },
-    hasSelectedColor() {
-      return this.localSelectedColor?.title;
-    },
   },
 };
 </script>
@@ -99,7 +99,7 @@ export default {
   <gl-dropdown ref="dropdown" class="gl-w-full" @hide="handleDropdownHide">
     <template #button-text>
       <color-item
-        v-if="hasSelectedColor()"
+        v-if="hasSelectedColor"
         :color="localSelectedColor.color"
         :title="localSelectedColor.title"
       />
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
index a61fd5f78a5683..878d1f7208b176 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
@@ -20,7 +20,7 @@ export default {
       required: true,
     },
   },
-  methods: {
+  computed: {
     hasColor() {
       return this.selectedColor.color !== '';
     },
@@ -43,7 +43,7 @@ export default {
       />
     </div>
 
-    <span v-if="!hasColor()" class="no-value hide-collapsed">
+    <span v-if="!hasColor" class="no-value hide-collapsed">
       <slot></slot>
     </span>
     <template v-else>
diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index 5f3eacdb2f9647..a2151669dab606 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -53,6 +53,9 @@ export default {
     labelIds() {
       return this.labels.map((label) => label.id);
     },
+    isEpicColorEnabled() {
+      return this.glFeatures.epicColorHighlight;
+    },
   },
   i18n: {
     confidentialityLabel: s__(`
@@ -101,7 +104,7 @@ export default {
         dueDateIsFixed: Boolean(this.dueDateFixed),
       };
 
-      if (this.isEpicColorEnabled() && this.color?.color !== '') {
+      if (this.isEpicColorEnabled && this.color?.color !== '') {
         input.color = this.color.color;
       }
 
@@ -142,9 +145,6 @@ export default {
     handleUpdateSelectedColor(color) {
       this.color = color;
     },
-    isEpicColorEnabled() {
-      return this.glFeatures.epicColorHighlight;
-    },
   },
 };
 </script>
@@ -249,7 +249,7 @@ export default {
         >
       </gl-form-group>
 
-      <gl-form-group v-if="isEpicColorEnabled()" :label="__('Color')" label-for="epic-color">
+      <gl-form-group v-if="isEpicColorEnabled" :label="__('Color')" label-for="epic-color">
         <color-select-dropdown
           class="block colors js-colors-block"
           :full-path="groupPath"
diff --git a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
index 00b40aa31cccf1..9721a7e44eb68b 100644
--- a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
@@ -160,7 +160,6 @@ export default {
         workspace-type="group"
         issuable-type="epic"
         variant="sidebar"
-        data-qa-selector="color_block"
         data-testid="colors-select"
       >
         {{ __('None') }}
-- 
GitLab


From 0167aa43e64132c1e295cf4ab8ae31f72c7878bf Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Sun, 21 Nov 2021 00:24:35 +1000
Subject: [PATCH 04/24] feat: Implement saving colours for epics and use them
 on the roadmap

---
 .../javascripts/epic/components/epic_form.vue  | 18 ++++++++++++++++++
 .../roadmap/queries/epic.fragment.graphql      |  2 ++
 .../roadmap/queries/group_epics.query.graphql  |  1 +
 .../assets/stylesheets/page_bundles/epics.scss |  6 ++++++
 4 files changed, 27 insertions(+)

diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index a2151669dab606..17024a276bb2b3 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -145,6 +145,9 @@ export default {
     handleUpdateSelectedColor(color) {
       this.color = color;
     },
+    backgroundColor() {
+      return `background-color:${this.color}`;
+    },
   },
 };
 </script>
@@ -194,6 +197,21 @@ export default {
           </template>
         </markdown-field>
       </gl-form-group>
+      <gl-form-group :label="__('Color')" label-for="epic-color">
+        <div class="input-group">
+          <div class="input-group-prepend">
+            <div class="input-group-text epic-color-preview" :style="backgroundColor()">&nbsp;</div>
+          </div>
+          <gl-form-input
+            id="epic-color"
+            v-model="color"
+            :placeholder="s__('Epics|Enter a color for your epic')"
+            autocomplete="off"
+            data-qa-selector="epic_color_field"
+            data-testid="epic-color"
+          />
+        </div>
+      </gl-form-group>
       <gl-form-group :label="__('Confidentiality')" label-for="epic-confidentiality">
         <gl-form-checkbox
           id="epic-confidentiality"
diff --git a/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql b/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql
index 0b37f5d1855583..680314450a84a1 100644
--- a/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql
+++ b/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql
@@ -10,6 +10,8 @@ fragment BaseEpic on Epic {
   hasChildren
   hasParent
   confidential
+  color
+  textColor
   descendantWeightSum {
     closedIssues
     openedIssues
diff --git a/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql b/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql
index 132ca54e8a3653..db4aeb05cb4dc9 100644
--- a/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql
+++ b/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql
@@ -38,6 +38,7 @@ query roadmapGroupEpics(
       edges {
         node {
           ...BaseEpic
+          color
           parent {
             id
           }
diff --git a/ee/app/assets/stylesheets/page_bundles/epics.scss b/ee/app/assets/stylesheets/page_bundles/epics.scss
index 0338620e6d49c9..e5c8d49883504e 100644
--- a/ee/app/assets/stylesheets/page_bundles/epics.scss
+++ b/ee/app/assets/stylesheets/page_bundles/epics.scss
@@ -40,6 +40,12 @@
   }
 }
 
+.new-epic-form .epic-color-preview {
+  background-color: #6699cc;
+  border-color: var(--gray-400, $gray-400);
+  max-height: none
+}
+
 .add-item-form-container {
   .select-project-dropdown .gl-new-dropdown-item-text-primary {
     display: flex;
-- 
GitLab


From 74daf12151662dd0d3630926f75ac0f09c902974 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Sun, 21 Nov 2021 02:12:58 +1000
Subject: [PATCH 05/24] feat: Support editing the colour of an existing epic

---
 .../issues/show/components/app.vue            | 13 ++++-
 .../issues/show/components/fields/color.vue   | 58 +++++++++++++++++++
 .../issues/show/components/form.vue           | 10 ++++
 app/controllers/concerns/issuable_actions.rb  |  1 +
 app/helpers/issuables_helper.rb               |  1 +
 .../javascripts/epic/components/epic_body.vue |  2 +
 ee/app/assets/javascripts/epic/store/state.js |  1 +
 .../related_items_tree_bundle.js              |  1 +
 8 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/issues/show/components/fields/color.vue

diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue
index c664135f30e939..bae102796775c0 100644
--- a/app/assets/javascripts/issues/show/components/app.vue
+++ b/app/assets/javascripts/issues/show/components/app.vue
@@ -89,6 +89,10 @@ export default {
       required: false,
       default: '',
     },
+    initialColor: {
+      type: String,
+      required: true,
+    },
     initialTitleHtml: {
       type: String,
       required: true,
@@ -204,6 +208,7 @@ export default {
     const store = new Store({
       titleHtml: this.initialTitleHtml,
       titleText: this.initialTitleText,
+      color: this.initialColor,
       descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
       updatedAt: this.updatedAt,
@@ -240,10 +245,11 @@ export default {
     issueChanged() {
       const {
         store: {
-          formState: { description, title },
+          formState: { description, title, color },
         },
         initialDescriptionText,
         initialTitleText,
+        initialColor,
       } = this;
 
       if (initialDescriptionText || description) {
@@ -254,6 +260,10 @@ export default {
         return initialTitleText !== title;
       }
 
+      if (initialColor || color) {
+        return initialColor !== color;
+      }
+
       return false;
     },
     defaultErrorMessage() {
@@ -348,6 +358,7 @@ export default {
 
     updateFormState(templates = {}) {
       this.setFormState({
+        color: this.state.color,
         title: this.state.titleText,
         description: this.state.descriptionText,
         lock_version: this.state.lock_version,
diff --git a/app/assets/javascripts/issues/show/components/fields/color.vue b/app/assets/javascripts/issues/show/components/fields/color.vue
new file mode 100644
index 00000000000000..1abefcaf702e43
--- /dev/null
+++ b/app/assets/javascripts/issues/show/components/fields/color.vue
@@ -0,0 +1,58 @@
+<script>
+import {
+  GlFormInput,
+} from '@gitlab/ui';
+import { __ } from '~/locale';
+import updateMixin from '../../mixins/update';
+
+export default {
+  components: {
+    GlFormInput,
+  },
+
+  mixins: [updateMixin],
+
+  props: {
+    formState: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      color: this.formState.color,
+    };
+  },
+  watch: {
+    color() {
+      /* eslint-disable vue/no-mutating-props */
+      this.formState.color = this.color;
+      /* eslint-enable vue/no-mutating-props */
+    }
+  },
+  methods: {
+    backgroundColor() {
+      return `background-color:${this.color}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="input-group">
+      <div class="input-group-prepend">
+        <div class="input-group-text color-preview" :style="backgroundColor()">&nbsp;</div>
+      </div>
+      <gl-form-input
+        id="issuable-color"
+        v-model="color"
+        :placeholder="__('Enter a color')"
+        autocomplete="off"
+        data-testid="issuable-color"
+        @keydown.meta.enter="updateIssuable"
+        @keydown.ctrl.enter="updateIssuable"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index e2c12edf46d277..43a57ee68ce90a 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/app/assets/javascripts/issues/show/components/form.vue
@@ -5,6 +5,7 @@ import Autosave from '~/autosave';
 import { IssuableType } from '~/issues/constants';
 import eventHub from '../event_hub';
 import EditActions from './edit_actions.vue';
+import ColorField from './fields/color.vue';
 import DescriptionField from './fields/description.vue';
 import DescriptionTemplateField from './fields/description_template.vue';
 import IssuableTitleField from './fields/title.vue';
@@ -13,6 +14,7 @@ import LockedWarning from './locked_warning.vue';
 
 export default {
   components: {
+    ColorField,
     DescriptionField,
     DescriptionTemplateField,
     EditActions,
@@ -103,6 +105,9 @@ export default {
     isIssueType() {
       return this.issuableType === IssuableType.Issue;
     },
+    showColorField() {
+      return this.issuableType === IssuableType.Epic;
+    },
   },
   watch: {
     formData: {
@@ -231,6 +236,11 @@ export default {
       :enable-autocomplete="enableAutocomplete"
     />
 
+    <color-field
+      v-if="showColorField"
+      :form-state="formState"
+    />
+
     <edit-actions
       :endpoint="endpoint"
       :form-state="formState"
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index 07850acd23db73..d1a1844b8462f3 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -74,6 +74,7 @@ def realtime_changes
     response = {
       title: view_context.markdown_field(issuable, :title),
       title_text: issuable.title,
+      color: issuable.color || '',
       description: view_context.markdown_field(issuable, :description),
       description_text: issuable.description,
       task_status: issuable.task_status,
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 486d5bb3866d43..55a15631fd9a84 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -240,6 +240,7 @@ def issuable_initial_data(issuable)
       lockVersion: issuable.lock_version,
       state: issuable.state,
       issuableTemplateNamesPath: template_names_path(parent, issuable),
+      initialColor: issuable.color || '',
       initialTitleHtml: markdown_field(issuable, :title),
       initialTitleText: issuable.title,
       initialDescriptionHtml: markdown_field(issuable, :description),
diff --git a/ee/app/assets/javascripts/epic/components/epic_body.vue b/ee/app/assets/javascripts/epic/components/epic_body.vue
index c1e018f8c36699..5eb800e87597fa 100644
--- a/ee/app/assets/javascripts/epic/components/epic_body.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_body.vue
@@ -22,6 +22,7 @@ export default {
       'canUpdate',
       'canDestroy',
       'canAdmin',
+      'initialColor',
       'initialTitleHtml',
       'initialTitleText',
       'initialDescriptionHtml',
@@ -49,6 +50,7 @@ export default {
         :can-update="canUpdate"
         :can-destroy="canDestroy"
         :show-delete-button="canDestroy"
+        :initial-color="initialColor"
         :initial-title-html="initialTitleHtml"
         :initial-title-text="initialTitleText"
         :lock-version="lockVersion"
diff --git a/ee/app/assets/javascripts/epic/store/state.js b/ee/app/assets/javascripts/epic/store/state.js
index 8971fbb6baf358..2ae0bfa65ba051 100644
--- a/ee/app/assets/javascripts/epic/store/state.js
+++ b/ee/app/assets/javascripts/epic/store/state.js
@@ -29,6 +29,7 @@ export default () => ({
   state: '',
   created: '',
   author: null,
+  initialColor: '',
   initialTitleHtml: '',
   initialTitleText: '',
   initialDescriptionHtml: '',
diff --git a/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js b/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js
index d3d0b6db24c8b2..b4c9533997de07 100644
--- a/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js
+++ b/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js
@@ -53,6 +53,7 @@ export default () => {
         groupName,
         id,
         iid: parseInt(iid, 10),
+        color: initialData.initialColor,
         title: initialData.initialTitleText,
         confidential: initialData.confidential,
         reference: `${initialData.fullPath}${initialData.issuableRef}`,
-- 
GitLab


From 2eeb617e6026b64cb248ccfd775ff46a4eb6b545 Mon Sep 17 00:00:00 2001
From: Andrew Smith <andrew.smith@intellihr.com>
Date: Tue, 21 Dec 2021 14:32:14 +1000
Subject: [PATCH 06/24] Attempt to build colour select widget

---
 .../issues/show/components/form.vue           |  10 -
 .../color_select_widget/color_item.vue        |  21 ++
 .../color_select_widget/color_select_root.vue | 345 ++++++++++++++++++
 .../sidebar/color_select_widget/constants.js  |  13 +
 .../color_select_widget/dropdown_contents.vue | 206 +++++++++++
 .../dropdown_contents_create_view.vue         | 182 +++++++++
 .../dropdown_contents_labels_view.vue         | 167 +++++++++
 .../color_select_widget/dropdown_header.vue   |  69 ++++
 .../color_select_widget/dropdown_value.vue    | 123 +++++++
 .../graphql/create_label.mutation.graphql     |  12 +
 .../graphql/epic_labels.query.graphql         |  15 +
 .../epic_update_labels.mutation.graphql       |  15 +
 .../graphql/group_labels.query.graphql        |  12 +
 .../graphql/issue_labels.query.graphql        |  15 +
 .../merge_request_labels.query.graphql        |  15 +
 .../graphql/project_labels.query.graphql      |  12 +
 .../sidebar/color_select_widget/utils.js      |  22 ++
 .../javascripts/epic/components/epic_form.vue |  15 -
 18 files changed, 1244 insertions(+), 25 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js

diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index 43a57ee68ce90a..e2c12edf46d277 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/app/assets/javascripts/issues/show/components/form.vue
@@ -5,7 +5,6 @@ import Autosave from '~/autosave';
 import { IssuableType } from '~/issues/constants';
 import eventHub from '../event_hub';
 import EditActions from './edit_actions.vue';
-import ColorField from './fields/color.vue';
 import DescriptionField from './fields/description.vue';
 import DescriptionTemplateField from './fields/description_template.vue';
 import IssuableTitleField from './fields/title.vue';
@@ -14,7 +13,6 @@ import LockedWarning from './locked_warning.vue';
 
 export default {
   components: {
-    ColorField,
     DescriptionField,
     DescriptionTemplateField,
     EditActions,
@@ -105,9 +103,6 @@ export default {
     isIssueType() {
       return this.issuableType === IssuableType.Issue;
     },
-    showColorField() {
-      return this.issuableType === IssuableType.Epic;
-    },
   },
   watch: {
     formData: {
@@ -236,11 +231,6 @@ export default {
       :enable-autocomplete="enableAutocomplete"
     />
 
-    <color-field
-      v-if="showColorField"
-      :form-state="formState"
-    />
-
     <edit-actions
       :endpoint="endpoint"
       :form-state="formState"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
new file mode 100644
index 00000000000000..f27f0b4e34c840
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
@@ -0,0 +1,21 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
+      :style="{ 'background-color': label.color }"
+      data-testid="label-color-box"
+    ></span>
+    <span>{{ label.title }}</span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
new file mode 100644
index 00000000000000..ae8bcdf4b0c8ed
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -0,0 +1,345 @@
+<script>
+import { debounce } from 'lodash';
+import { MutationOperationMode, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import createFlash from '~/flash';
+import { IssuableType } from '~/issues/constants';
+import { __ } from '~/locale';
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
+import { issuableLabelsQueries } from '~/sidebar/constants';
+import { DEBOUNCE_DROPDOWN_DELAY, DropdownVariant } from './constants';
+import DropdownContents from './dropdown_contents.vue';
+import DropdownValue from './dropdown_value.vue';
+import {
+  isDropdownVariantSidebar,
+  isDropdownVariantStandalone,
+  isDropdownVariantEmbedded,
+} from './utils';
+
+export default {
+  components: {
+    DropdownValue,
+    DropdownContents,
+    SidebarEditableItem,
+  },
+  inject: {
+    allowLabelEdit: {
+      default: false,
+    },
+  },
+  props: {
+    iid: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    allowLabelRemove: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    allowMultiselect: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: DropdownVariant.Sidebar,
+    },
+    labelsFilterBasePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    labelsFilterParam: {
+      type: String,
+      required: false,
+      default: 'label_name',
+    },
+    dropdownButtonText: {
+      type: String,
+      required: false,
+      default: __('Label'),
+    },
+    dropdownTitle: {
+      type: String,
+      required: false,
+      default: __('Assign epic color'),
+    },
+    issuableType: {
+      type: String,
+      required: true,
+    },
+    workspaceType: {
+      type: String,
+      required: true,
+    },
+    attrWorkspacePath: {
+      type: String,
+      required: true,
+    },
+    labelCreateType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      contentIsOnViewport: true,
+      issuableLabels: [],
+      labelsSelectInProgress: false,
+      oldIid: null,
+      sidebarExpandedOnClick: false,
+    };
+  },
+  computed: {
+    isLoading() {
+      return this.labelsSelectInProgress || this.$apollo.queries.issuableLabels.loading;
+    },
+    issuableLabelIds() {
+      return this.issuableLabels.map((label) => label.id);
+    },
+  },
+  apollo: {
+    issuableLabels: {
+      query() {
+        return issuableLabelsQueries[this.issuableType].issuableQuery;
+      },
+      skip() {
+        return !isDropdownVariantSidebar(this.variant);
+      },
+      variables() {
+        return {
+          iid: this.iid,
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.issuable?.labels.nodes || [];
+      },
+      error() {
+        createFlash({ message: __('Error fetching labels.') });
+      },
+    },
+  },
+  watch: {
+    iid(_, oldVal) {
+      this.oldIid = oldVal;
+    },
+  },
+  mounted() {
+    document.addEventListener('toggleSidebarRevealLabelsDropdown', this.handleCollapsedValueClick);
+  },
+  beforeDestroy() {
+    document.removeEventListener(
+      'toggleSidebarRevealLabelsDropdown',
+      this.handleCollapsedValueClick,
+    );
+  },
+  methods: {
+    handleDropdownClose(labels) {
+      if (this.iid !== '') {
+        this.updateSelectedLabels(this.getUpdateVariables(labels));
+      } else {
+        this.$emit('updateSelectedLabels', { labels });
+      }
+
+      this.collapseEditableItem();
+    },
+    collapseEditableItem() {
+      this.$refs.editable?.collapse();
+      if (this.sidebarExpandedOnClick) {
+        this.sidebarExpandedOnClick = false;
+        this.$emit('toggleCollapse');
+      }
+    },
+    handleCollapsedValueClick() {
+      this.sidebarExpandedOnClick = true;
+      this.$emit('toggleCollapse');
+      debounce(() => {
+        this.$refs.editable.toggle();
+        this.$refs.dropdownContents.showDropdown();
+      }, DEBOUNCE_DROPDOWN_DELAY)();
+    },
+    getUpdateVariables(labels) {
+      let labelIds = [];
+
+      labelIds = labels.map(({ id }) => id);
+      const currentIid = this.oldIid || this.iid;
+
+      const updateVariables = {
+        iid: currentIid,
+        projectPath: this.fullPath,
+        labelIds,
+      };
+
+      switch (this.issuableType) {
+        case IssuableType.Issue:
+          return updateVariables;
+        case IssuableType.MergeRequest:
+          return {
+            ...updateVariables,
+            operationMode: MutationOperationMode.Replace,
+          };
+        case IssuableType.Epic:
+          return {
+            iid: currentIid,
+            groupPath: this.fullPath,
+            addLabelIds: labelIds.map((id) => getIdFromGraphQLId(id)),
+            removeLabelIds: this.issuableLabelIds
+              .filter((id) => !labelIds.includes(id))
+              .map((id) => getIdFromGraphQLId(id)),
+          };
+        default:
+          return {};
+      }
+    },
+    updateSelectedLabels(inputVariables) {
+      this.labelsSelectInProgress = true;
+
+      this.$apollo
+        .mutate({
+          mutation: issuableLabelsQueries[this.issuableType].mutation,
+          variables: { input: inputVariables },
+        })
+        .then(({ data }) => {
+          if (data.updateIssuableLabels?.errors?.length) {
+            throw new Error();
+          }
+
+          this.$emit('updateSelectedLabels', {
+            id: data.updateIssuableLabels?.issuable?.id,
+            labels: data.updateIssuableLabels?.issuable?.labels?.nodes,
+          });
+        })
+        .catch((error) =>
+          createFlash({
+            message: __('An error occurred while updating labels.'),
+            captureError: true,
+            error,
+          }),
+        )
+        .finally(() => {
+          this.labelsSelectInProgress = false;
+        });
+    },
+    getRemoveVariables(labelId) {
+      const removeVariables = {
+        iid: this.iid,
+        projectPath: this.fullPath,
+      };
+
+      switch (this.issuableType) {
+        case IssuableType.Issue:
+          return {
+            ...removeVariables,
+            removeLabelIds: [labelId],
+          };
+        case IssuableType.MergeRequest:
+          return {
+            ...removeVariables,
+            labelIds: [labelId],
+            operationMode: MutationOperationMode.Remove,
+          };
+        case IssuableType.Epic:
+          return {
+            iid: this.iid,
+            removeLabelIds: [getIdFromGraphQLId(labelId)],
+            groupPath: this.fullPath,
+          };
+        default:
+          return {};
+      }
+    },
+    handleLabelRemove(labelId) {
+      this.updateSelectedLabels(this.getRemoveVariables(labelId));
+      this.$emit('onLabelRemove', labelId);
+    },
+    isDropdownVariantSidebar,
+    isDropdownVariantStandalone,
+    isDropdownVariantEmbedded,
+  },
+};
+</script>
+
+<template>
+  <div
+    class="labels-select-wrapper gl-relative"
+    :class="{
+      'is-standalone': isDropdownVariantStandalone(variant),
+      'is-embedded': isDropdownVariantEmbedded(variant),
+    }"
+    data-qa-selector="labels_block"
+  >
+    <template v-if="isDropdownVariantSidebar(variant)">
+      <sidebar-editable-item
+        ref="editable"
+        :title="__('Labels')"
+        :loading="isLoading"
+        :can-edit="allowLabelEdit"
+        @open="oldIid = null"
+      >
+        <template #collapsed>
+          <dropdown-value
+            :disable-labels="labelsSelectInProgress"
+            :selected-labels="issuableLabels"
+            :allow-label-remove="allowLabelRemove"
+            :labels-filter-base-path="labelsFilterBasePath"
+            :labels-filter-param="labelsFilterParam"
+            @onLabelRemove="handleLabelRemove"
+            @onCollapsedValueClick="handleCollapsedValueClick"
+          >
+            <slot></slot>
+          </dropdown-value>
+        </template>
+        <template #default="{ edit }">
+          <dropdown-value
+            :disable-labels="labelsSelectInProgress"
+            :selected-labels="issuableLabels"
+            :allow-label-remove="allowLabelRemove"
+            :labels-filter-base-path="labelsFilterBasePath"
+            :labels-filter-param="labelsFilterParam"
+            class="gl-mb-2"
+            @onLabelRemove="handleLabelRemove"
+          >
+            <slot></slot>
+          </dropdown-value>
+          <dropdown-contents
+            ref="dropdownContents"
+            :dropdown-button-text="dropdownButtonText"
+            :allow-multiselect="allowMultiselect"
+            :dropdown-title="dropdownTitle"
+            :selected-labels="issuableLabels"
+            :variant="variant"
+            :is-visible="edit"
+            :full-path="fullPath"
+            :workspace-type="workspaceType"
+            :attr-workspace-path="attrWorkspacePath"
+            :label-create-type="labelCreateType"
+            @setLabels="handleDropdownClose"
+            @closeDropdown="collapseEditableItem"
+          />
+        </template>
+      </sidebar-editable-item>
+    </template>
+    <dropdown-contents
+      v-else
+      ref="dropdownContents"
+      :allow-multiselect="allowMultiselect"
+      :dropdown-button-text="dropdownButtonText"
+      :dropdown-title="dropdownTitle"
+      :selected-labels="issuableLabels"
+      :variant="variant"
+      :full-path="fullPath"
+      :workspace-type="workspaceType"
+      :attr-workspace-path="attrWorkspacePath"
+      :label-create-type="labelCreateType"
+      @setLabels="handleDropdownClose"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
new file mode 100644
index 00000000000000..cd671b4d8f5db1
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
@@ -0,0 +1,13 @@
+export const SCOPED_LABEL_DELIMITER = '::';
+export const DEBOUNCE_DROPDOWN_DELAY = 200;
+
+export const DropdownVariant = {
+  Sidebar: 'sidebar',
+  Standalone: 'standalone',
+  Embedded: 'embedded',
+};
+
+export const LabelType = {
+  group: 'group',
+  project: 'project',
+};
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
new file mode 100644
index 00000000000000..cfa2a8122974ff
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -0,0 +1,206 @@
+<script>
+import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import { __, s__, sprintf } from '~/locale';
+import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
+import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
+import DropdownHeader from './dropdown_header.vue';
+import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils';
+
+export default {
+  components: {
+    DropdownContentsLabelsView,
+    DropdownContentsCreateView,
+    DropdownHeader,
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlLink,
+  },
+  props: {
+    dropdownTitle: {
+      type: String,
+      required: true,
+    },
+    selectedLabels: {
+      type: Array,
+      required: true,
+    },
+    allowMultiselect: {
+      type: Boolean,
+      required: true,
+    },
+    dropdownButtonText: {
+      type: String,
+      required: true,
+    },
+    variant: {
+      type: String,
+      required: true,
+    },
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    workspaceType: {
+      type: String,
+      required: true,
+    },
+    attrWorkspacePath: {
+      type: String,
+      required: true,
+    },
+    labelCreateType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showDropdownContentsCreateView: false,
+      localSelectedLabels: [...this.selectedLabels],
+      isDirty: false,
+      searchKey: '',
+    };
+  },
+  computed: {
+    dropdownContentsView() {
+      if (this.showDropdownContentsCreateView) {
+        return 'dropdown-contents-create-view';
+      }
+      return 'dropdown-contents-labels-view';
+    },
+    buttonText() {
+      if (!this.localSelectedLabels.length) {
+        return this.dropdownButtonText || __('Label');
+      } else if (this.localSelectedLabels.length > 1) {
+        return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), {
+          firstLabelName: this.localSelectedLabels[0].title,
+          remainingLabelCount: this.localSelectedLabels.length - 1,
+        });
+      }
+      return this.localSelectedLabels[0].title;
+    },
+    showDropdownFooter() {
+      return !this.showDropdownContentsCreateView && !this.isStandalone;
+    },
+    isStandalone() {
+      return isDropdownVariantStandalone(this.variant);
+    },
+  },
+  watch: {
+    localSelectedLabels: {
+      handler() {
+        this.isDirty = true;
+      },
+      deep: true,
+    },
+    isVisible(newVal) {
+      if (newVal) {
+        this.$refs.dropdown.show();
+        this.isDirty = false;
+        this.localSelectedLabels = this.selectedLabels;
+      } else {
+        this.$refs.dropdown.hide();
+        this.setLabels();
+      }
+    },
+    selectedLabels(newVal) {
+      if (!this.isDirty) {
+        this.localSelectedLabels = newVal;
+      }
+    },
+  },
+  created() {
+    this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+  },
+  beforeDestroy() {
+    this.debouncedSearchKeyUpdate.cancel();
+  },
+  methods: {
+    toggleDropdownContentsCreateView() {
+      this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView;
+    },
+    toggleDropdownContent() {
+      this.toggleDropdownContentsCreateView();
+      // Required to recalculate dropdown position as its size changes
+      if (this.$refs.dropdown?.$refs.dropdown) {
+        this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate();
+      }
+    },
+    setLabels() {
+      if (!this.isDirty) {
+        return;
+      }
+      this.$emit('setLabels', this.localSelectedLabels);
+    },
+    handleDropdownHide() {
+      this.$emit('closeDropdown');
+      if (!isDropdownVariantSidebar(this.variant)) {
+        this.setLabels();
+      }
+    },
+    setSearchKey(value) {
+      this.searchKey = value;
+    },
+    setFocus() {
+      this.$refs.header.focusInput();
+    },
+    showDropdown() {
+      this.$refs.dropdown.show();
+    },
+    clearSearch() {
+      if (!this.allowMultiselect || this.isStandalone) {
+        return;
+      }
+      this.searchKey = '';
+      this.setFocus();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    ref="dropdown"
+    :text="buttonText"
+    class="gl-w-full gl-mt-2"
+    data-testid="labels-select-dropdown-contents"
+    data-qa-selector="labels_dropdown_content"
+    @hide="handleDropdownHide"
+    @shown="setFocus"
+  >
+    <template #header>
+      <dropdown-header
+        ref="header"
+        :search-key="searchKey"
+        :dropdown-title="dropdownTitle"
+        :show-dropdown-contents-create-view="showDropdownContentsCreateView"
+        :is-standalone="isStandalone"
+        @toggleDropdownContentsCreateView="toggleDropdownContent"
+        @closeDropdown="$emit('closeDropdown')"
+        @input="debouncedSearchKeyUpdate"
+      />
+    </template>
+    <template #default>
+      <component
+        :is="dropdownContentsView"
+        v-model="localSelectedLabels"
+        :search-key="searchKey"
+        :allow-multiselect="allowMultiselect"
+        :full-path="fullPath"
+        :workspace-type="workspaceType"
+        :attr-workspace-path="attrWorkspacePath"
+        :label-create-type="labelCreateType"
+        @hideCreateView="toggleDropdownContent"
+        @input="clearSearch"
+      />
+    </template>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue
new file mode 100644
index 00000000000000..da626a21b143ce
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue
@@ -0,0 +1,182 @@
+<script>
+import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import produce from 'immer';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import { workspaceLabelsQueries } from '~/sidebar/constants';
+import createLabelMutation from './graphql/create_label.mutation.graphql';
+import { LabelType } from './constants';
+
+const errorMessage = __('Error creating label.');
+
+export default {
+  components: {
+    GlButton,
+    GlFormInput,
+    GlLink,
+    GlLoadingIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    attrWorkspacePath: {
+      type: String,
+      required: true,
+    },
+    labelCreateType: {
+      type: String,
+      required: true,
+    },
+    workspaceType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      labelTitle: '',
+      selectedColor: '',
+      labelCreateInProgress: false,
+    };
+  },
+  computed: {
+    disableCreate() {
+      return !this.labelTitle.length || !this.selectedColor.length || this.labelCreateInProgress;
+    },
+    suggestedColors() {
+      const colorsMap = gon.suggested_label_colors;
+      return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] }));
+    },
+    mutationVariables() {
+      const attributePath = this.labelCreateType === LabelType.group ? 'groupPath' : 'projectPath';
+
+      return {
+        title: this.labelTitle,
+        color: this.selectedColor,
+        [attributePath]: this.attrWorkspacePath,
+      };
+    },
+  },
+  methods: {
+    getColorCode(color) {
+      return Object.keys(color).pop();
+    },
+    getColorName(color) {
+      return Object.values(color).pop();
+    },
+    handleColorClick(color) {
+      this.selectedColor = this.getColorCode(color);
+    },
+    updateLabelsInCache(store, label) {
+      const { query } = workspaceLabelsQueries[this.workspaceType];
+
+      const sourceData = store.readQuery({
+        query,
+        variables: { fullPath: this.fullPath, searchTerm: '' },
+      });
+
+      const collator = new Intl.Collator('en');
+      const data = produce(sourceData, (draftData) => {
+        const { nodes } = draftData.workspace.labels;
+        nodes.push(label);
+        nodes.sort((a, b) => collator.compare(a.title, b.title));
+      });
+
+      store.writeQuery({
+        query,
+        variables: { fullPath: this.fullPath, searchTerm: '' },
+        data,
+      });
+    },
+    async createLabel() {
+      this.labelCreateInProgress = true;
+      try {
+        const {
+          data: { labelCreate },
+        } = await this.$apollo.mutate({
+          mutation: createLabelMutation,
+          variables: this.mutationVariables,
+          update: (
+            store,
+            {
+              data: {
+                labelCreate: { label },
+              },
+            },
+          ) => this.updateLabelsInCache(store, label),
+        });
+        if (labelCreate.errors.length) {
+          createFlash({ message: errorMessage });
+        }
+      } catch {
+        createFlash({ message: errorMessage });
+      }
+      this.labelCreateInProgress = false;
+      this.$emit('hideCreateView');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="labels-select-contents-create js-labels-create">
+    <div class="dropdown-input">
+      <gl-form-input
+        v-model.trim="labelTitle"
+        :placeholder="__('Name new label')"
+        :autofocus="true"
+        data-testid="label-title-input"
+      />
+    </div>
+    <div class="dropdown-content gl-px-3">
+      <div class="suggest-colors suggest-colors-dropdown gl-mt-0! gl-mb-3!">
+        <gl-link
+          v-for="(color, index) in suggestedColors"
+          :key="index"
+          v-gl-tooltip:tooltipcontainer
+          :style="{ backgroundColor: getColorCode(color) }"
+          :title="getColorName(color)"
+          @click.prevent="handleColorClick(color)"
+        />
+      </div>
+      <div class="color-input-container gl-display-flex">
+        <span
+          class="dropdown-label-color-preview gl-relative gl-display-inline-block"
+          data-testid="selected-color"
+          :style="{ backgroundColor: selectedColor }"
+        ></span>
+        <gl-form-input
+          v-model.trim="selectedColor"
+          class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
+          :placeholder="__('Use custom color #FF0000')"
+          data-testid="selected-color-text"
+        />
+      </div>
+    </div>
+    <div class="dropdown-actions gl-display-flex gl-justify-content-space-between gl-pt-3 gl-px-3">
+      <gl-button
+        :disabled="disableCreate"
+        category="primary"
+        variant="success"
+        class="gl-display-flex gl-align-items-center"
+        data-testid="create-button"
+        @click="createLabel"
+      >
+        <gl-loading-icon v-if="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
+        {{ __('Create') }}
+      </gl-button>
+      <gl-button
+        class="js-btn-cancel-create"
+        data-testid="cancel-button"
+        @click.stop="$emit('hideCreateView')"
+      >
+        {{ __('Cancel') }}
+      </gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
new file mode 100644
index 00000000000000..db7192f4c0bf54
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -0,0 +1,167 @@
+<script>
+import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import createFlash from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { __ } from '~/locale';
+import { workspaceLabelsQueries } from '~/sidebar/constants';
+import ColorItem from './color_item.vue';
+
+export default {
+  components: {
+    GlDropdownForm,
+    GlDropdownItem,
+    GlLoadingIcon,
+    GlIntersectionObserver,
+    ColorItem,
+  },
+  model: {
+    prop: 'localSelectedLabels',
+  },
+  props: {
+    allowMultiselect: {
+      type: Boolean,
+      required: true,
+    },
+    localSelectedLabels: {
+      type: Array,
+      required: true,
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    searchKey: {
+      type: String,
+      required: true,
+    },
+    workspaceType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      labels: [],
+      isVisible: false,
+    };
+  },
+  apollo: {
+    labels: {
+      query() {
+        return workspaceLabelsQueries[this.workspaceType].query;
+      },
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          searchTerm: this.searchKey,
+        };
+      },
+      skip() {
+        return this.searchKey.length === 1 || !this.isVisible;
+      },
+      update: (data) => data.workspace?.labels?.nodes || [],
+      error() {
+        createFlash({ message: __('Error fetching labels.') });
+      },
+    },
+  },
+  computed: {
+    labelsFetchInProgress() {
+      return this.$apollo.queries.labels.loading;
+    },
+    localSelectedLabelsIds() {
+      return this.localSelectedLabels.map((label) => getIdFromGraphQLId(label.id));
+    },
+    visibleLabels() {
+      if (this.searchKey) {
+        return fuzzaldrinPlus.filter(this.labels, this.searchKey, {
+          key: ['title'],
+        });
+      }
+      return this.labels;
+    },
+    showNoMatchingResultsMessage() {
+      return Boolean(this.searchKey) && this.visibleLabels.length === 0;
+    },
+  },
+  methods: {
+    isLabelSelected(label) {
+      return this.localSelectedLabelsIds.includes(getIdFromGraphQLId(label.id));
+    },
+    /**
+     * This method scrolls item from dropdown into
+     * the view if it is off the viewable area of the
+     * container.
+     */
+    scrollIntoViewIfNeeded() {
+      const highlightedLabel = this.$refs.labelsListContainer.querySelector('.is-focused');
+
+      if (highlightedLabel) {
+        const container = this.$refs.labelsListContainer.getBoundingClientRect();
+        const label = highlightedLabel.getBoundingClientRect();
+
+        if (label.bottom > container.bottom) {
+          this.$refs.labelsListContainer.scrollTop += label.bottom - container.bottom;
+        } else if (label.top < container.top) {
+          this.$refs.labelsListContainer.scrollTop -= container.top - label.top;
+        }
+      }
+    },
+    updateSelectedLabels(label) {
+      let labels;
+      if (this.isLabelSelected(label)) {
+        labels = this.localSelectedLabels.filter(
+          ({ id }) => id !== getIdFromGraphQLId(label.id) && id !== label.id,
+        );
+      } else {
+        labels = [...this.localSelectedLabels, label];
+      }
+      this.$emit('input', labels);
+    },
+    handleLabelClick(label) {
+      this.updateSelectedLabels(label);
+      if (!this.allowMultiselect) {
+        this.$emit('closeDropdown', this.localSelectedLabels);
+      }
+    },
+    onDropdownAppear() {
+      this.isVisible = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-intersection-observer @appear="onDropdownAppear">
+    <gl-dropdown-form class="labels-select-contents-list js-labels-list">
+      <div ref="labelsListContainer" data-testid="dropdown-content">
+        <gl-loading-icon
+          v-if="labelsFetchInProgress"
+          class="labels-fetch-loading gl-align-items-center gl-w-full gl-h-full gl-mb-3"
+          size="md"
+        />
+        <template v-else>
+          <gl-dropdown-item
+            v-for="label in visibleLabels"
+            :key="label.id"
+            :is-checked="isLabelSelected(label)"
+            :is-check-centered="true"
+            :is-check-item="true"
+            data-testid="labels-list"
+            @click.native.capture.stop="handleLabelClick(label)"
+          >
+            <color-item :label="label" />
+          </gl-dropdown-item>
+          <gl-dropdown-item
+            v-show="showNoMatchingResultsMessage"
+            class="gl-p-3 gl-text-center"
+            data-testid="no-results"
+          >
+            {{ __('No matching results') }}
+          </gl-dropdown-item>
+        </template>
+      </div>
+    </gl-dropdown-form>
+  </gl-intersection-observer>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
new file mode 100644
index 00000000000000..fee36125377736
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
@@ -0,0 +1,69 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    dropdownTitle: {
+      type: String,
+      required: true,
+    },
+    showDropdownContentsCreateView: {
+      type: Boolean,
+      required: true,
+    },
+    labelsFetchInProgress: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    searchKey: {
+      type: String,
+      required: true,
+    },
+    isStandalone: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    focusInput() {
+      this.$refs.searchInput?.focusInput();
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-testid="dropdown-header">
+    <div
+      v-if="!isStandalone"
+      class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
+      data-testid="dropdown-header-title"
+    >
+      <gl-button
+        v-if="showDropdownContentsCreateView"
+        :aria-label="__('Go back')"
+        variant="link"
+        size="small"
+        class="js-btn-back dropdown-header-button gl-p-0"
+        icon="arrow-left"
+        data-testid="go-back-button"
+        @click.stop="$emit('toggleDropdownContentsCreateView')"
+      />
+      <span class="gl-flex-grow-1">{{ dropdownTitle }}</span>
+      <gl-button
+        :aria-label="__('Close')"
+        variant="link"
+        size="small"
+        class="dropdown-header-button gl-p-0!"
+        icon="close"
+        data-testid="close-button"
+        @click="$emit('closeDropdown')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
new file mode 100644
index 00000000000000..57ee816c4c7822
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -0,0 +1,123 @@
+<script>
+import { GlIcon, GlLabel, GlTooltipDirective } from '@gitlab/ui';
+import { sortBy } from 'lodash';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+    GlLabel,
+  },
+  inject: ['allowScopedLabels'],
+  props: {
+    disableLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    selectedLabels: {
+      type: Array,
+      required: true,
+    },
+    allowLabelRemove: {
+      type: Boolean,
+      required: true,
+    },
+    labelsFilterBasePath: {
+      type: String,
+      required: true,
+    },
+    labelsFilterParam: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    sortedSelectedLabels() {
+      return sortBy(this.selectedLabels, (label) => (isScopedLabel(label) ? 0 : 1));
+    },
+    labelsList() {
+      const labelsString = this.selectedLabels.length
+        ? this.selectedLabels
+            .slice(0, 5)
+            .map((label) => label.title)
+            .join(', ')
+        : s__('LabelSelect|Labels');
+
+      if (this.selectedLabels.length > 5) {
+        return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), {
+          labelsString,
+          remainingLabelCount: this.selectedLabels.length - 5,
+        });
+      }
+
+      return labelsString;
+    },
+  },
+  methods: {
+    labelFilterUrl(label) {
+      return `${this.labelsFilterBasePath}?${this.labelsFilterParam}[]=${encodeURIComponent(
+        label.title,
+      )}`;
+    },
+    scopedLabel(label) {
+      return this.allowScopedLabels && isScopedLabel(label);
+    },
+    removeLabel(labelId) {
+      this.$emit('onLabelRemove', labelId);
+    },
+    handleCollapsedClick() {
+      this.$emit('onCollapsedValueClick');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      'has-labels': selectedLabels.length,
+    }"
+    class="value issuable-show-labels js-value"
+    data-testid="value-wrapper"
+  >
+    <div
+      v-gl-tooltip.left.viewport
+      :title="labelsList"
+      class="sidebar-collapsed-icon"
+      @click="handleCollapsedClick"
+    >
+      <gl-icon name="labels" />
+      <span class="gl-font-base gl-line-height-24">{{ selectedLabels.length }}</span>
+    </div>
+    <span
+      v-if="!selectedLabels.length"
+      class="text-secondary hide-collapsed"
+      data-testid="empty-placeholder"
+    >
+      <slot></slot>
+    </span>
+    <template v-else>
+      <gl-label
+        v-for="label in sortedSelectedLabels"
+        :key="label.id"
+        class="hide-collapsed"
+        data-qa-selector="selected_label_content"
+        :data-qa-label-name="label.title"
+        :title="label.title"
+        :description="label.description"
+        :background-color="label.color"
+        :target="labelFilterUrl(label)"
+        :scoped="scopedLabel(label)"
+        :show-close-button="allowLabelRemove"
+        :disabled="disableLabels"
+        tooltip-placement="top"
+        @close="removeLabel(label.id)"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
new file mode 100644
index 00000000000000..a9c791091fc335
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
@@ -0,0 +1,12 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPath: ID) {
+  labelCreate(
+    input: { title: $title, color: $color, projectPath: $projectPath, groupPath: $groupPath }
+  ) {
+    label {
+      ...Label
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql
new file mode 100644
index 00000000000000..c442c17eb88f62
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query epicLabels($fullPath: ID!, $iid: ID) {
+  workspace: group(fullPath: $fullPath) {
+    id
+    issuable: epic(iid: $iid) {
+      id
+      labels {
+        nodes {
+          ...Label
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql
new file mode 100644
index 00000000000000..cb054e2968ff78
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+mutation updateEpicLabels($input: UpdateEpicInput!) {
+  updateIssuableLabels: updateEpic(input: $input) {
+    issuable: epic {
+      id
+      labels {
+        nodes {
+          ...Label
+        }
+      }
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
new file mode 100644
index 00000000000000..ce1a69f84c0c5f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
@@ -0,0 +1,12 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query groupLabels($fullPath: ID!, $searchTerm: String) {
+  workspace: group(fullPath: $fullPath) {
+    id
+    labels(searchTerm: $searchTerm, onlyGroupLabels: true, includeAncestorGroups: true) {
+      nodes {
+        ...Label
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
new file mode 100644
index 00000000000000..2904857270ed63
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query issueLabels($fullPath: ID!, $iid: String) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    issuable: issue(iid: $iid) {
+      id
+      labels {
+        nodes {
+          ...Label
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
new file mode 100644
index 00000000000000..e0cdfd91658a96
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query mergeRequestLabels($fullPath: ID!, $iid: String!) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    issuable: mergeRequest(iid: $iid) {
+      id
+      labels {
+        nodes {
+          ...Label
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
new file mode 100644
index 00000000000000..a7c24620aad710
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
@@ -0,0 +1,12 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query projectLabels($fullPath: ID!, $searchTerm: String) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    labels(searchTerm: $searchTerm, includeAncestorGroups: true) {
+      nodes {
+        ...Label
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js
new file mode 100644
index 00000000000000..b5cd946a189797
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js
@@ -0,0 +1,22 @@
+import { DropdownVariant } from './constants';
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `sidebar`
+ * @param {string} variant
+ */
+export const isDropdownVariantSidebar = (variant) => variant === DropdownVariant.Sidebar;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `standalone`
+ * @param {string} variant
+ */
+export const isDropdownVariantStandalone = (variant) => variant === DropdownVariant.Standalone;
+
+/**
+ * Returns boolean representing whether dropdown variant
+ * is `embedded`
+ * @param {string} variant
+ */
+export const isDropdownVariantEmbedded = (variant) => variant === DropdownVariant.Embedded;
diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index 17024a276bb2b3..4f4aff2e564443 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -197,21 +197,6 @@ export default {
           </template>
         </markdown-field>
       </gl-form-group>
-      <gl-form-group :label="__('Color')" label-for="epic-color">
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <div class="input-group-text epic-color-preview" :style="backgroundColor()">&nbsp;</div>
-          </div>
-          <gl-form-input
-            id="epic-color"
-            v-model="color"
-            :placeholder="s__('Epics|Enter a color for your epic')"
-            autocomplete="off"
-            data-qa-selector="epic_color_field"
-            data-testid="epic-color"
-          />
-        </div>
-      </gl-form-group>
       <gl-form-group :label="__('Confidentiality')" label-for="epic-confidentiality">
         <gl-form-checkbox
           id="epic-confidentiality"
-- 
GitLab


From 5ddded77ac592415287ac3b5983623b4b6837be3 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 22:36:27 +1000
Subject: [PATCH 07/24] Remove a bunch of unneeded label code

---
 .../color_select_widget/color_select_root.vue |  13 +-
 .../color_select_widget/dropdown_contents.vue |  44 +----
 .../dropdown_contents_create_view.vue         | 182 ------------------
 .../dropdown_contents_labels_view.vue         |  28 ++-
 .../color_select_widget/dropdown_header.vue   |  28 ---
 .../color_select_widget/dropdown_value.vue    |   5 -
 6 files changed, 22 insertions(+), 278 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index ae8bcdf4b0c8ed..4766a56877f620 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -36,11 +36,6 @@ export default {
       type: String,
       required: true,
     },
-    allowLabelRemove: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     allowMultiselect: {
       type: Boolean,
       required: false,
@@ -64,7 +59,7 @@ export default {
     dropdownButtonText: {
       type: String,
       required: false,
-      default: __('Label'),
+      default: __('Color'),
     },
     dropdownTitle: {
       type: String,
@@ -98,9 +93,6 @@ export default {
     };
   },
   computed: {
-    isLoading() {
-      return this.labelsSelectInProgress || this.$apollo.queries.issuableLabels.loading;
-    },
     issuableLabelIds() {
       return this.issuableLabels.map((label) => label.id);
     },
@@ -280,7 +272,6 @@ export default {
       <sidebar-editable-item
         ref="editable"
         :title="__('Labels')"
-        :loading="isLoading"
         :can-edit="allowLabelEdit"
         @open="oldIid = null"
       >
@@ -288,7 +279,6 @@ export default {
           <dropdown-value
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issuableLabels"
-            :allow-label-remove="allowLabelRemove"
             :labels-filter-base-path="labelsFilterBasePath"
             :labels-filter-param="labelsFilterParam"
             @onLabelRemove="handleLabelRemove"
@@ -301,7 +291,6 @@ export default {
           <dropdown-value
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issuableLabels"
-            :allow-label-remove="allowLabelRemove"
             :labels-filter-base-path="labelsFilterBasePath"
             :labels-filter-param="labelsFilterParam"
             class="gl-mb-2"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index cfa2a8122974ff..7f1689cd65d708 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -3,7 +3,6 @@ import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { __, s__, sprintf } from '~/locale';
-import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
 import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
 import DropdownHeader from './dropdown_header.vue';
 import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils';
@@ -11,7 +10,6 @@ import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils';
 export default {
   components: {
     DropdownContentsLabelsView,
-    DropdownContentsCreateView,
     DropdownHeader,
     GlButton,
     GlDropdown,
@@ -70,15 +68,9 @@ export default {
     };
   },
   computed: {
-    dropdownContentsView() {
-      if (this.showDropdownContentsCreateView) {
-        return 'dropdown-contents-create-view';
-      }
-      return 'dropdown-contents-labels-view';
-    },
     buttonText() {
       if (!this.localSelectedLabels.length) {
-        return this.dropdownButtonText || __('Label');
+        return this.dropdownButtonText || __('Color');
       } else if (this.localSelectedLabels.length > 1) {
         return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), {
           firstLabelName: this.localSelectedLabels[0].title,
@@ -87,9 +79,6 @@ export default {
       }
       return this.localSelectedLabels[0].title;
     },
-    showDropdownFooter() {
-      return !this.showDropdownContentsCreateView && !this.isStandalone;
-    },
     isStandalone() {
       return isDropdownVariantStandalone(this.variant);
     },
@@ -117,23 +106,7 @@ export default {
       }
     },
   },
-  created() {
-    this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
-  },
-  beforeDestroy() {
-    this.debouncedSearchKeyUpdate.cancel();
-  },
   methods: {
-    toggleDropdownContentsCreateView() {
-      this.showDropdownContentsCreateView = !this.showDropdownContentsCreateView;
-    },
-    toggleDropdownContent() {
-      this.toggleDropdownContentsCreateView();
-      // Required to recalculate dropdown position as its size changes
-      if (this.$refs.dropdown?.$refs.dropdown) {
-        this.$refs.dropdown.$refs.dropdown.$_popper.scheduleUpdate();
-      }
-    },
     setLabels() {
       if (!this.isDirty) {
         return;
@@ -149,9 +122,6 @@ export default {
     setSearchKey(value) {
       this.searchKey = value;
     },
-    setFocus() {
-      this.$refs.header.focusInput();
-    },
     showDropdown() {
       this.$refs.dropdown.show();
     },
@@ -160,7 +130,6 @@ export default {
         return;
       }
       this.searchKey = '';
-      this.setFocus();
     },
   },
 };
@@ -174,31 +143,24 @@ export default {
     data-testid="labels-select-dropdown-contents"
     data-qa-selector="labels_dropdown_content"
     @hide="handleDropdownHide"
-    @shown="setFocus"
   >
     <template #header>
       <dropdown-header
         ref="header"
-        :search-key="searchKey"
         :dropdown-title="dropdownTitle"
-        :show-dropdown-contents-create-view="showDropdownContentsCreateView"
         :is-standalone="isStandalone"
-        @toggleDropdownContentsCreateView="toggleDropdownContent"
         @closeDropdown="$emit('closeDropdown')"
-        @input="debouncedSearchKeyUpdate"
       />
     </template>
     <template #default>
-      <component
-        :is="dropdownContentsView"
-        v-model="localSelectedLabels"
+      <dropdown-contents-labels-view
+        :local-selected-labels="localSelectedLabels"
         :search-key="searchKey"
         :allow-multiselect="allowMultiselect"
         :full-path="fullPath"
         :workspace-type="workspaceType"
         :attr-workspace-path="attrWorkspacePath"
         :label-create-type="labelCreateType"
-        @hideCreateView="toggleDropdownContent"
         @input="clearSearch"
       />
     </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue
deleted file mode 100644
index da626a21b143ce..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_create_view.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<script>
-import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
-import produce from 'immer';
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-import { workspaceLabelsQueries } from '~/sidebar/constants';
-import createLabelMutation from './graphql/create_label.mutation.graphql';
-import { LabelType } from './constants';
-
-const errorMessage = __('Error creating label.');
-
-export default {
-  components: {
-    GlButton,
-    GlFormInput,
-    GlLink,
-    GlLoadingIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    attrWorkspacePath: {
-      type: String,
-      required: true,
-    },
-    labelCreateType: {
-      type: String,
-      required: true,
-    },
-    workspaceType: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      labelTitle: '',
-      selectedColor: '',
-      labelCreateInProgress: false,
-    };
-  },
-  computed: {
-    disableCreate() {
-      return !this.labelTitle.length || !this.selectedColor.length || this.labelCreateInProgress;
-    },
-    suggestedColors() {
-      const colorsMap = gon.suggested_label_colors;
-      return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] }));
-    },
-    mutationVariables() {
-      const attributePath = this.labelCreateType === LabelType.group ? 'groupPath' : 'projectPath';
-
-      return {
-        title: this.labelTitle,
-        color: this.selectedColor,
-        [attributePath]: this.attrWorkspacePath,
-      };
-    },
-  },
-  methods: {
-    getColorCode(color) {
-      return Object.keys(color).pop();
-    },
-    getColorName(color) {
-      return Object.values(color).pop();
-    },
-    handleColorClick(color) {
-      this.selectedColor = this.getColorCode(color);
-    },
-    updateLabelsInCache(store, label) {
-      const { query } = workspaceLabelsQueries[this.workspaceType];
-
-      const sourceData = store.readQuery({
-        query,
-        variables: { fullPath: this.fullPath, searchTerm: '' },
-      });
-
-      const collator = new Intl.Collator('en');
-      const data = produce(sourceData, (draftData) => {
-        const { nodes } = draftData.workspace.labels;
-        nodes.push(label);
-        nodes.sort((a, b) => collator.compare(a.title, b.title));
-      });
-
-      store.writeQuery({
-        query,
-        variables: { fullPath: this.fullPath, searchTerm: '' },
-        data,
-      });
-    },
-    async createLabel() {
-      this.labelCreateInProgress = true;
-      try {
-        const {
-          data: { labelCreate },
-        } = await this.$apollo.mutate({
-          mutation: createLabelMutation,
-          variables: this.mutationVariables,
-          update: (
-            store,
-            {
-              data: {
-                labelCreate: { label },
-              },
-            },
-          ) => this.updateLabelsInCache(store, label),
-        });
-        if (labelCreate.errors.length) {
-          createFlash({ message: errorMessage });
-        }
-      } catch {
-        createFlash({ message: errorMessage });
-      }
-      this.labelCreateInProgress = false;
-      this.$emit('hideCreateView');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="labels-select-contents-create js-labels-create">
-    <div class="dropdown-input">
-      <gl-form-input
-        v-model.trim="labelTitle"
-        :placeholder="__('Name new label')"
-        :autofocus="true"
-        data-testid="label-title-input"
-      />
-    </div>
-    <div class="dropdown-content gl-px-3">
-      <div class="suggest-colors suggest-colors-dropdown gl-mt-0! gl-mb-3!">
-        <gl-link
-          v-for="(color, index) in suggestedColors"
-          :key="index"
-          v-gl-tooltip:tooltipcontainer
-          :style="{ backgroundColor: getColorCode(color) }"
-          :title="getColorName(color)"
-          @click.prevent="handleColorClick(color)"
-        />
-      </div>
-      <div class="color-input-container gl-display-flex">
-        <span
-          class="dropdown-label-color-preview gl-relative gl-display-inline-block"
-          data-testid="selected-color"
-          :style="{ backgroundColor: selectedColor }"
-        ></span>
-        <gl-form-input
-          v-model.trim="selectedColor"
-          class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
-          :placeholder="__('Use custom color #FF0000')"
-          data-testid="selected-color-text"
-        />
-      </div>
-    </div>
-    <div class="dropdown-actions gl-display-flex gl-justify-content-space-between gl-pt-3 gl-px-3">
-      <gl-button
-        :disabled="disableCreate"
-        category="primary"
-        variant="success"
-        class="gl-display-flex gl-align-items-center"
-        data-testid="create-button"
-        @click="createLabel"
-      >
-        <gl-loading-icon v-if="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
-        {{ __('Create') }}
-      </gl-button>
-      <gl-button
-        class="js-btn-cancel-create"
-        data-testid="cancel-button"
-        @click.stop="$emit('hideCreateView')"
-      >
-        {{ __('Cancel') }}
-      </gl-button>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index db7192f4c0bf54..e5c874df45184e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
-import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
@@ -15,9 +14,6 @@ export default {
     GlIntersectionObserver,
     ColorItem,
   },
-  model: {
-    prop: 'localSelectedLabels',
-  },
   props: {
     allowMultiselect: {
       type: Boolean,
@@ -42,7 +38,24 @@ export default {
   },
   data() {
     return {
-      labels: [],
+      labels: [
+        {
+          title: 'Blue',
+          color: '#0000ff',
+        }, {
+          title: 'Green',
+          color: '#00ff00',
+        }, {
+          title: 'Orange',
+          color: '#FFA500',
+        }, {
+          title: 'Red',
+          color: '#ff0000',
+        }, {
+          title: 'Purple',
+          color: '#ff0000',
+        },
+      ],
       isVisible: false,
     };
   },
@@ -74,11 +87,6 @@ export default {
       return this.localSelectedLabels.map((label) => getIdFromGraphQLId(label.id));
     },
     visibleLabels() {
-      if (this.searchKey) {
-        return fuzzaldrinPlus.filter(this.labels, this.searchKey, {
-          key: ['title'],
-        });
-      }
       return this.labels;
     },
     showNoMatchingResultsMessage() {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
index fee36125377736..d8abecc4418417 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
@@ -10,30 +10,12 @@ export default {
       type: String,
       required: true,
     },
-    showDropdownContentsCreateView: {
-      type: Boolean,
-      required: true,
-    },
-    labelsFetchInProgress: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    searchKey: {
-      type: String,
-      required: true,
-    },
     isStandalone: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
-  methods: {
-    focusInput() {
-      this.$refs.searchInput?.focusInput();
-    },
-  },
 };
 </script>
 
@@ -44,16 +26,6 @@ export default {
       class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
       data-testid="dropdown-header-title"
     >
-      <gl-button
-        v-if="showDropdownContentsCreateView"
-        :aria-label="__('Go back')"
-        variant="link"
-        size="small"
-        class="js-btn-back dropdown-header-button gl-p-0"
-        icon="arrow-left"
-        data-testid="go-back-button"
-        @click.stop="$emit('toggleDropdownContentsCreateView')"
-      />
       <span class="gl-flex-grow-1">{{ dropdownTitle }}</span>
       <gl-button
         :aria-label="__('Close')"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
index 57ee816c4c7822..0565c8f8f24174 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -23,10 +23,6 @@ export default {
       type: Array,
       required: true,
     },
-    allowLabelRemove: {
-      type: Boolean,
-      required: true,
-    },
     labelsFilterBasePath: {
       type: String,
       required: true,
@@ -113,7 +109,6 @@ export default {
         :background-color="label.color"
         :target="labelFilterUrl(label)"
         :scoped="scopedLabel(label)"
-        :show-close-button="allowLabelRemove"
         :disabled="disableLabels"
         tooltip-placement="top"
         @close="removeLabel(label.id)"
-- 
GitLab


From 40e754f3987f19756848935758a315c025d592b9 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 22:45:44 +1000
Subject: [PATCH 08/24] Remove more stuff

---
 .../color_select_widget/color_select_root.vue   |  6 ------
 .../color_select_widget/dropdown_contents.vue   | 17 -----------------
 .../dropdown_contents_labels_view.vue           | 17 +----------------
 3 files changed, 1 insertion(+), 39 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index 4766a56877f620..393d5f481db766 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -78,10 +78,6 @@ export default {
       type: String,
       required: true,
     },
-    labelCreateType: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -309,7 +305,6 @@ export default {
             :full-path="fullPath"
             :workspace-type="workspaceType"
             :attr-workspace-path="attrWorkspacePath"
-            :label-create-type="labelCreateType"
             @setLabels="handleDropdownClose"
             @closeDropdown="collapseEditableItem"
           />
@@ -327,7 +322,6 @@ export default {
       :full-path="fullPath"
       :workspace-type="workspaceType"
       :attr-workspace-path="attrWorkspacePath"
-      :label-create-type="labelCreateType"
       @setLabels="handleDropdownClose"
     />
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 7f1689cd65d708..69cafd6f3404b7 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -54,17 +54,12 @@ export default {
       type: String,
       required: true,
     },
-    labelCreateType: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
       showDropdownContentsCreateView: false,
       localSelectedLabels: [...this.selectedLabels],
       isDirty: false,
-      searchKey: '',
     };
   },
   computed: {
@@ -119,18 +114,9 @@ export default {
         this.setLabels();
       }
     },
-    setSearchKey(value) {
-      this.searchKey = value;
-    },
     showDropdown() {
       this.$refs.dropdown.show();
     },
-    clearSearch() {
-      if (!this.allowMultiselect || this.isStandalone) {
-        return;
-      }
-      this.searchKey = '';
-    },
   },
 };
 </script>
@@ -155,13 +141,10 @@ export default {
     <template #default>
       <dropdown-contents-labels-view
         :local-selected-labels="localSelectedLabels"
-        :search-key="searchKey"
         :allow-multiselect="allowMultiselect"
         :full-path="fullPath"
         :workspace-type="workspaceType"
         :attr-workspace-path="attrWorkspacePath"
-        :label-create-type="labelCreateType"
-        @input="clearSearch"
       />
     </template>
   </gl-dropdown>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index e5c874df45184e..26ad5e69848b17 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -27,10 +27,6 @@ export default {
       type: String,
       required: true,
     },
-    searchKey: {
-      type: String,
-      required: true,
-    },
     workspaceType: {
       type: String,
       required: true,
@@ -67,11 +63,10 @@ export default {
       variables() {
         return {
           fullPath: this.fullPath,
-          searchTerm: this.searchKey,
         };
       },
       skip() {
-        return this.searchKey.length === 1 || !this.isVisible;
+        return !this.isVisible;
       },
       update: (data) => data.workspace?.labels?.nodes || [],
       error() {
@@ -89,9 +84,6 @@ export default {
     visibleLabels() {
       return this.labels;
     },
-    showNoMatchingResultsMessage() {
-      return Boolean(this.searchKey) && this.visibleLabels.length === 0;
-    },
   },
   methods: {
     isLabelSelected(label) {
@@ -161,13 +153,6 @@ export default {
           >
             <color-item :label="label" />
           </gl-dropdown-item>
-          <gl-dropdown-item
-            v-show="showNoMatchingResultsMessage"
-            class="gl-p-3 gl-text-center"
-            data-testid="no-results"
-          >
-            {{ __('No matching results') }}
-          </gl-dropdown-item>
         </template>
       </div>
     </gl-dropdown-form>
-- 
GitLab


From 02369d62e8d88a4b0e008d641e7eceef73b3543e Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 22:51:59 +1000
Subject: [PATCH 09/24] Remove apollo from color widget

---
 .../color_select_widget/dropdown_contents.vue | 12 ++--
 .../dropdown_contents_labels_view.vue         | 66 +++++--------------
 2 files changed, 22 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 69cafd6f3404b7..a38af6b88cf262 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -1,7 +1,5 @@
 <script>
-import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
-import { debounce } from 'lodash';
-import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import { GlDropdown } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
 import DropdownHeader from './dropdown_header.vue';
@@ -11,10 +9,7 @@ export default {
   components: {
     DropdownContentsLabelsView,
     DropdownHeader,
-    GlButton,
     GlDropdown,
-    GlDropdownItem,
-    GlLink,
   },
   props: {
     dropdownTitle: {
@@ -66,12 +61,15 @@ export default {
     buttonText() {
       if (!this.localSelectedLabels.length) {
         return this.dropdownButtonText || __('Color');
-      } else if (this.localSelectedLabels.length > 1) {
+      }
+
+      if (this.localSelectedLabels.length > 1) {
         return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), {
           firstLabelName: this.localSelectedLabels[0].title,
           remainingLabelCount: this.localSelectedLabels.length - 1,
         });
       }
+
       return this.localSelectedLabels[0].title;
     },
     isStandalone() {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index 26ad5e69848b17..4115e4867e04cc 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -1,16 +1,12 @@
 <script>
-import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
-import createFlash from '~/flash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { GlDropdownForm, GlDropdownItem, GlIntersectionObserver } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { workspaceLabelsQueries } from '~/sidebar/constants';
 import ColorItem from './color_item.vue';
 
 export default {
   components: {
     GlDropdownForm,
     GlDropdownItem,
-    GlLoadingIcon,
     GlIntersectionObserver,
     ColorItem,
   },
@@ -49,37 +45,15 @@ export default {
           color: '#ff0000',
         }, {
           title: 'Purple',
-          color: '#ff0000',
+          color: '#800080',
         },
       ],
       isVisible: false,
     };
   },
-  apollo: {
-    labels: {
-      query() {
-        return workspaceLabelsQueries[this.workspaceType].query;
-      },
-      variables() {
-        return {
-          fullPath: this.fullPath,
-        };
-      },
-      skip() {
-        return !this.isVisible;
-      },
-      update: (data) => data.workspace?.labels?.nodes || [],
-      error() {
-        createFlash({ message: __('Error fetching labels.') });
-      },
-    },
-  },
   computed: {
-    labelsFetchInProgress() {
-      return this.$apollo.queries.labels.loading;
-    },
     localSelectedLabelsIds() {
-      return this.localSelectedLabels.map((label) => getIdFromGraphQLId(label.id));
+      return this.localSelectedLabels.map((label) => label.color);
     },
     visibleLabels() {
       return this.labels;
@@ -87,7 +61,7 @@ export default {
   },
   methods: {
     isLabelSelected(label) {
-      return this.localSelectedLabelsIds.includes(getIdFromGraphQLId(label.id));
+      return this.localSelectedLabelsIds.includes(label.color);
     },
     /**
      * This method scrolls item from dropdown into
@@ -110,9 +84,10 @@ export default {
     },
     updateSelectedLabels(label) {
       let labels;
+
       if (this.isLabelSelected(label)) {
         labels = this.localSelectedLabels.filter(
-          ({ id }) => id !== getIdFromGraphQLId(label.id) && id !== label.id,
+          ({ color }) => color !== label.color && color !== label.color,
         );
       } else {
         labels = [...this.localSelectedLabels, label];
@@ -136,24 +111,17 @@ export default {
   <gl-intersection-observer @appear="onDropdownAppear">
     <gl-dropdown-form class="labels-select-contents-list js-labels-list">
       <div ref="labelsListContainer" data-testid="dropdown-content">
-        <gl-loading-icon
-          v-if="labelsFetchInProgress"
-          class="labels-fetch-loading gl-align-items-center gl-w-full gl-h-full gl-mb-3"
-          size="md"
-        />
-        <template v-else>
-          <gl-dropdown-item
-            v-for="label in visibleLabels"
-            :key="label.id"
-            :is-checked="isLabelSelected(label)"
-            :is-check-centered="true"
-            :is-check-item="true"
-            data-testid="labels-list"
-            @click.native.capture.stop="handleLabelClick(label)"
-          >
-            <color-item :label="label" />
-          </gl-dropdown-item>
-        </template>
+        <gl-dropdown-item
+          v-for="label in visibleLabels"
+          :key="label.id"
+          :is-checked="isLabelSelected(label)"
+          :is-check-centered="true"
+          :is-check-item="true"
+          data-testid="labels-list"
+          @click.native.capture.stop="handleLabelClick(label)"
+        >
+          <color-item :label="label" />
+        </gl-dropdown-item>
       </div>
     </gl-dropdown-form>
   </gl-intersection-observer>
-- 
GitLab


From 72d531e029205b70999097676ad60b9b185f16c5 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:13:23 +1000
Subject: [PATCH 10/24] Allow selecting only 1 color

---
 .../color_select_widget/color_select_root.vue |  7 --
 .../color_select_widget/dropdown_contents.vue |  7 +-
 .../dropdown_contents_labels_view.vue         | 78 +++++++------------
 3 files changed, 29 insertions(+), 63 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index 393d5f481db766..b7b4a02d013e6e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -36,11 +36,6 @@ export default {
       type: String,
       required: true,
     },
-    allowMultiselect: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     variant: {
       type: String,
       required: false,
@@ -297,7 +292,6 @@ export default {
           <dropdown-contents
             ref="dropdownContents"
             :dropdown-button-text="dropdownButtonText"
-            :allow-multiselect="allowMultiselect"
             :dropdown-title="dropdownTitle"
             :selected-labels="issuableLabels"
             :variant="variant"
@@ -314,7 +308,6 @@ export default {
     <dropdown-contents
       v-else
       ref="dropdownContents"
-      :allow-multiselect="allowMultiselect"
       :dropdown-button-text="dropdownButtonText"
       :dropdown-title="dropdownTitle"
       :selected-labels="issuableLabels"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index a38af6b88cf262..3474adfed6b3b9 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -20,10 +20,6 @@ export default {
       type: Array,
       required: true,
     },
-    allowMultiselect: {
-      type: Boolean,
-      required: true,
-    },
     dropdownButtonText: {
       type: String,
       required: true,
@@ -138,8 +134,7 @@ export default {
     </template>
     <template #default>
       <dropdown-contents-labels-view
-        :local-selected-labels="localSelectedLabels"
-        :allow-multiselect="allowMultiselect"
+        v-model="localSelectedLabels"
         :full-path="fullPath"
         :workspace-type="workspaceType"
         :attr-workspace-path="attrWorkspacePath"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index 4115e4867e04cc..20eceebfa97d49 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdownForm, GlDropdownItem, GlIntersectionObserver } from '@gitlab/ui';
+import { GlDropdownForm, GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 import ColorItem from './color_item.vue';
 
@@ -7,14 +7,12 @@ export default {
   components: {
     GlDropdownForm,
     GlDropdownItem,
-    GlIntersectionObserver,
     ColorItem,
   },
+  model: {
+    prop: 'localSelectedLabels',
+  },
   props: {
-    allowMultiselect: {
-      type: Boolean,
-      required: true,
-    },
     localSelectedLabels: {
       type: Array,
       required: true,
@@ -32,32 +30,28 @@ export default {
     return {
       labels: [
         {
-          title: 'Blue',
+          title: __('Blue'),
           color: '#0000ff',
         }, {
-          title: 'Green',
+          title: __('Green'),
           color: '#00ff00',
         }, {
-          title: 'Orange',
+          title: __('Orange'),
           color: '#FFA500',
         }, {
-          title: 'Red',
+          title: __('Red'),
           color: '#ff0000',
         }, {
-          title: 'Purple',
+          title: __('Purple'),
           color: '#800080',
         },
       ],
-      isVisible: false,
     };
   },
   computed: {
     localSelectedLabelsIds() {
       return this.localSelectedLabels.map((label) => label.color);
     },
-    visibleLabels() {
-      return this.labels;
-    },
   },
   methods: {
     isLabelSelected(label) {
@@ -82,47 +76,31 @@ export default {
         }
       }
     },
-    updateSelectedLabels(label) {
-      let labels;
-
-      if (this.isLabelSelected(label)) {
-        labels = this.localSelectedLabels.filter(
-          ({ color }) => color !== label.color && color !== label.color,
-        );
-      } else {
-        labels = [...this.localSelectedLabels, label];
-      }
-      this.$emit('input', labels);
+    updateSelectedLabel(label) {
+      this.$emit('input', label);
     },
     handleLabelClick(label) {
-      this.updateSelectedLabels(label);
-      if (!this.allowMultiselect) {
-        this.$emit('closeDropdown', this.localSelectedLabels);
-      }
-    },
-    onDropdownAppear() {
-      this.isVisible = true;
+      this.updateSelectedLabel(label);
+      this.$emit('closeDropdown', this.localSelectedLabels);
     },
   },
 };
 </script>
 
 <template>
-  <gl-intersection-observer @appear="onDropdownAppear">
-    <gl-dropdown-form class="labels-select-contents-list js-labels-list">
-      <div ref="labelsListContainer" data-testid="dropdown-content">
-        <gl-dropdown-item
-          v-for="label in visibleLabels"
-          :key="label.id"
-          :is-checked="isLabelSelected(label)"
-          :is-check-centered="true"
-          :is-check-item="true"
-          data-testid="labels-list"
-          @click.native.capture.stop="handleLabelClick(label)"
-        >
-          <color-item :label="label" />
-        </gl-dropdown-item>
-      </div>
-    </gl-dropdown-form>
-  </gl-intersection-observer>
+  <gl-dropdown-form class="labels-select-contents-list js-labels-list">
+    <div ref="labelsListContainer" data-testid="dropdown-content">
+      <gl-dropdown-item
+        v-for="label in labels"
+        :key="label.color"
+        :is-checked="isLabelSelected(label)"
+        :is-check-centered="true"
+        :is-check-item="true"
+        data-testid="labels-list"
+        @click.native.capture.stop="handleLabelClick(label)"
+      >
+        <color-item :label="label" />
+      </gl-dropdown-item>
+    </div>
+  </gl-dropdown-form>
 </template>
-- 
GitLab


From bede33004a5d6e98531c1e33c4bc9cf1ca832770 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:16:54 +1000
Subject: [PATCH 11/24] Rename label to colour in the color-item component

---
 .../sidebar/color_select_widget/color_item.vue         |  7 +++----
 .../dropdown_contents_labels_view.vue                  | 10 +++++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
index f27f0b4e34c840..de9d8d13d6ce14 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
@@ -1,7 +1,7 @@
 <script>
 export default {
   props: {
-    label: {
+    color: {
       type: Object,
       required: true,
     },
@@ -13,9 +13,8 @@ export default {
   <div>
     <span
       class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
-      :style="{ 'background-color': label.color }"
-      data-testid="label-color-box"
+      :style="{ 'background-color': color.color }"
     ></span>
-    <span>{{ label.title }}</span>
+    <span>{{ color.title }}</span>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index 20eceebfa97d49..45c6e36c5abcf1 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -91,15 +91,15 @@ export default {
   <gl-dropdown-form class="labels-select-contents-list js-labels-list">
     <div ref="labelsListContainer" data-testid="dropdown-content">
       <gl-dropdown-item
-        v-for="label in labels"
-        :key="label.color"
-        :is-checked="isLabelSelected(label)"
+        v-for="color in labels"
+        :key="color.color"
+        :is-checked="isLabelSelected(color)"
         :is-check-centered="true"
         :is-check-item="true"
         data-testid="labels-list"
-        @click.native.capture.stop="handleLabelClick(label)"
+        @click.native.capture.stop="handleLabelClick(color)"
       >
-        <color-item :label="label" />
+        <color-item :color="color" />
       </gl-dropdown-item>
     </div>
   </gl-dropdown-form>
-- 
GitLab


From 83ed5aa464f0b6339960ce950c4b7700ce4a48c7 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:23:23 +1000
Subject: [PATCH 12/24] Internal renaming of label to color

---
 .../dropdown_contents_labels_view.vue         | 46 ++++++-------------
 1 file changed, 13 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index 45c6e36c5abcf1..5c3db80a837cee 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -10,10 +10,10 @@ export default {
     ColorItem,
   },
   model: {
-    prop: 'localSelectedLabels',
+    prop: 'localSelectedColors',
   },
   props: {
-    localSelectedLabels: {
+    localSelectedColors: {
       type: Array,
       required: true,
     },
@@ -49,39 +49,20 @@ export default {
     };
   },
   computed: {
-    localSelectedLabelsIds() {
-      return this.localSelectedLabels.map((label) => label.color);
+    localSelectedColor() {
+      return this.localSelectedColors.map((color) => color.color);
     },
   },
   methods: {
-    isLabelSelected(label) {
-      return this.localSelectedLabelsIds.includes(label.color);
+    isColorSelected(color) {
+      return this.localSelectedColor.includes(color.color);
     },
-    /**
-     * This method scrolls item from dropdown into
-     * the view if it is off the viewable area of the
-     * container.
-     */
-    scrollIntoViewIfNeeded() {
-      const highlightedLabel = this.$refs.labelsListContainer.querySelector('.is-focused');
-
-      if (highlightedLabel) {
-        const container = this.$refs.labelsListContainer.getBoundingClientRect();
-        const label = highlightedLabel.getBoundingClientRect();
-
-        if (label.bottom > container.bottom) {
-          this.$refs.labelsListContainer.scrollTop += label.bottom - container.bottom;
-        } else if (label.top < container.top) {
-          this.$refs.labelsListContainer.scrollTop -= container.top - label.top;
-        }
-      }
-    },
-    updateSelectedLabel(label) {
-      this.$emit('input', label);
+    updateSelectedColor(color) {
+      this.$emit('input', [color]);
     },
-    handleLabelClick(label) {
-      this.updateSelectedLabel(label);
-      this.$emit('closeDropdown', this.localSelectedLabels);
+    handleColorClick(color) {
+      this.updateSelectedColor(color);
+      this.$emit('closeDropdown', this.localSelectedColors);
     },
   },
 };
@@ -93,11 +74,10 @@ export default {
       <gl-dropdown-item
         v-for="color in labels"
         :key="color.color"
-        :is-checked="isLabelSelected(color)"
+        :is-checked="isColorSelected(color)"
         :is-check-centered="true"
         :is-check-item="true"
-        data-testid="labels-list"
-        @click.native.capture.stop="handleLabelClick(color)"
+        @click.native.capture.stop="handleColorClick(color)"
       >
         <color-item :color="color" />
       </gl-dropdown-item>
-- 
GitLab


From cfe66c93320aec54a92abe95ae9b61b8d642b5e7 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:26:32 +1000
Subject: [PATCH 13/24] Remove unused props

---
 .../sidebar/color_select_widget/dropdown_contents.vue     | 3 ---
 .../color_select_widget/dropdown_contents_labels_view.vue | 8 --------
 2 files changed, 11 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 3474adfed6b3b9..6c10b847d2b2a3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -135,9 +135,6 @@ export default {
     <template #default>
       <dropdown-contents-labels-view
         v-model="localSelectedLabels"
-        :full-path="fullPath"
-        :workspace-type="workspaceType"
-        :attr-workspace-path="attrWorkspacePath"
       />
     </template>
   </gl-dropdown>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index 5c3db80a837cee..f88593322bccb6 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -17,14 +17,6 @@ export default {
       type: Array,
       required: true,
     },
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    workspaceType: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
-- 
GitLab


From 2e44853cf32c13bc2dbfee6613244595a5094db3 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:32:49 +1000
Subject: [PATCH 14/24] Remove more unneeded props

---
 .../color_select_widget/color_select_root.vue | 14 --------------
 .../color_select_widget/dropdown_contents.vue | 19 -------------------
 2 files changed, 33 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index b7b4a02d013e6e..67c85de4616788 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -65,14 +65,6 @@ export default {
       type: String,
       required: true,
     },
-    workspaceType: {
-      type: String,
-      required: true,
-    },
-    attrWorkspacePath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -296,9 +288,6 @@ export default {
             :selected-labels="issuableLabels"
             :variant="variant"
             :is-visible="edit"
-            :full-path="fullPath"
-            :workspace-type="workspaceType"
-            :attr-workspace-path="attrWorkspacePath"
             @setLabels="handleDropdownClose"
             @closeDropdown="collapseEditableItem"
           />
@@ -312,9 +301,6 @@ export default {
       :dropdown-title="dropdownTitle"
       :selected-labels="issuableLabels"
       :variant="variant"
-      :full-path="fullPath"
-      :workspace-type="workspaceType"
-      :attr-workspace-path="attrWorkspacePath"
       @setLabels="handleDropdownClose"
     />
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 6c10b847d2b2a3..2fb3352aa6d542 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -33,18 +33,6 @@ export default {
       required: false,
       default: false,
     },
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    workspaceType: {
-      type: String,
-      required: true,
-    },
-    attrWorkspacePath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -59,13 +47,6 @@ export default {
         return this.dropdownButtonText || __('Color');
       }
 
-      if (this.localSelectedLabels.length > 1) {
-        return sprintf(s__('LabelSelect|%{firstLabelName} +%{remainingLabelCount} more'), {
-          firstLabelName: this.localSelectedLabels[0].title,
-          remainingLabelCount: this.localSelectedLabels.length - 1,
-        });
-      }
-
       return this.localSelectedLabels[0].title;
     },
     isStandalone() {
-- 
GitLab


From a01adb5f70986d713067d5f7d705147ac30e67ca Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:33:52 +1000
Subject: [PATCH 15/24] remove some unused imports

---
 .../sidebar/color_select_widget/dropdown_contents.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 2fb3352aa6d542..f05f6ddfa6c82a 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlDropdown } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
+import { __ } from '~/locale';
 import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
 import DropdownHeader from './dropdown_header.vue';
 import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils';
-- 
GitLab


From a1cd792af6ce8e870d704848b4c015ef2af17274 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Wed, 29 Dec 2021 23:49:14 +1000
Subject: [PATCH 16/24] Start adding color widget to sidebar

---
 .../sidebar/color_select_widget/color_select_root.vue           | 2 +-
 ee/app/assets/javascripts/epic/components/epic_sidebar.vue      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index 67c85de4616788..2d72e818a83ffa 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -254,7 +254,7 @@ export default {
     <template v-if="isDropdownVariantSidebar(variant)">
       <sidebar-editable-item
         ref="editable"
-        :title="__('Labels')"
+        :title="__('Color')"
         :can-edit="allowLabelEdit"
         @open="oldIid = null"
       >
diff --git a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
index 9721a7e44eb68b..a8273b3b8c187b 100644
--- a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
@@ -164,6 +164,7 @@ export default {
       >
         {{ __('None') }}
       </color-select-dropdown>
+
       <sidebar-confidentiality-widget
         :iid="String(iid)"
         :full-path="fullPath"
-- 
GitLab


From b7859f43e50d4ca53a1a2a8ba78a88d9181b8afa Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Thu, 30 Dec 2021 22:12:42 +1000
Subject: [PATCH 17/24] More sidebar work

---
 .../color_select_widget/color_select_root.vue     |  9 +++++----
 .../sidebar/color_select_widget/constants.js      |  6 ------
 .../graphql/epic_color.query.graphql              |  9 +++++++++
 .../graphql/epic_labels.query.graphql             | 15 ---------------
 .../graphql/epic_update_color.mutation.graphql    |  9 +++++++++
 .../graphql/epic_update_labels.mutation.graphql   | 15 ---------------
 6 files changed, 23 insertions(+), 40 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index 2d72e818a83ffa..f4eada02fae2d7 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -5,7 +5,6 @@ import createFlash from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { __ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { issuableLabelsQueries } from '~/sidebar/constants';
 import { DEBOUNCE_DROPDOWN_DELAY, DropdownVariant } from './constants';
 import DropdownContents from './dropdown_contents.vue';
 import DropdownValue from './dropdown_value.vue';
@@ -14,6 +13,8 @@ import {
   isDropdownVariantStandalone,
   isDropdownVariantEmbedded,
 } from './utils';
+import epicColorQuery from './graphql/epic_color.query.graphql';
+import updateEpicColorMutation from './graphql/epic_update_color.mutation.graphql';
 
 export default {
   components: {
@@ -83,7 +84,7 @@ export default {
   apollo: {
     issuableLabels: {
       query() {
-        return issuableLabelsQueries[this.issuableType].issuableQuery;
+        return epicColorQuery;
       },
       skip() {
         return !isDropdownVariantSidebar(this.variant);
@@ -95,7 +96,7 @@ export default {
         };
       },
       update(data) {
-        return data.workspace?.issuable?.labels.nodes || [];
+        return [data.workspace?.issuable?.color] || [''];
       },
       error() {
         createFlash({ message: __('Error fetching labels.') });
@@ -179,7 +180,7 @@ export default {
 
       this.$apollo
         .mutate({
-          mutation: issuableLabelsQueries[this.issuableType].mutation,
+          mutation: updateEpicColorMutation,
           variables: { input: inputVariables },
         })
         .then(({ data }) => {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
index cd671b4d8f5db1..905413d275ba1e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
@@ -1,4 +1,3 @@
-export const SCOPED_LABEL_DELIMITER = '::';
 export const DEBOUNCE_DROPDOWN_DELAY = 200;
 
 export const DropdownVariant = {
@@ -6,8 +5,3 @@ export const DropdownVariant = {
   Standalone: 'standalone',
   Embedded: 'embedded',
 };
-
-export const LabelType = {
-  group: 'group',
-  project: 'project',
-};
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql
new file mode 100644
index 00000000000000..959e0f8c1a501e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql
@@ -0,0 +1,9 @@
+query epicColor($fullPath: ID!, $iid: ID) {
+  workspace: group(fullPath: $fullPath) {
+    id
+    issuable: epic(iid: $iid) {
+      id
+      color
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql
deleted file mode 100644
index c442c17eb88f62..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_labels.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query epicLabels($fullPath: ID!, $iid: ID) {
-  workspace: group(fullPath: $fullPath) {
-    id
-    issuable: epic(iid: $iid) {
-      id
-      labels {
-        nodes {
-          ...Label
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql
new file mode 100644
index 00000000000000..2975b42253f022
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql
@@ -0,0 +1,9 @@
+mutation updateEpicColor($input: UpdateEpicInput!) {
+  updateIssuableColor: updateEpic(input: $input) {
+    issuable: epic {
+      id
+      color
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql
deleted file mode 100644
index cb054e2968ff78..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_labels.mutation.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-mutation updateEpicLabels($input: UpdateEpicInput!) {
-  updateIssuableLabels: updateEpic(input: $input) {
-    issuable: epic {
-      id
-      labels {
-        nodes {
-          ...Label
-        }
-      }
-    }
-    errors
-  }
-}
-- 
GitLab


From 3b337db53188a5fe477f03afeafc5d44e6b0a6ca Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Thu, 30 Dec 2021 22:14:53 +1000
Subject: [PATCH 18/24] Remove label filter props

---
 .../color_select_widget/color_select_root.vue      | 14 --------------
 .../sidebar/color_select_widget/dropdown_value.vue | 14 --------------
 2 files changed, 28 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index f4eada02fae2d7..9e1931d99ed781 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -42,16 +42,6 @@ export default {
       required: false,
       default: DropdownVariant.Sidebar,
     },
-    labelsFilterBasePath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    labelsFilterParam: {
-      type: String,
-      required: false,
-      default: 'label_name',
-    },
     dropdownButtonText: {
       type: String,
       required: false,
@@ -263,8 +253,6 @@ export default {
           <dropdown-value
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issuableLabels"
-            :labels-filter-base-path="labelsFilterBasePath"
-            :labels-filter-param="labelsFilterParam"
             @onLabelRemove="handleLabelRemove"
             @onCollapsedValueClick="handleCollapsedValueClick"
           >
@@ -275,8 +263,6 @@ export default {
           <dropdown-value
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issuableLabels"
-            :labels-filter-base-path="labelsFilterBasePath"
-            :labels-filter-param="labelsFilterParam"
             class="gl-mb-2"
             @onLabelRemove="handleLabelRemove"
           >
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
index 0565c8f8f24174..53d9cb77775f80 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -23,14 +23,6 @@ export default {
       type: Array,
       required: true,
     },
-    labelsFilterBasePath: {
-      type: String,
-      required: true,
-    },
-    labelsFilterParam: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     sortedSelectedLabels() {
@@ -55,11 +47,6 @@ export default {
     },
   },
   methods: {
-    labelFilterUrl(label) {
-      return `${this.labelsFilterBasePath}?${this.labelsFilterParam}[]=${encodeURIComponent(
-        label.title,
-      )}`;
-    },
     scopedLabel(label) {
       return this.allowScopedLabels && isScopedLabel(label);
     },
@@ -107,7 +94,6 @@ export default {
         :title="label.title"
         :description="label.description"
         :background-color="label.color"
-        :target="labelFilterUrl(label)"
         :scoped="scopedLabel(label)"
         :disabled="disableLabels"
         tooltip-placement="top"
-- 
GitLab


From 2b416624109a2e407597072caff72758af566359 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Thu, 30 Dec 2021 22:19:52 +1000
Subject: [PATCH 19/24] Get the color to display in the sidebar

---
 .../color_select_widget/dropdown_value.vue    | 74 +++----------------
 1 file changed, 12 insertions(+), 62 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
index 53d9cb77775f80..81d22d42dfbc85 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -1,8 +1,6 @@
 <script>
 import { GlIcon, GlLabel, GlTooltipDirective } from '@gitlab/ui';
-import { sortBy } from 'lodash';
-import { isScopedLabel } from '~/lib/utils/common_utils';
-import { s__, sprintf } from '~/locale';
+import { __ } from '~/locale';
 
 export default {
   directives: {
@@ -24,39 +22,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    sortedSelectedLabels() {
-      return sortBy(this.selectedLabels, (label) => (isScopedLabel(label) ? 0 : 1));
-    },
-    labelsList() {
-      const labelsString = this.selectedLabels.length
-        ? this.selectedLabels
-            .slice(0, 5)
-            .map((label) => label.title)
-            .join(', ')
-        : s__('LabelSelect|Labels');
-
-      if (this.selectedLabels.length > 5) {
-        return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), {
-          labelsString,
-          remainingLabelCount: this.selectedLabels.length - 5,
-        });
-      }
-
-      return labelsString;
-    },
-  },
-  methods: {
-    scopedLabel(label) {
-      return this.allowScopedLabels && isScopedLabel(label);
-    },
-    removeLabel(labelId) {
-      this.$emit('onLabelRemove', labelId);
-    },
-    handleCollapsedClick() {
-      this.$emit('onCollapsedValueClick');
-    },
-  },
 };
 </script>
 
@@ -70,35 +35,20 @@ export default {
   >
     <div
       v-gl-tooltip.left.viewport
-      :title="labelsList"
+      :title="__('Color')"
       class="sidebar-collapsed-icon"
-      @click="handleCollapsedClick"
     >
       <gl-icon name="labels" />
-      <span class="gl-font-base gl-line-height-24">{{ selectedLabels.length }}</span>
     </div>
-    <span
-      v-if="!selectedLabels.length"
-      class="text-secondary hide-collapsed"
-      data-testid="empty-placeholder"
-    >
-      <slot></slot>
-    </span>
-    <template v-else>
-      <gl-label
-        v-for="label in sortedSelectedLabels"
-        :key="label.id"
-        class="hide-collapsed"
-        data-qa-selector="selected_label_content"
-        :data-qa-label-name="label.title"
-        :title="label.title"
-        :description="label.description"
-        :background-color="label.color"
-        :scoped="scopedLabel(label)"
-        :disabled="disableLabels"
-        tooltip-placement="top"
-        @close="removeLabel(label.id)"
-      />
-    </template>
+    <gl-label
+      v-for="label in selectedLabels"
+      :key="label"
+      class="hide-collapsed"
+      data-qa-selector="selected_label_content"
+      :title="label"
+      :description="label"
+      :background-color="label"
+      tooltip-placement="top"
+    />
   </div>
 </template>
-- 
GitLab


From 45af759325432212412b99b7aebe187ccbbd2896 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Thu, 30 Dec 2021 22:21:53 +1000
Subject: [PATCH 20/24] Remove collapased click handler

---
 .../color_select_widget/color_select_root.vue | 21 +------------------
 .../sidebar/color_select_widget/constants.js  |  2 --
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index 9e1931d99ed781..d54cab28e1f024 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -1,11 +1,10 @@
 <script>
-import { debounce } from 'lodash';
 import { MutationOperationMode, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import createFlash from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { __ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { DEBOUNCE_DROPDOWN_DELAY, DropdownVariant } from './constants';
+import { DropdownVariant } from './constants';
 import DropdownContents from './dropdown_contents.vue';
 import DropdownValue from './dropdown_value.vue';
 import {
@@ -98,15 +97,6 @@ export default {
       this.oldIid = oldVal;
     },
   },
-  mounted() {
-    document.addEventListener('toggleSidebarRevealLabelsDropdown', this.handleCollapsedValueClick);
-  },
-  beforeDestroy() {
-    document.removeEventListener(
-      'toggleSidebarRevealLabelsDropdown',
-      this.handleCollapsedValueClick,
-    );
-  },
   methods: {
     handleDropdownClose(labels) {
       if (this.iid !== '') {
@@ -124,14 +114,6 @@ export default {
         this.$emit('toggleCollapse');
       }
     },
-    handleCollapsedValueClick() {
-      this.sidebarExpandedOnClick = true;
-      this.$emit('toggleCollapse');
-      debounce(() => {
-        this.$refs.editable.toggle();
-        this.$refs.dropdownContents.showDropdown();
-      }, DEBOUNCE_DROPDOWN_DELAY)();
-    },
     getUpdateVariables(labels) {
       let labelIds = [];
 
@@ -254,7 +236,6 @@ export default {
             :disable-labels="labelsSelectInProgress"
             :selected-labels="issuableLabels"
             @onLabelRemove="handleLabelRemove"
-            @onCollapsedValueClick="handleCollapsedValueClick"
           >
             <slot></slot>
           </dropdown-value>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
index 905413d275ba1e..00c543132921c9 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
@@ -1,5 +1,3 @@
-export const DEBOUNCE_DROPDOWN_DELAY = 200;
-
 export const DropdownVariant = {
   Sidebar: 'sidebar',
   Standalone: 'standalone',
-- 
GitLab


From f71451e6e20d1db199b35c38fa7793f0f28e2193 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Fri, 31 Dec 2021 00:17:15 +1000
Subject: [PATCH 21/24] More stuff. I do not even know any more

---
 .../color_select_widget/color_select_root.vue | 30 +++++--------------
 .../color_select_widget/dropdown_contents.vue | 10 ++-----
 .../dropdown_contents_labels_view.vue         | 11 ++-----
 .../color_select_widget/dropdown_value.vue    | 24 ++++-----------
 .../graphql/create_label.mutation.graphql     | 12 --------
 .../graphql/group_labels.query.graphql        | 12 --------
 .../graphql/issue_labels.query.graphql        | 15 ----------
 .../merge_request_labels.query.graphql        | 15 ----------
 .../graphql/project_labels.query.graphql      | 12 --------
 9 files changed, 20 insertions(+), 121 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index d54cab28e1f024..487819b19a4281 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -59,19 +59,16 @@ export default {
   data() {
     return {
       contentIsOnViewport: true,
-      issuableLabels: [],
+      issuableColor: '',
       labelsSelectInProgress: false,
       oldIid: null,
       sidebarExpandedOnClick: false,
     };
   },
   computed: {
-    issuableLabelIds() {
-      return this.issuableLabels.map((label) => label.id);
-    },
   },
   apollo: {
-    issuableLabels: {
+    issuableColor: {
       query() {
         return epicColorQuery;
       },
@@ -85,7 +82,7 @@ export default {
         };
       },
       update(data) {
-        return [data.workspace?.issuable?.color] || [''];
+        return data.workspace?.issuable?.color || '';
       },
       error() {
         createFlash({ message: __('Error fetching labels.') });
@@ -138,10 +135,7 @@ export default {
           return {
             iid: currentIid,
             groupPath: this.fullPath,
-            addLabelIds: labelIds.map((id) => getIdFromGraphQLId(id)),
-            removeLabelIds: this.issuableLabelIds
-              .filter((id) => !labelIds.includes(id))
-              .map((id) => getIdFromGraphQLId(id)),
+            color: this.issuableColor,
           };
         default:
           return {};
@@ -204,10 +198,6 @@ export default {
           return {};
       }
     },
-    handleLabelRemove(labelId) {
-      this.updateSelectedLabels(this.getRemoveVariables(labelId));
-      this.$emit('onLabelRemove', labelId);
-    },
     isDropdownVariantSidebar,
     isDropdownVariantStandalone,
     isDropdownVariantEmbedded,
@@ -233,19 +223,15 @@ export default {
       >
         <template #collapsed>
           <dropdown-value
-            :disable-labels="labelsSelectInProgress"
-            :selected-labels="issuableLabels"
-            @onLabelRemove="handleLabelRemove"
+            :selected-labels="issuableColor"
           >
             <slot></slot>
           </dropdown-value>
         </template>
         <template #default="{ edit }">
           <dropdown-value
-            :disable-labels="labelsSelectInProgress"
-            :selected-labels="issuableLabels"
+            :selected-labels="issuableColor"
             class="gl-mb-2"
-            @onLabelRemove="handleLabelRemove"
           >
             <slot></slot>
           </dropdown-value>
@@ -253,7 +239,7 @@ export default {
             ref="dropdownContents"
             :dropdown-button-text="dropdownButtonText"
             :dropdown-title="dropdownTitle"
-            :selected-labels="issuableLabels"
+            :selected-labels="issuableColor"
             :variant="variant"
             :is-visible="edit"
             @setLabels="handleDropdownClose"
@@ -267,7 +253,7 @@ export default {
       ref="dropdownContents"
       :dropdown-button-text="dropdownButtonText"
       :dropdown-title="dropdownTitle"
-      :selected-labels="issuableLabels"
+      :selected-labels="issuableColor"
       :variant="variant"
       @setLabels="handleDropdownClose"
     />
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index f05f6ddfa6c82a..9c78569f716ce6 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -17,7 +17,7 @@ export default {
       required: true,
     },
     selectedLabels: {
-      type: Array,
+      type: String,
       required: true,
     },
     dropdownButtonText: {
@@ -37,17 +37,13 @@ export default {
   data() {
     return {
       showDropdownContentsCreateView: false,
-      localSelectedLabels: [...this.selectedLabels],
+      localSelectedLabels: this.selectedLabels,
       isDirty: false,
     };
   },
   computed: {
     buttonText() {
-      if (!this.localSelectedLabels.length) {
-        return this.dropdownButtonText || __('Color');
-      }
-
-      return this.localSelectedLabels[0].title;
+      return this.localSelectedLabels.title;
     },
     isStandalone() {
       return isDropdownVariantStandalone(this.variant);
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index f88593322bccb6..6947816b61212f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -14,7 +14,7 @@ export default {
   },
   props: {
     localSelectedColors: {
-      type: Array,
+      type: String,
       required: true,
     },
   },
@@ -40,17 +40,12 @@ export default {
       ],
     };
   },
-  computed: {
-    localSelectedColor() {
-      return this.localSelectedColors.map((color) => color.color);
-    },
-  },
   methods: {
     isColorSelected(color) {
-      return this.localSelectedColor.includes(color.color);
+      return this.localSelectedColors === color.color;
     },
     updateSelectedColor(color) {
-      this.$emit('input', [color]);
+      this.$emit('input', color);
     },
     handleColorClick(color) {
       this.updateSelectedColor(color);
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
index 81d22d42dfbc85..ccf2f67dc7085c 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -1,6 +1,7 @@
 <script>
-import { GlIcon, GlLabel, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
+import ColorItem from './color_item.vue';
 
 export default {
   directives: {
@@ -8,17 +9,12 @@ export default {
   },
   components: {
     GlIcon,
-    GlLabel,
+    ColorItem,
   },
   inject: ['allowScopedLabels'],
   props: {
-    disableLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     selectedLabels: {
-      type: Array,
+      type: String,
       required: true,
     },
   },
@@ -40,15 +36,7 @@ export default {
     >
       <gl-icon name="labels" />
     </div>
-    <gl-label
-      v-for="label in selectedLabels"
-      :key="label"
-      class="hide-collapsed"
-      data-qa-selector="selected_label_content"
-      :title="label"
-      :description="label"
-      :background-color="label"
-      tooltip-placement="top"
-    />
+
+    <color-item :color="{color:selectedLabels, title: selectedLabels}" />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
deleted file mode 100644
index a9c791091fc335..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPath: ID) {
-  labelCreate(
-    input: { title: $title, color: $color, projectPath: $projectPath, groupPath: $groupPath }
-  ) {
-    label {
-      ...Label
-    }
-    errors
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
deleted file mode 100644
index ce1a69f84c0c5f..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query groupLabels($fullPath: ID!, $searchTerm: String) {
-  workspace: group(fullPath: $fullPath) {
-    id
-    labels(searchTerm: $searchTerm, onlyGroupLabels: true, includeAncestorGroups: true) {
-      nodes {
-        ...Label
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
deleted file mode 100644
index 2904857270ed63..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query issueLabels($fullPath: ID!, $iid: String) {
-  workspace: project(fullPath: $fullPath) {
-    id
-    issuable: issue(iid: $iid) {
-      id
-      labels {
-        nodes {
-          ...Label
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
deleted file mode 100644
index e0cdfd91658a96..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query mergeRequestLabels($fullPath: ID!, $iid: String!) {
-  workspace: project(fullPath: $fullPath) {
-    id
-    issuable: mergeRequest(iid: $iid) {
-      id
-      labels {
-        nodes {
-          ...Label
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
deleted file mode 100644
index a7c24620aad710..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query projectLabels($fullPath: ID!, $searchTerm: String) {
-  workspace: project(fullPath: $fullPath) {
-    id
-    labels(searchTerm: $searchTerm, includeAncestorGroups: true) {
-      nodes {
-        ...Label
-      }
-    }
-  }
-}
-- 
GitLab


From 7f8bd3fdc2e7295966068ba2a87962498b55ff06 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Tue, 4 Jan 2022 20:54:55 +1000
Subject: [PATCH 22/24] wip?

---
 .../color_select_widget/color_select_root.vue |  5 +++-
 .../sidebar/color_select_widget/constants.js  | 21 ++++++++++++++++
 .../color_select_widget/dropdown_contents.vue |  2 +-
 .../dropdown_contents_labels_view.vue         | 25 +++----------------
 .../color_select_widget/dropdown_value.vue    |  2 +-
 .../graphql/create_label.mutation.graphql     | 12 +++++++++
 .../graphql/group_labels.query.graphql        | 12 +++++++++
 .../graphql/issue_labels.query.graphql        | 15 +++++++++++
 .../merge_request_labels.query.graphql        | 15 +++++++++++
 .../graphql/project_labels.query.graphql      | 12 +++++++++
 10 files changed, 97 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
 create mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index 487819b19a4281..a8b6881e1e56fe 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -59,7 +59,10 @@ export default {
   data() {
     return {
       contentIsOnViewport: true,
-      issuableColor: '',
+      issuableColor: {
+        color: '',
+        title: '',
+      },
       labelsSelectInProgress: false,
       oldIid: null,
       sidebarExpandedOnClick: false,
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
index 00c543132921c9..d01c5cd9f5fb5a 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
@@ -1,5 +1,26 @@
+import { __ } from '~/locale';
+
 export const DropdownVariant = {
   Sidebar: 'sidebar',
   Standalone: 'standalone',
   Embedded: 'embedded',
 };
+
+export const labelColors = [
+  {
+    title: __('Blue'),
+    color: '#0000ff',
+  }, {
+    title: __('Green'),
+    color: '#00ff00',
+  }, {
+    title: __('Orange'),
+    color: '#FFA500',
+  }, {
+    title: __('Red'),
+    color: '#ff0000',
+  }, {
+    title: __('Purple'),
+    color: '#800080',
+  },
+];
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 9c78569f716ce6..65ae27d9158b3b 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -17,7 +17,7 @@ export default {
       required: true,
     },
     selectedLabels: {
-      type: String,
+      type: Object,
       required: true,
     },
     dropdownButtonText: {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
index 6947816b61212f..2cd6e8aec9d5b3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdownForm, GlDropdownItem } from '@gitlab/ui';
-import { __ } from '~/locale';
 import ColorItem from './color_item.vue';
+import { labelColors } from './constants';
 
 export default {
   components: {
@@ -14,30 +14,13 @@ export default {
   },
   props: {
     localSelectedColors: {
-      type: String,
+      type: Object,
       required: true,
     },
   },
   data() {
     return {
-      labels: [
-        {
-          title: __('Blue'),
-          color: '#0000ff',
-        }, {
-          title: __('Green'),
-          color: '#00ff00',
-        }, {
-          title: __('Orange'),
-          color: '#FFA500',
-        }, {
-          title: __('Red'),
-          color: '#ff0000',
-        }, {
-          title: __('Purple'),
-          color: '#800080',
-        },
-      ],
+      colors: labelColors,
     };
   },
   methods: {
@@ -59,7 +42,7 @@ export default {
   <gl-dropdown-form class="labels-select-contents-list js-labels-list">
     <div ref="labelsListContainer" data-testid="dropdown-content">
       <gl-dropdown-item
-        v-for="color in labels"
+        v-for="color in colors"
         :key="color.color"
         :is-checked="isColorSelected(color)"
         :is-check-centered="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
index ccf2f67dc7085c..e18f1719503936 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -14,7 +14,7 @@ export default {
   inject: ['allowScopedLabels'],
   props: {
     selectedLabels: {
-      type: String,
+      type: Object,
       required: true,
     },
   },
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
new file mode 100644
index 00000000000000..a9c791091fc335
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
@@ -0,0 +1,12 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPath: ID) {
+  labelCreate(
+    input: { title: $title, color: $color, projectPath: $projectPath, groupPath: $groupPath }
+  ) {
+    label {
+      ...Label
+    }
+    errors
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
new file mode 100644
index 00000000000000..ce1a69f84c0c5f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
@@ -0,0 +1,12 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query groupLabels($fullPath: ID!, $searchTerm: String) {
+  workspace: group(fullPath: $fullPath) {
+    id
+    labels(searchTerm: $searchTerm, onlyGroupLabels: true, includeAncestorGroups: true) {
+      nodes {
+        ...Label
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
new file mode 100644
index 00000000000000..2904857270ed63
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query issueLabels($fullPath: ID!, $iid: String) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    issuable: issue(iid: $iid) {
+      id
+      labels {
+        nodes {
+          ...Label
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
new file mode 100644
index 00000000000000..e0cdfd91658a96
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
@@ -0,0 +1,15 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query mergeRequestLabels($fullPath: ID!, $iid: String!) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    issuable: mergeRequest(iid: $iid) {
+      id
+      labels {
+        nodes {
+          ...Label
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
new file mode 100644
index 00000000000000..a7c24620aad710
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
@@ -0,0 +1,12 @@
+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
+query projectLabels($fullPath: ID!, $searchTerm: String) {
+  workspace: project(fullPath: $fullPath) {
+    id
+    labels(searchTerm: $searchTerm, includeAncestorGroups: true) {
+      nodes {
+        ...Label
+      }
+    }
+  }
+}
-- 
GitLab


From d9bb513938c5005195bf830618ca43846098428c Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Sat, 15 Jan 2022 00:29:32 +1000
Subject: [PATCH 23/24] I think I am done

---
 .../issues/show/components/fields/color.vue   |   7 +-
 .../color_select_widget/color_item.vue        |   8 +-
 .../color_select_widget/color_select_root.vue | 123 ++++++------------
 .../sidebar/color_select_widget/constants.js  |  34 ++---
 .../color_select_widget/dropdown_contents.vue |  34 ++---
 ...w.vue => dropdown_contents_color_view.vue} |  14 +-
 .../color_select_widget/dropdown_value.vue    |  20 +--
 .../graphql/create_label.mutation.graphql     |  12 --
 .../graphql/group_labels.query.graphql        |  12 --
 .../graphql/issue_labels.query.graphql        |  15 ---
 .../merge_request_labels.query.graphql        |  15 ---
 .../graphql/project_labels.query.graphql      |  12 --
 .../javascripts/epic/components/epic_form.vue |   3 -
 13 files changed, 94 insertions(+), 215 deletions(-)
 rename app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/{dropdown_contents_labels_view.vue => dropdown_contents_color_view.vue} (76%)
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql

diff --git a/app/assets/javascripts/issues/show/components/fields/color.vue b/app/assets/javascripts/issues/show/components/fields/color.vue
index 1abefcaf702e43..56185b13e067a4 100644
--- a/app/assets/javascripts/issues/show/components/fields/color.vue
+++ b/app/assets/javascripts/issues/show/components/fields/color.vue
@@ -1,8 +1,5 @@
 <script>
-import {
-  GlFormInput,
-} from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlFormInput } from '@gitlab/ui';
 import updateMixin from '../../mixins/update';
 
 export default {
@@ -28,7 +25,7 @@ export default {
       /* eslint-disable vue/no-mutating-props */
       this.formState.color = this.color;
       /* eslint-enable vue/no-mutating-props */
-    }
+    },
   },
   methods: {
     backgroundColor() {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
index de9d8d13d6ce14..68debf28346b6f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
@@ -10,11 +10,11 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="issuable-color">
     <span
-      class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
-      :style="{ 'background-color': color.color }"
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-3 issuable-color-color"
+      :style="{ '--issuable-color': color.color }"
     ></span>
-    <span>{{ color.title }}</span>
+    <span class="hide-collapsed issuable-color-title">{{ color.title }}</span>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
index a8b6881e1e56fe..180ace0c1e1b0e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
@@ -1,10 +1,9 @@
 <script>
-import { MutationOperationMode, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import createFlash from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { __ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { DropdownVariant } from './constants';
+import { DropdownVariant, issuableColors } from './constants';
 import DropdownContents from './dropdown_contents.vue';
 import DropdownValue from './dropdown_value.vue';
 import {
@@ -63,13 +62,12 @@ export default {
         color: '',
         title: '',
       },
-      labelsSelectInProgress: false,
+      colorUpdateInProgress: false,
       oldIid: null,
       sidebarExpandedOnClick: false,
     };
   },
-  computed: {
-  },
+  computed: {},
   apollo: {
     issuableColor: {
       query() {
@@ -85,10 +83,19 @@ export default {
         };
       },
       update(data) {
-        return data.workspace?.issuable?.color || '';
+        const issuableColor = data.workspace?.issuable?.color;
+
+        if (issuableColor) {
+          return issuableColors.find((color) => color.color === issuableColor) ?? '';
+        }
+
+        return {
+          color: '',
+          title: '',
+        };
       },
       error() {
-        createFlash({ message: __('Error fetching labels.') });
+        createFlash({ message: __('Error fetching epic color.') });
       },
     },
   },
@@ -98,11 +105,11 @@ export default {
     },
   },
   methods: {
-    handleDropdownClose(labels) {
+    handleDropdownClose(color) {
       if (this.iid !== '') {
-        this.updateSelectedLabels(this.getUpdateVariables(labels));
+        this.updateSelectedColor(this.getUpdateVariables(color));
       } else {
-        this.$emit('updateSelectedLabels', { labels });
+        this.$emit('updateSelectedColor', { color });
       }
 
       this.collapseEditableItem();
@@ -114,38 +121,21 @@ export default {
         this.$emit('toggleCollapse');
       }
     },
-    getUpdateVariables(labels) {
-      let labelIds = [];
-
-      labelIds = labels.map(({ id }) => id);
+    getUpdateVariables(color) {
       const currentIid = this.oldIid || this.iid;
 
-      const updateVariables = {
-        iid: currentIid,
-        projectPath: this.fullPath,
-        labelIds,
-      };
-
-      switch (this.issuableType) {
-        case IssuableType.Issue:
-          return updateVariables;
-        case IssuableType.MergeRequest:
-          return {
-            ...updateVariables,
-            operationMode: MutationOperationMode.Replace,
-          };
-        case IssuableType.Epic:
-          return {
-            iid: currentIid,
-            groupPath: this.fullPath,
-            color: this.issuableColor,
-          };
-        default:
-          return {};
+      if (this.issuableType === IssuableType.Epic) {
+        return {
+          iid: currentIid,
+          groupPath: this.fullPath,
+          color: color.color,
+        };
       }
+
+      return {};
     },
-    updateSelectedLabels(inputVariables) {
-      this.labelsSelectInProgress = true;
+    updateSelectedColor(inputVariables) {
+      this.colorUpdateInProgress = true;
 
       this.$apollo
         .mutate({
@@ -153,54 +143,26 @@ export default {
           variables: { input: inputVariables },
         })
         .then(({ data }) => {
-          if (data.updateIssuableLabels?.errors?.length) {
+          if (data.updateIssuableColor?.errors?.length) {
             throw new Error();
           }
 
-          this.$emit('updateSelectedLabels', {
-            id: data.updateIssuableLabels?.issuable?.id,
-            labels: data.updateIssuableLabels?.issuable?.labels?.nodes,
+          this.$emit('updateSelectedColor', {
+            id: data.updateIssuableColor?.issuable?.id,
+            color: data.updateIssuableColor?.issuable?.color,
           });
         })
         .catch((error) =>
           createFlash({
-            message: __('An error occurred while updating labels.'),
+            message: __('An error occurred while updating color.'),
             captureError: true,
             error,
           }),
         )
         .finally(() => {
-          this.labelsSelectInProgress = false;
+          this.colorUpdateInProgress = false;
         });
     },
-    getRemoveVariables(labelId) {
-      const removeVariables = {
-        iid: this.iid,
-        projectPath: this.fullPath,
-      };
-
-      switch (this.issuableType) {
-        case IssuableType.Issue:
-          return {
-            ...removeVariables,
-            removeLabelIds: [labelId],
-          };
-        case IssuableType.MergeRequest:
-          return {
-            ...removeVariables,
-            labelIds: [labelId],
-            operationMode: MutationOperationMode.Remove,
-          };
-        case IssuableType.Epic:
-          return {
-            iid: this.iid,
-            removeLabelIds: [getIdFromGraphQLId(labelId)],
-            groupPath: this.fullPath,
-          };
-        default:
-          return {};
-      }
-    },
     isDropdownVariantSidebar,
     isDropdownVariantStandalone,
     isDropdownVariantEmbedded,
@@ -225,27 +187,22 @@ export default {
         @open="oldIid = null"
       >
         <template #collapsed>
-          <dropdown-value
-            :selected-labels="issuableColor"
-          >
+          <dropdown-value :selected-color="issuableColor">
             <slot></slot>
           </dropdown-value>
         </template>
         <template #default="{ edit }">
-          <dropdown-value
-            :selected-labels="issuableColor"
-            class="gl-mb-2"
-          >
+          <dropdown-value :selected-color="issuableColor" class="gl-mb-2">
             <slot></slot>
           </dropdown-value>
           <dropdown-contents
             ref="dropdownContents"
             :dropdown-button-text="dropdownButtonText"
             :dropdown-title="dropdownTitle"
-            :selected-labels="issuableColor"
+            :selected-color="issuableColor"
             :variant="variant"
             :is-visible="edit"
-            @setLabels="handleDropdownClose"
+            @setColor="handleDropdownClose"
             @closeDropdown="collapseEditableItem"
           />
         </template>
@@ -256,9 +213,9 @@ export default {
       ref="dropdownContents"
       :dropdown-button-text="dropdownButtonText"
       :dropdown-title="dropdownTitle"
-      :selected-labels="issuableColor"
+      :selected-color="issuableColor"
       :variant="variant"
-      @setLabels="handleDropdownClose"
+      @setColor="handleDropdownClose"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
index d01c5cd9f5fb5a..3f0ac78d2d0715 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
@@ -6,21 +6,25 @@ export const DropdownVariant = {
   Embedded: 'embedded',
 };
 
-export const labelColors = [
+export const issuableColors = [
   {
-    title: __('Blue'),
-    color: '#0000ff',
-  }, {
-    title: __('Green'),
-    color: '#00ff00',
-  }, {
-    title: __('Orange'),
-    color: '#FFA500',
-  }, {
-    title: __('Red'),
-    color: '#ff0000',
-  }, {
-    title: __('Purple'),
-    color: '#800080',
+    title: __('Blue-gray'),
+    color: '#6699cc',
+  },
+  {
+    title: __('Green screen'),
+    color: '#00b140',
+  },
+  {
+    title: __('Carrot orange'),
+    color: '#ed9121',
+  },
+  {
+    title: __('Crimson'),
+    color: '#dc143c',
+  },
+  {
+    title: __('Dark violet'),
+    color: '#9400d3',
   },
 ];
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
index 65ae27d9158b3b..5d6b76d6fcff7d 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
@@ -1,13 +1,13 @@
 <script>
 import { GlDropdown } from '@gitlab/ui';
 import { __ } from '~/locale';
-import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
+import DropdownContentsColorView from './dropdown_contents_color_view.vue';
 import DropdownHeader from './dropdown_header.vue';
 import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils';
 
 export default {
   components: {
-    DropdownContentsLabelsView,
+    DropdownContentsColorView,
     DropdownHeader,
     GlDropdown,
   },
@@ -16,7 +16,7 @@ export default {
       type: String,
       required: true,
     },
-    selectedLabels: {
+    selectedColor: {
       type: Object,
       required: true,
     },
@@ -37,20 +37,24 @@ export default {
   data() {
     return {
       showDropdownContentsCreateView: false,
-      localSelectedLabels: this.selectedLabels,
+      localSelectedColor: this.selectedColor,
       isDirty: false,
     };
   },
   computed: {
     buttonText() {
-      return this.localSelectedLabels.title;
+      if (!this.localSelectedColor || this.localSelectedColor.title === '') {
+        return this.dropdownButtonText || __('Color');
+      }
+
+      return this.localSelectedColor.title;
     },
     isStandalone() {
       return isDropdownVariantStandalone(this.variant);
     },
   },
   watch: {
-    localSelectedLabels: {
+    localSelectedColor: {
       handler() {
         this.isDirty = true;
       },
@@ -60,29 +64,29 @@ export default {
       if (newVal) {
         this.$refs.dropdown.show();
         this.isDirty = false;
-        this.localSelectedLabels = this.selectedLabels;
+        this.localSelectedColor = this.selectedColor;
       } else {
         this.$refs.dropdown.hide();
-        this.setLabels();
+        this.setColor();
       }
     },
-    selectedLabels(newVal) {
+    selectedColor(newVal) {
       if (!this.isDirty) {
-        this.localSelectedLabels = newVal;
+        this.localSelectedColor = newVal;
       }
     },
   },
   methods: {
-    setLabels() {
+    setColor() {
       if (!this.isDirty) {
         return;
       }
-      this.$emit('setLabels', this.localSelectedLabels);
+      this.$emit('setColor', this.localSelectedColor);
     },
     handleDropdownHide() {
       this.$emit('closeDropdown');
       if (!isDropdownVariantSidebar(this.variant)) {
-        this.setLabels();
+        this.setColor();
       }
     },
     showDropdown() {
@@ -110,9 +114,7 @@ export default {
       />
     </template>
     <template #default>
-      <dropdown-contents-labels-view
-        v-model="localSelectedLabels"
-      />
+      <dropdown-contents-color-view v-model="localSelectedColor" />
     </template>
   </gl-dropdown>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue
similarity index 76%
rename from app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
rename to app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue
index 2cd6e8aec9d5b3..4c4eff41e77fcb 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdownForm, GlDropdownItem } from '@gitlab/ui';
 import ColorItem from './color_item.vue';
-import { labelColors } from './constants';
+import { issuableColors } from './constants';
 
 export default {
   components: {
@@ -10,29 +10,29 @@ export default {
     ColorItem,
   },
   model: {
-    prop: 'localSelectedColors',
+    prop: 'localSelectedColor',
   },
   props: {
-    localSelectedColors: {
+    localSelectedColor: {
       type: Object,
       required: true,
     },
   },
   data() {
     return {
-      colors: labelColors,
+      colors: issuableColors,
     };
   },
   methods: {
     isColorSelected(color) {
-      return this.localSelectedColors === color.color;
+      return this.localSelectedColor.color === color.color;
     },
     updateSelectedColor(color) {
       this.$emit('input', color);
     },
     handleColorClick(color) {
       this.updateSelectedColor(color);
-      this.$emit('closeDropdown', this.localSelectedColors);
+      this.$emit('closeDropdown', this.localSelectedColor);
     },
   },
 };
@@ -40,7 +40,7 @@ export default {
 
 <template>
   <gl-dropdown-form class="labels-select-contents-list js-labels-list">
-    <div ref="labelsListContainer" data-testid="dropdown-content">
+    <div>
       <gl-dropdown-item
         v-for="color in colors"
         :key="color.color"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
index e18f1719503936..f4bb36fd1a9069 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
 import ColorItem from './color_item.vue';
 
 export default {
@@ -11,9 +10,8 @@ export default {
     GlIcon,
     ColorItem,
   },
-  inject: ['allowScopedLabels'],
   props: {
-    selectedLabels: {
+    selectedColor: {
       type: Object,
       required: true,
     },
@@ -22,21 +20,11 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="{
-      'has-labels': selectedLabels.length,
-    }"
-    class="value issuable-show-labels js-value"
-    data-testid="value-wrapper"
-  >
-    <div
-      v-gl-tooltip.left.viewport
-      :title="__('Color')"
-      class="sidebar-collapsed-icon"
-    >
+  <div class="value issuable-show-labels js-value" data-testid="value-wrapper">
+    <div v-gl-tooltip.left.viewport :title="__('Color')" class="sidebar-collapsed-icon">
       <gl-icon name="labels" />
     </div>
 
-    <color-item :color="{color:selectedLabels, title: selectedLabels}" />
+    <color-item :color="selectedColor" />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
deleted file mode 100644
index a9c791091fc335..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/create_label.mutation.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-mutation createLabel($title: String!, $color: String, $projectPath: ID, $groupPath: ID) {
-  labelCreate(
-    input: { title: $title, color: $color, projectPath: $projectPath, groupPath: $groupPath }
-  ) {
-    label {
-      ...Label
-    }
-    errors
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
deleted file mode 100644
index ce1a69f84c0c5f..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/group_labels.query.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query groupLabels($fullPath: ID!, $searchTerm: String) {
-  workspace: group(fullPath: $fullPath) {
-    id
-    labels(searchTerm: $searchTerm, onlyGroupLabels: true, includeAncestorGroups: true) {
-      nodes {
-        ...Label
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
deleted file mode 100644
index 2904857270ed63..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/issue_labels.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query issueLabels($fullPath: ID!, $iid: String) {
-  workspace: project(fullPath: $fullPath) {
-    id
-    issuable: issue(iid: $iid) {
-      id
-      labels {
-        nodes {
-          ...Label
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
deleted file mode 100644
index e0cdfd91658a96..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/merge_request_labels.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query mergeRequestLabels($fullPath: ID!, $iid: String!) {
-  workspace: project(fullPath: $fullPath) {
-    id
-    issuable: mergeRequest(iid: $iid) {
-      id
-      labels {
-        nodes {
-          ...Label
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
deleted file mode 100644
index a7c24620aad710..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/project_labels.query.graphql
+++ /dev/null
@@ -1,12 +0,0 @@
-#import "~/graphql_shared/fragments/label.fragment.graphql"
-
-query projectLabels($fullPath: ID!, $searchTerm: String) {
-  workspace: project(fullPath: $fullPath) {
-    id
-    labels(searchTerm: $searchTerm, includeAncestorGroups: true) {
-      nodes {
-        ...Label
-      }
-    }
-  }
-}
diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index 4f4aff2e564443..a2151669dab606 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -145,9 +145,6 @@ export default {
     handleUpdateSelectedColor(color) {
       this.color = color;
     },
-    backgroundColor() {
-      return `background-color:${this.color}`;
-    },
   },
 };
 </script>
-- 
GitLab


From 6e29b7ea0b23361c16abc86dd2d4e790c30f15ff Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Tue, 24 May 2022 21:03:09 +1000
Subject: [PATCH 24/24] Remove old color_select_widget

Signed-off-by: Andrew Smith <espadav8@gmail.com>
---
 .../color_select_widget/color_item.vue        |  20 --
 .../color_select_widget/color_select_root.vue | 221 ------------------
 .../sidebar/color_select_widget/constants.js  |  30 ---
 .../color_select_widget/dropdown_contents.vue | 120 ----------
 .../dropdown_contents_color_view.vue          |  56 -----
 .../color_select_widget/dropdown_header.vue   |  41 ----
 .../color_select_widget/dropdown_value.vue    |  30 ---
 .../graphql/epic_color.query.graphql          |   9 -
 .../epic_update_color.mutation.graphql        |   9 -
 .../sidebar/color_select_widget/utils.js      |  22 --
 10 files changed, 558 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql
 delete mode 100644 app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
deleted file mode 100644
index 68debf28346b6f..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_item.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-export default {
-  props: {
-    color: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="issuable-color">
-    <span
-      class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-3 issuable-color-color"
-      :style="{ '--issuable-color': color.color }"
-    ></span>
-    <span class="hide-collapsed issuable-color-title">{{ color.title }}</span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
deleted file mode 100644
index 180ace0c1e1b0e..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/color_select_root.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<script>
-import createFlash from '~/flash';
-import { IssuableType } from '~/issues/constants';
-import { __ } from '~/locale';
-import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { DropdownVariant, issuableColors } from './constants';
-import DropdownContents from './dropdown_contents.vue';
-import DropdownValue from './dropdown_value.vue';
-import {
-  isDropdownVariantSidebar,
-  isDropdownVariantStandalone,
-  isDropdownVariantEmbedded,
-} from './utils';
-import epicColorQuery from './graphql/epic_color.query.graphql';
-import updateEpicColorMutation from './graphql/epic_update_color.mutation.graphql';
-
-export default {
-  components: {
-    DropdownValue,
-    DropdownContents,
-    SidebarEditableItem,
-  },
-  inject: {
-    allowLabelEdit: {
-      default: false,
-    },
-  },
-  props: {
-    iid: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: DropdownVariant.Sidebar,
-    },
-    dropdownButtonText: {
-      type: String,
-      required: false,
-      default: __('Color'),
-    },
-    dropdownTitle: {
-      type: String,
-      required: false,
-      default: __('Assign epic color'),
-    },
-    issuableType: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      contentIsOnViewport: true,
-      issuableColor: {
-        color: '',
-        title: '',
-      },
-      colorUpdateInProgress: false,
-      oldIid: null,
-      sidebarExpandedOnClick: false,
-    };
-  },
-  computed: {},
-  apollo: {
-    issuableColor: {
-      query() {
-        return epicColorQuery;
-      },
-      skip() {
-        return !isDropdownVariantSidebar(this.variant);
-      },
-      variables() {
-        return {
-          iid: this.iid,
-          fullPath: this.fullPath,
-        };
-      },
-      update(data) {
-        const issuableColor = data.workspace?.issuable?.color;
-
-        if (issuableColor) {
-          return issuableColors.find((color) => color.color === issuableColor) ?? '';
-        }
-
-        return {
-          color: '',
-          title: '',
-        };
-      },
-      error() {
-        createFlash({ message: __('Error fetching epic color.') });
-      },
-    },
-  },
-  watch: {
-    iid(_, oldVal) {
-      this.oldIid = oldVal;
-    },
-  },
-  methods: {
-    handleDropdownClose(color) {
-      if (this.iid !== '') {
-        this.updateSelectedColor(this.getUpdateVariables(color));
-      } else {
-        this.$emit('updateSelectedColor', { color });
-      }
-
-      this.collapseEditableItem();
-    },
-    collapseEditableItem() {
-      this.$refs.editable?.collapse();
-      if (this.sidebarExpandedOnClick) {
-        this.sidebarExpandedOnClick = false;
-        this.$emit('toggleCollapse');
-      }
-    },
-    getUpdateVariables(color) {
-      const currentIid = this.oldIid || this.iid;
-
-      if (this.issuableType === IssuableType.Epic) {
-        return {
-          iid: currentIid,
-          groupPath: this.fullPath,
-          color: color.color,
-        };
-      }
-
-      return {};
-    },
-    updateSelectedColor(inputVariables) {
-      this.colorUpdateInProgress = true;
-
-      this.$apollo
-        .mutate({
-          mutation: updateEpicColorMutation,
-          variables: { input: inputVariables },
-        })
-        .then(({ data }) => {
-          if (data.updateIssuableColor?.errors?.length) {
-            throw new Error();
-          }
-
-          this.$emit('updateSelectedColor', {
-            id: data.updateIssuableColor?.issuable?.id,
-            color: data.updateIssuableColor?.issuable?.color,
-          });
-        })
-        .catch((error) =>
-          createFlash({
-            message: __('An error occurred while updating color.'),
-            captureError: true,
-            error,
-          }),
-        )
-        .finally(() => {
-          this.colorUpdateInProgress = false;
-        });
-    },
-    isDropdownVariantSidebar,
-    isDropdownVariantStandalone,
-    isDropdownVariantEmbedded,
-  },
-};
-</script>
-
-<template>
-  <div
-    class="labels-select-wrapper gl-relative"
-    :class="{
-      'is-standalone': isDropdownVariantStandalone(variant),
-      'is-embedded': isDropdownVariantEmbedded(variant),
-    }"
-    data-qa-selector="labels_block"
-  >
-    <template v-if="isDropdownVariantSidebar(variant)">
-      <sidebar-editable-item
-        ref="editable"
-        :title="__('Color')"
-        :can-edit="allowLabelEdit"
-        @open="oldIid = null"
-      >
-        <template #collapsed>
-          <dropdown-value :selected-color="issuableColor">
-            <slot></slot>
-          </dropdown-value>
-        </template>
-        <template #default="{ edit }">
-          <dropdown-value :selected-color="issuableColor" class="gl-mb-2">
-            <slot></slot>
-          </dropdown-value>
-          <dropdown-contents
-            ref="dropdownContents"
-            :dropdown-button-text="dropdownButtonText"
-            :dropdown-title="dropdownTitle"
-            :selected-color="issuableColor"
-            :variant="variant"
-            :is-visible="edit"
-            @setColor="handleDropdownClose"
-            @closeDropdown="collapseEditableItem"
-          />
-        </template>
-      </sidebar-editable-item>
-    </template>
-    <dropdown-contents
-      v-else
-      ref="dropdownContents"
-      :dropdown-button-text="dropdownButtonText"
-      :dropdown-title="dropdownTitle"
-      :selected-color="issuableColor"
-      :variant="variant"
-      @setColor="handleDropdownClose"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
deleted file mode 100644
index 3f0ac78d2d0715..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/constants.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { __ } from '~/locale';
-
-export const DropdownVariant = {
-  Sidebar: 'sidebar',
-  Standalone: 'standalone',
-  Embedded: 'embedded',
-};
-
-export const issuableColors = [
-  {
-    title: __('Blue-gray'),
-    color: '#6699cc',
-  },
-  {
-    title: __('Green screen'),
-    color: '#00b140',
-  },
-  {
-    title: __('Carrot orange'),
-    color: '#ed9121',
-  },
-  {
-    title: __('Crimson'),
-    color: '#dc143c',
-  },
-  {
-    title: __('Dark violet'),
-    color: '#9400d3',
-  },
-];
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
deleted file mode 100644
index 5d6b76d6fcff7d..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script>
-import { GlDropdown } from '@gitlab/ui';
-import { __ } from '~/locale';
-import DropdownContentsColorView from './dropdown_contents_color_view.vue';
-import DropdownHeader from './dropdown_header.vue';
-import { isDropdownVariantStandalone, isDropdownVariantSidebar } from './utils';
-
-export default {
-  components: {
-    DropdownContentsColorView,
-    DropdownHeader,
-    GlDropdown,
-  },
-  props: {
-    dropdownTitle: {
-      type: String,
-      required: true,
-    },
-    selectedColor: {
-      type: Object,
-      required: true,
-    },
-    dropdownButtonText: {
-      type: String,
-      required: true,
-    },
-    variant: {
-      type: String,
-      required: true,
-    },
-    isVisible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showDropdownContentsCreateView: false,
-      localSelectedColor: this.selectedColor,
-      isDirty: false,
-    };
-  },
-  computed: {
-    buttonText() {
-      if (!this.localSelectedColor || this.localSelectedColor.title === '') {
-        return this.dropdownButtonText || __('Color');
-      }
-
-      return this.localSelectedColor.title;
-    },
-    isStandalone() {
-      return isDropdownVariantStandalone(this.variant);
-    },
-  },
-  watch: {
-    localSelectedColor: {
-      handler() {
-        this.isDirty = true;
-      },
-      deep: true,
-    },
-    isVisible(newVal) {
-      if (newVal) {
-        this.$refs.dropdown.show();
-        this.isDirty = false;
-        this.localSelectedColor = this.selectedColor;
-      } else {
-        this.$refs.dropdown.hide();
-        this.setColor();
-      }
-    },
-    selectedColor(newVal) {
-      if (!this.isDirty) {
-        this.localSelectedColor = newVal;
-      }
-    },
-  },
-  methods: {
-    setColor() {
-      if (!this.isDirty) {
-        return;
-      }
-      this.$emit('setColor', this.localSelectedColor);
-    },
-    handleDropdownHide() {
-      this.$emit('closeDropdown');
-      if (!isDropdownVariantSidebar(this.variant)) {
-        this.setColor();
-      }
-    },
-    showDropdown() {
-      this.$refs.dropdown.show();
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown
-    ref="dropdown"
-    :text="buttonText"
-    class="gl-w-full gl-mt-2"
-    data-testid="labels-select-dropdown-contents"
-    data-qa-selector="labels_dropdown_content"
-    @hide="handleDropdownHide"
-  >
-    <template #header>
-      <dropdown-header
-        ref="header"
-        :dropdown-title="dropdownTitle"
-        :is-standalone="isStandalone"
-        @closeDropdown="$emit('closeDropdown')"
-      />
-    </template>
-    <template #default>
-      <dropdown-contents-color-view v-model="localSelectedColor" />
-    </template>
-  </gl-dropdown>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue
deleted file mode 100644
index 4c4eff41e77fcb..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_contents_color_view.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-import { GlDropdownForm, GlDropdownItem } from '@gitlab/ui';
-import ColorItem from './color_item.vue';
-import { issuableColors } from './constants';
-
-export default {
-  components: {
-    GlDropdownForm,
-    GlDropdownItem,
-    ColorItem,
-  },
-  model: {
-    prop: 'localSelectedColor',
-  },
-  props: {
-    localSelectedColor: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      colors: issuableColors,
-    };
-  },
-  methods: {
-    isColorSelected(color) {
-      return this.localSelectedColor.color === color.color;
-    },
-    updateSelectedColor(color) {
-      this.$emit('input', color);
-    },
-    handleColorClick(color) {
-      this.updateSelectedColor(color);
-      this.$emit('closeDropdown', this.localSelectedColor);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown-form class="labels-select-contents-list js-labels-list">
-    <div>
-      <gl-dropdown-item
-        v-for="color in colors"
-        :key="color.color"
-        :is-checked="isColorSelected(color)"
-        :is-check-centered="true"
-        :is-check-item="true"
-        @click.native.capture.stop="handleColorClick(color)"
-      >
-        <color-item :color="color" />
-      </gl-dropdown-item>
-    </div>
-  </gl-dropdown-form>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
deleted file mode 100644
index d8abecc4418417..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_header.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import { GlButton } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlButton,
-  },
-  props: {
-    dropdownTitle: {
-      type: String,
-      required: true,
-    },
-    isStandalone: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-};
-</script>
-
-<template>
-  <div data-testid="dropdown-header">
-    <div
-      v-if="!isStandalone"
-      class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
-      data-testid="dropdown-header-title"
-    >
-      <span class="gl-flex-grow-1">{{ dropdownTitle }}</span>
-      <gl-button
-        :aria-label="__('Close')"
-        variant="link"
-        size="small"
-        class="dropdown-header-button gl-p-0!"
-        icon="close"
-        data-testid="close-button"
-        @click="$emit('closeDropdown')"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
deleted file mode 100644
index f4bb36fd1a9069..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/dropdown_value.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import ColorItem from './color_item.vue';
-
-export default {
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  components: {
-    GlIcon,
-    ColorItem,
-  },
-  props: {
-    selectedColor: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="value issuable-show-labels js-value" data-testid="value-wrapper">
-    <div v-gl-tooltip.left.viewport :title="__('Color')" class="sidebar-collapsed-icon">
-      <gl-icon name="labels" />
-    </div>
-
-    <color-item :color="selectedColor" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql
deleted file mode 100644
index 959e0f8c1a501e..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_color.query.graphql
+++ /dev/null
@@ -1,9 +0,0 @@
-query epicColor($fullPath: ID!, $iid: ID) {
-  workspace: group(fullPath: $fullPath) {
-    id
-    issuable: epic(iid: $iid) {
-      id
-      color
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql
deleted file mode 100644
index 2975b42253f022..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/graphql/epic_update_color.mutation.graphql
+++ /dev/null
@@ -1,9 +0,0 @@
-mutation updateEpicColor($input: UpdateEpicInput!) {
-  updateIssuableColor: updateEpic(input: $input) {
-    issuable: epic {
-      id
-      color
-    }
-    errors
-  }
-}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js b/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js
deleted file mode 100644
index b5cd946a189797..00000000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/color_select_widget/utils.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DropdownVariant } from './constants';
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `sidebar`
- * @param {string} variant
- */
-export const isDropdownVariantSidebar = (variant) => variant === DropdownVariant.Sidebar;
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `standalone`
- * @param {string} variant
- */
-export const isDropdownVariantStandalone = (variant) => variant === DropdownVariant.Standalone;
-
-/**
- * Returns boolean representing whether dropdown variant
- * is `embedded`
- * @param {string} variant
- */
-export const isDropdownVariantEmbedded = (variant) => variant === DropdownVariant.Embedded;
-- 
GitLab