fixed double scroll

improved variable & prop names

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

@@ -27,14 +27,14 @@ export default {
       'undoFileTemplate',
     ]),
     setInitialType() {
-      const type = this.templateTypes.find(t => t.name === this.activeFile.name);
+      const initialTemplateType = this.templateTypes.find(t => t.name === this.activeFile.name);
 
-      if (type) {
-        this.setSelectedTemplateType(type);
+      if (initialTemplateType) {
+        this.setSelectedTemplateType(initialTemplateType);
       }
     },
-    selectTemplateType(type) {
-      this.setSelectedTemplateType(type);
+    selectTemplateType(templateType) {
+      this.setSelectedTemplateType(templateType);
     },
     selectTemplate(template) {
       this.fetchTemplate(template);
@@ -60,7 +60,7 @@ export default {
     <dropdown
       v-if="showTemplatesDropdown"
       :label="__('Choose a template...')"
-      :async="true"
+      :is-async-data="true"
       :searchable="true"
       :title="__('File templates')"
       class="mr-2"

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

@@ -24,7 +24,7 @@ export default {
       required: false,
       default: null,
     },
-    async: {
+    isAsyncData: {
       type: Boolean,
       required: false,
       default: false,
@@ -43,14 +43,14 @@ export default {
   computed: {
     ...mapState('fileTemplates', ['templates', 'isLoading']),
     outputData() {
-      return (this.async ? this.templates : this.data).filter(t => {
+      return (this.isAsyncData ? this.templates : this.data).filter(t => {
         if (!this.searchable) return true;
 
         return t.name.toLowerCase().indexOf(this.search.toLowerCase()) >= 0;
       });
     },
     showLoading() {
-      return this.async ? this.isLoading : false;
+      return this.isAsyncData ? this.isLoading : false;
     },
   },
   mounted() {
@@ -62,7 +62,7 @@ export default {
   methods: {
     ...mapActions('fileTemplates', ['fetchTemplateTypes']),
     fetchTemplatesIfAsync() {
-      if (this.async) {
+      if (this.isAsyncData) {
         this.fetchTemplateTypes();
       }
     },
@@ -79,7 +79,7 @@ export default {
       :toggle-text="label"
       data-display="static"
     />
-    <div class="dropdown-menu">
+    <div class="dropdown-menu pb-0">
       <div
         v-if="title"
         class="dropdown-title ml-0 mr-0"

app/assets/stylesheets/page_bundles/ide.scss

@@ -1452,8 +1452,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
     min-width: 180px;
   }
 
-  .dropdown-menu {
+  .dropdown-content {
     max-height: 222px;
-    overflow: hidden;
   }
 }

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

@@ -98,14 +98,16 @@ describe('IDE file templates bar component', () => {
   });
 
   it('calls setSelectedTemplateType if activeFile name matches a template', done => {
+    const fileName = '.gitlab-ci.yml';
+
     spyOn(vm, 'setSelectedTemplateType');
-    vm.$store.state.openFiles[0].name = '.gitlab-ci.yml';
+    vm.$store.state.openFiles[0].name = fileName;
 
     vm.setInitialType();
 
     vm.$nextTick(() => {
       expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
-        name: '.gitlab-ci.yml',
+        name: fileName,
         key: 'gitlab_ci_ymls',
       });
 

spec/javascripts/ide/components/file_templates/dropdown_spec.js

@@ -28,7 +28,7 @@ describe('IDE file templates dropdown component', () => {
 
   describe('async', () => {
     beforeEach(() => {
-      vm.async = true;
+      vm.isAsyncData = true;
     });
 
     it('calls async store method on Bootstrap dropdown event', () => {