Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

39 files changed, 184 insertions, 122 deletions

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 644808cb83a..c71d911adfb 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -1,6 +1,7 @@
 <script>
-import { mapActions, mapState } from 'vuex';
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { leftSidebarViews } from '../constants';
 
 export default {
@@ -11,7 +12,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   computed: {
-    ...mapState(['currentActivityView']),
+    ...mapState(['currentActivityView', 'stagedFiles']),
   },
   methods: {
     ...mapActions(['updateActivityBarView']),
@@ -20,7 +21,7 @@ export default {
 
       this.updateActivityBarView(view);
 
-      this.$root.$emit('bv::hide::tooltip');
+      this.$root.$emit(BV_HIDE_TOOLTIP);
     },
   },
   leftSidebarViews,
@@ -81,6 +82,9 @@ export default {
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
           <gl-icon name="commit" />
+          <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill">
+            {{ stagedFiles.length }}
+          </div>
         </button>
       </li>
     </ul>
diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index c317fadb656..1ae7cf9339d 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -1,7 +1,7 @@
 <script>
-import { mapActions, mapState } from 'vuex';
-import { debounce } from 'lodash';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { mapActions, mapState } from 'vuex';
 import Item from './item.vue';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index b89329c92ec..273d8d972f7 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -1,11 +1,14 @@
 <script>
+import { GlSprintf } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
-import { GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import consts from '../../stores/modules/commit/constants';
-import RadioGroup from './radio_group.vue';
+import {
+  COMMIT_TO_CURRENT_BRANCH,
+  COMMIT_TO_NEW_BRANCH,
+} from '../../stores/modules/commit/constants';
 import NewMergeRequestOption from './new_merge_request_option.vue';
+import RadioGroup from './radio_group.vue';
 
 const { mapState: mapCommitState, mapActions: mapCommitActions } = createNamespacedHelpers(
   'commit',
@@ -53,14 +56,14 @@ export default {
       }
 
       if (this.shouldDefaultToCurrentBranch) {
-        this.updateCommitAction(consts.COMMIT_TO_CURRENT_BRANCH);
+        this.updateCommitAction(COMMIT_TO_CURRENT_BRANCH);
       } else {
-        this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH);
+        this.updateCommitAction(COMMIT_TO_NEW_BRANCH);
       }
     },
   },
-  commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH,
-  commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH,
+  commitToCurrentBranch: COMMIT_TO_CURRENT_BRANCH,
+  commitToNewBranch: COMMIT_TO_NEW_BRANCH,
   currentBranchPermissionsTooltip: s__(
     "IDE|This option is disabled because you don't have write permissions for the current branch.",
   ),
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
index 53fac09ab66..75f02af28c4 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
@@ -1,9 +1,9 @@
 <script>
-import { mapActions } from 'vuex';
 import { GlModal, GlButton } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import { sprintf, __ } from '~/locale';
-import FileIcon from '~/vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 7c3e522a488..cdb3eaff207 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -1,12 +1,16 @@
 <script>
+import { GlModal, GlSafeHtmlDirective, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { GlModal, GlSafeHtmlDirective, GlButton } from '@gitlab/ui';
-import { n__, __ } from '~/locale';
-import CommitMessageField from './message_field.vue';
-import Actions from './actions.vue';
-import SuccessMessage from './success_message.vue';
+import { n__, s__ } from '~/locale';
 import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
 import { createUnexpectedCommitError } from '../../lib/errors';
+import Actions from './actions.vue';
+import CommitMessageField from './message_field.vue';
+import SuccessMessage from './success_message.vue';
+
+const MSG_CANNOT_PUSH_CODE = s__(
+  'WebIDE|You need permission to edit files directly in this project.',
+);
 
 export default {
   components: {
@@ -18,6 +22,7 @@ export default {
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
+    GlTooltip: GlTooltipDirective,
   },
   data() {
     return {
@@ -30,15 +35,21 @@ export default {
   computed: {
     ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading', 'commitError']),
-    ...mapGetters(['someUncommittedChanges']),
+    ...mapGetters(['someUncommittedChanges', 'canPushCode']),
     ...mapGetters('commit', ['discardDraftButtonDisabled', 'preBuiltCommitMessage']),
+    commitButtonDisabled() {
+      return !this.canPushCode || !this.someUncommittedChanges;
+    },
+    commitButtonTooltip() {
+      if (!this.canPushCode) {
+        return MSG_CANNOT_PUSH_CODE;
+      }
+
+      return '';
+    },
     overviewText() {
       return n__('%d changed file', '%d changed files', this.stagedFiles.length);
     },
-    commitButtonText() {
-      return this.stagedFiles.length ? __('Commit') : __('Stage & Commit');
-    },
-
     currentViewIsCommitView() {
       return this.currentActivityView === leftSidebarViews.commit.name;
     },
@@ -73,6 +84,12 @@ export default {
       'updateCommitAction',
     ]),
     commit() {
+      // Even though the submit button will be disabled, we need to disable the submission
+      // since hitting enter on the branch name text input also submits the form.
+      if (!this.canPushCode) {
+        return false;
+      }
+
       return this.commitChanges();
     },
     handleCompactState() {
@@ -113,6 +130,8 @@ export default {
       this.componentHeight = null;
     },
   },
+  // Expose for tests
+  MSG_CANNOT_PUSH_CODE,
 };
 </script>
 
@@ -134,17 +153,22 @@ export default {
       @after-enter="afterEndTransition"
     >
       <div v-if="isCompact" ref="compactEl" class="commit-form-compact">
-        <gl-button
-          :disabled="!someUncommittedChanges"
-          category="primary"
-          variant="info"
-          block
-          class="qa-begin-commit-button"
-          data-testid="begin-commit-button"
-          @click="beginCommit"
+        <div
+          v-gl-tooltip="{ title: commitButtonTooltip }"
+          data-testid="begin-commit-button-tooltip"
         >
-          {{ __('Commit…') }}
-        </gl-button>
+          <gl-button
+            :disabled="commitButtonDisabled"
+            category="primary"
+            variant="info"
+            block
+            class="qa-begin-commit-button"
+            data-testid="begin-commit-button"
+            @click="beginCommit"
+          >
+            {{ __('Commit…') }}
+          </gl-button>
+        </div>
         <p class="text-center bold">{{ overviewText }}</p>
       </div>
       <form v-else ref="formEl" @submit.prevent.stop="commit">
@@ -157,16 +181,29 @@ export default {
         />
         <div class="clearfix gl-mt-5">
           <actions />
+          <div
+            v-gl-tooltip="{ title: commitButtonTooltip }"
+            class="float-left"
+            data-testid="commit-button-tooltip"
+          >
+            <gl-button
+              :disabled="commitButtonDisabled"
+              :loading="submitCommitLoading"
+              data-testid="commit-button"
+              class="qa-commit-button"
+              category="primary"
+              variant="success"
+              @click="commit"
+            >
+              {{ __('Commit') }}
+            </gl-button>
+          </div>
           <gl-button
-            :loading="submitCommitLoading"
-            class="float-left qa-commit-button"
-            category="primary"
-            variant="success"
-            @click="commit"
+            v-if="!discardDraftButtonDisabled"
+            class="float-right"
+            data-testid="discard-draft"
+            @click="discardDraft"
           >
-            {{ __('Commit') }}
-          </gl-button>
-          <gl-button v-if="!discardDraftButtonDisabled" class="float-right" @click="discardDraft">
             {{ __('Discard draft') }}
           </gl-button>
           <gl-button
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 729ff7c74ec..fbe353fc4ba 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapActions } from 'vuex';
 import { GlModal, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import { __, sprintf } from '~/locale';
 import ListItem from './list_item.vue';
 
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 4192a002486..79b6fd1ec68 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,9 +1,9 @@
 <script>
-import { mapActions } from 'vuex';
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import { viewerTypes } from '../../constants';
 import getCommitIconMap from '../../commit_icon';
+import { viewerTypes } from '../../constants';
 
 export default {
   components: {
@@ -85,7 +85,11 @@ export default {
       role="button"
       @click="openFileInEditor"
     >
-      <span class="multi-file-commit-list-file-path d-flex align-items-center">
+      <span
+        class="multi-file-commit-list-file-path d-flex align-items-center"
+        data-qa-selector="file_to_commit_content"
+        :data-qa-file-name="file.name"
+      >
         <file-icon :file-name="file.name" class="gl-mr-3" />
         <template v-if="file.prevName && file.prevName !== file.name">
           {{ file.prevName }} &#x2192;
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 cdf49866982..121dae4b87e 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
@@ -1,6 +1,6 @@
 <script>
-import { createNamespacedHelpers } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
+import { createNamespacedHelpers } from 'vuex';
 import { s__ } from '~/locale';
 
 const { mapActions: mapCommitActions, mapGetters: mapCommitGetters } = createNamespacedHelpers(
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 91cce44382c..039b4a54b26 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlTooltipDirective } from '@gitlab/ui';
+import { mapActions, mapState, mapGetters } from 'vuex';
 
 export default {
   directives: {
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index 08635b43b91..d3a52f9f0cf 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -1,7 +1,7 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { mapActions } from 'vuex';
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue
index fb0d00dc6a1..d80ad723fce 100644
--- a/app/assets/javascripts/ide/components/file_row_extra.vue
+++ b/app/assets/javascripts/ide/components/file_row_extra.vue
@@ -1,10 +1,10 @@
 <script>
-import { mapGetters } from 'vuex';
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { mapGetters } from 'vuex';
 import { n__ } from '~/locale';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
-import NewDropdown from './new_dropdown/index.vue';
 import MrFileIcon from './mr_file_icon.vue';
+import NewDropdown from './new_dropdown/index.vue';
 
 export default {
   name: 'FileRowExtra',
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index 772dab3fed3..ec61e3374d7 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -1,7 +1,7 @@
 <script>
+import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index aac899fde0d..2816f89d60d 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,7 +1,7 @@
 <script>
+import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import {
   WEBIDE_MARK_APP_START,
   WEBIDE_MARK_FILE_FINISH,
@@ -10,13 +10,12 @@ import {
   WEBIDE_MEASURE_BEFORE_VUE,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { modalTypes } from '../constants';
 import eventHub from '../eventhub';
+import { measurePerformance } from '../utils';
 import IdeSidebar from './ide_side_bar.vue';
 import RepoEditor from './repo_editor.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-
-import { measurePerformance } from '../utils';
 
 eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
   measurePerformance(
@@ -26,10 +25,15 @@ eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
   ),
 );
 
+const MSG_CANNOT_PUSH_CODE = s__(
+  'WebIDE|You need permission to edit files directly in this project. Fork this project to make your changes and submit a merge request.',
+);
+
 export default {
   components: {
     IdeSidebar,
     RepoEditor,
+    GlAlert,
     GlButton,
     GlLoadingIcon,
     ErrorMessage: () => import(/* webpackChunkName: 'ide_runtime' */ './error_message.vue'),
@@ -59,12 +63,14 @@ export default {
       'loading',
     ]),
     ...mapGetters([
+      'canPushCode',
       'activeFile',
       'someUncommittedChanges',
       'isCommitModeActive',
       'allBlobs',
       'emptyRepo',
       'currentTree',
+      'hasCurrentProject',
       'editorTheme',
       'getUrlForPath',
     ]),
@@ -110,6 +116,7 @@ export default {
       this.loadDeferred = true;
     },
   },
+  MSG_CANNOT_PUSH_CODE,
 };
 </script>
 
@@ -118,6 +125,9 @@ export default {
     class="ide position-relative d-flex flex-column align-items-stretch"
     :class="{ [`theme-${themeName}`]: themeName }"
   >
+    <gl-alert v-if="!canPushCode" :dismissible="false">{{
+      $options.MSG_CANNOT_PUSH_CODE
+    }}</gl-alert>
     <error-message v-if="errorMessage" :message="errorMessage" />
     <div class="ide-view flex-grow d-flex">
       <template v-if="loadDeferred">
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 7d2f0acb08c..bea25d42756 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -1,8 +1,8 @@
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
-import IdeTreeList from './ide_tree_list.vue';
-import EditorModeDropdown from './editor_mode_dropdown.vue';
 import { viewerTypes } from '../constants';
+import EditorModeDropdown from './editor_mode_dropdown.vue';
+import IdeTreeList from './ide_tree_list.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 135b28685ed..c3d6494692a 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,12 +1,12 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
-import IdeTree from './ide_tree.vue';
-import ResizablePanel from './resizable_panel.vue';
+import { mapState, mapGetters } from 'vuex';
+import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants';
 import ActivityBar from './activity_bar.vue';
 import CommitForm from './commit_sidebar/form.vue';
 import IdeProjectHeader from './ide_project_header.vue';
-import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants';
+import IdeTree from './ide_tree.vue';
+import ResizablePanel from './resizable_panel.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
index 9dbed0ace40..d8daf3b7ad6 100644
--- a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
+++ b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import { otherSide } from '../utils';
+import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { SIDE_RIGHT } from '../constants';
+import { otherSide } from '../utils';
 
 export default {
   directives: {
@@ -50,7 +51,7 @@ export default {
     },
     clickTab(e, tab) {
       e.currentTarget.blur();
-      this.$root.$emit('bv::hide::tooltip');
+      this.$root.$emit(BV_HIDE_TOOLTIP);
 
       if (this.isActiveTab(tab)) {
         this.$emit('close');
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index ee292190e06..28ca1b6750f 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,13 +1,13 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import IdeStatusList from './ide_status_list.vue';
-import IdeStatusMr from './ide_status_mr.vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import timeAgoMixin from '~/vue_shared/mixins/timeago';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 import { rightSidebarViews } from '../constants';
+import IdeStatusList from './ide_status_list.vue';
+import IdeStatusMr from './ide_status_mr.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/ide_status_list.vue b/app/assets/javascripts/ide/components/ide_status_list.vue
index aa61c0d9b5e..da393b42dca 100644
--- a/app/assets/javascripts/ide/components/ide_status_list.vue
+++ b/app/assets/javascripts/ide/components/ide_status_list.vue
@@ -1,8 +1,8 @@
 <script>
-import { mapGetters } from 'vuex';
 import { GlLink, GlTooltipDirective } from '@gitlab/ui';
-import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue';
+import { mapGetters } from 'vuex';
 import { isTextFile, getFileEOL } from '~/ide/utils';
+import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index e563de6659a..2df998d7518 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -2,9 +2,9 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { modalTypes, viewerTypes } from '../constants';
 import IdeTreeList from './ide_tree_list.vue';
-import Upload from './new_dropdown/upload.vue';
 import NewEntryButton from './new_dropdown/button.vue';
 import NewModal from './new_dropdown/modal.vue';
+import Upload from './new_dropdown/upload.vue';
 
 export default {
   components: {
@@ -58,8 +58,9 @@ export default {
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="d-flex border-0 p-0 mr-3 qa-new-file"
+          class="d-flex border-0 p-0 mr-3"
           icon="doc-new"
+          data-qa-selector="new_file_button"
           @click="createNewFile()"
         />
         <upload
@@ -73,6 +74,7 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0"
           icon="folder-new"
+          data-qa-selector="new_directory_button"
           @click="createNewFolder()"
         />
       </div>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index b67881b14f4..b987adc8bae 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -1,9 +1,9 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
-import FileTree from '~/vue_shared/components/file_tree.vue';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { WEBIDE_MARK_FILE_CLICKED } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
+import FileTree from '~/vue_shared/components/file_tree.vue';
 import IdeFileRow from './ide_file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
 
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index 7f07a5dbe43..8e611503cb4 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -1,11 +1,11 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { mapActions, mapState } from 'vuex';
-import { throttle } from 'lodash';
 import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui';
+import { throttle } from 'lodash';
+import { mapActions, mapState } from 'vuex';
 import { __ } from '../../../locale';
-import ScrollButton from './detail/scroll_button.vue';
 import JobDescription from './detail/description.vue';
+import ScrollButton from './detail/scroll_button.vue';
 
 const scrollPositions = {
   top: 0,
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
index 4e0912f3f44..0ce21c5c36c 100644
--- a/app/assets/javascripts/ide/components/jobs/list.vue
+++ b/app/assets/javascripts/ide/components/jobs/list.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 import Stage from './stage.vue';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 4b3c6e61e11..680e8841a1f 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -1,10 +1,10 @@
 <script>
-import { mapActions, mapState } from 'vuex';
-import { debounce } from 'lodash';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { debounce } from 'lodash';
+import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
-import Item from './item.vue';
 import TokenedInput from '../shared/tokened_input.vue';
+import Item from './item.vue';
 
 const SEARCH_TYPES = [
   { type: 'created', label: __('Created by me') },
diff --git a/app/assets/javascripts/ide/components/nav_dropdown.vue b/app/assets/javascripts/ide/components/nav_dropdown.vue
index 6ff77e556c0..f5f0db3a7a3 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown.vue
@@ -1,8 +1,8 @@
 <script>
 import $ from 'jquery';
 import { mapGetters } from 'vuex';
-import NavForm from './nav_form.vue';
 import NavDropdownButton from './nav_dropdown_button.vue';
+import NavForm from './nav_form.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
index 116d3cec03e..0db43123562 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapState } from 'vuex';
 import { GlIcon } from '@gitlab/ui';
+import { mapState } from 'vuex';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
 const EMPTY_LABEL = '-';
diff --git a/app/assets/javascripts/ide/components/nav_form.vue b/app/assets/javascripts/ide/components/nav_form.vue
index 70a92b8d3ab..62bb4841760 100644
--- a/app/assets/javascripts/ide/components/nav_form.vue
+++ b/app/assets/javascripts/ide/components/nav_form.vue
@@ -1,6 +1,6 @@
 <script>
-import Tabs from '~/vue_shared/components/tabs/tabs';
 import Tab from '~/vue_shared/components/tabs/tab.vue';
+import Tabs from '~/vue_shared/components/tabs/tabs';
 import BranchesSearchList from './branches/search_list.vue';
 import MergeRequestSearchList from './merge_requests/list.vue';
 
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 692878de5e1..bdd201aac1b 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -1,10 +1,10 @@
 <script>
-import { mapActions } from 'vuex';
 import { GlIcon } from '@gitlab/ui';
-import upload from './upload.vue';
-import ItemButton from './button.vue';
+import { mapActions } from 'vuex';
 import { modalTypes } from '../../constants';
+import ItemButton from './button.vue';
 import NewModal from './modal.vue';
+import upload from './upload.vue';
 
 export default {
   components: {
@@ -108,6 +108,7 @@ export default {
             class="d-flex"
             icon="remove"
             icon-classes="mr-2"
+            data-qa-selector="delete_button"
             @click="deleteEntry(path)"
           />
         </li>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 22eefb6634f..cafb58b0e2c 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlModal, GlButton } from '@gitlab/ui';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __, sprintf, s__ } from '~/locale';
 import { modalTypes } from '../../constants';
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 5704129c10f..76d8a0aff3d 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -1,6 +1,6 @@
 <script>
-import ItemButton from './button.vue';
 import { isTextFile } from '~/ide/utils';
+import ItemButton from './button.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index 46ef08a45a9..da2d4fbe7f0 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -1,13 +1,13 @@
 <script>
 import { mapGetters, mapState } from 'vuex';
 import { __ } from '~/locale';
-import CollapsibleSidebar from './collapsible_sidebar.vue';
-import ResizablePanel from '../resizable_panel.vue';
 import { rightSidebarViews, SIDEBAR_INIT_WIDTH, SIDEBAR_NAV_WIDTH } from '../../constants';
-import PipelinesList from '../pipelines/list.vue';
 import JobsDetail from '../jobs/detail.vue';
+import PipelinesList from '../pipelines/list.vue';
 import Clientside from '../preview/clientside.vue';
+import ResizablePanel from '../resizable_panel.vue';
 import TerminalView from '../terminal/view.vue';
+import CollapsibleSidebar from './collapsible_sidebar.vue';
 
 // Need to add the width of the nav buttons since the resizable container contains those as well
 const WIDTH = SIDEBAR_INIT_WIDTH + SIDEBAR_NAV_WIDTH;
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index a4a13389fbf..2526db0cd7b 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -1,6 +1,4 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import { escape } from 'lodash';
 import {
   GlLoadingIcon,
   GlIcon,
@@ -10,13 +8,14 @@ import {
   GlBadge,
   GlAlert,
 } from '@gitlab/ui';
+import { escape } from 'lodash';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import IDEServices from '~/ide/services';
 import { sprintf, __ } from '../../../locale';
-import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import JobsList from '../jobs/list.vue';
 
-import IDEServices from '~/ide/services';
-
 export default {
   components: {
     GlIcon,
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index 4c2a369226e..13f2e775fc3 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -1,13 +1,13 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { listen } from 'codesandbox-api';
 import { isEmpty, debounce } from 'lodash';
 import { Manager } from 'smooshpack';
-import { listen } from 'codesandbox-api';
-import { GlLoadingIcon } from '@gitlab/ui';
-import Navigator from './navigator.vue';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { packageJsonPath, LIVE_PREVIEW_DEBOUNCE } from '../../constants';
-import { createPathWithExt } from '../../utils';
 import eventHub from '../../eventhub';
+import { createPathWithExt } from '../../utils';
+import Navigator from './navigator.vue';
 
 export default {
   components: {
@@ -165,7 +165,7 @@ export default {
       </p>
       <a
         :href="links.webIDEHelpPagePath"
-        class="btn btn-primary"
+        class="btn gl-button btn-confirm"
         target="_blank"
         rel="noopener noreferrer"
       >
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
index 8986359427f..0c6cb041095 100644
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/app/assets/javascripts/ide/components/preview/navigator.vue
@@ -1,6 +1,6 @@
 <script>
-import { listen } from 'codesandbox-api';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { listen } from 'codesandbox-api';
 
 export default {
   components: {
@@ -78,6 +78,7 @@ export default {
       this.visitPath(this.path);
     },
     visitPath(path) {
+      // eslint-disable-next-line vue/no-mutating-props
       this.manager.iframe.src = `${this.manager.bundlerURL}${path}`;
     },
   },
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 8092ef3bce6..854ff74d0af 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -1,8 +1,8 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import CommitFilesList from './commit_sidebar/list.vue';
-import EmptyState from './commit_sidebar/empty_state.vue';
 import { stageKeys } from '../constants';
+import EmptyState from './commit_sidebar/empty_state.vue';
+import CommitFilesList from './commit_sidebar/list.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index a9c05f2e1ac..690060f5cb0 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -1,9 +1,7 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
-import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
-import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import { __ } from '~/locale';
 import {
   WEBIDE_MARK_FILE_CLICKED,
   WEBIDE_MARK_REPO_EDITOR_START,
@@ -12,21 +10,23 @@ import {
   WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
-import eventHub from '../eventhub';
+import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
+import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import {
   leftSidebarViews,
   viewerTypes,
   FILE_VIEW_MODE_EDITOR,
   FILE_VIEW_MODE_PREVIEW,
 } from '../constants';
+import eventHub from '../eventhub';
 import Editor from '../lib/editor';
-import FileTemplatesBar from './file_templates/bar.vue';
-import { __ } from '~/locale';
-import { extractMarkdownImagesFromEntries } from '../stores/utils';
-import { getFileEditorOrDefault } from '../stores/modules/editor/utils';
-import { getPathParent, readFileAsDataURL, registerSchema, isTextFile } from '../utils';
 import { getRulesWithTraversal } from '../lib/editorconfig/parser';
 import mapRulesToMonaco from '../lib/editorconfig/rules_mapper';
+import { getFileEditorOrDefault } from '../stores/modules/editor/utils';
+import { extractMarkdownImagesFromEntries } from '../stores/utils';
+import { getPathParent, readFileAsDataURL, registerSchema, isTextFile } from '../utils';
+import FileTemplatesBar from './file_templates/bar.vue';
 
 export default {
   name: 'RepoEditor',
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index e3c41eee15e..d28751c9571 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,10 +1,10 @@
 <script>
-import { mapActions, mapGetters } from 'vuex';
 import { GlIcon } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
 import { __, sprintf } from '~/locale';
 
-import FileIcon from '~/vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import FileStatusIcon from './repo_file_status_icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/terminal/session.vue b/app/assets/javascripts/ide/components/terminal/session.vue
index 0e67a2ab45f..3a4128b6207 100644
--- a/app/assets/javascripts/ide/components/terminal/session.vue
+++ b/app/assets/javascripts/ide/components/terminal/session.vue
@@ -1,9 +1,9 @@
 <script>
-import { mapActions, mapState } from 'vuex';
 import { GlButton } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
-import Terminal from './terminal.vue';
 import { isEndingStatus } from '../../stores/modules/terminal/utils';
+import Terminal from './terminal.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/terminal/terminal.vue b/app/assets/javascripts/ide/components/terminal/terminal.vue
index 0ee4107f9ab..08fb2f5e5a0 100644
--- a/app/assets/javascripts/ide/components/terminal/terminal.vue
+++ b/app/assets/javascripts/ide/components/terminal/terminal.vue
@@ -1,11 +1,11 @@
 <script>
-import { mapState } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { mapState } from 'vuex';
 import { __ } from '~/locale';
 import GLTerminal from '~/terminal/terminal';
-import TerminalControls from './terminal_controls.vue';
 import { RUNNING, STOPPING } from '../../stores/modules/terminal/constants';
 import { isStartingStatus } from '../../stores/modules/terminal/utils';
+import TerminalControls from './terminal_controls.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue b/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue
index c3f722d6052..67692c842b8 100644
--- a/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue
+++ b/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue
@@ -1,6 +1,6 @@
 <script>
-import { throttle } from 'lodash';
 import { GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { throttle } from 'lodash';
 import { mapState } from 'vuex';
 import {
   MSG_TERMINAL_SYNC_CONNECTING,