Merge branch 'master' into gl-remove-window-scope

* master:
  Add documentation: Overview of Frontend Testing
  Resolve "Add `/confidential` quick action for issues"
  i18n: externalize strings from 'app/views/award_emoji'
  Fix broken tests due to bad conflict resolution
  Updates eslint rules
  Documentation does not need an exception to be picked
  Fix conflicts caused by vue_shared/components/user_avatar/user_avatar_image.vue
  [Rails5] Fix `storage_counter` helper
  Adjust SQL and transaction Prometheus buckets
  Updates eslint vue plugin version

261 files changed, 1399 insertions, 1105 deletions

diff --git a/PROCESS.md b/PROCESS.md
index 958bc7b9edc..a46fd8c25b4 100644
--- a/PROCESS.md
+++ b/PROCESS.md
@@ -169,6 +169,7 @@ the stable branch are:
 * Fixes for [regressions](#regressions)
 * Fixes for security issues
 * Fixes or improvements to automated QA scenarios
+* Documentation updates for changes in the same release
 * New or updated translations (as long as they do not touch application code)
 
 During the feature freeze all merge requests that are meant to go into the
diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index d0f60e1d4cb..b4bfaee1d85 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -72,11 +72,11 @@ export default {
       rel="noopener noreferrer"
     >
       <img
-        class="project-badge"
         :src="imageUrlWithRetries"
+        class="project-badge"
+        aria-hidden="true"
         @load="onLoad"
         @error="onError"
-        aria-hidden="true"
       />
     </a>
 
@@ -91,9 +91,9 @@ export default {
     >
       <div class="btn btn-default btn-sm disabled">
         <icon
+          :size="16"
           class="prepend-left-8 append-right-8"
           name="doc_image"
-          :size="16"
           aria-hidden="true"
         />
       </div>
@@ -105,16 +105,16 @@ export default {
     </div>
 
     <button
+      v-tooltip
       v-show="hasError"
+      :title="s__('Badges|Reload badge image')"
       class="btn btn-transparent btn-sm text-primary"
       type="button"
-      v-tooltip
-      :title="s__('Badges|Reload badge image')"
       @click="reloadImage"
     >
       <icon
-        name="retry"
         :size="16"
+        name="retry"
       />
     </button>
   </div>
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 5975cb9669e..7a13f74c570 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -153,10 +153,10 @@ export default {
       <label for="badge-link-url">{{ s__('Badges|Link') }}</label>
       <input
         id="badge-link-url"
-        type="text"
-        class="form-control"
         v-model="linkUrl"
         :placeholder="$options.badgeLinkUrlPlaceholder"
+        type="text"
+        class="form-control"
         @input="debouncedPreview"
       />
       <span
@@ -169,10 +169,10 @@ export default {
       <label for="badge-image-url">{{ s__('Badges|Badge image URL') }}</label>
       <input
         id="badge-image-url"
-        type="text"
-        class="form-control"
         v-model="imageUrl"
         :placeholder="$options.badgeImageUrlPlaceholder"
+        type="text"
+        class="form-control"
         @input="debouncedPreview"
       />
       <span
@@ -184,8 +184,8 @@ export default {
     <div class="form-group">
       <label for="badge-preview">{{ s__('Badges|Badge image preview') }}</label>
       <badge
-        id="badge-preview"
         v-show="renderedBadge && !isRendering"
+        id="badge-preview"
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
@@ -202,16 +202,16 @@ export default {
 
     <div class="row-content-block">
       <loading-button
-        type="submit"
-        container-class="btn btn-success"
         :disabled="!canSubmit"
         :loading="isSaving"
         :label="submitButtonLabel"
+        type="submit"
+        container-class="btn btn-success"
       />
       <button
+        v-if="isEditing"
         class="btn btn-cancel"
         type="button"
-        v-if="isEditing"
         @click="onCancel"
       >{{ __('Cancel') }}</button>
     </div>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index af062bdf8c6..98aa00af0d7 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -41,9 +41,9 @@ export default {
 <template>
   <div class="gl-responsive-table-row-layout gl-responsive-table-row">
     <badge
-      class="table-section section-30"
       :image-url="badge.renderedImageUrl"
       :link-url="badge.renderedLinkUrl"
+      class="table-section section-30"
     />
     <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span>
     <div class="table-section section-10">
@@ -54,29 +54,29 @@ export default {
         v-if="canEditBadge"
         class="table-action-buttons">
         <button
+          :disabled="badge.isDeleting"
           class="btn btn-default append-right-8"
           type="button"
-          :disabled="badge.isDeleting"
           @click="editBadge(badge)"
         >
           <icon
-            name="pencil"
             :size="16"
             :aria-label="__('Edit')"
+            name="pencil"
           />
         </button>
         <button
+          :disabled="badge.isDeleting"
           class="btn btn-danger"
           type="button"
           data-toggle="modal"
           data-target="#delete-badge-modal"
-          :disabled="badge.isDeleting"
           @click="updateBadgeInModal(badge)"
         >
           <icon
-            name="remove"
             :size="16"
             :aria-label="__('Delete')"
+            name="remove"
           />
         </button>
         <loading-icon
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 83f78394238..cc47e56dd1e 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -44,8 +44,8 @@ export default {
     <gl-modal
       id="delete-badge-modal"
       :header-title-text="s__('Badges|Delete badge?')"
-      footer-primary-button-variant="danger"
       :footer-primary-button-text="s__('Badges|Delete badge')"
+      footer-primary-button-variant="danger"
       @submit="onSubmitModal">
       <div class="well">
         <badge
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index ac06d79fb60..86b888c66c8 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -14,17 +14,28 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.Board = Vue.extend({
-  template: '#js-board-template',
   components: {
     boardList,
     'board-delete': gl.issueBoards.BoardDelete,
     BoardBlankState,
   },
   props: {
-    list: Object,
-    disabled: Boolean,
-    issueLinkBase: String,
-    rootPath: String,
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
     boardId: {
       type: String,
       required: true,
@@ -82,20 +93,6 @@ gl.issueBoards.Board = Vue.extend({
       deep: true
     }
   },
-  methods: {
-    showNewIssueForm() {
-      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-    },
-    toggleExpanded(e) {
-      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
-        this.list.isExpanded = !this.list.isExpanded;
-
-        if (AccessorUtilities.isLocalStorageAccessSafe()) {
-          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
-        }
-      }
-    },
-  },
   mounted () {
     this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
       disabled: this.disabled,
@@ -125,4 +122,19 @@ gl.issueBoards.Board = Vue.extend({
       this.list.isExpanded = !isCollapsed;
     }
   },
+  methods: {
+    showNewIssueForm() {
+      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
+    },
+    toggleExpanded(e) {
+      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+        this.list.isExpanded = !this.list.isExpanded;
+
+        if (AccessorUtilities.isLocalStorageAccessSafe()) {
+          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
+        }
+      }
+    },
+  },
+  template: '#js-board-template',
 });
diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue
index 2049eeb9c30..286529b4d13 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.vue
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -72,8 +72,8 @@ export default {
         :key="index"
       >
         <span
-          class="label-color"
-          :style="{ backgroundColor: label.color }">
+          :style="{ backgroundColor: label.color }"
+          class="label-color">
         </span>
         {{ label.title }}
       </li>
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 33e3369b971..b7d3574bc80 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -77,7 +77,6 @@ export default {
 
 <template>
   <li
-    class="board-card"
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
@@ -85,6 +84,7 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
+    class="board-card"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
     @mouseup="showIssue($event)">
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index 7be98825fda..4482b3b3e70 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -8,7 +8,10 @@ window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardDelete = Vue.extend({
   props: {
-    list: Object
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   methods: {
     deleteBoard () {
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 0692c96e767..5c7565234d8 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -205,22 +205,22 @@ export default {
 <template>
   <div class="board-list-component">
     <div
+      v-if="loading"
       class="board-list-loading text-center"
-      aria-label="Loading issues"
-      v-if="loading">
+      aria-label="Loading issues">
       <loading-icon />
     </div>
     <board-new-issue
+      v-if="list.type !== 'closed' && showIssueForm"
       :group-id="groupId"
-      :list="list"
-      v-if="list.type !== 'closed' && showIssueForm"/>
+      :list="list"/>
     <ul
-      class="board-list js-board-list"
       v-show="!loading"
       ref="list"
       :data-board="list.id"
       :data-board-type="list.type"
-      :class="{ 'is-smaller': showIssueForm }">
+      :class="{ 'is-smaller': showIssueForm }"
+      class="board-list js-board-list">
       <board-card
         v-for="(issue, index) in issues"
         ref="issue"
@@ -233,8 +233,8 @@ export default {
         :disabled="disabled"
         :key="issue.id" />
       <li
-        class="board-list-count text-center"
         v-if="showCount"
+        class="board-list-count text-center"
         data-issue-id="-1">
         <loading-icon
           v-show="list.loadingMore"
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index 297c9eff38c..ec23b1e7c11 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -96,26 +96,26 @@ export default {
     <div class="board-card">
       <form @submit="submit($event)">
         <div
-          class="flash-container"
           v-if="error"
+          class="flash-container"
         >
           <div class="flash-alert">
             An error occurred. Please try again.
           </div>
         </div>
         <label
-          class="label-light"
           :for="list.id + '-title'"
+          class="label-light"
         >
           Title
         </label>
         <input
+          ref="input"
+          v-model="title"
+          :id="list.id + '-title'"
           class="form-control"
           type="text"
-          v-model="title"
-          ref="input"
           autocomplete="off"
-          :id="list.id + '-title'"
         />
         <project-select
           v-if="groupId"
@@ -123,10 +123,10 @@ export default {
         />
         <div class="clearfix prepend-top-10">
           <button
+            ref="submit-button"
+            :disabled="disabled"
             class="btn btn-success float-left"
             type="submit"
-            :disabled="disabled"
-            ref="submit-button"
           >
             Submit issue
           </button>
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index c4ee4f6c855..82fe6b0c5fb 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -21,8 +21,17 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.BoardSidebar = Vue.extend({
+  components: {
+    assigneeTitle,
+    assignees,
+    removeBtn: gl.issueBoards.RemoveIssueBtn,
+    subscriptions,
+  },
   props: {
-    currentUser: Object
+    currentUser: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -64,6 +73,26 @@ gl.issueBoards.BoardSidebar = Vue.extend({
       deep: true
     },
   },
+  created () {
+    // Get events from glDropdown
+    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$on('sidebar.addAssignee', this.addAssignee);
+    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
+  },
+  beforeDestroy() {
+    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
+    eventHub.$off('sidebar.addAssignee', this.addAssignee);
+    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
+    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
+  },
+  mounted () {
+    new IssuableContext(this.currentUser);
+    new MilestoneSelect();
+    new DueDateSelectors();
+    new LabelsSelect();
+    new Sidebar();
+  },
   methods: {
     closeSidebar () {
       this.detail.issue = {};
@@ -97,30 +126,4 @@ gl.issueBoards.BoardSidebar = Vue.extend({
         });
     },
   },
-  created () {
-    // Get events from glDropdown
-    eventHub.$on('sidebar.removeAssignee', this.removeAssignee);
-    eventHub.$on('sidebar.addAssignee', this.addAssignee);
-    eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
-    eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
-  },
-  beforeDestroy() {
-    eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
-    eventHub.$off('sidebar.addAssignee', this.addAssignee);
-    eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
-    eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
-  },
-  mounted () {
-    new IssuableContext(this.currentUser);
-    new MilestoneSelect();
-    new DueDateSelectors();
-    new LabelsSelect();
-    new Sidebar();
-  },
-  components: {
-    assigneeTitle,
-    assignees,
-    removeBtn: gl.issueBoards.RemoveIssueBtn,
-    subscriptions,
-  },
 });
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index dcc07810d01..f7d7b910e2f 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -9,6 +9,9 @@ window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
 
 gl.issueBoards.IssueCardInner = Vue.extend({
+  components: {
+    UserAvatarLink,
+  },
   props: {
     issue: {
       type: Object,
@@ -35,6 +38,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
     groupId: {
       type: Number,
       required: false,
+      default: null,
     },
   },
   data() {
@@ -44,9 +48,6 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       maxCounter: 99,
     };
   },
-  components: {
-    UserAvatarLink,
-  },
   computed: {
     numberOverLimit() {
       return this.issue.assignees.length - this.limitBeforeCounter;
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
index 1e5f2383223..888bc9d7ef2 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.js
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js
@@ -4,9 +4,6 @@ import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalEmptyState = Vue.extend({
   mixins: [modalMixin],
-  data() {
-    return ModalStore.store;
-  },
   props: {
     newIssuePath: {
       type: String,
@@ -17,6 +14,9 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
       required: true,
     },
   },
+  data() {
+    return ModalStore.store;
+  },
   computed: {
     contents() {
       const obj = {
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index 11bb3e98334..2745ca219ad 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -7,6 +7,9 @@ import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalFooter = Vue.extend({
+  components: {
+    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+  },
   mixins: [modalMixin],
   data() {
     return {
@@ -52,9 +55,6 @@ gl.issueBoards.ModalFooter = Vue.extend({
       this.toggleModal(false);
     },
   },
-  components: {
-    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
-  },
   template: `
     <footer
       class="form-actions add-issues-footer">
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
index 67c29ebca72..5e511bb8935 100644
--- a/app/assets/javascripts/boards/components/modal/header.js
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -5,6 +5,10 @@ import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
 gl.issueBoards.ModalHeader = Vue.extend({
+  components: {
+    'modal-tabs': gl.issueBoards.ModalTabs,
+    modalFilters,
+  },
   mixins: [modalMixin],
   props: {
     projectId: {
@@ -42,10 +46,6 @@ gl.issueBoards.ModalHeader = Vue.extend({
       ModalStore.toggleAll();
     },
   },
-  components: {
-    'modal-tabs': gl.issueBoards.ModalTabs,
-    modalFilters,
-  },
   template: `
     <div>
       <header class="add-issues-header form-actions">
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index 3083b3e4405..c8b2f45f177 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -10,6 +10,13 @@ import './empty_state';
 import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.IssuesModal = Vue.extend({
+  components: {
+    'modal-header': gl.issueBoards.ModalHeader,
+    'modal-list': gl.issueBoards.ModalList,
+    'modal-footer': gl.issueBoards.ModalFooter,
+    'empty-state': gl.issueBoards.ModalEmptyState,
+    loadingIcon,
+  },
   props: {
     newIssuePath: {
       type: String,
@@ -43,6 +50,22 @@ gl.issueBoards.IssuesModal = Vue.extend({
   data() {
     return ModalStore.store;
   },
+  computed: {
+    showList() {
+      if (this.activeTab === 'selected') {
+        return this.selectedIssues.length > 0;
+      }
+
+      return this.issuesCount > 0;
+    },
+    showEmptyState() {
+      if (!this.loading && this.issuesCount === 0) {
+        return true;
+      }
+
+      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
+    },
+  },
   watch: {
     page() {
       this.loadIssues();
@@ -80,6 +103,9 @@ gl.issueBoards.IssuesModal = Vue.extend({
       deep: true,
     },
   },
+  created() {
+    this.page = 1;
+  },
   methods: {
     loadIssues(clearIssues = false) {
       if (!this.showAddIssuesModal) return false;
@@ -112,32 +138,6 @@ gl.issueBoards.IssuesModal = Vue.extend({
       });
     },
   },
-  computed: {
-    showList() {
-      if (this.activeTab === 'selected') {
-        return this.selectedIssues.length > 0;
-      }
-
-      return this.issuesCount > 0;
-    },
-    showEmptyState() {
-      if (!this.loading && this.issuesCount === 0) {
-        return true;
-      }
-
-      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
-    },
-  },
-  created() {
-    this.page = 1;
-  },
-  components: {
-    'modal-header': gl.issueBoards.ModalHeader,
-    'modal-list': gl.issueBoards.ModalList,
-    'modal-footer': gl.issueBoards.ModalFooter,
-    'empty-state': gl.issueBoards.ModalEmptyState,
-    loadingIcon,
-  },
   template: `
     <div
       class="add-issues-modal"
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
index f86896d2178..11061c72a7b 100644
--- a/app/assets/javascripts/boards/components/modal/list.js
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -3,6 +3,9 @@ import bp from '../../../breakpoints';
 import ModalStore from '../../stores/modal_store';
 
 gl.issueBoards.ModalList = Vue.extend({
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
   props: {
     issueLinkBase: {
       type: String,
@@ -20,13 +23,6 @@ gl.issueBoards.ModalList = Vue.extend({
   data() {
     return ModalStore.store;
   },
-  watch: {
-    activeTab() {
-      if (this.activeTab === 'all') {
-        ModalStore.purgeUnselectedIssues();
-      }
-    },
-  },
   computed: {
     loopIssues() {
       if (this.activeTab === 'all') {
@@ -50,6 +46,25 @@ gl.issueBoards.ModalList = Vue.extend({
       return groups;
     },
   },
+  watch: {
+    activeTab() {
+      if (this.activeTab === 'all') {
+        ModalStore.purgeUnselectedIssues();
+      }
+    },
+  },
+  mounted() {
+    this.scrollHandlerWrapper = this.scrollHandler.bind(this);
+    this.setColumnCountWrapper = this.setColumnCount.bind(this);
+    this.setColumnCount();
+
+    this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
+    window.addEventListener('resize', this.setColumnCountWrapper);
+  },
+  beforeDestroy() {
+    this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
+    window.removeEventListener('resize', this.setColumnCountWrapper);
+  },
   methods: {
     scrollHandler() {
       const currentPage = Math.floor(this.issues.length / this.perPage);
@@ -96,21 +111,6 @@ gl.issueBoards.ModalList = Vue.extend({
       }
     },
   },
-  mounted() {
-    this.scrollHandlerWrapper = this.scrollHandler.bind(this);
-    this.setColumnCountWrapper = this.setColumnCount.bind(this);
-    this.setColumnCount();
-
-    this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
-    window.addEventListener('resize', this.setColumnCountWrapper);
-  },
-  beforeDestroy() {
-    this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
-    window.removeEventListener('resize', this.setColumnCountWrapper);
-  },
-  components: {
-    'issue-card-inner': gl.issueBoards.IssueCardInner,
-  },
   template: `
     <section
       class="add-issues-list add-issues-list-columns"
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 98c0b9c22a8..ec52fdfdf32 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -125,8 +125,8 @@
 
 <template>
   <div
-    class="gl-responsive-table-row gl-responsive-table-row-col-span"
     :class="rowJsClass"
+    class="gl-responsive-table-row gl-responsive-table-row-col-span"
   >
     <div
       class="gl-responsive-table-row-layout"
@@ -155,8 +155,8 @@
         <slot name="description"></slot>
       </div>
       <div
-        class="table-section table-button-footer section-align-top"
         :class="{ 'section-20': showManageButton, 'section-15': !showManageButton }"
+        class="table-section table-button-footer section-align-top"
         role="gridcell"
       >
         <div
@@ -164,18 +164,18 @@
           class="btn-group table-action-buttons"
         >
           <a
-            class="btn"
             :href="manageLink"
+            class="btn"
           >
             {{ manageButtonLabel }}
           </a>
         </div>
         <div class="btn-group table-action-buttons">
           <loading-button
-            class="js-cluster-application-install-button"
             :loading="installButtonLoading"
             :disabled="installButtonDisabled"
             :label="installButtonLabel"
+            class="js-cluster-application-install-button"
             @click="installClicked"
           />
         </div>
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 9d6be555a2c..8ee7279e544 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -152,11 +152,11 @@ export default {
         <application-row
           id="helm"
           :title="applications.helm.title"
-          title-link="https://docs.helm.sh/"
           :status="applications.helm.status"
           :status-reason="applications.helm.statusReason"
           :request-status="applications.helm.requestStatus"
           :request-reason="applications.helm.requestReason"
+          title-link="https://docs.helm.sh/"
         >
           <div slot="description">
             {{ s__(`ClusterIntegration|Helm streamlines installing
@@ -168,11 +168,11 @@ export default {
         <application-row
           :id="ingressId"
           :title="applications.ingress.title"
-          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
           :status="applications.ingress.status"
           :status-reason="applications.ingress.statusReason"
           :request-status="applications.ingress.requestStatus"
           :request-reason="applications.ingress.requestReason"
+          title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
         >
           <div slot="description">
             <p>
@@ -191,10 +191,10 @@ export default {
                   class="input-group"
                 >
                   <input
-                    type="text"
                     id="ingress-ip-address"
-                    class="form-control js-ip-address"
                     :value="ingressExternalIp"
+                    type="text"
+                    class="form-control js-ip-address"
                     readonly
                   />
                   <span class="input-group-append">
@@ -255,12 +255,12 @@ export default {
         <application-row
           id="prometheus"
           :title="applications.prometheus.title"
-          title-link="https://prometheus.io/docs/introduction/overview/"
           :manage-link="managePrometheusPath"
           :status="applications.prometheus.status"
           :status-reason="applications.prometheus.statusReason"
           :request-status="applications.prometheus.requestStatus"
           :request-reason="applications.prometheus.requestReason"
+          title-link="https://prometheus.io/docs/introduction/overview/"
         >
           <div
             slot="description"
@@ -271,11 +271,11 @@ export default {
         <application-row
           id="runner"
           :title="applications.runner.title"
-          title-link="https://docs.gitlab.com/runner/"
           :status="applications.runner.status"
           :status-reason="applications.runner.statusReason"
           :request-status="applications.runner.requestStatus"
           :request-reason="applications.runner.requestReason"
+          title-link="https://docs.gitlab.com/runner/"
         >
           <div slot="description">
             {{ s__(`ClusterIntegration|GitLab Runner connects to this
@@ -287,12 +287,12 @@ export default {
         <application-row
           id="jupyter"
           :title="applications.jupyter.title"
-          title-link="https://jupyterhub.readthedocs.io/en/stable/"
           :status="applications.jupyter.status"
           :status-reason="applications.jupyter.statusReason"
           :request-status="applications.jupyter.requestStatus"
           :request-reason="applications.jupyter.requestReason"
           :install-application-request-params="{ hostname: applications.jupyter.hostname }"
+          title-link="https://jupyterhub.readthedocs.io/en/stable/"
         >
           <div slot="description">
             <p>
@@ -311,10 +311,10 @@ export default {
 
                 <div class="input-group">
                   <input
-                    type="text"
-                    class="form-control js-hostname"
                     v-model="applications.jupyter.hostname"
                     :readonly="jupyterInstalled"
+                    type="text"
+                    class="form-control js-hostname"
                   />
                   <span
                     class="input-group-btn"
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 24d63b99a29..95c4be64d35 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -77,9 +77,9 @@
   <div class="content-list pipelines">
 
     <loading-icon
+      v-if="isLoading"
       :label="s__('Pipelines|Loading Pipelines')"
       size="3"
-      v-if="isLoading"
       class="prepend-top-20"
     />
 
@@ -91,8 +91,8 @@
     />
 
     <div
-      class="table-holder"
       v-else-if="shouldRenderTable"
+      class="table-holder"
     >
       <pipelines-table-component
         :pipelines="state.pipelines"
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 3204b8dd8e7..410d4873e55 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -23,9 +23,9 @@
 <template>
   <div class="landing content-block">
     <button
+      :aria-label="__('Dismiss Cycle Analytics introduction box')"
       class="js-ca-dismiss-button dismiss-button"
       type="button"
-      :aria-label="__('Dismiss Cycle Analytics introduction box')"
       @click="dismissOverviewDialog"
     >
       <i
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
index 5be17081b58..b626b187651 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -19,14 +19,14 @@
     class="events-info float-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
       )"
+      class="fa fa-warning"
+      aria-hidden="true"
       data-placement="top"
     >
     </i>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 907638d798a..312fe75dde4 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -38,8 +38,8 @@
           <user-avatar-image :img-src="issue.author.avatarUrl"/>
           <h5 class="item-title issue-title">
             <a
-              class="issue-title"
               :href="issue.url"
+              class="issue-title"
             >
               {{ issue.title }}
             </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index 34aa04083e6..d4735d030fc 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -74,12 +74,12 @@
           </template>
           <template v-else>
             <span
-              class="merge-request-branch"
               v-if="mergeRequest.branch"
+              class="merge-request-branch"
             >
               <icon
-                name="fork"
                 :size="16"
+                name="fork"
               />
               <a :href="mergeRequest.branch.url">
                 {{ mergeRequest.branch.name }}
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 92f2a95a66a..22637485c01 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -38,8 +38,8 @@
     <ul class="stage-event-list">
       <li
         v-for="(build, i) in items"
-        class="stage-event-item item-build-component"
         :key="i"
+        class="stage-event-item item-build-component"
       >
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
@@ -52,8 +52,8 @@
               #{{ build.id }}
             </a>
             <icon
-              name="fork"
               :size="16"
+              name="fork"
             />
             <a
               :href="build.branch.url"
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index b84bb6ed792..a0796f299e7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -64,8 +64,8 @@
               #{{ build.id }}
             </a>
             <icon
-              name="fork"
               :size="16"
+              name="fork"
             />
             <a
               :href="build.branch.url"
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 67dda0e29cb..7399fc97d45 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -40,9 +40,9 @@ export default {
 
 <template>
   <button
-    class="btn"
     :class="[{ disabled: isLoading }, btnCssClass]"
     :disabled="isLoading"
+    class="btn"
     @click="doAction">
     <slot></slot>
     <loading-icon
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index c41fe55db63..2cfa13fdc75 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -116,8 +116,8 @@ export default {
   <div class="append-bottom-default deploy-keys">
     <loading-icon
       v-if="isLoading && !hasKeys"
-      size="2"
       :label="s__('DeployKeys|Loading deploy keys')"
+      size="2"
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
@@ -138,16 +138,16 @@ export default {
 
         <navigation-tabs
           :tabs="tabs"
-          @onChangeTab="onChangeTab"
           scope="deployKeys"
+          @onChangeTab="onChangeTab"
         />
       </div>
       <keys-panel
-        class="qa-project-deploy-keys"
         :project-id="projectId"
         :keys="keys[currentTab]"
         :store="store"
         :endpoint="endpoint"
+        class="qa-project-deploy-keys"
       />
     </template>
   </div>
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index 6c2af7fa768..f66ca070445 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -135,9 +135,9 @@ export default {
       <div class="table-mobile-content deploy-project-list">
         <template v-if="projects.length > 0">
           <a
-            class="label deploy-project-label"
-            :title="projectTooltipTitle(firstProject)"
             v-tooltip
+            :title="projectTooltipTitle(firstProject)"
+            class="label deploy-project-label"
           >
             <span>
               {{ firstProject.project.full_name }}
@@ -145,22 +145,22 @@ export default {
             <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
           </a>
           <a
+            v-tooltip
             v-if="isExpandable"
+            :title="restProjectsTooltip"
             class="label deploy-project-label"
             @click="toggleExpanded"
-            :title="restProjectsTooltip"
-            v-tooltip
           >
             <span>{{ restProjectsLabel }}</span>
           </a>
           <a
-            v-else-if="isExpanded"
+            v-tooltip
             v-for="deployKeysProject in restProjects"
+            v-else-if="isExpanded"
             :key="deployKeysProject.project.full_path"
-            class="label deploy-project-label"
             :href="deployKeysProject.project.full_path"
             :title="projectTooltipTitle(deployKeysProject)"
-            v-tooltip
+            class="label deploy-project-label"
           >
             <span>
               {{ deployKeysProject.project.full_name }}
@@ -181,8 +181,8 @@ export default {
       </div>
       <div class="table-mobile-content text-secondary key-created-at">
         <span
-          :title="tooltipTitle(deployKey.created_at)"
-          v-tooltip>
+          v-tooltip
+          :title="tooltipTitle(deployKey.created_at)">
           <icon name="calendar"/>
           <span>{{ timeFormated(deployKey.created_at) }}</span>
         </span>
@@ -198,34 +198,34 @@ export default {
           {{ __('Enable') }}
         </action-btn>
         <a
+          v-tooltip
           v-if="deployKey.can_edit"
-          class="btn btn-default text-secondary"
           :href="editDeployKeyPath"
           :title="__('Edit')"
+          class="btn btn-default text-secondary"
           data-container="body"
-          v-tooltip
         >
           <icon name="pencil"/>
         </a>
         <action-btn
+          v-tooltip
           v-if="isRemovable"
           :deploy-key="deployKey"
+          :title="__('Remove')"
           btn-css-class="btn-danger"
           type="remove"
-          :title="__('Remove')"
           data-container="body"
-          v-tooltip
         >
           <icon name="remove"/>
         </action-btn>
         <action-btn
+          v-tooltip
           v-else-if="isEnabled"
           :deploy-key="deployKey"
+          :title="__('Disable')"
           btn-css-class="btn-warning"
           type="disable"
-          :title="__('Disable')"
           data-container="body"
-          v-tooltip
         >
           <icon name="cancel"/>
         </action-btn>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index 3b146c7389a..2f057ca29f6 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -59,8 +59,8 @@ export default {
       />
     </template>
     <div
-      class="settings-message text-center"
       v-else
+      class="settings-message text-center"
     >
       {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
     </div>
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
index d1260ff5373..ed24d1775f4 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -6,7 +6,10 @@ import Vue from 'vue';
 
 const CommentAndResolveBtn = Vue.extend({
   props: {
-    discussionId: String,
+    discussionId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index fe9b0795609..40f7c2fe5f3 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -7,7 +7,15 @@ import Notes from '../../notes';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
 
 const DiffNoteAvatars = Vue.extend({
-  props: ['discussionId'],
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    discussionId: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       isVisible: false,
@@ -17,77 +25,6 @@ const DiffNoteAvatars = Vue.extend({
       collapseIcon,
     };
   },
-  components: {
-    userAvatarImage,
-  },
-  template: `
-    <div class="diff-comment-avatar-holders"
-      :class="discussionClassName"
-      v-show="notesCount !== 0">
-      <div v-if="!isVisible">
-        <!-- FIXME: Pass an alt attribute here for accessibility -->
-        <user-avatar-image
-          v-for="note in notesSubset"
-          :key="note.id"
-          class="diff-comment-avatar js-diff-comment-avatar"
-          @click.native="clickedAvatar($event)"
-          :img-src="note.authorAvatar"
-          :tooltip-text="getTooltipText(note)"
-          :data-line-type="lineType"
-          :size="19"
-          data-html="true"
-        />
-        <span v-if="notesCount > shownAvatars"
-          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
-          data-container="body"
-          data-placement="top"
-          ref="extraComments"
-          role="button"
-          :data-line-type="lineType"
-          :title="extraNotesTitle"
-          @click="clickedAvatar($event)">{{ moreText }}</span>
-      </div>
-      <button class="diff-notes-collapse js-diff-comment-avatar"
-        type="button"
-        aria-label="Show comments"
-        :data-line-type="lineType"
-        @click="clickedAvatar($event)"
-        v-if="isVisible"
-        v-html="collapseIcon">
-      </button>
-    </div>
-  `,
-  mounted() {
-    this.$nextTick(() => {
-      this.addNoCommentClass();
-      this.setDiscussionVisible();
-
-      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
-    });
-
-    $(document).on('toggle.comments', () => {
-      this.$nextTick(() => {
-        this.setDiscussionVisible();
-      });
-    });
-  },
-  beforeDestroy() {
-    this.addNoCommentClass();
-    $(document).off('toggle.comments');
-  },
-  watch: {
-    storeState: {
-      handler() {
-        this.$nextTick(() => {
-          $('.has-tooltip', this.$el).tooltip('_fixTitle');
-
-          // We need to add/remove a class to an element that is outside the Vue instance
-          this.addNoCommentClass();
-        });
-      },
-      deep: true,
-    },
-  },
   computed: {
     discussionClassName() {
       return `js-diff-avatars-${this.discussionId}`;
@@ -128,6 +65,37 @@ const DiffNoteAvatars = Vue.extend({
       return `${plusSign}${this.notesCount - this.shownAvatars}`;
     },
   },
+  watch: {
+    storeState: {
+      handler() {
+        this.$nextTick(() => {
+          $('.has-tooltip', this.$el).tooltip('_fixTitle');
+
+          // We need to add/remove a class to an element that is outside the Vue instance
+          this.addNoCommentClass();
+        });
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.addNoCommentClass();
+      this.setDiscussionVisible();
+
+      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
+    });
+
+    $(document).on('toggle.comments', () => {
+      this.$nextTick(() => {
+        this.setDiscussionVisible();
+      });
+    });
+  },
+  beforeDestroy() {
+    this.addNoCommentClass();
+    $(document).off('toggle.comments');
+  },
   methods: {
     clickedAvatar(e) {
       Notes.instance.onAddDiffNote(e);
@@ -164,6 +132,43 @@ const DiffNoteAvatars = Vue.extend({
       return `${note.authorName}: ${note.noteTruncated}`;
     },
   },
+  template: `
+    <div class="diff-comment-avatar-holders"
+      :class="discussionClassName"
+      v-show="notesCount !== 0">
+      <div v-if="!isVisible">
+        <!-- FIXME: Pass an alt attribute here for accessibility -->
+        <user-avatar-image
+          v-for="note in notesSubset"
+          :key="note.id"
+          class="diff-comment-avatar js-diff-comment-avatar"
+          @click.native="clickedAvatar($event)"
+          :img-src="note.authorAvatar"
+          :tooltip-text="getTooltipText(note)"
+          :data-line-type="lineType"
+          :size="19"
+          data-html="true"
+        />
+        <span v-if="notesCount > shownAvatars"
+          class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
+          data-container="body"
+          data-placement="top"
+          ref="extraComments"
+          role="button"
+          :data-line-type="lineType"
+          :title="extraNotesTitle"
+          @click="clickedAvatar($event)">{{ moreText }}</span>
+      </div>
+      <button class="diff-notes-collapse js-diff-comment-avatar"
+        type="button"
+        aria-label="Show comments"
+        :data-line-type="lineType"
+        @click="clickedAvatar($event)"
+        v-if="isVisible"
+        v-html="collapseIcon">
+      </button>
+    </div>
+  `,
 });
 
 Vue.component('diff-note-avatars', DiffNoteAvatars);
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
index 8f9186dfb9a..2ce4b050763 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -10,7 +10,10 @@ import '../mixins/discussion';
 const JumpToDiscussion = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
-    discussionId: String
+    discussionId: {
+      type: String,
+      required: true,
+    },
   },
   data: function () {
     return {
@@ -52,6 +55,9 @@ const JumpToDiscussion = Vue.extend({
       return lastId;
     }
   },
+  created() {
+    this.discussion = this.discussions[this.discussionId];
+  },
   methods: {
     jumpToNextUnresolvedDiscussion: function () {
       let discussionsSelector;
@@ -202,9 +208,6 @@ const JumpToDiscussion = Vue.extend({
       });
     }
   },
-  created() {
-    this.discussion = this.discussions[this.discussionId];
-  },
 });
 
 Vue.component('jump-to-discussion', JumpToDiscussion);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index 8d66417abac..07f3be29090 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -8,14 +8,38 @@ import Flash from '../../flash';
 
 const ResolveBtn = Vue.extend({
   props: {
-    noteId: Number,
-    discussionId: String,
-    resolved: Boolean,
-    canResolve: Boolean,
-    resolvedBy: String,
-    authorName: String,
-    authorAvatar: String,
-    noteTruncated: String,
+    noteId: {
+      type: Number,
+      required: true,
+    },
+    discussionId: {
+      type: String,
+      required: true,
+    },
+    resolved: {
+      type: Boolean,
+      required: true,
+    },
+    canResolve: {
+      type: Boolean,
+      required: true,
+    },
+    resolvedBy: {
+      type: String,
+      required: true,
+    },
+    authorName: {
+      type: String,
+      required: true,
+    },
+    authorAvatar: {
+      type: String,
+      required: true,
+    },
+    noteTruncated: {
+      type: String,
+      required: true,
+    },
   },
   data: function () {
     return {
@@ -23,12 +47,6 @@ const ResolveBtn = Vue.extend({
       loading: false
     };
   },
-  watch: {
-    'discussions': {
-      handler: 'updateTooltip',
-      deep: true
-    }
-  },
   computed: {
     discussion: function () {
       return this.discussions[this.discussionId];
@@ -56,6 +74,32 @@ const ResolveBtn = Vue.extend({
       return this.note.resolved_by;
     },
   },
+  watch: {
+    'discussions': {
+      handler: 'updateTooltip',
+      deep: true
+    }
+  },
+  mounted: function () {
+    $(this.$refs.button).tooltip({
+      container: 'body'
+    });
+  },
+  beforeDestroy: function () {
+    CommentsStore.delete(this.discussionId, this.noteId);
+  },
+  created: function () {
+    CommentsStore.create({
+      discussionId: this.discussionId,
+      noteId: this.noteId,
+      canResolve: this.canResolve,
+      resolved: this.resolved,
+      resolvedBy: this.resolvedBy,
+      authorName: this.authorName,
+      authorAvatar: this.authorAvatar,
+      noteTruncated: this.noteTruncated,
+    });
+  },
   methods: {
     updateTooltip: function () {
       this.$nextTick(() => {
@@ -95,26 +139,6 @@ const ResolveBtn = Vue.extend({
         .catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.'));
     }
   },
-  mounted: function () {
-    $(this.$refs.button).tooltip({
-      container: 'body'
-    });
-  },
-  beforeDestroy: function () {
-    CommentsStore.delete(this.discussionId, this.noteId);
-  },
-  created: function () {
-    CommentsStore.create({
-      discussionId: this.discussionId,
-      noteId: this.noteId,
-      canResolve: this.canResolve,
-      resolved: this.resolved,
-      resolvedBy: this.resolvedBy,
-      authorName: this.authorName,
-      authorAvatar: this.authorAvatar,
-      noteTruncated: this.noteTruncated,
-    });
-  }
 });
 
 Vue.component('resolve-btn', ResolveBtn);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
index fe7cf8f5fc1..9f613410e81 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js
@@ -9,7 +9,10 @@ import '../mixins/discussion';
 window.ResolveCount = Vue.extend({
   mixins: [DiscussionMixins],
   props: {
-    loggedOut: Boolean
+    loggedOut: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: function () {
     return {
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
index 6a036e96171..210a00c5fc2 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
@@ -6,9 +6,18 @@ import Vue from 'vue';
 
 const ResolveDiscussionBtn = Vue.extend({
   props: {
-    discussionId: String,
-    mergeRequestId: Number,
-    canResolve: Boolean,
+    discussionId: {
+      type: String,
+      required: true,
+    },
+    mergeRequestId: {
+      type: Number,
+      required: true,
+    },
+    canResolve: {
+      type: Boolean,
+      required: true,
+    },
   },
   data: function() {
     return {
@@ -45,16 +54,16 @@ const ResolveDiscussionBtn = Vue.extend({
       }
     }
   },
+  created: function () {
+    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+    this.discussion = CommentsStore.state[this.discussionId];
+  },
   methods: {
     resolve: function () {
       ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
     }
   },
-  created: function () {
-    CommentsStore.createDiscussion(this.discussionId, this.canResolve);
-
-    this.discussion = CommentsStore.state[this.discussionId];
-  }
 });
 
 Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 6bd7c6b49cb..9aa224fa407 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -43,17 +43,17 @@
   <div class="environments-container">
 
     <loading-icon
+      v-if="isLoading"
       class="prepend-top-default"
       label="Loading environments"
-      v-if="isLoading"
       size="3"
     />
 
     <slot name="emptyState"></slot>
 
     <div
-      class="table-holder"
-      v-if="!isLoading && environments.length > 0">
+      v-if="!isLoading && environments.length > 0"
+      class="table-holder">
 
       <environment-table
         :environments="environments"
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 0b3fef9fcca..e3652fe739e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -52,18 +52,18 @@
     role="group">
     <button
       v-tooltip
+      :title="title"
+      :aria-label="title"
+      :disabled="isLoading"
       type="button"
       class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
       data-container="body"
       data-toggle="dropdown"
-      :title="title"
-      :aria-label="title"
-      :disabled="isLoading"
     >
       <span>
         <icon
-          name="play"
           :size="12"
+          name="play"
         />
         <i
           class="fa fa-caret-down"
@@ -79,15 +79,15 @@
         v-for="(action, i) in actions"
         :key="i">
         <button
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)"
           type="button"
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
-          :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)"
         >
           <icon
-            name="play"
             :size="12"
+            name="play"
           />
           <span>
             {{ action.name }}
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index ea6f1168c68..68195225d50 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -29,17 +29,17 @@
 <template>
   <a
     v-tooltip
+    :title="title"
+    :aria-label="title"
+    :href="externalUrl"
     class="btn external-url"
     data-container="body"
     target="_blank"
     rel="noopener noreferrer nofollow"
-    :title="title"
-    :aria-label="title"
-    :href="externalUrl"
   >
     <icon
-      name="external-link"
       :size="12"
+      name="external-link"
     />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 23aaab2c441..866e91057ec 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -427,11 +427,11 @@
 </script>
 <template>
   <div
-    class="gl-responsive-table-row"
     :class="{
       'js-child-row environment-child-row': model.isChildren,
       'folder-row': model.isFolder,
     }"
+    class="gl-responsive-table-row"
     role="row">
     <div
       class="table-section section-10"
@@ -446,19 +446,19 @@
       </div>
       <a
         v-if="!model.isFolder"
-        class="environment-name flex-truncate-parent table-mobile-content"
-        :href="environmentPath">
+        :href="environmentPath"
+        class="environment-name flex-truncate-parent table-mobile-content">
         <span
-          class="flex-truncate-child"
           v-tooltip
           :title="model.name"
+          class="flex-truncate-child"
         >{{ model.name }}</span>
       </a>
       <span
         v-else
         class="folder-name"
-        @click="onClickFolder"
-        role="button">
+        role="button"
+        @click="onClickFolder">
 
         <span class="folder-icon">
           <i
@@ -503,11 +503,11 @@
       <span v-if="!model.isFolder && deploymentHasUser">
         by
         <user-avatar-link
-          class="js-deploy-user-container"
           :link-href="deploymentUser.web_url"
           :img-src="deploymentUser.avatar_url"
           :img-alt="userImageAltDescription"
           :tooltip-text="deploymentUser.username"
+          class="js-deploy-user-container"
         />
       </span>
     </div>
@@ -518,8 +518,8 @@
     >
       <a
         v-if="shouldRenderBuildName"
-        class="build-link flex-truncate-parent"
         :href="buildPath"
+        class="build-link flex-truncate-parent"
       >
         <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 8df1b6317e3..947e8c901e9 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -28,16 +28,16 @@
 <template>
   <a
     v-tooltip
-    class="btn monitoring-url d-none d-sm-none d-md-block"
-    data-container="body"
-    rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
+    class="btn monitoring-url d-none d-sm-none d-md-block"
+    data-container="body"
+    rel="noopener noreferrer nofollow"
   >
     <icon
-      name="chart"
       :size="12"
+      name="chart"
     />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 7515d711c50..310835c5ea9 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -39,10 +39,10 @@
 </script>
 <template>
   <button
+    :disabled="isLoading"
     type="button"
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
-    :disabled="isLoading"
   >
 
     <span v-if="isLastDeployment">
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index 7055f208451..faaaf899a0d 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -54,13 +54,13 @@
 <template>
   <button
     v-tooltip
+    :disabled="isLoading"
+    :title="title"
+    :aria-label="title"
     type="button"
     class="btn stop-env-link d-none d-sm-none d-md-block"
     data-container="body"
     @click="onClick"
-    :disabled="isLoading"
-    :title="title"
-    :aria-label="title"
   >
     <i
       class="fa fa-stop stop-env-icon"
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 0dbbbb75e07..f8e3165f8cd 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -30,15 +30,15 @@
 <template>
   <a
     v-tooltip
-    class="btn terminal-button d-none d-sm-none d-md-block"
-    data-container="body"
     :title="title"
     :aria-label="title"
     :href="terminalPath"
+    class="btn terminal-button d-none d-sm-none d-md-block"
+    data-container="body"
   >
     <icon
-      name="terminal"
       :size="12"
+      name="terminal"
     />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 3da762446c9..b18f02343d6 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -93,8 +93,8 @@
     <div class="top-area">
       <tabs
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="environments"
+        @onChangeTab="onChangeTab"
       />
 
       <div
@@ -119,8 +119,8 @@
       @onChangePage="onChangePage"
     >
       <empty-state
-        slot="emptyState"
         v-if="!isLoading && state.environments.length === 0"
+        slot="emptyState"
         :new-path="newEnvironmentPath"
         :help-path="helpPagePath"
         :can-create-environment="canCreateEnvironment"
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 5ef5e347387..5f72a39c5cb 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -39,8 +39,8 @@
 <template>
   <div :class="cssContainerClass">
     <div
-      class="top-area"
       v-if="!isLoading"
+      class="top-area"
     >
 
       <h4 class="js-folder-name environments-folder-name">
@@ -49,8 +49,8 @@
 
       <tabs
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="environments"
+        @onChangeTab="onChangeTab"
       />
     </div>
 
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
index 26618af9515..a8eb8d94be3 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
@@ -72,9 +72,9 @@ export default {
           @click="onItemActivated(item.text)">
           <span>
             <span
-              class="filtered-search-history-dropdown-token"
               v-for="(token, index) in item.tokens"
               :key="`dropdown-token-${index}`"
+              class="filtered-search-history-dropdown-token"
             >
               <span class="name">{{ token.prefix }}</span>
               <span class="value">{{ token.suffix }}</span>
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 22eb7bd44c5..1def38bb336 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -216,10 +216,10 @@ export default {
 <template>
   <div>
     <loading-icon
-      class="loading-animation prepend-top-20"
-      size="2"
       v-if="isLoading"
       :label="s__('GroupsTree|Loading groups')"
+      class="loading-animation prepend-top-20"
+      size="2"
     />
     <groups-component
       v-if="!isLoading"
@@ -230,10 +230,10 @@ export default {
     />
     <deprecated-modal
       v-show="showModal"
-      kind="warning"
       :primary-button-label="__('Leave')"
       :title="__('Are you sure?')"
       :text="groupLeaveConfirmationMessage"
+      kind="warning"
       @cancel="hideLeaveGroupModal"
       @submit="leaveGroup"
     />
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 7f64a9bd741..efbf2e3a295 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -71,14 +71,14 @@ export default {
 
 <template>
   <li
-    @click.stop="onClickRowGroup"
     :id="groupDomId"
     :class="rowClass"
     class="group-row"
+    @click.stop="onClickRowGroup"
   >
     <div
-      class="group-row-contents"
-      :class="{ 'project-row-contents': !isGroup }">
+      :class="{ 'project-row-contents': !isGroup }"
+      class="group-row-contents">
       <item-actions
         v-if="isGroup"
         :group="group"
@@ -99,8 +99,8 @@ export default {
         />
       </div>
       <div
-        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
         :class="{ 'content-loading': group.isChildrenLoading }"
+        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
       >
         <a
           :href="group.relativePath"
@@ -108,14 +108,14 @@ export default {
         >
           <img
             v-if="hasAvatar"
-            class="avatar s24"
             :src="group.avatarUrl"
+            class="avatar s24"
           />
           <identicon
             v-else
-            size-class="s24"
             :entity-id="group.id"
             :entity-name="group.name"
+            size-class="s24"
           />
         </a>
       </div>
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 87065b3d6e3..24eec4901ec 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -54,13 +54,13 @@ export default {
     <a
       v-tooltip
       v-if="group.canLeave"
-      @click.prevent="onLeaveGroup"
       :href="group.leavePath"
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn no-expand">
+      class="leave-group btn no-expand"
+      @click.prevent="onLeaveGroup">
       <icon name="leave"/>
     </a>
   </div>
diff --git a/app/assets/javascripts/groups/components/item_stats.vue b/app/assets/javascripts/groups/components/item_stats.vue
index 168b4e4af2c..87ab5480c15 100644
--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
@@ -45,44 +45,44 @@
   <div class="stats">
     <item-stats-value
       v-if="isGroup"
-      css-class="number-subgroups"
-      icon-name="folder"
       :title="__('Subgroups')"
       :value="item.subgroupCount"
+      css-class="number-subgroups"
+      icon-name="folder"
     />
     <item-stats-value
       v-if="isGroup"
-      css-class="number-projects"
-      icon-name="bookmark"
       :title="__('Projects')"
       :value="item.projectCount"
+      css-class="number-projects"
+      icon-name="bookmark"
     />
     <item-stats-value
       v-if="isGroup"
-      css-class="number-users"
-      icon-name="users"
       :title="__('Members')"
       :value="item.memberCount"
+      css-class="number-users"
+      icon-name="users"
     />
     <item-stats-value
       v-if="isProject"
+      :value="item.starCount"
       css-class="project-stars"
       icon-name="star"
-      :value="item.starCount"
     />
     <item-stats-value
-      css-class="item-visibility"
-      tooltip-placement="left"
       :icon-name="visibilityIcon"
       :title="visibilityTooltip"
+      css-class="item-visibility"
+      tooltip-placement="left"
     />
     <div
-      class="last-updated"
       v-if="isProject"
+      class="last-updated"
     >
       <time-ago-tooltip
-        tooltip-placement="bottom"
         :time="item.updatedAt"
+        tooltip-placement="bottom"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
index 4d86ac8023c..ef9f2bca76c 100644
--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -52,10 +52,10 @@
 <template>
   <span
     v-tooltip
-    data-container="body"
     :data-placement="tooltipPlacement"
     :class="cssClass"
     :title="title"
+    data-container="body"
   >
     <icon :name="iconName" />
     <span
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 6efcad6adea..62697e0ecc3 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -39,12 +39,12 @@ export default {
       <li v-once>
         <a
           v-tooltip
-          data-container="body"
-          data-placement="right"
           :href="goBackUrl"
-          class="ide-sidebar-link"
           :title="s__('IDE|Go back')"
           :aria-label="s__('IDE|Go back')"
+          data-container="body"
+          data-placement="right"
+          class="ide-sidebar-link"
         >
           <icon
             :size="16"
@@ -55,16 +55,16 @@ export default {
       <li>
         <button
           v-tooltip
-          data-container="body"
-          data-placement="right"
-          type="button"
-          class="ide-sidebar-link js-ide-edit-mode"
           :class="{
             active: currentActivityView === $options.activityBarViews.edit
           }"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
           :title="s__('IDE|Edit')"
           :aria-label="s__('IDE|Edit')"
+          data-container="body"
+          data-placement="right"
+          type="button"
+          class="ide-sidebar-link js-ide-edit-mode"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
         >
           <icon
             name="code"
@@ -74,16 +74,16 @@ export default {
       <li>
         <button
           v-tooltip
-          data-container="body"
-          data-placement="right"
-          type="button"
-          class="ide-sidebar-link js-ide-review-mode"
           :class="{
             active: currentActivityView === $options.activityBarViews.review
           }"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
           :title="s__('IDE|Review')"
           :aria-label="s__('IDE|Review')"
+          data-container="body"
+          data-placement="right"
+          type="button"
+          class="ide-sidebar-link js-ide-review-mode"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
         >
           <icon
             name="file-modified"
@@ -93,16 +93,16 @@ export default {
       <li v-show="hasChanges">
         <button
           v-tooltip
-          data-container="body"
-          data-placement="right"
-          type="button"
-          class="ide-sidebar-link js-ide-commit-mode"
           :class="{
             active: currentActivityView === $options.activityBarViews.commit
           }"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
           :title="s__('IDE|Commit')"
           :aria-label="s__('IDE|Commit')"
+          data-container="body"
+          data-placement="right"
+          type="button"
+          class="ide-sidebar-link js-ide-commit-mode"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
         >
           <icon
             name="commit"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index e2b42ab2642..955d9280728 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -91,7 +91,6 @@ export default {
 
 <template>
   <div
-    class="multi-file-commit-form"
     :class="{
       'is-compact': isCompact,
       'is-full': !isCompact
@@ -99,6 +98,7 @@ export default {
     :style="{
       height: componentHeight ? `${componentHeight}px` : null,
     }"
+    class="multi-file-commit-form"
   >
     <transition
       name="commit-form-slide-up"
@@ -108,12 +108,12 @@ export default {
     >
       <div
         v-if="isCompact"
-        class="commit-form-compact"
         ref="compactEl"
+        class="commit-form-compact"
       >
         <button
-          type="button"
           :disabled="!hasChanges"
+          type="button"
           class="btn btn-primary btn-sm btn-block"
           @click="toggleIsSmall"
         >
@@ -126,8 +126,8 @@ export default {
       </div>
       <form
         v-if="!isCompact"
-        @submit.prevent.stop="commitChanges"
         ref="formEl"
+        @submit.prevent.stop="commitChanges"
       >
         <transition name="fade">
           <success-message
@@ -143,8 +143,8 @@ export default {
           <loading-button
             :loading="submitCommitLoading"
             :disabled="commitButtonDisabled"
-            container-class="btn btn-success btn-sm float-left"
             :label="__('Commit')"
+            container-class="btn btn-success btn-sm float-left"
             @click="commitChanges"
           />
           <button
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 6c30b2a721d..2ecf9af4bf0 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -82,10 +82,10 @@ export default {
 
 <template>
   <div
-    class="multi-file-commit-list-item"
     :class="{
       'is-active': isActive
     }"
+    class="multi-file-commit-list-item"
   >
     <button
       type="button"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 0ac0af2feaa..40496c80a46 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -66,10 +66,10 @@ export default {
 <template>
   <fieldset class="common-note-form ide-commit-message-field">
     <div
-      class="md-area"
       :class="{
         'is-focused': isFocused
       }"
+      class="md-area"
     >
       <div
         v-once
@@ -92,10 +92,10 @@ export default {
       <div class="ide-commit-message-textarea-container">
         <div class="ide-commit-message-highlights-container">
           <div
-            class="note-textarea highlights monospace"
             :style="{
               transform: `translate3d(0, ${-scrollTop}px, 0)`
             }"
+            class="note-textarea highlights monospace"
           >
             <div
               v-for="(line, index) in allLines"
@@ -113,15 +113,15 @@ export default {
           </div>
         </div>
         <textarea
-          class="note-textarea ide-commit-message-textarea"
-          name="commit-message"
+          ref="textarea"
           :placeholder="__('Write a commit message...')"
           :value="text"
+          class="note-textarea ide-commit-message-textarea"
+          name="commit-message"
           @scroll="handleScroll"
           @input="onInput"
           @focus="updateIsFocused(true)"
           @blur="updateIsFocused(false)"
-          ref="textarea"
         >
         </textarea>
       </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 00f2312ae51..35ab3fd11df 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
@@ -58,12 +58,12 @@ export default {
       }"
     >
       <input
-        type="radio"
-        name="commit-action"
         :value="value"
-        @change="updateCommitAction($event.target.value)"
         :checked="commitAction === value"
         :disabled="disabled"
+        type="radio"
+        name="commit-action"
+        @change="updateCommitAction($event.target.value)"
       />
       <span class="prepend-left-10">
         <span
@@ -80,9 +80,9 @@ export default {
       class="ide-commit-new-branch"
     >
       <input
+        :placeholder="newBranchName"
         type="text"
         class="form-control monospace"
-        :placeholder="newBranchName"
         @input="updateBranchName($event.target.value)"
       />
     </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
index 52dce8412ab..a786ec80ac2 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -29,30 +29,30 @@ export default {
   >
     <button
       v-tooltip
-      type="button"
-      class="btn btn-blank append-right-5"
       :aria-label="__('Stage changes')"
       :title="__('Stage changes')"
+      type="button"
+      class="btn btn-blank append-right-5"
       data-container="body"
       @click.stop="stageChange(path)"
     >
       <icon
-        name="mobile-issue-close"
         :size="12"
+        name="mobile-issue-close"
       />
     </button>
     <button
       v-tooltip
-      type="button"
-      class="btn btn-blank"
       :aria-label="__('Discard changes')"
       :title="__('Discard changes')"
+      type="button"
+      class="btn btn-blank"
       data-container="body"
       @click.stop="discardFileChanges(path)"
     >
       <icon
-        name="remove"
         :size="12"
+        name="remove"
       />
     </button>
   </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
index 123d60da47e..34b366f63ac 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
@@ -29,16 +29,16 @@ export default {
   >
     <button
       v-tooltip
-      type="button"
-      class="btn btn-blank"
       :aria-label="__('Unstage changes')"
       :title="__('Unstage changes')"
+      type="button"
+      class="btn btn-blank"
       data-container="body"
       @click="unstageChange(path)"
     >
       <icon
-        name="history"
         :size="12"
+        name="history"
       />
     </button>
   </div>
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index b9af4d27145..95598c9aca6 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -44,11 +44,11 @@ export default {
       <ul>
         <li>
           <a
-            href="#"
-            @click.prevent="changeMode($options.viewerTypes.mr)"
             :class="{
               'is-active': viewer === $options.viewerTypes.mr,
             }"
+            href="#"
+            @click.prevent="changeMode($options.viewerTypes.mr)"
           >
             <strong class="dropdown-menu-inner-title">
               {{ mergeReviewLine }}
@@ -60,11 +60,11 @@ export default {
         </li>
         <li>
           <a
-            href="#"
-            @click.prevent="changeMode($options.viewerTypes.diff)"
             :class="{
               'is-active': viewer === $options.viewerTypes.diff,
             }"
+            href="#"
+            @click.prevent="changeMode($options.viewerTypes.diff)"
           >
             <strong class="dropdown-menu-inner-title">{{ __('Reviewing') }}</strong>
             <span class="dropdown-menu-inner-content">
diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue
index cf3316a8179..e24fe5bbccb 100644
--- a/app/assets/javascripts/ide/components/external_link.vue
+++ b/app/assets/javascripts/ide/components/external_link.vue
@@ -26,15 +26,15 @@ export default {
   >
     <a
       :href="file.permalink"
-      target="_blank"
       :title="s__('IDE|Open in file view')"
+      target="_blank"
       rel="noopener noreferrer"
     >
       <span class="vertical-align-middle">Open in file view</span>
       <icon
+        :size="16"
         name="external-link"
         css-classes="vertical-align-middle space-right"
-        :size="16"
       />
     </a>
   </div>
diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index cabb3f59b17..0ba33053717 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -173,38 +173,38 @@ export default {
     >
       <div class="dropdown-input">
         <input
+          ref="searchInput"
+          :placeholder="__('Search files')"
+          v-model="searchText"
           type="search"
           class="dropdown-input-field"
-          :placeholder="__('Search files')"
           autocomplete="off"
-          v-model="searchText"
-          ref="searchInput"
           @keydown="onKeydown($event)"
           @keyup="onKeyup($event)"
         />
         <i
-          aria-hidden="true"
-          class="fa fa-search dropdown-input-search"
           :class="{
             hidden: showClearInputButton
           }"
+          aria-hidden="true"
+          class="fa fa-search dropdown-input-search"
         ></i>
         <i
-          role="button"
           :aria-label="__('Clear search input')"
-          class="fa fa-times dropdown-input-clear"
           :class="{
             show: showClearInputButton
           }"
+          role="button"
+          class="fa fa-times dropdown-input-clear"
           @click="clearSearchInput"
         ></i>
       </div>
       <div>
         <virtual-list
+          ref="virtualScrollList"
           :size="listHeight"
           :remain="listShowCount"
           wtag="ul"
-          ref="virtualScrollList"
         >
           <template v-if="filteredBlobsLength">
             <li
@@ -212,11 +212,11 @@ export default {
               :key="file.key"
             >
               <item
-                class="disable-hover"
                 :file="file"
                 :search-text="searchText"
                 :focused="index === focusedIndex"
                 :index="index"
+                class="disable-hover"
                 @click="openFile"
                 @mouseover="onMouseOver"
                 @mousemove="onMouseMove"
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index d4427420207..a4cf3edb981 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -59,11 +59,11 @@ export default {
 
 <template>
   <button
-    type="button"
-    class="diff-changed-file"
     :class="{
       'is-focused': focused,
     }"
+    type="button"
+    class="diff-changed-file"
     @click.prevent="clickRow"
     @mouseover="mouseOverRow"
     @mousemove="mouseMove"
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index f5f832521c5..f5f7f967a92 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -93,8 +93,8 @@ export default {
             :merge-request-id="currentMergeRequestId"
           />
           <repo-editor
-            class="multi-file-edit-pane-content"
             :file="activeFile"
+            class="multi-file-edit-pane-content"
           />
         </template>
         <template
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 99fa2465a84..f9978762c45 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -36,8 +36,8 @@ export default {
 <template>
   <ide-tree-list
     :viewer-type="viewer"
-    header-class="ide-review-header"
     :disable-action-dropdown="true"
+    header-class="ide-review-header"
   >
     <template
       slot="header"
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 1dc2170edde..21906674c4b 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -115,17 +115,17 @@ export default {
     <div class="multi-file-commit-panel-inner">
       <template v-if="loading">
         <div
-          class="multi-file-loading-container"
           v-for="n in 3"
           :key="n"
+          class="multi-file-loading-container"
         >
           <skeleton-loading-container />
         </div>
       </template>
       <template v-else>
         <div
-          class="context-header ide-context-header dropdown"
           ref="mergeRequestDropdown"
+          class="context-header ide-context-header dropdown"
         >
           <button
             type="button"
@@ -136,18 +136,18 @@ export default {
               class="avatar-container s40 project-avatar"
             >
               <project-avatar-image
-                class="avatar-container project-avatar"
                 :link-href="currentProject.path"
                 :img-src="currentProject.avatar_url"
                 :img-alt="currentProject.name"
                 :img-size="40"
+                class="avatar-container project-avatar"
               />
             </div>
             <identicon
               v-else
-              size-class="s40"
               :entity-id="currentProject.id"
               :entity-name="currentProject.name"
+              size-class="s40"
             />
             <div class="ide-sidebar-project-title">
               <div class="sidebar-context-title">
@@ -155,11 +155,11 @@ export default {
               </div>
               <div class="d-flex">
                 <div
+                  v-tooltip
                   v-if="currentBranchId"
-                  class="sidebar-context-title ide-sidebar-branch-title"
                   ref="branchId"
-                  v-tooltip
                   :title="branchTooltipTitle"
+                  class="sidebar-context-title ide-sidebar-branch-title"
                 >
                   <icon
                     name="branch"
@@ -168,10 +168,10 @@ export default {
                 </div>
                 <div
                   v-if="currentMergeRequestId"
-                  class="sidebar-context-title ide-sidebar-branch-title"
                   :class="{
                     'prepend-left-8': currentBranchId
                   }"
+                  class="sidebar-context-title ide-sidebar-branch-title"
                 >
                   <icon
                     name="git-merge"
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index e40f137d998..0582ad32e92 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -75,22 +75,22 @@ export default {
 <template>
   <footer class="ide-status-bar">
     <div
-      class="ide-status-branch"
       v-if="lastCommit && lastCommitFormatedAge"
+      class="ide-status-branch"
     >
       <span
-        class="ide-status-pipeline"
         v-if="latestPipeline && latestPipeline.details"
+        class="ide-status-pipeline"
       >
         <ci-icon
-          :status="latestPipeline.details.status"
           v-tooltip
+          :status="latestPipeline.details.status"
           :title="latestPipeline.details.status.text"
         />
         Pipeline
         <a
-          class="monospace"
-          :href="latestPipeline.details.status.details_path">#{{ latestPipeline.id }}</a>
+          :href="latestPipeline.details.status.details_path"
+          class="monospace">#{{ latestPipeline.id }}</a>
         {{ latestPipeline.details.status.text }}
         for
       </span>
@@ -100,18 +100,18 @@ export default {
       />
       <a
         v-tooltip
-        class="commit-sha"
         :title="lastCommit.message"
         :href="getCommitPath(lastCommit.short_id)"
+        class="commit-sha"
       >{{ lastCommit.short_id }}</a>
       by
       {{ lastCommit.author_name }}
       <time
         v-tooltip
-        data-placement="top"
-        data-container="body"
         :datetime="lastCommit.committed_date"
         :title="tooltipTitle(lastCommit.committed_date)"
+        data-placement="top"
+        data-container="body"
       >
         {{ lastCommitFormatedAge }}
       </time>
@@ -129,8 +129,8 @@ export default {
       {{ file.eol }}
     </div>
     <div
-      class="ide-status-file"
-      v-if="file && !file.binary">
+      v-if="file && !file.binary"
+      class="ide-status-file">
       {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
     <div
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index e64a09fcc90..0df99798d21 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -50,17 +50,17 @@ export default {
   >
     <template v-if="showLoading">
       <div
-        class="multi-file-loading-container"
         v-for="n in 3"
         :key="n"
+        class="multi-file-loading-container"
       >
         <skeleton-loading-container />
       </div>
     </template>
     <template v-else>
       <header
-        class="ide-tree-header"
         :class="headerClass"
+        class="ide-tree-header"
       >
         <slot name="header"></slot>
       </header>
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index 6713b54efae..f39ce545656 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -93,10 +93,10 @@ export default {
         <a
           v-tooltip
           :title="__('Show complete raw log')"
+          :href="detailJob.rawPath"
           data-placement="top"
           data-container="body"
           class="controllers-buttons"
-          :href="detailJob.rawPath"
           target="_blank"
         >
           <i
@@ -105,20 +105,20 @@ export default {
           ></i>
         </a>
         <scroll-button
-          direction="up"
           :disabled="isScrolledToTop"
+          direction="up"
           @click="scrollUp"
         />
         <scroll-button
-          direction="down"
           :disabled="isScrolledToBottom"
+          direction="down"
           @click="scrollDown"
         />
       </div>
     </div>
     <pre
-      class="build-trace mb-0 h-100"
       ref="buildTrace"
+      class="build-trace mb-0 h-100"
       @scroll="scrollBuildLog"
     >
       <code
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue
index def6bac3157..7e24974f7e5 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/description.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue
@@ -24,10 +24,10 @@ export default {
 <template>
   <div class="d-flex align-items-center">
     <ci-icon
-      class="d-flex"
       :status="job.status"
       :borderless="true"
       :size="24"
+      class="d-flex"
     />
     <span class="prepend-left-8">
       {{ job.name }}
@@ -38,8 +38,8 @@ export default {
       >
         {{ jobId }}
         <icon
-          name="external-link"
           :size="12"
+          name="external-link"
         />
       </a>
     </span>
diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
index 4e19e6e9c84..103a407987f 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
@@ -47,15 +47,15 @@ export default {
 <template>
   <div
     v-tooltip
+    :title="tooltipTitle"
     class="controllers-buttons"
     data-container="body"
     data-placement="top"
-    :title="tooltipTitle"
   >
     <button
+      :disabled="disabled"
       class="btn-scroll btn-transparent btn-blank"
       type="button"
-      :disabled="disabled"
       @click="clickedScroll"
     >
       <icon
diff --git a/app/assets/javascripts/ide/components/jobs/item.vue b/app/assets/javascripts/ide/components/jobs/item.vue
index c8e621504f0..7f4695a0451 100644
--- a/app/assets/javascripts/ide/components/jobs/item.vue
+++ b/app/assets/javascripts/ide/components/jobs/item.vue
@@ -27,8 +27,8 @@ export default {
 <template>
   <div class="ide-job-item">
     <job-description
-      class="append-right-default"
       :job="job"
+      class="append-right-default"
     />
     <div class="ml-auto align-self-center">
       <button
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index b1428f885fb..15e881b7bc8 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -60,10 +60,10 @@ export default {
     class="ide-stage card prepend-top-default"
   >
     <div
-      class="card-header"
       :class="{
         'border-bottom-0': stage.isCollapsed
       }"
+      class="card-header"
       @click="toggleCollapsed"
     >
       <ci-icon
@@ -72,10 +72,10 @@ export default {
       />
       <strong
         v-tooltip="showTooltip"
+        ref="stageTitle"
         :title="showTooltip ? stage.name : null"
         data-container="body"
         class="prepend-left-8 ide-stage-title"
-        ref="stageTitle"
       >
         {{ stage.name }}
       </strong>
@@ -93,8 +93,8 @@ export default {
       />
     </div>
     <div
-      class="card-body"
       v-show="!stage.isCollapsed"
+      class="card-body"
     >
       <loading-icon
         v-if="showLoadingIcon"
diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
index 8cc8345db2e..4b9824bf04b 100644
--- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
@@ -42,8 +42,8 @@ export default {
           </span>
         </template>
         <list
-          type="created"
           :empty-text="__('You have not created any merge requests')"
+          type="created"
         />
       </tab>
       <tab>
@@ -54,8 +54,8 @@ export default {
           </span>
         </template>
         <list
-          type="assigned"
           :empty-text="__('You do not have any assigned merge requests')"
+          type="assigned"
         />
       </tab>
     </tabs>
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
index b50fc8a3dbb..4e18376bd48 100644
--- a/app/assets/javascripts/ide/components/merge_requests/item.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -47,8 +47,8 @@ export default {
     <span class="d-flex append-right-default ide-merge-request-current-icon">
       <icon
         v-if="isActive"
-        name="mobile-issue-close"
         :size="18"
+        name="mobile-issue-close"
       />
     </span>
     <span>
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 5896e3a147d..19d3e48ee10 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -80,12 +80,12 @@ export default {
   <div>
     <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
       <input
-        type="search"
-        class="dropdown-input-field"
+        ref="searchInput"
         :placeholder="__('Search merge requests')"
         v-model="search"
+        type="search"
+        class="dropdown-input-field"
         @input="searchMergeRequests"
-        ref="searchInput"
       />
       <i
         aria-hidden="true"
@@ -94,8 +94,8 @@ export default {
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <loading-icon
-        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
         v-if="isLoading"
+        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
         size="2"
       />
       <ul
diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue
index 179a589d1ac..821be319cce 100644
--- a/app/assets/javascripts/ide/components/mr_file_icon.vue
+++ b/app/assets/javascripts/ide/components/mr_file_icon.vue
@@ -14,10 +14,10 @@ export default {
 
 <template>
   <icon
-    name="git-merge"
     v-tooltip
     :title="__('Part of merge request changes')"
-    css-classes="append-right-8"
     :size="12"
+    name="git-merge"
+    css-classes="append-right-8"
   />
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index f0b29702497..1e398d7e1aa 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -55,10 +55,10 @@ export default {
 <template>
   <div class="ide-new-btn">
     <div
-      class="dropdown"
       :class="{
         show: dropdownOpen,
       }"
+      class="dropdown"
     >
       <button
         type="button"
@@ -67,19 +67,19 @@ export default {
         @click.stop="openDropdown()"
       >
         <icon
-          name="plus"
           :size="12"
+          name="plus"
           css-classes="float-left"
         />
         <icon
-          name="arrow-down"
           :size="12"
+          name="arrow-down"
           css-classes="float-left"
         />
       </button>
       <ul
-        class="dropdown-menu dropdown-menu-right"
         ref="dropdownMenu"
+        class="dropdown-menu dropdown-menu-right"
       >
         <li>
           <a
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index dd2800179ff..1e9668d5154 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -71,18 +71,18 @@ export default {
   >
     <form
       slot="body"
-      @submit.prevent="createEntryInStore"
       class="form-group row"
+      @submit.prevent="createEntryInStore"
     >
       <label class="label-light col-form-label col-sm-3">
         {{ __('Name') }}
       </label>
       <div class="col-sm-9">
         <input
+          ref="fieldName"
+          v-model="entryName"
           type="text"
           class="form-control"
-          v-model="entryName"
-          ref="fieldName"
         />
       </div>
     </form>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index c165af5ce52..1814924be39 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -67,9 +67,9 @@
     </a>
     <input
       id="file-upload"
+      ref="fileUpload"
       type="file"
       class="hidden"
-      ref="fileUpload"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index dd7fc8f1e01..dedc2988618 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -44,10 +44,10 @@ export default {
   >
     <resizable-panel
       v-if="rightPane"
-      class="multi-file-commit-panel-inner"
       :collapsible="false"
       :initial-width="350"
       :min-size="350"
+      class="multi-file-commit-panel-inner"
       side="right"
     >
       <component :is="rightPane" />
@@ -57,13 +57,13 @@ export default {
         <li>
           <button
             v-tooltip
-            data-container="body"
-            data-placement="left"
             :title="__('Pipelines')"
-            class="ide-sidebar-link is-right"
             :class="{
               active: pipelinesActive
             }"
+            data-container="body"
+            data-placement="left"
+            class="ide-sidebar-link is-right"
             type="button"
             @click="clickTab($event, $options.rightSidebarViews.pipelines)"
           >
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 06455fac439..4d29e9f8060 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -75,8 +75,8 @@ export default {
           >
             #{{ latestPipeline.id }}
             <icon
-              name="external-link"
               :size="12"
+              name="external-link"
             />
           </a>
         </span>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 46e8ee26d3c..01df0019fd4 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -77,8 +77,8 @@ export default {
     <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
-      kind="success"
       :title="__('Branch has changed')"
+      kind="success"
       @submit="forceCreateNewBranch"
     >
       <template slot="body">
@@ -90,26 +90,26 @@ export default {
       v-if="showStageUnstageArea"
     >
       <commit-files-list
-        class="is-first"
-        icon-name="unstaged"
         :title="__('Unstaged')"
         :key-prefix="$options.stageKeys.unstaged"
         :file-list="changedFiles"
-        action="stageAllChanges"
         :action-btn-text="__('Stage all')"
-        item-action-component="stage-button"
         :active-file-key="activeFileKey"
+        class="is-first"
+        icon-name="unstaged"
+        action="stageAllChanges"
+        item-action-component="stage-button"
       />
       <commit-files-list
-        icon-name="staged"
         :title="__('Staged')"
         :key-prefix="$options.stageKeys.staged"
         :file-list="stagedFiles"
-        action="unstageAllChanges"
         :action-btn-text="__('Unstage all')"
-        item-action-component="unstage-button"
         :staged-list="true"
         :active-file-key="activeFileKey"
+        icon-name="staged"
+        action="unstageAllChanges"
+        item-action-component="unstage-button"
       />
     </template>
     <empty-state
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 96f181ff79d..24b6a4fdea1 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -201,8 +201,8 @@ export default {
   >
     <div class="ide-mode-tabs clearfix" >
       <ul
-        class="nav-links float-left"
         v-if="!shouldHideEditor && isEditModeActive"
+        class="nav-links float-left"
       >
         <li :class="editTabCSS">
           <a
@@ -235,10 +235,10 @@ export default {
     <div
       v-show="!shouldHideEditor && file.viewMode ==='editor'"
       ref="editor"
-      class="multi-file-editor-holder"
       :class="{
         'is-readonly': isCommitModeActive,
       }"
+      class="multi-file-editor-holder"
     >
     </div>
     <content-viewer
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index f56aeced806..c34547fcc60 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -120,17 +120,17 @@ export default {
 <template>
   <div>
     <div
-      class="file"
       :class="fileClass"
-      @click="clickFile"
+      class="file"
       role="button"
+      @click="clickFile"
     >
       <div
         class="file-name"
       >
         <span
-          class="ide-file-name str-truncated"
           :style="levelIndentation"
+          class="ide-file-name str-truncated"
         >
           <file-icon
             :file-name="file.name"
@@ -156,10 +156,10 @@ export default {
             <icon
               v-tooltip
               :title="folderChangesTooltip"
+              :size="12"
               data-container="body"
               data-placement="right"
               name="file-modified"
-              :size="12"
               css-classes="prepend-left-5 multi-file-modified"
             />
           </span>
diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
index 97589e116c5..76a3333be50 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -26,8 +26,8 @@ export default {
 
 <template>
   <span
-    v-if="file.file_lock"
     v-tooltip
+    v-if="file.file_lock"
     :title="lockTooltip"
     data-container="body"
   >
diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
index 3e47da88050..7a5ede82253 100644
--- a/app/assets/javascripts/ide/components/repo_loading_file.vue
+++ b/app/assets/javascripts/ide/components/repo_loading_file.vue
@@ -33,8 +33,8 @@
 
       <td class="d-none d-sm-block">
         <skeleton-loading-container
-          class="animation-container-right"
           :small="true"
+          class="animation-container-right"
         />
       </td>
     </template>
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index fb26b973236..1ad52c1bd83 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -76,8 +76,8 @@ export default {
     @mouseout="mouseOutTab"
   >
     <div
-      class="multi-file-tab"
       :title="tab.url"
+      class="multi-file-tab"
     >
       <file-icon
         :file-name="tab.name"
@@ -89,16 +89,16 @@ export default {
       />
     </div>
     <button
+      :aria-label="closeLabel"
+      :disabled="tab.pending"
       type="button"
       class="multi-file-tab-close"
       @click.stop.prevent="closeFile(tab)"
-      :aria-label="closeLabel"
-      :disabled="tab.pending"
     >
       <icon
         v-if="!showChangedIcon"
-        name="close"
         :size="12"
+        name="close"
       />
       <changed-file-icon
         v-else
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 99e51097e12..c12a63e26be 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -52,8 +52,8 @@ export default {
 <template>
   <div class="multi-file-tabs">
     <ul
-      class="list-unstyled append-bottom-0"
       ref="tabsScroller"
+      class="list-unstyled append-bottom-0"
     >
       <repo-tab
         v-for="tab in files"
diff --git a/app/assets/javascripts/ide/components/resizable_panel.vue b/app/assets/javascripts/ide/components/resizable_panel.vue
index 5ea2a2f6825..7277fcb7617 100644
--- a/app/assets/javascripts/ide/components/resizable_panel.vue
+++ b/app/assets/javascripts/ide/components/resizable_panel.vue
@@ -63,11 +63,11 @@ export default {
 
 <template>
   <div
-    class="multi-file-commit-panel"
     :class="{
       'is-collapsed': collapsed && collapsible,
     }"
     :style="panelStyle"
+    class="multi-file-commit-panel"
     @click="toggleFullbarCollapsed"
   >
     <slot></slot>
@@ -77,9 +77,9 @@ export default {
       :start-size="initialWidth"
       :min-size="minSize"
       :max-size="$options.maxSize"
+      :side="side === 'right' ? 'left' : 'right'"
       @resize-start="setResizingStatus(true)"
       @resize-end="setResizingStatus(false)"
-      :side="side === 'right' ? 'left' : 'right'"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index ae577e04a56..1174177f561 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -110,25 +110,25 @@
 <template>
   <div
     v-if="descriptionHtml"
-    class="description"
     :class="{
       'js-task-list-container': canUpdate
     }"
+    class="description"
   >
     <div
-      class="wiki"
+      ref="gfm-content"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
-      v-html="descriptionHtml"
-      ref="gfm-content">
+      class="wiki"
+      v-html="descriptionHtml">
     </div>
     <textarea
-      class="hidden js-task-list-field"
       v-if="descriptionText"
       v-model="descriptionText"
       :data-update-url="updateUrl"
+      class="hidden js-task-list-field"
     >
     </textarea>
 
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 7ef5e679881..8cb0ab22bfb 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -51,16 +51,16 @@
 <template>
   <div class="prepend-top-default append-bottom-default clearfix">
     <button
-      class="btn btn-save float-left"
       :class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
-      type="submit"
       :disabled="formState.updateLoading || !isSubmitEnabled"
+      class="btn btn-save float-left"
+      type="submit"
       @click.prevent="updateIssuable">
       Save changes
       <i
+        v-if="formState.updateLoading"
         class="fa fa-spinner fa-spin"
-        aria-hidden="true"
-        v-if="formState.updateLoading">
+        aria-hidden="true">
       </i>
     </button>
     <button
@@ -71,16 +71,16 @@
     </button>
     <button
       v-if="shouldShowDeleteButton"
-      class="btn btn-danger float-right append-right-default"
       :class="{ disabled: deleteLoading }"
-      type="button"
       :disabled="deleteLoading"
+      class="btn btn-danger float-right append-right-default"
+      type="button"
       @click="deleteIssuable">
       Delete
       <i
+        v-if="deleteLoading"
         class="fa fa-spinner fa-spin"
-        aria-hidden="true"
-        v-if="deleteLoading">
+        aria-hidden="true">
       </i>
     </button>
   </div>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 01097b5b35e..5ff5b1630b1 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -37,16 +37,16 @@
     Edited
     <time-ago-tooltip
       v-if="updatedAt"
-      tooltip-placement="bottom"
       :time="updatedAt"
+      tooltip-placement="bottom"
     />
     <span
       v-if="hasUpdatedBy"
     >
       by
       <a
-        class="author_link"
         :href="updatedByPath"
+        class="author_link"
       >
         <span>{{ updatedByName }}</span>
       </a>
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 33110d27050..5f58f671c73 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -52,12 +52,12 @@
     >
       <textarea
         id="issue-description"
+        ref="textarea"
+        slot="textarea"
+        v-model="formState.description"
         class="note-textarea js-gfm-input js-autosize markdown-area"
         data-supports-quick-actions="false"
         aria-label="Description"
-        v-model="formState.description"
-        ref="textarea"
-        slot="textarea"
         placeholder="Write a comment or drag your files here…"
         @keydown.meta.enter="updateIssuable"
         @keydown.ctrl.enter="updateIssuable">
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index 7db0488e306..e90d9fad94e 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -48,15 +48,15 @@
     class="dropdown js-issuable-selector-wrap"
     data-issuable-type="issue">
     <button
+      ref="toggle"
+      :data-namespace-path="projectNamespace"
+      :data-project-path="projectPath"
+      :data-data="issuableTemplatesJson"
       class="dropdown-menu-toggle js-issuable-selector"
       type="button"
-      ref="toggle"
       data-field-name="issuable_template"
       data-selected="null"
-      data-toggle="dropdown"
-      :data-namespace-path="projectNamespace"
-      :data-project-path="projectPath"
-      :data-data="issuableTemplatesJson">
+      data-toggle="dropdown">
       <span class="dropdown-toggle-text">
         Choose a template
       </span>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index c3abb9fd9d5..7d1526a64b4 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -21,11 +21,11 @@
     </label>
     <input
       id="issuable-title"
+      v-model="formState.title"
       class="form-control"
       type="text"
       placeholder="Title"
       aria-label="Title"
-      v-model="formState.title"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable" />
   </fieldset>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index ab8bd34762f..5bfc072e3da 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -72,8 +72,8 @@
     <locked-warning v-if="formState.lockedWarningVisible" />
     <div class="row">
       <div
-        class="col-sm-4 col-lg-3"
-        v-if="hasIssuableTemplates">
+        v-if="hasIssuableTemplates"
+        class="col-sm-4 col-lg-3">
         <description-template
           :form-state="formState"
           :issuable-templates="issuableTemplates"
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index aec890a2ff6..12101c0daa5 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -67,11 +67,11 @@
 <template>
   <div class="title-container">
     <h2
-      class="title"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation
       }"
+      class="title"
       v-html="titleHtml"
     >
     </h2>
@@ -80,11 +80,11 @@
       v-if="showInlineEditButton && canUpdate"
       type="button"
       class="btn btn-default btn-edit btn-svg js-issuable-edit"
-      v-html="pencilIcon"
       title="Edit title and description"
       data-placement="bottom"
       data-container="body"
       @click="edit"
+      v-html="pencilIcon"
     >
     </button>
   </div>
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue
index 5704d753277..1e7f4b2c3f7 100644
--- a/app/assets/javascripts/jobs/components/header.vue
+++ b/app/assets/javascripts/jobs/components/header.vue
@@ -74,13 +74,13 @@ export default {
       <ci-header
         v-if="shouldRenderContent"
         :status="status"
-        item-name="Job"
         :item-id="job.id"
         :time="headerTime"
         :user="job.user"
         :actions="actions"
         :has-sidebar-button="true"
         :should-render-triggered-label="jobStarted"
+        item-name="Job"
       />
       <loading-icon
         v-if="isLoading"
diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
index 8f3c66b0cbe..d2adf628050 100644
--- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue
@@ -101,8 +101,8 @@ export default {
         {{ __('Retry') }}
       </a>
       <button
-        type="button"
         :aria-label="__('Toggle Sidebar')"
+        type="button"
         class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
       >
         <i
@@ -114,20 +114,20 @@ export default {
     </div>
     <template v-if="shouldRenderContent">
       <div
-        class="block retry-link"
         v-if="job.retry_path || job.new_issue_path"
+        class="block retry-link"
       >
         <a
           v-if="job.new_issue_path"
-          class="js-new-issue btn btn-new btn-inverted"
           :href="job.new_issue_path"
+          class="js-new-issue btn btn-new btn-inverted"
         >
           {{ __('New issue') }}
         </a>
         <a
           v-if="canUserRetry"
-          class="js-retry-job btn btn-inverted-secondary"
           :href="job.retry_path"
+          class="js-retry-job btn btn-inverted-secondary"
           data-method="post"
           rel="nofollow"
         >
@@ -136,8 +136,8 @@ export default {
       </div>
       <div :class="{block : renderBlock }">
         <p
-          class="build-detail-row js-job-mr"
           v-if="job.merge_request"
+          class="build-detail-row js-job-mr"
         >
           <span class="build-light-text">
             {{ __('Merge Request:') }}
@@ -148,51 +148,51 @@ export default {
         </p>
 
         <detail-row
-          class="js-job-duration"
           v-if="job.duration"
-          title="Duration"
           :value="duration"
+          class="js-job-duration"
+          title="Duration"
         />
         <detail-row
-          class="js-job-finished"
           v-if="job.finished_at"
-          title="Finished"
           :value="timeFormated(job.finished_at)"
+          class="js-job-finished"
+          title="Finished"
         />
         <detail-row
-          class="js-job-erased"
           v-if="job.erased_at"
-          title="Erased"
           :value="timeFormated(job.erased_at)"
+          class="js-job-erased"
+          title="Erased"
         />
         <detail-row
-          class="js-job-queued"
           v-if="job.queued"
-          title="Queued"
           :value="queued"
+          class="js-job-queued"
+          title="Queued"
         />
         <detail-row
-          class="js-job-timeout"
           v-if="hasTimeout"
-          title="Timeout"
           :help-url="runnerHelpUrl"
           :value="timeout"
+          class="js-job-timeout"
+          title="Timeout"
         />
         <detail-row
-          class="js-job-runner"
           v-if="job.runner"
-          title="Runner"
           :value="runnerId"
+          class="js-job-runner"
+          title="Runner"
         />
         <detail-row
-          class="js-job-coverage"
           v-if="job.coverage"
-          title="Coverage"
           :value="coverage"
+          class="js-job-coverage"
+          title="Coverage"
         />
         <p
-          class="build-detail-row js-job-tags"
           v-if="job.tags.length"
+          class="build-detail-row js-job-tags"
         >
           <span class="build-light-text">
             {{ __('Tags:') }}
@@ -210,8 +210,8 @@ export default {
           class="btn-group prepend-top-5"
           role="group">
           <a
-            class="js-cancel-job btn btn-sm btn-default"
             :href="job.cancel_path"
+            class="js-cancel-job btn btn-sm btn-default"
             data-method="post"
             rel="nofollow"
           >
@@ -221,8 +221,8 @@ export default {
       </div>
     </template>
     <loading-icon
-      class="prepend-top-10"
       v-if="isLoading"
+      class="prepend-top-10"
       size="2"
     />
   </div>
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index 2cb238529aa..e4ed8111824 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -11,9 +11,18 @@ import { __ } from '~/locale';
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
     props: {
-      file: Object,
-      onCancelDiscardConfirmation: Function,
-      onAcceptDiscardConfirmation: Function
+      file: {
+        type: Object,
+        required: true,
+      },
+      onCancelDiscardConfirmation: {
+        type: Function,
+        required: true,
+      },
+      onAcceptDiscardConfirmation: {
+        type: Function,
+        required: true,
+      },
     },
     data() {
       return {
diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
index 5bae6d63df6..827cf5f478d 100644
--- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
@@ -8,9 +8,12 @@ import utilsMixin from '../mixins/line_conflict_utils';
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.inlineConflictLines = Vue.extend({
+    mixins: [utilsMixin, actionsMixin],
     props: {
-      file: Object,
+      file: {
+        type: Object,
+        required: true,
+      },
     },
-    mixins: [utilsMixin, actionsMixin],
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
index 0572a76f2ed..57e73e38d88 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -8,10 +8,13 @@ import utilsMixin from '../mixins/line_conflict_utils';
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({
+    mixins: [utilsMixin, actionsMixin],
     props: {
-      file: Object
+      file: {
+        type: Object,
+        required: true,
+      },
     },
-    mixins: [utilsMixin, actionsMixin],
     template: `
       <table>
         <tr class="line_holder parallel" v-for="section in file.parallelLines">
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index c77f451c2d3..82b9a4b1adb 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -107,8 +107,8 @@ export default {
     <div class="state-button">
       <a
         v-if="currentState.buttonPath"
-        class="btn btn-success"
         :href="currentState.buttonPath"
+        class="btn btn-success"
       >
         {{ currentState.buttonText }}
       </a>
@@ -116,8 +116,8 @@ export default {
     <div class="state-button">
       <a
         v-if="currentState.secondaryButtonPath"
-        class="btn"
         :href="currentState.secondaryButtonPath"
+        class="btn"
       >
         {{ currentState.secondaryButtonText }}
       </a>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 503ee1ce3d1..20400154100 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -241,16 +241,16 @@ export default {
       </div>
     </div>
     <div
-      class="prometheus-svg-container"
       :style="paddingBottomRootSvg"
+      class="prometheus-svg-container"
     >
       <svg
-        :viewBox="outerViewBox"
         ref="baseSvg"
+        :viewBox="outerViewBox"
       >
         <g
-          class="x-axis"
           :transform="axisTransform"
+          class="x-axis"
         />
         <g
           class="y-axis"
@@ -265,9 +265,9 @@ export default {
           :unit-of-display="unitOfDisplay"
         />
         <svg
-          class="graph-data"
-          :viewBox="innerViewBox"
           ref="graphData"
+          :viewBox="innerViewBox"
+          class="graph-data"
         >
           <graph-path
             v-for="(path, index) in timeSeries"
@@ -287,11 +287,11 @@ export default {
             :graph-height-offset="graphHeightOffset"
           />
           <rect
-            class="prometheus-graph-overlay"
+            ref="graphOverlay"
             :width="(graphWidth - 70)"
             :height="(graphHeight - 100)"
+            class="prometheus-graph-overlay"
             transform="translate(-5, 20)"
-            ref="graphOverlay"
             @mousemove="handleMouseOverGraph($event)"
           />
         </svg>
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index fc4b3689dfd..8a604a51eb2 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -92,48 +92,48 @@ export default {
 <template>
   <g class="axis-label-container">
     <line
+      :y1="yPosition"
+      :x2="graphWidth + 20"
+      :y2="yPosition"
       class="label-x-axis-line"
       stroke="#000000"
       stroke-width="1"
       x1="10"
-      :y1="yPosition"
-      :x2="graphWidth + 20"
-      :y2="yPosition"
     />
     <line
+      :x2="10"
+      :y2="yPosition"
       class="label-y-axis-line"
       stroke="#000000"
       stroke-width="1"
       x1="10"
       y1="0"
-      :x2="10"
-      :y2="yPosition"
     />
     <rect
-      class="rect-axis-text"
       :transform="rectTransform"
       :width="yLabelWidth"
       :height="yLabelHeight"
+      class="rect-axis-text"
     />
     <text
+      ref="ylabel"
+      :transform="textTransform"
       class="label-axis-text y-label-text"
       text-anchor="middle"
-      :transform="textTransform"
-      ref="ylabel"
     >
       {{ yAxisLabelSentenceCase }}
     </text>
     <rect
-      class="rect-axis-text"
       :x="xPosition + 60"
       :y="graphHeight - 80"
+      class="rect-axis-text"
       width="35"
       height="50"
     />
     <text
-      class="label-axis-text x-label-text"
       :x="xPosition + 60"
       :y="yPosition"
+      class="label-axis-text x-label-text"
       dy=".35em"
     >
       {{ timeString }}
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index 4012191ceb9..a7289ed53e8 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -33,18 +33,18 @@ export default {
       :key="index"
       :transform="transformDeploymentGroup(deployment)">
       <rect
+        :height="calculatedHeight"
         x="0"
         y="0"
-        :height="calculatedHeight"
         width="3"
         fill="url(#shadow-gradient)"
       />
       <line
+        :y2="calculatedHeight"
         class="deployment-line"
         x1="0"
         y1="0"
         x2="0"
-        :y2="calculatedHeight"
         stroke="#000"
       />
     </g>
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 8a771107de8..282c5c24384 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -117,13 +117,13 @@ export default {
 
 <template>
   <div
-    class="prometheus-graph-cursor"
     :style="cursorStyle"
+    class="prometheus-graph-cursor"
   >
     <div
       v-if="showFlagContent"
-      class="prometheus-graph-flag popover"
       :class="flagOrientation"
+      class="prometheus-graph-flag popover"
     >
       <div class="arrow"></div>
       <div class="popover-title">
@@ -139,8 +139,8 @@ export default {
       >
         <div>
           <icon
-            name="commit"
             :size="12"
+            name="commit"
           />
           <a :href="deploymentFlagData.commitUrl">
             {{ deploymentFlagData.sha.slice(0, 8) }}
@@ -150,8 +150,8 @@ export default {
           v-if="deploymentFlagData.tag"
         >
           <icon
-            name="label"
             :size="12"
+            name="label"
           />
           <a :href="deploymentFlagData.tagUrl">
             {{ deploymentFlagData.ref }}
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index da9280cf1f1..3276f3a1ceb 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -31,8 +31,8 @@ export default {
     <table class="prometheus-table">
       <tr
         v-for="(series, index) in timeSeries"
-        :key="index"
         v-if="series.shouldRenderLegend"
+        :key="index"
         :class="isStable(series)"
       >
         <td>
@@ -40,11 +40,11 @@ export default {
         </td>
         <track-line :track="series" />
         <td
-          class="legend-metric-title"
-          v-if="timeSeries.length > 1">
+          v-if="timeSeries.length > 1"
+          class="legend-metric-title">
           <track-info
-            :track="series"
-            v-if="series.metricTag" />
+            v-if="series.metricTag"
+            :track="series" />
           <track-info
             v-else
             :track="series">
@@ -62,8 +62,8 @@ export default {
             :key="`track-line-${trackIndex}`"/>
           <td :key="`track-info-${trackIndex}`">
             <track-info
-              class="legend-metric-title"
-              :track="track" />
+              :track="track"
+              class="legend-metric-title" />
           </td>
         </template>
       </tr>
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
index 52f8aa2ee3f..a9b7ce586ce 100644
--- a/app/assets/javascripts/monitoring/components/graph/path.vue
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -44,26 +44,26 @@ export default {
 <template>
   <g transform="translate(-5, 20)">
     <circle
-      class="circle-path"
+      v-if="showDot"
       :cx="currentCoordinates.currentX"
       :cy="currentCoordinates.currentY"
       :fill="lineColor"
       :stroke="lineColor"
+      class="circle-path"
       r="3"
-      v-if="showDot"
     />
     <path
-      class="metric-area"
       :d="generatedAreaPath"
       :fill="areaColor"
+      class="metric-area"
     />
     <path
-      class="metric-line"
       :d="generatedLinePath"
       :stroke="lineColor"
+      :stroke-dasharray="strokeDashArray"
+      class="metric-line"
       fill="none"
       stroke-width="1"
-      :stroke-dasharray="strokeDashArray"
     />
   </g>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
index 18be65fd1ef..ba3f93b39ff 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -24,11 +24,11 @@ export default {
       <line
         :stroke-dasharray="stylizedLine"
         :stroke="track.lineColor"
-        stroke-width="4"
         :x1="0"
         :x2="16"
         :y1="4"
         :y2="4"
+        stroke-width="4"
       />
     </svg>
   </td>
diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index b4067d229aa..18cef82cec0 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -39,10 +39,10 @@ export default {
 <template>
   <div class="cell">
     <code-cell
-      type="input"
       :raw-code="rawInputCode"
       :count="cell.execution_count"
-      :code-css-class="codeCssClass" />
+      :code-css-class="codeCssClass"
+      type="input" />
     <output-cell
       v-if="hasOutput"
       :count="cell.execution_count"
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 0f3083f05b2..7d2a1a33b98 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -48,9 +48,9 @@
       :type="promptType"
       :count="count" />
     <pre
-      class="language-python"
-      :class="codeCssClass"
       ref="code"
+      :class="codeCssClass"
+      class="language-python"
       v-text="code">
     </pre>
   </div>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 91b2269a83a..4183b976814 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -78,10 +78,10 @@
 <template>
   <component
     :is="componentName"
-    type="output"
     :output-type="outputType"
     :count="count"
     :raw-code="rawCode"
     :code-css-class="codeCssClass"
+    type="output"
   />
 </template>
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 17943d7abfb..ad6dd3d9a09 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -312,8 +312,8 @@ Please check your network connection and try again.`;
   <div>
     <note-signed-out-widget v-if="!isLoggedIn" />
     <discussion-locked-widget
-      issuable-type="issue"
       v-else-if="isLocked(getNoteableData) && !canCreateNote"
+      issuable-type="issue"
     />
     <ul
       v-else-if="canCreateNote"
@@ -345,22 +345,22 @@ Please check your network connection and try again.`;
               />
 
               <markdown-field
+                ref="markdownField"
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
-                :add-spacing-classes="false"
-                ref="markdownField">
+                :add-spacing-classes="false">
                 <textarea
                   id="note-body"
+                  ref="textarea"
+                  slot="textarea"
+                  v-model="note"
+                  :disabled="isSubmitting"
                   name="note[note]"
                   class="note-textarea js-vue-comment-form
 js-gfm-input js-autosize markdown-area js-vue-textarea"
                   data-supports-quick-actions="true"
                   aria-label="Description"
-                  v-model="note"
-                  ref="textarea"
-                  slot="textarea"
-                  :disabled="isSubmitting"
                   placeholder="Write a comment or drag your files here…"
                   @keydown.up="editCurrentUserLastNote()"
                   @keydown.meta.enter="handleSave()"
@@ -372,10 +372,10 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
                   class="float-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
                   <button
-                    @click.prevent="handleSave()"
                     :disabled="isSubmitButtonDisabled"
                     class="btn btn-create comment-btn js-comment-button js-comment-submit-button"
-                    type="submit">
+                    type="submit"
+                    @click.prevent="handleSave()">
                     {{ __(commentButtonTitle) }}
                   </button>
                   <button
@@ -434,20 +434,20 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
                 <loading-button
                   v-if="canUpdateIssue"
                   :loading="isToggleStateButtonLoading"
-                  @click="handleSave(true)"
                   :container-class="[
                     actionButtonClassNames,
                     'btn btn-comment btn-comment-and-close js-action-button'
                   ]"
                   :disabled="isToggleStateButtonLoading || isSubmitting"
                   :label="issueActionButtonTitle"
+                  @click="handleSave(true)"
                 />
 
                 <button
-                  type="button"
                   v-if="note.length"
-                  @click="discard"
-                  class="btn btn-cancel js-note-discard">
+                  type="button"
+                  class="btn btn-cancel js-note-discard"
+                  @click="discard">
                   Discard draft
                 </button>
               </div>
diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue
index 94d9dc69964..fc7b52be241 100644
--- a/app/assets/javascripts/notes/components/diff_file_header.vue
+++ b/app/assets/javascripts/notes/components/diff_file_header.vue
@@ -29,12 +29,12 @@ export default {
       <span>
         <icon name="archive" />
         <strong
-          v-html="diffFile.submoduleLink"
           class="file-title-name"
+          v-html="diffFile.submoduleLink"
         ></strong>
         <clipboard-button
-          title="Copy file path to clipboard"
           :text="diffFile.submoduleLink"
+          title="Copy file path to clipboard"
           css-class="btn-default btn-transparent btn-clipboard"
         />
       </span>
@@ -48,16 +48,16 @@ export default {
         <span v-html="diffFile.blobIcon"></span>
         <span v-if="diffFile.renamedFile">
           <strong
-            class="file-title-name has-tooltip"
             :title="diffFile.oldPath"
+            class="file-title-name has-tooltip"
             data-container="body"
           >
             {{ diffFile.oldPath }}
           </strong>
           &rarr;
           <strong
-            class="file-title-name has-tooltip"
             :title="diffFile.newPath"
+            class="file-title-name has-tooltip"
             data-container="body"
           >
             {{ diffFile.newPath }}
@@ -66,8 +66,8 @@ export default {
 
         <strong
           v-else
-          class="file-title-name has-tooltip"
           :title="diffFile.oldPath"
+          class="file-title-name has-tooltip"
           data-container="body"
         >
           {{ diffFile.filePath }}
@@ -78,8 +78,8 @@ export default {
       </component>
 
       <clipboard-button
-        title="Copy file path to clipboard"
         :text="diffFile.filePath"
+        title="Copy file path to clipboard"
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index ee01ec85bbb..cafb28910eb 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -60,8 +60,8 @@ export default {
 <template>
   <div
     ref="fileHolder"
-    class="diff-file file-holder"
     :class="diffFileClass"
+    class="diff-file file-holder"
   >
     <div class="js-file-title file-title file-title-flex-parent">
       <diff-file-header
@@ -74,11 +74,11 @@ export default {
     >
       <table>
         <component
+          v-for="(html, index) in diffRows"
           :is="rowTag(html)"
           :class="html.className"
-          v-for="(html, index) in diffRows"
-          v-html="html.outerHTML"
           :key="index"
+          v-html="html.outerHTML"
         />
         <tr class="notes_holder">
           <td
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index cbe4774a360..68e17ac8055 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -95,8 +95,8 @@ export default {
         class="btn-group"
         role="group">
         <a
-          :href="resolveAllDiscussionsIssuePath"
           v-tooltip
+          :href="resolveAllDiscussionsIssuePath"
           title="Resolve all discussions in new issue"
           data-container="body"
           class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
@@ -108,11 +108,11 @@ export default {
         class="btn-group"
         role="group">
         <button
-          @click="jumpToFirstDiscussion"
           v-tooltip
           title="Jump to first unresolved discussion"
           data-container="body"
-          class="btn btn-default discussion-next-btn">
+          class="btn btn-default discussion-next-btn"
+          @click="jumpToFirstDiscussion">
           <span v-html="nextDiscussionSvg"></span>
         </button>
       </div>
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index 13283b187d1..de0a5f8489b 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -14,8 +14,8 @@ export default {
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning inline">
       <icon
-        name="lock"
         :size="16"
+        name="lock"
         class="icon"
       />
       <span>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 626b0799581..0bf4258a257 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -129,12 +129,12 @@ export default {
       class="note-actions-item">
       <button
         v-tooltip
-        @click="onResolve"
         :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
         :title="resolveButtonTitle"
         :aria-label="resolveButtonTitle"
         type="button"
-        class="line-resolve-btn note-action-button">
+        class="line-resolve-btn note-action-button"
+        @click="onResolve">
         <template v-if="!isResolving">
           <div
             v-if="isResolved"
@@ -164,16 +164,16 @@ export default {
       >
         <loading-icon :inline="true" />
         <span
-          v-html="emojiSmiling"
-          class="link-highlight award-control-icon-neutral">
+          class="link-highlight award-control-icon-neutral"
+          v-html="emojiSmiling">
         </span>
         <span
-          v-html="emojiSmiley"
-          class="link-highlight award-control-icon-positive">
+          class="link-highlight award-control-icon-positive"
+          v-html="emojiSmiley">
         </span>
         <span
-          v-html="emojiSmile"
-          class="link-highlight award-control-icon-super-positive">
+          class="link-highlight award-control-icon-super-positive"
+          v-html="emojiSmile">
         </span>
       </a>
     </div>
@@ -181,16 +181,16 @@ export default {
       v-if="canEdit"
       class="note-actions-item">
       <button
-        @click="onEdit"
         v-tooltip
         type="button"
         title="Edit comment"
         class="note-action-button js-note-edit btn btn-transparent"
         data-container="body"
-        data-placement="bottom">
+        data-placement="bottom"
+        @click="onEdit">
         <span
-          v-html="editSvg"
-          class="link-highlight">
+          class="link-highlight"
+          v-html="editSvg">
         </span>
       </button>
     </div>
@@ -218,9 +218,9 @@ export default {
         </li>
         <li v-if="canEdit">
           <button
-            @click.prevent="onDelete"
             class="btn btn-transparent js-note-delete js-note-delete"
-            type="button">
+            type="button"
+            @click.prevent="onDelete">
             <span class="text-danger">
               Delete comment
             </span>
diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index e8fd155a1ee..521b4d16286 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -199,10 +199,10 @@ export default {
         :key="index"
         :class="getAwardClassBindings(awardList, awardName)"
         :title="awardTitle(awardList)"
-        @click="handleAward(awardName)"
         class="btn award-control"
         data-placement="bottom"
-        type="button">
+        type="button"
+        @click="handleAward(awardName)">
         <span v-html="getAwardHTML(awardName)"></span>
         <span class="award-control-text js-counter">
           {{ awardList.length }}
@@ -220,16 +220,16 @@ export default {
           data-placement="bottom"
           type="button">
           <span
-            v-html="emojiSmiling"
-            class="award-control-icon award-control-icon-neutral">
+            class="award-control-icon award-control-icon-neutral"
+            v-html="emojiSmiling">
           </span>
           <span
-            v-html="emojiSmiley"
-            class="award-control-icon award-control-icon-positive">
+            class="award-control-icon award-control-icon-positive"
+            v-html="emojiSmiley">
           </span>
           <span
-            v-html="emojiSmile"
-            class="award-control-icon award-control-icon-super-positive">
+            class="award-control-icon award-control-icon-super-positive"
+            v-html="emojiSmile">
           </span>
           <i
             aria-hidden="true"
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 0cb626c14f4..864edcd2ec6 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -80,20 +80,20 @@ export default {
 
 <template>
   <div
-    :class="{ 'js-task-list-container': canEdit }"
     ref="note-body"
+    :class="{ 'js-task-list-container': canEdit }"
     class="note-body">
     <div
-      v-html="note.note_html"
-      class="note-text md"></div>
+      class="note-text md"
+      v-html="note.note_html"></div>
     <note-form
       v-if="isEditing"
       ref="noteForm"
-      @handleFormUpdate="handleFormUpdate"
-      @cancelFormEdition="formCancelHandler"
       :is-editing="isEditing"
       :note-body="noteBody"
       :note-id="note.id"
+      @handleFormUpdate="handleFormUpdate"
+      @cancelFormEdition="formCancelHandler"
     />
     <textarea
       v-if="canEdit"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 93b66986958..7254ef3357d 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -165,14 +165,14 @@ export default {
         :add-spacing-classes="false">
         <textarea
           id="note_note"
+          ref="textarea"
+          slot="textarea"
+          :data-supports-quick-actions="!isEditing"
+          v-model="updatedNoteBody"
           name="note[note]"
           class="note-textarea js-gfm-input
 js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
-          :data-supports-quick-actions="!isEditing"
           aria-label="Description"
-          v-model="updatedNoteBody"
-          ref="textarea"
-          slot="textarea"
           placeholder="Write a comment or drag your files here…"
           @keydown.meta.enter="handleUpdate()"
           @keydown.ctrl.enter="handleUpdate()"
@@ -182,23 +182,23 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
       </markdown-field>
       <div class="note-form-actions clearfix">
         <button
-          type="button"
-          @click="handleUpdate()"
           :disabled="isDisabled"
-          class="js-vue-issue-save btn btn-save">
+          type="button"
+          class="js-vue-issue-save btn btn-save"
+          @click="handleUpdate()">
           {{ saveButtonTitle }}
         </button>
         <button
           v-if="note.resolvable"
-          @click.prevent="handleUpdate(true)"
           class="btn btn-nr btn-default append-right-10 js-comment-resolve-button"
+          @click.prevent="handleUpdate(true)"
         >
           {{ resolveButtonTitle }}
         </button>
         <button
-          @click="cancelHandler()"
           class="btn btn-cancel note-edit-cancel"
-          type="button">
+          type="button"
+          @click="cancelHandler()">
           Cancel
         </button>
       </div>
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index a4081957207..ffe3ba9c805 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -66,9 +66,9 @@ export default {
       v-if="includeToggle"
       class="discussion-actions">
       <button
-        @click="handleToggle"
         class="note-action-button discussion-toggle-button js-vue-toggle-button"
-        type="button">
+        type="button"
+        @click="handleToggle">
         <i
           :class="toggleChevronClass"
           class="fa"
@@ -90,16 +90,16 @@ export default {
         </template>
         <span
           v-if="actionTextHtml"
-          v-html="actionTextHtml"
-          class="system-note-message">
+          class="system-note-message"
+          v-html="actionTextHtml">
         </span>
         <span class="system-note-separator">
           &middot;
         </span>
         <a
           :href="noteTimestampLink"
-          @click="updateTargetNoteHash"
-          class="note-timestamp system-note-separator">
+          class="note-timestamp system-note-separator"
+          @click="updateTargetNoteHash">
           <time-ago-tooltip
             :time="createdAt"
             tooltip-placement="bottom"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 7f5aacaa3a2..f9f5041a9f9 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -229,9 +229,9 @@ Please check your network connection and try again.`;
               :note-id="discussion.id"
               :include-toggle="true"
               :expanded="note.expanded"
-              @toggleHandler="toggleDiscussionHandler"
               action-text="started a discussion"
               class="discussion"
+              @toggleHandler="toggleDiscussionHandler"
             />
             <note-edited-text
               v-if="lastUpdatedAt"
@@ -269,19 +269,19 @@ Please check your network connection and try again.`;
                         class="btn-group"
                         role="group">
                         <button
-                          @click="showReplyForm"
                           type="button"
                           class="js-vue-discussion-reply btn btn-text-field"
-                          title="Add a reply">Reply...</button>
+                          title="Add a reply"
+                          @click="showReplyForm">Reply...</button>
                       </div>
                       <div
                         v-if="note.resolvable"
                         class="btn-group"
                         role="group">
                         <button
-                          @click="resolveHandler()"
                           type="button"
                           class="btn btn-default"
+                          @click="resolveHandler()"
                         >
                           <i
                             v-if="isResolving"
@@ -301,8 +301,8 @@ Please check your network connection and try again.`;
                           class="btn-group"
                           role="group">
                           <a
-                            :href="note.resolve_with_issue_path"
                             v-tooltip
+                            :href="note.resolve_with_issue_path"
                             class="new-issue-for-discussion btn
                               btn-default discussion-create-issue-btn"
                             title="Resolve this discussion in a new issue"
@@ -316,11 +316,11 @@ Please check your network connection and try again.`;
                           class="btn-group"
                           role="group">
                           <button
-                            @click="jumpToDiscussion"
                             v-tooltip
                             class="btn btn-default discussion-next-btn"
                             title="Jump to next unresolved discussion"
                             data-container="body"
+                            @click="jumpToDiscussion"
                           >
                             <span v-html="nextDiscussionsSvg"></span>
                           </button>
@@ -330,12 +330,12 @@ Please check your network connection and try again.`;
                   </template>
                   <note-form
                     v-if="isReplying"
-                    save-button-title="Comment"
+                    ref="noteForm"
                     :note="note"
                     :is-editing="false"
+                    save-button-title="Comment"
                     @handleFormUpdate="saveReply"
-                    @cancelFormEdition="cancelReplyForm"
-                    ref="noteForm" />
+                    @cancelFormEdition="cancelReplyForm" />
                   <note-signed-out-widget v-if="!canReply" />
                 </div>
               </div>
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 566f5c68e66..ec3ee407f0a 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -151,10 +151,10 @@ export default {
 
 <template>
   <li
-    class="note timeline-entry"
     :id="noteAnchorId"
     :class="classNameBindings"
-    :data-award-url="note.toggle_award_path">
+    :data-award-url="note.toggle_award_path"
+    class="note timeline-entry">
     <div class="timeline-entry-inner">
       <div class="timeline-icon">
         <user-avatar-link
@@ -191,12 +191,12 @@ export default {
           />
         </div>
         <note-body
+          ref="noteBody"
           :note="note"
           :can-edit="note.current_user.can_edit"
           :is-editing="isEditing"
           @handleFormUpdate="formUpdateHandler"
           @cancelFormEdition="formCancelHandler"
-          ref="noteBody"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index ba1d8e4d8db..bc84666779e 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -40,8 +40,8 @@
   <gl-modal
     id="stop-jobs-modal"
     :header-title-text="s__('AdminArea|Stop all jobs?')"
-    footer-primary-button-variant="danger"
     :footer-primary-button-text="s__('AdminArea|Stop jobs')"
+    footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
     {{ text }}
diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index 343c65edb37..ff66d3a8ac4 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -83,9 +83,9 @@
     id="delete-project-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="primaryButtonLabel"
     :submit-disabled="!canSubmit"
+    kind="danger"
     @submit="onSubmit"
     @cancel="onCancel"
   >
@@ -107,15 +107,15 @@
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
         <input
+          v-model="enteredProjectName"
           name="projectName"
           class="form-control"
           type="text"
-          v-model="enteredProjectName"
           aria-labelledby="input-label"
           autocomplete="off"
         />
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index 9ce176744ba..cc2805a1901 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -116,10 +116,10 @@
     id="delete-user-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="primaryButtonLabel"
     :secondary-button-label="secondaryButtonLabel"
     :submit-disabled="!canSubmit"
+    kind="danger"
     @submit="onSubmit"
     @cancel="onCancel"
   >
@@ -141,15 +141,15 @@
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
         <input
+          v-model="enteredUsername"
           type="text"
           name="username"
           class="form-control"
-          v-model="enteredUsername"
           aria-labelledby="input-label"
           autocomplete="off"
         />
@@ -160,11 +160,11 @@
       slot-scope="props"
     >
       <button
+        :disabled="!canSubmit"
         type="button"
         class="btn js-secondary-button btn-warning"
-        :disabled="!canSubmit"
-        @click="onSecondaryAction"
         data-dismiss="modal"
+        @click="onSecondaryAction"
       >
         {{ secondaryButtonLabel }}
       </button>
diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
index 16f792d635a..4061c11ba8f 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue
@@ -96,8 +96,8 @@ Once deleted, it cannot be undone or recovered.`),
     id="delete-milestone-modal"
     :title="title"
     :text="text"
-    kind="danger"
     :primary-button-label="s__('Milestones|Delete milestone')"
+    kind="danger"
     @submit="onSubmit">
 
     <template
diff --git a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
index 2bda2aeb3a1..2c683a39f42 100644
--- a/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
+++ b/app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
@@ -53,8 +53,8 @@
 <template>
   <gl-modal
     id="promote-milestone-modal"
-    footer-primary-button-variant="warning"
     :footer-primary-button-text="s__('Milestones|Promote Milestone')"
+    footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
     <template
diff --git a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
index ad6df51bb7a..5d2247f6c6d 100644
--- a/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
+++ b/app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
@@ -71,8 +71,8 @@
 <template>
   <gl-modal
     id="promote-label-modal"
-    footer-primary-button-variant="warning"
     :footer-primary-button-text="s__('Labels|Promote Label')"
+    footer-primary-button-variant="warning"
     @submit="onSubmit"
   >
     <div
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 2d18fa2044b..d0613804067 100644
--- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
@@ -65,11 +65,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="custom"
-        class="label-light"
-        type="radio"
         :name="inputNameAttribute"
         :value="cronInterval"
         :checked="isEditable"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(true)"
       />
 
@@ -90,11 +90,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-day"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyDay"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -109,11 +109,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-week"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyWeek"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -128,11 +128,11 @@
     <div class="cron-preset-radio-input">
       <input
         id="every-month"
-        class="label-light"
-        type="radio"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :value="cronIntervalPresets.everyMonth"
+        class="label-light"
+        type="radio"
         @click="toggleCustomInput(false)"
       />
 
@@ -147,13 +147,13 @@
     <div class="cron-interval-input-wrapper">
       <input
         id="schedule_cron"
-        class="form-control inline cron-interval-input"
-        type="text"
         :placeholder="__('Define a custom pattern with cron syntax')"
-        required="true"
         v-model="cronInterval"
         :name="inputNameAttribute"
         :disabled="!isEditable"
+        class="form-control inline cron-interval-input"
+        type="text"
+        required="true"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
index 9b13b2a524f..06101290f6c 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue
@@ -72,25 +72,25 @@
 
 <template>
   <div
-    class="project-feature-controls"
     :data-for="name"
+    class="project-feature-controls"
   >
     <input
       v-if="name"
-      type="hidden"
       :name="name"
       :value="value"
+      type="hidden"
     />
     <project-feature-toggle
       :value="featureEnabled"
-      @change="toggleFeature"
       :disabled-input="disabledInput"
+      @change="toggleFeature"
     />
     <div class="select-wrapper">
       <select
+        :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"
         @change="selectOption"
-        :disabled="displaySelectInput"
       >
         <option
           v-for="[optionValue, optionName] in displayOptions"
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 06b0ab184ed..ae88b765abf 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -175,16 +175,16 @@
   <div>
     <div class="project-visibility-setting">
       <project-setting-row
-        label="Project visibility"
         :help-path="visibilityHelpPath"
+        label="Project visibility"
       >
         <div class="project-feature-controls">
           <div class="select-wrapper">
             <select
-              name="project[visibility_level]"
               v-model="visibilityLevel"
-              class="form-control select-control"
               :disabled="!canChangeVisibilityLevel"
+              name="project[visibility_level]"
+              class="form-control select-control"
             >
               <option
                 :value="visibilityOptions.PRIVATE"
@@ -219,30 +219,30 @@
           class="request-access"
         >
           <input
+            :value="requestAccessEnabled"
             type="hidden"
             name="project[request_access_enabled]"
-            :value="requestAccessEnabled"
           />
           <input
-            type="checkbox"
             v-model="requestAccessEnabled"
+            type="checkbox"
           />
           Allow users to request access
         </label>
       </project-setting-row>
     </div>
     <div
-      class="project-feature-settings"
       :class="{ 'highlight-changes': highlightChangesClass }"
+      class="project-feature-settings"
     >
       <project-setting-row
         label="Issues"
         help-text="Lightweight issue tracking system for this project"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][issues_access_level]"
           :options="featureAccessLevelOptions"
           v-model="issuesAccessLevel"
+          name="project[project_feature_attributes][issues_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -250,9 +250,9 @@
         help-text="View and edit files in this project"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][repository_access_level]"
           :options="featureAccessLevelOptions"
           v-model="repositoryAccessLevel"
+          name="project[project_feature_attributes][repository_access_level]"
         />
       </project-setting-row>
       <div class="project-feature-setting-group">
@@ -261,10 +261,10 @@
           help-text="Submit changes to be merged upstream"
         >
           <project-feature-setting
-            name="project[project_feature_attributes][merge_requests_access_level]"
             :options="repoFeatureAccessLevelOptions"
             v-model="mergeRequestsAccessLevel"
             :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][merge_requests_access_level]"
           />
         </project-setting-row>
         <project-setting-row
@@ -272,34 +272,34 @@
           help-text="Build, test, and deploy your changes"
         >
           <project-feature-setting
-            name="project[project_feature_attributes][builds_access_level]"
             :options="repoFeatureAccessLevelOptions"
             v-model="buildsAccessLevel"
             :disabled-input="!repositoryEnabled"
+            name="project[project_feature_attributes][builds_access_level]"
           />
         </project-setting-row>
         <project-setting-row
           v-if="registryAvailable"
-          label="Container registry"
           :help-path="registryHelpPath"
+          label="Container registry"
           help-text="Every project can have its own space to store its Docker images"
         >
           <project-feature-toggle
-            name="project[container_registry_enabled]"
             v-model="containerRegistryEnabled"
             :disabled-input="!repositoryEnabled"
+            name="project[container_registry_enabled]"
           />
         </project-setting-row>
         <project-setting-row
           v-if="lfsAvailable"
-          label="Git Large File Storage"
           :help-path="lfsHelpPath"
+          label="Git Large File Storage"
           help-text="Manages large files such as audio, video, and graphics files"
         >
           <project-feature-toggle
-            name="project[lfs_enabled]"
             v-model="lfsEnabled"
             :disabled-input="!repositoryEnabled"
+            name="project[lfs_enabled]"
           />
         </project-setting-row>
       </div>
@@ -308,9 +308,9 @@
         help-text="Pages for project documentation"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][wiki_access_level]"
           :options="featureAccessLevelOptions"
           v-model="wikiAccessLevel"
+          name="project[project_feature_attributes][wiki_access_level]"
         />
       </project-setting-row>
       <project-setting-row
@@ -318,9 +318,9 @@
         help-text="Share code pastes with others out of Git repository"
       >
         <project-feature-setting
-          name="project[project_feature_attributes][snippets_access_level]"
           :options="featureAccessLevelOptions"
           v-model="snippetsAccessLevel"
+          name="project[project_feature_attributes][snippets_access_level]"
         />
       </project-setting-row>
     </div>
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
index 5765eed4d45..0289209ff1e 100644
--- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -50,8 +50,8 @@ export default {
   <gl-modal
     id="delete-wiki-modal"
     :header-title-text="title"
-    footer-primary-button-variant="danger"
     :footer-primary-button-text="s__('WikiPageConfirmDelete|Delete page')"
+    footer-primary-button-variant="danger"
     @submit="onSubmit"
   >
     {{ message }}
@@ -68,9 +68,9 @@ export default {
         value="delete"
       />
       <input
+        :value="csrfToken"
         type="hidden"
         name="authenticity_token"
-        :value="csrfToken"
       />
     </form>
   </gl-modal>
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 00f32d9de78..2f480ecdc69 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -56,8 +56,8 @@
 
 <template>
   <div
-    class="pdf-viewer"
-    v-if="hasPDF">
+    v-if="hasPDF"
+    class="pdf-viewer">
     <page
       v-for="(page, index) in pages"
       :key="index"
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
index fcba819beba..9f06833d560 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -43,9 +43,9 @@
 
 <template>
   <canvas
-    class="pdf-page"
     ref="canvas"
     :data-page="number"
+    class="pdf-page"
   >
   </canvas>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 96189e7033a..d765ff3b41c 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -39,9 +39,9 @@ export default {
 </script>
 <template>
   <div
+    v-if="currentRequest.details"
     :id="`peek-view-${metric}`"
     class="view"
-    v-if="currentRequest.details"
   >
     <button
       :data-target="`#modal-peek-${metric}-details`"
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 82b4ce083fb..db0505a55fe 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -83,15 +83,15 @@ export default {
 </script>
 <template>
   <button
-    type="button"
-    @click="onClickAction"
     v-tooltip
     :title="tooltipText"
+    :class="cssClass"
+    :disabled="isDisabled"
+    type="button"
     class="js-ci-action btn btn-blank
 btn-transparent ci-action-icon-container ci-action-icon-wrapper"
-    :class="cssClass"
     data-container="body"
-    :disabled="isDisabled"
+    @click="onClickAction"
   >
     <icon :name="actionIcon"/>
   </button>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index e64afc94ef9..04120d45834 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -82,12 +82,12 @@ export default {
   <div class="ci-job-dropdown-container dropdown dropright">
     <button
       v-tooltip
+      :title="tooltipText"
       type="button"
       data-toggle="dropdown"
       data-container="body"
       data-boundary="viewport"
       class="dropdown-menu-toggle build-content"
-      :title="tooltipText"
     >
 
       <job-name-component
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index dc16d395bcb..886e62ab1a7 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -107,11 +107,11 @@ export default {
     </a>
 
     <div
-      v-else
       v-tooltip
-      class="js-job-component-tooltip non-details-job-component"
+      v-else
       :title="tooltipText"
       :class="cssClassJobName"
+      class="js-job-component-tooltip non-details-job-component"
       data-html="true"
       data-container="body"
     >
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index f32368947e8..2c728582b7c 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -52,8 +52,8 @@ export default {
 </script>
 <template>
   <li
-    class="stage-column"
-    :class="stageConnectorClass">
+    :class="stageConnectorClass"
+    class="stage-column">
     <div class="stage-name">
       {{ title }}
     </div>
@@ -62,9 +62,9 @@ export default {
         <li
           v-for="(job, index) in jobs"
           :key="job.id"
-          class="build"
           :class="buildConnnectorClass(index)"
           :id="jobId(job)"
+          class="build"
         >
 
           <div class="curve"></div>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index e08c2092680..5b212ee8931 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -82,11 +82,11 @@
     <ci-header
       v-if="shouldRenderContent"
       :status="status"
-      item-name="Pipeline"
       :item-id="pipeline.id"
       :time="pipeline.created_at"
       :user="pipeline.user"
       :actions="actions"
+      item-name="Pipeline"
       @actionClicked="postAction"
     />
     <loading-icon
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index eba5678e3e5..1fce9f16ee0 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -50,10 +50,10 @@
 
     <loading-button
       v-if="resetCachePath"
-      @click="onClickResetCache"
       :loading="isResetCacheButtonLoading"
-      class="btn btn-default js-clear-cache"
       :label="s__('Pipelines|Clear Runner Caches')"
+      class="btn btn-default js-clear-cache"
+      @click="onClickResetCache"
     />
 
     <a
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 4d965733f95..a107e579457 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -55,10 +55,10 @@
     <span>by</span>
     <user-avatar-link
       v-if="user"
-      class="js-pipeline-url-user"
       :link-href="pipeline.user.path"
       :img-src="pipeline.user.avatar_url"
       :tooltip-text="pipeline.user.name"
+      class="js-pipeline-url-user"
     />
     <span
       v-if="!user"
@@ -67,31 +67,31 @@
     </span>
     <div class="label-container">
       <span
-        v-if="pipeline.flags.latest"
         v-tooltip
+        v-if="pipeline.flags.latest"
         class="js-pipeline-url-latest badge badge-success"
         title="Latest pipeline for this branch">
         latest
       </span>
       <span
-        v-if="pipeline.flags.yaml_errors"
         v-tooltip
-        class="js-pipeline-url-yaml badge badge-danger"
-        :title="pipeline.yaml_errors">
+        v-if="pipeline.flags.yaml_errors"
+        :title="pipeline.yaml_errors"
+        class="js-pipeline-url-yaml badge badge-danger">
         yaml invalid
       </span>
       <span
-        v-if="pipeline.flags.failure_reason"
         v-tooltip
-        class="js-pipeline-url-failure badge badge-danger"
-        :title="pipeline.failure_reason">
+        v-if="pipeline.flags.failure_reason"
+        :title="pipeline.failure_reason"
+        class="js-pipeline-url-failure badge badge-danger">
         error
       </span>
       <a
+        v-popover="popoverOptions"
         v-if="pipeline.flags.auto_devops"
         tabindex="0"
         class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
-        v-popover="popoverOptions"
         role="button">
         Auto DevOps
       </a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 497a09cec65..b31b4bad7a0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -282,8 +282,8 @@
 <template>
   <div class="pipelines-container">
     <div
-      class="top-area scrolling-tabs-container inner-page-scroll-tabs"
       v-if="shouldRenderTabs || shouldRenderButtons"
+      class="top-area scrolling-tabs-container inner-page-scroll-tabs"
     >
       <div class="fade-left">
         <i
@@ -303,8 +303,8 @@
       <navigation-tabs
         v-if="shouldRenderTabs"
         :tabs="tabs"
-        @onChangeTab="onChangeTab"
         scope="pipelines"
+        @onChangeTab="onChangeTab"
       />
 
       <navigation-controls
@@ -312,8 +312,8 @@
         :new-pipeline-path="newPipelinePath"
         :reset-cache-path="resetCachePath"
         :ci-lint-path="ciLintPath"
-        @resetRunnersCache="handleResetRunnersCache"
         :is-reset-cache-button-loading="isResetCacheButtonLoading"
+        @resetRunnersCache="handleResetRunnersCache"
       />
     </div>
 
@@ -347,8 +347,8 @@
       />
 
       <div
-        class="table-holder"
         v-else-if="stateToRender === $options.stateMap.tableList"
+        class="table-holder"
       >
 
         <pipelines-table-component
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index e9bc3cf14ca..5070c253f11 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -44,13 +44,13 @@
   <div class="btn-group">
     <button
       v-tooltip
+      :disabled="isLoading"
       type="button"
       class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
       title="Manual job"
       data-toggle="dropdown"
       data-placement="top"
       aria-label="Manual job"
-      :disabled="isLoading"
     >
       <icon
         name="play"
@@ -69,11 +69,11 @@
         :key="i"
       >
         <button
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)"
           type="button"
           class="js-pipeline-action-link no-btn btn"
           @click="onClickAction(action.path)"
-          :class="{ disabled: isActionDisabled(action) }"
-          :disabled="isActionDisabled(action)"
         >
           {{ action.name }}
         </button>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 31fcc9dd412..490df47e154 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -42,9 +42,9 @@
         v-for="(artifact, i) in artifacts"
         :key="i">
         <a
+          :href="artifact.path"
           rel="nofollow"
           download
-          :href="artifact.path"
         >
           Download {{ artifact.name }} artifacts
         </a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 4318abe97e0..2e777783636 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -114,8 +114,8 @@
     <modal
       id="confirmation-modal"
       :header-title-text="modalTitle"
-      footer-primary-button-variant="danger"
       :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
+      footer-primary-button-variant="danger"
       @submit="onSubmit"
     >
       <span v-html="modalText"></span>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index a3c17479e6f..b2744a30c2a 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -301,9 +301,9 @@
       <div class="table-mobile-content">
         <template v-if="pipeline.details.stages.length > 0">
           <div
-            class="stage-container dropdown js-mini-pipeline-graph"
             v-for="(stage, index) in pipeline.details.stages"
-            :key="index">
+            :key="index"
+            class="stage-container dropdown js-mini-pipeline-graph">
             <pipeline-stage
               :type="$options.pipelinesTable"
               :stage="stage"
@@ -331,28 +331,28 @@
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
-          class="d-none d-sm-none d-md-block"
           :artifacts="pipeline.details.artifacts"
+          class="d-none d-sm-none d-md-block"
         />
 
         <loading-button
           v-if="pipeline.flags.retryable"
-          @click="handleRetryClick"
-          container-class="js-pipelines-retry-button btn btn-default btn-retry"
           :loading="isRetrying"
           :disabled="isRetrying"
+          container-class="js-pipelines-retry-button btn btn-default btn-retry"
+          @click="handleRetryClick"
         >
           <icon name="repeat" />
         </loading-button>
 
         <loading-button
           v-if="pipeline.flags.cancelable"
-          @click="handleCancelClick"
+          :loading="isCancelling"
+          :disabled="isCancelling"
           data-toggle="modal"
           data-target="#confirmation-modal"
           container-class="js-pipelines-cancel-button btn btn-remove"
-          :loading="isCancelling"
-          :disabled="isCancelling"
+          @click="handleCancelClick"
         >
           <icon name="close" />
         </loading-button>
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index f9769815796..4dd2fb9fbed 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -158,22 +158,22 @@ export default {
   <div class="dropdown">
     <button
       v-tooltip
+      id="stageDropdown"
+      ref="dropdown"
       :class="triggerButtonClass"
-      @click="onClickStage"
-      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       :title="stage.title"
+      class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
       data-placement="top"
       data-toggle="dropdown"
       type="button"
-      id="stageDropdown"
       aria-haspopup="true"
       aria-expanded="false"
-      ref="dropdown"
+      @click="onClickStage"
     >
 
       <span
-        aria-hidden="true"
         :aria-label="stage.title"
+        aria-hidden="true"
       >
         <icon :name="borderlessIcon" />
       </span>
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index 79dbdca4010..0a97df2dc18 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -66,8 +66,8 @@
     </div>
     <div class="table-mobile-content">
       <p
-        class="duration"
         v-if="hasDuration"
+        class="duration"
       >
         <span v-html="iconTimerSvg">
         </span>
@@ -75,8 +75,8 @@
       </p>
 
       <p
-        class="finished-at d-none d-sm-none d-md-block"
         v-if="hasFinishedTime"
+        class="finished-at d-none d-sm-none d-md-block"
       >
 
         <i
@@ -87,9 +87,9 @@
 
         <time
           v-tooltip
+          :title="tooltipTitle(finishedTime)"
           data-placement="top"
-          data-container="body"
-          :title="tooltipTitle(finishedTime)">
+          data-container="body">
           {{ timeFormated(finishedTime) }}
         </time>
       </p>
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index f50002afbf2..974629fa2af 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -80,10 +80,10 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
     id="delete-account-modal"
     :title="s__('Profiles|Delete your account?')"
     :text="text"
-    kind="danger"
     :primary-button-label="s__('Profiles|Delete account')"
-    @submit="onSubmit"
-    :submit-disabled="!canSubmit()">
+    :submit-disabled="!canSubmit()"
+    kind="danger"
+    @submit="onSubmit">
 
     <template
       slot="body"
@@ -101,9 +101,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
           value="delete"
         />
         <input
+          :value="csrfToken"
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken"
         />
 
         <p
@@ -114,18 +114,18 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 
         <input
           v-if="confirmWithPassword"
+          v-model="enteredPassword"
           name="password"
           class="form-control"
           type="password"
-          v-model="enteredPassword"
           aria-labelledby="input-label"
         />
         <input
           v-else
+          v-model="enteredUsername"
           name="username"
           class="form-control"
           type="text"
-          v-model="enteredUsername"
           aria-labelledby="input-label"
         />
       </form>
diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index b37febe523c..ef484ddfd61 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -93,10 +93,10 @@ Please update your Git repository remotes as soon as possible.`),
         </div>
         <input
           :id="$options.inputId"
-          class="form-control"
-          required="required"
           v-model="newUsername"
           :disabled="isRequestPending"
+          class="form-control"
+          required="required"
         />
       </div>
       <p class="form-text text-muted">
@@ -105,18 +105,18 @@ Please update your Git repository remotes as soon as possible.`),
     </div>
     <button
       :data-target="`#${$options.modalId}`"
+      :disabled="isRequestPending || newUsername === username"
       class="btn btn-warning"
       type="button"
       data-toggle="modal"
-      :disabled="isRequestPending || newUsername === username"
     >
       {{ $options.buttonText }}
     </button>
     <gl-modal
       :id="$options.modalId"
       :header-title-text="s__('Profiles|Change username') + '?'"
-      footer-primary-button-variant="warning"
       :footer-primary-button-text="$options.buttonText"
+      footer-primary-button-variant="warning"
       @submit="onConfirm"
     >
       <span v-html="modalText"></span>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index 6ed35c0a981..d4497924ad8 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -131,12 +131,12 @@ export default {
       </div>
     </div>
     <span
-      class="form-text"
+      v-if="hasErrors"
       :class="{
         'text-danger': hasErrors,
         'text-muted': !hasErrors
       }"
-      v-if="hasErrors"
+      class="form-text"
     >
       {{ errorMessage }}
     </span>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index 542d4d21a22..08d0a122579 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -192,11 +192,11 @@ export default {
       </div>
     </div>
     <span
-      class="form-text"
       :class="{
         'text-danger': hasErrors,
         'text-muted': !hasErrors
       }"
+      class="form-text"
       v-html="helpText"
     ></span>
   </div>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index bc28f8b5df4..b5476684c6a 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -105,12 +105,12 @@ export default {
       </div>
     </div>
     <span
-      class="form-text"
+      v-if="hasErrors"
       :class="{
         'text-danger': hasErrors,
         'text-muted': !hasErrors
       }"
-      v-if="hasErrors"
+      class="form-text"
     >
       {{ errorMessage }}
     </span>
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 63f20a0041d..c772fca14bb 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -100,9 +100,9 @@
 <template>
   <div>
     <loading-icon
+      v-if="isLoading"
       label="Loading pipeline status"
       size="3"
-      v-if="isLoading"
     />
     <a
       v-else
@@ -112,8 +112,8 @@
         v-tooltip
         :title="statusTitle"
         :aria-label="statusTitle"
-        data-container="body"
         :status="ciStatus"
+        data-container="body"
       />
     </a>
   </div>
diff --git a/app/assets/javascripts/projects_dropdown/components/app.vue b/app/assets/javascripts/projects_dropdown/components/app.vue
index 0bbd8a41753..73d49488299 100644
--- a/app/assets/javascripts/projects_dropdown/components/app.vue
+++ b/app/assets/javascripts/projects_dropdown/components/app.vue
@@ -132,14 +132,14 @@ export default {
   <div>
     <search/>
     <loading-icon
-      class="loading-animation prepend-top-20"
-      size="2"
       v-if="isLoadingProjects"
       :label="s__('ProjectsDropdown|Loading projects')"
+      class="loading-animation prepend-top-20"
+      size="2"
     />
     <div
-      class="section-header"
       v-if="isFrequentsListVisible"
+      class="section-header"
     >
       {{ s__('ProjectsDropdown|Frequently visited') }}
     </div>
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
index 246dbeaaded..625e0aa548c 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue
@@ -37,14 +37,14 @@
       class="list-unstyled"
     >
       <li
-        class="section-empty"
         v-if="isListEmpty"
+        class="section-empty"
       >
         {{ listEmptyMessage }}
       </li>
       <projects-list-item
-        v-else
         v-for="(project, index) in projects"
+        v-else
         :key="index"
         :project-id="project.id"
         :project-name="project.name"
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
index 759cdd1ded9..eafbf6c99e2 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue
@@ -79,36 +79,36 @@
     class="projects-list-item-container"
   >
     <a
-      class="clearfix"
       :href="webUrl"
+      class="clearfix"
     >
       <div
         class="project-item-avatar-container"
       >
         <img
           v-if="hasAvatar"
-          class="avatar s32"
           :src="avatarUrl"
+          class="avatar s32"
         />
         <identicon
           v-else
-          size-class="s32"
           :entity-id="projectId"
           :entity-name="projectName"
+          size-class="s32"
         />
       </div>
       <div
         class="project-item-metadata-container"
       >
         <div
-          class="project-title"
           :title="projectName"
+          class="project-title"
           v-html="highlightedProjectName"
         >
         </div>
         <div
-          class="project-namespace"
           :title="namespace"
+          class="project-namespace"
         >{{ truncatedNamespace }}</div>
       </div>
     </a>
diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
index 8d0c29177e6..76e9cb9e53f 100644
--- a/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/projects_list_search.vue
@@ -48,8 +48,8 @@ export default {
         {{ listEmptyMessage }}
       </li>
       <projects-list-item
-        v-else
         v-for="(project, index) in projects"
+        v-else
         :key="index"
         :project-id="project.id"
         :project-name="project.name"
diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue
index 7fcd62dcdb8..28f2a18f2a6 100644
--- a/app/assets/javascripts/projects_dropdown/components/search.vue
+++ b/app/assets/javascripts/projects_dropdown/components/search.vue
@@ -49,11 +49,11 @@
     class="search-input-container d-none d-sm-block"
   >
     <input
-      type="search"
-      class="form-control"
       ref="search"
       v-model="searchQuery"
       :placeholder="s__('ProjectsDropdown|Search your projects')"
+      type="search"
+      class="form-control"
     />
     <i
       v-if="!searchQuery"
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index ea0f7199a70..31f88675912 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -48,8 +48,8 @@
     />
 
     <collapsible-container
-      v-else-if="!isLoading && repos.length"
       v-for="(item, index) in repos"
+      v-else-if="!isLoading && repos.length"
       :key="index"
       :repo="item"
     />
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index 2fc3778820b..4116c4a0489 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -62,15 +62,15 @@
     <div class="container-image-head">
       <button
         type="button"
-        @click="toggleRepo"
         class="js-toggle-repo btn-link"
+        @click="toggleRepo"
       >
         <i
-          class="fa"
           :class="{
             'fa-chevron-right': !isOpen,
             'fa-chevron-up': isOpen,
           }"
+          class="fa"
           aria-hidden="true"
         >
         </i>
@@ -86,12 +86,12 @@
 
       <div class="controls d-none d-sm-block float-right">
         <button
+          v-tooltip
           v-if="repo.canDelete"
-          type="button"
-          class="js-remove-repo btn btn-danger"
           :title="s__('ContainerRegistry|Remove repository')"
           :aria-label="s__('ContainerRegistry|Remove repository')"
-          v-tooltip
+          type="button"
+          class="js-remove-repo btn btn-danger"
           @click="handleDeleteRepository"
         >
           <i
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index e4a4b3bb129..9f4973c3490 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -118,13 +118,13 @@
 
           <td class="content">
             <button
+              v-tooltip
               v-if="item.canDelete"
-              type="button"
-              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               :title="s__('ContainerRegistry|Remove tag')"
               :aria-label="s__('ContainerRegistry|Remove tag')"
+              type="button"
+              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
               data-container="body"
-              v-tooltip
               @click="handleDeleteRegistry(item)"
             >
               <i
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 5a374d84796..d22a1e1ac66 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -125,13 +125,13 @@ export default {
 <template>
   <div>
     <div
-      class="sidebar-collapsed-icon sidebar-collapsed-user"
-      :class="{ 'multiple-users': hasMoreThanOneAssignee }"
       v-tooltip
+      :class="{ 'multiple-users': hasMoreThanOneAssignee }"
+      :title="collapsedTooltipTitle"
+      class="sidebar-collapsed-icon sidebar-collapsed-user"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="collapsedTooltipTitle"
     >
       <i
         v-if="hasNoUsers"
@@ -140,17 +140,17 @@ export default {
       >
       </i>
       <button
-        type="button"
-        class="btn-link"
         v-for="(user, index) in users"
         v-if="shouldRenderCollapsedAssignee(index)"
         :key="user.id"
+        type="button"
+        class="btn-link"
       >
         <img
-          width="24"
-          class="avatar avatar-inline s24"
           :alt="assigneeAlt(user)"
           :src="avatarUrl(user)"
+          width="24"
+          class="avatar avatar-inline s24"
         />
         <span class="author">
           {{ user.name }}
@@ -186,14 +186,14 @@ export default {
       </template>
       <template v-else-if="hasOneUser">
         <a
-          class="author_link bold"
           :href="assigneeUrl(firstUser)"
+          class="author_link bold"
         >
           <img
-            width="32"
-            class="avatar avatar-inline s32"
             :alt="assigneeAlt(firstUser)"
             :src="avatarUrl(firstUser)"
+            width="32"
+            class="avatar avatar-inline s32"
           />
           <span class="author">
             {{ firstUser.name }}
@@ -206,23 +206,23 @@ export default {
       <template v-else>
         <div class="user-list">
           <div
-            class="user-item"
             v-for="(user, index) in users"
             v-if="renderAssignee(index)"
             :key="user.id"
+            class="user-item"
           >
             <a
+              :href="assigneeUrl(user)"
+              :data-title="user.name"
               class="user-link has-tooltip"
               data-container="body"
               data-placement="bottom"
-              :href="assigneeUrl(user)"
-              :data-title="user.name"
             >
               <img
-                width="32"
-                class="avatar avatar-inline s32"
                 :alt="assigneeAlt(user)"
                 :src="avatarUrl(user)"
+                width="32"
+                class="avatar avatar-inline s32"
               />
             </a>
           </div>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index b04a2eff798..123c92aff64 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -90,12 +90,12 @@ export default {
     />
     <assignees
       v-if="!store.isFetching.assignees"
-      class="value"
       :root-path="store.rootPath"
       :users="store.assignees"
       :editable="store.editable"
-      @assign-self="assignSelf"
       :issuable-type="issuableType"
+      class="value"
+      @assign-self="assignSelf"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 3f6e2f05396..1b866cca4b1 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -70,13 +70,13 @@ export default {
 <template>
   <div class="block issuable-sidebar-item confidentiality">
     <div
-      class="sidebar-collapsed-icon"
-      @click="toggleForm"
       v-tooltip
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="tooltipLabel"
+      @click="toggleForm"
     >
       <icon
         :name="confidentialityIcon"
@@ -104,8 +104,8 @@ export default {
         v-if="!isConfidential"
         class="no-value sidebar-item-value">
         <icon
-          name="eye"
           :size="16"
+          name="eye"
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
@@ -115,8 +115,8 @@ export default {
         v-else
         class="value sidebar-item-value hide-collapsed">
         <icon
-          name="eye-slash"
           :size="16"
+          name="eye-slash"
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index d392977e5e2..4906dad22e1 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -44,14 +44,14 @@ export default {
   <div class="dropdown show">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p
-        class="text"
         v-if="isLocked"
+        class="text"
         v-html="unlockWarning">
       </p>
 
       <p
-        class="text"
         v-else
+        class="text"
         v-html="lockWarning">
       </p>
 
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index fb69c741dcd..10bedf8af1f 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -94,13 +94,13 @@ export default {
 <template>
   <div class="block issuable-sidebar-item lock">
     <div
-      class="sidebar-collapsed-icon"
-      @click="toggleForm"
       v-tooltip
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="tooltipLabel"
+      @click="toggleForm"
     >
       <icon
         :name="lockIcon"
@@ -134,8 +134,8 @@ export default {
         class="value sidebar-item-value"
       >
         <icon
-          name="lock"
           :size="16"
+          name="lock"
           aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
@@ -147,8 +147,8 @@ export default {
         class="no-value sidebar-item-value hide-collapsed"
       >
         <icon
-          name="lock-open"
           :size="16"
+          name="lock-open"
           aria-hidden="true"
           class="sidebar-item-icon inline"
         />
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 0a945fc7fd5..33dd6c981b6 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -80,12 +80,12 @@
 <template>
   <div>
     <div
-      class="sidebar-collapsed-icon"
       v-tooltip
+      :title="participantLabel"
+      class="sidebar-collapsed-icon"
       data-container="body"
       data-placement="left"
       data-boundary="viewport"
-      :title="participantLabel"
       @click="onClickCollapsedIcon"
     >
       <i
@@ -119,15 +119,15 @@
         class="participants-author js-participants-author"
       >
         <a
-          class="author_link"
           :href="participant.web_url"
+          class="author_link"
         >
           <user-avatar-image
             :lazy="true"
             :img-src="participant.avatar_url"
-            css-classes="avatar-inline"
             :size="24"
             :tooltip-text="participant.name"
+            css-classes="avatar-inline"
             tooltip-placement="bottom"
           />
         </a>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 6745c1aafff..448c8fc3602 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -97,9 +97,9 @@
     </span>
     <toggle-button
       ref="toggleButton"
-      class="float-right hide-collapsed js-issuable-subscribe-button"
       :is-loading="showLoadingState"
       :value="subscribed"
+      class="float-right hide-collapsed js-issuable-subscribe-button"
       @change="toggleSubscription"
     />
   </div>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
index 209af1ce152..1d030c4f67f 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -110,12 +110,12 @@
 
 <template>
   <div
-    class="sidebar-collapsed-icon"
     v-tooltip
+    :title="tooltipText"
+    class="sidebar-collapsed-icon"
     data-container="body"
     data-placement="left"
     data-boundary="viewport"
-    :title="tooltipText"
   >
     <icon name="timer" />
     <div class="time-tracking-collapsed-summary">
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index 0e139cd7f5e..d335c3f55af 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -54,14 +54,17 @@ export default {
 <template>
   <div class="time-tracking-comparison-pane">
     <div
-      class="compare-meter"
-      :title="timeRemainingTooltip"
       v-tooltip
+      :title="timeRemainingTooltip"
       :class="timeRemainingStatusClass"
+      class="compare-meter"
+      data-toggle="tooltip"
+      data-placement="top"
+      role="timeRemainingDisplay"
     >
       <div
-        class="meter-container"
         :aria-valuenow="timeRemainingPercent"
+        class="meter-container"
       >
         <div
           :style="{ width: timeRemainingPercent }"
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 825063d9ba6..19ec0f05a26 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -45,8 +45,8 @@ export default {
       <p v-html="spendText">
       </p>
       <a
-        class="btn btn-default learn-more-button"
         :href="href"
+        class="btn btn-default learn-more-button"
       >
         {{ __('Learn more') }}
       </a>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 7d56d2fa5ee..ca3b9338c29 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -101,8 +101,8 @@ export default {
 
 <template>
   <div
-    class="time_tracker time-tracking-component-wrap"
     v-cloak
+    class="time_tracker time-tracking-component-wrap"
   >
     <time-tracking-collapsed-state
       :show-comparison-state="showComparisonState"
@@ -116,8 +116,8 @@ export default {
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
       <div
-        class="help-button float-right"
         v-if="!showHelpState"
+        class="help-button float-right"
         @click="toggleHelpState(true)"
       >
         <i
@@ -127,8 +127,8 @@ export default {
         </i>
       </div>
       <div
-        class="close-help-button float-right"
         v-if="showHelpState"
+        class="close-help-button float-right"
         @click="toggleHelpState(false)"
       >
         <i
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 1608858da22..c44419d24e6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -118,8 +118,8 @@ export default {
             </a>
           </template>
           <span
-            v-if="hasDeploymentTime"
             v-tooltip
+            v-if="hasDeploymentTime"
             :title="deployment.deployed_at_formatted"
             class="js-deploy-time"
           >
@@ -127,9 +127,9 @@ export default {
           </span>
           <loading-button
             v-if="deployment.stop_url"
+            :loading="isStopping"
             container-class="btn btn-default btn-sm prepend-left-default"
             label="Stop environment"
-            :loading="isStopping"
             @click="stopEnvironment"
           />
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
index 8338fde61c7..22c2f74f900 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
@@ -35,17 +35,17 @@
 <template>
   <a
     :href="authorUrl"
-    class="author-link inline"
     :v-tooltip="showAuthorTooltip"
     :title="author.name"
+    class="author-link inline"
   >
     <img
       :src="avatarUrl"
       class="avatar avatar-inline s16"
     />
     <span
-      class="author"
       v-if="showAuthorName"
+      class="author"
     >
       {{ author.name }}
     </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index a9868486e83..ba16cb9e2c8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -35,8 +35,8 @@
     {{ actionText }}
     <mr-widget-author :author="author" />
     <time
-      :title="dateTitle"
       v-tooltip
+      :title="dateTitle"
       data-container="body"
     >
       {{ dateReadable }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 51a0fda6555..3ce9d8dc26a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -59,11 +59,11 @@ export default {
       <strong>
         {{ s__("mrWidget|Request to merge") }}
         <span
-          class="label-branch js-source-branch"
           :class="{ 'label-truncated': isSourceBranchLong }"
           :title="isSourceBranchLong ? mr.sourceBranch : ''"
-          data-placement="bottom"
           :v-tooltip="isSourceBranchLong"
+          class="label-branch js-source-branch"
+          data-placement="bottom"
           v-html="mr.sourceBranchLink"
         >
         </span>
@@ -77,10 +77,10 @@ export default {
         {{ s__("mrWidget|into") }}
 
         <span
-          class="label-branch"
           :v-tooltip="isTargetBranchLong"
           :class="{ 'label-truncatedtooltip': isTargetBranchLong }"
           :title="isTargetBranchLong ? mr.targetBranch : ''"
+          class="label-branch"
           data-placement="bottom"
         >
           <a
@@ -108,9 +108,9 @@ export default {
         {{ s__("mrWidget|Web IDE") }}
       </a>
       <button
+        :disabled="mr.sourceBranchRemoved"
         data-target="#modal_merge_info"
         data-toggle="modal"
-        :disabled="mr.sourceBranchRemoved"
         class="btn btn-sm btn-default inline js-check-out-branch"
         type="button"
       >
@@ -134,8 +134,8 @@ export default {
         <ul class="dropdown-menu dropdown-menu-right">
           <li>
             <a
-              class="js-download-email-patches"
               :href="mr.emailPatchesPath"
+              class="js-download-email-patches"
               download
             >
               {{ s__("mrWidget|Email patches") }}
@@ -143,8 +143,8 @@ export default {
           </li>
           <li>
             <a
-              class="js-download-plain-diff"
               :href="mr.plainDiffPath"
+              class="js-download-plain-diff"
               download
             >
               {{ s__("mrWidget|Plain diff") }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 48dff8c4916..2f0b5e12c12 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -67,8 +67,8 @@ export default {
       </template>
       <template v-else-if="hasPipeline">
         <a
-          class="append-right-10"
           :href="status.details_path"
+          class="append-right-10"
         >
           <ci-icon :status="status" />
         </a>
@@ -96,8 +96,8 @@ export default {
 
           <span class="mr-widget-pipeline-graph">
             <span
-              class="stage-cell"
               v-if="hasStages"
+              class="stage-cell"
             >
               <div
                 v-for="(stage, i) in pipeline.details.stages"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index 460437ceeff..56879c04d16 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -25,9 +25,9 @@
     </span>
     <i
       v-tooltip
-      class="fa fa-question-circle"
       :title="tooltipTitle"
       :aria-label="tooltipTitle"
+      class="fa fa-question-circle"
     >
     </i>
   </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index b404a592234..2133124347c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -39,10 +39,10 @@
         {{ s__("mrWidget|This merge request failed to be merged automatically") }}
       </span>
       <button
-        @click="refreshWidget"
         :disabled="isRefreshing"
         type="button"
         class="btn btn-sm btn-default"
+        @click="refreshWidget"
       >
         <loading-icon
           v-if="isRefreshing"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index caeaac75b45..ae6630dcd6f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -11,8 +11,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="loading"
       :show-disabled-button="true"
+      status="loading"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index 5c1500ab801..dff9ec657b9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -20,8 +20,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
 
     <div class="media-body space-children">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index df866ed5706..c302960f16e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -80,14 +80,14 @@ export default {
     </template>
     <template v-else>
       <status-icon
-        status="warning"
         :show-disabled-button="true"
+        status="warning"
       />
       <div class="media-body space-children">
         <span class="bold">
           <span
+            v-if="mr.mergeError"
             class="has-error-message"
-            v-if="mergeError"
           >
             {{ mergeError }}.
           </span>
@@ -101,9 +101,9 @@ export default {
           </span>
         </span>
         <button
-          @click="refresh"
           class="btn btn-default btn-sm js-refresh-button"
           type="button"
+          @click="refresh"
         >
           {{ s__("mrWidget|Refresh now") }}
         </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
index e8352c362d6..0d9a560c88e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
@@ -90,11 +90,11 @@
         </span>
         <a
           v-if="mr.canCancelAutomaticMerge"
-          @click.prevent="cancelAutomaticMerge"
           :disabled="isCancellingAutoMerge"
           role="button"
           href="#"
-          class="btn btn-sm btn-default js-cancel-auto-merge">
+          class="btn btn-sm btn-default js-cancel-auto-merge"
+          @click.prevent="cancelAutomaticMerge">
           <i
             v-if="isCancellingAutoMerge"
             class="fa fa-spinner fa-spin"
@@ -127,10 +127,10 @@
           <a
             v-if="canRemoveSourceBranch"
             :disabled="isRemovingSourceBranch"
-            @click.prevent="removeSourceBranch"
             role="button"
             class="btn btn-sm btn-default js-remove-source-branch"
             href="#"
+            @click.prevent="removeSourceBranch"
           >
             <i
               v-if="isRemovingSourceBranch"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index bc95706f47d..985f44dee97 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -116,44 +116,44 @@
           :date-readable="mr.metrics.readableMergedAt"
         />
         <a
-          v-if="mr.canRevertInCurrentMR"
           v-tooltip
+          v-if="mr.canRevertInCurrentMR"
+          :title="revertTitle"
           class="btn btn-close btn-sm"
           href="#modal-revert-commit"
           data-toggle="modal"
           data-container="body"
-          :title="revertTitle"
         >
           {{ revertLabel }}
         </a>
         <a
-          v-else-if="mr.revertInForkPath"
           v-tooltip
-          class="btn btn-close btn-sm"
-          data-method="post"
+          v-else-if="mr.revertInForkPath"
           :href="mr.revertInForkPath"
           :title="revertTitle"
+          class="btn btn-close btn-sm"
+          data-method="post"
         >
           {{ revertLabel }}
         </a>
         <a
-          v-if="mr.canCherryPickInCurrentMR"
           v-tooltip
+          v-if="mr.canCherryPickInCurrentMR"
+          :title="cherryPickTitle"
           class="btn btn-default btn-sm"
           href="#modal-cherry-pick-commit"
           data-toggle="modal"
           data-container="body"
-          :title="cherryPickTitle"
         >
           {{ cherryPickLabel }}
         </a>
         <a
-          v-else-if="mr.cherryPickInForkPath"
           v-tooltip
-          class="btn btn-default btn-sm"
-          data-method="post"
+          v-else-if="mr.cherryPickInForkPath"
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
+          class="btn btn-default btn-sm"
+          data-method="post"
         >
           {{ cherryPickLabel }}
         </a>
@@ -186,10 +186,10 @@
         >
           <span>{{ s__("mrWidget|You can remove source branch now") }}</span>
           <button
-            @click="removeSourceBranch"
             :disabled="isMakingRequest"
             type="button"
             class="btn btn-sm btn-default js-remove-branch-button"
+            @click="removeSourceBranch"
           >
             {{ s__("mrWidget|Remove Source Branch") }}
           </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index 718c0e4b3c6..b0e96f74626 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -39,8 +39,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
 
     <div class="media-body space-children">
@@ -51,9 +51,9 @@
         {{ missingBranchNameMessage }}
         <i
           v-tooltip
-          class="fa fa-question-circle"
           :title="message"
           :aria-label="message"
+          class="fa fa-question-circle"
         >
         </i>
       </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index e4af50b09f8..92eee2cf5dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -12,8 +12,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="success"
       :show-disabled-button="true"
+      status="success"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 6d7cc03f7ad..37ee5215cea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -11,8 +11,8 @@
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 143fd328d88..2d8c3d6be87 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -110,9 +110,9 @@
 js-toggle-container accept-action media space-children"
         >
           <button
+            :disabled="isMakingRequest"
             type="button"
             class="btn btn-sm btn-reopen btn-success qa-mr-rebase-button"
-            :disabled="isMakingRequest"
             @click="rebase"
           >
             <loading-icon v-if="isMakingRequest" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
index 875c3323dbb..25c1044fe2b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_squash_before_merge.vue
@@ -37,23 +37,23 @@ export default {
   <div class="accept-control inline">
     <label class="merge-param-checkbox">
       <input
+        :disabled="isMergeButtonDisabled"
+        v-model="squashBeforeMerge"
         type="checkbox"
         name="squash"
         class="qa-squash-checkbox"
-        :disabled="isMergeButtonDisabled"
-        v-model="squashBeforeMerge"
         @change="updateSquashModel"
       />
       {{ __('Squash commits') }}
     </label>
     <a
+      v-tooltip
       :href="mr.squashBeforeMergeHelpPath"
       data-title="About this feature"
       data-placement="bottom"
       target="_blank"
       rel="noopener noreferrer nofollow"
       data-container="body"
-      v-tooltip
     >
       <icon
         name="question-o"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
index 8d55477929f..2bb1a34412e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/pipeline_failed.vue
@@ -12,8 +12,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 3a194320bd8..fe777a07189 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -235,11 +235,11 @@ export default {
       <div class="mr-widget-body-controls media space-children">
         <span class="btn-group append-bottom-5">
           <button
-            @click="handleMergeButtonClick()"
             :disabled="isMergeButtonDisabled"
             :class="mergeButtonClass"
             type="button"
-            class="qa-merge-button">
+            class="qa-merge-button"
+            @click="handleMergeButtonClick()">
             <i
               v-if="isMakingRequest"
               class="fa fa-spinner fa-spin"
@@ -265,28 +265,28 @@ export default {
             role="menu">
             <li>
               <a
-                @click.prevent="handleMergeButtonClick(true)"
                 class="merge_when_pipeline_succeeds"
-                href="#">
+                href="#"
+                @click.prevent="handleMergeButtonClick(true)">
                 <span class="media">
                   <span
-                    v-html="successSvg"
                     class="merge-opt-icon"
-                    aria-hidden="true"></span>
+                    aria-hidden="true"
+                    v-html="successSvg"></span>
                   <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
                 </span>
               </a>
             </li>
             <li>
               <a
-                @click.prevent="handleMergeButtonClick(false, true)"
                 class="accept-merge-request"
-                href="#">
+                href="#"
+                @click.prevent="handleMergeButtonClick(false, true)">
                 <span class="media">
                   <span
-                    v-html="warningSvg"
                     class="merge-opt-icon"
-                    aria-hidden="true"></span>
+                    aria-hidden="true"
+                    v-html="warningSvg"></span>
                   <span class="media-body merge-opt-title">Merge immediately</span>
                 </span>
               </a>
@@ -299,8 +299,8 @@ export default {
               <input
                 id="remove-source-branch-input"
                 v-model="removeSourceBranch"
-                class="js-remove-source-branch-checkbox"
                 :disabled="isRemoveSourceBranchButtonDisabled"
+                class="js-remove-source-branch-checkbox"
                 type="checkbox"/> Remove source branch
             </label>
 
@@ -317,10 +317,10 @@ export default {
             </span>
             <button
               v-else
-              @click="toggleCommitMessageEditor"
               :disabled="isMergeButtonDisabled"
               class="js-modify-commit-message-button btn btn-default btn-sm"
-              type="button">
+              type="button"
+              @click="toggleCommitMessageEditor">
               Modify commit message
             </button>
           </template>
@@ -356,8 +356,8 @@ export default {
             </p>
             <div class="hint">
               <a
-                @click.prevent="updateCommitMessage"
                 href="#"
+                @click.prevent="updateCommitMessage"
               >
                 {{ commitMessageLinkTitle }}
               </a>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index 7cc07401911..16c903c923f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -12,8 +12,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
index 8ea3f22ecc2..5eb2058a03b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue
@@ -18,8 +18,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="true"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index fe2608e8212..7078e19d8bf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -43,8 +43,8 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon
-      status="warning"
       :show-disabled-button="Boolean(mr.removeWIPPath)"
+      status="warning"
     />
     <div class="media-body space-children">
       <span class="bold">
@@ -60,10 +60,10 @@ export default {
       </span>
       <button
         v-if="mr.removeWIPPath"
-        @click="removeWIP"
         :disabled="isMakingRequest"
         type="button"
-        class="btn btn-default btn-xs js-remove-wip">
+        class="btn btn-default btn-xs js-remove-wip"
+        @click="removeWIP">
         <i
           v-if="isMakingRequest"
           class="fa fa-spinner fa-spin"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 098e8178265..bc4ba3d050b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -283,8 +283,8 @@ export default {
       />
     </div>
     <div
-      class="mr-widget-footer"
       v-if="shouldRenderMergeHelp"
+      class="mr-widget-footer"
     >
       <mr-widget-merge-help />
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 0d64efcbf68..a2518e2a611 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -50,9 +50,9 @@ export default {
 </script>
 <template>
   <a
+    v-tooltip
     :href="status.details_path"
     :class="cssClass"
-    v-tooltip
     :title="!showText ? status.text : ''"
   >
     <ci-icon :status="status" />
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index cb2cc3901ad..dc5760bce28 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -49,14 +49,14 @@ export default {
 
 <template>
   <button
-    type="button"
-    class="btn"
+    v-tooltip
     :class="cssClass"
     :title="title"
     :data-clipboard-text="text"
-    v-tooltip
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
+    type="button"
+    class="btn"
   >
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 8f250a6c989..13bca99dcb3 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -124,11 +124,11 @@ export default {
       </div>
 
       <a
-        class="ref-name"
-        :href="commitRef.ref_url"
         v-tooltip
-        data-container="body"
+        :href="commitRef.ref_url"
         :title="commitRef.name"
+        class="ref-name"
+        data-container="body"
       >
         {{ commitRef.name }}
       </a>
@@ -139,8 +139,8 @@ export default {
     />
 
     <a
-      class="commit-sha"
       :href="commitUrl"
+      class="commit-sha"
     >
       {{ shortSha }}
     </a>
@@ -152,15 +152,15 @@ export default {
       >
         <user-avatar-link
           v-if="hasAuthor"
-          class="avatar-image-container"
           :link-href="author.path"
           :img-src="author.avatar_url"
           :img-alt="userImageAltDescription"
           :tooltip-text="author.username"
+          class="avatar-image-container"
         />
         <a
-          class="commit-row-message"
           :href="commitUrl"
+          class="commit-row-message"
         >
           {{ title }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index c274d3ab590..f1ef50d0e3d 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -44,9 +44,9 @@ export default {
         download
         target="_blank">
         <icon
+          :size="16"
           name="download"
           css-classes="float-left append-right-8"
-          :size="16"
         />
         {{ __('Download') }}
       </a>
diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
index 424af5a0293..9c1e5c68649 100644
--- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
@@ -86,8 +86,8 @@
   <div class="modal-open">
     <div
       :id="id"
-      class="modal"
       :class="id ? '' : 'd-block'"
+      class="modal"
       role="dialog"
       tabindex="-1"
     >
@@ -105,9 +105,9 @@
               <button
                 type="button"
                 class="close float-right"
-                @click="emitCancel($event)"
                 data-dismiss="modal"
                 aria-label="Close"
+                @click="emitCancel($event)"
               >
                 <span aria-hidden="true">&times;</span>
               </button>
@@ -115,22 +115,22 @@
           </div>
           <div class="modal-body">
             <slot
-              name="body"
               :text="text"
+              name="body"
             >
               <p>{{ text }}</p>
             </slot>
           </div>
           <div
-            class="modal-footer"
             v-if="!hideFooter"
+            class="modal-footer"
           >
             <button
+              :class="btnCancelKindClass"
               type="button"
               class="btn"
-              :class="btnCancelKindClass"
-              @click="emitCancel($event)"
               data-dismiss="modal"
+              @click="emitCancel($event)"
             >
               {{ closeButtonLabel }}
             </button>
@@ -151,12 +151,12 @@
 
             <button
               v-if="primaryButtonLabel"
-              type="button"
-              class="btn js-primary-button"
               :disabled="submitDisabled"
               :class="btnKindClass"
-              @click="emitSubmit($event)"
+              type="button"
+              class="btn js-primary-button"
               data-dismiss="modal"
+              @click="emitSubmit($event)"
             >
               {{ primaryButtonLabel }}
             </button>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index 4eca3fd4e97..2c47f5b9b35 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -57,8 +57,8 @@ export default {
 
 <template>
   <div
-    class="diff-file preview-container"
-    v-if="viewer">
+    v-if="viewer"
+    class="diff-file preview-container">
     <component
       :is="viewer"
       :diff-mode="diffMode"
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
index efcc39197b0..38e881d17a2 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -104,18 +104,18 @@ export default {
 <template>
   <div class="onion-skin view">
     <div
-      class="onion-skin-frame"
       :style="{
         'width': onionMaxPixelWidth,
         'height': onionMaxPixelHeight,
         'user-select': dragging === true ? 'none' : '',
-    }">
+      }"
+      class="onion-skin-frame">
       <div
-        class="frame deleted"
         :style="{
           'width': onionMaxPixelWidth,
           'height': onionMaxPixelHeight,
-      }">
+        }"
+        class="frame deleted">
         <image-viewer
           key="onionOldImg"
           :render-info="false"
@@ -125,13 +125,13 @@ export default {
         />
       </div>
       <div
-        class="added frame"
         ref="addedFrame"
         :style="{
           'opacity': onionOpacity,
           'width': onionMaxPixelWidth,
           'height': onionMaxPixelHeight,
-      }">
+        }"
+        class="added frame">
         <image-viewer
           key="onionNewImg"
           :render-info="false"
@@ -143,14 +143,14 @@ export default {
       <div class="controls">
         <div class="transparent"></div>
         <div
-          class="drag-track"
           ref="dragTrack"
+          class="drag-track"
           @mousedown="startDrag"
           @mouseup="stopDrag">
           <div
-            class="dragger"
             ref="dragger"
-            :style="{ 'left': onionDraggerPixelPos }">
+            :style="{ 'left': onionDraggerPixelPos }"
+            class="dragger">
           </div>
         </div>
         <div class="opaque"></div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index fc513ebfce1..86366c799a2 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -111,12 +111,12 @@ export default {
 <template>
   <div class="swipe view">
     <div
-      class="swipe-frame"
       ref="swipeFrame"
       :style="{
         'width': swipeMaxPixelWidth,
         'height': swipeMaxPixelHeight,
-    }">
+      }"
+      class="swipe-frame">
       <div class="frame deleted">
         <image-viewer
           key="swipeOldImg"
@@ -128,12 +128,12 @@ export default {
         />
       </div>
       <div
-        class="swipe-wrap"
         ref="swipeWrap"
         :style="{
           'width': swipeWrapPixelWidth,
           'height': swipeMaxPixelHeight,
-      }">
+        }"
+        class="swipe-wrap">
         <div class="frame added">
           <image-viewer
             key="swipeNewImg"
@@ -145,11 +145,11 @@ export default {
         </div>
       </div>
       <span
-        class="swipe-bar"
         ref="swipeBar"
+        :style="{ 'left': swipeBarPixelPos }"
+        class="swipe-bar"
         @mousedown="startDrag"
-        @mouseup="stopDrag"
-        :style="{ 'left': swipeBarPixelPos }">
+        @mouseup="stopDrag">
         <span class="top-handle"></span>
         <span class="bottom-handle"></span>
       </span>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
index 43b28f96a06..1af85283277 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -49,8 +49,8 @@ export default {
 <template>
   <div class="diff-file-container">
     <div
-      class="diff-viewer"
-      v-if="diffMode === $options.diffModes.replaced">
+      v-if="diffMode === $options.diffModes.replaced"
+      class="diff-viewer">
       <div class="image js-replaced-image">
         <two-up-viewer
           v-if="mode === $options.imageViewMode.twoup"
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index c159333d89a..3cba0c5e633 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -28,11 +28,11 @@ export default {
 
 <template>
   <button
+    :disabled="isDisabled || isLoading"
     class="dropdown-menu-toggle dropdown-menu-full-width"
     type="button"
     data-toggle="dropdown"
     aria-expanded="false"
-    :disabled="isDisabled || isLoading"
   >
     <loading-icon
       v-show="isLoading"
@@ -42,8 +42,8 @@ export default {
       {{ toggleText }}
     </span>
     <span
-      class="dropdown-toggle-icon"
       v-show="!isLoading"
+      class="dropdown-toggle-icon"
     >
       <i
         class="fa fa-chevron-down"
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
index 1fe27eb97ab..b7a4613bdd2 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
@@ -15,8 +15,8 @@ export default {
 
 <template>
   <input
-    type="hidden"
     :name="name"
     :value="value"
+    type="hidden"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
index c2145a26e64..7f1912f6405 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -23,10 +23,10 @@ export default {
 <template>
   <div class="dropdown-input">
     <input
-      class="dropdown-input-field"
-      type="search"
       v-model="searchQuery"
       :placeholder="placeholderText"
+      class="dropdown-input-field"
+      type="search"
       autocomplete="off"
     />
     <i
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index 9295be3e2b2..0fdea651130 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -32,10 +32,10 @@ export default {
 <template>
   <span>
     <button
-      type="button"
       v-show="isCollapsed"
-      class="text-expander btn-blank"
       :aria-label="ariaLabel"
+      type="button"
+      class="text-expander btn-blank"
       @click="onClick">
       ...
     </button>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index be2755452e2..878c805ada5 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -73,8 +73,8 @@ export default {
 <template>
   <span>
     <svg
-      :class="[iconSizeClass, cssClasses]"
       v-if="!loading && !folder"
+      :class="[iconSizeClass, cssClasses]"
     >
       <use v-bind="{ 'xlink:href':spriteHref }" />
     </svg>
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index 7ba58bd5959..c03a342e777 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -57,8 +57,8 @@ export default {
     role="dialog"
   >
     <div
-      class="modal-dialog"
       :class="modalSizeClass"
+      class="modal-dialog"
       role="document"
     >
       <div class="modal-content">
@@ -70,10 +70,10 @@ export default {
               </slot>
             </h4>
             <button
+              :aria-label="s__('Modal|Close')"
               type="button"
               class="close js-modal-close-action"
               data-dismiss="modal"
-              :aria-label="s__('Modal|Close')"
               @click="emitCancel($event)"
             >
               <span aria-hidden="true">&times;</span>
@@ -96,9 +96,9 @@ export default {
               {{ s__('Modal|Cancel') }}
             </button>
             <button
+              :class="`btn-${footerPrimaryButtonVariant}`"
               type="button"
               class="btn js-modal-primary-action"
-              :class="`btn-${footerPrimaryButtonVariant}`"
               data-dismiss="modal"
               @click="emitSubmit($event)"
             >
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index ca17fa06a00..62d35f6547d 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -117,8 +117,8 @@ export default {
     </section>
 
     <section
-      class="header-action-buttons"
       v-if="actions.length"
+      class="header-action-buttons"
     >
       <template
         v-for="(action, i) in actions"
@@ -135,21 +135,21 @@ export default {
         <a
           v-else-if="action.type === 'ujs-link'"
           :href="action.path"
-          data-method="post"
-          rel="nofollow"
           :class="action.cssClass"
           :key="i"
+          data-method="post"
+          rel="nofollow"
         >
           {{ action.label }}
         </a>
 
         <button
           v-else-if="action.type === 'button'"
-          @click="onClickAction(action)"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          type="button"
           :key="i"
+          type="button"
+          @click="onClickAction(action)"
         >
           {{ action.label }}
           <i
@@ -162,11 +162,11 @@ export default {
       </template>
       <button
         v-if="hasSidebarButton"
+        id="toggleSidebar"
         type="button"
         class="btn btn-default d-block d-sm-none d-md-none
 sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
         aria-label="Toggle Sidebar"
-        id="toggleSidebar"
       >
         <i
           class="fa fa-angle-double-left"
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 23010f40f26..4ffc811e714 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -43,9 +43,9 @@ export default {
 
 <template>
   <div
-    class="avatar identicon"
     :class="sizeClass"
-    :style="identiconStyles">
+    :style="identiconStyles"
+    class="avatar identicon">
     {{ identiconTitle }}
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 3d39b3ab173..ca8ce554588 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -33,11 +33,11 @@
 <template>
   <div class="issuable-note-warning">
     <icon
+      v-if="!isLockedAndConfidential"
       :name="warningIcon"
       :size="16"
       class="icon inline"
       aria-hidden="true"
-      v-if="!isLockedAndConfidential"
     />
 
     <span v-if="isLockedAndConfidential">
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 88c13a1f340..2ff0c056b9c 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -54,19 +54,19 @@
 
 <template>
   <button
-    @click="onClick"
-    type="button"
     :class="containerClass"
     :disabled="loading || disabled"
+    type="button"
+    @click="onClick"
   >
     <transition name="fade">
       <loading-icon
         v-if="loading"
         :inline="true"
-        class="js-loading-button-icon"
         :class="{
           'append-right-5': label
         }"
+        class="js-loading-button-icon"
       />
     </transition>
     <transition name="fade">
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
index 12a75e016d7..db22c5f02cd 100644
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -35,10 +35,10 @@
     :is="rootElementType"
     class="loading-container text-center">
     <i
-      class="fa fa-spin fa-spinner"
       :class="cssClass"
-      aria-hidden="true"
       :aria-label="label"
+      class="fa fa-spin fa-spinner"
+      aria-hidden="true"
     >
     </i>
   </component>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 12c7d125062..05e8ed2da2c 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -117,17 +117,17 @@
 
 <template>
   <div
-    class="md-area js-vue-markdown-field"
+    ref="gl-form"
     :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
-    ref="gl-form">
+    class="md-area js-vue-markdown-field">
     <markdown-header
       :preview-markdown="previewMarkdown"
       @preview-markdown="showPreviewTab"
       @write-markdown="showWriteTab"
     />
     <div
-      class="md-write-holder"
       v-show="!previewMarkdown"
+      class="md-write-holder"
     >
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
@@ -137,8 +137,8 @@
           aria-label="Enter zen mode"
         >
           <icon
-            name="screen-normal"
             :size="32"
+            name="screen-normal"
           />
         </a>
         <markdown-toolbar
@@ -149,8 +149,8 @@
       </div>
     </div>
     <div
-      class="md md-preview-holder md-preview"
       v-show="previewMarkdown"
+      class="md md-preview-holder md-preview"
     >
       <div
         ref="markdown-preview"
@@ -164,8 +164,8 @@
     <template v-if="previewMarkdown && !markdownPreviewLoading">
       <div
         v-if="referencedCommands"
-        v-html="referencedCommands"
         class="referenced-commands"
+        v-html="referencedCommands"
       >
       </div>
       <div
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index db453c30576..ee3628b1e3f 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -54,8 +54,8 @@
   <div class="md-header">
     <ul class="nav-links clearfix">
       <li
-        class="md-header-tab"
         :class="{ active: !previewMarkdown }"
+        class="md-header-tab"
       >
         <a
           class="js-write-link"
@@ -67,8 +67,8 @@
         </a>
       </li>
       <li
-        class="md-header-tab"
         :class="{ active: previewMarkdown }"
+        class="md-header-tab"
       >
         <a
           class="js-preview-link"
@@ -80,8 +80,8 @@
         </a>
       </li>
       <li
-        class="md-header-toolbar"
         :class="{ active: !previewMarkdown }"
+        class="md-header-toolbar"
       >
         <toolbar-button
           tag="**"
@@ -94,8 +94,8 @@
           icon="italic"
         />
         <toolbar-button
-          tag="> "
           :prepend="true"
+          tag="> "
           button-title="Insert a quote"
           icon="quote"
         />
@@ -106,20 +106,20 @@
           icon="code"
         />
         <toolbar-button
-          tag="* "
           :prepend="true"
+          tag="* "
           button-title="Add a bullet list"
           icon="list-bulleted"
         />
         <toolbar-button
-          tag="1. "
           :prepend="true"
+          tag="1. "
           button-title="Add a numbered list"
           icon="list-numbered"
         />
         <toolbar-button
-          tag="* [ ] "
           :prepend="true"
+          tag="* [ ] "
           button-title="Add a task list"
           icon="task-done"
         />
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 2d2d69ebeb2..9f1e009efdd 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -39,15 +39,15 @@
 <template>
   <button
     v-tooltip
-    type="button"
-    class="toolbar-btn js-md"
-    tabindex="-1"
-    data-container="body"
     :data-md-tag="tag"
     :data-md-block="tagBlock"
     :data-md-prepend="prepend"
     :title="buttonTitle"
     :aria-label="buttonTitle"
+    type="button"
+    class="toolbar-btn js-md"
+    tabindex="-1"
+    data-container="body"
   >
     <icon
       :name="icon"
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue
index b07f6b07afe..522091ea889 100644
--- a/app/assets/javascripts/vue_shared/components/memory_graph.vue
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -113,19 +113,19 @@ export default {
 <template>
   <div class="memory-graph-container">
     <svg
-      class="has-tooltip"
       :title="getFormattedMedian"
       :width="width"
       :height="height"
+      class="has-tooltip"
       xmlns="http://www.w3.org/2000/svg">
       <path
         :d="pathD"
         :viewBox="pathViewBox"
       />
       <circle
-        r="1.5"
         :cx="dotX"
         :cy="dotY"
+        r="1.5"
         tranform="translate(0 -1)"
       />
     </svg>
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
index 08d4936f480..99d61b5639d 100644
--- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
+++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue
@@ -59,9 +59,9 @@ export default {
       }"
     >
       <a
+        :class="`js-${scope}-tab-${tab.scope}`"
         role="button"
         @click="onTabClick(tab)"
-        :class="`js-${scope}-tab-${tab.scope}`"
       >
         {{ tab.name }}
 
diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index abbe9a22717..8c2dcc2d902 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -82,9 +82,9 @@
 
 <template>
   <div
-    class="dragHandle"
     :class="className"
     :style="cursorStyle"
+    class="dragHandle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
index 279cc1de5bb..97ca4d93bd7 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
@@ -85,7 +85,6 @@
 <template>
   <img
     v-tooltip
-    class="avatar"
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
@@ -99,5 +98,6 @@
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
+    class="avatar"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index 21ffdc1dc86..a2a9a5e6987 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -66,10 +66,10 @@
 
 <template>
   <deprecated-modal
-    kind="warning"
-    class="recaptcha-modal js-recaptcha-modal"
     :hide-footer="true"
     :title="__('Please solve the reCAPTCHA')"
+    kind="warning"
+    class="recaptcha-modal js-recaptcha-modal"
     @cancel="close"
   >
     <div slot="body">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 71ec34f2c7a..74998a4787d 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -97,8 +97,8 @@
 
 <template>
   <div
-    class="block"
     :class="blockClass"
+    class="block"
   >
     <div class="issuable-sidebar-header">
       <toggle-sidebar
@@ -107,8 +107,8 @@
       />
     </div>
     <collapsed-calendar-icon
-      class="sidebar-collapsed-icon"
       :text="collapsedText"
+      class="sidebar-collapsed-icon"
     />
     <div class="title">
       {{ label }}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index f155ac2be02..a3fc358130f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
@@ -143,8 +143,8 @@ export default {
         :value="label.id"
       />
       <div
-        class="dropdown"
         ref="dropdown"
+        class="dropdown"
       >
         <dropdown-button
           :ability-name="abilityName"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
index 47497c1de98..48d2f16f554 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
@@ -53,10 +53,7 @@ export default {
 
 <template>
   <button
-    type="button"
     ref="dropdownButton"
-    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
-    data-toggle="dropdown"
     :class="{ 'js-extra-options': showExtraOptions }"
     :data-ability-name="abilityName"
     :data-field-name="fieldName"
@@ -64,6 +61,9 @@ export default {
     :data-labels="labelsPath"
     :data-namespace-path="namespace"
     :data-show-any="showExtraOptions"
+    type="button"
+    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
+    data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text">
       {{ dropdownToggleText }}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
index 3c400afdc1d..fe895136ccc 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue
@@ -19,9 +19,9 @@ export default {
   <div class="dropdown-page-two dropdown-new-label">
     <div class="dropdown-title">
       <button
+        :aria-label="__('Go back')"
         type="button"
         class="dropdown-title-button dropdown-menu-back"
-        :aria-label="__('Go back')"
       >
         <i
           aria-hidden="true"
@@ -32,9 +32,9 @@ export default {
       </button>
       {{ headerTitle }}
       <button
+        :aria-label="__('Close')"
         type="button"
         class="dropdown-title-button dropdown-menu-close"
-        :aria-label="__('Close')"
       >
         <i
           aria-hidden="true"
@@ -48,19 +48,19 @@ export default {
       <div class="dropdown-labels-error js-label-error"></div>
       <input
         id="new_label_name"
+        :placeholder="__('Name new label')"
         type="text"
         class="default-dropdown-input"
-        :placeholder="__('Name new label')"
       />
       <div class="suggest-colors suggest-colors-dropdown">
         <a
           v-for="(color, index) in suggestedColors"
-          href="#"
           :key="index"
           :data-color="color"
           :style="{
             backgroundColor: color,
           }"
+          href="#"
         >
           &nbsp;
         </a>
@@ -69,9 +69,9 @@ export default {
         <div class="dropdown-label-color-preview js-dropdown-label-color-preview"></div>
         <input
           id="new_label_color"
+          :placeholder="__('Assign custom color like #FF0000')"
           type="text"
           class="default-dropdown-input"
-          :placeholder="__('Assign custom color like #FF0000')"
         />
       </div>
       <div class="clearfix">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
index 5f61e9fbe80..d64ad016f9b 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer.vue
@@ -34,9 +34,9 @@ export default {
       </li>
       <li>
         <a
+          :href="labelsWebUrl"
           data-is-link="true"
           class="dropdown-external-link"
-          :href="labelsWebUrl"
         >
           {{ manageLabelsTitle }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
index 7664acdf19c..e98b6392827 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue
@@ -6,9 +6,9 @@ export default {};
   <div class="dropdown-title">
     <span>{{ __('Assign labels') }}</span>
     <button
+      :aria-label="__('Close')"
       type="button"
       class="dropdown-title-button dropdown-menu-close"
-      :aria-label="__('Close')"
     >
       <i
         aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
index ae633460c95..80d65a2a534 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue
@@ -5,10 +5,10 @@ export default {};
 <template>
   <div class="dropdown-input">
     <input
+      :placeholder="__('Search')"
       autocomplete="off"
       class="dropdown-input-field"
       type="search"
-      :placeholder="__('Search')"
     />
     <i
       aria-hidden="true"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
index 88360b46f24..10e990f8a80 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
@@ -36,10 +36,10 @@ export default {
 
 <template>
   <div
-    class="hide-collapsed value issuable-show-labels js-value"
     :class="{
       'has-labels':!isEmpty,
     }"
+    class="hide-collapsed value issuable-show-labels js-value"
   >
     <span
       v-if="isEmpty"
@@ -48,18 +48,18 @@ export default {
       <slot>{{ __('None') }}</slot>
     </span>
     <a
-      v-else
       v-for="label in labels"
+      v-else
       :key="label.id"
       :href="labelFilterUrl(label)"
     >
       <span
         v-tooltip
+        :style="labelStyle(label)"
+        :title="label.description"
         class="badge color-label"
         data-placement="bottom"
         data-container="body"
-        :style="labelStyle(label)"
-        :title="label.description"
       >
         {{ label.title }}
       </span>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
index 68fa2ab8d01..af297f3c408 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
@@ -37,10 +37,10 @@ export default {
 <template>
   <div
     v-tooltip
+    :title="labelsList"
     class="sidebar-collapsed-icon"
     data-placement="left"
     data-container="body"
-    :title="labelsList"
     @click="handleClick"
   >
     <i
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
index de6f8c32e74..ac2e99abe77 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
@@ -28,21 +28,21 @@ export default {
 
 <template>
   <button
+    v-tooltip
+    :title="tooltipLabel"
     type="button"
     class="btn btn-blank gutter-toggle btn-sidebar-action"
-    @click="toggle"
-    v-tooltip
     data-container="body"
     data-placement="left"
-    :title="tooltipLabel"
+    @click="toggle"
   >
     <i
-      aria-label="toggle collapse"
-      class="fa"
       :class="{
         'fa-angle-double-right': !collapsed,
         'fa-angle-double-left': collapsed
       }"
+      aria-label="toggle collapse"
+      class="fa"
     >
     </i>
   </button>
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
index 16304e4815d..4a5ffbe5d5a 100644
--- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
+++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue
@@ -22,10 +22,10 @@
 
 <template>
   <div
-    class="animation-container"
     :class="{
       'animation-container-small': small,
     }"
+    class="animation-container"
   >
     <div
       v-for="(css, index) in lineClasses"
diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
index 86f06c8d266..b1c2df54ef6 100644
--- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
+++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue
@@ -84,8 +84,8 @@ export default {
 
 <template>
   <div
-    class="stacked-progress-bar"
     :class="cssClass"
+    class="stacked-progress-bar"
   >
     <span
       v-if="!totalCount"
@@ -96,30 +96,30 @@ export default {
     <span
       v-tooltip
       v-if="successPercent"
-      class="status-green"
-      data-placement="bottom"
       :title="successTooltip"
       :style="successBarStyle"
+      class="status-green"
+      data-placement="bottom"
     >
       {{ successPercent }}%
     </span>
     <span
       v-tooltip
       v-if="neutralPercent"
-      class="status-neutral"
-      data-placement="bottom"
       :title="neutralTooltip"
       :style="neutralBarStyle"
+      class="status-neutral"
+      data-placement="bottom"
     >
       {{ neutralPercent }}%
     </span>
     <span
       v-tooltip
       v-if="failurePercent"
-      class="status-red"
-      data-placement="bottom"
       :title="failureTooltip"
       :style="failureBarStyle"
+      class="status-red"
+      data-placement="bottom"
     >
       {{ failurePercent }}%
     </span>
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index 6f231619f26..2370e59d017 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -153,8 +153,8 @@
         class="page-item"
       >
         <a
-          @click.prevent="changePage(item.title, item.disabled)"
           class="page-link"
+          @click.prevent="changePage(item.title, item.disabled)"
         >
           {{ item.title }}
         </a>
diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
index 9b2f46186ac..1c6011dcfd0 100644
--- a/app/assets/javascripts/vue_shared/components/tabs/tab.vue
+++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue
@@ -36,10 +36,10 @@ export default {
 
 <template>
   <div
-    class="tab-pane"
     :class="{
       active: localActive
     }"
+    class="tab-pane"
     role="tabpanel"
   >
     <slot></slot>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 09031d3ffa1..a897300b62b 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -63,26 +63,26 @@
   <label class="toggle-wrapper">
     <input
       v-if="name"
-      type="hidden"
       :name="name"
       :value="value"
+      type="hidden"
     />
     <button
-      type="button"
-      class="project-feature-toggle"
       :aria-label="ariaLabel"
       :class="{
         'is-checked': value,
         'is-disabled': disabledInput,
         'is-loading': isLoading
       }"
+      type="button"
+      class="project-feature-toggle"
       @click="toggleFeature"
     >
       <loadingIcon class="loading-icon" />
       <span class="toggle-icon">
         <icon
-          css-classes="toggle-icon-svg"
-          :name="toggleIcon"/>
+          :name="toggleIcon"
+          css-classes="toggle-icon-svg"/>
       </span>
     </button>
   </label>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
index a5c4fbcce31..3a413c74410 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -85,8 +85,6 @@ export default {
 <template>
   <img
     v-tooltip
-    class="avatar"
-    data-boundary="window"
     :class="{
       lazy: lazy,
       [avatarSizeClass]: true,
@@ -100,5 +98,7 @@ export default {
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
+    class="avatar"
+    data-boundary="window"
   />
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 6955d164def..01c36fec41a 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -84,8 +84,8 @@ export default {
 
 <template>
   <a
-    class="user-avatar-link"
-    :href="linkHref">
+    :href="linkHref"
+    class="user-avatar-link">
     <user-avatar-image
       :img-src="imgSrc"
       :img-alt="imgAlt"
@@ -94,8 +94,8 @@ export default {
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
     /><span
-      v-if="shouldShowUsername"
       v-tooltip
+      v-if="shouldShowUsername"
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
     >{{ username }}</span>
diff --git a/app/services/quick_actions/interpret_service.rb b/app/services/quick_actions/interpret_service.rb
index 0215994b1a7..9ac8fdb4cff 100644
--- a/app/services/quick_actions/interpret_service.rb
+++ b/app/services/quick_actions/interpret_service.rb
@@ -561,6 +561,17 @@ module QuickActions
       end
     end
 
+    desc 'Make issue confidential.'
+    explanation do
+      'Makes this issue confidential'
+    end
+    condition do
+      issuable.is_a?(Issue) && current_user.can?(:"admin_#{issuable.to_ability_name}", issuable)
+    end
+    command :confidential do
+      @updates[:confidential] = true
+    end
+
     def extract_users(params)
       return [] if params.nil?
 
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 4b3c52af16a..8ca9fb4512e 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -12,9 +12,9 @@
   - if can?(current_user, :award_emoji, awardable)
     .award-menu-holder.js-award-holder
       %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
-        'aria-label': 'Add reaction',
+        'aria-label': _('Add reaction'),
         class: ("js-user-authored" if user_authored),
-        data: { title: 'Add reaction', placement: "bottom" } }
+        data: { title: _('Add reaction'), placement: "bottom" } }
         %span{ class: "award-control-icon award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
         %span{ class: "award-control-icon award-control-icon-positive" }= custom_icon('emoji_smiley')
         %span{ class: "award-control-icon award-control-icon-super-positive" }= custom_icon('emoji_smile')
diff --git a/changelogs/unreleased/47145-quick-actions-confidential.yml b/changelogs/unreleased/47145-quick-actions-confidential.yml
new file mode 100644
index 00000000000..7ae4e2268af
--- /dev/null
+++ b/changelogs/unreleased/47145-quick-actions-confidential.yml
@@ -0,0 +1,5 @@
+---
+title: Add /confidential quick action
+merge_request:
+author: Jan Beckmann
+type: added
diff --git a/changelogs/unreleased/sql-buckets.yml b/changelogs/unreleased/sql-buckets.yml
new file mode 100644
index 00000000000..afb13d5cb20
--- /dev/null
+++ b/changelogs/unreleased/sql-buckets.yml
@@ -0,0 +1,5 @@
+---
+title: Adjust SQL and transaction Prometheus buckets
+merge_request:
+author:
+type: other
diff --git a/doc/development/new_fe_guide/development/testing.md b/doc/development/new_fe_guide/development/testing.md
index c359bd83ed1..e1e13474b75 100644
--- a/doc/development/new_fe_guide/development/testing.md
+++ b/doc/development/new_fe_guide/development/testing.md
@@ -1,3 +1,135 @@
-# Testing
+# Overview of Frontend Testing
 
-> TODO: Add content
+## Types of tests in our codebase
+
+* **RSpec**
+  * **[Ruby unit tests](#ruby-unit-tests-spec-rb)** for models, controllers, helpers, etc. (`/spec/**/*.rb`)
+  * **[Full feature tests](#full-feature-tests-spec-features-rb)** (`/spec/features/**/*.rb`)
+* **[Karma](#karma-tests-spec-javascripts-js)** (`/spec/javascripts/**/*.js`)
+* ~~Spinach~~ — These have been removed from our codebase in May 2018. (`/features/`)
+
+## RSpec: Ruby unit tests `/spec/**/*.rb`
+
+These tests are meant to unit test the ruby models, controllers and helpers.
+
+### When do we write/update these tests?
+
+Whenever we create or modify any Ruby models, controllers or helpers we add/update corresponding tests.
+
+---
+
+## RSpec: Full feature tests `/spec/features/**/*.rb`
+
+Full feature tests will load a full app environment and allow us to test things like rendering DOM, interacting with links and buttons, testing the outcome of those interactions through multiple pages if necessary. These are also called end-to-end tests but should not be confused with QA end-to-end tests (`package-and-qa` manual pipeline job).
+
+### When do we write/update these tests?
+
+When we add a new feature, we write at least two tests covering the success and the failure scenarios.
+
+### Relevant notes
+
+A `:js` flag is added to the test to make sure the full environment is loaded.
+
+```
+scenario 'successfully', :js do
+  sign_in(create(:admin))
+end
+```
+
+The steps of each test are written using capybara methods ([documentation](http://www.rubydoc.info/gems/capybara/2.15.1)).
+
+Bear in mind <abbr title="XMLHttpRequest">XHR</abbr> calls might require you to use `wait_for_requests` in between steps, like so:
+
+```rspec
+find('.form-control').native.send_keys(:enter)
+
+wait_for_requests
+
+expect(page).not_to have_selector('.card')
+```
+
+---
+
+## Karma tests `/spec/javascripts/**/*.js`
+
+These are the more frontend-focused, at the moment. They're **faster** than `rspec` and make for very quick testing of frontend components.
+
+### When do we write/update these tests?
+
+When we add/update a method/action/mutation to Vue or Vuex, we write karma tests to ensure the logic we wrote doesn't break. We should, however, refrain from writing tests that double-test Vue's internal features.
+
+### Relevant notes
+
+Karma tests are run against a virtual DOM.
+
+To populate the DOM, we can use fixtures to fake the generation of HTML instead of having Rails do that.
+
+Be sure to check the [best practices for karma tests](../../testing_guide/frontend_testing.html#best-practices).
+
+### Vue and Vuex
+
+Test as much as possible without double-testing Vue's internal features, as mentioned above.
+
+Make sure to test computedProperties, mutations, actions. Run the action and test that the proper mutations are committed.
+
+Also check these [notes on testing Vue components](../../fe_guide/vue.html#testing-vue-components).
+
+#### Vuex Helper: `testAction`
+
+We have a helper available to make testing actions easier, as per [official documentation](https://vuex.vuejs.org/en/testing.html):
+
+```
+testAction(
+  actions.actionName, // action
+  { }, // params to be passed to action
+  state, // state
+  [
+    { type: types.MUTATION},
+    { type: types.MUTATION_1, payload: {}},
+  ], // mutations committed
+  [
+    { type: 'actionName', payload: {}},
+    { type: 'actionName1', payload: {}},
+  ] // actions dispatched
+  done,
+);
+```
+
+Check an example in [spec/javascripts/ide/stores/actions_spec.jsspec/javascripts/ide/stores/actions_spec.js](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/spec/javascripts/ide/stores/actions_spec.js).
+
+#### Vue Helper: `mountComponent`
+
+To make mounting a Vue component easier and more readable, we have a few helpers available in `spec/helpers/vue_mount_component_helper`.
+
+* `createComponentWithStore`
+* `mountComponentWithStore`
+
+Examples of usage:
+
+```
+beforeEach(() => {
+  vm = createComponentWithStore(Component, store);
+
+  vm.$store.state.currentBranchId = 'master';
+
+  vm.$mount();
+},
+```
+
+```
+beforeEach(() => {
+  vm = mountComponentWithStore(Component, {
+    el: '#dummy-element',
+    store,
+    props: { badge },
+  });
+},
+```
+
+Don't forget to clean up:
+
+```
+afterEach(() => {
+  vm.$destroy();
+});
+```
diff --git a/doc/user/project/quick_actions.md b/doc/user/project/quick_actions.md
index 2f4ed3493c2..0ef8eddad20 100644
--- a/doc/user/project/quick_actions.md
+++ b/doc/user/project/quick_actions.md
@@ -42,3 +42,4 @@ do.
 | `/tableflip`               | Append the comment with `(╯°□°)╯︵ ┻━┻` |
 | `/shrug`                   | Append the comment with `¯\＿(ツ)＿/¯` |
 | <code>/copy_metadata #issue &#124; !merge_request</code> | Copy labels and milestone from other issue or merge request |
+| `/confidential`            | Makes the issue confidential |
\ No newline at end of file
diff --git a/lib/gitlab/metrics/subscribers/active_record.rb b/lib/gitlab/metrics/subscribers/active_record.rb
index 4b3e8d0a6a0..38f119cf06d 100644
--- a/lib/gitlab/metrics/subscribers/active_record.rb
+++ b/lib/gitlab/metrics/subscribers/active_record.rb
@@ -20,7 +20,7 @@ module Gitlab
         define_histogram :gitlab_sql_duration_seconds do
           docstring 'SQL time'
           base_labels Transaction::BASE_LABELS
-          buckets [0.001, 0.01, 0.1, 1.0, 10.0]
+          buckets [0.05, 0.1, 0.25, 0.5, 1.0, 2.5, 5.0]
         end
 
         def current_transaction
diff --git a/lib/gitlab/metrics/transaction.rb b/lib/gitlab/metrics/transaction.rb
index f3e48083c19..9f903e96585 100644
--- a/lib/gitlab/metrics/transaction.rb
+++ b/lib/gitlab/metrics/transaction.rb
@@ -140,7 +140,7 @@ module Gitlab
       define_histogram :gitlab_transaction_duration_seconds do
         docstring 'Transaction duration'
         base_labels BASE_LABELS
-        buckets [0.001, 0.01, 0.1, 1.0, 10.0]
+        buckets [0.1, 0.25, 0.5, 1.0, 2.5, 5.0]
       end
 
       define_histogram :gitlab_transaction_allocated_memory_bytes do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 22adfe48869..e8a5a15f410 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-06-11 09:18+0200\n"
-"PO-Revision-Date: 2018-06-11 09:18+0200\n"
+"POT-Creation-Date: 2018-06-12 18:57+1000\n"
+"PO-Revision-Date: 2018-06-12 18:57+1000\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -262,6 +262,9 @@ msgstr ""
 msgid "Add new directory"
 msgstr ""
 
+msgid "Add reaction"
+msgstr ""
+
 msgid "Add todo"
 msgstr ""
 
diff --git a/package.json b/package.json
index 4a3dbb34bee..4e1ca905ee8 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,7 @@
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jasmine": "^2.1.0",
     "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-vue": "^4.0.1",
+    "eslint-plugin-vue": "^4.5.0",
     "ignore": "^3.3.7",
     "istanbul": "^0.4.5",
     "jasmine-core": "^2.9.0",
diff --git a/spec/features/issues/user_uses_slash_commands_spec.rb b/spec/features/issues/user_uses_slash_commands_spec.rb
index fd0aa6cf3a3..dacca494755 100644
--- a/spec/features/issues/user_uses_slash_commands_spec.rb
+++ b/spec/features/issues/user_uses_slash_commands_spec.rb
@@ -153,6 +153,42 @@ feature 'Issues > User uses quick actions', :js do
       end
     end
 
+    describe 'make issue confidential' do
+      let(:issue) { create(:issue, project: project) }
+      let(:original_issue) { create(:issue, project: project) }
+
+      context 'when the current user can update issues' do
+        it 'does not create a note, and marks the issue as confidential' do
+          add_note("/confidential")
+
+          expect(page).not_to have_content "/confidential"
+          expect(page).to have_content 'Commands applied'
+          expect(page).to have_content "made the issue confidential"
+
+          expect(issue.reload).to be_confidential
+        end
+      end
+
+      context 'when the current user cannot update the issue' do
+        let(:guest) { create(:user) }
+        before do
+          project.add_guest(guest)
+          gitlab_sign_out
+          sign_in(guest)
+          visit project_issue_path(project, issue)
+        end
+
+        it 'does not create a note, and does not mark the issue as confidential' do
+          add_note("/confidential")
+
+          expect(page).not_to have_content 'Commands applied'
+          expect(page).not_to have_content "made the issue confidential"
+
+          expect(issue.reload).not_to be_confidential
+        end
+      end
+    end
+
     describe 'move the issue to another project' do
       let(:issue) { create(:issue, project: project) }
 
diff --git a/spec/helpers/storage_helper_spec.rb b/spec/helpers/storage_helper_spec.rb
index 4627a1e1872..c580b78c908 100644
--- a/spec/helpers/storage_helper_spec.rb
+++ b/spec/helpers/storage_helper_spec.rb
@@ -1,21 +1,25 @@
-require 'spec_helper'
+require "spec_helper"
 
 describe StorageHelper do
-  describe '#storage_counter' do
-    it 'formats bytes to one decimal place' do
-      expect(helper.storage_counter(1.23.megabytes)).to eq '1.2 MB'
+  describe "#storage_counter" do
+    it "formats bytes to one decimal place" do
+      expect(helper.storage_counter(1.23.megabytes)).to eq("1.2 MB")
     end
 
-    it 'does not add decimals for sizes < 1 MB' do
-      expect(helper.storage_counter(23.5.kilobytes)).to eq '24 KB'
+    it "does not add decimals for sizes < 1 MB" do
+      expect(helper.storage_counter(23.5.kilobytes)).to eq("24 KB")
     end
 
-    it 'does not add decimals for zeroes' do
-      expect(helper.storage_counter(2.megabytes)).to eq '2 MB'
+    it "does not add decimals for zeroes" do
+      expect(helper.storage_counter(2.megabytes)).to eq("2 MB")
     end
 
-    it 'uses commas as thousands separator' do
-      expect(helper.storage_counter(100_000_000_000_000_000)).to eq '90,949.5 TB'
+    it "uses commas as thousands separator" do
+      if Gitlab.rails5?
+        expect(helper.storage_counter(100_000_000_000_000_000_000_000)).to eq("86,736.2 EB")
+      else
+        expect(helper.storage_counter(100_000_000_000_000_000)).to eq("90,949.5 TB")
+      end
     end
   end
 end
diff --git a/spec/services/quick_actions/interpret_service_spec.rb b/spec/services/quick_actions/interpret_service_spec.rb
index bd835a1fca6..743e281183e 100644
--- a/spec/services/quick_actions/interpret_service_spec.rb
+++ b/spec/services/quick_actions/interpret_service_spec.rb
@@ -323,6 +323,14 @@ describe QuickActions::InterpretService do
       end
     end
 
+    shared_examples 'confidential command' do
+      it 'marks issue as confidential if content contains /confidential' do
+        _, updates = service.execute(content, issuable)
+
+        expect(updates).to eq(confidential: true)
+      end
+    end
+
     shared_examples 'shrug command' do
       it 'appends ¯\_(ツ)_/¯ to the comment' do
         new_content, _ = service.execute(content, issuable)
@@ -774,6 +782,11 @@ describe QuickActions::InterpretService do
       let(:issuable) { issue }
     end
 
+    it_behaves_like 'confidential command' do
+      let(:content) { '/confidential' }
+      let(:issuable) { issue }
+    end
+
     context '/copy_metadata command' do
       let(:todo_label) { create(:label, project: project, title: 'To Do') }
       let(:inreview_label) { create(:label, project: project, title: 'In Review') }
@@ -919,6 +932,11 @@ describe QuickActions::InterpretService do
       end
 
       it_behaves_like 'empty command' do
+        let(:content) { '/confidential' }
+        let(:issuable) { issue }
+      end
+
+      it_behaves_like 'empty command' do
         let(:content) { '/duplicate #{issue.to_reference}' }
         let(:issuable) { issue }
       end
diff --git a/yarn.lock b/yarn.lock
index 7a417428ce2..65d78173a5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -270,10 +270,14 @@ acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
+acorn@^5.0.0, acorn@^5.3.0:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
 
+acorn@^5.5.0:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"
+
 addressparser@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/addressparser/-/addressparser-1.0.1.tgz#47afbe1a2a9262191db6838e4fd1d39b40821746"
@@ -2903,12 +2907,11 @@ eslint-plugin-promise@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz#65ebf27a845e3c1e9d6f6a5622ddd3801694b621"
 
-eslint-plugin-vue@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.0.1.tgz#afda92cfd7e7363b1fbdb1a772dd63359a9ce96a"
+eslint-plugin-vue@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.5.0.tgz#09d6597f4849e31a3846c2c395fccf17685b69c3"
   dependencies:
-    require-all "^2.2.0"
-    vue-eslint-parser "^2.0.1"
+    vue-eslint-parser "^2.0.3"
 
 eslint-restricted-globals@^0.1.1:
   version "0.1.1"
@@ -2987,30 +2990,25 @@ esprima@^4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
 
 esquery@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   dependencies:
     estraverse "^4.0.0"
 
 esrecurse@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
   dependencies:
-    estraverse "~4.1.0"
-    object-assign "^4.0.1"
+    estraverse "^4.1.0"
 
 estraverse@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
 
-estraverse@^4.0.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
-estraverse@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
-
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -6774,10 +6772,6 @@ requestretry@^1.2.2:
     request "^2.74.0"
     when "^3.7.7"
 
-require-all@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/require-all/-/require-all-2.2.0.tgz#b4420c233ac0282d0ff49b277fb880a8b5de0894"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8046,7 +8040,7 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-eslint-parser@^2.0.1:
+vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
   dependencies: