Fix more eslint rules

2018-01-08 20:01:49 +00:00 · 2018-01-08 20:01:49 +00:00 · 349d06688f
parent e2b759a2f4
commit 349d06688f
27 changed files with 401 additions and 352 deletions
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/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(
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/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
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
@ -45,5 +45,5 @@
    <template v-else>
      --
    </template>
-    </span>
+  </span>
 </template>
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/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") }}
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/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">
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/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
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@ -1,79 +1,82 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
-import ideSidebar from './ide_side_bar.vue';
-import ideContextbar from './ide_context_bar.vue';
-import repoTabs from './repo_tabs.vue';
-import repoFileButtons from './repo_file_buttons.vue';
-import ideStatusBar from './ide_status_bar.vue';
-import repoPreview from './repo_preview.vue';
-import repoEditor from './repo_editor.vue';
+  import { mapState, mapGetters } from 'vuex';
+  import ideSidebar from './ide_side_bar.vue';
+  import ideContextbar from './ide_context_bar.vue';
+  import repoTabs from './repo_tabs.vue';
+  import repoFileButtons from './repo_file_buttons.vue';
+  import ideStatusBar from './ide_status_bar.vue';
+  import repoPreview from './repo_preview.vue';
+  import repoEditor from './repo_editor.vue';

-export default {
-  props: {
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
+  export default {
+    components: {
+      ideSidebar,
+      ideContextbar,
+      repoTabs,
+      repoFileButtons,
+      ideStatusBar,
+      repoEditor,
+      repoPreview,
    },
-  },
-  computed: {
-    ...mapState([
-      'currentBlobView',
-      'selectedFile',
-    ]),
-    ...mapGetters([
-      'changedFiles',
-      'activeFile',
-    ]),
-  },
-  components: {
-    ideSidebar,
-    ideContextbar,
-    repoTabs,
-    repoFileButtons,
-    ideStatusBar,
-    repoEditor,
-    repoPreview,
-  },
-  mounted() {
-    const returnValue = 'Are you sure you want to lose unsaved changes?';
-    window.onbeforeunload = (e) => {
-      if (!this.changedFiles.length) return undefined;
+    props: {
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState([
+        'currentBlobView',
+        'selectedFile',
+      ]),
+      ...mapGetters([
+        'changedFiles',
+        'activeFile',
+      ]),
+    },
+    mounted() {
+      const returnValue = 'Are you sure you want to lose unsaved changes?';
+      window.onbeforeunload = (e) => {
+        if (!this.changedFiles.length) return undefined;

-      Object.assign(e, {
-        returnValue,
-      });
-      return returnValue;
-    };
-  },
-};
+        Object.assign(e, {
+          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>
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@ -44,28 +44,31 @@ export default {
 </script>

 <template>
-<div>
-  <div class="ide-file-list">
-    <table class="table">
-      <tbody
-        v-if="treeId">
-        <repo-previous-directory
-          v-if="hasPreviousDirectory"
-        />
-        <div
-          class="multi-file-loading-container"
-          v-if="showLoading"
-          v-for="n in 3"
-          :key="n">
-          <skeleton-loading-container/>
-        </div>
-        <repo-file
-          v-for="file in fetchedList"
-          :key="file.key"
-          :file="file"
-        />
-      </tbody>
-    </table>
+  <div>
+    <div class="ide-file-list">
+      <table class="table">
+        <tbody
+          v-if="treeId"
+        >
+          <repo-previous-directory
+            v-if="hasPreviousDirectory"
+          />
+          <template v-if="showLoading">
+            <div
+              class="multi-file-loading-container"
+              v-for="n in 3"
+              :key="n"
+            >
+              <skeleton-loading-container />
+            </div>
+          </template>
+          <repo-file
+            v-for="file in fetchedList"
+            :key="file.key"
+            :file="file"
+          />
+        </tbody>
+      </table>
+    </div>
  </div>
-</div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@ -1,63 +1,63 @@
 <script>
-import { mapState, mapActions } from 'vuex';
-import projectTree from './ide_project_tree.vue';
-import icon from '../../vue_shared/components/icon.vue';
-import panelResizer from '../../vue_shared/components/panel_resizer.vue';
-import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
+  import { mapState, mapActions } from 'vuex';
+  import projectTree from './ide_project_tree.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+  import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+  import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';

-export default {
-  components: {
-    projectTree,
-    icon,
-    panelResizer,
-    skeletonLoadingContainer,
-  },
-  data() {
-    return {
-      width: 290,
-    };
-  },
-  computed: {
-    ...mapState([
-      'loading',
-      'projects',
-      'leftPanelCollapsed',
-    ]),
-    currentIcon() {
-      return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
+  export default {
+    components: {
+      projectTree,
+      icon,
+      panelResizer,
+      skeletonLoadingContainer,
    },
-    maxSize() {
-      return window.innerWidth / 2;
+    data() {
+      return {
+        width: 290,
+      };
    },
-    panelStyle() {
-      if (!this.leftPanelCollapsed) {
-        return { width: `${this.width}px` };
-      }
-      return {};
+    computed: {
+      ...mapState([
+        'loading',
+        'projects',
+        '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() {
-      return this.loading;
+    methods: {
+      ...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
-        class="multi-file-loading-container"
-        v-if="showLoading"
-        v-for="n in 3"
-        :key="n">
-        <skeleton-loading-container/>
-      </div>
+      <template v-if="showLoading">
+        <div
+          class="multi-file-loading-container"
+          v-for="n in 3"
+          :key="n"
+        >
+          <skeleton-loading-container />
+        </div>
+      </template>
      <project-tree
        v-for="project in projects"
        :key="project.id"
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/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)"
    />
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/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>

--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/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: {
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/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">
-        </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,29 +259,30 @@
        <svg
          class="graph-data"
          :viewBox="innerViewBox"
-          ref="graphData">
-            <graph-path
-              v-for="(path, index) in timeSeries"
-              :key="index"
-              :generated-line-path="path.linePath"
-              :generated-area-path="path.areaPath"
-              :line-style="path.lineStyle"
-              :line-color="path.lineColor"
-              :area-color="path.areaColor"
-            />
-            <graph-deployment
-              :deployment-data="reducedDeploymentData"
-              :graph-height="graphHeight"
-              :graph-height-offset="graphHeightOffset"
-            />
-            <rect
-              class="prometheus-graph-overlay"
-              :width="(graphWidth - 70)"
-              :height="(graphHeight - 100)"
-              transform="translate(-5, 20)"
-              ref="graphOverlay"
-              @mousemove="handleMouseOverGraph($event)">
-            </rect>
+          ref="graphData"
+        >
+          <graph-path
+            v-for="(path, index) in timeSeries"
+            :key="index"
+            :generated-line-path="path.linePath"
+            :generated-area-path="path.areaPath"
+            :line-style="path.lineStyle"
+            :line-color="path.lineColor"
+            :area-color="path.areaColor"
+          />
+          <graph-deployment
+            :deployment-data="reducedDeploymentData"
+            :graph-height="graphHeight"
+            :graph-height-offset="graphHeightOffset"
+          />
+          <rect
+            class="prometheus-graph-overlay"
+            :width="(graphWidth - 70)"
+            :height="(graphHeight - 100)"
+            transform="translate(-5, 20)"
+            ref="graphOverlay"
+            @mousemove="handleMouseOverGraph($event)"
+          />
        </svg>
      </svg>
      <graph-flag
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/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>
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/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
-        <strong>{{formatTime}}</strong>
+        {{ 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)}}
+            {{ 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}}
+            {{ 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">
-                </line>
+                  y2="2"
+                />
              </svg>
            </td>
-            <td>{{seriesMetricLabel(index, series)}}</td>
+            <td>{{ seriesMetricLabel(index, series) }}</td>
            <td>
-              <strong>{{seriesMetricValue(series)}}</strong>
+              <strong>{{ seriesMetricValue(series) }}</strong>
            </td>
          </tr>
        </table>
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/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"
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/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"
--- a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue
+++ b/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
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/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
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/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 "
      />
--- a/app/assets/javascripts/projects/permissions/components/settings_panel.vue
+++ b/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: '',
      },
    },

--- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
+++ b/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);

--- a/app/assets/javascripts/registry/components/app.vue
+++ b/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>
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/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"
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@ -1,80 +1,78 @@
 <script>
-import ciIconBadge from './ci_badge_link.vue';
-import loadingIcon from './loading_icon.vue';
-import timeagoTooltip from './time_ago_tooltip.vue';
-import tooltip from '../directives/tooltip';
-import userAvatarImage from './user_avatar/user_avatar_image.vue';
+  import ciIconBadge from './ci_badge_link.vue';
+  import loadingIcon from './loading_icon.vue';
+  import timeagoTooltip from './time_ago_tooltip.vue';
+  import tooltip from '../directives/tooltip';
+  import userAvatarImage from './user_avatar/user_avatar_image.vue';

-/**
- * Renders header component for job and pipeline page based on UI mockups
- *
- * Used in:
- * - job show page
- * - pipeline show page
- */
-export default {
-  props: {
-    status: {
-      type: Object,
-      required: true,
+  /**
+  * Renders header component for job and pipeline page based on UI mockups
+  *
+  * Used in:
+  * - job show page
+  * - pipeline show page
+  */
+  export default {
+    components: {
+      ciIconBadge,
+      loadingIcon,
+      timeagoTooltip,
+      userAvatarImage,
    },
-    itemName: {
-      type: String,
-      required: true,
+    directives: {
+      tooltip,
    },
-    itemId: {
-      type: Number,
-      required: true,
+    props: {
+      status: {
+        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: {
-    tooltip,
-  },
-
-  components: {
-    ciIconBadge,
-    loadingIcon,
-    timeagoTooltip,
-    userAvatarImage,
-  },
-
-  computed: {
-    userAvatarAltText() {
-      return `${this.user.name}'s avatar`;
+    computed: {
+      userAvatarAltText() {
+        return `${this.user.name}'s avatar`;
+      },
    },
-  },

-  methods: {
-    onClickAction(action) {
-      this.$emit('actionClicked', action);
+    methods: {
+      onClickAction(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">
-          {{action.label}}
+          :class="action.cssClass"
+          :key="i"
+        >
+          {{ action.label }}
        </a>

        <a
@ -134,8 +136,10 @@ export default {
          :href="action.path"
          data-method="post"
          rel="nofollow"
-          :class="action.cssClass">
-          {{action.label}}
+          :class="action.cssClass"
+          :key="i"
+        >
+          {{ action.label }}
        </a>

        <button
@ -143,25 +147,31 @@ export default {
          @click="onClickAction(action)"
          :disabled="action.isLoading"
          :class="action.cssClass"
-          type="button">
-          {{action.label}}
+          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>
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/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">
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/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"