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

85 files changed, 387 insertions, 296 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,
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index e5618466395..ed6b750480b 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -16,6 +16,13 @@ export const PERMISSION_CREATE_MR = 'createMergeRequestIn';
 export const PERMISSION_READ_MR = 'readMergeRequest';
 export const PERMISSION_PUSH_CODE = 'pushCode';
 
+// The default permission object to use when the project data isn't available yet.
+// This helps us encapsulate checks like `canPushCode` without requiring an
+// additional check like `currentProject && canPushCode`.
+export const DEFAULT_PERMISSIONS = {
+  [PERMISSION_PUSH_CODE]: true,
+};
+
 export const viewerTypes = {
   mr: 'mrdiff',
   edit: 'editor',
@@ -100,3 +107,7 @@ export const SIDE_RIGHT = 'right';
 
 // Live Preview feature
 export const LIVE_PREVIEW_DEBOUNCE = 2000;
+
+// This is the maximum number of files to auto open when opening the Web IDE
+// from a Merge Request
+export const MAX_MR_FILES_AUTO_OPEN = 10;
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index 0e6775d87f1..cb59cd7a8df 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -1,14 +1,14 @@
 import Vue from 'vue';
+import { deprecatedCreateFlash as flash } from '~/flash';
 import IdeRouter from '~/ide/ide_router_extension';
 import { joinPaths } from '~/lib/utils/url_utility';
-import { deprecatedCreateFlash as flash } from '~/flash';
 import { __ } from '~/locale';
-import { performanceMarkAndMeasure } from '~/performance/utils';
 import {
   WEBIDE_MARK_FETCH_PROJECT_DATA_START,
   WEBIDE_MARK_FETCH_PROJECT_DATA_FINISH,
   WEBIDE_MEASURE_FETCH_PROJECT_DATA,
 } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import { syncRouterAndStore } from './sync_router_and_store';
 
 Vue.use(IdeRouter);
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index af408c06556..1b4b59ef62f 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -1,14 +1,14 @@
+import { identity } from 'lodash';
 import Vue from 'vue';
 import { mapActions } from 'vuex';
-import { identity } from 'lodash';
-import Translate from '~/vue_shared/translate';
 import PerformancePlugin from '~/performance/vue_performance_plugin';
-import ide from './components/ide.vue';
-import { createStore } from './stores';
-import { createRouter } from './ide_router';
+import Translate from '~/vue_shared/translate';
 import { parseBoolean } from '../lib/utils/common_utils';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
+import ide from './components/ide.vue';
+import { createRouter } from './ide_router';
 import { DEFAULT_THEME } from './lib/themes';
+import { createStore } from './stores';
 
 Vue.use(Translate);
 
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 4969875439e..46128651547 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -1,9 +1,9 @@
 import { editor as monacoEditor, Uri } from 'monaco-editor';
-import Disposable from './disposable';
+import { insertFinalNewline } from '~/lib/utils/text_utility';
 import eventHub from '../../eventhub';
 import { trimTrailingWhitespace } from '../../utils';
-import { insertFinalNewline } from '~/lib/utils/text_utility';
 import { defaultModelOptions } from '../editor_options';
+import Disposable from './disposable';
 
 export default class Model {
   constructor(file, head = null) {
diff --git a/app/assets/javascripts/ide/lib/create_diff.js b/app/assets/javascripts/ide/lib/create_diff.js
index 51d4967fb23..17779b6314e 100644
--- a/app/assets/javascripts/ide/lib/create_diff.js
+++ b/app/assets/javascripts/ide/lib/create_diff.js
@@ -1,5 +1,5 @@
-import { commitActionForFile } from '~/ide/stores/utils';
 import { commitActionTypes } from '~/ide/constants';
+import { commitActionForFile } from '~/ide/stores/utils';
 import createFileDiff from './create_file_diff';
 
 const getDeletedParents = (entries, file) => {
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index 3efe692be13..1d051062637 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -1,7 +1,7 @@
-import { Range } from 'monaco-editor';
 import { throttle } from 'lodash';
-import DirtyDiffWorker from './diff_worker';
+import { Range } from 'monaco-editor';
 import Disposable from '../common/disposable';
+import DirtyDiffWorker from './diff_worker';
 
 export const getDiffChangeType = (change) => {
   if (change.modified) {
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 4fad0c09ce7..80191f635a3 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -1,15 +1,15 @@
 import { debounce } from 'lodash';
 import { editor as monacoEditor, KeyCode, KeyMod, Range } from 'monaco-editor';
-import DecorationsController from './decorations/controller';
-import DirtyDiffController from './diff/controller';
+import { clearDomElement } from '~/editor/utils';
+import { registerLanguages } from '../utils';
 import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
+import DecorationsController from './decorations/controller';
+import DirtyDiffController from './diff/controller';
 import { editorOptions, defaultEditorOptions, defaultDiffEditorOptions } from './editor_options';
-import { themes } from './themes';
-import languages from './languages';
 import keymap from './keymap.json';
-import { clearDomElement } from '~/editor/utils';
-import { registerLanguages } from '../utils';
+import languages from './languages';
+import { themes } from './themes';
 
 function setupThemes() {
   themes.forEach((theme) => {
diff --git a/app/assets/javascripts/ide/lib/errors.js b/app/assets/javascripts/ide/lib/errors.js
index f975034a872..a8a048e588f 100644
--- a/app/assets/javascripts/ide/lib/errors.js
+++ b/app/assets/javascripts/ide/lib/errors.js
@@ -1,6 +1,6 @@
 import { escape } from 'lodash';
 import { __ } from '~/locale';
-import consts from '../stores/modules/commit/constants';
+import { COMMIT_TO_NEW_BRANCH } from '../stores/modules/commit/constants';
 
 const CODEOWNERS_REGEX = /Push.*protected branches.*CODEOWNERS/;
 const BRANCH_CHANGED_REGEX = /changed.*since.*start.*edit/;
@@ -8,7 +8,7 @@ const BRANCH_ALREADY_EXISTS = /branch.*already.*exists/;
 
 const createNewBranchAndCommit = (store) =>
   store
-    .dispatch('commit/updateCommitAction', consts.COMMIT_TO_NEW_BRANCH)
+    .dispatch('commit/updateCommitAction', COMMIT_TO_NEW_BRANCH)
     .then(() => store.dispatch('commit/commitChanges'));
 
 export const createUnexpectedCommitError = (message) => ({
diff --git a/app/assets/javascripts/ide/lib/languages/index.js b/app/assets/javascripts/ide/lib/languages/index.js
index 580ad820bf9..f758cb7dd86 100644
--- a/app/assets/javascripts/ide/lib/languages/index.js
+++ b/app/assets/javascripts/ide/lib/languages/index.js
@@ -1,5 +1,5 @@
-import vue from './vue';
 import hcl from './hcl';
+import vue from './vue';
 
 const languages = [vue, hcl];
 
diff --git a/app/assets/javascripts/ide/lib/mirror.js b/app/assets/javascripts/ide/lib/mirror.js
index 6f9cfec9465..78990953beb 100644
--- a/app/assets/javascripts/ide/lib/mirror.js
+++ b/app/assets/javascripts/ide/lib/mirror.js
@@ -1,6 +1,6 @@
-import createDiff from './create_diff';
 import { getWebSocketUrl, mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
+import createDiff from './create_diff';
 
 export const SERVICE_NAME = 'webide-file-sync';
 export const PROTOCOL = 'webfilesync.gitlab.com';
diff --git a/app/assets/javascripts/ide/lib/themes/index.js b/app/assets/javascripts/ide/lib/themes/index.js
index bb5be50576c..6a3feb9cab6 100644
--- a/app/assets/javascripts/ide/lib/themes/index.js
+++ b/app/assets/javascripts/ide/lib/themes/index.js
@@ -1,9 +1,9 @@
-import white from './white';
 import dark from './dark';
 import monokai from './monokai';
-import solarizedLight from './solarized_light';
-import solarizedDark from './solarized_dark';
 import none from './none';
+import solarizedDark from './solarized_dark';
+import solarizedLight from './solarized_light';
+import white from './white';
 
 export const themes = [
   {
diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js
index 2264d63c737..e98653aedc2 100644
--- a/app/assets/javascripts/ide/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -1,6 +1,6 @@
+import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
-import Api from '~/api';
 import getUserPermissions from '../queries/getUserPermissions.query.graphql';
 import { query } from './gql';
 
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index d62dfc35d15..bf94f9d31c8 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -1,19 +1,19 @@
-import Vue from 'vue';
 import { escape } from 'lodash';
-import { __, sprintf } from '~/locale';
-import { visitUrl } from '~/lib/utils/url_utility';
+import Vue from 'vue';
 import { deprecatedCreateFlash as flash } from '~/flash';
-import { performanceMarkAndMeasure } from '~/performance/utils';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { __, sprintf } from '~/locale';
 import {
   WEBIDE_MARK_FETCH_BRANCH_DATA_START,
   WEBIDE_MARK_FETCH_BRANCH_DATA_FINISH,
   WEBIDE_MEASURE_FETCH_BRANCH_DATA,
 } from '~/performance/constants';
-import * as types from './mutation_types';
-import { decorateFiles } from '../lib/files';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import { stageKeys, commitActionTypes } from '../constants';
-import service from '../services';
 import eventHub from '../eventhub';
+import { decorateFiles } from '../lib/files';
+import service from '../services';
+import * as types from './mutation_types';
 
 export const redirectToUrl = (self, url) => visitUrl(url);
 
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 42668dec63a..d1e40920ebc 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -1,16 +1,16 @@
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import { performanceMarkAndMeasure } from '~/performance/utils';
 import {
   WEBIDE_MARK_FETCH_FILE_DATA_START,
   WEBIDE_MARK_FETCH_FILE_DATA_FINISH,
   WEBIDE_MEASURE_FETCH_FILE_DATA,
 } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
+import { viewerTypes, stageKeys, commitActionTypes } from '../../constants';
 import eventHub from '../../eventhub';
 import service from '../../services';
 import * as types from '../mutation_types';
 import { setPageTitleForFile } from '../utils';
-import { viewerTypes, stageKeys, commitActionTypes } from '../../constants';
 
 export const closeFile = ({ commit, state, dispatch, getters }, file) => {
   const { path } = file;
@@ -120,10 +120,6 @@ export const getFileData = (
     });
 };
 
-export const setFileMrChange = ({ commit }, { file, mrChange }) => {
-  commit(types.SET_FILE_MERGE_REQUEST_CHANGE, { file, mrChange });
-};
-
 export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) => {
   const file = state.entries[path];
   const stagedFile = state.stagedFiles.find((f) => f.path === path);
diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js
index 8215cba7ccf..753f6b9cd47 100644
--- a/app/assets/javascripts/ide/stores/actions/merge_request.js
+++ b/app/assets/javascripts/ide/stores/actions/merge_request.js
@@ -1,8 +1,8 @@
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __ } from '~/locale';
+import { leftSidebarViews, PERMISSION_READ_MR, MAX_MR_FILES_AUTO_OPEN } from '../../constants';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { leftSidebarViews, PERMISSION_READ_MR } from '../../constants';
 
 export const getMergeRequestsForBranch = (
   { commit, state, getters },
@@ -147,70 +147,96 @@ export const getMergeRequestVersions = (
     }
   });
 
-export const openMergeRequest = (
-  { dispatch, state, getters },
-  { projectId, targetProjectId, mergeRequestId } = {},
-) =>
-  dispatch('getMergeRequestData', {
-    projectId,
-    targetProjectId,
-    mergeRequestId,
-  })
-    .then((mr) => {
-      dispatch('setCurrentBranchId', mr.source_branch);
-
-      return dispatch('getBranchData', {
-        projectId,
-        branchId: mr.source_branch,
-      }).then(() => {
-        const branch = getters.findBranch(projectId, mr.source_branch);
-
-        return dispatch('getFiles', {
-          projectId,
-          branchId: mr.source_branch,
-          ref: branch.commit.id,
+export const openMergeRequestChanges = async ({ dispatch, getters, state, commit }, changes) => {
+  const entryChanges = changes
+    .map((change) => ({ entry: state.entries[change.new_path], change }))
+    .filter((x) => x.entry);
+
+  const pathsToOpen = entryChanges
+    .slice(0, MAX_MR_FILES_AUTO_OPEN)
+    .map(({ change }) => change.new_path);
+
+  // If there are no changes with entries, do nothing.
+  if (!entryChanges.length) {
+    return;
+  }
+
+  dispatch('updateActivityBarView', leftSidebarViews.review.name);
+
+  entryChanges.forEach(({ change, entry }) => {
+    commit(types.SET_FILE_MERGE_REQUEST_CHANGE, { file: entry, mrChange: change });
+  });
+
+  // Open paths in order as they appear in MR changes
+  pathsToOpen.forEach((path) => {
+    commit(types.TOGGLE_FILE_OPEN, path);
+  });
+
+  // Activate first path.
+  // We don't `getFileData` here since the editor component kicks that off. Otherwise, we'd fetch twice.
+  const [firstPath, ...remainingPaths] = pathsToOpen;
+  await dispatch('router/push', getters.getUrlForPath(firstPath));
+  await dispatch('setFileActive', firstPath);
+
+  // Lastly, eagerly fetch the remaining paths for improved user experience.
+  await Promise.all(
+    remainingPaths.map(async (path) => {
+      try {
+        await dispatch('getFileData', {
+          path,
+          makeFileActive: false,
         });
-      });
-    })
-    .then(() =>
-      dispatch('getMergeRequestVersions', {
-        projectId,
-        targetProjectId,
-        mergeRequestId,
-      }),
-    )
-    .then(() =>
-      dispatch('getMergeRequestChanges', {
-        projectId,
-        targetProjectId,
-        mergeRequestId,
-      }),
-    )
-    .then((mrChanges) => {
-      if (mrChanges.changes.length) {
-        dispatch('updateActivityBarView', leftSidebarViews.review.name);
+        await dispatch('getRawFileData', { path });
+      } catch (e) {
+        // If one of the file fetches fails, we dont want to blow up the rest of them.
+        // eslint-disable-next-line no-console
+        console.error('[gitlab] An unexpected error occurred fetching MR file data', e);
       }
+    }),
+  );
+};
 
-      mrChanges.changes.forEach((change, ind) => {
-        const changeTreeEntry = state.entries[change.new_path];
+export const openMergeRequest = async (
+  { dispatch, getters },
+  { projectId, targetProjectId, mergeRequestId } = {},
+) => {
+  try {
+    const mr = await dispatch('getMergeRequestData', {
+      projectId,
+      targetProjectId,
+      mergeRequestId,
+    });
 
-        if (changeTreeEntry) {
-          dispatch('setFileMrChange', {
-            file: changeTreeEntry,
-            mrChange: change,
-          });
+    dispatch('setCurrentBranchId', mr.source_branch);
 
-          if (ind < 10) {
-            dispatch('getFileData', {
-              path: change.new_path,
-              makeFileActive: ind === 0,
-              openFile: true,
-            });
-          }
-        }
-      });
-    })
-    .catch((e) => {
-      flash(__('Error while loading the merge request. Please try again.'));
-      throw e;
+    await dispatch('getBranchData', {
+      projectId,
+      branchId: mr.source_branch,
+    });
+
+    const branch = getters.findBranch(projectId, mr.source_branch);
+
+    await dispatch('getFiles', {
+      projectId,
+      branchId: mr.source_branch,
+      ref: branch.commit.id,
     });
+
+    await dispatch('getMergeRequestVersions', {
+      projectId,
+      targetProjectId,
+      mergeRequestId,
+    });
+
+    const { changes } = await dispatch('getMergeRequestChanges', {
+      projectId,
+      targetProjectId,
+      mergeRequestId,
+    });
+
+    await dispatch('openMergeRequestChanges', changes);
+  } catch (e) {
+    flash(__('Error while loading the merge request. Please try again.'));
+    throw e;
+  }
+};
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 27f6848f1d6..120a577d44a 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -1,8 +1,8 @@
 import { escape } from 'lodash';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { __, sprintf } from '~/locale';
-import service from '../../services';
 import api from '../../../api';
+import service from '../../services';
 import * as types from '../mutation_types';
 
 export const getProjectData = ({ commit, state }, { namespace, projectId, force = false } = {}) =>
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 150dfcb2726..f46d3cbe946 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -1,14 +1,14 @@
 import { defer } from 'lodash';
-import { performanceMarkAndMeasure } from '~/performance/utils';
 import {
   WEBIDE_MARK_FETCH_FILES_FINISH,
   WEBIDE_MEASURE_FETCH_FILES,
   WEBIDE_MARK_FETCH_FILES_START,
 } from '~/performance/constants';
+import { performanceMarkAndMeasure } from '~/performance/utils';
 import { __ } from '../../../locale';
+import { decorateFiles } from '../../lib/files';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { decorateFiles } from '../../lib/files';
 
 export const toggleTreeOpen = ({ commit }, path) => {
   commit(types.TOGGLE_TREE_OPEN, path);
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 59e8d37a92a..9b93fc74f76 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,13 +1,14 @@
-import { getChangesCountForFiles, filePathMatches } from './utils';
+import Api from '~/api';
+import { addNumericSuffix } from '~/ide/utils';
 import {
   leftSidebarViews,
   packageJsonPath,
+  DEFAULT_PERMISSIONS,
   PERMISSION_READ_MR,
   PERMISSION_CREATE_MR,
   PERMISSION_PUSH_CODE,
 } from '../constants';
-import { addNumericSuffix } from '~/ide/utils';
-import Api from '~/api';
+import { getChangesCountForFiles, filePathMatches } from './utils';
 
 export const activeFile = (state) => state.openFiles.find((file) => file.active) || null;
 
@@ -150,7 +151,7 @@ export const getDiffInfo = (state, getters) => (path) => {
 };
 
 export const findProjectPermissions = (state, getters) => (projectId) =>
-  getters.findProject(projectId)?.userPermissions || {};
+  getters.findProject(projectId)?.userPermissions || DEFAULT_PERMISSIONS;
 
 export const canReadMergeRequests = (state, getters) =>
   Boolean(getters.findProjectPermissions(state.currentProjectId)[PERMISSION_READ_MR]);
diff --git a/app/assets/javascripts/ide/stores/index.js b/app/assets/javascripts/ide/stores/index.js
index d543209716a..b660ff178a2 100644
--- a/app/assets/javascripts/ide/stores/index.js
+++ b/app/assets/javascripts/ide/stores/index.js
@@ -1,19 +1,19 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import state from './state';
 import * as actions from './actions';
 import * as getters from './getters';
-import mutations from './mutations';
-import commitModule from './modules/commit';
-import pipelines from './modules/pipelines';
-import mergeRequests from './modules/merge_requests';
 import branches from './modules/branches';
-import fileTemplates from './modules/file_templates';
-import paneModule from './modules/pane';
 import clientsideModule from './modules/clientside';
-import routerModule from './modules/router';
+import commitModule from './modules/commit';
 import editorModule from './modules/editor';
 import { setupFileEditorsSync } from './modules/editor/setup';
+import fileTemplates from './modules/file_templates';
+import mergeRequests from './modules/merge_requests';
+import paneModule from './modules/pane';
+import pipelines from './modules/pipelines';
+import routerModule from './modules/router';
+import mutations from './mutations';
+import state from './state';
 
 Vue.use(Vuex);
 
diff --git a/app/assets/javascripts/ide/stores/modules/branches/actions.js b/app/assets/javascripts/ide/stores/modules/branches/actions.js
index 74a4cd9848b..57a63749d7c 100644
--- a/app/assets/javascripts/ide/stores/modules/branches/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/branches/actions.js
@@ -1,5 +1,5 @@
-import { __ } from '~/locale';
 import Api from '~/api';
+import { __ } from '~/locale';
 import * as types from './mutation_types';
 
 export const requestBranches = ({ commit }) => commit(types.REQUEST_BRANCHES);
diff --git a/app/assets/javascripts/ide/stores/modules/branches/index.js b/app/assets/javascripts/ide/stores/modules/branches/index.js
index deda95cd0c9..4b7d6d2998b 100644
--- a/app/assets/javascripts/ide/stores/modules/branches/index.js
+++ b/app/assets/javascripts/ide/stores/modules/branches/index.js
@@ -1,6 +1,6 @@
-import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index 29b9a8a9521..29555799074 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -1,14 +1,14 @@
-import { sprintf, __ } from '~/locale';
 import { deprecatedCreateFlash as flash } from '~/flash';
-import * as rootTypes from '../../mutation_types';
-import { createCommitPayload, createNewMergeRequestUrl } from '../../utils';
-import service from '../../../services';
-import * as types from './mutation_types';
-import consts from './constants';
+import { addNumericSuffix } from '~/ide/utils';
+import { sprintf, __ } from '~/locale';
 import { leftSidebarViews } from '../../../constants';
 import eventHub from '../../../eventhub';
 import { parseCommitError } from '../../../lib/errors';
-import { addNumericSuffix } from '~/ide/utils';
+import service from '../../../services';
+import * as rootTypes from '../../mutation_types';
+import { createCommitPayload, createNewMergeRequestUrl } from '../../utils';
+import { COMMIT_TO_CURRENT_BRANCH } from './constants';
+import * as types from './mutation_types';
 
 export const updateCommitMessage = ({ commit }, message) => {
   commit(types.UPDATE_COMMIT_MESSAGE, message);
@@ -112,7 +112,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
   // Pull commit options out because they could change
   // During some of the pre and post commit processing
   const { shouldCreateMR, shouldHideNewMrOption, isCreatingNewBranch, branchName } = getters;
-  const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
+  const newBranch = state.commitAction !== COMMIT_TO_CURRENT_BRANCH;
   const stageFilesPromise = rootState.stagedFiles.length
     ? Promise.resolve()
     : dispatch('stageAllChanges', null, { root: true });
@@ -206,7 +206,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
             dispatch('updateViewer', 'editor', { root: true });
           }
         })
-        .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH))
+        .then(() => dispatch('updateCommitAction', COMMIT_TO_CURRENT_BRANCH))
         .then(() => {
           if (newBranch) {
             const path = rootGetters.activeFile ? rootGetters.activeFile.path : '';
diff --git a/app/assets/javascripts/ide/stores/modules/commit/constants.js b/app/assets/javascripts/ide/stores/modules/commit/constants.js
index c6c3701effe..9f4299e5537 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/constants.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/constants.js
@@ -1,7 +1,2 @@
-const COMMIT_TO_CURRENT_BRANCH = '1';
-const COMMIT_TO_NEW_BRANCH = '2';
-
-export default {
-  COMMIT_TO_CURRENT_BRANCH,
-  COMMIT_TO_NEW_BRANCH,
-};
+export const COMMIT_TO_CURRENT_BRANCH = '1';
+export const COMMIT_TO_NEW_BRANCH = '2';
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/ide/stores/modules/commit/getters.js
index 2301cf23f9f..f5e367e16f5 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/getters.js
@@ -1,5 +1,5 @@
 import { sprintf, n__, __ } from '../../../../locale';
-import consts from './constants';
+import { COMMIT_TO_NEW_BRANCH } from './constants';
 
 const BRANCH_SUFFIX_COUNT = 5;
 const createTranslatedTextForFiles = (files, text) => {
@@ -48,7 +48,7 @@ export const preBuiltCommitMessage = (state, _, rootState) => {
     .join('\n');
 };
 
-export const isCreatingNewBranch = (state) => state.commitAction === consts.COMMIT_TO_NEW_BRANCH;
+export const isCreatingNewBranch = (state) => state.commitAction === COMMIT_TO_NEW_BRANCH;
 
 export const shouldHideNewMrOption = (_state, getters, _rootState, rootGetters) =>
   !getters.isCreatingNewBranch &&
diff --git a/app/assets/javascripts/ide/stores/modules/commit/index.js b/app/assets/javascripts/ide/stores/modules/commit/index.js
index 5cec73bde2e..c5a39249348 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/index.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/index.js
@@ -1,7 +1,7 @@
-import state from './state';
-import mutations from './mutations';
 import * as actions from './actions';
 import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/editor/index.js b/app/assets/javascripts/ide/stores/modules/editor/index.js
index 8a7437b427d..b601f0e79d4 100644
--- a/app/assets/javascripts/ide/stores/modules/editor/index.js
+++ b/app/assets/javascripts/ide/stores/modules/editor/index.js
@@ -1,7 +1,7 @@
 import * as actions from './actions';
 import * as getters from './getters';
-import state from './state';
 import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/editor/setup.js b/app/assets/javascripts/ide/stores/modules/editor/setup.js
index 9f3163aa6f5..5899706e38a 100644
--- a/app/assets/javascripts/ide/stores/modules/editor/setup.js
+++ b/app/assets/javascripts/ide/stores/modules/editor/setup.js
@@ -1,5 +1,5 @@
-import eventHub from '~/ide/eventhub';
 import { commitActionTypes } from '~/ide/constants';
+import eventHub from '~/ide/eventhub';
 
 const removeUnusedFileEditors = (store) => {
   Object.keys(store.state.editor.fileEditors)
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
index 6800f824da0..bc96ec267b5 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
@@ -1,8 +1,8 @@
 import Api from '~/api';
-import { __ } from '~/locale';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
-import * as types from './mutation_types';
+import { __ } from '~/locale';
 import eventHub from '../../../eventhub';
+import * as types from './mutation_types';
 
 export const requestTemplateTypes = ({ commit }) => commit(types.REQUEST_TEMPLATE_TYPES);
 export const receiveTemplateTypesError = ({ commit, dispatch }) => {
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/getters.js b/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
index 0613fe9b12b..9708e5e588c 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
@@ -1,5 +1,5 @@
-import { leftSidebarViews } from '../../../constants';
 import { __ } from '~/locale';
+import { leftSidebarViews } from '../../../constants';
 
 export const templateTypes = () => [
   {
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/index.js b/app/assets/javascripts/ide/stores/modules/file_templates/index.js
index 383ff5db392..5f850b8b86a 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/index.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/index.js
@@ -1,7 +1,7 @@
-import createState from './state';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
+import createState from './state';
 
 export default () => ({
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
index 299f7a883d2..8446b93d14a 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
@@ -1,5 +1,5 @@
-import { __ } from '../../../../locale';
 import Api from '../../../../api';
+import { __ } from '../../../../locale';
 import { scopes } from './constants';
 import * as types from './mutation_types';
 
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/index.js b/app/assets/javascripts/ide/stores/modules/merge_requests/index.js
index 04e7e0f08f1..d858a855d9e 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/index.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/index.js
@@ -1,6 +1,6 @@
-import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index 2c2034d76d0..60561292c9d 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -1,10 +1,10 @@
-import Visibility from 'visibilityjs';
 import axios from 'axios';
+import Visibility from 'visibilityjs';
 import httpStatus from '../../../../lib/utils/http_status';
-import { __ } from '../../../../locale';
 import Poll from '../../../../lib/utils/poll';
-import service from '../../../services';
+import { __ } from '../../../../locale';
 import { rightSidebarViews } from '../../../constants';
+import service from '../../../services';
 import * as types from './mutation_types';
 
 let eTagPoll;
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/index.js b/app/assets/javascripts/ide/stores/modules/pipelines/index.js
index b44c3141b81..b48f63887ca 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/index.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/index.js
@@ -1,7 +1,7 @@
-import state from './state';
 import * as actions from './actions';
-import mutations from './mutations';
 import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/router/index.js b/app/assets/javascripts/ide/stores/modules/router/index.js
index 68c81bb4509..1d5af1d4fe5 100644
--- a/app/assets/javascripts/ide/stores/modules/router/index.js
+++ b/app/assets/javascripts/ide/stores/modules/router/index.js
@@ -1,6 +1,6 @@
-import state from './state';
-import mutations from './mutations';
 import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js
index b2c1ddd877c..91645a34a3d 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/checks.js
@@ -1,9 +1,9 @@
 import Api from '~/api';
 import httpStatus from '~/lib/utils/http_status';
-import * as types from '../mutation_types';
-import * as messages from '../messages';
-import { CHECK_CONFIG, CHECK_RUNNERS, RETRY_RUNNERS_INTERVAL } from '../constants';
 import * as terminalService from '../../../../services/terminals';
+import { CHECK_CONFIG, CHECK_RUNNERS, RETRY_RUNNERS_INTERVAL } from '../constants';
+import * as messages from '../messages';
+import * as types from '../mutation_types';
 
 export const requestConfigCheck = ({ commit }) => {
   commit(types.REQUEST_CHECK, CHECK_CONFIG);
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js
index aa460859b4c..6c9be6d10c9 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js
@@ -1,10 +1,10 @@
+import { deprecatedCreateFlash as flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
-import { deprecatedCreateFlash as flash } from '~/flash';
-import * as types from '../mutation_types';
-import * as messages from '../messages';
 import * as terminalService from '../../../../services/terminals';
 import { STARTING, STOPPING, STOPPED } from '../constants';
+import * as messages from '../messages';
+import * as types from '../mutation_types';
 
 export const requestStartSession = ({ commit }) => {
   commit(types.SET_SESSION_STATUS, STARTING);
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js
index 3ab1817e662..da10894c2c6 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js
@@ -1,7 +1,7 @@
-import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
-import * as types from '../mutation_types';
+import axios from '~/lib/utils/axios_utils';
 import * as messages from '../messages';
+import * as types from '../mutation_types';
 import { isEndingStatus } from '../utils';
 
 export const pollSessionStatus = ({ state, dispatch, commit }) => {
diff --git a/app/assets/javascripts/ide/stores/modules/terminal/messages.js b/app/assets/javascripts/ide/stores/modules/terminal/messages.js
index 967ba80cd2c..ec05ca84754 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal/messages.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal/messages.js
@@ -1,6 +1,6 @@
 import { escape } from 'lodash';
-import { __, sprintf } from '~/locale';
 import httpStatus from '~/lib/utils/http_status';
+import { __, sprintf } from '~/locale';
 
 export const UNEXPECTED_ERROR_CONFIG = __(
   'An unexpected error occurred while checking the project environment.',
diff --git a/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js b/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js
index 006800f58c2..a2cb0666a99 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal_sync/actions.js
@@ -1,5 +1,5 @@
-import * as types from './mutation_types';
 import mirror, { canConnect } from '../../../lib/mirror';
+import * as types from './mutation_types';
 
 export const upload = ({ rootState, commit }) => {
   commit(types.START_LOADING);
diff --git a/app/assets/javascripts/ide/stores/modules/terminal_sync/index.js b/app/assets/javascripts/ide/stores/modules/terminal_sync/index.js
index 795c2fad724..a0685293839 100644
--- a/app/assets/javascripts/ide/stores/modules/terminal_sync/index.js
+++ b/app/assets/javascripts/ide/stores/modules/terminal_sync/index.js
@@ -1,6 +1,6 @@
-import state from './state';
 import * as actions from './actions';
 import mutations from './mutations';
+import state from './state';
 
 export default () => ({
   namespaced: true,
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 6ed6798a5b6..576f861a090 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -1,10 +1,10 @@
 import Vue from 'vue';
 import * as types from './mutation_types';
-import projectMutations from './mutations/project';
-import mergeRequestMutation from './mutations/merge_request';
+import branchMutations from './mutations/branch';
 import fileMutations from './mutations/file';
+import mergeRequestMutation from './mutations/merge_request';
+import projectMutations from './mutations/project';
 import treeMutations from './mutations/tree';
-import branchMutations from './mutations/branch';
 import {
   sortTree,
   swapInParentTreeWithSorting,
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 4446971d5d6..fa9830a7469 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -1,7 +1,7 @@
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { diffModes } from '../../constants';
 import * as types from '../mutation_types';
 import { sortTree } from '../utils';
-import { diffModes } from '../../constants';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default {
   [types.SET_FILE_ACTIVE](state, { path, active }) {
diff --git a/app/assets/javascripts/ide/stores/plugins/terminal_sync.js b/app/assets/javascripts/ide/stores/plugins/terminal_sync.js
index d925a5f7567..944a034fe97 100644
--- a/app/assets/javascripts/ide/stores/plugins/terminal_sync.js
+++ b/app/assets/javascripts/ide/stores/plugins/terminal_sync.js
@@ -1,8 +1,8 @@
 import { debounce } from 'lodash';
-import eventHub from '~/ide/eventhub';
 import { commitActionTypes } from '~/ide/constants';
-import terminalSyncModule from '../modules/terminal_sync';
+import eventHub from '~/ide/eventhub';
 import { isEndingStatus, isRunningStatus } from '../modules/terminal/utils';
+import terminalSyncModule from '../modules/terminal_sync';
 
 const UPLOAD_DEBOUNCE = 200;
 
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 04eacf271b8..4019703b296 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -1,10 +1,10 @@
-import { commitActionTypes } from '../constants';
 import {
   relativePathToAbsolute,
   isAbsolute,
   isRootRelative,
   isBlobUrl,
 } from '~/lib/utils/url_utility';
+import { commitActionTypes } from '../constants';
 
 export const dataStructure = () => ({
   id: '',
diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js
index 8eb2d17b876..63c53737119 100644
--- a/app/assets/javascripts/ide/utils.js
+++ b/app/assets/javascripts/ide/utils.js
@@ -1,7 +1,7 @@
-import { languages } from 'monaco-editor';
 import { flatten, isString } from 'lodash';
-import { SIDE_LEFT, SIDE_RIGHT } from './constants';
+import { languages } from 'monaco-editor';
 import { performanceMarkAndMeasure } from '~/performance/utils';
+import { SIDE_LEFT, SIDE_RIGHT } from './constants';
 
 const toLowerCase = (x) => x.toLowerCase();