Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

4 files changed, 100 insertions, 29 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>
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index ec61e3374d7..e8b42ac9490 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -84,7 +84,7 @@ export default {
           v-model="search"
           :placeholder="__('Filter...')"
           type="search"
-          class="dropdown-input-field qa-dropdown-filter-input"
+          class="dropdown-input-field"
         />
         <gl-icon name="search" class="dropdown-input-search" />
       </div>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 1c5a00568eb..e3c230f7660 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -6,6 +6,10 @@ import { __, sprintf } from '~/locale';
 import { modalTypes } from '../../constants';
 import { trimPathComponents, getPathParent } from '../../utils';
 
+const i18n = {
+  cancelButtonText: __('Cancel'),
+};
+
 export default {
   components: {
     GlModal,
@@ -43,6 +47,18 @@ export default {
 
       return __('Create file');
     },
+    actionPrimary() {
+      return {
+        text: this.buttonLabel,
+        attributes: [{ variant: 'confirm' }],
+      };
+    },
+    actionCancel() {
+      return {
+        text: i18n.cancelButtonText,
+        attributes: [{ variant: 'default' }],
+      };
+    },
     isCreatingNewFile() {
       return this.modalType === modalTypes.blob;
     },
@@ -136,11 +152,11 @@ export default {
     data-qa-selector="new_file_modal"
     data-testid="ide-new-entry"
     :title="modalTitle"
-    :ok-title="buttonLabel"
-    ok-variant="success"
     size="lg"
-    @ok="submitForm"
-    @hide="resetData"
+    :action-primary="actionPrimary"
+    :action-cancel="actionCancel"
+    @primary="submitForm"
+    @cancel="resetData"
   >
     <div class="form-group row">
       <label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 05493db1dff..f14d86114b8 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -147,6 +147,9 @@ export default {
     fileType() {
       return this.previewMode?.id || '';
     },
+    showTabs() {
+      return !this.shouldHideEditor && this.isEditModeActive && this.previewMode;
+    },
   },
   watch: {
     'file.name': {
@@ -194,6 +197,9 @@ export default {
         this.refreshEditorDimensions();
       }
     },
+    showTabs() {
+      this.$nextTick(() => this.refreshEditorDimensions());
+    },
     rightPaneIsOpen() {
       this.refreshEditorDimensions();
     },
@@ -410,7 +416,7 @@ export default {
       }
     },
     refreshEditorDimensions() {
-      if (this.showEditor) {
+      if (this.showEditor && this.editor) {
         this.editor.updateDimensions();
       }
     },
@@ -495,7 +501,7 @@ export default {
 
 <template>
   <div id="ide" class="blob-viewer-container blob-editor-container">
-    <div v-if="!shouldHideEditor && isEditModeActive" class="ide-mode-tabs clearfix">
+    <div v-if="showTabs" class="ide-mode-tabs clearfix">
       <ul class="nav-links float-left border-bottom-0">
         <li :class="editTabCSS">
           <a
@@ -506,7 +512,7 @@ export default {
             >{{ __('Edit') }}</a
           >
         </li>
-        <li v-if="previewMode" :class="previewTabCSS">
+        <li :class="previewTabCSS">
           <a
             href="javascript:void(0);"
             role="button"