Replace bootstrap dropdown to gitlab-ui dropdown

Replace bootstrap dropdown to gitlab-ui dropdown

Using GlDropDown and GlDropDownItem instead of vue_shared

Dropdown implementation

Replace bootstrap dropdown to gitlab-ui dropdown

Using GlDropDown and GlDropDownItem instead of vue_shared

Dropdown implementation

This MR deletes legacy dropdown which is used

only in bar component and adjust tests for

new GlDropDown

app/assets/javascripts/ide/components/file_templates/bar.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import Dropdown from './dropdown.vue';
+import { __ } from '~/locale';
+
+const barLabel = __('File templates');
+const templateListDropdownLabel = __('Choose a template...');
+const templateTypesDropdownLabel = __('Choose a type...');
+const undoButtonText = __('Undo');
 
 export default {
+  i18n: {
+    barLabel,
+    templateListDropdownLabel,
+    templateTypesDropdownLabel,
+    undoButtonText,
+  },
   components: {
-    Dropdown,
     GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlLoadingIcon,
+    GlSearchBoxByType,
+  },
+  data() {
+    return {
+      search: '',
+    };
   },
   computed: {
     ...mapGetters(['activeFile']),
     ...mapGetters('fileTemplates', ['templateTypes']),
-    ...mapState('fileTemplates', ['selectedTemplateType', 'updateSuccess']),
+    ...mapState('fileTemplates', [
+      'selectedTemplateType',
+      'updateSuccess',
+      'templates',
+      'isLoading',
+    ]),
+    filteredTemplateTypes() {
+      return this.templates.filter((t) => {
+        return t.name.toLowerCase().includes(this.search.toLowerCase());
+      });
+    },
     showTemplatesDropdown() {
       return Object.keys(this.selectedTemplateType).length > 0;
     },
@@ -26,6 +55,7 @@ export default {
     ...mapActions('fileTemplates', [
       'setSelectedTemplateType',
       'fetchTemplate',
+      'fetchTemplateTypes',
       'undoFileTemplate',
     ]),
     setInitialType() {
@@ -50,27 +80,46 @@ export default {
 
 <template>
   <div
-    class="d-flex align-items-center ide-file-templates qa-file-templates-bar gl-relative gl-z-index-1"
+    class="gl-display-flex gl-align-items-center ide-file-templates qa-file-templates-bar gl-relative gl-z-index-1"
   >
-    <strong class="gl-mr-3"> {{ __('File templates') }} </strong>
-    <dropdown
-      :data="templateTypes"
-      :label="selectedTemplateType.name || __('Choose a type...')"
-      class="mr-2"
-      @click="selectTemplateType"
-    />
-    <dropdown
+    <strong class="gl-mr-3"> {{ $options.i18n.barLabel }} </strong>
+    <gl-dropdown
+      class="gl-mr-6 qa-file-templates-bar"
+      :text="selectedTemplateType.name || $options.i18n.templateTypesDropdownLabel"
+    >
+      <gl-dropdown-item
+        v-for="template in templateTypes"
+        :key="template.key"
+        @click.prevent="selectTemplateType(template)"
+      >
+        {{ template.name }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+    <gl-dropdown
       v-if="showTemplatesDropdown"
-      :label="__('Choose a template...')"
-      :is-async-data="true"
-      :searchable="true"
-      :title="__('File templates')"
-      class="mr-2 qa-file-template-dropdown"
-      @click="selectTemplate"
-    />
+      class="gl-mr-6 qa-file-template-dropdown"
+      :text="$options.i18n.templateListDropdownLabel"
+      @show="fetchTemplateTypes"
+    >
+      <template #header>
+        <gl-search-box-by-type v-model.trim="search" />
+      </template>
+      <div>
+        <gl-loading-icon v-if="isLoading" />
+        <template v-else>
+          <gl-dropdown-item
+            v-for="template in filteredTemplateTypes"
+            :key="template.key"
+            @click="selectTemplate(template)"
+          >
+            {{ template.name }}
+          </gl-dropdown-item>
+        </template>
+      </div>
+    </gl-dropdown>
     <transition name="fade">
       <gl-button v-show="updateSuccess" category="secondary" variant="default" @click="undo">
-        {{ __('Undo') }}
+        {{ $options.i18n.undoButtonText }}
       </gl-button>
     </transition>
   </div>

spec/frontend/ide/components/file_templates/bar_spec.js

@@ -36,7 +36,7 @@ describe('IDE file templates bar component', () => {
     it('calls setSelectedTemplateType when clicking item', () => {
       jest.spyOn(vm, 'setSelectedTemplateType').mockImplementation();
 
-      vm.$el.querySelector('.dropdown-content button').click();
+      vm.$el.querySelector('.dropdown-menu button').click();
 
       expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
         name: '.gitlab-ci.yml',
@@ -64,10 +64,10 @@ describe('IDE file templates bar component', () => {
       expect(vm.$el.querySelectorAll('.dropdown')[1].textContent).toContain('Choose a template');
     });
 
-    it('calls fetchTemplate on click', () => {
+    it('calls fetchTemplate on dropdown open', () => {
       jest.spyOn(vm, 'fetchTemplate').mockImplementation();
 
-      vm.$el.querySelectorAll('.dropdown-content')[1].querySelector('button').click();
+      vm.$el.querySelectorAll('.dropdown-menu')[1].querySelector('button').click();
 
       expect(vm.fetchTemplate).toHaveBeenCalledWith({
         name: 'test',
@@ -85,7 +85,7 @@ describe('IDE file templates bar component', () => {
   it('calls undoFileTemplate when clicking undo button', () => {
     jest.spyOn(vm, 'undoFileTemplate').mockImplementation();
 
-    vm.$el.querySelector('.btn-default').click();
+    vm.$el.querySelector('.btn-default-secondary').click();
 
     expect(vm.undoFileTemplate).toHaveBeenCalled();
   });