[ci skip] Fix more rules

app/assets/javascripts/boards/components/board_card.vue

@@ -89,6 +89,7 @@ export default {
       :issue="issue"
       :issue-link-base="issueLinkBase"
       :root-path="rootPath"
-      :update-filters="true" />
+      :update-filters="true"
+    />
   </li>
 </template>

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

@@ -77,12 +77,12 @@ which incur additional costs. See %{pricingLink}`)),
         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>`,
-            },
+          {
+            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,
         );
       },

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

@@ -12,7 +12,7 @@
     props: {
       items: {
         type: Array,
-        default: []
+        default: () => [],
       },
       stage: {
         type: Object,

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

@@ -13,7 +13,7 @@
     props: {
       items: {
         type: Array,
-        default: []
+        default: () => [],
       },
       stage: {
         type: Object,

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

@@ -14,7 +14,7 @@
     props: {
       items: {
         type: Array,
-        default: []
+        default: () => [],
       },
       stage: {
         type: Object,
@@ -81,8 +81,7 @@
                 name="fork"
                 :size="16"
               />
-              <a
-                :href="mergeRequest.branch.url">
+              <a :href="mergeRequest.branch.url">
                 {{ mergeRequest.branch.name }}
               </a>
             </span>

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

@@ -15,7 +15,7 @@
     props: {
       items: {
         type: Array,
-        default: []
+        default: () => [],
       },
       stage: {
         type: Object,
@@ -69,7 +69,7 @@
             <a
               :href="build.commitUrl"
               class="commit-sha"
-              >
+            >
               {{ build.shortSha }}
             </a>
           </h5>
@@ -77,7 +77,7 @@
             <a
               :href="build.url"
               class="build-date"
-              >
+            >
               {{ build.date }}
             </a>
             {{ s__('ByAuthor|by') }}

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

@@ -6,15 +6,21 @@
   import icon from '../../vue_shared/components/icon.vue';
 
   export default {
-    props: {
-      items: Array,
-      stage: Object,
-    },
     components: {
       totalTime,
       limitWarning,
       icon,
     },
+    props: {
+      items: {
+        type: Array,
+        default: () => [],
+      },
+      stage: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     computed: {
       iconBuildStatus() {
         return iconBuildStatus;
@@ -35,29 +41,59 @@
       <li
         v-for="(build, i) in items"
         :key="i"
-        class="stage-event-item item-build-component">
+        class="stage-event-item item-build-component"
+      >
         <div class="item-details">
           <h5 class="item-title">
-            <span class="icon-build-status" v-html="iconBuildStatus"></span>
-            <a :href="build.url" class="item-build-name">{{ build.name }}</a>
+            <span
+              class="icon-build-status"
+              v-html="iconBuildStatus"
+            >
+            </span>
+            <a
+              :href="build.url"
+              class="item-build-name"
+            >
+              {{ build.name }}
+            </a>
             &middot;
-            <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="issue-date">
+            <a
+              :href="build.url"
+              class="issue-date">
               {{ build.date }}
             </a>
           </span>
         </div>
         <div class="item-time">
-          <total-time :time="build.totalTime"/>
+          <total-time :time="build.totalTime" />
         </div>
       </li>
     </ul>

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

@@ -17,10 +17,30 @@
 <template>
   <span class="total-time">
     <template v-if="hasData">
-      <template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template>
-      <template v-if="time.hours">{{ time.hours }} <span>{{ n__('Time|hr', 'Time|hrs', time.hours) }}</span></template>
-      <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('Time|min', 'Time|mins', time.mins) }}</span></template>
-      <template v-if="time.seconds && hasData === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template>
+      <template v-if="time.days">
+        {{ time.days }}
+        <span>
+          {{ n__('day', 'days', time.days) }}
+        </span>
+      </template>
+      <template v-if="time.hours">
+        {{ time.hours }}
+        <span>
+          {{ n__('Time|hr', 'Time|hrs', time.hours) }}
+        </span>
+        </template>
+      <template v-if="time.mins && !time.days">
+        {{ time.mins }}
+        <span>
+          {{ n__('Time|min', 'Time|mins', time.mins) }}
+        </span>
+        </template>
+      <template v-if="time.seconds && hasData === 1 || time.seconds === 0">
+        {{ time.seconds }}
+        <span>
+          {{ s__('Time|s') }}
+        </span>
+        </template>
     </template>
     <template v-else>
       --

app/assets/javascripts/deploy_keys/components/action_btn.vue

@@ -3,10 +3,8 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
-    data() {
-      return {
-        isLoading: false,
-      };
+    components: {
+      loadingIcon,
     },
     props: {
       deployKey: {
@@ -23,11 +21,16 @@
         default: 'btn-default',
       },
     },
-
-    components: {
-      loadingIcon,
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
+    computed: {
+      text() {
+        return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
+      },
     },
-
     methods: {
       doAction() {
         this.isLoading = true;
@@ -37,11 +40,6 @@
         });
       },
     },
-    computed: {
-      text() {
-        return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
-      },
-    },
   };
 </script>
 

app/assets/javascripts/deploy_keys/components/app.vue

@@ -7,11 +7,9 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
-    data() {
-      return {
-        isLoading: false,
-        store: new DeployKeysStore(),
-      };
+    components: {
+      keysPanel,
+      loadingIcon,
     },
     props: {
       endpoint: {
@@ -19,6 +17,12 @@
         required: true,
       },
     },
+    data() {
+      return {
+        isLoading: false,
+        store: new DeployKeysStore(),
+      };
+    },
     computed: {
       hasKeys() {
         return Object.keys(this.keys).length;
@@ -27,9 +31,20 @@
         return this.store.keys;
       },
     },
-    components: {
-      keysPanel,
-      loadingIcon,
+    created() {
+      this.service = new DeployKeysService(this.endpoint);
+
+      eventHub.$on('enable.key', this.enableKey);
+      eventHub.$on('remove.key', this.disableKey);
+      eventHub.$on('disable.key', this.disableKey);
+    },
+    mounted() {
+      this.fetchKeys();
+    },
+    beforeDestroy() {
+      eventHub.$off('enable.key', this.enableKey);
+      eventHub.$off('remove.key', this.disableKey);
+      eventHub.$off('disable.key', this.disableKey);
     },
     methods: {
       fetchKeys() {
@@ -59,21 +74,6 @@
         }
       },
     },
-    created() {
-      this.service = new DeployKeysService(this.endpoint);
-
-      eventHub.$on('enable.key', this.enableKey);
-      eventHub.$on('remove.key', this.disableKey);
-      eventHub.$on('disable.key', this.disableKey);
-    },
-    mounted() {
-      this.fetchKeys();
-    },
-    beforeDestroy() {
-      eventHub.$off('enable.key', this.enableKey);
-      eventHub.$off('remove.key', this.disableKey);
-      eventHub.$off('disable.key', this.disableKey);
-    },
   };
 </script>
 

app/assets/javascripts/deploy_keys/components/key.vue

@@ -3,6 +3,9 @@
   import { getTimeago } from '../../lib/utils/datetime_utility';
 
   export default {
+    components: {
+      actionBtn,
+    },
     props: {
       deployKey: {
         type: Object,
@@ -17,9 +20,6 @@
         required: true,
       },
     },
-    components: {
-      actionBtn,
-    },
     computed: {
       timeagoDate() {
         return getTimeago().format(this.deployKey.created_at);
@@ -61,9 +61,10 @@
     </div>
     <div class="deploy-key-content prepend-left-default deploy-key-projects">
       <a
-        v-for="project in deployKey.projects"
+        v-for="(project, i) in deployKey.projects"
         class="label deploy-project-label"
         :href="project.full_path"
+        :key="i"
       >
         {{ project.full_name }}
       </a>

app/assets/javascripts/deploy_keys/components/keys_panel.vue

@@ -2,6 +2,9 @@
   import key from './key.vue';
 
   export default {
+    components: {
+      key,
+    },
     props: {
       title: {
         type: String,
@@ -25,9 +28,6 @@
         required: true,
       },
     },
-    components: {
-      key,
-    },
   };
 </script>
 
@@ -37,12 +37,14 @@
       {{ title }}
       ({{ keys.length }})
     </h5>
-    <ul class="well-list"
+    <ul
+      class="well-list"
       v-if="keys.length"
     >
       <li
         v-for="deployKey in keys"
-        :key="deployKey.id">
+        :key="deployKey.id"
+      >
         <key
           :deploy-key="deployKey"
           :store="store"

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

@@ -4,6 +4,11 @@
   import environmentTable from '../components/environments_table.vue';
 
   export default {
+    components: {
+      environmentTable,
+      loadingIcon,
+      tablePagination,
+    },
     props: {
       isLoading: {
         type: Boolean,
@@ -26,12 +31,6 @@
         required: true,
       },
     },
-    components: {
-      environmentTable,
-      loadingIcon,
-      tablePagination,
-    },
-
     methods: {
       onChangePage(page) {
         this.$emit('onChangePage', page);
@@ -47,7 +46,7 @@
       label="Loading environments"
       v-if="isLoading"
       size="3"
-      />
+    />
 
     <slot name="emptyState"></slot>
 
@@ -59,13 +58,13 @@
         :environments="environments"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
-        />
+      />
 
       <table-pagination
         v-if="pagination && pagination.totalPages > 1"
         :change="onChangePage"
-        :pageInfo="pagination"
-        />
+        :page-info="pagination"
+      />
     </div>
   </div>
 </template>

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

 <script>
   export default {
-    name: 'environmentsEmptyState',
+    name: 'EnvironmentsEmptyState',
     props: {
       newPath: {
         type: String,
@@ -21,21 +21,22 @@
   <div class="blank-state-row">
     <div class="blank-state-center">
       <h2 class="blank-state-title js-blank-state-title">
-        {{s__("Environments|You don't have any environments right now.")}}
+        {{ 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")}}
+          {{ s__("Environments|Read more about environments") }}
         </a>
       </p>
 
       <a
         v-if="canCreateEnvironment"
         :href="newPath"
-        class="btn btn-create js-new-environment-button">
-        {{s__("Environments|New environment")}}
+        class="btn btn-create js-new-environment-button"
+      >
+        {{ s__("Environments|New environment") }}
       </a>
     </div>
   </div>

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

 <script>
-import playIconSvg from 'icons/_icon_play.svg';
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
+  import playIconSvg from 'icons/_icon_play.svg';
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    actions: {
-      type: Array,
-      required: false,
-      default: () => [],
+  export default {
+    directives: {
+      tooltip,
     },
-  },
 
-  directives: {
-    tooltip,
-  },
-
-  components: {
-    loadingIcon,
-  },
+    components: {
+      loadingIcon,
+    },
+    props: {
+      actions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
 
-  data() {
-    return {
-      playIconSvg,
-      isLoading: false,
-    };
-  },
+    data() {
+      return {
+        playIconSvg,
+        isLoading: false,
+      };
+    },
 
-  computed: {
-    title() {
-      return 'Deploy to...';
+    computed: {
+      title() {
+        return 'Deploy to...';
+      },
     },
-  },
 
-  methods: {
-    onClickAction(endpoint) {
-      this.isLoading = true;
+    methods: {
+      onClickAction(endpoint) {
+        this.isLoading = true;
 
-      eventHub.$emit('postAction', endpoint);
-    },
+        eventHub.$emit('postAction', endpoint);
+      },
 
-    isActionDisabled(action) {
-      if (action.playable === undefined) {
-        return false;
-      }
+      isActionDisabled(action) {
+        if (action.playable === undefined) {
+          return false;
+        }
 
-      return !action.playable;
+        return !action.playable;
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <div
@@ -63,27 +62,32 @@ export default {
       data-toggle="dropdown"
       :title="title"
       :aria-label="title"
-      :disabled="isLoading">
+      :disabled="isLoading"
+    >
       <span>
         <span v-html="playIconSvg"></span>
         <i
           class="fa fa-caret-down"
-          aria-hidden="true"/>
+          aria-hidden="true"
+        />
         <loading-icon v-if="isLoading" />
       </span>
     </button>
 
     <ul class="dropdown-menu dropdown-menu-align-right">
-      <li v-for="action in actions">
+      <li
+        v-for="(action, i) in actions"
+        :key="i">
         <button
           type="button"
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
           :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)">
+          :disabled="isActionDisabled(action)"
+        >
           <span v-html="playIconSvg"></span>
           <span>
-            {{action.name}}
+            {{ action.name }}
           </span>
         </button>
       </li>

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

 <script>
-import tooltip from '../../vue_shared/directives/tooltip';
-import { s__ } from '../../locale';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import { s__ } from '../../locale';
 
-/**
- * Renders the external url link in environments table.
- */
-export default {
-  props: {
-    externalUrl: {
-      type: String,
-      required: true,
+  /**
+  * Renders the external url link in environments table.
+  */
+  export default {
+    directives: {
+      tooltip,
+    },
+    props: {
+      externalUrl: {
+        type: String,
+        required: true,
+      },
     },
-  },
-
-  directives: {
-    tooltip,
-  },
 
-  computed: {
-    title() {
-      return s__('Environments|Open');
+    computed: {
+      title() {
+        return s__('Environments|Open');
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
@@ -33,9 +32,12 @@ export default {
     rel="noopener noreferrer nofollow"
     :title="title"
     :aria-label="title"
-    :href="externalUrl">
+    :href="externalUrl"
+  >
     <i