1 files changed, 30 insertions, 36 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
index a8e48bfe1a1..1ef2e8b3bed 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
@@ -1,16 +1,18 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon, GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlSearchBoxByType, GlLink } from '@gitlab/ui';
 
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 
+import LabelItem from './label_item.vue';
+
 export default {
   components: {
     GlLoadingIcon,
-    GlDeprecatedButton,
-    GlIcon,
+    GlButton,
     GlSearchBoxByType,
     GlLink,
+    LabelItem,
   },
   data() {
     return {
@@ -20,6 +22,8 @@ export default {
   },
   computed: {
     ...mapState([
+      'allowLabelCreate',
+      'allowMultiselect',
       'labelsManagePath',
       'labels',
       'labelsFetchInProgress',
@@ -27,7 +31,7 @@ export default {
       'footerCreateLabelTitle',
       'footerManageLabelTitle',
     ]),
-    ...mapGetters(['selectedLabelsList']),
+    ...mapGetters(['selectedLabelsList', 'isDropdownVariantSidebar']),
     visibleLabels() {
       if (this.searchKey) {
         return this.labels.filter(label =>
@@ -56,12 +60,8 @@ export default {
       'toggleDropdownContentsCreateView',
       'fetchLabels',
       'updateSelectedLabels',
+      'toggleDropdownContents',
     ]),
-    getDropdownLabelBoxStyle(label) {
-      return {
-        backgroundColor: label.color,
-      };
-    },
     isLabelSelected(label) {
       return this.selectedLabelsList.includes(label.id);
     },
@@ -111,6 +111,7 @@ export default {
     },
     handleLabelClick(label) {
       this.updateSelectedLabels([label]);
+      if (!this.allowMultiselect) this.toggleDropdownContents();
     },
   },
 };
@@ -123,54 +124,47 @@ export default {
       class="labels-fetch-loading position-absolute d-flex align-items-center w-100 h-100"
       size="md"
     />
-    <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
+    <div v-if="isDropdownVariantSidebar" class="dropdown-title d-flex align-items-center pt-0 pb-2">
       <span class="flex-grow-1">{{ labelsListTitle }}</span>
-      <gl-deprecated-button
+      <gl-button
         :aria-label="__('Close')"
         variant="link"
-        size="sm"
+        size="small"
         class="dropdown-header-button p-0"
+        icon="close"
         @click="toggleDropdownContents"
-      >
-        <gl-icon name="close" />
-      </gl-deprecated-button>
+      />
     </div>
-    <div class="dropdown-input">
+    <div class="dropdown-input" @click.stop="() => {}">
       <gl-search-box-by-type v-model="searchKey" :autofocus="true" />
     </div>
-    <div v-if="!labelsFetchInProgress" ref="labelsListContainer" class="dropdown-content">
+    <div v-show="!labelsFetchInProgress" ref="labelsListContainer" class="dropdown-content">
       <ul class="list-unstyled mb-0">
         <li v-for="(label, index) in visibleLabels" :key="label.id" class="d-block text-left">
-          <gl-link
-            class="d-flex align-items-baseline text-break-word label-item"
-            :class="{ 'is-focused': index === currentHighlightItem }"
-            @click="handleLabelClick(label)"
-          >
-            <gl-icon v-show="label.set" name="mobile-issue-close" class="mr-2 align-self-center" />
-            <span v-show="!label.set" class="mr-3 pr-2"></span>
-            <span class="dropdown-label-box" :style="getDropdownLabelBoxStyle(label)"></span>
-            <span>{{ label.title }}</span>
-          </gl-link>
+          <label-item
+            :label="label"
+            :highlight="index === currentHighlightItem"
+            @clickLabel="handleLabelClick(label)"
+          />
         </li>
-        <li v-if="!visibleLabels.length" class="p-2 text-center">
+        <li v-show="!visibleLabels.length" class="p-2 text-center">
           {{ __('No matching results') }}
         </li>
       </ul>
     </div>
-    <div class="dropdown-footer">
+    <div v-if="isDropdownVariantSidebar" class="dropdown-footer">
       <ul class="list-unstyled">
-        <li>
-          <gl-deprecated-button
-            variant="link"
+        <li v-if="allowLabelCreate">
+          <gl-link
             class="d-flex w-100 flex-row text-break-word label-item"
             @click="toggleDropdownContentsCreateView"
-            >{{ footerCreateLabelTitle }}</gl-deprecated-button
+            >{{ footerCreateLabelTitle }}</gl-link
           >
         </li>
         <li>
-          <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item">
-            {{ footerManageLabelTitle }}
-          </gl-link>
+          <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item">{{
+            footerManageLabelTitle
+          }}</gl-link>
         </li>
       </ul>
     </div>