Add Labels widget support for epic

Review feedback

app/assets/javascripts/right_sidebar.js

@@ -3,6 +3,7 @@
 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import { hide, fixTitle } from '~/tooltips';
+import { DEBOUNCE_DROPDOWN_DELAY } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { sprintf, s__, __ } from './locale';
@@ -130,12 +131,10 @@ Sidebar.prototype.openDropdown = function (blockOrName) {
   // Wait for the sidebar to trigger('click') open
   // so it doesn't cause our dropdown to close preemptively
   setTimeout(() => {
-    if (gon.features?.labelsWidget) {
-      $block.find('.shortcut-sidebar-dropdown-toggle').trigger('click');
-    } else {
+    if (!gon.features?.labelsWidget && !$block.hasClass('labels-select-wrapper')) {
       $block.find('.js-sidebar-dropdown-toggle').trigger('click');
     }
-  }, 200);
+  }, DEBOUNCE_DROPDOWN_DELAY);
 };
 
 Sidebar.prototype.setCollapseAfterUpdate = function ($block) {

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/constants.js

 export const SCOPED_LABEL_DELIMITER = '::';
+export const DEBOUNCE_DROPDOWN_DELAY = 200;
 
 export const DropdownVariant = {
   Sidebar: 'sidebar',

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql

+#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 {
-      id
-      color
-      description
-      title
+      ...Label
     }
     errors
   }

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql

+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
 query epicLabels($fullPath: ID!, $iid: ID) {
   workspace: group(fullPath: $fullPath) {
     issuable: epic(iid: $iid) {
       id
       labels {
         nodes {
-          id
-          title
-          color
-          description
+          ...Label
         }
       }
     }

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/epic_update_labels.mutation.graphql

+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
 mutation updateEpic($input: UpdateEpicInput!) {
   updateEpic(input: $input) {
     epic {
       id
       labels {
         nodes {
-          id
-          title
-          color
-          description
+          ...Label
         }
       }
     }

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql

+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
 query groupLabels($fullPath: ID!, $searchTerm: String) {
   workspace: group(fullPath: $fullPath) {
     labels(searchTerm: $searchTerm, onlyGroupLabels: true) {
       nodes {
-        id
-        title
-        color
-        description
+        ...Label
       }
     }
   }

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql

+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
 query issueLabels($fullPath: ID!, $iid: String) {
   workspace: project(fullPath: $fullPath) {
     issuable: issue(iid: $iid) {
       id
       labels {
         nodes {
-          id
-          title
-          color
-          description
+          ...Label
         }
       }
     }

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql

+#import "~/graphql_shared/fragments/label.fragment.graphql"
+
 query projectLabels($fullPath: ID!, $searchTerm: String) {
   workspace: project(fullPath: $fullPath) {
     labels(searchTerm: $searchTerm, includeAncestorGroups: true) {
       nodes {
-        id
-        title
-        color
-        description
+        ...Label
       }
     }
   }

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

@@ -6,7 +6,7 @@ import { IssuableType } from '~/issue_show/constants';
 import { __ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import { issuableLabelsQueries } from '~/sidebar/constants';
-import { DropdownVariant } from './constants';
+import { DEBOUNCE_DROPDOWN_DELAY, DropdownVariant } from './constants';
 import DropdownContents from './dropdown_contents.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
@@ -181,7 +181,7 @@ export default {
       debounce(() => {
         this.$refs.editable.toggle();
         this.$refs.dropdownContents.showDropdown();
-      }, 200)();
+      }, DEBOUNCE_DROPDOWN_DELAY)();
     },
     getUpdateVariables(labels) {
       let labelIds = [];

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

@@ -80,6 +80,7 @@ export const createLabelSuccessfulResponse = {
         color: '#dc143c',
         description: null,
         title: 'ewrwrwer',
+        textColor: '#000000',
         __typename: 'Label',
       },
       errors: [],
@@ -98,12 +99,14 @@ export const workspaceLabelsQueryResponse = {
             description: null,
             id: 'gid://gitlab/ProjectLabel/1',
             title: 'Label1',
+            textColor: '#000000',
           },
           {
             color: '#2f7b2e',
             description: null,
             id: 'gid://gitlab/ProjectLabel/2',
             title: 'Label2',
+            textColor: '#000000',
           },
         ],
       },
@@ -123,6 +126,7 @@ export const issuableLabelsQueryResponse = {
               description: null,
               id: 'gid://gitlab/ProjectLabel/1',
               title: 'Label1',
+              textColor: '#000000',
             },
           ],
         },