[ci skip] Fix more eslint rules

10 files changed, 415 insertions, 272 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 872abf03ef1..4deedb29ecd 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -1,108 +1,113 @@
 <script>
-import { s__, sprintf } from '../../locale';
-import eventHub from '../event_hub';
-import loadingButton from '../../vue_shared/components/loading_button.vue';
-import {
-  APPLICATION_NOT_INSTALLABLE,
-  APPLICATION_SCHEDULED,
-  APPLICATION_INSTALLABLE,
-  APPLICATION_INSTALLING,
-  APPLICATION_INSTALLED,
-  APPLICATION_ERROR,
-  REQUEST_LOADING,
-  REQUEST_SUCCESS,
-  REQUEST_FAILURE,
-} from '../constants';
+  import { s__, sprintf } from '../../locale';
+  import eventHub from '../event_hub';
+  import loadingButton from '../../vue_shared/components/loading_button.vue';
+  import {
+    APPLICATION_NOT_INSTALLABLE,
+    APPLICATION_SCHEDULED,
+    APPLICATION_INSTALLABLE,
+    APPLICATION_INSTALLING,
+    APPLICATION_INSTALLED,
+    APPLICATION_ERROR,
+    REQUEST_LOADING,
+    REQUEST_SUCCESS,
+    REQUEST_FAILURE,
+  } from '../constants';
 
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true,
+  export default {
+    components: {
+      loadingButton,
     },
-    title: {
-      type: String,
-      required: true,
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+      title: {
+        type: String,
+        required: true,
+      },
+      titleLink: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      description: {
+        type: String,
+        required: true,
+      },
+      status: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      statusReason: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      requestStatus: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      requestReason: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
-    titleLink: {
-      type: String,
-      required: false,
-    },
-    description: {
-      type: String,
-      required: true,
-    },
-    status: {
-      type: String,
-      required: false,
-    },
-    statusReason: {
-      type: String,
-      required: false,
-    },
-    requestStatus: {
-      type: String,
-      required: false,
-    },
-    requestReason: {
-      type: String,
-      required: false,
-    },
-  },
-  components: {
-    loadingButton,
-  },
-  computed: {
-    rowJsClass() {
-      return `js-cluster-application-row-${this.id}`;
-    },
-    installButtonLoading() {
-      return !this.status ||
-        this.status === APPLICATION_SCHEDULED ||
-        this.status === APPLICATION_INSTALLING ||
-        this.requestStatus === REQUEST_LOADING;
-    },
-    installButtonDisabled() {
-      // 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) ||
-        this.requestStatus === REQUEST_LOADING ||
-        this.requestStatus === REQUEST_SUCCESS;
-    },
-    installButtonLabel() {
-      let label;
-      if (
-        this.status === APPLICATION_NOT_INSTALLABLE ||
-        this.status === APPLICATION_INSTALLABLE ||
-        this.status === APPLICATION_ERROR
-      ) {
-        label = s__('ClusterIntegration|Install');
-      } else if (this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING) {
-        label = s__('ClusterIntegration|Installing');
-      } else if (this.status === APPLICATION_INSTALLED) {
-        label = s__('ClusterIntegration|Installed');
-      }
+    computed: {
+      rowJsClass() {
+        return `js-cluster-application-row-${this.id}`;
+      },
+      installButtonLoading() {
+        return this.status !== '' ||
+          this.status === APPLICATION_SCHEDULED ||
+          this.status === APPLICATION_INSTALLING ||
+          this.requestStatus === REQUEST_LOADING;
+      },
+      installButtonDisabled() {
+        // 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) ||
+          this.requestStatus === REQUEST_LOADING ||
+          this.requestStatus === REQUEST_SUCCESS;
+      },
+      installButtonLabel() {
+        let label;
+        if (
+          this.status === APPLICATION_NOT_INSTALLABLE ||
+          this.status === APPLICATION_INSTALLABLE ||
+          this.status === APPLICATION_ERROR
+        ) {
+          label = s__('ClusterIntegration|Install');
+        } else if (this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING) {
+          label = s__('ClusterIntegration|Installing');
+        } else if (this.status === APPLICATION_INSTALLED) {
+          label = s__('ClusterIntegration|Installed');
+        }
 
-      return label;
-    },
-    hasError() {
-      return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE;
-    },
-    generalErrorDescription() {
-      return sprintf(
-        s__('ClusterIntegration|Something went wrong while installing %{title}'), {
-          title: this.title,
-        },
-      );
+        return label;
+      },
+      hasError() {
+        return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE;
+      },
+      generalErrorDescription() {
+        return sprintf(
+          s__('ClusterIntegration|Something went wrong while installing %{title}'), {
+            title: this.title,
+          },
+        );
+      },
     },
-  },
-  methods: {
-    installClicked() {
-      eventHub.$emit('installApplication', this.id);
+    methods: {
+      installClicked() {
+        eventHub.$emit('installApplication', this.id);
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
@@ -115,7 +120,7 @@ export default {
       role="row"
     >
       <a
-        v-if="titleLink"
+        v-if="titleLink !== ''"
         :href="titleLink"
         target="blank"
         rel="noopener noreferrer"
@@ -164,15 +169,15 @@ export default {
           <p class="js-cluster-application-general-error-message">
             {{ generalErrorDescription }}
           </p>
-          <ul v-if="statusReason || requestReason">
+          <ul v-if="statusReason !== '' || requestReason !== ''">
             <li
-              v-if="statusReason"
+              v-if="statusReason !== ''"
               class="js-cluster-application-status-error-message"
             >
               {{ statusReason }}
             </li>
             <li
-              v-if="requestReason"
+              v-if="requestReason !== ''"
               class="js-cluster-application-request-error-message"
             >
               {{ requestReason }}
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 1b0bbffe37e..38fcc006831 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -1,51 +1,52 @@
 <script>
-import _ from 'underscore';
-import { s__, sprintf } from '../../locale';
-import applicationRow from './application_row.vue';
+  import _ from 'underscore';
+  import { s__, sprintf } from '../../locale';
+  import applicationRow from './application_row.vue';
 
-export default {
-  props: {
-    applications: {
-      type: Object,
-      required: false,
-      default: () => ({}),
+  export default {
+    components: {
+      applicationRow,
     },
-    helpPath: {
-      type: String,
-      required: false,
+    props: {
+      applications: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      helpPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
-  },
-  components: {
-    applicationRow,
-  },
-  computed: {
-    generalApplicationDescription() {
-      return sprintf(
-        _.escape(s__(`ClusterIntegration|Install applications on your cluster.
-Read more about %{helpLink}`)),
-        {
-          helpLink: `<a href="${this.helpPath}">
-            ${_.escape(s__('ClusterIntegration|installing applications'))}
-          </a>`,
-        },
-        false,
-      );
-    },
-    helmTillerDescription() {
-      return _.escape(s__(
-        `ClusterIntegration|Helm streamlines installing and managing Kubernets applications.
-        Tiller runs inside of your Kubernetes Cluster, and manages
-        releases of your charts.`,
-      ));
-    },
-    ingressDescription() {
-      const descriptionParagraph = _.escape(s__(
-        `ClusterIntegration|Ingress gives you a way to route requests to services based on the
-        request host or path, centralizing a number of services into a single entrypoint.`,
-      ));
+    computed: {
+      generalApplicationDescription() {
+        return sprintf(
+          _.escape(s__(`ClusterIntegration|Install applications on your cluster.
+  Read more about %{helpLink}`)),
+          {
+            helpLink: `<a href="${this.helpPath}">
+              ${_.escape(s__('ClusterIntegration|installing applications'))}
+            </a>`,
+          },
+          false,
+        );
+      },
+      helmTillerDescription() {
+        return _.escape(s__(
+          `ClusterIntegration|Helm streamlines installing and managing Kubernets applications.
+          Tiller runs inside of your Kubernetes Cluster, and manages
+          releases of your charts.`,
+        ));
+      },
+      ingressDescription() {
+        const descriptionParagraph = _.escape(s__(
+          `ClusterIntegration|Ingress gives you a way to route requests to services based on the
+          request host or path, centralizing a number of services into a single entrypoint.`,
+        ));
 
-      const extraCostParagraph = sprintf(
-        _.escape(s__(`ClusterIntegration|%{boldNotice} This will add some
+        const extraCostParagraph = sprintf(
+          _.escape(s__(`ClusterIntegration|%{boldNotice} This will add some
 extra resources like a load balancer,
 which incur additional costs. See %{pricingLink}`)),
           {
@@ -54,39 +55,39 @@ which incur additional costs. See %{pricingLink}`)),
               ${_.escape(s__('ClusterIntegration|GKE pricing'))}
             </a>`,
           },
-        false,
-      );
+          false,
+        );
 
-      return `
-        <p>
-          ${descriptionParagraph}
-        </p>
-        <p class="append-bottom-0">
-          ${extraCostParagraph}
-        </p>
-      `;
-    },
-    gitlabRunnerDescription() {
-      return _.escape(s__(
-        `ClusterIntegration|GitLab Runner is the open source project that is used to run your jobs
-        and send the results back to GitLab.`,
-      ));
+        return `
+          <p>
+            ${descriptionParagraph}
+          </p>
+          <p class="append-bottom-0">
+            ${extraCostParagraph}
+          </p>
+        `;
+      },
+      gitlabRunnerDescription() {
+        return _.escape(s__(
+          `ClusterIntegration|GitLab Runner is the open source project that is used to run your jobs
+          and send the results back to GitLab.`,
+        ));
+      },
+      prometheusDescription() {
+        return sprintf(
+          _.escape(s__(`ClusterIntegration|Prometheus is an open-source monitoring system
+  with %{gitlabIntegrationLink} to monitor deployed applications.`)),
+            {
+              gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
+  target="_blank" rel="noopener noreferrer">
+                ${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
+              </a>`,
+            },
+          false,
+        );
+      },
     },
-    prometheusDescription() {
-      return sprintf(
-        _.escape(s__(`ClusterIntegration|Prometheus is an open-source monitoring system
-with %{gitlabIntegrationLink} to monitor deployed applications.`)),
-          {
-            gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
-target="_blank" rel="noopener noreferrer">
-              ${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
-            </a>`,
-          },
-        false,
-      );
-    },
-  },
-};
+  };
 </script>
 
 <template>
@@ -115,26 +116,29 @@ target="_blank" rel="noopener noreferrer">
           :request-reason="applications.helm.requestReason"
         />
         <application-row
-         id="ingress"
-         :title="applications.ingress.title"
-         title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
-         :description="ingressDescription"
-         :status="applications.ingress.status"
-         :status-reason="applications.ingress.statusReason"
-         :request-status="applications.ingress.requestStatus"
-         :request-reason="applications.ingress.requestReason"
-       />
-       <application-row
-         id="prometheus"
-         :title="applications.prometheus.title"
-         title-link="https://prometheus.io/docs/introduction/overview/"
-         :description="prometheusDescription"
-         :status="applications.prometheus.status"
-         :status-reason="applications.prometheus.statusReason"
-         :request-status="applications.prometheus.requestStatus"
-         :request-reason="applications.prometheus.requestReason"
-       />
-        <!-- NOTE: Don't forget to update `clusters.scss` min-height for this block and uncomment `application_spec` tests -->
+          id="ingress"
+          :title="applications.ingress.title"
+          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
+          :description="ingressDescription"
+          :status="applications.ingress.status"
+          :status-reason="applications.ingress.statusReason"
+          :request-status="applications.ingress.requestStatus"
+          :request-reason="applications.ingress.requestReason"
+        />
+        <application-row
+          id="prometheus"
+          :title="applications.prometheus.title"
+          title-link="https://prometheus.io/docs/introduction/overview/"
+          :description="prometheusDescription"
+          :status="applications.prometheus.status"
+          :status-reason="applications.prometheus.statusReason"
+          :request-status="applications.prometheus.requestStatus"
+          :request-reason="applications.prometheus.requestReason"
+        />
+        <!--
+          NOTE: Don't forget to update `clusters.scss`
+          min-height for this block and uncomment `application_spec` tests
+        -->
         <!-- Add GitLab Runner row, all other plumbing is complete -->
       </div>
     </div>
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index e9a0dbaa59d..da0e8063ccb 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -4,6 +4,10 @@
   import pipelinesMixin from '../../pipelines/mixins/pipelines';
 
   export default {
+    mixins: [
+      pipelinesMixin,
+    ],
+
     props: {
       endpoint: {
         type: String,
@@ -31,9 +35,6 @@
         default: 'child',
       },
     },
-    mixins: [
-      pipelinesMixin,
-    ],
 
     data() {
       const store = new PipelineStore();
@@ -95,28 +96,29 @@
       label="Loading pipelines"
       size="3"
       v-if="isLoading"
-      />
+    />
 
     <empty-state
       v-if="shouldRenderEmptyState"
       :help-page-path="helpPagePath"
       :empty-state-svg-path="emptyStateSvgPath"
-      />
+    />
 
     <error-state
       v-if="shouldRenderErrorState"
       :error-state-svg-path="errorStateSvgPath"
-      />
+    />
 
     <div
       class="table-holder"
-      v-if="shouldRenderTable">
+      v-if="shouldRenderTable"
+    >
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"
         :auto-devops-help-path="autoDevopsHelpPath"
         :view-type="viewType"
-        />
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 732697c134e..049ecab5365 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -26,17 +26,21 @@
       class="js-ca-dismiss-button dismiss-button"
       type="button"
       :aria-label="__('Dismiss Cycle Analytics introduction box')"
-      @click="dismissOverviewDialog">
+      @click="dismissOverviewDialog"
+    >
       <i
         class="fa fa-times"
         aria-hidden="true">
       </i>
     </button>
-    <div class="svg-container" v-html="iconCycleAnalyticsSplash">
+    <div
+      class="svg-container"
+      v-html="iconCycleAnalyticsSplash"
+    >
     </div>
     <div class="inner-content">
       <h4>
-        {{__('Introducing Cycle Analytics')}}
+        {{ __('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.') }}
@@ -46,8 +50,9 @@
           :href="documentationLink"
           target="_blank"
           rel="nofollow"
-          class="btn">
-          {{__('Read more')}}
+          class="btn"
+        >
+          {{ __('Read more') }}
         </a>
       </p>
     </div>
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
index 6e94ba929b2..32ae0cc1476 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -2,25 +2,34 @@
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    directives: {
+      tooltip,
+    },
     props: {
       count: {
         type: Number,
         required: true,
       },
     },
-    directives: {
-      tooltip,
-    },
   };
 </script>
 <template>
-  <span v-if="count === 50" class="events-info pull-right">
+  <span
+    v-if="count === 50"
+    class="events-info pull-right"
+  >
     <i
       class="fa fa-warning"
       v-tooltip
       aria-hidden="true"
-      :title="n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)"
-      data-placement="top"></i>
+      :title="n__(
+        'Limited to showing %d event at most',
+        'Limited to showing %d events at most',
+        50
+      )"
+      data-placement="top"
+    >
+    </i>
     {{ n__('Showing %d event', 'Showing %d events', 50) }}
   </span>
 </template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
index 45930145b0a..e06f803b30b 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
@@ -4,15 +4,21 @@
   import totalTime from './total_time_component.vue';
 
   export default {
-    props: {
-      items: Array,
-      stage: Object,
-    },
     components: {
       userAvatarImage,
       limitWarning,
       totalTime,
     },
+    props: {
+      items: {
+        type: Array,
+        default: []
+      },
+      stage: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
   };
 </script>
 <template>
@@ -22,28 +28,44 @@
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li v-for="mergeRequest in items" class="stage-event-item">
+      <li
+        v-for="(mergeRequest, i) in items"
+        :key="i"
+        class="stage-event-item"
+      >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
+          <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
           <h5 class="item-title merge-merquest-title">
             <a :href="mergeRequest.url">
               {{ mergeRequest.title }}
             </a>
           </h5>
-          <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
+          <a
+            :href="mergeRequest.url"
+            class="issue-link">
+            !{{ mergeRequest.iid }}
+          </a>
           &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
+            <a
+              :href="mergeRequest.url"
+              class="issue-date">
+              {{ mergeRequest.createdAt }}
+            </a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
+            <a
+              :href="mergeRequest.author.webUrl"
+              class="issue-author-link">
+              {{ mergeRequest.author.name }}
+            </a>
           </span>
         </div>
         <div class="item-time">
-          <total-time :time="mergeRequest.totalTime"></total-time>
+          <total-time :time="mergeRequest.totalTime" />
         </div>
       </li>
     </ul>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 8c98bd249a1..ed47c7f9ea0 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -4,15 +4,21 @@
   import totalTime from './total_time_component.vue';
 
   export default {
-    props: {
-      items: Array,
-      stage: Object,
-    },
     components: {
       userAvatarImage,
       limitWarning,
       totalTime,
     },
+    props: {
+      items: {
+        type: Array,
+        default: []
+      },
+      stage: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
   };
 </script>
 <template>
@@ -25,30 +31,43 @@
       <li
         v-for="(issue, i) in items"
         :key="i"
-        class="stage-event-item">
+        class="stage-event-item"
+      >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="issue.author.avatarUrl"/>
           <h5 class="item-title issue-title">
-            <a class="issue-title" :href="issue.url">
+            <a
+              class="issue-title"
+              :href="issue.url"
+            >
               {{ issue.title }}
             </a>
           </h5>
-          <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
+          <a
+            :href="issue.url"
+            class="issue-link"
+          >#{{ issue.iid }}</a>
           &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
+            <a
+              :href="issue.url"
+              class="issue-date"
+            >{{ issue.createdAt }}</a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a :href="issue.author.webUrl" class="issue-author-link">
+            <a
+              :href="issue.author.webUrl"
+              class="issue-author-link"
+            >
               {{ issue.author.name }}
             </a>
           </span>
         </div>
         <div class="item-time">
-          <total-time :time="issue.totalTime"/>
+          <total-time :time="issue.totalTime" />
         </div>
       </li>
     </ul>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
index 75d2f1fd70c..4f2c8256277 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
@@ -5,15 +5,21 @@
   import totalTime from './total_time_component.vue';
 
   export default {
-    props: {
-      items: Array,
-      stage: Object,
-    },
     components: {
       userAvatarImage,
       totalTime,
       limitWarning,
     },
+    props: {
+      items: {
+        type: Array,
+        default: []
+      },
+      stage: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     computed: {
       iconCommit() {
         return iconCommit;
@@ -31,10 +37,11 @@
       <li
         v-for="(commit, i) in items"
         :key="i"
-        class="stage-event-item">
+        class="stage-event-item"
+      >
         <div class="item-details item-conmmit-component">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="commit.author.avatarUrl"/>
+          <user-avatar-image :img-src="commit.author.avatarUrl" />
           <h5 class="item-title commit-title">
             <a :href="commit.commitUrl">
               {{ commit.title }}
@@ -42,10 +49,20 @@
           </h5>
           <span>
             {{ s__('FirstPushedBy|First') }}
-            <span class="commit-icon" v-html="iconCommit"></span>
-            <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a>
+            <span
+              class="commit-icon"
+              v-html="iconCommit"
+            >
+            </span>
+            <a
+              :href="commit.commitUrl"
+              class="commit-hash-link commit-sha"
+            >{{ commit.shortSha }}</a>
             {{ s__('FirstPushedBy|pushed by') }}
-            <a :href="commit.author.webUrl" class="commit-author-link">
+            <a
+              :href="commit.author.webUrl"
+              class="commit-author-link"
+            >
               {{ commit.author.name }}
             </a>
           </span>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index cbce9205e75..c419347d219 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -5,16 +5,22 @@
   import icon from '../../vue_shared/components/icon.vue';
 
   export default {
-    props: {
-      items: Array,
-      stage: Object,
-    },
     components: {
       userAvatarImage,
       totalTime,
       limitWarning,
       icon,
     },
+    props: {
+      items: {
+        type: Array,
+        default: []
+      },
+      stage: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
   };
 </script>
 <template>
@@ -27,7 +33,8 @@
       <li
         v-for="(mergeRequest, i) in items"
         :key="i"
-        class="stage-event-item">
+        class="stage-event-item"
+      >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
@@ -36,34 +43,53 @@
               {{ mergeRequest.title }}
             </a>
           </h5>
-          <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
+          <a
+            :href="mergeRequest.url"
+            class="issue-link"
+          >!{{ mergeRequest.iid }}</a>
           &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
+            <a
+              :href="mergeRequest.url"
+              class="issue-date"
+            >{{ mergeRequest.createdAt }}</a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
+            <a
+              :href="mergeRequest.author.webUrl"
+              class="issue-author-link"
+            >{{ mergeRequest.author.name }}</a>
           </span>
           <template v-if="mergeRequest.state === 'closed'">
             <span class="merge-request-state">
-              <i class="fa fa-ban"></i>
+              <i
+                class="fa fa-ban"
+                aria-hidden="true"
+              >
+              </i>
               {{ mergeRequest.state.toUpperCase() }}
             </span>
           </template>
           <template v-else>
-            <span class="merge-request-branch" v-if="mergeRequest.branch">
+            <span
+              class="merge-request-branch"
+              v-if="mergeRequest.branch"
+            >
               <icon
                 name="fork"
-                :size="16">
-              </icon>
-              <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
+                :size="16"
+              />
+              <a
+                :href="mergeRequest.branch.url">
+                {{ mergeRequest.branch.name }}
+              </a>
             </span>
           </template>
         </div>
         <div class="item-time">
-          <total-time :time="mergeRequest.totalTime"/>
+          <total-time :time="mergeRequest.totalTime" />
         </div>
       </li>
     </ul>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 508a411e599..26ee5a8c69d 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -6,16 +6,22 @@
   import icon from '../../vue_shared/components/icon.vue';
 
   export default {
-    props: {
-      items: Array,
-      stage: Object,
-    },
     components: {
       userAvatarImage,
       totalTime,
       limitWarning,
       icon,
     },
+    props: {
+      items: {
+        type: Array,
+        default: []
+      },
+      stage: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     computed: {
       iconBranch() {
         return iconBranch;
@@ -33,30 +39,58 @@
       <li
         v-for="(build, i) in items"
         class="stage-event-item item-build-component"
-        :key="i">
+        :key="i"
+      >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="build.author.avatarUrl"/>
           <h5 class="item-title">
-            <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
+            <a
+              :href="build.url"
+              class="pipeline-id"
+            >
+              #{{ build.id }}
+            </a>
             <icon
               name="fork"
-              :size="16">
-            </icon>
-            <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
-            <span class="icon-branch" v-html="iconBranch"></span>
-            <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
+              :size="16"
+            />
+            <a
+              :href="build.branch.url"
+              class="ref-name"
+            >
+              {{ build.branch.name }}
+            </a>
+            <span
+              class="icon-branch"
+              v-html="iconBranch"
+            >
+            </span>
+            <a
+              :href="build.commitUrl"
+              class="commit-sha"
+              >
+              {{ build.shortSha }}
+            </a>
           </h5>
           <span>
-            <a :href="build.url" class="build-date">{{ build.date }}</a>
+            <a
+              :href="build.url"
+              class="build-date"
+              >
+              {{ build.date }}
+            </a>
             {{ s__('ByAuthor|by') }}
-            <a :href="build.author.webUrl" class="issue-author-link">
+            <a
+              :href="build.author.webUrl"
+              class="issue-author-link"
+            >
               {{ build.author.name }}
             </a>
           </span>
         </div>
         <div class="item-time">
-          <total-time :time="build.totalTime"/>
+          <total-time :time="build.totalTime" />
         </div>
       </li>
     </ul>