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/cycle_analytics/components/total_time_component.vue

@@ -45,5 +45,5 @@
     <template v-else>
       --
     </template>
-    </span>
+  </span>
 </template>

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

@@ -75,7 +75,7 @@ export default {
     :id="groupDomId"
     :class="rowClass"
     class="group-row"
-    >
+  >
     <div
       class="group-row-contents"
       :class="{ 'project-row-contents': !isGroup }">
@@ -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"
@@ -135,7 +137,7 @@ export default {
           v-if="group.permission"
           class="user-access-role"
         >
-          {{group.permission}}
+          {{ group.permission }}
         </span>
       </div>
       <div

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

@@ -1,79 +1,82 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
+  import { mapState, mapGetters } from 'vuex';
-import ideSidebar from './ide_side_bar.vue';
+  import ideSidebar from './ide_side_bar.vue';
-import ideContextbar from './ide_context_bar.vue';
+  import ideContextbar from './ide_context_bar.vue';
-import repoTabs from './repo_tabs.vue';
+  import repoTabs from './repo_tabs.vue';
-import repoFileButtons from './repo_file_buttons.vue';
+  import repoFileButtons from './repo_file_buttons.vue';
-import ideStatusBar from './ide_status_bar.vue';
+  import ideStatusBar from './ide_status_bar.vue';
-import repoPreview from './repo_preview.vue';
+  import repoPreview from './repo_preview.vue';
-import repoEditor from './repo_editor.vue';
+  import repoEditor from './repo_editor.vue';
 
-export default {
+  export default {
-  props: {
+    components: {
-    emptyStateSvgPath: {
+      ideSidebar,
-      type: String,
+      ideContextbar,
-      required: true,
+      repoTabs,
+      repoFileButtons,
+      ideStatusBar,
+      repoEditor,
+      repoPreview,
     },
-  },
+    props: {
-  computed: {
+      emptyStateSvgPath: {
-    ...mapState([
+        type: String,
-      'currentBlobView',
+        required: true,
-      'selectedFile',
+      },
-    ]),
+    },
-    ...mapGetters([
+    computed: {
-      'changedFiles',
+      ...mapState([
-      'activeFile',
+        'currentBlobView',
-    ]),
+        'selectedFile',
-  },
+      ]),
-  components: {
+      ...mapGetters([
-    ideSidebar,
+        'changedFiles',
-    ideContextbar,
+        'activeFile',
-    repoTabs,
+      ]),
-    repoFileButtons,
+    },
-    ideStatusBar,
+    mounted() {
-    repoEditor,
+      const returnValue = 'Are you sure you want to lose unsaved changes?';
-    repoPreview,
+      window.onbeforeunload = (e) => {
-  },
+        if (!this.changedFiles.length) return undefined;
-  mounted() {
-    const returnValue = 'Are you sure you want to lose unsaved changes?';
-    window.onbeforeunload = (e) => {
-      if (!this.changedFiles.length) return undefined;
 
-      Object.assign(e, {
+        Object.assign(e, {
-        returnValue,
+          returnValue,
-      });
+        });
-      return returnValue;
+        return returnValue;
-    };
+      };
-  },
+    },
-};
+  };
 </script>
 
 <template>
   <div
     class="ide-view"
   >
-    <ide-sidebar/>
+    <ide-sidebar />
     <div
       class="multi-file-edit-pane"
     >
       <template
-        v-if="activeFile">
+        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">
           <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

@@ -44,28 +44,31 @@ export default {
 </script>
 
 <template>
-<div>
+  <div>
-  <div class="ide-file-list">
+    <div class="ide-file-list">
-    <table class="table">
+      <table class="table">
-      <tbody
+        <tbody
-        v-if="treeId">
+          v-if="treeId"
-        <repo-previous-directory
+        >
-          v-if="hasPreviousDirectory"
+          <repo-previous-directory
-        />
+            v-if="hasPreviousDirectory"
-        <div
+          />
-          class="multi-file-loading-container"
+          <template v-if="showLoading">
-          v-if="showLoading"
+            <div
-          v-for="n in 3"
+              class="multi-file-loading-container"
-          :key="n">
+              v-for="n in 3"
-          <skeleton-loading-container/>
+              :key="n"
-        </div>
+            >
-        <repo-file
+              <skeleton-loading-container />
-          v-for="file in fetchedList"
+            </div>
-          :key="file.key"
+          </template>
-          :file="file"
+          <repo-file
-        />
+            v-for="file in fetchedList"
-      </tbody>
+            :key="file.key"
-    </table>
+            :file="file"
+          />
+        </tbody>
+      </table>
+    </div>
   </div>
-</div>
 </template>

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

@@ -1,63 +1,63 @@
 <script>
-import { mapState, mapActions } from 'vuex';
+  import { mapState, mapActions } from 'vuex';
-import projectTree from './ide_project_tree.vue';
+  import projectTree from './ide_project_tree.vue';
-import icon from '../../vue_shared/components/icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
-import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+  import panelResizer from '../../vue_shared/components/panel_resizer.vue';
-import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
+  import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
-export default {
+  export default {
-  components: {
+    components: {
-    projectTree,
+      projectTree,
-    icon,
+      icon,
-    panelResizer,
+      panelResizer,
-    skeletonLoadingContainer,
+      skeletonLoadingContainer,
-  },
-  data() {
-    return {
-      width: 290,
-    };
-  },
-  computed: {
-    ...mapState([
-      'loading',
-      'projects',
-      'leftPanelCollapsed',
-    ]),
-    currentIcon() {
-      return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
     },
-    maxSize() {
+    data() {
-      return window.innerWidth / 2;
+      return {
+        width: 290,
+      };
     },
-    panelStyle() {
+    computed: {
-      if (!this.leftPanelCollapsed) {
+      ...mapState([
-        return { width: `${this.width}px` };
+        'loading',
-      }
+        'projects',
-      return {};
+        'leftPanelCollapsed',
+      ]),
+      currentIcon() {
+        return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
+      },
+      maxSize() {
+        return window.innerWidth / 2;
+      },
+      panelStyle() {
+        if (!this.leftPanelCollapsed) {
+          return { width: `${this.width}px` };
+        }
+        return {};
+      },
+      showLoading() {
+        return this.loading;
+      },
     },
-    showLoading() {
+    methods: {
-      return this.loading;
+      ...mapActions([
+        'setPanelCollapsedStatus',
+        'setResizingStatus',
+      ]),
+      toggleCollapsed() {
+        this.setPanelCollapsedStatus({
+          side: 'left',
+          collapsed: !this.leftPanelCollapsed,
+        });
+      },
+      resizingStarted() {
+        this.setResizingStatus(true);
+      },
+      resizingEnded() {
+        this.setResizingStatus(false);
+      },
     },
-  },
+  };
-  methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-      'setResizingStatus',
-    ]),
-    toggleCollapsed() {
-      this.setPanelCollapsedStatus({
-        side: 'left',
-        collapsed: !this.leftPanelCollapsed,
-      });
-    },
-    resizingStarted() {
-      this.setResizingStatus(true);
-    },
-    resizingEnded() {
-      this.setResizingStatus(false);
-    },
-  },
-};
 </script>
 
 <template>
@@ -69,13 +69,15 @@ export default {
     :style="panelStyle"
   >
     <div class="multi-file-commit-panel-inner">
-      <div
+      <template v-if="showLoading">
-        class="multi-file-loading-container"
+        <div
-        v-if="showLoading"
+          class="multi-file-loading-container"
-        v-for="n in 3"
+          v-for="n in 3"
-        :key="n">
+          :key="n"
-        <skeleton-loading-container/>
+        >
-      </div>
+          <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}}
+      {{ 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">
+          :transform="axisTransform"
-        </g>
+        />
         <g
           class="y-axis"
-          transform="translate(70, 20)">
+          transform="translate(70, 20)"
-        </g>
+        />
         <graph-legend
           :graph-width="graphWidth"
           :graph-height="graphHeight"
@@ -256,29 +259,30 @@
         <svg
           class="graph-data"
           :viewBox="innerViewBox"
-          ref="graphData">
+          ref="graphData"
-            <graph-path
+        >
-              v-for="(path, index) in timeSeries"
+          <graph-path
-              :key="index"
+            v-for="(path, index) in timeSeries"
-              :generated-line-path="path.linePath"
+            :key="index"
-              :generated-area-path="path.areaPath"
+            :generated-line-path="path.linePath"
-              :line-style="path.lineStyle"
+            :generated-area-path="path.areaPath"
-              :line-color="path.lineColor"
+            :line-style="path.lineStyle"
-              :area-color="path.areaColor"
+            :line-color="path.lineColor"
-            />
+            :area-color="path.areaColor"
-            <graph-deployment
+          />
-              :deployment-data="reducedDeploymentData"
+          <graph-deployment
-              :graph-height="graphHeight"
+            :deployment-data="reducedDeploymentData"
-              :graph-height-offset="graphHeightOffset"
+            :graph-height="graphHeight"
-            />
+            :graph-height-offset="graphHeightOffset"
-            <rect
+          />
-              class="prometheus-graph-overlay"
+          <rect
-              :width="(graphWidth - 70)"
+            class="prometheus-graph-overlay"
-              :height="(graphHeight - 100)"
+            :width="(graphWidth - 70)"
-              transform="translate(-5, 20)"
+            :height="(graphHeight - 100)"
-              ref="graphOverlay"
+            transform="translate(-5, 20)"
-              @mousemove="handleMouseOverGraph($event)">
+            ref="graphOverlay"
-            </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)">
+        fill="url(#shadow-gradient)"
-      </rect>
+      />
       <line
         class="deployment-line"
         x1="0"
         y1="0"
         x2="0"
         :y2="calculatedHeight"
-        stroke="#000">
+        stroke="#000"
-      </line>
+      />
     </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-opacity="0.4"
-          </stop>
+          />
           <stop
             offset="100%"
             stop-color="#000"
-            stop-opacity="0">
+            stop-opacity="0"
-          </stop>
+          />
         </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,33 +136,34 @@
     >
       <div class="arrow"></div>
       <div class="popover-title">
-        <h5 v-if="this.deploymentFlagData">
+        <h5 v-if="deploymentFlagData">
           Deployed
         </h5>
-        {{formatDate}} at
+        {{ formatDate }} at
-        <strong>{{formatTime}}</strong>
+        <strong>{{ formatTime }}</strong>
       </div>
       <div
-        v-if="this.deploymentFlagData"
+        v-if="deploymentFlagData"
         class="popover-content deploy-meta-content"
       >
         <div>
           <icon
             name="commit"
-            :size="12">
+            :size="12"
-          </icon>
+          />
           <a :href="deploymentFlagData.commitUrl">
-            {{deploymentFlagData.sha.slice(0, 8)}}
+            {{ deploymentFlagData.sha.slice(0, 8) }}
           </a>
         </div>
         <div
-          v-if="deploymentFlagData.tag">
+          v-if="deploymentFlagData.tag"
+        >
           <icon
             name="label"
-            :size="12">
+            :size="12"
-          </icon>
+          />
           <a :href="deploymentFlagData.tagUrl">
-            {{deploymentFlagData.ref}}
+            {{ deploymentFlagData.ref }}
           </a>
         </div>
       </div>
@@ -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,13 +185,13 @@
                   x1="0"
                   x2="15"
                   y1="2"
-                  y2="2">
+                  y2="2"
-                </line>
+                />
               </svg>
             </td>
-            <td>{{seriesMetricLabel(index, series)}}</td>
+            <td>{{ seriesMetricLabel(index, series) }}</td>
             <td>
-              <strong>{{seriesMetricValue(series)}}</strong>
+              <strong>{{ seriesMetricValue(series) }}</strong>
             </td>
           </tr>
         </table>

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

@@ -1,80 +1,78 @@
 <script>
-import ciIconBadge from './ci_badge_link.vue';
+  import ciIconBadge from './ci_badge_link.vue';
-import loadingIcon from './loading_icon.vue';
+  import loadingIcon from './loading_icon.vue';
-import timeagoTooltip from './time_ago_tooltip.vue';
+  import timeagoTooltip from './time_ago_tooltip.vue';
-import tooltip from '../directives/tooltip';
+  import tooltip from '../directives/tooltip';
-import userAvatarImage from './user_avatar/user_avatar_image.vue';
+  import userAvatarImage from './user_avatar/user_avatar_image.vue';
 
-/**
+  /**
- * Renders header component for job and pipeline page based on UI mockups
+  * Renders header component for job and pipeline page based on UI mockups
- *
+  *
- * Used in:
+  * Used in:
- * - job show page
+  * - job show page
- * - pipeline show page
+  * - pipeline show page
- */
+  */
-export default {
+  export default {
-  props: {
+    components: {
-    status: {
+      ciIconBadge,
-      type: Object,
+      loadingIcon,
-      required: true,
+      timeagoTooltip,
+      userAvatarImage,
     },
-    itemName: {
+    directives: {
-      type: String,
+      tooltip,
-      required: true,
     },
-    itemId: {
+    props: {
-      type: Number,
+      status: {
-      required: true,
+        type: Object,
+        required: true,
+      },
+      itemName: {
+        type: String,
+        required: true,
+      },
+      itemId: {
+        type: Number,
+        required: true,
+      },
+      time: {
+        type: String,
+        required: true,
+      },
+      user: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      actions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      hasSidebarButton: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      shouldRenderTriggeredLabel: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
-    time: {
-      type: String,
-      required: true,
-    },
-    user: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    hasSidebarButton: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    shouldRenderTriggeredLabel: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
 
-  directives: {
+    computed: {
-    tooltip,
+      userAvatarAltText() {
-  },
+        return `${this.user.name}'s avatar`;
-
+      },
-  components: {
-    ciIconBadge,
-    loadingIcon,
-    timeagoTooltip,
-    userAvatarImage,
-  },
-
-  computed: {
-    userAvatarAltText() {
-      return `${this.user.name}'s avatar`;
     },
-  },
 
-  methods: {
+    methods: {
-    onClickAction(action) {
+      onClickAction(action) {
-      this.$emit('actionClicked', action);
+        this.$emit('actionClicked', action);
+      },
     },
-  },
+  };
-};
 </script>
 
 <template>
@@ -84,7 +82,7 @@ export default {
       <ci-icon-badge :status="status" />
 
       <strong>
-        {{itemName}} #{{itemId}}
+        {{ itemName }} #{{ itemId }}
       </strong>
 
       <template v-if="shouldRenderTriggeredLabel">
@@ -103,16 +101,17 @@ 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"
             :img-alt="userAvatarAltText"
             :tooltip-text="user.name"
             :img-size="24"
-            />
+          />
 
-          {{user.name}}
+          {{ user.name }}
         </a>
       </template>
     </section>
@@ -121,12 +120,15 @@ 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"
-          {{action.label}}
+          :key="i"
+        >
+          {{ action.label }}
         </a>
 
         <a
@@ -134,8 +136,10 @@ export default {
           :href="action.path"
           data-method="post"
           rel="nofollow"
-          :class="action.cssClass">
+          :class="action.cssClass"
-          {{action.label}}
+          :key="i"
+        >
+          {{ action.label }}
         </a>
 
         <button
@@ -143,25 +147,31 @@ export default {
           @click="onClickAction(action)"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          type="button">
+          type="button"
-          {{action.label}}
+          :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"