Fix more eslint rules

app/assets/javascripts/clusters/components/application_row.vue

@@ -71,7 +71,8 @@
         // Avoid the potential for the real-time data to say APPLICATION_INSTALLABLE but
         // we already made a request to install and are just waiting for the real-time
         // to sync up.
-        return (this.status !== APPLICATION_INSTALLABLE && this.status !== APPLICATION_ERROR) ||
+        return (this.status !== APPLICATION_INSTALLABLE
+          && this.status !== APPLICATION_ERROR) ||
           this.requestStatus === REQUEST_LOADING ||
           this.requestStatus === REQUEST_SUCCESS;
       },
@@ -83,7 +84,8 @@
           this.status === APPLICATION_ERROR
         ) {
           label = s__('ClusterIntegration|Install');
-        } else if (this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING) {
+        } else if (this.status === APPLICATION_SCHEDULED ||
+          this.status === APPLICATION_INSTALLING) {
           label = s__('ClusterIntegration|Installing');
         } else if (this.status === APPLICATION_INSTALLED) {
           label = s__('ClusterIntegration|Installed');
@@ -92,7 +94,8 @@
         return label;
       },
       hasError() {
-        return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE;
+        return this.status === APPLICATION_ERROR ||
+        this.requestStatus === REQUEST_FAILURE;
       },
       generalErrorDescription() {
         return sprintf(

app/assets/javascripts/cycle_analytics/components/banner.vue

@@ -43,7 +43,8 @@
         {{ __('Introducing Cycle Analytics') }}
       </h4>
       <p>
-        {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
+        {{ __(`Cycle Analytics gives an overview
+of how much time it takes to go from idea to production in your project.`) }}
       </p>
       <p>
         <a

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

@@ -24,7 +24,8 @@
         {{ s__("Environments|You don't have any environments right now.") }}
       </h2>
       <p class="blank-state-text">
-        {{ s__("Environments|Environments are places where code gets deployed, such as staging or production.") }}
+        {{ s__(`Environments|Environments are places where
+code gets deployed, such as staging or production.`) }}
         <br />
         <a :href="helpPath">
           {{ s__("Environments|Read more about environments") }}

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

@@ -30,20 +30,16 @@ export default {
       default: false,
     },
   },
-
-  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}`;
     },
+    shouldRenderFolderContent(env) {
+      return env.isFolder &&
+        env.isOpen &&
+        env.children &&
+        env.children.length > 0;
+    },
   },
 };
 </script>
@@ -99,7 +95,7 @@ export default {
       />
 
       <template
-        v-if="shouldRenderFolderContent"
+        v-if="shouldRenderFolderContent(model)"
       >
         <div
           v-if="model.isLoadingFolderContent"
@@ -110,11 +106,11 @@ export default {
         <template v-else>
           <div
             is="environment-item"
-            v-for="children in model.children"
+            v-for="(children, index) in model.children"
             :model="children"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
-            :key="i"
+            :key="index"
           />
 
           <div :key="i">

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

@@ -88,7 +88,8 @@ export default {
         :item="group"
       />
       <div
-        class="folder-toggle-wrap">
+        class="folder-toggle-wrap"
+      >
         <item-caret
           :is-group-open="group.isOpen"
         />
@@ -113,13 +114,14 @@ export default {
           <identicon
             v-else
             size-class="s24"
-            :entity-id=group.id
+            :entity-id="group.id"
             :entity-name="group.name"
           />
         </a>
       </div>
       <div
-        class="title namespace-title">
+        class="title namespace-title"
+      >
         <a
           v-tooltip
           :href="group.relativePath"

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,
+    },
     props: {
       emptyStateSvgPath: {
         type: String,
@@ -25,15 +34,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) => {
@@ -57,7 +57,8 @@ export default {
       class="multi-file-edit-pane"
     >
       <template
-        v-if="activeFile">
+        v-if="activeFile"
+      >
         <repo-tabs/>
         <component
           class="multi-file-edit-pane-content"
@@ -65,15 +66,17 @@ export default {
         />
         <repo-file-buttons />
         <ide-status-bar
-          :file="selectedFile"/>
+          :file="selectedFile"
+        />
       </template>
       <template
-        v-else>
+        v-else
+      >
         <div class="ide-empty-state">
           <div class="row js-empty-state">
             <div class="col-xs-12">
               <div class="svg-content svg-250">
-                <img :src="emptyStateSvgPath">
+                <img :src="emptyStateSvgPath" />
               </div>
             </div>
             <div class="col-xs-12">
@@ -82,7 +85,8 @@ export default {
                   Welcome to the GitLab IDE
                 </h4>
                 <p>
-                  You can select a file in the left sidebar to begin editing and use the right sidebar to commit your changes.
+                  You can select a file in the left sidebar to begin
+                  editing and use the right sidebar to commit your changes.
                 </p>
               </div>
             </div>

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

@@ -48,17 +48,20 @@ export default {
     <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">
             <div
               class="multi-file-loading-container"
-          v-if="showLoading"
               v-for="n in 3"
-          :key="n">
+              :key="n"
+            >
               <skeleton-loading-container />
             </div>
+          </template>
           <repo-file
             v-for="file in fetchedList"
             :key="file.key"

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

@@ -69,13 +69,15 @@ export default {
     :style="panelStyle"
   >
     <div class="multi-file-commit-panel-inner">
+      <template v-if="showLoading">
         <div
           class="multi-file-loading-container"
-        v-if="showLoading"
           v-for="n in 3"
-        :key="n">
+          :key="n"
+        >
           <skeleton-loading-container />
         </div>
+      </template>
       <project-tree
         v-for="project in projects"
         :key="project.id"

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

@@ -111,7 +111,8 @@ export default {
       :primary-button-label="__('Create new branch')"
       kind="primary"
       :title="__('Branch has changed')"
-      :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
+      :text="__(`This branch has changed since
+you started editing. Would you like to create a new branch?`)"
       @cancel="showNewBranchModal = false"
       @submit="makeCommit(true)"
     />

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

@@ -60,6 +60,11 @@
         };
       },
     },
+    updated() {
+      if (this.file.type === 'blob' && this.file.active) {
+        this.$el.scrollIntoView();
+      }
+    },
     methods: {
       clickFile(row) {
         // Manual Action if a tree is selected/opened
@@ -72,11 +77,6 @@
         this.$router.push(`/project${row.url}`);
       },
     },
-    updated() {
-      if (this.file.type === 'blob' && this.file.active) {
-        this.$el.scrollIntoView();
-      }
-    },
   };
 </script>
 

app/assets/javascripts/jobs/components/header.vue

@@ -31,7 +31,7 @@
         return !this.isLoading && Object.keys(this.job).length;
       },
       jobStarted() {
-        return this.job.started;
+        return this.job.started !== undefined;
       },
     },
     watch: {

app/assets/javascripts/monitoring/components/graph.vue

@@ -17,6 +17,15 @@
   const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
 
   export default {
+    components: {
+      GraphLegend,
+      GraphFlag,
+      GraphDeployment,
+      GraphPath,
+    },
+
+    mixins: [MonitoringMixin],
+
     props: {
       graphData: {
         type: Object,
@@ -45,8 +54,6 @@
       },
     },
 
-    mixins: [MonitoringMixin],
-
     data() {
       return {
         baseGraphHeight: 450,
@@ -74,13 +81,6 @@
       };
     },
 
-    components: {
-      GraphLegend,
-      GraphFlag,
-      GraphDeployment,
-      GraphPath,
-    },
-
     computed: {
       outerViewBox() {
         return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
@@ -105,6 +105,26 @@
       },
     },
 
+    watch: {
+      updateAspectRatio() {
+        if (this.updateAspectRatio) {
+          this.graphHeight = 450;
+          this.graphWidth = 600;
+          this.measurements = measurements.large;
+          this.draw();
+          eventHub.$emit('toggleAspectRatio');
+        }
+      },
+
+      hoverData() {
+        this.positionFlag();
+      },
+    },
+
+    mounted() {
+      this.draw();
+    },
+
     methods: {
       draw() {
         const breakpointSize = bp.getBreakpointSize();
@@ -197,26 +217,6 @@
           }); // This will select all of the ticks once they're rendered
       },
     },
-
-    watch: {
-      updateAspectRatio() {
-        if (this.updateAspectRatio) {
-          this.graphHeight = 450;
-          this.graphWidth = 600;
-          this.measurements = measurements.large;
-          this.draw();
-          eventHub.$emit('toggleAspectRatio');
-        }
-      },
-
-      hoverData() {
-        this.positionFlag();
-      },
-    },
-
-    mounted() {
-      this.draw();
-    },
   };
 </script>
 
@@ -224,24 +224,27 @@
   <div
     class="prometheus-graph"
     @mouseover="showFlagContent = true"
-    @mouseleave="showFlagContent = false">
+    @mouseleave="showFlagContent = false"
+  >
     <h5 class="text-center graph-title">
       {{ graphData.title }}
     </h5>
     <div
       class="prometheus-svg-container"
-      :style="paddingBottomRootSvg">
+      :style="paddingBottomRootSvg"
+    >
       <svg
         :viewBox="outerViewBox"
-        ref="baseSvg">
+        ref="baseSvg"
+      >
         <g
           class="x-axis"
-          :transform="axisTransform">
-        </g>
+          :transform="axisTransform"
+        />
         <g
           class="y-axis"
-          transform="translate(70, 20)">
-        </g>
+          transform="translate(70, 20)"
+        />
         <graph-legend
           :graph-width="graphWidth"
           :graph-height="graphHeight"
@@ -256,7 +259,8 @@
         <svg
           class="graph-data"
           :viewBox="innerViewBox"
-          ref="graphData">
+          ref="graphData"
+        >
           <graph-path
             v-for="(path, index) in timeSeries"
             :key="index"
@@ -277,8 +281,8 @@
             :height="(graphHeight - 100)"
             transform="translate(-5, 20)"
             ref="graphOverlay"
-              @mousemove="handleMouseOverGraph($event)">
-            </rect>
+            @mousemove="handleMouseOverGraph($event)"
+          />
         </svg>
       </svg>
       <graph-flag

app/assets/javascripts/monitoring/components/graph/deployment.vue

@@ -39,33 +39,35 @@
         y="0"
         :height="calculatedHeight"
         width="3"
-        fill="url(#shadow-gradient)">
-      </rect>
+        fill="url(#shadow-gradient)"
+      />
       <line
         class="deployment-line"
         x1="0"
         y1="0"
         x2="0"
         :y2="calculatedHeight"
-        stroke="#000">
-      </line>
+        stroke="#000"
+      />
     </g>
     <svg
       height="0"
-      width="0">
+      width="0"
+    >
       <defs>
         <linearGradient
-          id="shadow-gradient">
+          id="shadow-gradient"
+        >
           <stop
             offset="0%"
             stop-color="#000"
-            stop-opacity="0.4">
-          </stop>
+            stop-opacity="0.4"
+          />
           <stop
             offset="100%"
             stop-color="#000"
-            stop-opacity="0">
-          </stop>
+            stop-opacity="0"
+          />
         </linearGradient>
       </defs>
     </svg>

app/assets/javascripts/monitoring/components/graph/flag.vue

@@ -1,9 +1,12 @@
 <script>
   import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
   import { formatRelevantDigits } from '../../../lib/utils/number_utils';
-  import Icon from '../../../vue_shared/components/icon.vue';
+  import icon from '../../../vue_shared/components/icon.vue';
 
   export default {
+    components: {
+      icon,
+    },
     props: {
       currentXCoordinate: {
         type: Number,
@@ -52,10 +55,6 @@
       },
     },
 
-    components: {
-      Icon,
-    },
-
     computed: {
       formatTime() {
         return this.deploymentFlagData ?
@@ -137,31 +136,32 @@
     >
       <div class="arrow"></div>
       <div class="popover-title">
-        <h5 v-if="this.deploymentFlagData">
+        <h5 v-if="deploymentFlagData">
           Deployed
         </h5>
         {{ formatDate }} at
         <strong>{{ formatTime }}</strong>
       </div>
       <div
-        v-if="this.deploymentFlagData"
+        v-if="deploymentFlagData"
         class="popover-content deploy-meta-content"
       >
         <div>
           <icon
             name="commit"
-            :size="12">
-          </icon>
+            :size="12"
+          />
           <a :href="deploymentFlagData.commitUrl">
             {{ deploymentFlagData.sha.slice(0, 8) }}
           </a>
         </div>
         <div
-          v-if="deploymentFlagData.tag">
+          v-if="deploymentFlagData.tag"
+        >
           <icon
             name="label"
-            :size="12">
-          </icon>
+            :size="12"
+          />
           <a :href="deploymentFlagData.tagUrl">
             {{ deploymentFlagData.ref }}
           </a>
@@ -174,7 +174,10 @@
             :key="index"
           >
             <td>
-              <svg width="15" height="6">
+              <svg
+                width="15"
+                height="6"
+              >
                 <line
                   :stroke="series.lineColor"
                   :stroke-dasharray="strokeDashArray(series.lineStyle)"
@@ -182,8 +185,8 @@
                   x1="0"
                   x2="15"
                   y1="2"
-                  y2="2">
-                </line>
+                  y2="2"
+                />
               </svg>
             </td>
             <td>{{ seriesMetricLabel(index, series) }}</td>

app/assets/javascripts/notes/components/comment_form.vue

@@ -291,7 +291,8 @@ Please check your network connection and try again.`;
                 <textarea
                   id="note-body"
                   name="note[note]"
-                  class="note-textarea js-vue-comment-form js-gfm-input js-autosize markdown-area js-vue-textarea"
+                  class="note-textarea js-vue-comment-form
+js-gfm-input js-autosize markdown-area js-vue-textarea"
                   data-supports-quick-actions="true"
                   aria-label="Description"
                   v-model="note"
@@ -304,7 +305,8 @@ Please check your network connection and try again.`;
                 </textarea>
               </markdown-field>
               <div class="note-form-actions">
-                <div class="pull-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
+                <div class="pull-left btn-group
+append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
                     @click.prevent="handleSave()"
                     :disabled="isSubmitButtonDisabled"

app/assets/javascripts/notes/components/note_form.vue

@@ -146,7 +146,8 @@
         <textarea
           id="note_note"
           name="note[note]"
-          class="note-textarea js-gfm-input js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
+          class="note-textarea js-gfm-input
+js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
           :data-supports-quick-actions="!isEditing"
           aria-label="Description"
           v-model="note"

app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue

@@ -48,7 +48,9 @@
       <div class="user-callout-copy">
         <h4>{{ __('Scheduling Pipelines') }}</h4>
         <p>
-          {{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }}
+          {{ __(`The pipelines schedule runs pipelines in the future,
+repeatedly, for specific branches or tags.
+Those scheduled pipelines will inherit limited project access based on their associated user.`) }}
         </p>
         <p> {{ __('Learn more in the') }}
           <a

app/assets/javascripts/pipelines/components/empty_state.vue

@@ -26,7 +26,9 @@
           {{ s__("Pipelines|Build with confidence") }}
         </h4>
         <p>
-          {{ s__("Pipelines|Continous Integration can help catch bugs by running your tests automatically, while Continuous Deployment can help you deliver code to your product environment.") }}
+          {{ s__(`Pipelines|Continous Integration can help
+catch bugs by running your tests automatically,
+while Continuous Deployment can help you deliver code to your product environment.`) }}
         </p>
         <div class="text-center">
           <a

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -197,7 +197,8 @@
   <div class="pipelines-container">
     <div
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
-      v-if="!shouldRenderEmptyState">
+      v-if="!shouldRenderEmptyState"
+    >
       <div class="fade-left">
         <i
           class="fa fa-angle-left"
@@ -221,7 +222,7 @@
         :new-pipeline-path="newPipelinePath"
         :has-ci-enabled="hasCiEnabled"
         :help-page-path="helpPagePath"
-        :resetCachePath="resetCachePath"
+        :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
         :can-create-pipeline="canCreatePipelineParsed "
       />

app/assets/javascripts/projects/permissions/components/settings_panel.vue

@@ -40,14 +40,17 @@
       visibilityHelpPath: {
         type: String,
         required: false,
+        default: '',
       },
       lfsHelpPath: {
         type: String,
         required: false,
+        default: '',
       },
       registryHelpPath: {
         type: String,
         required: false,
+        default: '',
       },
     },
 

app/assets/javascripts/projects_dropdown/components/projects_list_item.vue

@@ -9,6 +9,7 @@
       matcher: {
         type: String,
         required: false,
+        default: '',
       },
       projectId: {
         type: Number,
@@ -27,6 +28,7 @@
         required: true,
       },
       avatarUrl: {
+        type: String,
         required: true,
         validator(value) {
           return value === null || typeof value === 'string';
@@ -38,7 +40,7 @@
         return this.avatarUrl !== null;
       },
       highlightedProjectName() {
-        if (this.matcher) {
+        if (this.matcher !== '') {
           const matcherRegEx = new RegExp(this.matcher, 'gi');
           const matches = this.projectName.match(matcherRegEx);
 

app/assets/javascripts/registry/components/app.vue

@@ -55,7 +55,8 @@
     />
 
     <p v-else-if="!isLoading && !repos.length">
-      {{ __("No container images stored for this project. Add one by following the instructions above.") }}
+      {{ __(`No container images stored for this project.
+Add one by following the instructions above.`) }}
     </p>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -105,7 +105,9 @@
         </span>
       </template>
       <template v-if="!mr.rebaseInProgress && mr.canPushToSourceBranch && !isMakingRequest">
-        <div class="accept-merge-holder clearfix js-toggle-container accept-action media space-children">
+        <div
+          class="accept-merge-holder clearfix
+js-toggle-container accept-action media space-children">
           <button
             type="button"
             class="btn btn-sm btn-reopen btn-success"

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

@@ -13,6 +13,15 @@ import userAvatarImage from './user_avatar/user_avatar_image.vue';
   * - pipeline show page
   */
   export default {
+    components: {
+      ciIconBadge,
+      loadingIcon,
+      timeagoTooltip,
+      userAvatarImage,
+    },
+    directives: {
+      tooltip,
+    },
     props: {
       status: {
         type: Object,
@@ -52,17 +61,6 @@ export default {
       },
     },
 
-  directives: {
-    tooltip,
-  },
-
-  components: {
-    ciIconBadge,
-    loadingIcon,
-    timeagoTooltip,
-    userAvatarImage,
-  },
-
     computed: {
       userAvatarAltText() {
         return `${this.user.name}'s avatar`;
@@ -103,7 +101,8 @@ export default {
           v-tooltip
           :href="user.path"
           :title="user.email"
-          class="js-user-link commit-committer-link">
+          class="js-user-link commit-committer-link"
+        >
 
           <user-avatar-image
             :img-src="user.avatar_url"
@@ -121,11 +120,14 @@ export default {
       class="header-action-buttons"
       v-if="actions.length">
       <template
-        v-for="action in actions">
+        v-for="(action, i) in actions"
+      >
         <a
           v-if="action.type === 'link'"
           :href="action.path"
-          :class="action.cssClass">
+          :class="action.cssClass"
+          :key="i"
+        >
           {{ action.label }}
         </a>
 
@@ -134,7 +136,9 @@ export default {
           :href="action.path"
           data-method="post"
           rel="nofollow"
-          :class="action.cssClass">
+          :class="action.cssClass"
+          :key="i"
+        >
           {{ action.label }}
         </a>
 
@@ -143,25 +147,31 @@ export default {
           @click="onClickAction(action)"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          type="button">
+          type="button"
+          :key="i"
+        >
           {{ action.label }}
           <i
             v-show="action.isLoading"
             class="fa fa-spin fa-spinner"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
           </i>
         </button>
       </template>
       <button
         v-if="hasSidebarButton"
         type="button"
-        class="btn btn-default visible-xs-block visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
+        class="btn btn-default visible-xs-block
+visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
         aria-label="Toggle Sidebar"
-        id="toggleSidebar">
+        id="toggleSidebar"
+      >
         <i
           class="fa fa-angle-double-left"
           aria-hidden="true"
-          aria-labelledby="toggleSidebar">
+          aria-labelledby="toggleSidebar"
+        >
         </i>
       </button>
     </section>

app/assets/javascripts/vue_shared/components/issue/issue_warning.vue

@@ -45,7 +45,8 @@
 
     <span v-if="isLockedAndConfidential">
       {{ __('This issue is confidential and locked.') }}
-      {{ __('People without permission will never get a notification and won\'t be able to comment.') }}
+      {{ __(`People without permission will never
+get a notification and won't be able to comment.`) }}
     </span>
 
     <span v-else-if="isConfidential">

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

@@ -32,7 +32,7 @@
 </script>
 <template>
   <component
-    :is="this.rootElementType"
+    :is="rootElementType"
     class="text-center">
     <i
       class="fa fa-spin fa-spinner"