Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

3 files changed, 35 insertions, 46 deletions

diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 2df998d7518..6998f8ef0c4 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -54,25 +54,25 @@ export default {
   <ide-tree-list @tree-ready="$emit('tree-ready')">
     <template #header>
       {{ __('Edit') }}
-      <div class="ide-tree-actions ml-auto d-flex" data-testid="ide-root-actions">
+      <div class="ide-tree-actions gl-ml-auto gl-display-flex" data-testid="ide-root-actions">
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="d-flex border-0 p-0 mr-3"
+          class="gl-display-flex gl-border-0 gl-p-0 gl-mr-5"
           icon="doc-new"
           data-qa-selector="new_file_button"
           @click="createNewFile()"
         />
         <upload
           :show-label="false"
-          class="d-flex mr-3"
-          button-css-classes="border-0 p-0"
+          class="gl-display-flex gl-mr-5"
+          button-css-classes="gl-border-0 gl-p-0"
           @create="createTempEntry"
         />
         <new-entry-button
           :label="__('New directory')"
           :show-label="false"
-          class="d-flex border-0 p-0"
+          class="gl-display-flex gl-border-0 gl-p-0"
           icon="folder-new"
           data-qa-selector="new_directory_button"
           @click="createNewFolder()"
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index e3c230f7660..d6207d4a557 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -68,6 +68,10 @@ export default {
   },
   methods: {
     ...mapActions(['createTempEntry', 'renameEntry']),
+    submitAndClose() {
+      this.submitForm();
+      this.close();
+    },
     submitForm() {
       this.entryName = trimPathComponents(this.entryName);
 
@@ -161,15 +165,17 @@ export default {
     <div class="form-group row">
       <label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>
       <div class="col-sm-10">
-        <input
-          ref="fieldName"
-          v-model.trim="entryName"
-          type="text"
-          class="form-control"
-          data-testid="file-name-field"
-          data-qa-selector="file_name_field"
-          :placeholder="placeholder"
-        />
+        <form data-testid="file-name-form" @submit.prevent="submitAndClose">
+          <input
+            ref="fieldName"
+            v-model.trim="entryName"
+            type="text"
+            class="form-control"
+            data-testid="file-name-field"
+            data-qa-selector="file_name_field"
+            :placeholder="placeholder"
+          />
+        </form>
         <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list">
           <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
             <gl-button
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index d71ac766933..a1396995a3b 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlTabs, GlTab } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import {
@@ -45,6 +46,8 @@ const MARKDOWN_FILE_TYPE = 'markdown';
 export default {
   name: 'RepoEditor',
   components: {
+    GlTabs,
+    GlTab,
     FileAlert,
     ContentViewer,
     DiffViewer,
@@ -121,16 +124,6 @@ export default {
     isPreviewViewMode() {
       return this.fileEditor.viewMode === FILE_VIEW_MODE_PREVIEW;
     },
-    editTabCSS() {
-      return {
-        active: this.isEditorViewMode,
-      };
-    },
-    previewTabCSS() {
-      return {
-        active: this.isPreviewViewMode,
-      };
-    },
     showEditor() {
       return !this.shouldHideEditor && this.isEditorViewMode;
     },
@@ -487,28 +480,18 @@ export default {
 
 <template>
   <div id="ide" class="blob-viewer-container blob-editor-container">
-    <div v-if="showTabs" class="ide-mode-tabs clearfix">
-      <ul class="nav-links float-left border-bottom-0">
-        <li :class="editTabCSS">
-          <a
-            href="javascript:void(0);"
-            role="button"
-            data-testid="edit-tab"
-            @click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_EDITOR })"
-            >{{ __('Edit') }}</a
-          >
-        </li>
-        <li :class="previewTabCSS">
-          <a
-            href="javascript:void(0);"
-            role="button"
-            data-testid="preview-tab"
-            @click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
-            >{{ previewMode.previewTitle }}</a
-          >
-        </li>
-      </ul>
-    </div>
+    <gl-tabs v-if="showTabs" content-class="gl-display-none">
+      <gl-tab
+        :title="__('Edit')"
+        data-testid="edit-tab"
+        @click="updateEditor({ viewMode: $options.FILE_VIEW_MODE_EDITOR })"
+      />
+      <gl-tab
+        :title="previewMode.previewTitle"
+        data-testid="preview-tab"
+        @click="updateEditor({ viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
+      />
+    </gl-tabs>
     <file-alert v-if="alertKey" :alert-key="alertKey" />
     <file-templates-bar v-else-if="showFileTemplatesBar(file.name)" />
     <div