Add latest changes from gitlab-org/gitlab@13-2-stable-ee

23 files changed, 40 insertions, 34 deletions

diff --git a/app/assets/javascripts/ide/components/branches/item.vue b/app/assets/javascripts/ide/components/branches/item.vue
index e7f4cd796b5..49744d573da 100644
--- a/app/assets/javascripts/ide/components/branches/item.vue
+++ b/app/assets/javascripts/ide/components/branches/item.vue
@@ -33,7 +33,7 @@ export default {
 
 <template>
   <a :href="branchHref" class="btn-link d-flex align-items-center">
-    <span class="d-flex append-right-default ide-search-list-current-icon">
+    <span class="d-flex gl-mr-3 ide-search-list-current-icon">
       <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index 6c563776533..407e4c57cd8 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -70,7 +70,7 @@ export default {
 </script>
 
 <template>
-  <div class="append-bottom-15 ide-commit-options">
+  <div class="gl-mb-5 ide-commit-options">
     <radio-group
       :value="$options.commitToCurrentBranch"
       :disabled="!canPushToBranch"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
index a13ca0cd138..3ffbcbf99e8 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
@@ -12,7 +12,7 @@ export default {
   <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state">
     <div class="ide-commit-empty-state-container">
       <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
-      <div class="append-right-default prepend-left-default">
+      <div class="gl-mr-3 gl-ml-3">
         <div class="text-content text-center">
           <h4>{{ __('No changes') }}</h4>
           <p>{{ __('Edit files in the editor and commit changes here') }}</p>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index b6fc567f8cc..03304337839 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
@@ -75,7 +75,7 @@ export default {
       :title="titleTooltip"
       data-container="body"
       data-placement="left"
-      class="append-bottom-15"
+      class="gl-mb-5"
     >
       <icon v-once :name="iconName" :size="18" />
     </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 6b0aa5b2b2b..b37c7280a30 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -83,7 +83,7 @@ export default {
         <ul class="nav-links">
           <li>
             {{ __('Commit Message') }}
-            <span v-popover="$options.popoverOptions" class="form-text text-muted prepend-left-10">
+            <span v-popover="$options.popoverOptions" class="form-text text-muted gl-ml-3">
               <icon name="question" />
             </span>
           </li>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue
index 0812599c25c..cdf49866982 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue
@@ -44,7 +44,7 @@ export default {
         data-qa-selector="start_new_mr_checkbox"
         @change="toggleShouldCreateMR"
       />
-      <span class="prepend-left-10 ide-option-label">
+      <span class="gl-ml-3 ide-option-label">
         {{ __('Start a new merge request') }}
       </span>
     </label>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index a9591805261..aed7b792902 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -66,7 +66,7 @@ export default {
         name="commit-action"
         @change="updateCommitAction($event.target.value)"
       />
-      <span class="prepend-left-10">
+      <span class="gl-ml-3">
         <span v-if="label" class="ide-option-label"> {{ label }} </span> <slot v-else></slot>
       </span>
     </label>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index 137f8bb18c7..327b0b8172f 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -13,7 +13,7 @@ export default {
     <div class="svg-content svg-80">
       <img :src="committedStateSvgPath" :alt="s__('IDE|Successful commit')" />
     </div>
-    <div class="append-right-default prepend-left-default">
+    <div class="gl-mr-3 gl-ml-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
         <p v-html="lastCommitMsg"></p>
diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue
index 51509cd5fe6..f7cf7a5b251 100644
--- a/app/assets/javascripts/ide/components/file_row_extra.vue
+++ b/app/assets/javascripts/ide/components/file_row_extra.vue
@@ -76,7 +76,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        class="prepend-left-5 ide-file-modified"
+        class="gl-ml-2 ide-file-modified"
       />
     </span>
     <changed-file-icon
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index d459e3b43d3..b6a57d1b6e6 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
-    <strong class="append-right-default"> {{ __('File templates') }} </strong>
+    <strong class="gl-mr-3"> {{ __('File templates') }} </strong>
     <dropdown
       :data="templateTypes"
       :label="selectedTemplateType.name || __('Choose a type...')"
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index e9f84eb8648..55b3eaf9737 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { modalTypes } from '../constants';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
@@ -24,7 +24,7 @@ export default {
     FindFile,
     ErrorMessage,
     CommitEditorHeader,
-    GlDeprecatedButton,
+    GlButton,
     GlLoadingIcon,
     RightPane,
   },
@@ -121,15 +121,16 @@ export default {
                         )
                       }}
                     </p>
-                    <gl-deprecated-button
+                    <gl-button
                       variant="success"
+                      category="primary"
                       :title="__('New file')"
                       :aria-label="__('New file')"
                       data-qa-selector="first_file_button"
                       @click="createNewFile()"
                     >
                       {{ __('New file') }}
-                    </gl-deprecated-button>
+                    </gl-button>
                   </template>
                   <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" />
                   <p v-else>
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 62dbfea2088..95348711e1d 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -53,7 +53,7 @@ export default {
           @click="updateViewer"
         />
       </div>
-      <div class="prepend-top-5 ide-review-sub-header">
+      <div class="gl-mt-2 ide-review-sub-header">
         <template v-if="showLatestChangesText">
           {{ __('Latest changes') }}
         </template>
diff --git a/app/assets/javascripts/ide/components/ide_status_list.vue b/app/assets/javascripts/ide/components/ide_status_list.vue
index 92d25709bd5..1354fdc3d98 100644
--- a/app/assets/javascripts/ide/components/ide_status_list.vue
+++ b/app/assets/javascripts/ide/components/ide_status_list.vue
@@ -1,12 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue';
 import { getFileEOL } from '../utils';
 
 export default {
   components: {
+    GlLink,
     TerminalSyncStatusSafe,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   computed: {
     ...mapGetters(['activeFile']),
     activeFileEOL() {
@@ -19,12 +24,14 @@ export default {
 <template>
   <div class="ide-status-list d-flex">
     <template v-if="activeFile">
-      <div class="ide-status-file">{{ activeFile.name }}</div>
-      <div class="ide-status-file">{{ activeFileEOL }}</div>
-      <div v-if="!activeFile.binary" class="ide-status-file">
-        {{ activeFile.editorRow }}:{{ activeFile.editorColumn }}
+      <div>
+        <gl-link v-gl-tooltip.hover :href="activeFile.permalink" :title="__('Open in file view')">
+          {{ activeFile.name }}
+        </gl-link>
       </div>
-      <div class="ide-status-file">{{ activeFile.fileLanguage }}</div>
+      <div>{{ activeFileEOL }}</div>
+      <div v-if="!activeFile.binary">{{ activeFile.editorRow }}:{{ activeFile.editorColumn }}</div>
+      <div>{{ activeFile.fileLanguage }}</div>
     </template>
     <terminal-sync-status-safe />
   </div>
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index be8bf77bba0..db3630bc1d1 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div class="ide-job-item">
-    <job-description :job="job" class="append-right-default" />
+    <job-description :job="job" class="gl-mr-3" />
     <div class="ml-auto align-self-center">
       <button v-if="job.started" type="button" class="btn btn-default btn-sm" @click="clickViewLog">
         {{ __('View log') }}
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
index b97b7289886..4e0912f3f44 100644
--- a/app/assets/javascripts/ide/components/jobs/list.vue
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="loading && !stages.length" size="lg" class="gl-mt-3" />
     <template v-else>
       <stage
         v-for="stage in stages"
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 169a948c2da..75441e8c1c8 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -56,7 +56,7 @@ export default {
 </script>
 
 <template>
-  <div class="ide-stage card prepend-top-default">
+  <div class="ide-stage card gl-mt-3">
     <div
       ref="cardHeader"
       :class="{
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index 3f060392686..8b7b8d5a91c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -40,7 +40,7 @@ export default {
 
 <template>
   <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
-    <span class="d-flex append-right-default ide-search-list-current-icon">
+    <span class="d-flex gl-mr-3 ide-search-list-current-icon">
       <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index bf2a33be653..af45d88b84a 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -102,7 +102,7 @@ export default {
                 class="btn-link d-flex align-items-center"
                 @click.stop="setSearchType(searchType)"
               >
-                <span class="d-flex append-right-default ide-search-list-current-icon">
+                <span class="d-flex gl-mr-3 ide-search-list-current-icon">
                   <icon :size="18" name="search" />
                 </span>
                 <span>{{ searchType.label }}</span>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 2798ede5341..b656e35f150 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -64,6 +64,7 @@ export default {
         :aria-label="__('Create new file or directory')"
         type="button"
         class="rounded border-0 d-flex ide-entry-dropdown-toggle"
+        data-qa-selector="dropdown_button"
         @click.stop="openDropdown()"
       >
         <icon name="ellipsis_v" /> <icon name="chevron-down" />
@@ -97,6 +98,7 @@ export default {
             class="d-flex"
             icon="pencil"
             icon-classes="mr-2"
+            data-qa-selector="rename_move_button"
             @click="createNewItem($options.modalTypes.rename)"
           />
         </li>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 586d6867ab4..fe0167942b8 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -154,10 +154,7 @@ export default {
           data-qa-selector="file_name_field"
           :placeholder="placeholder"
         />
-        <ul
-          v-if="isCreatingNewFile"
-          class="file-templates prepend-top-default list-inline qa-template-list"
-        >
+        <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">
             <button
               type="button"
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 6958a5d2526..6038e92f254 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -7,7 +7,7 @@ import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
-import EmptyState from '../../../pipelines/components/empty_state.vue';
+import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue';
 import JobsList from '../jobs/list.vue';
 
 import IDEServices from '~/ide/services';
@@ -59,7 +59,7 @@ export default {
 
 <template>
   <div class="ide-pipeline">
-    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" />
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
         <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index a7646083428..ac445a1d9f1 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -185,7 +185,6 @@ export default {
       'setFileLanguage',
       'setEditorPosition',
       'setFileViewMode',
-      'updateViewer',
       'removePendingTab',
       'triggerFilesChange',
       'addTempImage',
@@ -241,7 +240,7 @@ export default {
       });
     },
     setupEditor() {
-      if (!this.file || !this.editor.instance) return;
+      if (!this.file || !this.editor.instance || this.file.loading) return;
 
       const head = this.getStagedFile(this.file.path);
 
diff --git a/app/assets/javascripts/ide/components/terminal/empty_state.vue b/app/assets/javascripts/ide/components/terminal/empty_state.vue
index 9841f1ece48..5dd12e62820 100644
--- a/app/assets/javascripts/ide/components/terminal/empty_state.vue
+++ b/app/assets/javascripts/ide/components/terminal/empty_state.vue
@@ -43,7 +43,7 @@ export default {
   <div class="text-center p-3">
     <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div>
     <h4>{{ __('Web Terminal') }}</h4>
-    <gl-loading-icon v-if="isLoading" size="lg" class="prepend-top-default" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" />
     <template v-else>
       <p>{{ __('Run tests against your code live using the Web Terminal') }}</p>
       <p>