1 files changed, 30 insertions, 115 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
index ffa37424c2c..857367a0721 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
@@ -1,24 +1,23 @@
 <script>
-import { GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import { __ } from '~/locale';
-import { DropdownVariant } from './constants';
 import projectLabelsQuery from './graphql/project_labels.query.graphql';
 import LabelItem from './label_item.vue';
 
 export default {
   components: {
+    GlDropdownForm,
+    GlDropdownItem,
     GlLoadingIcon,
     GlSearchBoxByType,
-    GlLink,
     LabelItem,
   },
-  inject: ['projectPath', 'allowLabelCreate', 'labelsManagePath', 'variant'],
+  inject: ['projectPath'],
   props: {
     selectedLabels: {
       type: Array,
@@ -28,24 +27,11 @@ export default {
       type: Boolean,
       required: true,
     },
-    labelsListTitle: {
-      type: String,
-      required: true,
-    },
-    footerCreateLabelTitle: {
-      type: String,
-      required: true,
-    },
-    footerManageLabelTitle: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
       searchKey: '',
       labels: [],
-      currentHighlightItem: -1,
       localSelectedLabels: [...this.selectedLabels],
     };
   },
@@ -74,12 +60,6 @@ export default {
     },
   },
   computed: {
-    isDropdownVariantSidebar() {
-      return this.variant === DropdownVariant.Sidebar;
-    },
-    isDropdownVariantEmbedded() {
-      return this.variant === DropdownVariant.Embedded;
-    },
     labelsFetchInProgress() {
       return this.$apollo.queries.labels.loading;
     },
@@ -98,21 +78,11 @@ export default {
       return Boolean(this.searchKey) && this.visibleLabels.length === 0;
     },
   },
-  watch: {
-    searchKey(value) {
-      // When there is search string present
-      // and there are matching results,
-      // highlight first item by default.
-      if (value && this.visibleLabels.length) {
-        this.currentHighlightItem = 0;
-      }
-    },
-  },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
   },
   beforeDestroy() {
-    this.$emit('closeDropdown', this.localSelectedLabels);
+    this.$emit('setLabels', this.localSelectedLabels);
     this.debouncedSearchKeyUpdate.cancel();
   },
   methods: {
@@ -150,33 +120,6 @@ export default {
         });
       }
     },
-    /**
-     * This method enables keyboard navigation support for
-     * the dropdown.
-     */
-    handleKeyDown(e) {
-      if (e.keyCode === UP_KEY_CODE && this.currentHighlightItem > 0) {
-        this.currentHighlightItem -= 1;
-      } else if (
-        e.keyCode === DOWN_KEY_CODE &&
-        this.currentHighlightItem < this.visibleLabels.length - 1
-      ) {
-        this.currentHighlightItem += 1;
-      } else if (e.keyCode === ENTER_KEY_CODE && this.currentHighlightItem > -1) {
-        this.updateSelectedLabels(this.visibleLabels[this.currentHighlightItem]);
-        this.searchKey = '';
-      } else if (e.keyCode === ESC_KEY_CODE) {
-        this.$emit('closeDropdown', this.localSelectedLabels);
-      }
-
-      if (e.keyCode !== ESC_KEY_CODE) {
-        // Scroll the list only after highlighting
-        // styles are rendered completely.
-        this.$nextTick(() => {
-          this.scrollIntoViewIfNeeded();
-        });
-      }
-    },
     handleLabelClick(label) {
       this.updateSelectedLabels(label);
       if (!this.allowMultiselect) {
@@ -191,69 +134,41 @@ export default {
 </script>
 
 <template>
-  <div
-    class="labels-select-contents-list js-labels-list"
-    data-testid="dropdown-wrapper"
-    @keydown="handleKeyDown"
-  >
-    <div class="dropdown-input" @click.stop="() => {}">
-      <gl-search-box-by-type
-        ref="searchInput"
-        :value="searchKey"
-        :disabled="labelsFetchInProgress"
-        data-qa-selector="dropdown_input_field"
-        data-testid="dropdown-input-field"
-        @input="debouncedSearchKeyUpdate"
-      />
-    </div>
-    <div ref="labelsListContainer" class="dropdown-content" data-testid="dropdown-content">
+  <gl-dropdown-form class="labels-select-contents-list js-labels-list">
+    <gl-search-box-by-type
+      ref="searchInput"
+      :value="searchKey"
+      :disabled="labelsFetchInProgress"
+      data-qa-selector="dropdown_input_field"
+      data-testid="dropdown-input-field"
+      @input="debouncedSearchKeyUpdate"
+    />
+    <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"
         size="md"
       />
-      <ul v-else class="list-unstyled gl-mb-0 gl-word-break-word" data-testid="labels-list">
-        <label-item
-          v-for="(label, index) in visibleLabels"
+      <template v-else>
+        <gl-dropdown-item
+          v-for="label in visibleLabels"
           :key="label.id"
-          :label="label"
-          :is-label-set="isLabelSelected(label)"
-          :highlight="index === currentHighlightItem"
-          @clickLabel="handleLabelClick(label)"
-        />
-        <li
+          :is-checked="isLabelSelected(label)"
+          :is-check-centered="true"
+          :is-check-item="true"
+          data-testid="labels-list"
+          @click.native.capture.stop="handleLabelClick(label)"
+        >
+          <label-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') }}
-        </li>
-      </ul>
-    </div>
-    <div
-      v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
-      class="dropdown-footer"
-      data-testid="dropdown-footer"
-    >
-      <ul class="list-unstyled">
-        <li v-if="allowLabelCreate">
-          <gl-link
-            class="gl-display-flex gl-flex-direction-row gl-w-full gl-overflow-break-word label-item"
-            data-testid="create-label-button"
-            @click="$emit('toggleDropdownContentsCreateView')"
-          >
-            {{ footerCreateLabelTitle }}
-          </gl-link>
-        </li>
-        <li>
-          <gl-link
-            :href="labelsManagePath"
-            class="gl-display-flex gl-flex-direction-row gl-w-full gl-overflow-break-word label-item"
-          >
-            {{ footerManageLabelTitle }}
-          </gl-link>
-        </li>
-      </ul>
+        </gl-dropdown-item>
+      </template>
     </div>
-  </div>
+  </gl-dropdown-form>
 </template>