1 files changed, 70 insertions, 21 deletions

diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index 0803925104d..0921b5a5424 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -1,17 +1,46 @@
 <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"
+      :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" data-qa-selector="dropdown_filter_input" />
+      </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>