Merge branch 'ee-34312-eslint-vue-plugin' into 'master'

Ee 34312 eslint vue plugin

See merge request gitlab-org/gitlab-ee!3983

.codeclimate.yml

@@ -13,7 +13,8 @@ engines:
     exclude_paths:
       - "lib/api/v3/*"
   eslint:
-    enabled: true
+    # eslint-plugin-vue is locked to version 2 in codeclimate, we need version 4
+    enabled: false
   rubocop:
     enabled: true
     channel: "gitlab-rubocop-0-52"

.eslintrc

@@ -4,7 +4,10 @@
     "browser": true,
     "es6": true
   },
-  "extends": "airbnb-base",
+  "extends": [
+    "airbnb-base",
+    "plugin:vue/recommended"
+  ],
   "globals": {
     "__webpack_public_path__": true,
     "_": false,
@@ -12,7 +15,9 @@
     "gon": false,
     "localStorage": false
   },
-  "parser": "babel-eslint",
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
   "plugins": [
     "filenames",
     "import",
@@ -20,7 +25,7 @@
     "promise"
   ],
   "settings": {
-    "html/html-extensions": [".html", ".html.raw", ".vue"],
+    "html/html-extensions": [".html", ".html.raw"],
     "import/resolver": {
       "webpack": {
         "config": "./config/webpack.config.js"
@@ -32,6 +37,15 @@
     "import/no-commonjs": "error",
     "no-multiple-empty-lines": ["error", { "max": 1 }],
     "promise/catch-or-return": "error",
-    "no-underscore-dangle": ["error", { "allow": ["__"]}]
+    "no-underscore-dangle": ["error", { "allow": ["__"]}],
+    "vue/html-self-closing": ["error", {
+      "html": {
+        "void": "always",
+        "normal": "never",
+        "component": "always"
+      },
+      "svg": "always",
+      "math": "always"
+    }]
   }
 }

app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

@@ -89,40 +89,53 @@
       <p>Track your GitLab projects with GitLab for Slack.</p>
     </div>
 
-    <div class="append-bottom-20 center" v-once>
+    <div
+      class="append-bottom-20 center"
+      v-once
+    >
       <img
         class="gitlab-slack-logo"
-        :src="gitlabLogoPath"></img>
+        :src="gitlabLogoPath"
+      />
       <div
         class="gitlab-slack-double-headed-arrow inline prepend-left-20 append-right-20"
-        v-html="doubleHeadedArrowSvg"></div>
+        v-html="doubleHeadedArrowSvg"
+      >
+      </div>
       <img
         class="gitlab-slack-logo"
-        :src="slackLogoPath"></img>
+        :src="slackLogoPath"
+      />
     </div>
 
     <button
       type="button"
       class="btn btn-red center-block js-popup-button"
-      @click="togglePopup">
+      @click="togglePopup"
+    >
       Add GitLab to Slack
     </button>
 
     <div
       class="popup gitlab-slack-popup center-block prepend-top-20 text-center js-popup"
-      v-if="popupOpen">
+      v-if="popupOpen"
+    >
       <div
         class="inline"
-        v-if="isSignedIn && hasProjects">
+        v-if="isSignedIn && hasProjects"
+      >
         <strong>Select GitLab project to link with your Slack team</strong>
 
         <select
-          class="gitlab-slack-project-select js-project-select form-control prepend-top-10 append-bottom-10"
-          v-model="selectedProjectId">
+          class="gitlab-slack-project-select
+js-project-select form-control prepend-top-10 append-bottom-10"
+          v-model="selectedProjectId"
+        >
           <option
             v-for="project in projects"
             :key="project.id"
-            :value="project.id">
+            :value="project.id
+          ">
             {{ project.name }}
           </option>
         </select>
@@ -130,14 +143,16 @@
         <button
           type="button"
           class="btn btn-red pull-right js-add-button"
-          @click="addToSlack">
+          @click="addToSlack"
+        >
           Add to Slack
         </button>
       </div>
 
       <span
         class="js-no-projects"
-        v-else-if="isSignedIn && !hasProjects">
+        v-else-if="isSignedIn && !hasProjects"
+      >
         You don't have any projects available.
       </span>
 
@@ -146,7 +161,8 @@
         <a
           class="js-gitlab-slack-sign-in-link"
           v-once
-          :href="signInPath">
+          :href="signInPath"
+        >
           log in
         </a>
       </span>
@@ -156,20 +172,26 @@
       <img
         v-once
         class="gitlab-slack-gif"
-        :src="gitlabForSlackGifPath">
+        :src="gitlabForSlackGifPath"
+      />
     </div>
 
     <div
       class="gitlab-slack-example"
-      v-once>
+      v-once
+    >
       <h3 class="center">How it works</h3>
 
       <div class="well gitlab-slack-well center-block">
-        <code class="code center-block append-bottom-10">/gitlab &lt;project-alias&gt; issue show &lt;id&gt;</code>
+        <code
+          class="code center-block append-bottom-10"
+        >/gitlab &lt;project-alias&gt; issue show &lt;id&gt;</code>
         <span>
           <div
             class="gitlab-slack-right-arrow inline append-right-5"
-            v-html="arrowRightSvg"></div>
+            v-html="arrowRightSvg"
+          >
+          </div>
           Shows the issue with id
           <strong>&lt;id&gt;</strong>
         </span>
@@ -177,7 +199,7 @@
 
       <div class="center">
         <a :href="docsPath">
-           More Slack commands
+          More Slack commands
         </a>
       </div>
     </div>

app/assets/javascripts/blob/notebook/index.js

@@ -8,6 +8,9 @@ export default () => {
 
   new Vue({
     el,
+    components: {
+      notebookLab,
+    },
     data() {
       return {
         error: false,
@@ -16,8 +19,41 @@ export default () => {
         json: {},
       };
     },
-    components: {
-      notebookLab,
+    mounted() {
+      if (gon.katex_css_url) {
+        const katexStyles = document.createElement('link');
+        katexStyles.setAttribute('rel', 'stylesheet');
+        katexStyles.setAttribute('href', gon.katex_css_url);
+        document.head.appendChild(katexStyles);
+      }
+
+      if (gon.katex_js_url) {
+        const katexScript = document.createElement('script');
+        katexScript.addEventListener('load', () => {
+          this.loadFile();
+        });
+        katexScript.setAttribute('src', gon.katex_js_url);
+        document.head.appendChild(katexScript);
+      } else {
+        this.loadFile();
+      }
+    },
+    methods: {
+      loadFile() {
+        axios.get(el.dataset.endpoint)
+          .then(res => res.data)
+          .then((data) => {
+            this.json = data;
+            this.loading = false;
+          })
+          .catch((e) => {
+            if (e.status !== 200) {
+              this.loadError = true;
+            }
+
+            this.error = true;
+          });
+      },
     },
     template: `
       <div class="container-fluid md prepend-top-default append-bottom-default">
@@ -46,41 +82,5 @@ export default () => {
         </p>
       </div>
     `,
-    methods: {
-      loadFile() {
-        axios.get(el.dataset.endpoint)
-          .then(res => res.data)
-          .then((data) => {
-            this.json = data;
-            this.loading = false;
-          })
-          .catch((e) => {
-            if (e.status !== 200) {
-              this.loadError = true;
-            }
-
-            this.error = true;
-          });
-      },
-    },
-    mounted() {
-      if (gon.katex_css_url) {
-        const katexStyles = document.createElement('link');
-        katexStyles.setAttribute('rel', 'stylesheet');
-        katexStyles.setAttribute('href', gon.katex_css_url);
-        document.head.appendChild(katexStyles);
-      }
-
-      if (gon.katex_js_url) {
-        const katexScript = document.createElement('script');
-        katexScript.addEventListener('load', () => {
-          this.loadFile();
-        });
-        katexScript.setAttribute('src', gon.katex_js_url);
-        document.head.appendChild(katexScript);
-      } else {
-        this.loadFile();
-      }
-    },
   });
 };

app/assets/javascripts/blob/pdf/index.js

@@ -7,6 +7,9 @@ export default () => {
 
   return new Vue({
     el,
+    components: {
+      pdfLab,
+    },
     data() {
       return {
         error: false,
@@ -15,9 +18,6 @@ export default () => {
         pdf: el.dataset.endpoint,
       };
     },
-    components: {
-      pdfLab,
-    },
     methods: {
       onLoad() {
         this.loading = false;

app/assets/javascripts/boards/boards_bundle.js

@@ -208,6 +208,9 @@ $(() => {
   if (configEl) {
     gl.boardConfigToggle = new Vue({
       el: configEl,
+      directives: {
+        tooltip,
+      },
       data() {
         return {
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
@@ -215,12 +218,6 @@ $(() => {
           state: Store.state,
         };
       },
-      directives: {
-        tooltip,
-      },
-      methods: {
-        showPage: page => gl.issueBoards.BoardsStore.showPage(page),
-      },
       computed: {
         buttonText() {
           return this.canAdminList ? 'Edit board' : 'View scope';
@@ -229,6 +226,9 @@ $(() => {
           return this.hasScope ? __('This board\'s scope is reduced') : '';
         }
       },
+      methods: {
+        showPage: page => gl.issueBoards.BoardsStore.showPage(page),
+      },
       template: `
         <div class="prepend-left-10">
           <button
@@ -247,8 +247,8 @@ $(() => {
   }
 
   gl.IssueBoardsModalAddBtn = new Vue({
-    mixins: [gl.issueBoards.ModalMixins],
     el: document.getElementById('js-add-issues-btn'),
+    mixins: [gl.issueBoards.ModalMixins],
     data() {
       return {
         modal: ModalStore.store,
@@ -258,11 +258,6 @@ $(() => {
         canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
       };
     },
-    watch: {
-      disabled() {
-        this.updateTooltip();
-      },
-    },
     computed: {
       disabled() {
         if (!this.store) {
@@ -278,6 +273,14 @@ $(() => {
         return '';
       },
     },
+    watch: {
+      disabled() {
+        this.updateTooltip();
+      },
+    },
+    mounted() {
+      this.updateTooltip();
+    },
     methods: {
       updateTooltip() {
         const $tooltip = $(this.$refs.addIssuesButton);
@@ -296,9 +299,6 @@ $(() => {
         }
       },
     },
-    mounted() {
-      this.updateTooltip();
-    },
     template: `
       <div class="board-extra-actions">
         <button

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

@@ -4,6 +4,10 @@ import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
 export default {
+  components: {
+    loadingIcon,
+    UserAvatarImage,
+  },
   props: {
     anyUserText: {
       type: String,
@@ -52,10 +56,6 @@ export default {
       default: '',
     },
   },
-  components: {
-    loadingIcon,
-    UserAvatarImage,
-  },
   computed: {
     hasValue() {
       return this.selected.id > 0;
@@ -69,6 +69,9 @@ export default {
       this.initSelect();
     },
   },
+  mounted() {
+    this.initSelect();
+  },
   methods: {
     initSelect() {
       this.userDropdown = new UsersSelect(null, this.$refs.dropdown, {
@@ -87,9 +90,6 @@ export default {
       this.board.assignee = assignee;
     },
   },
-  mounted() {
-    this.initSelect();
-  },
 };
 </script>
 
@@ -161,27 +161,33 @@ export default {
             aria-hidden="true"
             class="fa fa-chevron-down"
             data-hidden="true"
-          />
+          >
+          </i>
         </button>
-        <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
+        <div
+          class="dropdown-menu dropdown-select dropdown-menu-paging
+dropdown-menu-user dropdown-menu-selectable dropdown-menu-author"
+        >
           <div class="dropdown-input">
             <input
               autocomplete="off"
               class="dropdown-input-field"
               placeholder="Search"
               type="search"
-            >
+            />
             <i
               aria-hidden="true"
               class="fa fa-search dropdown-input-search"
               data-hidden="true"
-            />
+            >
+            </i>
             <i
               aria-hidden="true"
               class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
               data-hidden="true"
               role="button"
-            />
+            >
+            </i>
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading">

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

 <script>
+/* eslint-disable vue/require-default-prop */
 import './issue_card_inner';
 import eventHub from '../eventhub';
 
@@ -10,13 +11,33 @@ export default {
     'issue-card-inner': gl.issueBoards.IssueCardInner,
   },
   props: {
-    list: Object,
-    issue: Object,
-    issueLinkBase: String,
-    disabled: Boolean,
-    index: Number,
-    rootPath: String,
-    groupId: Number,
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+    issue: {
+      type: Object,
+      default: () => ({}),
+    },
+    issueLinkBase: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+    rootPath: {
+      type: String,
+      default: '',
+    },
+    groupId: {
+      type: Number,
+    },
   },
   data() {
     return {
@@ -55,8 +76,13 @@ export default {
 </script>
 
 <template>
-  <li class="card"
-    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
     :index="index"
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
@@ -68,6 +94,7 @@ export default {
       :issue-link-base="issueLinkBase"
       :group-id="groupId"
       :root-path="rootPath"
-      :update-filters="true" />
+      :update-filters="true"
+    />
   </li>
 </template>

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

@@ -24,6 +24,13 @@ const boardDefaults = {
 };
 
 export default {
+  components: {
+    AssigneeSelect,
+    BoardLabelsSelect,
+    BoardMilestoneSelect,
+    BoardWeightSelect,
+    modal,
+  },
   props: {
     canAdminBoard: {
       type: Boolean,
@@ -55,6 +62,7 @@ export default {
     weights: {
       type: String,
       required: false,
+      default: '',
     },
   },
   data() {
@@ -69,13 +77,6 @@ export default {
       isLoading: false,
     };
   },
-  components: {
-    AssigneeSelect,
-    BoardLabelsSelect,
-    BoardMilestoneSelect,
-    BoardWeightSelect,
-    modal,
-  },
   computed: {
     isNewForm() {
       return this.currentPage === 'new';
@@ -132,6 +133,12 @@ export default {
       return this.isLoading || this.board.name.length === 0;
     },
   },
+  mounted() {
+    this.resetFormState();
+    if (this.$refs.name) {
+      this.$refs.name.focus();
+    }
+  },
   methods: {
     submit() {
       if (this.board.name.length === 0) return;
@@ -169,12 +176,6 @@ export default {
       }
     },
   },
-  mounted() {
-    this.resetFormState();
-    if (this.$refs.name) {
-      this.$refs.name.focus();
-    }
-  },
 };
 </script>
 
@@ -217,7 +218,7 @@ export default {
             v-model="board.name"
             @keyup.enter="submit"
             placeholder="Enter board name"
-          >
+          />
         </div>
         <div v-if="scopedIssueBoardFeatureEnabled">
           <div

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

 <script>
-/* global ListLabel */
+  /* global ListLabel */
 
-import LabelsSelect from '~/labels_select';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import LabelsSelect from '~/labels_select';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 
-export default {
-  props: {
-    board: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      loadingIcon,
     },
-    labelsPath: {
-      type: String,
-      required: true,
+    props: {
+      board: {
+        type: Object,
+        required: true,
+      },
+      labelsPath: {
+        type: String,
+        required: true,
+      },
+      canEdit: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
-    canEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
+    computed: {
+      labelIds() {
+        return this.board.labels.map(label => label.id);
+      },
+      isEmpty() {
+        return this.board.labels.length === 0;
+      },
     },
-  },
-  components: {
-    loadingIcon,
-  },
-  computed: {
-    labelIds() {
-      return this.board.labels.map(label => label.id);
+    mounted() {
+      this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, {
+        handleClick: this.handleClick,
+      });
     },
-    isEmpty() {
-      return this.board.labels.length === 0;
+    methods: {
+      labelStyle(label) {
+        return {
+          color: label.textColor,
+          backgroundColor: label.color,
+        };
+      },
+      handleClick(label) {
+        if (label.isAny) {
+          this.board.labels = [];
+        } else if (!this.board.labels.find(l => l.id === label.id)) {
+          this.board.labels.push(new ListLabel({
+            id: label.id,
+            title: label.title,
+            color: label.color[0],
+            textColor: label.text_color,
+          }));
+        } else {
+          let labels = this.board.labels;
+          labels = labels.filter(selected => selected.id !== label.id);
+          this.board.labels = labels;
+        }
+      },
     },
-  },
-  mounted() {
-    this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, {
-      handleClick: this.handleClick,
-    });
-  },
-  methods: {
-    labelStyle(label) {
-      return {
-        color: label.textColor,
-        backgroundColor: label.color,
-      };
-    },
-    handleClick(label) {
-      if (label.isAny) {
-        this.board.labels = [];
-      } else if (!this.board.labels.find(l => l.id === label.id)) {
-        this.board.labels.push(new ListLabel({
-          id: label.id,
-          title: label.title,
-          color: label.color[0],
-          textColor: label.text_color,
-        }));
-      } else {
-        let labels = this.board.labels;
-        labels = labels.filter(selected => selected.id !== label.id);
-        this.board.labels = labels;
-      }
-    },
-  },
-};
+  };
 </script>
 
 <template>
@@ -106,12 +106,13 @@ export default {
         v-for="labelId in labelIds"
         :key="labelId"
         :value="labelId"
-      >
+      />
       <div class="dropdown">
         <button
           ref="dropdownButton"
           :data-labels="labelsPath"
-          class="dropdown-menu-toggle wide js-label-select js-multiselect js-extra-options js-board-config-modal"
+          class="dropdown-menu-toggle wide js-label-select
+js-multiselect js-extra-options js-board-config-modal"
           data-field-name="label_id[]"
           :data-show-any="true"
           data-toggle="dropdown"
@@ -124,27 +125,33 @@ export default {
             aria-hidden="true"
             class="fa fa-chevron-down"
             data-hidden="true"
-          />
+          >
+          </i>
         </button>
-        <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
+        <div
+          class="dropdown-menu dropdown-select
+dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable"
+        >
           <div class="dropdown-input">
             <input
               autocomplete="off"
               class="dropdown-input-field"
               placeholder="Search"
               type="search"
-            >
+            />
             <i
               aria-hidden="true"
               class="fa fa-search dropdown-input-search"
               data-hidden="true"
-            />
+            >
+            </i>
             <i
               aria-hidden="true"
               class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
               data-hidden="true"
               role="button"
-            />
+            >
+            </i>
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading">

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

 <script>
-/* global BoardService */
+  /* global BoardService */
 
-import MilestoneSelect from '~/milestone_select';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import MilestoneSelect from '~/milestone_select';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 
-const ANY_MILESTONE = 'Any Milestone';
-const NO_MILESTONE = 'No Milestone';
+  const ANY_MILESTONE = 'Any Milestone';
+  const NO_MILESTONE = 'No Milestone';
 
-export default {
-  props: {
-    board: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      loadingIcon,
     },
-    milestonePath: {
-      type: String,
-      required: true,
+    props: {
+      board: {
+        type: Object,
+        required: true,
+      },
+      milestonePath: {
+        type: String,
+        required: true,
+      },
+      canEdit: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
-    canEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  components: {
-    loadingIcon,
-  },
-  computed: {
-    milestoneTitle() {
-      if (this.noMilestone) return NO_MILESTONE;
-      return this.board.milestone ? this.board.milestone.title : ANY_MILESTONE;
-    },
-    noMilestone() {
-      return this.milestoneId === 0;
-    },
-    milestoneId() {
-      return this.board.milestone_id;
-    },
-    milestoneTitleClass() {
-      return this.milestoneTitle === ANY_MILESTONE ? 'text-secondary' : 'bold';
+
+    computed: {
+      milestoneTitle() {
+        if (this.noMilestone) return NO_MILESTONE;
+        return this.board.milestone ? this.board.milestone.title : ANY_MILESTONE;
+      },
+      noMilestone() {
+        return this.milestoneId === 0;
+      },
+      milestoneId() {
+        return this.board.milestone_id;
+      },
+      milestoneTitleClass() {
+        return this.milestoneTitle === ANY_MILESTONE ? 'text-secondary' : 'bold';
+      },
+      selected() {
+        if (this.noMilestone) return NO_MILESTONE;
+        return this.board.milestone ? this.board.milestone.name : '';
+      },
     },
-    selected() {
-      if (this.noMilestone) return NO_MILESTONE;
-      return this.board.milestone ? this.board.milestone.name : '';
+    mounted() {
+      this.milestoneDropdown = new MilestoneSelect(null, this.$refs.dropdownButton, {
+        handleClick: this.selectMilestone,
+      });
     },
-  },
-  methods: {
-    selectMilestone(milestone) {
-      let id = milestone.id;
-      // swap the IDs of 'Any' and 'No' milestone to what backend requires
-      if (milestone.title === ANY_MILESTONE) {
-        id = -1;
-      } else if (milestone.title === NO_MILESTONE) {
-        id = 0;
-      }
-      this.board.milestone_id = id;
-      this.board.milestone = {
-        ...milestone,
-        id,
-      };
+    methods: {
+      selectMilestone(milestone) {
+        let id = milestone.id;
+        // swap the IDs of 'Any' and 'No' milestone to what backend requires
+        if (milestone.title === ANY_MILESTONE) {
+          id = -1;
+        } else if (milestone.title === NO_MILESTONE) {
+          id = 0;
+        }
+        this.board.milestone_id = id;
+        this.board.milestone = {
+          ...milestone,
+          id,
+        };
+      },
     },
-  },
-  mounted() {
-    this.milestoneDropdown = new MilestoneSelect(null, this.$refs.dropdownButton, {
-      handleClick: this.selectMilestone,
-    });
-  },
-};
+  };
 </script>
 
 <template>
@@ -95,7 +96,7 @@ export default {
         :value="milestoneId"
         name="milestone_id"
         type="hidden"
-      >
+      />
       <div class="dropdown">
         <button
           ref="dropdownButton"
@@ -115,7 +116,8 @@ export default {
             aria-hidden="true"
             data-hidden="true"
             class="fa fa-chevron-down"
-          />
+          >
+          </i>
         </button>
         <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
           <div
@@ -126,20 +128,23 @@ export default {
               class="dropdown-input-field"
               placeholder="Search milestones"
               autocomplete="off"
-            >
+            />
             <i
               aria-hidden="true"
               data-hidden="true"
               class="fa fa-search dropdown-input-search"
-            />
+            >
+            </i>
             <i
               role="button"
               aria-hidden="true"
               data-hidden="true"
               class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
-            />
+            >
+            </i>
+          </div>
+          <div class="dropdown-content">
           </div>
-          <div class="dropdown-content" />
           <div class="dropdown-loading">
             <loading-icon />
           </div>

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

+
+<script>
+  /* global ListIssue */
+  import eventHub from '../eventhub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import Api from '../../api';
+
+  export default {
+    name: 'BoardProjectSelect',
+    components: {
+      loadingIcon,
+    },
+    props: {
+      groupId: {
+        type: Number,
+        required: true,
+        default: 0,
+      },
+    },
+    data() {
+      return {
+        loading: true,
+        selectedProject: {},
+      };
+    },
+    computed: {
+      selectedProjectName() {
+        return this.selectedProject.name || 'Select a project';
+      },
+    },
+    mounted() {
+      $(this.$refs.projectsDropdown).glDropdown({
+        filterable: true,
+        filterRemote: true,
+        search: {
+          fields: ['name_with_namespace'],
+        },
+        clicked: ({ $el, e }) => {
+          e.preventDefault();
+          this.selectedProject = {
+            id: $el.data('project-id'),
+            name: $el.data('project-name'),
+          };
+          eventHub.$emit('setSelectedProject', this.selectedProject);
+        },
+        selectable: true,
+        data: (term, callback) => {
+          this.loading = true;
+          return Api.groupProjects(this.groupId, term, (projects) => {
+            this.loading = false;
+            callback(projects);
+          });
+        },
+        renderRow(project) {
+          return `
+            <li>
+              <a href='#' class='dropdown-menu-link' data-project-id="${project.id}" data-project-name="${project.name}">
+                ${_.escape(project.name)}
+              </a>
+            </li>
+          `;
+        },
+        text: project => project.name,
+      });
+    },
+  };
+</script>
+
 <template>
   <div>
     <label class="label-light prepend-top-10">
       Project
     </label>
-    <div ref="projectsDropdown" class="dropdown">
+    <div
+      ref="projectsDropdown"
+      class="dropdown"
+    >
       <button
         class="dropdown-menu-toggle wide"
         type="button"
         data-toggle="dropdown"
-        aria-expanded="false">
+        aria-expanded="false"
+      >
         {{ selectedProjectName }}
-        <i class="fa fa-chevron-down" aria-hidden="true"></i>
+        <i
+          class="fa fa-chevron-down"
+          aria-hidden="true"
+        >
+        </i>
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
           <span>Projects</span>
-          <button aria-label="Close" type="button" class="dropdown-title-button dropdown-menu-close">
-            <i aria-hidden="true" data-hidden="true" class="fa fa-times dropdown-menu-close-icon"></i>
+          <button
+            aria-label="Close"
+            type="button"
+            class="dropdown-title-button dropdown-menu-close"
+          >
+            <i
+              aria-hidden="true"
+              data-hidden="true"
+              class="fa fa-times dropdown-menu-close-icon"
+            >
+            </i>
           </button>
         </div>
         <div class="dropdown-input">
           <input
             class="dropdown-input-field"
             type="search"
-            placeholder="Search projects">
-          <i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i>
+            placeholder="Search projects"
+          />
+          <i
+            aria-hidden="true"
+            data-hidden="true"
+            class="fa fa-search dropdown-input-search"
+          >
+          </i>
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">
@@ -34,70 +125,3 @@
     </div>
   </div>
 </template>
-
-<script>
-/* global ListIssue */
-import eventHub from '../eventhub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-import Api from '../../api';
-
-export default {
-  name: 'BoardProjectSelect',
-  props: {
-    groupId: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      loading: true,
-      selectedProject: {},
-    };
-  },
-  components: {
-    loadingIcon,
-  },
-  computed: {
-    selectedProjectName() {
-      return this.selectedProject.name || 'Select a project';
-    },
-  },
-  mounted() {
-    $(this.$refs.projectsDropdown).glDropdown({
-      filterable: true,
-      filterRemote: true,
-      search: {
-        fields: ['name_with_namespace'],
-      },
-      clicked: ({ $el, e }) => {
-        e.preventDefault();
-        this.selectedProject = {
-          id: $el.data('project-id'),
-          name: $el.data('project-name'),
-        };
-        eventHub.$emit('setSelectedProject', this.selectedProject);
-      },
-      selectable: true,
-      data: (term, callback) => {
-        this.loading = true;
-        return Api.groupProjects(this.groupId, term, (projects) => {
-          this.loading = false;
-          callback(projects);
-        });
-      },
-      renderRow(project) {
-        return `
-          <li>
-            <a href='#' class='dropdown-menu-link' data-project-id="${project.id}" data-project-name="${project.name}">
-              ${_.escape(project.name)}
-            </a>
-          </li>
-        `;
-      },
-      text: project => project.name,
-    });
-  },
-};
-</script>

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

 <script>
-/* global BoardService */
+  /* eslint-disable vue/require-default-prop */
+  /* global BoardService */
 
-import WeightSelect from 'ee/weight_select';
-import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import WeightSelect from 'ee/weight_select';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 
-const ANY_WEIGHT = 'Any Weight';
-const NO_WEIGHT = 'No Weight';
+  const ANY_WEIGHT = 'Any Weight';
+  const NO_WEIGHT = 'No Weight';
 
-export default {
-  props: {
-    board: {
-      type: Object,
-      required: true,
+  export default {
+    components: {
+      loadingIcon,
     },
-    value: {
-      type: [Number, String],
-      required: false,
+    props: {
+      board: {
+        type: Object,
+        required: true,
+      },
+      value: {
+        type: [Number, String],
+        required: false,
+      },
+      canEdit: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      weights: {
+        type: Array,
+        required: true,
+      },
     },
-    canEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
+    data() {
+      return {
+        fieldName: 'weight',
+      };
     },
-    weights: {
-      type: Array,
-      required: true,
+    computed: {
+      valueClass() {
+        if (this.valueText === ANY_WEIGHT) {
+          return 'text-secondary';
+        }
+        return 'bold';
+      },
+      valueText() {
+        if (this.value > 0) return this.value;
+        if (this.value === 0) return NO_WEIGHT;
+        return ANY_WEIGHT;
+      },
     },
-  },
-  data() {
-    return {
-      fieldName: 'weight',
-    };
-  },
-  components: {
-    loadingIcon,
-  },
-  computed: {
-    valueClass() {
-      if (this.valueText === ANY_WEIGHT) {
-        return 'text-secondary';
-      }
-      return 'bold';
+    mounted() {
+      this.weightDropdown = new WeightSelect(this.$refs.dropdownButton, {
+        handleClick: this.selectWeight,
+        selected: this.value,
+        fieldName: this.fieldName,
+      });
     },
-    valueText() {
-      if (this.value > 0) return this.value;
-      if (this.value === 0) return NO_WEIGHT;
-      return ANY_WEIGHT;
+    methods: {
+      selectWeight(weight) {
+        this.board.weight = this.weightInt(weight);
+      },
+      weightInt(weight) {
+        if (weight > 0) {
+          return weight;
+        }
+        if (weight === NO_WEIGHT) {
+          return 0;
+        }
+        return -1;
+      },
     },
-  },
-  methods: {
-    selectWeight(weight) {
-      this.board.weight = this.weightInt(weight);
-    },
-    weightInt(weight) {
-      if (weight > 0) {
-        return weight;
-      }
-      if (weight === NO_WEIGHT) {
-        return 0;
-      }
-      return -1;
-    },
-  },
-  mounted() {
-    this.weightDropdown = new WeightSelect(this.$refs.dropdownButton, {
-      handleClick: this.selectWeight,
-      selected: this.value,
-      fieldName: this.fieldName,
-    });
-  },
-};
+  };
 </script>
 
 <template>
@@ -96,9 +97,9 @@ export default {
     >
       <input
         type="hidden"
-        :name="this.fieldName"
+        :name="fieldName"
       />
-      <div class="dropdown ">
+      <div class="dropdown">
         <button
           ref="dropdownButton"
           class="dropdown-menu-toggle js-weight-select wide"
@@ -113,7 +114,8 @@ export default {
             aria-hidden="true"
             data-hidden="true"
             class="fa fa-chevron-down"
-          />
+          >
+          </i>
         </button>
         <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-weight">
           <div class="dropdown-content ">

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

 <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';
+  /* eslint-disable vue/require-default-prop */
+  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,
+      },
+      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,
+      },
     },
-    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>

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

 <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 extra resources like a load balancer, which incur additional costs. See %{pricingLink}')), {
-          boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
-          pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
-            ${_.escape(s__('ClusterIntegration|GKE pricing'))}
-          </a>`,
-        },
-        false,
-      );
+        const extraCostParagraph = sprintf(
+          _.escape(s__(`ClusterIntegration|%{boldNotice} This will add some
+extra resources like a load balancer,
+which incur additional costs. See %{pricingLink}`)),
+          {
+            boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
+            pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
+              ${_.escape(s__('ClusterIntegration|GKE pricing'))}
+            </a>`,
+          },
+          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.`,
-      ));
-    },
-    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,
-      );
+        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,
+        );
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
@@ -107,26 +116,29 @@ export default {
           :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>

app/assets/javascripts/commit/image_file.js

@@ -94,7 +94,7 @@ export default class ImageFile {
     });
     return [maxWidth, maxHeight];
   }
-
+  // eslint-disable-next-line
   views = {
     'two-up': function() {
       return $('.two-up.view .wrap', this.file).each((function(_this) {

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -4,6 +4,9 @@
   import pipelinesMixin from '../../pipelines/mixins/pipelines';
 
   export default {
+    mixins: [
+      pipelinesMixin,
+    ],
     props: {
       endpoint: {
         type: String,
@@ -31,9 +34,6 @@
         default: 'child',
       },
     },
-    mixins: [
-      pipelinesMixin,
-    ],
 
     data() {
       const store = new PipelineStore();
@@ -95,28 +95,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>

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

@@ -26,28 +26,34 @@
       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.') }}
+        {{ __(`Cycle Analytics gives an overview
+of how much time it takes to go from idea to production in your project.`) }}
       </p>
       <p>
         <a
           :href="documentationLink"
           target="_blank"
           rel="nofollow"
-          class="btn">
-          {{__('Read more')}}
+          class="btn"
+        >
+          {{ __('Read more') }}
         </a>
       </p>
     </div>

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>

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,47 @@
       <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>

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,47 @@
       <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>

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,22 @@
           </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>

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,43 +33,64 @@
       <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"/>
+          <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>
           <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>

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,57 @@
       <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>

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,61 @@
       <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,13 +17,33 @@
 <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>
       --
     </template>
-    </span>
+  </span>
 </template>

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -20,6 +20,16 @@ $(() => {
   gl.cycleAnalyticsApp = new Vue({
     el: '#cycle-analytics',
     name: 'CycleAnalytics',
+    components: {
+      banner,
+      'stage-issue-component': stageComponent,
+      'stage-plan-component': stagePlanComponent,
+      'stage-code-component': stageCodeComponent,
+      'stage-test-component': stageTestComponent,
+      'stage-review-component': stageReviewComponent,
+      'stage-staging-component': stageStagingComponent,
+      'stage-production-component': stageComponent,
+    },
     data() {
       const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
       const cycleAnalyticsService = new CycleAnalyticsService({
@@ -43,16 +53,6 @@ $(() => {
         return this.store.currentActiveStage();
       },
     },
-    components: {
-      banner,
-      'stage-issue-component': stageComponent,
-      'stage-plan-component': stagePlanComponent,
-      'stage-code-component': stageCodeComponent,
-      'stage-test-component': stageTestComponent,
-      'stage-review-component': stageReviewComponent,
-      'stage-staging-component': stageStagingComponent,
-      'stage-production-component': stageComponent,
-    },
     created() {
       this.fetchCycleAnalyticsData();
     },

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/deploy_keys/index.js

@@ -3,14 +3,14 @@ import deployKeysApp from './components/app.vue';
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: document.getElementById('js-deploy-keys'),
+  components: {
+    deployKeysApp,
+  },
   data() {
     return {
       endpoint: this.$options.el.dataset.endpoint,
     };
   },
-  components: {
-    deployKeysApp,
-  },
   render(createElement) {
     return createElement('deploy-keys-app', {
       props: {

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/deploy_board_component.vue

@@ -61,28 +61,30 @@
 
       <section class="deploy-board-information">
         <span>
-          <span class="percentage">{{deployBoardData.completion}}%</span>
+          <span class="percentage">{{ deployBoardData.completion }}%</span>
           <span class="text">Complete</span>
         </span>
       </section>
 
       <section class="deploy-board-instances">
-        <p class="text">{{instanceTitle}}</p>
+        <p class="text">{{ instanceTitle }}</p>
 
         <div class="deploy-board-instances-container">
-          <template v-for="instance in deployBoardData.instances">
+          <template v-for="(instance, i) in deployBoardData.instances">
             <instance-component
               :status="instance.status"
               :tooltip-text="instance.tooltip"
               :stable="instance.stable"
-              />
+              :key="i"
+            />
           </template>
         </div>
       </section>
 
       <section
         class="deploy-board-actions"
-        v-if="deployBoardData.rollback_url || deployBoardData.abort_url">
+        v-if="deployBoardData.rollback_url || deployBoardData.abort_url"
+      >
         <a
           class="btn"
           data-method="post"
@@ -112,10 +114,11 @@
       <section class="deploy-board-empty-state-text">
         <span class="title">Kubernetes deployment not found</span>
         <span>
-          To see deployment progress for your environments, make sure your deployments are in Kubernetes namespace
-          <code>{{projectName}}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
+          To see deployment progress for your environments,
+          make sure your deployments are in Kubernetes namespace
+          <code>{{ projectName }}</code> and labeled with <code>app=$CI_ENVIRONMENT_SLUG</code>.
         </span>
       </section>
     </div>
   </div>
-</script>
+</template>

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

 <script>
-/**
- * An instance in deploy board is represented by a square in this mockup:
- * https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
- *
- * Each instance has a state and a tooltip.
- * The state needs to be represented in different colors,
- * see more information about this in
- * https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
- *
- * An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
- * this information in the tooltip and the colors.
- * Mockup is https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1551#note_26595150
- */
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+   * An instance in deploy board is represented by a square in this mockup:
+   * https://gitlab.com/gitlab-org/gitlab-ce/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
+   *
+   * Each instance has a state and a tooltip.
+   * The state needs to be represented in different colors,
+   * see more information about this in
+   * https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
+   *
+   * An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
+   * this information in the tooltip and the colors.
+   * Mockup is https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1551#note_26595150
+   */
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    /**
-     * Represents the status of the pod. Each state is represented with a different
-     * color.
-     * It should be one of the following:
-     * finished || deploying || failed || ready || preparing || waiting
-     */
-    status: {
-      type: String,
-      required: true,
-      default: 'finished',
+  export default {
+    directives: {
+      tooltip,
     },
 
-    tooltipText: {
-      type: String,
-      required: false,
-      default: '',
-    },
+    props: {
+      /**
+       * Represents the status of the pod. Each state is represented with a different
+       * color.
+       * It should be one of the following:
+       * finished || deploying || failed || ready || preparing || waiting
+       */
+      status: {
+        type: String,
+        required: true,
+        default: 'finished',
+      },
 
-    stable: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
+      tooltipText: {
+        type: String,
+        required: false,
+        default: '',
+      },
 
-  directives: {
-    tooltip,
-  },
+      stable: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+    },
 
-  computed: {
-    cssClass() {
-      let cssClassName = `deploy-board-instance-${this.status}`;
+    computed: {
+      cssClass() {
+        let cssClassName = `deploy-board-instance-${this.status}`;
 
-      if (!this.stable) {
-        cssClassName = `${cssClassName} deploy-board-instance-canary`;
-      }
+        if (!this.stable) {
+          cssClassName = `${cssClassName} deploy-board-instance-canary`;
+        }
 
-      return cssClassName;
+        return cssClassName;
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <div
@@ -64,6 +64,7 @@ export default {
     class="deploy-board-instance"
     :class="cssClass"
     :data-title="tooltipText"
-    data-placement="top">
+    data-placement="top"
+  >
   </div>
 </template>

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

 <script>
   export default {
-    name: 'environmentsEmptyState',
+    name: 'EnvironmentsEmptyState',
     props: {
       newPath: {
         type: String,
@@ -21,21 +21,23 @@
   <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 +63,33 @@ 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">
+        </i>
         <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,
     },
-  },
 
-  directives: {
-    tooltip,
-  },
+    props: {
+      externalUrl: {
+        type: String,
+        required: true,
+      },
+    },
 
-  computed: {
-    title() {
-      return s__('Environments|Open');
+    computed: {
+      title() {
+        return s__('Environments|Open');
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
@@ -33,9 +33,12 @@ export default {
     rel="noopener noreferrer nofollow"
     :title="title"
     :aria-label="title"
-    :href="externalUrl">
+    :href="externalUrl"
+  >
     <i
       class="fa fa-external-link"
-      aria-hidden="true" />
+      aria-hidden="true"
+    >
+    </i>
   </a>
 </template>

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

 <script>
-/**
- * Renders the Monitoring (Metrics) link in environments table.
- */
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+   * Renders the Monitoring (Metrics) link in environments table.
+   */
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    monitoringUrl: {
-      type: String,
-      required: true,
+  export default {
+    directives: {
+      tooltip,
+    },
+    props: {
+      monitoringUrl: {
+        type: String,
+        required: true,
+      },
     },
-  },
-
-  directives: {
-    tooltip,
-  },
 
-  computed: {
-    title() {
-      return 'Monitoring';
+    computed: {
+      title() {
+        return 'Monitoring';
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
@@ -31,10 +30,12 @@ export default {
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
-    :aria-label="title">
+    :aria-label="title"
+  >
     <i
       class="fa fa-area-chart"
       aria-hidden="true"
-      />
+    >
+    </i>
   </a>
 </template>

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

 <script>
-/**
- * Renders Rollback or Re deploy button in environments table depending
- * of the provided property `isLastDeployment`.
- *
- * Makes a post request when the button is clicked.
- */
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-
-export default {
-  props: {
-    retryUrl: {
-      type: String,
-      default: '',
+  /**
+   * Renders Rollback or Re deploy button in environments table depending
+   * of the provided property `isLastDeployment`.
+   *
+   * Makes a post request when the button is clicked.
+   */
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    components: {
+      loadingIcon,
     },
-
-    isLastDeployment: {
-      type: Boolean,
-      default: true,
+    props: {
+      retryUrl: {
+        type: String,
+        default: '',
+      },
+
+      isLastDeployment: {
+        type: Boolean,
+        default: true,
+      },
     },
-  },
 
-  components: {
-    loadingIcon,
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
 
-  methods: {
-    onClick() {
-      this.isLoading = true;
+    methods: {
+      onClick() {
+        this.isLoading = true;
 
-      eventHub.$emit('postAction', this.retryUrl);
+        eventHub.$emit('postAction', this.retryUrl);
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <button
     type="button"
     class="btn hidden-xs hidden-sm"
     @click="onClick"
-    :disabled="isLoading">
+    :disabled="isLoading"
+  >
 
     <span v-if="isLastDeployment">
-      {{s__("Environments|Re-deploy")}}
+      {{ s__("Environments|Re-deploy") }}
     </span>
     <span v-else>
-      {{s__("Environments|Rollback")}}
+      {{ s__("Environments|Rollback") }}
     </span>
 
     <loading-icon v-if="isLoading" />

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

 <script>
-/**
- * Renders the stop "button" that allows stop an environment.
- * Used in environments table.
- */
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+   * Renders the stop "button" that allows stop an environment.
+   * Used in environments table.
+   */
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    stopUrl: {
-      type: String,
-      default: '',
+  export default {
+    components: {
+      loadingIcon,
+    },
+    directives: {
+      tooltip,
     },
-  },
-
-  directives: {
-    tooltip,
-  },
 
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
+    props: {
+      stopUrl: {
+        type: String,
+        default: '',
+      },
+    },
 
-  components: {
-    loadingIcon,
-  },
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
 
-  computed: {
-    title() {
-      return 'Stop';
+    computed: {
+      title() {
+        return 'Stop';
+      },
     },
-  },
 
-  methods: {
-    onClick() {
-      // eslint-disable-next-line no-alert
-      if (confirm('Are you sure you want to stop this environment?')) {
-        this.isLoading = true;
+    methods: {
+      onClick() {
+        // eslint-disable-next-line no-alert
+        if (confirm('Are you sure you want to stop this environment?')) {
+          this.isLoading = true;
 
-        $(this.$el).tooltip('destroy');
+          $(this.$el).tooltip('destroy');
 
-        eventHub.$emit('postAction', this.stopUrl);
-      }
+          eventHub.$emit('postAction', this.stopUrl);
+        }
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <button
@@ -58,10 +57,13 @@ export default {
     @click="onClick"
     :disabled="isLoading"
     :title="title"
-    :aria-label="title">
+    :aria-label="title"
+  >
     <i
       class="fa fa-stop stop-env-icon"
-      aria-hidden="true" />
+      aria-hidden="true"
+    >
+    </i>
     <loading-icon v-if="isLoading" />
   </button>
 </template>

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

 <script>
-/**
- * Renders a terminal button to open a web terminal.
- * Used in environments table.
- */
-import terminalIconSvg from 'icons/_icon_terminal.svg';
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+   * Renders a terminal button to open a web terminal.
+   * Used in environments table.
+   */
+  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    terminalPath: {
-      type: String,
-      required: false,
-      default: '',
+  export default {
+    directives: {
+      tooltip,
+    },
+    props: {
+      terminalPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        terminalIconSvg,
+      };
     },
-  },
-
-  directives: {
-    tooltip,
-  },
-
-  data() {
-    return {
-      terminalIconSvg,
-    };
-  },
 
-  computed: {
-    title() {
-      return 'Terminal';
+    computed: {
+      title() {
+        return 'Terminal';
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
@@ -40,6 +38,7 @@ export default {
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg">
+    v-html="terminalIconSvg"
+  >
   </a>
 </template>

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

@@ -7,6 +7,15 @@
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
+    components: {
+      emptyState,
+    },
+
+    mixins: [
+      CIPaginationMixin,
+      environmentsMixin,
+    ],
+
     props: {
       endpoint: {
         type: String,
@@ -37,14 +46,6 @@
         required: true,
       },
     },
-    components: {
-      emptyState,
-    },
-
-    mixins: [
-      CIPaginationMixin,
-      environmentsMixin,
-    ],
 
     created() {
       eventHub.$on('toggleFolder', this.toggleFolder);
@@ -105,15 +106,17 @@
         :tabs="tabs"
         @onChangeTab="onChangeTab"
         scope="environments"
-        />
+      />
 
       <div
         v-if="canCreateEnvironment && !isLoading"
-        class="nav-controls">
+        class="nav-controls"
+      >
         <a
           :href="newEnvironmentPath"
-          class="btn btn-create">
-          {{s__("Environments|New environment")}}
+          class="btn btn-create"
+        >
+          {{ s__("Environments|New environment") }}
         </a>
       </div>
     </div>
@@ -126,13 +129,13 @@
       :can-read-environment="canReadEnvironment"
       @onChangePage="onChangePage"
     >
-     <empty-state
+      <empty-state
         slot="emptyState"
         v-if="!isLoading && state.environments.length === 0"
         :new-path="newEnvironmentPath"
         :help-path="helpPagePath"
         :can-create-environment="canCreateEnvironment"
-        />
+      />
     </container>
   </div>
 </template>

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

@@ -37,68 +37,108 @@ export default {
     folderUrl(model) {
       return `${window.location.pathname}/folders/${model.folderName}`;
     },
+    shouldRenderFolderContent(env) {
+      return env.isFolder &&
+        env.isOpen &&
+        env.children &&
+        env.children.length > 0;
+    },
   },
 };
 </script>
 <template>
-  <div class="ci-table" role="grid">
-    <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 environments-name" role="columnheader">
-        {{s__("Environments|Environment")}}
+  <div
+    class="ci-table"
+    role="grid"
+  >
+    <div
+      class="gl-responsive-table-row table-row-header"
+      role="row"
+    >
+      <div
+        class="table-section section-10 environments-name"
+        role="columnheader"
+      >
+        {{ s__("Environments|Environment") }}
       </div>
-      <div class="table-section section-10 environments-deploy" role="columnheader">
-        {{s__("Environments|Deployment")}}
+      <div
+        class="table-section section-10 environments-deploy"
+        role="columnheader"
+      >
+        {{ s__("Environments|Deployment") }}
       </div>
-      <div class="table-section section-15 environments-build" role="columnheader">
-        {{s__("Environments|Job")}}
+      <div
+        class="table-section section-15 environments-build"
+        role="columnheader"
+      >
+        {{ s__("Environments|Job") }}
       </div>
-      <div class="table-section section-25 environments-commit" role="columnheader">
-        {{s__("Environments|Commit")}}
+      <div
+        class="table-section section-25 environments-commit"
+        role="columnheader"
+      >
+        {{ s__("Environments|Commit") }}
       </div>
-      <div class="table-section section-10 environments-date" role="columnheader">
-        {{s__("Environments|Updated")}}
+      <div
+        class="table-section section-10 environments-date"
+        role="columnheader"
+      >
+        {{ s__("Environments|Updated") }}
       </div>
     </div>
     <template
-      v-for="model in environments"
-      v-bind:model="model">
+      v-for="(model, i) in environments"
+      :model="model"
+    >
       <div
         is="environment-item"
         :model="model"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
-        />
+        :key="i"
+      />
 
-      <div v-if="model.hasDeployBoard && model.isDeployBoardVisible" class="js-deploy-board-row">
+      <div
+        v-if="model.hasDeployBoard && model.isDeployBoardVisible"
+        class="js-deploy-board-row"
+        :key="i"
+      >
         <div class="deploy-board-container">
           <deploy-board
             :deploy-board-data="model.deployBoardData"
             :is-loading="model.isLoadingDeployBoard"
             :is-empty="model.isEmptyDeployBoard"
-            />
+          />
         </div>
       </div>
 
-      <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-        <div v-if="model.isLoadingFolderContent">
+      <template
+        v-if="shouldRenderFolderContent(model)"
+      >
+        <div
+          v-if="model.isLoadingFolderContent"
+          :key="i"
+        >
           <loading-icon size="2" />
         </div>
 
         <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="index"
+          />
 
-          <div>
+          <div :key="i">
             <div class="text-center prepend-top-10">
               <a
                 :href="folderUrl(model)"
-                class="btn btn-default">
-                {{s__("Environments|Show all")}}
+                class="btn btn-default"
+              >
+                {{ s__("Environments|Show all") }}
               </a>
             </div>
           </div>

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -3,6 +3,10 @@
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
+    mixins: [
+      environmentsMixin,
+      CIPaginationMixin,
+    ],
     props: {
       endpoint: {
         type: String,
@@ -26,11 +30,6 @@
       },
     },
 
-    mixins: [
-      environmentsMixin,
-      CIPaginationMixin,
-    ],
-
     methods: {
       successCallback(resp) {
         this.saveData(resp);
@@ -42,17 +41,18 @@
   <div :class="cssContainerClass">
     <div
       class="top-area"
-      v-if="!isLoading">
+      v-if="!isLoading"
+    >
 
       <h4 class="js-folder-name environments-folder-name">
-        {{s__("Environments|Environments")}} / <b>{{folderName}}</b>
+        {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
       </h4>
 
       <tabs
         :tabs="tabs"
         @onChangeTab="onChangeTab"
         scope="environments"
-        />
+      />
     </div>
 
     <container
@@ -62,6 +62,6 @@
       :can-create-deployment="canCreateDeployment"
       :can-read-environment="canReadEnvironment"
       @onChangePage="onChangePage"
-      />
+    />
   </div>
 </template>

app/assets/javascripts/filtered_search/recent_searches_root.js

@@ -32,6 +32,9 @@ class RecentSearchesRoot {
     const state = this.store.state;
     this.vm = new Vue({
       el: this.wrapperElement,
+      components: {
+        'recent-searches-dropdown-content': RecentSearchesDropdownContent,
+      },
       data() { return state; },
       template: `
         <recent-searches-dropdown-content
@@ -40,9 +43,6 @@ class RecentSearchesRoot {
           :allowed-keys="allowedKeys"
           />
       `,
-      components: {
-        'recent-searches-dropdown-content': RecentSearchesDropdownContent,
-      },
     });
   }
 

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

@@ -42,6 +42,26 @@ export default {
       return this.store.getPaginationInfo();
     },
   },
+  created() {
+    this.searchEmptyMessage = this.hideProjects ?
+      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+
+    eventHub.$on('fetchPage', this.fetchPage);
+    eventHub.$on('toggleChildren', this.toggleChildren);
+    eventHub.$on('leaveGroup', this.leaveGroup);
+    eventHub.$on('updatePagination', this.updatePagination);
+    eventHub.$on('updateGroups', this.updateGroups);
+  },
+  mounted() {
+    this.fetchAllGroups();
+  },
+  beforeDestroy() {
+    eventHub.$off('fetchPage', this.fetchPage);
+    eventHub.$off('toggleChildren', this.toggleChildren);
+    eventHub.$off('leaveGroup', this.leaveGroup);
+    eventHub.$off('updatePagination', this.updatePagination);
+    eventHub.$off('updateGroups', this.updateGroups);
+  },
   methods: {
     fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
       return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
@@ -152,26 +172,6 @@ export default {
       }
     },
   },
-  created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
-
-    eventHub.$on('fetchPage', this.fetchPage);
-    eventHub.$on('toggleChildren', this.toggleChildren);
-    eventHub.$on('leaveGroup', this.leaveGroup);
-    eventHub.$on('updatePagination', this.updatePagination);
-    eventHub.$on('updateGroups', this.updateGroups);
-  },
-  mounted() {
-    this.fetchAllGroups();
-  },
-  beforeDestroy() {
-    eventHub.$off('fetchPage', this.fetchPage);
-    eventHub.$off('toggleChildren', this.toggleChildren);
-    eventHub.$off('leaveGroup', this.leaveGroup);
-    eventHub.$off('updatePagination', this.updatePagination);
-    eventHub.$off('updateGroups', this.updateGroups);
-  },
 };
 </script>
 

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

@@ -20,7 +20,11 @@ export default {
       return this.parentGroup.childrenCount > MAX_CHILDREN_COUNT;
     },
     moreChildrenStats() {
-      return n__('One more item', '%d more items', this.parentGroup.childrenCount - this.parentGroup.children.length);
+      return n__(
+        'One more item',
+        '%d more items',
+        this.parentGroup.childrenCount - this.parentGroup.children.length,
+      );
     },
   },
 };
@@ -43,8 +47,9 @@ export default {
         <i
           class="fa fa-external-link"
           aria-hidden="true"
-        />
-        {{moreChildrenStats}}
+        >
+        </i>
+        {{ moreChildrenStats }}
       </a>
     </li>
   </ul>

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

 <script>
-import tablePagination from '~/vue_shared/components/table_pagination.vue';
-import eventHub from '../event_hub';
-import { getParameterByName } from '../../lib/utils/common_utils';
+  import tablePagination from '~/vue_shared/components/table_pagination.vue';
+  import eventHub from '../event_hub';
+  import { getParameterByName } from '../../lib/utils/common_utils';
 
-export default {
-  components: {
-    tablePagination,
-  },
-  props: {
-    groups: {
-      type: Array,
-      required: true,
+  export default {
+    components: {
+      tablePagination,
     },
-    pageInfo: {
-      type: Object,
-      required: true,
+    props: {
+      groups: {
+        type: Array,
+        required: true,
+      },
+      pageInfo: {
+        type: Object,
+        required: true,
+      },
+      searchEmpty: {
+        type: Boolean,
+        required: true,
+      },
+      searchEmptyMessage: {
+        type: String,
+        required: true,
+      },
     },
-    searchEmpty: {
-      type: Boolean,
-      required: true,
+    methods: {
+      change(page) {
+        const filterGroupsParam = getParameterByName('filter_groups');
+        const sortParam = getParameterByName('sort');
+        const archivedParam = getParameterByName('archived');
+        eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
+      },
     },
-    searchEmptyMessage: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    change(page) {
-      const filterGroupsParam = getParameterByName('filter_groups');
-      const sortParam = getParameterByName('sort');
-      const archivedParam = getParameterByName('archived');
-      eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
-    },
-  },
-};
+  };
 </script>
 
 <template>
   <div class="groups-list-tree-container">
     <div
       v-if="searchEmpty"
-      class="has-no-search-results">
-      {{searchEmptyMessage}}
+      class="has-no-search-results"
+    >
+      {{ searchEmptyMessage }}
     </div>
     <group-folder
       v-if="!searchEmpty"
@@ -50,7 +51,7 @@ export default {
     <table-pagination
       v-if="!searchEmpty"
       :change="change"
-      :pageInfo="pageInfo"
+      :page-info="pageInfo"
     />
   </div>
 </template>

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

 <script>
-import { s__ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
-import eventHub from '../event_hub';
-import { COMMON_STR } from '../constants';
+  import { s__ } from '~/locale';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import icon from '~/vue_shared/components/icon.vue';
+  import modal from '~/vue_shared/components/modal.vue';
+  import eventHub from '../event_hub';
+  import { COMMON_STR } from '../constants';
 
-export default {
-  components: {
-    icon,
-    modal,
-  },
-  directives: {
-    tooltip,
-  },
-  props: {
-    parentGroup: {
-      type: Object,
-      required: false,
-      default: () => ({}),
+  export default {
+    components: {
+      icon,
+      modal,
     },
-    group: {
-      type: Object,
-      required: true,
+    directives: {
+      tooltip,
     },
-  },
-  data() {
-    return {
-      modalStatus: false,
-    };
-  },
-  computed: {
-    leaveBtnTitle() {
-      return COMMON_STR.LEAVE_BTN_TITLE;
+    props: {
+      parentGroup: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      group: {
+        type: Object,
+        required: true,
+      },
     },
-    editBtnTitle() {
-      return COMMON_STR.EDIT_BTN_TITLE;
+    data() {
+      return {
+        modalStatus: false,
+      };
     },
-    leaveConfirmationMessage() {
-      return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`);
+    computed: {
+      leaveBtnTitle() {
+        return COMMON_STR.LEAVE_BTN_TITLE;
+      },
+      editBtnTitle() {
+        return COMMON_STR.EDIT_BTN_TITLE;
+      },
+      leaveConfirmationMessage() {
+        return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`);
+      },
     },
-  },
-  methods: {
-    onLeaveGroup() {
-      this.modalStatus = true;
+    methods: {
+      onLeaveGroup() {
+        this.modalStatus = true;
+      },
+      leaveGroup() {
+        this.modalStatus = false;
+        eventHub.$emit('leaveGroup', this.group, this.parentGroup);
+      },
     },
-    leaveGroup() {
-      this.modalStatus = false;
-      eventHub.$emit('leaveGroup', this.group, this.parentGroup);
-    },
-  },
-};
+  };
 </script>
 
 <template>

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

@@ -32,7 +32,6 @@
         this.$emit('toggleCollapsed');
       },
     },
-
   };
 </script>
 

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

@@ -40,7 +40,7 @@ export default {
         aria-hidden="true">
       </i>
       <span>
-        {{buttonLabel}}
+        {{ buttonLabel }}
       </span>
     </button>
     <modal