Fixes more eslint rules

app/assets/javascripts/environments/components/environment_actions.vue

@@ -69,7 +69,8 @@
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
-        />
+        >
+        </i>
         <loading-icon v-if="isLoading" />
       </span>
     </button>

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -9,6 +9,10 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
+    components: {
+      loadingIcon,
+    },
+
     props: {
       retryUrl: {
         type: String,
@@ -21,10 +25,6 @@
       },
     },
 
-    components: {
-      loadingIcon,
-    },
-
     data() {
       return {
         isLoading: false,

app/assets/javascripts/environments/components/environments_table.vue

@@ -31,6 +31,15 @@ export default {
     },
   },
 
+  computed: {
+    shouldRenderFolderContent() {
+      return this.model.isFolder &&
+        this.model.isOpen &&
+        this.model.children &&
+        this.model.children.length > 0;
+    },
+  },
+
   methods: {
     folderUrl(model) {
       return `${window.location.pathname}/folders/${model.folderName}`;
@@ -80,17 +89,21 @@ export default {
     </div>
     <template
       v-for="(model, i) in environments"
-      :key="i"
       :model="model">
       <div
         is="environment-item"
         :model="model"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
+        :key="i"
       />
 
-      <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-        <div v-if="model.isLoadingFolderContent">
+      <template
+        v-if="shouldRenderFolderContent"
+      >
+        <div
+          v-if="model.isLoadingFolderContent"
+          :key="i">
           <loading-icon size="2" />
         </div>
 
@@ -101,9 +114,10 @@ export default {
             :model="children"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
+            :key="i"
           />
 
-          <div>
+          <div :key="i">
             <div class="text-center prepend-top-10">
               <a
                 :href="folderUrl(model)"

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -44,7 +44,7 @@
     >
 
       <h4 class="js-folder-name environments-folder-name">
-        {{ s__("Environments|Environments") }} / <b>{{folderName}}</b>
+        {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
       </h4>
 
       <tabs

app/assets/javascripts/groups/components/group_item.vue

@@ -86,7 +86,8 @@
       />
       <item-stats :item="group" />
       <div
-        class="folder-toggle-wrap">
+        class="folder-toggle-wrap"
+      >
         <item-caret :is-group-open="group.isOpen" />
         <item-type-icon
           :item-type="group.type"
@@ -115,7 +116,8 @@
         </a>
       </div>
       <div
-        class="title namespace-title">
+        class="title namespace-title"
+      >
         <a
           v-tooltip
           :href="group.relativePath"

app/assets/javascripts/groups/components/groups.vue

 <script>
-import tablePagination from '~/vue_shared/components/table_pagination.vue';
-import eventHub from '../event_hub';
-import { getParameterByName } from '../../lib/utils/common_utils';
+  import tablePagination from '~/vue_shared/components/table_pagination.vue';
+  import eventHub from '../event_hub';
+  import { getParameterByName } from '../../lib/utils/common_utils';
 
-export default {
+  export default {
     components: {
       tablePagination,
     },
@@ -33,15 +33,16 @@ export default {
         eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
       },
     },
-};
+  };
 </script>
 
 <template>
   <div class="groups-list-tree-container">
     <div
       v-if="searchEmpty"
-      class="has-no-search-results">
-      {{searchEmptyMessage}}
+      class="has-no-search-results"
+    >
+      {{ searchEmptyMessage }}
     </div>
     <group-folder
       v-if="!searchEmpty"
@@ -50,7 +51,7 @@ export default {
     <table-pagination
       v-if="!searchEmpty"
       :change="change"
-      :pageInfo="pageInfo"
+      :page-info="pageInfo"
     />
   </div>
 </template>

app/assets/javascripts/groups/components/item_caret.vue

@@ -2,6 +2,9 @@
 import icon from '~/vue_shared/components/icon.vue';
 
 export default {
+  components: {
+    icon,
+  },
   props: {
     isGroupOpen: {
       type: Boolean,
@@ -9,9 +12,6 @@ export default {
       default: false,
     },
   },
-  components: {
-    icon,
-  },
   computed: {
     iconClass() {
       return this.isGroupOpen ? 'angle-down' : 'angle-right';

app/assets/javascripts/groups/components/item_stats.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
-import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import {
+  import icon from '~/vue_shared/components/icon.vue';
+  import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+  import {
     ITEM_TYPE,
     VISIBILITY_TYPE_ICON,
     GROUP_VISIBILITY_TYPE,
-  PROJECT_VISIBILITY_TYPE
-} from '../constants';
-import itemStatsValue from './item_stats_value.vue';
+    PROJECT_VISIBILITY_TYPE,
+  } from '../constants';
+  import itemStatsValue from './item_stats_value.vue';
 
-export default {
+  export default {
     components: {
       icon,
       timeAgoTooltip,
@@ -38,7 +38,7 @@ export default {
         return this.item.type === ITEM_TYPE.GROUP;
       },
     },
-};
+  };
 </script>
 
 <template>

app/assets/javascripts/groups/components/item_stats_value.vue

 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import icon from '~/vue_shared/components/icon.vue';
 
-export default {
+  export default {
+    components: {
+      icon,
+    },
+    directives: {
+      tooltip,
+    },
     props: {
       title: {
         type: String,
@@ -35,18 +41,12 @@ export default {
         default: '',
       },
     },
-  directives: {
-    tooltip,
-  },
-  components: {
-    icon,
-  },
     computed: {
       isValuePresent() {
         return this.value !== '';
       },
     },
-};
+  };
 </script>
 
 <template>
@@ -57,12 +57,12 @@ export default {
     :class="cssClass"
     :title="title"
   >
-    <icon :name="iconName"/>
+    <icon :name="iconName" />
     <span
       v-if="isValuePresent"
       class="stat-value"
     >
-      {{value}}
+      {{ value }}
     </span>
   </span>
 </template>

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -32,7 +32,6 @@
         this.$emit('toggleCollapsed');
       },
     },
-
   };
 </script>
 

app/assets/javascripts/ide/components/ide.vue

@@ -9,6 +9,15 @@ import repoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';
 
 export default {
+  components: {
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
+    repoEditor,
+    repoPreview,
+  },
   computed: {
     ...mapState([
       'currentBlobView',
@@ -19,15 +28,6 @@ export default {
       'activeFile',
     ]),
   },
-  components: {
-    ideSidebar,
-    ideContextbar,
-    repoTabs,
-    repoFileButtons,
-    ideStatusBar,
-    repoEditor,
-    repoPreview,
-  },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
     window.onbeforeunload = (e) => {
@@ -51,23 +51,26 @@ export default {
       class="multi-file-edit-pane"
     >
       <template
-        v-if="activeFile">
-        <repo-tabs/>
+        v-if="activeFile"
+      >
+        <repo-tabs />
         <component
           class="multi-file-edit-pane-content"
           :is="currentBlobView"
         />
-        <repo-file-buttons/>
+        <repo-file-buttons />
         <ide-status-bar
-          :file="selectedFile"/>
+          :file="selectedFile"
+        />
       </template>
       <template
-        v-else>
+        v-else
+      >
         <div class="ide-empty-state">
           <h2 class="clgray">Welcome to the GitLab IDE</h2>
         </div>
       </template>
     </div>
-    <ide-contextbar/>
+    <ide-contextbar />
   </div>
 </template>

app/assets/javascripts/ide/components/ide_context_bar.vue

 <script>
-import { mapGetters, mapState, mapActions } from 'vuex';
-import repoCommitSection from './repo_commit_section.vue';
-import icon from '../../vue_shared/components/icon.vue';
-import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import repoCommitSection from './repo_commit_section.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+  import panelResizer from '../../vue_shared/components/panel_resizer.vue';
 
-export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
+  export default {
     components: {
       repoCommitSection,
       icon,
       panelResizer,
     },
+    data() {
+      return {
+        width: 290,
+      };
+    },
     computed: {
       ...mapState([
         'rightPanelCollapsed',
@@ -53,7 +53,7 @@ export default {
         this.setResizingStatus(false);
       },
     },
-};
+  };
 </script>
 
 <template>
@@ -64,8 +64,7 @@ export default {
     }"
     :style="panelStyle"
   >
-    <div 
-      class="multi-file-commit-panel-section">
+    <div class="multi-file-commit-panel-section">
       <header
         class="multi-file-commit-panel-header"
         :class="{
@@ -74,7 +73,8 @@ export default {
       >
         <div
           class="multi-file-commit-panel-header-title"
-          v-if="!rightPanelCollapsed">
+          v-if="!rightPanelCollapsed"
+        >
           <icon
             name="list-bulleted"
             :size="18"
@@ -92,8 +92,7 @@ export default {
           />
         </button>
       </header>
-      <repo-commit-section 
-        class=""/>
+      <repo-commit-section />
     </div>
     <panel-resizer
       :size.sync="width"
@@ -103,6 +102,7 @@ export default {
       :max-size="maxSize"
       @resize-start="resizingStarted"
       @resize-end="resizingEnded"
-      side="left"/>
+      side="left"
+    />
   </div>
 </template>

app/assets/javascripts/ide/components/ide_project_branches_tree.vue

@@ -28,20 +28,20 @@ export default {
       <div class="branch-header-title">
         <icon
           name="branch"
-          :size="12">
-        </icon>
+          :size="12"
+        />
         {{ branch.name }}
       </div>
       <div class="branch-header-btns">
         <new-dropdown
           :project-id="projectId"
           :branch="branch.name"
-          path=""/>
+          path=""
+        />
       </div>
     </div>
     <div>
-      <repo-tree
-        :treeId="branch.treeId"/>
+      <repo-tree :tree-id="branch.treeId" />
     </div>
   </div>
 </template>

app/assets/javascripts/ide/components/ide_project_tree.vue

@@ -21,7 +21,8 @@ export default {
     <div class="context-header">
       <a
         :title="project.name"
-        :href="project.web_url">
+        :href="project.web_url"
+      >
         <div class="avatar-container s40 project-avatar">
           <project-avatar-image
             class="avatar-container project-avatar"
@@ -38,10 +39,11 @@ export default {
     </div>
     <div class="multi-file-commit-panel-inner-scroll">
       <branches-tree
-        v-for="(branch, index) in project.branches"
+        v-for="branch in project.branches"
         :key="branch.name"
         :project-id="project.path_with_namespace"
-        :branch="branch"/>
+        :branch="branch"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/ide/components/ide_repo_tree.vue

 <script>
-import { mapState } from 'vuex';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
-import { treeList } from '../stores/utils';
+  import { mapState } from 'vuex';
+  import RepoPreviousDirectory from './repo_prev_directory.vue';
+  import RepoFile from './repo_file.vue';
+  import RepoLoadingFile from './repo_loading_file.vue';
+  import { treeList } from '../stores/utils';
 
-export default {
+  export default {
     components: {
       'repo-previous-directory': RepoPreviousDirectory,
       'repo-file': RepoFile,
@@ -37,23 +37,25 @@ export default {
         return this.loading;
       },
     },
-};
+  };
 </script>
 
 <template>
-<div>
+  <div>
     <div class="ide-file-list">
       <table class="table">
         <tbody
-        v-if="treeId">
+          v-if="treeId"
+        >
           <repo-previous-directory
             v-if="hasPreviousDirectory"
           />
+          <template v-if="showLoading">
             <repo-loading-file
-          v-if="showLoading"
               v-for="n in 5"
               :key="n"
             />
+          </template>
           <repo-file
             v-for="file in fetchedList"
             :key="file.key"
@@ -62,5 +64,5 @@ export default {
         </tbody>
       </table>
     </div>
-</div>
+  </div>
 </template>

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -5,16 +5,16 @@ import icon from '../../vue_shared/components/icon.vue';
 import panelResizer from '../../vue_shared/components/panel_resizer.vue';
 
 export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
   components: {
     projectTree,
     icon,
     panelResizer,
   },
+  data() {
+    return {
+      width: 290,
+    };
+  },
   computed: {
     ...mapState([
       'projects',
@@ -64,9 +64,10 @@ export default {
   >
     <div class="multi-file-commit-panel-inner">
       <project-tree
-        v-for="(project, index) in projects"
+        v-for="project in projects"
         :key="project.id"
-        :project="project"/>
+        :project="project"
+      />
     </div>
     <button
       type="button"
@@ -80,7 +81,9 @@ export default {
       <span
         v-if="!leftPanelCollapsed"
         class="collapse-text"
-      >Collapse sidebar</span>
+      >
+        Collapse sidebar
+      </span>
     </button>
     <panel-resizer
       :size.sync="width"
@@ -90,6 +93,7 @@ export default {
       :max-size="maxSize"
       @resize-start="resizingStarted"
       @resize-end="resizingEnded"
-      side="right"/>
+      side="right"
+    />
   </div>
 </template>

app/assets/javascripts/ide/components/ide_status_bar.vue

 <script>
-import { mapState } from 'vuex';
-import icon from '../../vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
-import timeAgoMixin from '../../vue_shared/mixins/timeago';
+  import { mapState } from 'vuex';
+  import icon from '../../vue_shared/components/icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import timeAgoMixin from '../../vue_shared/mixins/timeago';
 
-export default {
-  props: {
-    file: {
-      type: Object,
-      required: true,
-    },
-  },
+  export default {
     components: {
       icon,
     },
@@ -20,51 +14,52 @@ export default {
     mixins: [
       timeAgoMixin,
     ],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
     computed: {
       ...mapState([
         'selectedFile',
       ]),
     },
-};
+  };
 </script>
 
 <template>
-  <div
-    class="ide-status-bar">
+  <div class="ide-status-bar">
     <div>
       <icon
         name="branch"
-        :size="12">
-      </icon>
+        :size="12"
+      />
       {{ selectedFile.branchId }}
     </div>
     <div>
-      <div
-        v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
+      <div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
         Last commit:
         <a
           v-tooltip
           :title="selectedFile.lastCommit.message"
-          :href="selectedFile.lastCommit.url">
+          :href="selectedFile.lastCommit.url"
+        >
           {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by
           {{ selectedFile.lastCommit.author }}
         </a>
       </div>
     </div>
-    <div
-      class="text-right">
+    <div class="text-right">
       {{ selectedFile.name }}
     </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
       {{ selectedFile.eol }}
     </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
       {{ selectedFile.fileLanguage }}
     </div>
   </div>

app/assets/javascripts/ide/components/new_branch_form.vue

@@ -21,6 +21,13 @@
         return this.loading || this.branchName === '';
       },
     },
+    created() {
+      // Dropdown is outside of Vue instance & is controlled by Bootstrap
+      this.$dropdown = $('.git-revision-dropdown');
+
+      // text element is outside Vue app
+      this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
+    },
     methods: {
       ...mapActions([
         'createNewBranch',
@@ -55,13 +62,6 @@
           }));
       },
     },
-    created() {
-      // Dropdown is outside of Vue instance & is controlled by Bootstrap
-      this.$dropdown = $('.git-revision-dropdown');
-
-      // text element is outside Vue app
-      this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
-    },
   };
 </script>
 

app/assets/javascripts/ide/components/new_dropdown/index.vue

@@ -4,6 +4,11 @@
   import icon from '../../../vue_shared/components/icon.vue';
 
   export default {
+    components: {
+      icon,
+      newModal,
+      upload,
+    },
     props: {
       branch: {
         type: String,
@@ -18,11 +23,6 @@
         default: null,
       },
     },
-    components: {
-      icon,
-      newModal,
-      upload,
-    },
     data() {
       return {
         openModal: false,

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -4,6 +4,9 @@
   import modal from '../../../vue_shared/components/modal.vue';
 
   export default {
+    components: {
+      modal,
+    },
     props: {
       branchId: {
         type: String,
@@ -27,28 +30,6 @@
         entryName: this.path !== '' ? `${this.path}/` : '',
       };
     },
-    components: {
-      modal,
-    },
-    methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
-      createEntryInStore() {
-        this.createTempEntry({
-          projectId: this.currentProjectId,
-          branchId: this.branchId,
-          parent: this.parent,
-          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
-          type: this.type,
-        });
-
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit('hide');
-      },
-    },
     computed: {
       ...mapState([
         'currentProjectId',
@@ -78,6 +59,25 @@
     mounted() {
       this.$refs.fieldName.focus();
     },
+    methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
+      createEntryInStore() {
+        this.createTempEntry({
+          projectId: this.currentProjectId,
+          branchId: this.branchId,
+          parent: this.parent,
+          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
+          type: this.type,
+        });
+
+        this.hideModal();
+      },
+      hideModal() {
+        this.$emit('hide');
+      },
+    },
   };
 </script>
 

app/assets/javascripts/ide/components/new_dropdown/upload.vue

@@ -18,6 +18,12 @@
         'currentProjectId',
       ]),
     },
+    mounted() {
+      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    },
+    beforeDestroy() {
+      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    },
     methods: {
       ...mapActions([
         'createTempEntry',
@@ -59,12 +65,6 @@
         this.$refs.fileUpload.click();
       },
     },
-    mounted() {
-      this.$refs.fileUpload.addEventListener('change', this.openFile);
-    },
-    beforeDestroy() {
-      this.$refs.fileUpload.removeEventListener('change', this.openFile);
-    },
   };
 </script>
 

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <template>
-<div class="multi-file-commit-panel-section">
+  <div class="multi-file-commit-panel-section">
     <modal
       v-if="showNewBranchModal"
       :primary-button-label="__('Create new branch')"
@@ -169,5 +169,5 @@ export default {
         </div>
       </div>
     </form>
-</div>
+  </div>
 </template>

app/assets/javascripts/ide/components/repo_edit_button.vue

@@ -40,7 +40,7 @@ export default {
         aria-hidden="true">
       </i>
       <span>
-        {{buttonLabel}}
+        {{ buttonLabel }}
       </span>
     </button>
     <modal

app/assets/javascripts/ide/components/repo_editor.vue

@@ -6,20 +6,6 @@ import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
 
 export default {
-  beforeDestroy() {
-    this.editor.dispose();
-  },
-  mounted() {
-    if (this.editor && monaco) {
-      this.initMonaco();
-    } else {
-      monacoLoader(['vs/editor/editor.main'], () => {
-        this.editor = Editor.create(monaco);
-
-        this.initMonaco();
-      });
-    }
-  },
   computed: {
     ...mapGetters([
       'activeFile',
@@ -52,6 +38,20 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
+  mounted() {
+    if (this.editor && monaco) {
+      this.initMonaco();
+    } else {
+      monacoLoader(['vs/editor/editor.main'], () => {
+        this.editor = Editor.create(monaco);
+
+        this.initMonaco();
+      });
+    }
+  },
   methods: {
     ...mapActions([
       'getRawFileData',

app/assets/javascripts/ide/components/repo_file_buttons.vue

@@ -35,20 +35,24 @@ export default {
     <div
       class="btn-group"
       role="group"
-      aria-label="File actions">
+      aria-label="File actions"
+    >
       <a
         :href="activeFile.blamePath"
-        class="btn btn-default btn-sm blame">
+        class="btn btn-default btn-sm blame"
+      >
         Blame
       </a>
       <a
         :href="activeFile.commitsPath"
-        class="btn btn-default btn-sm history">
+        class="btn btn-default btn-sm history"
+      >
         History
       </a>
       <a
         :href="activeFile.permalink"
-        class="btn btn-default btn-sm permalink">
+        class="btn btn-default btn-sm permalink"
+      >
         Permalink
       </a>
     </div>

app/assets/javascripts/vue_shared/components/modal.vue

@@ -97,7 +97,7 @@
           <div class="modal-header">
             <slot name="header">
               <h4 class="modal-title pull-left">
-                {{ this.title }}
+                {{ title }}
               </h4>
               <button
                 type="button"
@@ -111,7 +111,10 @@
             </slot>
           </div>
           <div class="modal-body">
-            <slot name="body" :text="text">
+            <slot
+              name="body"
+              :text="text"
+            >
               <p>{{ this.text }}</p>
             </slot>
           </div>
@@ -145,7 +148,8 @@
     </div>
     <div
       v-if="id !== ''"
-      class="modal-backdrop fade in">
+      class="modal-backdrop fade in"
+    >
     </div>
   </div>
 </template>