Merge branch 'master' into 54282-tooltip-stuck

* master: (24 commits)
  Adds a PHILOSOPHY.md
  Externalize strings from `/app/views/abuse_reports`
  Fix Issuable container element selector for shortcuts handling
  Enable Rubocop on lib/gitlab
  Add user docs for Pages access control
  Added information about syntax highlighting in Web IDE. Fixes gitlab-org/gitlab-ce#53571
  Align issue status label and confidential icon
  Externalize strings from `/app/views/repository_check_mailer`
  Remove instances of `@extend .monospace`
  Resolve "The reply shortcut can add any text of the page to the "comment" text area"
  Upgrade escape_utils to 1.2.1
  Add dedicated runner tags to assets job
  Upgrade gitlab eslint config to latest
  Fix broken karma specs
  Disable conflicting eslint rules
  Prettify all the things
  Upgrade prettier to 1.15.2
  Added a test for open merge request files
  Update CHANGELOG.md for 11.4.7
  Open first 10 merge request files in IDE
  ...

.eslintrc.yml

@@ -29,8 +29,6 @@ rules:
   import/no-useless-path-segments: off
   lines-between-class-members: off
   # Disabled for now, to make the plugin-vue 4.5 -> 5.0 update smoother
-  vue/html-closing-bracket-newline: off
-  vue/html-closing-bracket-spacing: off
   vue/no-confusing-v-for-v-if: error
   vue/no-unused-components: off
   vue/no-use-v-if-with-v-for: off

.gitlab-ci.yml

@@ -620,7 +620,8 @@ gitlab:assets:compile:
       - webpack-report/
       - public/assets/
   tags:
-    - docker
+    - gitlab-org-delivery
+    - high-cpu
 
 karma:
   <<: *dedicated-no-docs-pull-cache-job

.rubocop.yml

@@ -50,7 +50,6 @@ Style/FrozenStringLiteralComment:
     - 'danger/**/*'
     - 'db/**/*'
     - 'ee/**/*'
-    - 'lib/gitlab/**/*'
     - 'lib/tasks/**/*'
     - 'qa/**/*'
     - 'rubocop/**/*'

CHANGELOG.md

@@ -2,6 +2,10 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 11.4.7 (2018-11-20)
+
+- No changes.
+
 ## 11.4.6 (2018-11-18)
 
 ### Security (1 change)

Gemfile.lock

@@ -182,7 +182,7 @@ GEM
     encryptor (3.0.0)
     equalizer (0.0.11)
     erubis (2.7.0)
-    escape_utils (1.1.1)
+    escape_utils (1.2.1)
     et-orbi (1.0.3)
       tzinfo
     eventmachine (1.2.7)

Gemfile.rails4.lock

@@ -181,7 +181,7 @@ GEM
     encryptor (3.0.0)
     equalizer (0.0.11)
     erubis (2.7.0)
-    escape_utils (1.1.1)
+    escape_utils (1.2.1)
     et-orbi (1.0.3)
       tzinfo
     eventmachine (1.2.7)

PHILOSOPHY.md

+This document is intended to communicate the product philosophy GitLab uses in creating GitLab Community Edition. The principles can be found in the [Product Section of the GitLab Handbook](https://about.gitlab.com/handbook/product/#product-at-gitlab).
\ No newline at end of file

app/assets/javascripts/badges/components/badge.vue

@@ -65,12 +65,7 @@ export default {
 
 <template>
   <div>
-    <a
-      v-show="!isLoading && !hasError"
-      :href="linkUrl"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
+    <a v-show="!isLoading && !hasError" :href="linkUrl" target="_blank" rel="noopener noreferrer">
       <img
         :src="imageUrlWithRetries"
         class="project-badge"
@@ -80,15 +75,9 @@ export default {
       />
     </a>
 
-    <gl-loading-icon
-      v-show="isLoading"
-      :inline="true"
-    />
+    <gl-loading-icon v-show="isLoading" :inline="true" />
 
-    <div
-      v-show="hasError"
-      class="btn-group"
-    >
+    <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
         <icon
           :size="16"
@@ -97,9 +86,7 @@ export default {
           aria-hidden="true"
         />
       </div>
-      <div
-        class="btn btn-default btn-sm disabled"
-      >
+      <div class="btn btn-default btn-sm disabled">
         <span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
       </div>
     </div>
@@ -112,10 +99,7 @@ export default {
       type="button"
       @click="reloadImage"
     >
-      <icon
-        :size="16"
-        name="retry"
-      />
+      <icon :size="16" name="retry" />
     </button>
   </div>
 </template>

app/assets/javascripts/badges/components/badge_form.vue

@@ -155,10 +155,7 @@ export default {
     @submit.prevent.stop="onSubmit"
   >
     <div class="form-group">
-      <label
-        for="badge-link-url"
-        class="label-bold"
-      >{{ s__('Badges|Link') }}</label>
+      <label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
       <p v-html="helpText"></p>
       <input
         id="badge-link-url"
@@ -168,19 +165,12 @@ export default {
         required
         @input="debouncedPreview"
       />
-      <div class="invalid-feedback">
-        {{ s__('Badges|Please fill in a valid URL') }}
-      </div>
-      <span class="form-text text-muted">
-        {{ badgeLinkUrlExample }}
-      </span>
+      <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
+      <span class="form-text text-muted"> {{ badgeLinkUrlExample }} </span>
     </div>
 
     <div class="form-group">
-      <label
-        for="badge-image-url"
-        class="label-bold"
-      >{{ s__('Badges|Badge image URL') }}</label>
+      <label for="badge-image-url" class="label-bold">{{ s__('Badges|Badge image URL') }}</label>
       <p v-html="helpText"></p>
       <input
         id="badge-image-url"
@@ -190,12 +180,8 @@ export default {
         required
         @input="debouncedPreview"
       />
-      <div class="invalid-feedback">
-        {{ s__('Badges|Please fill in a valid URL') }}
-      </div>
-      <span class="form-text text-muted">
-        {{ badgeImageUrlExample }}
-      </span>
+      <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
+      <span class="form-text text-muted"> {{ badgeImageUrlExample }} </span>
     </div>
 
     <div class="form-group">
@@ -206,37 +192,22 @@ export default {
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
-      <p v-show="isRendering">
-        <gl-loading-icon
-          :inline="true"
-        />
+      <p v-show="isRendering"><gl-loading-icon :inline="true" /></p>
+      <p v-show="!renderedBadge && !isRendering" class="disabled-content">
+        {{ s__('Badges|No image to preview') }}
       </p>
-      <p
-        v-show="!renderedBadge && !isRendering"
-        class="disabled-content"
-      >{{ s__('Badges|No image to preview') }}</p>
     </div>
 
-    <div
-      v-if="isEditing"
-      class="row-content-block"
-    >
+    <div v-if="isEditing" class="row-content-block">
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Save changes')"
         type="submit"
         container-class="btn btn-success"
       />
-      <button
-        class="btn btn-cancel"
-        type="button"
-        @click="onCancel"
-      >{{ __('Cancel') }}</button>
+      <button class="btn btn-cancel" type="button" @click="onCancel">{{ __('Cancel') }}</button>
     </div>
-    <div
-      v-else
-      class="form-group"
-    >
+    <div v-else class="form-group">
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Add badge')"

app/assets/javascripts/badges/components/badge_list.vue

@@ -26,32 +26,15 @@ export default {
   <div class="card">
     <div class="card-header">
       {{ s__('Badges|Your badges') }}
-      <span
-        v-show="!isLoading"
-        class="badge badge-pill"
-      >{{ badges.length }}</span>
+      <span v-show="!isLoading" class="badge badge-pill">{{ badges.length }}</span>
     </div>
-    <gl-loading-icon
-      v-show="isLoading"
-      :size="2"
-      class="card-body"
-    />
-    <div
-      v-if="hasNoBadges"
-      class="card-body"
-    >
+    <gl-loading-icon v-show="isLoading" :size="2" class="card-body" />
+    <div v-if="hasNoBadges" class="card-body">
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
-    <div
-      v-else
-      class="card-body"
-    >
-      <badge-list-row
-        v-for="badge in badges"
-        :key="badge.id"
-        :badge="badge"
-      />
+    <div v-else class="card-body">
+      <badge-list-row v-for="badge in badges" :key="badge.id" :badge="badge" />
     </div>
   </div>
 </template>

app/assets/javascripts/badges/components/badge_list_row.vue

@@ -50,20 +50,14 @@ export default {
       <span class="badge badge-pill">{{ badgeKindText }}</span>
     </div>
     <div class="table-section section-15 table-button-footer">
-      <div
-        v-if="canEditBadge"
-        class="table-action-buttons">
+      <div v-if="canEditBadge" class="table-action-buttons">
         <button
           :disabled="badge.isDeleting"
           class="btn btn-default append-right-8"
           type="button"
-          @click="editBadge(badge)"
+          @click="editBadge(badge);"
         >
-          <icon
-            :size="16"
-            :aria-label="__('Edit')"
-            name="pencil"
-          />
+          <icon :size="16" :aria-label="__('Edit')" name="pencil" />
         </button>
         <button
           :disabled="badge.isDeleting"
@@ -71,18 +65,11 @@ export default {
           type="button"
           data-toggle="modal"
           data-target="#delete-badge-modal"
-          @click="updateBadgeInModal(badge)"
+          @click="updateBadgeInModal(badge);"
         >
-          <icon
-            :size="16"
-            :aria-label="__('Delete')"
-            name="remove"
-          />
+          <icon :size="16" :aria-label="__('Delete')" name="remove" />
         </button>
-        <gl-loading-icon
-          v-show="badge.isDeleting"
-          :inline="true"
-        />
+        <gl-loading-icon v-show="badge.isDeleting" :inline="true" />
       </div>
     </div>
   </div>

app/assets/javascripts/badges/components/badge_settings.vue

@@ -46,7 +46,8 @@ export default {
       :header-title-text="s__('Badges|Delete badge?')"
       :footer-primary-button-text="s__('Badges|Delete badge')"
       footer-primary-button-variant="danger"
-      @submit="onSubmitModal">
+      @submit="onSubmitModal"
+    >
       <div class="well">
         <badge
           :image-url="badgeInModal ? badgeInModal.renderedImageUrl : ''"
@@ -56,15 +57,9 @@ export default {
       <p v-html="deleteModalText"></p>
     </gl-modal>
 
-    <badge-form
-      v-show="isEditing"
-      :is-editing="true"
-    />
+    <badge-form v-show="isEditing" :is-editing="true" />
 
-    <badge-form
-      v-show="!isEditing"
-      :is-editing="false"
-    />
+    <badge-form v-show="!isEditing" :is-editing="false" />
     <badge-list v-show="!isEditing" />
   </div>
 </template>

app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import Sidebar from '../../right_sidebar';
 import Shortcuts from './shortcuts';
 import { CopyAsGFM } from '../markdown/copy_as_gfm';
+import { getSelectedFragment } from '~/lib/utils/common_utils';
 
 export default class ShortcutsIssuable extends Shortcuts {
   constructor(isMergeRequest) {
@@ -24,17 +25,43 @@ export default class ShortcutsIssuable extends Shortcuts {
 
   static replyWithSelectedText() {
     const $replyField = $('.js-main-target-form .js-vue-comment-form');
-    const documentFragment = window.gl.utils.getSelectedFragment();
 
-    if (!$replyField.length) {
+    if (!$replyField.length || $replyField.is(':hidden') /* Other tab selected in MR */) {
       return false;
     }
 
+    const documentFragment = getSelectedFragment(document.querySelector('#content-body'));
+
     if (!documentFragment) {
       $replyField.focus();
       return false;
     }
 
+    // Sanity check: Make sure the selected text comes from a discussion : it can either contain a message...
+    let foundMessage = !!documentFragment.querySelector('.md, .wiki');
+
+    // ... Or come from a message
+    if (!foundMessage) {
+      if (documentFragment.originalNodes) {
+        documentFragment.originalNodes.forEach(e => {
+          let node = e;
+          do {
+            // Text nodes don't define the `matches` method
+            if (node.matches && node.matches('.md, .wiki')) {
+              foundMessage = true;
+            }
+            node = node.parentNode;
+          } while (node && !foundMessage);
+        });
+      }
+
+      // If there is no message, just select the reply field
+      if (!foundMessage) {
+        $replyField.focus();
+        return false;
+      }
+    }
+
     const el = CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
     const selected = CopyAsGFM.nodeToGFM(el);
 

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

@@ -23,10 +23,12 @@ export default class BlobViewer {
     if (!viewer || !viewer.dataset.richType) return;
 
     const initViewer = promise =>
-      promise.then(module => module.default(viewer)).catch(error => {
-        Flash('Error loading file viewer.');
-        throw error;
-      });
+      promise
+        .then(module => module.default(viewer))
+        .catch(error => {
+          Flash('Error loading file viewer.');
+          throw error;
+        });
 
     switch (viewer.dataset.richType) {
       case 'balsamiq':

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

@@ -61,35 +61,25 @@ export default {
 
 <template>
   <div class="board-blank-state">
-    <p>
-      Add the following default lists to your Issue Board with one click:
-    </p>
+    <p>Add the following default lists to your Issue Board with one click:</p>
     <ul class="board-blank-state-list">
-      <li
-        v-for="(label, index) in predefinedLabels"
-        :key="index"
-      >
-        <span
-          :style="{ backgroundColor: label.color }"
-          class="label-color">
-        </span>
+      <li v-for="(label, index) in predefinedLabels" :key="index">
+        <span :style="{ backgroundColor: label.color }" class="label-color"> </span>
         {{ label.title }}
       </li>
     </ul>
     <p>
-      Starting out with the default set of lists will get you
-      right on the way to making the most of your board.
+      Starting out with the default set of lists will get you right on the way to making the most of
+      your board.
     </p>
     <button
       class="btn btn-success btn-inverted btn-block"
       type="button"
-      @click.stop="addDefaultLists">
+      @click.stop="addDefaultLists"
+    >
       Add default lists
     </button>
-    <button
-      class="btn btn-default btn-block"
-      type="button"
-      @click.stop="clearBlankState">
+    <button class="btn btn-default btn-block" type="button" @click.stop="clearBlankState">
       Nevermind, I'll use my own
     </button>
   </div>

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

@@ -79,14 +79,15 @@ export default {
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
-      'is-active': issueDetailVisible
+      'is-active': issueDetailVisible,
     }"
     :index="index"
     :data-issue-id="issue.id"
     class="board-card"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event)">
+    @mouseup="showIssue($event);"
+  >
     <issue-card-inner
       :list="list"
       :issue="issue"

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

@@ -222,23 +222,22 @@ export default {
 
 <template>
   <div class="board-list-component">
-    <div
-      v-if="loading"
-      class="board-list-loading text-center"
-      aria-label="Loading issues">
+    <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
       <gl-loading-icon />
     </div>
     <board-new-issue
       v-if="list.type !== 'closed' && showIssueForm"
       :group-id="groupId"
-      :list="list"/>
+      :list="list"
+    />
     <ul
       v-show="!loading"
       ref="list"
       :data-board="list.id"
       :data-board-type="list.type"
       :class="{ 'is-smaller': showIssueForm }"
-      class="board-list js-board-list">
+      class="board-list js-board-list"
+    >
       <board-card
         v-for="(issue, index) in issues"
         ref="issue"
@@ -249,25 +248,12 @@ export default {
         :issue-link-base="issueLinkBase"
         :group-id="groupId"
         :root-path="rootPath"
-        :disabled="disabled" />
-      <li
-        v-if="showCount"
-        class="board-list-count text-center"
-        data-issue-id="-1">
-        <gl-loading-icon
-          v-show="list.loadingMore"
-          label="Loading more issues"
-        />
-        <span
-          v-if="list.issues.length === list.issuesSize"
-        >
-          Showing all issues
-        </span>
-        <span
-          v-else
-        >
-          Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
-        </span>
+        :disabled="disabled"
+      />
+      <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
+        <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
+        <span v-if="list.issues.length === list.issuesSize"> Showing all issues </span>
+        <span v-else> Showing {{ list.issues.length }} of {{ list.issuesSize }} issues </span>
       </li>
     </ul>
   </div>

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

@@ -96,21 +96,11 @@ export default {
 <template>
   <div class="board-new-issue-form">
     <div class="board-card">
-      <form @submit="submit($event)">
-        <div
-          v-if="error"
-          class="flash-container"
-        >
-          <div class="flash-alert">
-            An error occurred. Please try again.
-          </div>
+      <form @submit="submit($event);">
+        <div v-if="error" class="flash-container">
+          <div class="flash-alert">An error occurred. Please try again.</div>
         </div>
-        <label
-          :for="list.id + '-title'"
-          class="label-bold"
-        >
-          Title
-        </label>
+        <label :for="list.id + '-title'" class="label-bold"> Title </label>
         <input
           :id="list.id + '-title'"
           ref="input"
@@ -120,10 +110,7 @@ export default {
           name="issue_title"
           autocomplete="off"
         />
-        <project-select
-          v-if="groupId"
-          :group-id="groupId"
-        />
+        <project-select v-if="groupId" :group-id="groupId" />
         <div class="clearfix prepend-top-10">
           <gl-button
             ref="submit-button"
@@ -134,12 +121,7 @@ export default {
           >
             Submit issue
           </gl-button>
-          <gl-button
-            class="float-right"
-            type="button"
-            variant="default"
-            @click="cancel"
-          >
+          <gl-button class="float-right" type="button" variant="default" @click="cancel">
             Cancel
           </gl-button>
         </div>

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

@@ -169,17 +169,12 @@ export default {
           :title="__('Confidential')"
           class="confidential-icon append-right-4"
           :aria-label="__('Confidential')"
-        /><a
-          :href="issue.path"
-          :title="issue.title"
-          class="js-no-trigger"
-          @mousemove.stop>{{ issue.title }}</a>
+        /><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
+          issue.title
+        }}</a>
       </h4>
     </div>
-    <div
-      v-if="showLabelFooter"
-      class="board-card-labels prepend-top-4 d-flex flex-wrap"
-    >
+    <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
       <button
         v-for="label in issue.labels"
         v-if="showLabel(label)"
@@ -189,13 +184,15 @@ export default {
         :title="label.description"
         class="badge color-label append-right-4 prepend-top-4"
         type="button"
-        @click="filterByLabel(label)"
+        @click="filterByLabel(label);"
       >
         {{ label.title }}
       </button>
     </div>
     <div class="board-card-footer d-flex justify-content-between align-items-end">
-      <div class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container">
+      <div
+        class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"
+      >
         <span
           v-if="issue.referencePath"
           class="board-card-number d-flex append-right-8 prepend-top-8"
@@ -205,13 +202,11 @@ export default {
             :title="issueReferencePath"
             placement="bottom"
             class="board-issue-path block-truncated bold"
-          >{{ issueReferencePath }}</tooltip-on-truncate>#{{ issue.iid }}
+            >{{ issueReferencePath }}</tooltip-on-truncate
+          >#{{ issue.iid }}
         </span>
         <span class="board-info-items prepend-top-8 d-inline-block">
-          <issue-due-date
-            v-if="issue.dueDate"
-            :date="issue.dueDate"
-          /><issue-time-estimate
+          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate
             v-if="issue.timeEstimate"
             :estimate="issue.timeEstimate"
           />
@@ -230,8 +225,7 @@ export default {
           tooltip-placement="bottom"
         >
           <span class="js-assignee-tooltip">
-            <span class="bold d-block">Assignee</span>
-            {{ assignee.name }}
+            <span class="bold d-block">Assignee</span> {{ assignee.name }}
             <span class="text-white-50">@{{ assignee.username }}</span>
           </span>
         </user-avatar-link>

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

@@ -66,25 +66,17 @@ export default {
 
 <template>
   <span>
-    <span
-      ref="issueDueDate"
-      class="board-card-info card-number"
-    >
+    <span ref="issueDueDate" class="board-card-info card-number">
       <icon
-        :class="{'text-danger': isPastDue, 'board-card-info-icon': true}"
+        :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }"
         name="calendar"
-      /><time
-        :class="{'text-danger': isPastDue}"
-        datetime="date"
-        class="board-card-info-text">{{ body }}</time>
+      /><time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
+        body
+      }}</time>
     </span>
-    <gl-tooltip
-      :target="() => $refs.issueDueDate"
-      placement="bottom"
-    >
-      <span class="bold">{{ __('Due date') }}</span>
-      <br />
-      <span :class="{'text-danger-muted': isPastDue}">{{ title }}</span>
+    <gl-tooltip :target="() => $refs.issueDueDate" placement="bottom">
+      <span class="bold">{{ __('Due date') }}</span> <br />
+      <span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span>
     </gl-tooltip>
   </span>
 </template>

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

@@ -27,22 +27,18 @@ export default {
 
 <template>
   <span>
-    <span
-      ref="issueTimeEstimate"
-      class="board-card-info card-number"
-    >
-      <icon
-        name="hourglass"
-        css-classes="board-card-info-icon"
-      /><time class="board-card-info-text">{{ timeEstimate }}</time>
+    <span ref="issueTimeEstimate" class="board-card-info card-number">
+      <icon name="hourglass" css-classes="board-card-info-icon" /><time
+        class="board-card-info-text"
+        >{{ timeEstimate }}</time
+      >
     </span>
     <gl-tooltip
       :target="() => $refs.issueTimeEstimate"
       placement="bottom"
       class="js-issue-time-estimate"
     >
-      <span class="bold d-block">{{ __('Time estimate') }}</span>
-      {{ title }}
+      <span class="bold d-block">{{ __('Time estimate') }}</span> {{ title }}
     </gl-tooltip>
   </span>
 </template>

app/assets/javascripts/boards/components/modal/empty_state.vue

@@ -45,24 +45,20 @@ export default {
   <section class="empty-state">
     <div class="row">
       <div class="col-12 col-md-6 order-md-last">
-        <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
+        <aside class="svg-content"><img :src="emptyStateSvg" /></aside>
       </div>
       <div class="col-12 col-md-6 order-md-first">
         <div class="text-content">
           <h4>{{ contents.title }}</h4>
           <p v-html="contents.content"></p>
-          <a
-            v-if="activeTab === 'all'"
-            :href="newIssuePath"
-            class="btn btn-success btn-inverted"
-          >
+          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">
             New issue
           </a>
           <button
             v-if="activeTab === 'selected'"
             class="btn btn-default"
             type="button"
-            @click="changeTab('all')"
+            @click="changeTab('all');"
           >
             Open issues
           </button>

app/assets/javascripts/boards/components/modal/footer.vue

@@ -63,28 +63,15 @@ export default {
 };
 </script>
 <template>
-  <footer
-    class="form-actions add-issues-footer"
-  >
+  <footer class="form-actions add-issues-footer">
     <div class="float-left">
-      <button
-        :disabled="submitDisabled"
-        class="btn btn-success"
-        type="button"
-        @click="addIssues"
-      >
+      <button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues">
         {{ submitText }}
       </button>
-      <span class="inline add-issues-footer-to-list">
-        to list
-      </span>
-      <lists-dropdown/>
+      <span class="inline add-issues-footer-to-list"> to list </span>
+      <lists-dropdown />
     </div>
-    <button
-      class="btn btn-default float-right"
-      type="button"
-      @click="toggleModal(false)"
-    >
+    <button class="btn btn-default float-right" type="button" @click="toggleModal(false);">
       Cancel
     </button>
   </footer>

app/assets/javascripts/boards/components/modal/header.vue

@@ -58,16 +58,14 @@ export default {
           class="close"
           data-dismiss="modal"
           aria-label="Close"
-          @click="toggleModal(false)"
+          @click="toggleModal(false);"
         >
           <span aria-hidden="true">×</span>
         </button>
       </h2>
     </header>
-    <modal-tabs v-if="!loading && issuesCount > 0"/>
-    <div
-      v-if="showSearch"
-      class="add-issues-search append-bottom-10">
+    <modal-tabs v-if="!loading && issuesCount > 0" />
+    <div v-if="showSearch" class="add-issues-search append-bottom-10">
       <modal-filters :store="filter" />
       <button
         ref="selectAllBtn"

app/assets/javascripts/boards/components/modal/index.vue

@@ -143,9 +143,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    v-if="showAddIssuesModal"
-    class="add-issues-modal">
+  <div v-if="showAddIssuesModal" class="add-issues-modal">
     <div class="add-issues-container">
       <modal-header
         :project-id="projectId"
@@ -163,15 +161,10 @@ export default {
         :new-issue-path="newIssuePath"
         :empty-state-svg="emptyStateSvg"
       />
-      <section
-        v-if="loading || filterLoading"
-        class="add-issues-list text-center"
-      >
-        <div class="add-issues-list-loading">
-          <gl-loading-icon />
-        </div>
+      <section v-if="loading || filterLoading" class="add-issues-list text-center">
+        <div class="add-issues-list-loading"><gl-loading-icon /></div>
       </section>
-      <modal-footer/>
+      <modal-footer />
     </div>
   </div>
 </template>

app/assets/javascripts/boards/components/modal/list.vue

@@ -117,38 +117,22 @@ export default {
 };
 </script>
 <template>
-  <section
-    ref="list"
-    class="add-issues-list add-issues-list-columns">
+  <section ref="list" class="add-issues-list add-issues-list-columns">
     <div
       v-if="issuesCount > 0 && issues.length === 0"
-      class="empty-state add-issues-empty-state-filter text-center">
-      <div class="svg-content">
-        <img :src="emptyStateSvg" />
-      </div>
-      <div class="text-content">
-        <h4>
-          There are no issues to show.
-        </h4>
-      </div>
+      class="empty-state add-issues-empty-state-filter text-center"
+    >
+      <div class="svg-content"><img :src="emptyStateSvg" /></div>
+      <div class="text-content"><h4>There are no issues to show.</h4></div>
     </div>
-    <div
-      v-for="(group, index) in groupedIssues"
-      :key="index"
-      class="add-issues-list-column">
-      <div
-        v-for="issue in group"
-        v-if="showIssue(issue)"
-        :key="issue.id"
-        class="board-card-parent">
+    <div v-for="(group, index) in groupedIssues" :key="index" class="add-issues-list-column">
+      <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
         <div
           :class="{ 'is-active': issue.selected }"
           class="board-card"
-          @click="toggleIssue($event, issue)">
-          <issue-card-inner
-            :issue="issue"
-            :issue-link-base="issueLinkBase"
-            :root-path="rootPath"/>
+          @click="toggleIssue($event, issue);"
+        >
+          <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />
           <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"

app/assets/javascripts/boards/components/modal/lists_dropdown.vue

@@ -27,35 +27,20 @@ export default {
 </script>
 <template>
   <div class="dropdown inline">
-    <button
-      class="dropdown-menu-toggle"
-      type="button"
-      data-toggle="dropdown"
-      aria-expanded="false">
-      <span
-        :style="{ backgroundColor: selected.label.color }"
-        class="dropdown-label-box">
-      </span>
-      {{ selected.title }}
-      <icon
-        name="chevron-down"
-      />
+    <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+      <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
+      {{ selected.title }} <icon name="chevron-down" />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>
-        <li
-          v-for="(list, i) in state.lists"
-          v-if="list.type == 'label'"
-          :key="i">
+        <li v-for="(list, i) in state.lists" v-if="list.type == 'label'" :key="i">
           <gl-link
             :class="{ 'is-active': list.id == selected.id }"
             href="#"
             role="button"
-            @click.prevent="modal.selectedList = list">
-            <span
-              :style="{ backgroundColor: list.label.color }"
-              class="dropdown-label-box">
-            </span>
+            @click.prevent="modal.selectedList = list;"
+          >
+            <span :style="{ backgroundColor: list.label.color }" class="dropdown-label-box"> </span>
             {{ list.title }}
           </gl-link>
         </li>

app/assets/javascripts/boards/components/modal/tabs.vue

@@ -20,28 +20,14 @@ export default {
 <template>
   <div class="top-area prepend-top-10 append-bottom-10">
     <ul class="nav-links issues-state-filters">
-      <li :class="{ 'active': activeTab == 'all' }">
-        <a
-          href="#"
-          role="button"
-          @click.prevent="changeTab('all')"
-        >
-          Open issues
-          <span class="badge badge-pill">
-            {{ issuesCount }}
-          </span>
+      <li :class="{ active: activeTab == 'all' }">
+        <a href="#" role="button" @click.prevent="changeTab('all');">
+          Open issues <span class="badge badge-pill"> {{ issuesCount }} </span>
         </a>
       </li>
-      <li :class="{ 'active': activeTab == 'selected' }">
-        <a
-          href="#"
-          role="button"
-          @click.prevent="changeTab('selected')"
-        >
-          Selected issues
-          <span class="badge badge-pill">
-            {{ selectedCount }}
-          </span>
+      <li :class="{ active: activeTab == 'selected' }">
+        <a href="#" role="button" @click.prevent="changeTab('selected');">
+          Selected issues <span class="badge badge-pill"> {{ selectedCount }} </span>
         </a>
       </li>
     </ul>

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

@@ -72,23 +72,15 @@ export default {
 
 <template>
   <div>
-    <label class="label-bold prepend-top-10">
-      Project
-    </label>
-    <div
-      ref="projectsDropdown"
-      class="dropdown"
-    >
+    <label class="label-bold prepend-top-10"> Project </label>
+    <div ref="projectsDropdown" class="dropdown">
       <button
         class="dropdown-menu-toggle wide"
         type="button"
         data-toggle="dropdown"
         aria-expanded="false"
       >
-        {{ selectedProjectName }}
-        <icon
-          name="chevron-down"
-        />
+        {{ selectedProjectName }} <icon name="chevron-down" />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -106,21 +98,11 @@ export default {
           </button>
         </div>
         <div class="dropdown-input">
-          <input
-            class="dropdown-input-field"
-            type="search"
-            placeholder="Search projects"
-          />
-          <icon
-            name="search"
-            class="dropdown-input-search"
-            data-hidden="true"
-          />
+          <input class="dropdown-input-field" type="search" placeholder="Search projects" />
+          <icon name="search" class="dropdown-input-search" data-hidden="true" />
         </div>
         <div class="dropdown-content"></div>
-        <div class="dropdown-loading">
-          <gl-loading-icon />
-        </div>
+        <div class="dropdown-loading"><gl-loading-icon /></div>
       </div>
     </div>
   </div>

app/assets/javascripts/boards/components/sidebar/remove_issue.vue

@@ -74,14 +74,8 @@ export default Vue.extend({
 });
 </script>
 <template>
-  <div
-    class="block list"
-  >
-    <button
-      class="btn btn-default btn-block"
-      type="button"
-      @click="removeIssue"
-    >
+  <div class="block list">
+    <button class="btn btn-default btn-block" type="button" @click="removeIssue">
       Remove from board
     </button>
   </div>

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

@@ -164,35 +164,21 @@ export default {
     :class="[
       rowJsClass,
       isInstalled && 'cluster-application-installed',
-      disabled && 'cluster-application-disabled'
+      disabled && 'cluster-application-disabled',
     ]"
     class="cluster-application-row gl-responsive-table-row gl-responsive-table-row-col-span"
   >
-    <div
-      class="gl-responsive-table-row-layout"
-      role="row"
-    >
-      <div
-        class="table-section append-right-8 section-align-top"
-        role="gridcell"
-      >
+    <div class="gl-responsive-table-row-layout" role="row">
+      <div class="table-section append-right-8 section-align-top" role="gridcell">
         <img
           v-if="hasLogo"
           :src="logoUrl"
           :alt="`${title} logo`"
           class="cluster-application-logo avatar s40"
         />
-        <identicon
-          v-else
-          :entity-id="identiconId"
-          :entity-name="title"
-          size-class="s40"
-        />
+        <identicon v-else :entity-id="identiconId" :entity-name="title" size-class="s40" />
       </div>
-      <div
-        class="table-section cluster-application-description section-wrap"
-        role="gridcell"
-      >
+      <div class="table-section cluster-application-description section-wrap" role="gridcell">
         <strong>
           <a
             v-if="titleLink"
@@ -203,12 +189,7 @@ export default {
           >
             {{ title }}
           </a>
-          <span
-            v-else
-            class="js-cluster-application-title"
-          >
-            {{ title }}
-          </span>
+          <span v-else class="js-cluster-application-title"> {{ title }} </span>
         </strong>
         <slot name="description"></slot>
         <div
@@ -219,16 +200,10 @@ export default {
             {{ generalErrorDescription }}
           </p>
           <ul v-if="statusReason || requestReason">
-            <li
-              v-if="statusReason"
-              class="js-cluster-application-status-error-message"
-            >
+            <li v-if="statusReason" class="js-cluster-application-status-error-message">
               {{ statusReason }}
             </li>
-            <li
-              v-if="requestReason"
-              class="js-cluster-application-request-error-message"
-            >
+            <li v-if="requestReason" class="js-cluster-application-request-error-message">
               {{ requestReason }}
             </li>
           </ul>
@@ -239,15 +214,8 @@ export default {
         class="table-section table-button-footer section-align-top"
         role="gridcell"
       >
-        <div
-          v-if="showManageButton"
-          class="btn-group table-action-buttons"
-        >
-          <a
-            :href="manageLink"
-            :class="{ disabled: disabled }"
-            class="btn"
-          >
+        <div v-if="showManageButton" class="btn-group table-action-buttons">
+          <a :href="manageLink" :class="{ disabled: disabled }" class="btn">
             {{ manageButtonLabel }}
           </a>
         </div>

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

@@ -158,15 +158,13 @@ export default {
 
 <template>
   <section id="cluster-applications">
-    <h4>
-      {{ s__('ClusterIntegration|Applications') }}
-    </h4>
+    <h4>{{ s__('ClusterIntegration|Applications') }}</h4>
     <p class="append-bottom-0">
-      {{ s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
-        Helm Tiller is required to install any of the following applications.`) }}
-      <a :href="helpPath">
-        {{ __('More information') }}
-      </a>
+      {{
+        s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
+        Helm Tiller is required to install any of the following applications.`)
+      }}
+      <a :href="helpPath"> {{ __('More information') }} </a>
     </p>
 
     <div class="cluster-application-list prepend-top-10">
@@ -182,23 +180,20 @@ export default {
         title-link="https://docs.helm.sh/"
       >
         <div slot="description">
-          {{ s__(`ClusterIntegration|Helm streamlines installing
+          {{
+            s__(`ClusterIntegration|Helm streamlines installing
             and managing Kubernetes applications.
             Tiller runs inside of your Kubernetes Cluster,
-            and manages releases of your charts.`) }}
+            and manages releases of your charts.`)
+          }}
         </div>
       </application-row>
-      <div
-        v-show="!helmInstalled"
-        class="cluster-application-warning"
-      >
-        <div
-          class="svg-container"
-          v-html="helmInstallIllustration"
-        >
-        </div>
-        {{ s__(`ClusterIntegration|You must first install Helm Tiller before
-          installing the applications below`) }}
+      <div v-show="!helmInstalled" class="cluster-application-warning">
+        <div class="svg-container" v-html="helmInstallIllustration"></div>
+        {{
+          s__(`ClusterIntegration|You must first install Helm Tiller before
+          installing the applications below`)
+        }}
       </div>
       <application-row
         :id="ingressId"
@@ -213,9 +208,11 @@ export default {
       >
         <div slot="description">
           <p>
-            {{ s__(`ClusterIntegration|Ingress gives you a way to route
+            {{
+              s__(`ClusterIntegration|Ingress gives you a way to route
               requests to services based on the request host or path,
-              centralizing a number of services into a single entrypoint.`) }}
+              centralizing a number of services into a single entrypoint.`)
+            }}
           </p>
 
           <template v-if="ingressInstalled">
@@ -223,10 +220,7 @@ export default {
               <label for="ingress-ip-address">
                 {{ s__('ClusterIntegration|Ingress IP Address') }}
               </label>
-              <div
-                v-if="ingressExternalIp"
-                class="input-group"
-              >
+              <div v-if="ingressExternalIp" class="input-group">
                 <input
                   id="ingress-ip-address"
                   :value="ingressExternalIp"
@@ -242,50 +236,33 @@ export default {
                   />
                 </span>
               </div>
-              <input
-                v-else
-                type="text"
-                class="form-control js-ip-address"
-                readonly
-                value="?"
-              />
+              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
             </div>
 
-            <p
-              v-if="!ingressExternalIp"
-              class="settings-message js-no-ip-message"
-            >
-              {{ s__(`ClusterIntegration|The IP address is in
+            <p v-if="!ingressExternalIp" class="settings-message js-no-ip-message">
+              {{
+                s__(`ClusterIntegration|The IP address is in
               the process of being assigned. Please check your Kubernetes
-              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) }}
+              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+              }}
 
-              <a
-                :href="ingressHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a :href="ingressHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
 
             <p>
-              {{ s__(`ClusterIntegration|Point a wildcard DNS to this
+              {{
+                s__(`ClusterIntegration|Point a wildcard DNS to this
               generated IP address in order to access
-              your application after it has been deployed.`) }}
-              <a
-                :href="ingressDnsHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              your application after it has been deployed.`)
+              }}
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
-
           </template>
-          <div
-            v-html="ingressDescription"
-          >
-          </div>
+          <div v-html="ingressDescription"></div>
         </div>
       </application-row>
       <application-row
@@ -301,11 +278,7 @@ export default {
         :disabled="!helmInstalled"
         title-link="https://prometheus.io/docs/introduction/overview/"
       >
-        <div
-          slot="description"
-          v-html="prometheusDescription"
-        >
-        </div>
+        <div slot="description" v-html="prometheusDescription"></div>
       </application-row>
       <application-row
         v-if="isProjectCluster"
@@ -320,10 +293,12 @@ export default {
         title-link="https://docs.gitlab.com/runner/"
       >
         <div slot="description">
-          {{ s__(`ClusterIntegration|GitLab Runner connects to this
+          {{
+            s__(`ClusterIntegration|GitLab Runner connects to this
             project's repository and executes CI/CD jobs,
             pushing results back and deploying,
-            applications to production.`) }}
+            applications to production.`)
+          }}
         </div>
       </application-row>
       <application-row
@@ -341,11 +316,13 @@ export default {
       >
         <div slot="description">
           <p>
-            {{ s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
+            {{
+              s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
               manages, and proxies multiple instances of the single-user
               Jupyter notebook server. JupyterHub can be used to serve
               notebooks to a class of students, a corporate data science group,
-              or a scientific research group.`) }}
+              or a scientific research group.`)
+            }}
           </p>
 
           <template v-if="ingressExternalIp">
@@ -361,9 +338,7 @@ export default {
                   type="text"
                   class="form-control js-hostname"
                 />
-                <span
-                  class="input-group-btn"
-                >
+                <span class="input-group-btn">
                   <clipboard-button
                     :text="jupyterHostname"
                     :title="s__('ClusterIntegration|Copy Jupyter Hostname to clipboard')"
@@ -373,13 +348,11 @@ export default {
               </div>
             </div>
             <p v-if="ingressInstalled">
-              {{ s__(`ClusterIntegration|Replace this with your own hostname if you want.
-              If you do so, point hostname to Ingress IP Address from above.`) }}
-              <a
-                :href="ingressDnsHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              {{
+                s__(`ClusterIntegration|Replace this with your own hostname if you want.
+              If you do so, point hostname to Ingress IP Address from above.`)
+              }}
+              <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
             </p>
@@ -394,19 +367,21 @@ export default {
         :status-reason="applications.knative.statusReason"
         :request-status="applications.knative.requestStatus"
         :request-reason="applications.knative.requestReason"
-        :install-application-request-params="{ hostname: applications.knative.hostname}"
+        :install-application-request-params="{ hostname: applications.knative.hostname }"
         :disabled="!helmInstalled"
         class="hide-bottom-border rounded-bottom"
         title-link="https://github.com/knative/docs"
       >
         <div slot="description">
           <p>
-            {{ s__(`ClusterIntegration|A Knative build extends Kubernetes
+            {{
+              s__(`ClusterIntegration|A Knative build extends Kubernetes
               and utilizes existing Kubernetes primitives to provide you with
               the ability to run on-cluster container builds from source.
               For example, you can write a build that uses Kubernetes-native
               resources to obtain your source code from a repository,
-              build it into container a image, and then run that image.`) }}
+              build it into container a image, and then run that image.`)
+            }}
           </p>
 
           <template v-if="knativeInstalled">

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

@@ -82,7 +82,6 @@ export default {
 </script>
 <template>
   <div class="content-list pipelines">
-
     <gl-loading-icon
       v-if="isLoading"
       :label="s__('Pipelines|Loading Pipelines')"
@@ -93,14 +92,13 @@ export default {
     <svg-blank-state
       v-else-if="shouldRenderErrorState"
       :svg-path="errorStateSvgPath"
-      :message="s__(`Pipelines|There was an error fetching the pipelines.
-      Try again in a few moments or contact your support team.`)"
+      :message="
+        s__(`Pipelines|There was an error fetching the pipelines.
+      Try again in a few moments or contact your support team.`)
+      "
     />
 
-    <div
-      v-else-if="shouldRenderTable"
-      class="table-holder"
-    >
+    <div v-else-if="shouldRenderTable" class="table-holder">
       <pipelines-table-component
         :pipelines="state.pipelines"
         :update-graph-dropdown="updateGraphDropdown"

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

@@ -32,30 +32,19 @@ export default {
       type="button"
       @click="dismissOverviewDialog"
     >
-      <icon
-        name="close"
-      />
+      <icon name="close" />
     </button>
-    <div
-      class="svg-container"
-      v-html="iconCycleAnalyticsSplash"
-    >
-    </div>
+    <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
     <div class="inner-content">
-      <h4>
-        {{ __('Introducing Cycle Analytics') }}
-      </h4>
+      <h4>{{ __('Introducing Cycle Analytics') }}</h4>
       <p>
-        {{ __(`Cycle Analytics gives an overview
-of how much time it takes to go from idea to production in your project.`) }}
+        {{
+          __(`Cycle Analytics gives an overview
+of how much time it takes to go from idea to production in your project.`)
+        }}
       </p>
       <p>
-        <a
-          :href="documentationLink"
-          target="_blank"
-          rel="nofollow"
-          class="btn"
-        >
+        <a :href="documentationLink" target="_blank" rel="nofollow" class="btn">
           {{ __('Read more') }}
         </a>
       </p>

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

@@ -14,17 +14,12 @@ export default {
 };
 </script>
 <template>
-  <span
-    v-if="count === 50"
-    class="events-info float-right"
-  >
+  <span v-if="count === 50" class="events-info float-right">
     <i
       v-tooltip
-      :title="n__(
-        'Limited to showing %d event at most',
-        'Limited to showing %d events at most',
-        50
-      )"
+      :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"

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

@@ -28,45 +28,26 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(mergeRequest, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
           <h5 class="item-title merge-merquest-title">
-            <a :href="mergeRequest.url">
-              {{ mergeRequest.title }}
-            </a>
+            <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
           </h5>
-          <a
-            :href="mergeRequest.url"
-            class="issue-link">
-            !{{ mergeRequest.iid }}
-          </a>
-          &middot;
+          <a :href="mergeRequest.url" class="issue-link"> !{{ mergeRequest.iid }} </a> &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a
-              :href="mergeRequest.url"
-              class="issue-date">
-              {{ mergeRequest.createdAt }}
-            </a>
+            <a :href="mergeRequest.url" class="issue-date"> {{ mergeRequest.createdAt }} </a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a
-              :href="mergeRequest.author.webUrl"
-              class="issue-author-link">
+            <a :href="mergeRequest.author.webUrl" class="issue-author-link">
               {{ mergeRequest.author.name }}
             </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="mergeRequest.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
       </li>
     </ul>
   </div>

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

@@ -28,47 +28,24 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(issue, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(issue, i) in items" :key="i" class="stage-event-item">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="issue.author.avatarUrl"/>
+          <user-avatar-image :img-src="issue.author.avatarUrl" />
           <h5 class="item-title issue-title">
-            <a
-              :href="issue.url"
-              class="issue-title"
-            >
-              {{ issue.title }}
-            </a>
+            <a :href="issue.url" class="issue-title"> {{ issue.title }} </a>
           </h5>
-          <a
-            :href="issue.url"
-            class="issue-link"
-          >#{{ issue.iid }}</a>
-          &middot;
+          <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a> &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a
-              :href="issue.url"
-              class="issue-date"
-            >{{ issue.createdAt }}</a>
+            <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a
-              :href="issue.author.webUrl"
-              class="issue-author-link"
-            >
-              {{ issue.author.name }}
-            </a>
+            <a :href="issue.author.webUrl" class="issue-author-link"> {{ issue.author.name }} </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="issue.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="issue.totalTime" /></div>
       </li>
     </ul>
   </div>

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

@@ -34,42 +34,25 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(commit, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(commit, i) in items" :key="i" class="stage-event-item">
         <div class="item-details item-conmmit-component">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="commit.author.avatarUrl" />
           <h5 class="item-title commit-title">
-            <a :href="commit.commitUrl">
-              {{ commit.title }}
-            </a>
+            <a :href="commit.commitUrl"> {{ commit.title }} </a>
           </h5>
           <span>
-            {{ s__('FirstPushedBy|First') }}
-            <span
-              class="commit-icon"
-              v-html="iconCommit"
-            >
-            </span>
-            <a
-              :href="commit.commitUrl"
-              class="commit-hash-link commit-sha"
-            >{{ commit.shortSha }}</a>
+            {{ s__('FirstPushedBy|First') }} <span class="commit-icon" v-html="iconCommit"> </span>
+            <a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{
+              commit.shortSha
+            }}</a>
             {{ s__('FirstPushedBy|pushed by') }}
-            <a
-              :href="commit.author.webUrl"
-              class="commit-author-link"
-            >
+            <a :href="commit.author.webUrl" class="commit-author-link">
               {{ commit.author.name }}
             </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="commit.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="commit.totalTime" /></div>
       </li>
     </ul>
   </div>

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

@@ -30,66 +30,37 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(mergeRequest, i) in items"
-        :key="i"
-        class="stage-event-item"
-      >
+      <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
           <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
           <h5 class="item-title merge-merquest-title">
-            <a :href="mergeRequest.url">
-              {{ mergeRequest.title }}
-            </a>
+            <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
           </h5>
-          <a
-            :href="mergeRequest.url"
-            class="issue-link"
-          >!{{ mergeRequest.iid }}</a>
-          &middot;
+          <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> &middot;
           <span>
             {{ s__('OpenedNDaysAgo|Opened') }}
-            <a
-              :href="mergeRequest.url"
-              class="issue-date"
-            >{{ mergeRequest.createdAt }}</a>
+            <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
           </span>
           <span>
             {{ s__('ByAuthor|by') }}
-            <a
-              :href="mergeRequest.author.webUrl"
-              class="issue-author-link"
-            >{{ mergeRequest.author.name }}</a>
+            <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{
+              mergeRequest.author.name
+            }}</a>
           </span>
           <template v-if="mergeRequest.state === 'closed'">
             <span class="merge-request-state">
-              <i
-                class="fa fa-ban"
-                aria-hidden="true"
-              >
-              </i>
-              {{ mergeRequest.state.toUpperCase() }}
+              <i class="fa fa-ban" aria-hidden="true"> </i> {{ mergeRequest.state.toUpperCase() }}
             </span>
           </template>
           <template v-else>
-            <span
-              v-if="mergeRequest.branch"
-              class="merge-request-branch"
-            >
-              <icon
-                :size="16"
-                name="fork"
-              />
-              <a :href="mergeRequest.branch.url">
-                {{ mergeRequest.branch.name }}
-              </a>
+            <span v-if="mergeRequest.branch" class="merge-request-branch">
+              <icon :size="16" name="fork" />
+              <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a>
             </span>
           </template>
         </div>
-        <div class="item-time">
-          <total-time :time="mergeRequest.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
       </li>
     </ul>
   </div>

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

@@ -36,62 +36,23 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(build, i) in items"
-        :key="i"
-        class="stage-event-item item-build-component"
-      >
+      <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
         <div class="item-details">
           <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="build.author.avatarUrl"/>
+          <user-avatar-image :img-src="build.author.avatarUrl" />
           <h5 class="item-title">
-            <a
-              :href="build.url"
-              class="pipeline-id"
-            >
-              #{{ build.id }}
-            </a>
-            <icon
-              :size="16"
-              name="fork"
-            />
-            <a
-              :href="build.branch.url"
-              class="ref-name"
-            >
-              {{ build.branch.name }}
-            </a>
-            <span
-              class="icon-branch"
-              v-html="iconBranch"
-            >
-            </span>
-            <a
-              :href="build.commitUrl"
-              class="commit-sha"
-            >
-              {{ build.shortSha }}
-            </a>
+            <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
+            <icon :size="16" name="fork" />
+            <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
+            <span class="icon-branch" v-html="iconBranch"> </span>
+            <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
           </h5>
           <span>
-            <a
-              :href="build.url"
-              class="build-date"
-            >
-              {{ build.date }}
-            </a>
-            {{ s__('ByAuthor|by') }}
-            <a
-              :href="build.author.webUrl"
-              class="issue-author-link"
-            >
-              {{ build.author.name }}
-            </a>
+            <a :href="build.url" class="build-date"> {{ build.date }} </a> {{ s__('ByAuthor|by') }}
+            <a :href="build.author.webUrl" class="issue-author-link"> {{ build.author.name }} </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="build.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="build.totalTime" /></div>
       </li>
     </ul>
   </div>

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

@@ -38,63 +38,22 @@ export default {
       <limit-warning :count="items.length" />
     </div>
     <ul class="stage-event-list">
-      <li
-        v-for="(build, i) in items"
-        :key="i"
-        class="stage-event-item item-build-component"
-      >
+      <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
         <div class="item-details">
           <h5 class="item-title">
-            <span
-              class="icon-build-status"
-              v-html="iconBuildStatus"
-            >
-            </span>
-            <a
-              :href="build.url"
-              class="item-build-name"
-            >
-              {{ build.name }}
-            </a>
-            &middot;
-            <a
-              :href="build.url"
-              class="pipeline-id"
-            >
-              #{{ build.id }}
-            </a>
-            <icon
-              :size="16"
-              name="fork"
-            />
-            <a
-              :href="build.branch.url"
-              class="ref-name"
-            >
-              {{ build.branch.name }}
-            </a>
-            <span
-              class="icon-branch"
-              v-html="iconBranch"
-            >
-            </span>
-            <a
-              :href="build.commitUrl"
-              class="commit-sha">
-              {{ build.shortSha }}
-            </a>
+            <span class="icon-build-status" v-html="iconBuildStatus"> </span>
+            <a :href="build.url" class="item-build-name"> {{ build.name }} </a> &middot;
+            <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
+            <icon :size="16" name="fork" />
+            <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
+            <span class="icon-branch" v-html="iconBranch"> </span>
+            <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
           </h5>
           <span>
-            <a
-              :href="build.url"
-              class="issue-date">
-              {{ build.date }}
-            </a>
+            <a :href="build.url" class="issue-date"> {{ build.date }} </a>
           </span>
         </div>
-        <div class="item-time">
-          <total-time :time="build.totalTime" />
-        </div>
+        <div class="item-time"><total-time :time="build.totalTime" /></div>
       </li>
     </ul>
   </div>

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

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

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

@@ -43,11 +43,9 @@ export default {
     :class="[{ disabled: isLoading }, btnCssClass]"
     :disabled="isLoading"
     class="btn"
-    @click="doAction">
+    @click="doAction"
+  >
     <slot></slot>
-    <gl-loading-icon
-      v-if="isLoading"
-      :inline="true"
-    />
+    <gl-loading-icon v-if="isLoading" :inline="true" />
   </button>
 </template>

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

@@ -123,26 +123,10 @@ export default {
     />
     <template v-else-if="hasKeys">
       <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
-        <div class="fade-left">
-          <i
-            class="fa fa-angle-left"
-            aria-hidden="true"
-          >
-          </i>
-        </div>
-        <div class="fade-right">
-          <i
-            class="fa fa-angle-right"
-            aria-hidden="true"
-          >
-          </i>
-        </div>
+        <div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
+        <div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
 
-        <navigation-tabs
-          :tabs="tabs"
-          scope="deployKeys"
-          @onChangeTab="onChangeTab"
-        />
+        <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
       </div>
       <keys-panel
         :project-id="projectId"

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

@@ -112,26 +112,14 @@ export default {
 <template>
   <div class="gl-responsive-table-row deploy-key">
     <div class="table-section section-40">
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ s__('DeployKeys|Deploy key') }}
-      </div>
+      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
       <div class="table-mobile-content">
-        <strong class="title qa-key-title">
-          {{ deployKey.title }}
-        </strong>
-        <div class="fingerprint qa-key-fingerprint">
-          {{ deployKey.fingerprint }}
-        </div>
+        <strong class="title qa-key-title"> {{ deployKey.title }} </strong>
+        <div class="fingerprint qa-key-fingerprint">{{ deployKey.fingerprint }}</div>
       </div>
     </div>
     <div class="table-section section-30 section-wrap">
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ s__('DeployKeys|Project usage') }}
-      </div>
+      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div>
       <div class="table-mobile-content deploy-project-list">
         <template v-if="projects.length > 0">
           <a
@@ -139,10 +127,8 @@ export default {
             :title="projectTooltipTitle(firstProject)"
             class="label deploy-project-label"
           >
-            <span>
-              {{ firstProject.project.full_name }}
-            </span>
-            <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
+            <span> {{ firstProject.project.full_name }} </span>
+            <icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
           </a>
           <a
             v-if="isExpandable"
@@ -162,39 +148,24 @@ export default {
             :title="projectTooltipTitle(deployKeysProject)"
             class="label deploy-project-label"
           >
-            <span>
-              {{ deployKeysProject.project.full_name }}
-            </span>
-            <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'"/>
+            <span> {{ deployKeysProject.project.full_name }} </span>
+            <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
           </a>
         </template>
-        <span
-          v-else
-          class="text-secondary">{{ __('None') }}</span>
+        <span v-else class="text-secondary">{{ __('None') }}</span>
       </div>
     </div>
     <div class="table-section section-15 text-right">
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ __('Created') }}
-      </div>
+      <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
       <div class="table-mobile-content text-secondary key-created-at">
-        <span
-          v-tooltip
-          :title="tooltipTitle(deployKey.created_at)">
-          <icon name="calendar"/>
-          <span>{{ timeFormated(deployKey.created_at) }}</span>
+        <span v-tooltip :title="tooltipTitle(deployKey.created_at)">
+          <icon name="calendar" /> <span>{{ timeFormated(deployKey.created_at) }}</span>
         </span>
       </div>
     </div>
     <div class="table-section section-15 table-button-footer deploy-key-actions">
       <div class="btn-group table-action-buttons">
-        <action-btn
-          v-if="!isEnabled"
-          :deploy-key="deployKey"
-          type="enable"
-        >
+        <action-btn v-if="!isEnabled" :deploy-key="deployKey" type="enable">
           {{ __('Enable') }}
         </action-btn>
         <a
@@ -205,7 +176,7 @@ export default {
           class="btn btn-default text-secondary"
           data-container="body"
         >
-          <icon name="pencil"/>
+          <icon name="pencil" />
         </a>
         <action-btn
           v-if="isRemovable"
@@ -216,7 +187,7 @@ export default {
           type="remove"
           data-container="body"
         >
-          <icon name="remove"/>
+          <icon name="remove" />
         </action-btn>
         <action-btn
           v-else-if="isEnabled"
@@ -227,7 +198,7 @@ export default {
           type="disable"
           data-container="body"
         >
-          <icon name="cancel"/>
+          <icon name="cancel" />
         </action-btn>
       </div>
     </div>

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

@@ -30,24 +30,14 @@ export default {
 <template>
   <div class="deploy-keys-panel table-holder">
     <template v-if="keys.length > 0">
-      <div
-        role="row"
-        class="gl-responsive-table-row table-row-header">
-        <div
-          role="rowheader"
-          class="table-section section-40">
+      <div role="row" class="gl-responsive-table-row table-row-header">
+        <div role="rowheader" class="table-section section-40">
           {{ s__('DeployKeys|Deploy key') }}
         </div>
-        <div
-          role="rowheader"
-          class="table-section section-30">
+        <div role="rowheader" class="table-section section-30">
           {{ s__('DeployKeys|Project usage') }}
         </div>
-        <div
-          role="rowheader"
-          class="table-section section-15 text-right">
-          {{ __('Created') }}
-        </div>
+        <div role="rowheader" class="table-section section-15 text-right">{{ __('Created') }}</div>
       </div>
       <deploy-key
         v-for="deployKey in keys"
@@ -58,10 +48,7 @@ export default {
         :project-id="projectId"
       />
     </template>
-    <div
-      v-else
-      class="settings-message text-center"
-    >
+    <div v-else class="settings-message text-center">
       {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
     </div>
   </div>

app/assets/javascripts/diffs/components/app.vue

@@ -181,18 +181,8 @@ export default {
 
 <template>
   <div v-show="shouldShow">
-    <div
-      v-if="isLoading"
-      class="loading"
-    >
-      <gl-loading-icon />
-    </div>
-    <div
-      v-else
-      id="diffs"
-      :class="{ active: shouldShow }"
-      class="diffs tab-pane"
-    >
+    <div v-if="isLoading" class="loading"><gl-loading-icon /></div>
+    <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
       <compare-versions
         v-if="showCompareVersions"
         :merge-request-diffs="mergeRequestDiffs"
@@ -214,38 +204,21 @@ export default {
         class="mr-version-controls"
       >
         <div class="content-block comments-disabled-notif clearfix">
-          <i class="fa fa-info-circle"></i>
-          {{ notAllCommentsDisplayed }}
+          <i class="fa fa-info-circle"></i> {{ notAllCommentsDisplayed }}
           <div class="pull-right">
-            <a
-              :href="latestVersionPath"
-              class="btn btn-sm"
-            >
-              {{ showLatestVersion }}
-            </a>
+            <a :href="latestVersionPath" class="btn btn-sm"> {{ showLatestVersion }} </a>
           </div>
         </div>
       </div>
 
-      <commit-widget
-        v-if="commit"
-        :commit="commit"
-      />
+      <commit-widget v-if="commit" :commit="commit" />
 
       <div
         :data-can-create-note="getNoteableData.current_user.can_create_note"
         class="files d-flex prepend-top-default"
       >
-        <div
-          v-show="showTreeList"
-          class="diff-tree-list"
-        >
-          <tree-list />
-        </div>
-        <div
-          v-if="diffFiles.length > 0"
-          class="diff-files-holder"
-        >
+        <div v-show="showTreeList" class="diff-tree-list"><tree-list /></div>
+        <div v-if="diffFiles.length > 0" class="diff-files-holder">
           <diff-file
             v-for="file in diffFiles"
             :key="file.newPath"

app/assets/javascripts/diffs/components/commit_item.vue

@@ -73,10 +73,7 @@ export default {
           v-html="commit.title_html"
         ></a>
 
-        <span class="commit-row-message d-block d-sm-none">
-          &middot;
-          {{ commit.short_id }}
-        </span>
+        <span class="commit-row-message d-block d-sm-none"> &middot; {{ commit.short_id }} </span>
 
         <button
           v-if="commit.description_html"
@@ -84,21 +81,12 @@ export default {
           type="button"
           :aria-label="__('Toggle commit description')"
         >
-          <icon
-            :size="12"
-            name="ellipsis_h"
-          />
+          <icon :size="12" name="ellipsis_h" />
         </button>
 
         <div class="commiter">
-          <a
-            :href="authorUrl"
-            v-text="authorName"
-          ></a>
-          {{ s__('CommitWidget|authored') }}
-          <time-ago-tooltip
-            :time="commit.authored_date"
-          />
+          <a :href="authorUrl" v-text="authorName"></a> {{ s__('CommitWidget|authored') }}
+          <time-ago-tooltip :time="commit.authored_date" />
         </div>
 
         <pre
@@ -108,19 +96,13 @@ export default {
         ></pre>
       </div>
       <div class="commit-actions flex-row d-none d-sm-flex">
-        <div
-          v-if="commit.signature_html"
-          v-html="commit.signature_html"
-        ></div>
+        <div v-if="commit.signature_html" v-html="commit.signature_html"></div>
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"
           :endpoint="commit.pipeline_status_path"
         />
         <div class="commit-sha-group">
-          <div
-            class="label label-monospace"
-            v-text="commit.short_id"
-          ></div>
+          <div class="label label-monospace" v-text="commit.short_id"></div>
           <clipboard-button
             :text="commit.id"
             :title="__('Copy commit SHA to clipboard')"

app/assets/javascripts/diffs/components/commit_widget.vue

@@ -31,9 +31,7 @@ export default {
   <div class="info-well prepend-top-default">
     <div class="well-segment">
       <ul class="blob-commit-info">
-        <commit-item
-          :commit="commit"
-        />
+        <commit-item :commit="commit" />
       </ul>
     </div>
   </div>

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -73,27 +73,20 @@ export default {
 
 <template>
   <div class="mr-version-controls">
-    <div
-      class="mr-version-menus-container content-block"
-    >
+    <div class="mr-version-menus-container content-block">
       <button
         v-tooltip.hover
         type="button"
         class="btn btn-default append-right-8 js-toggle-tree-list"
         :class="{
-          active: showTreeList
+          active: showTreeList,
         }"
         :title="__('Toggle file browser')"
         @click="toggleShowTreeList"
       >
-        <icon
-          name="hamburger"
-        />
+        <icon name="hamburger" />
       </button>
-      <div
-        v-if="showDropdowns"
-        class="d-flex align-items-center compare-versions-container"
-      >
+      <div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
         Changes between
         <compare-versions-dropdown
           :other-versions="mergeRequestDiffs"
@@ -109,20 +102,11 @@ export default {
           class="mr-version-compare-dropdown"
         />
       </div>
-      <div
-        class="inline-parallel-buttons d-none d-md-flex ml-auto"
-      >
-        <a
-          v-show="hasCollapsedFile"
-          class="btn btn-default append-right-8"
-          @click="expandAllFiles"
-        >
+      <div class="inline-parallel-buttons d-none d-md-flex ml-auto">
+        <a v-show="hasCollapsedFile" class="btn btn-default append-right-8" @click="expandAllFiles">
           {{ __('Expand all') }}
         </a>
-        <a
-          :href="toggleWhitespacePath"
-          class="btn btn-default qa-toggle-whitespace"
-        >
+        <a :href="toggleWhitespacePath" class="btn btn-default qa-toggle-whitespace">
           {{ toggleWhitespaceText }}
         </a>
         <div class="btn-group prepend-left-8">

app/assets/javascripts/diffs/components/compare_versions_dropdown.vue

@@ -112,26 +112,14 @@ export default {
       data-toggle="dropdown"
       aria-expanded="false"
     >
-      <span>
-        {{ selectedVersionName }}
-      </span>
-      <icon
-        :size="12"
-        name="angle-down"
-        class="position-absolute"
-      />
+      <span> {{ selectedVersionName }} </span>
+      <icon :size="12" name="angle-down" class="position-absolute" />
     </a>
     <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
       <div class="dropdown-content">
         <ul>
-          <li
-            v-for="version in targetVersions"
-            :key="version.id"
-          >
-            <a
-              :class="{ 'is-active': isActive(version) }"
-              :href="href(version)"
-            >
+          <li v-for="version in targetVersions" :key="version.id">
+            <a :class="{ 'is-active': isActive(version) }" :href="href(version)">
               <div>
                 <strong>
                   {{ versionName(version) }}
@@ -141,9 +129,7 @@ export default {
                 </strong>
               </div>
               <div>
-                <small class="commit-sha">
-                  {{ version.truncated_commit_sha }}
-                </small>
+                <small class="commit-sha"> {{ version.truncated_commit_sha }} </small>
               </div>
               <div>
                 <small>

app/assets/javascripts/diffs/components/diff_content.vue

@@ -97,10 +97,7 @@ export default {
           :file-hash="diffFile.file_hash"
           :can-comment="getNoteableData.current_user.can_create_note"
         />
-        <div
-          v-if="showNotesContainer"
-          class="note-container"
-        >
+        <div v-if="showNotesContainer" class="note-container">
           <diff-discussions
             v-if="diffFile.discussions.length"
             class="diff-file-discussions"
@@ -115,8 +112,8 @@ export default {
             :save-button-title="__('Comment')"
             class="diff-comment-form new-note discussion-form discussion-form-container"
             @handleFormUpdate="handleSaveNote"
-            @cancelForm="closeDiffFileCommentForm(diffFile.file_hash)"
-          />          
+            @cancelForm="closeDiffFileCommentForm(diffFile.file_hash);"
+          />
         </div>
       </diff-viewer>
     </div>

app/assets/javascripts/diffs/components/diff_discussions.vue

@@ -45,29 +45,22 @@ export default {
       v-for="(discussion, index) in discussions"
       :key="discussion.id"
       :class="{
-        collapsed: !isExpanded(discussion)
+        collapsed: !isExpanded(discussion),
       }"
       class="discussion-notes diff-discussions position-relative"
     >
-      <ul
-        :data-discussion-id="discussion.id"
-        class="notes"
-      >
+      <ul :data-discussion-id="discussion.id" class="notes">
         <template v-if="shouldCollapseDiscussions">
           <button
             :class="{
               'diff-notes-collapse': discussion.expanded,
-              'btn-transparent badge badge-pill': !discussion.expanded
+              'btn-transparent badge badge-pill': !discussion.expanded,
             }"
             type="button"
             class="js-diff-notes-toggle"
-            @click="toggleDiscussion({ discussionId: discussion.id })"
+            @click="toggleDiscussion({ discussionId: discussion.id });"
           >
-            <icon
-              v-if="discussion.expanded"
-              name="collapse"
-              class="collapse-icon"
-            />
+            <icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
             <template v-else>
               {{ index + 1 }}
             </template>
@@ -81,11 +74,7 @@ export default {
           :discussions-by-diff-order="true"
           @noteDeleted="deleteNoteHandler"
         >
-          <span
-            v-if="renderAvatarBadge"
-            slot="avatar-badge"
-            class="badge badge-pill"
-          >
+          <span v-if="renderAvatarBadge" slot="avatar-badge" class="badge badge-pill">
             {{ index + 1 }}
           </span>
         </noteable-discussion>

app/assets/javascripts/diffs/components/diff_file.vue

@@ -119,7 +119,7 @@ export default {
   <div
     :id="file.file_hash"
     :class="{
-      'is-active': currentDiffFileId === file.file_hash
+      'is-active': currentDiffFileId === file.file_hash,
     }"
     class="diff-file file-holder"
   >
@@ -134,13 +134,11 @@ export default {
       @showForkMessage="showForkMessage"
     />
 
-    <div
-      v-if="forkMessageVisible"
-      class="js-file-fork-suggestion-section file-fork-suggestion">
+    <div v-if="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion">
       <span class="file-fork-suggestion-note">
-        You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span>
-        files in this project directly. Please fork this project,
-        make your changes there, and submit a merge request.
+        You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span> files
+        in this project directly. Please fork this project, make your changes there, and submit a
+        merge request.
       </span>
       <a
         :href="file.fork_path"
@@ -162,27 +160,14 @@ export default {
       :class="{ hidden: isCollapsed || file.too_large }"
       :diff-file="file"
     />
-    <gl-loading-icon
-      v-if="showLoadingIcon"
-      class="diff-content loading"
-    />
-    <div
-      v-else-if="showExpandMessage"
-      class="nothing-here-block diff-collapsed"
-    >
+    <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
+    <div v-else-if="showExpandMessage" class="nothing-here-block diff-collapsed">
       {{ __('This diff is collapsed.') }}
-      <a
-        class="click-to-expand js-click-to-expand"
-        href="#"
-        @click.prevent="handleToggle"
-      >
+      <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">
         {{ __('Click to expand it.') }}
       </a>
     </div>
-    <div
-      v-if="file.too_large"
-      class="nothing-here-block diff-collapsed js-too-large-diff"
-    >
+    <div v-if="file.too_large" class="nothing-here-block diff-collapsed js-too-large-diff">
       {{ __('This source diff could not be displayed because it is too large.') }}
       <span v-html="viewBlobLink"></span>
     </div>

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -141,7 +141,7 @@ export default {
   <div
     ref="header"
     class="js-file-title file-title file-title-flex-parent"
-    @click="handleToggleFile($event, true)"
+    @click="handleToggleFile($event, true);"
   >
     <div class="file-header-content">
       <icon
@@ -152,12 +152,7 @@ export default {
         class="diff-toggle-caret append-right-5"
         @click.stop="handleToggle"
       />
-      <a
-        v-once
-        ref="titleWrapper"
-        :href="titleLink"
-        class="append-right-4 js-title-wrapper"
-      >
+      <a v-once ref="titleWrapper" :href="titleLink" class="append-right-4 js-title-wrapper">
         <file-icon
           :file-name="filePath"
           :size="18"
@@ -182,13 +177,7 @@ export default {
           ></strong>
         </span>
 
-        <strong
-          v-else
-          v-tooltip
-          :title="filePath"
-          class="file-title-name"
-          data-container="body"
-        >
+        <strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body">
           {{ filePath }}
         </strong>
       </a>
@@ -200,28 +189,18 @@ export default {
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
-      <small
-        v-if="diffFile.mode_changed"
-        ref="fileMode"
-      >
+      <small v-if="diffFile.mode_changed" ref="fileMode">
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
-      <span
-        v-if="isUsingLfs"
-        class="label label-lfs append-right-5"
-      >
-        {{ __('LFS') }}
-      </span>
+      <span v-if="isUsingLfs" class="label label-lfs append-right-5"> {{ __('LFS') }} </span>
     </div>
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
       class="file-actions d-none d-sm-block"
     >
-      <template
-        v-if="diffFile.blob && diffFile.blob.readable_text"
-      >
+      <template v-if="diffFile.blob && diffFile.blob.readable_text">
         <button
           :disabled="!diffHasDiscussions(diffFile)"
           :class="{ active: hasExpandedDiscussions }"
@@ -249,11 +228,7 @@ export default {
         v-html="viewReplacedFileButtonText"
       >
       </a>
-      <a
-        :href="diffFile.view_path"
-        class="btn view-file js-view-file"
-        v-html="viewFileButtonText"
-      >
+      <a :href="diffFile.view_path" class="btn view-file js-view-file" v-html="viewFileButtonText">
       </a>
 
       <a

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

@@ -75,10 +75,7 @@ export default {
       class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button"
       @click="toggleDiscussions"
     >
-      <icon
-        :size="12"
-        name="collapse"
-      />
+      <icon :size="12" name="collapse" />
     </button>
     <template v-else>
       <user-avatar-image
@@ -99,7 +96,8 @@ export default {
         data-placement="top"
         role="button"
         @click="toggleDiscussions"
-      >+{{ moreCount }}</span>
+        >+{{ moreCount }}</span
+      >
     </template>
   </div>
 </template>

app/assets/javascripts/diffs/components/diff_line_gutter_content.vue

@@ -155,15 +155,10 @@ export default {
 
 <template>
   <div>
-    <span
-      v-if="isMatchLine"
-      class="context-cell"
-      role="button"
-      @click="handleLoadMoreLines"
-    >...</span>
-    <template
-      v-else
+    <span v-if="isMatchLine" class="context-cell" role="button" @click="handleLoadMoreLines"
+      >...</span
     >
+    <template v-else>
       <button
         v-if="shouldShowCommentButton"
         type="button"
@@ -171,21 +166,10 @@ export default {
         title="Add a comment to this line"
         @click="handleCommentButton"
       >
-        <icon
-          :size="12"
-          name="comment"
-        />
+        <icon :size="12" name="comment" />
       </button>
-      <a
-        v-if="lineNumber"
-        :data-linenumber="lineNumber"
-        :href="lineHref"
-      >
-      </a>
-      <diff-gutter-avatars
-        v-if="shouldShowAvatarsOnGutter"
-        :discussions="line.discussions"
-      />
+      <a v-if="lineNumber" :data-linenumber="lineNumber" :href="lineHref"> </a>
+      <diff-gutter-avatars v-if="shouldShowAvatarsOnGutter" :discussions="line.discussions" />
     </template>
   </div>
 </template>

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -88,9 +88,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="content discussion-form discussion-form-container discussion-notes"
-  >
+  <div class="content discussion-form discussion-form-container discussion-notes">
     <note-form
       ref="noteForm"
       :is-editing="true"

app/assets/javascripts/diffs/components/diff_table_cell.vue

@@ -103,9 +103,7 @@ export default {
 </script>
 
 <template>
-  <td
-    :class="classNameMap"
-  >
+  <td :class="classNameMap">
     <diff-line-gutter-content
       :line="line"
       :file-hash="fileHash"

app/assets/javascripts/diffs/components/edit_button.vue

@@ -32,11 +32,5 @@ export default {
 </script>
 
 <template>
-  <a
-    :href="editPath"
-    class="btn btn-default js-edit-blob"
-    @click="handleEditClick"
-  >
-    Edit
-  </a>
+  <a :href="editPath" class="btn btn-default js-edit-blob" @click="handleEditClick"> Edit </a>
 </template>

app/assets/javascripts/diffs/components/file_row_stats.vue

@@ -10,16 +10,9 @@ export default {
 </script>
 
 <template>
-  <span
-    v-once
-    class="file-row-stats"
-  >
-    <span class="cgreen">
-      +{{ file.addedLines }}
-    </span>
-    <span class="cred">
-      -{{ file.removedLines }}
-    </span>
+  <span v-once class="file-row-stats">
+    <span class="cgreen"> +{{ file.addedLines }} </span>
+    <span class="cred"> -{{ file.removedLines }} </span>
   </span>
 </template>
 

app/assets/javascripts/diffs/components/hidden_files_warning.vue

@@ -26,26 +26,13 @@ export default {
     <h4>
       {{ __('Too many changes to show.') }}
       <div class="pull-right">
-        <a
-          :href="plainDiffPath"
-          class="btn btn-sm"
-        >
-          {{ __('Plain diff') }}
-        </a>
-        <a
-          :href="emailPatchPath"
-          class="btn btn-sm"
-        >
-          {{ __('Email patch') }}
-        </a>
+        <a :href="plainDiffPath" class="btn btn-sm"> {{ __('Plain diff') }} </a>
+        <a :href="emailPatchPath" class="btn btn-sm"> {{ __('Email patch') }} </a>
       </div>
     </h4>
     <p>
-      To preserve performance only
-      <strong>
-        {{ visible }} of {{ total }}
-      </strong>
-      files are displayed.
+      To preserve performance only <strong> {{ visible }} of {{ total }} </strong> files are
+      displayed.
     </p>
   </div>
 </template>

app/assets/javascripts/diffs/components/image_diff_overlay.vue

@@ -97,11 +97,9 @@ export default {
       v-if="canComment"
       type="button"
       class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
-      @click="clickedImage($event.offsetX, $event.offsetY)"
+      @click="clickedImage($event.offsetX, $event.offsetY);"
     >
-      <span class="sr-only">
-        {{ __('Add image comment') }}
-      </span>
+      <span class="sr-only"> {{ __('Add image comment') }} </span>
     </button>
     <button
       v-for="(discussion, index) in allDiscussions"
@@ -111,12 +109,9 @@ export default {
       :disabled="!shouldToggleDiscussion"
       class="js-image-badge"
       type="button"
-      @click="toggleDiscussion({ discussionId: discussion.id })"
+      @click="toggleDiscussion({ discussionId: discussion.id });"
     >
-      <icon
-        v-if="showCommentIcon"
-        name="image-comment-dark"
-      />
+      <icon v-if="showCommentIcon" name="image-comment-dark" />
       <template v-else>
         {{ index + 1 }}
       </template>
@@ -125,15 +120,13 @@ export default {
       v-if="currentCommentForm"
       :style="{
         left: `${currentCommentForm.x}px`,
-        top: `${currentCommentForm.y}px`
+        top: `${currentCommentForm.y}px`,
       }"
       :aria-label="__('Comment form position')"
       class="btn-transparent comment-indicator"
       type="button"
     >
-      <icon
-        name="image-comment-dark"
-      />
+      <icon name="image-comment-dark" />
     </button>
   </div>
 </template>

app/assets/javascripts/diffs/components/inline_diff_comment_row.vue

@@ -34,19 +34,10 @@ export default {
 </script>
 
 <template>
-  <tr
-    :class="className"
-    class="notes_holder"
-  >
-    <td
-      class="notes_content"
-      colspan="3"
-    >
+  <tr :class="className" class="notes_holder">
+    <td class="notes_content" colspan="3">
       <div class="content">
-        <diff-discussions
-          v-if="line.discussions.length"
-          :discussions="line.discussions"
-        />
+        <diff-discussions v-if="line.discussions.length" :discussions="line.discussions" />
         <diff-line-note-form
           v-if="diffLineCommentForms[line.line_code]"
           :diff-file-hash="diffFileHash"

app/assets/javascripts/diffs/components/inline_diff_table_row.vue

@@ -102,11 +102,6 @@ export default {
       :is-hover="isHover"
       class="diff-line-num new_line qa-new-diff-line"
     />
-    <td
-      :class="line.type"
-      class="line_content"
-      v-html="line.rich_text"
-    >
-    </td>
+    <td :class="line.type" class="line_content" v-html="line.rich_text"></td>
   </tr>
 </template>

app/assets/javascripts/diffs/components/inline_diff_view.vue

@@ -37,11 +37,10 @@ export default {
   <table
     :class="userColorScheme"
     :data-commit-id="commitId"
-    class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view">
+    class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view"
+  >
     <tbody>
-      <template
-        v-for="(line, index) in diffLines"
-      >
+      <template v-for="(line, index) in diffLines">
         <inline-diff-table-row
           :key="line.line_code"
           :file-hash="diffFile.file_hash"

app/assets/javascripts/diffs/components/no_changes.vue

@@ -19,29 +19,16 @@ export default {
 </script>
 
 <template>
-  <div
-    class="row empty-state nothing-here-block"
-  >
+  <div class="row empty-state nothing-here-block">
     <div class="col-xs-12">
-      <div class="svg-content">
-        <span
-          v-html="emptyImage"
-        ></span>
-      </div>
+      <div class="svg-content"><span v-html="emptyImage"></span></div>
     </div>
     <div class="col-xs-12">
       <div class="text-content text-center">
-        No changes between
-        <span class="ref-name">{{ sourceBranch }}</span>
-        and
+        No changes between <span class="ref-name">{{ sourceBranch }}</span> and
         <span class="ref-name">{{ targetBranch }}</span>
         <div class="text-center">
-          <a
-            :href="newBlobPath"
-            class="btn btn-success"
-          >
-            {{ __('Create commit') }}
-          </a>
+          <a :href="newBlobPath" class="btn btn-success"> {{ __('Create commit') }} </a>
         </div>
       </div>
     </div>

app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue

@@ -72,17 +72,9 @@ export default {
 </script>
 
 <template>
-  <tr
-    :class="className"
-    class="notes_holder"
-  >
-    <td
-      class="notes_content parallel old"
-      colspan="2">
-      <div
-        v-if="shouldRenderDiscussionsOnLeft"
-        class="content"
-      >
+  <tr :class="className" class="notes_holder">
+    <td class="notes_content parallel old" colspan="2">
+      <div v-if="shouldRenderDiscussionsOnLeft" class="content">
         <diff-discussions
           v-if="line.left.discussions.length"
           :discussions="line.left.discussions"
@@ -96,13 +88,8 @@ export default {
         line-position="left"
       />
     </td>
-    <td
-      class="notes_content parallel new"
-      colspan="2">
-      <div
-        v-if="shouldRenderDiscussionsOnRight"
-        class="content"
-      >
+    <td class="notes_content parallel new" colspan="2">
+      <div v-if="shouldRenderDiscussionsOnRight" class="content">
         <diff-discussions
           v-if="line.right.discussions.length"
           :discussions="line.right.discussions"

app/assets/javascripts/diffs/components/parallel_diff_table_row.vue

@@ -125,8 +125,7 @@ export default {
         class="line_content parallel left-side"
         @mousedown.native="handleParallelLineMouseDown"
         v-html="line.left.rich_text"
-      >
-      </td>
+      ></td>
     </template>
     <template v-else>
       <td class="diff-line-num old_line empty-cell"></td>
@@ -151,8 +150,7 @@ export default {
         class="line_content parallel right-side"
         @mousedown.native="handleParallelLineMouseDown"
         v-html="line.right.rich_text"
-      >
-      </td>
+      ></td>
     </template>
     <template v-else>
       <td class="diff-line-num old_line empty-cell"></td>

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -41,9 +41,7 @@ export default {
   >
     <table>
       <tbody>
-        <template
-          v-for="(line, index) in diffLines"
-        >
+        <template v-for="(line, index) in diffLines">
           <parallel-diff-table-row
             :key="index"
             :file-hash="diffFile.file_hash"

app/assets/javascripts/diffs/components/tree_list.vue

@@ -72,16 +72,13 @@ export default {
   <div class="tree-list-holder d-flex flex-column">
     <div class="append-bottom-8 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
-        <icon
-          name="search"
-          class="position-absolute tree-list-icon"
-        />
+        <icon name="search" class="position-absolute tree-list-icon" />
         <input
           v-model="search"
           :placeholder="s__('MergeRequest|Filter files')"
           type="search"
           class="form-control"
-          @focus="toggleFocusSearch(true)"
+          @focus="toggleFocusSearch(true);"
           @blur="blurSearch"
         />
         <button
@@ -91,50 +88,39 @@ export default {
           class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
           @click="clearSearch"
         >
-          <icon
-            name="close"
-          />
+          <icon name="close" />
         </button>
       </div>
-      <div
-        v-show="!focusSearch"
-        class="btn-group prepend-left-8 tree-list-view-toggle"
-      >
+      <div v-show="!focusSearch" class="btn-group prepend-left-8 tree-list-view-toggle">
         <button
           v-gl-tooltip.hover
           :aria-label="__('List view')"
           :title="__('List view')"
           :class="{
-            active: !renderTreeList
+            active: !renderTreeList,
           }"
           class="btn btn-default pt-0 pb-0 d-flex align-items-center"
           type="button"
-          @click="toggleRenderTreeList(false)"
+          @click="toggleRenderTreeList(false);"
         >
-          <icon
-            name="hamburger"
-          />
+          <icon name="hamburger" />
         </button>
         <button
           v-gl-tooltip.hover
           :aria-label="__('Tree view')"
           :title="__('Tree view')"
           :class="{
-            active: renderTreeList
+            active: renderTreeList,
           }"
           class="btn btn-default pt-0 pb-0 d-flex align-items-center"
           type="button"
-          @click="toggleRenderTreeList(true)"
+          @click="toggleRenderTreeList(true);"
         >
-          <icon
-            name="file-tree"
-          />
+          <icon name="file-tree" />
         </button>
       </div>
     </div>
-    <div
-      class="tree-list-scroll"
-    >
+    <div class="tree-list-scroll">
       <template v-if="filteredTreeList.length">
         <file-row
           v-for="file in filteredTreeList"
@@ -150,25 +136,15 @@ export default {
           @clickFile="scrollToFile"
         />
       </template>
-      <p
-        v-else
-        class="prepend-top-20 append-bottom-20 text-center"
-      >
+      <p v-else class="prepend-top-20 append-bottom-20 text-center">
         {{ s__('MergeRequest|No files found') }}
       </p>
     </div>
-    <div
-      v-once
-      class="pt-3 pb-3 text-center"
-    >
+    <div v-once class="pt-3 pb-3 text-center">
       {{ n__('%d changed file', '%d changed files', diffFilesLength) }}
       <div>
-        <span class="cgreen">
-          {{ n__('%d addition', '%d additions', addedLines) }}
-        </span>
-        <span class="cred">
-          {{ n__('%d deleted', '%d deletions', removedLines) }}
-        </span>
+        <span class="cgreen"> {{ n__('%d addition', '%d additions', addedLines) }} </span>
+        <span class="cred"> {{ n__('%d deleted', '%d deletions', removedLines) }} </span>
       </div>
     </div>
   </div>

app/assets/javascripts/diffs/store/actions.js

@@ -41,12 +41,14 @@ export const assignDiscussionsToDiff = (
 ) => {
   const diffPositionByLineCode = getDiffPositionByLineCode(state.diffFiles);
 
-  discussions.filter(discussion => discussion.diff_discussion).forEach(discussion => {
-    commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
-      discussion,
-      diffPositionByLineCode,
+  discussions
+    .filter(discussion => discussion.diff_discussion)
+    .forEach(discussion => {
+      commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
+        discussion,
+        diffPositionByLineCode,
+      });
     });
-  });
 };
 
 export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => {

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

@@ -41,7 +41,6 @@ export default {
 
 <template>
   <div class="environments-container">
-
     <gl-loading-icon
       v-if="isLoading"
       :size="3"
@@ -51,10 +50,7 @@ export default {
 
     <slot name="emptyState"></slot>
 
-    <div
-      v-if="!isLoading && environments.length > 0"
-      class="table-holder">
-
+    <div v-if="!isLoading && environments.length > 0" class="table-holder">
       <environment-table
         :environments="environments"
         :can-create-deployment="canCreateDeployment"

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

@@ -24,11 +24,11 @@ export default {
         {{ s__("Environments|You don't have any environments right now") }}
       </h4>
       <p class="blank-state-text">
-        {{ s__(`Environments|Environments are places where
-        code gets deployed, such as staging or production.`) }}
-        <a :href="helpPath">
-          {{ s__("Environments|Read more about environments") }}
-        </a>
+        {{
+          s__(`Environments|Environments are places where
+        code gets deployed, such as staging or production.`)
+        }}
+        <a :href="helpPath"> {{ s__('Environments|Read more about environments') }} </a>
       </p>
 
       <div class="text-center">
@@ -37,7 +37,7 @@ export default {
           :href="newPath"
           class="btn btn-success js-new-environment-button"
         >
-          {{ s__("Environments|New environment") }}
+          {{ s__('Environments|New environment') }}
         </a>
       </div>
     </div>

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

@@ -68,9 +68,7 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="btn-group"
-    role="group">
+  <div class="btn-group" role="group">
     <button
       v-tooltip
       :title="title"
@@ -82,34 +80,23 @@ export default {
       data-toggle="dropdown"
     >
       <span>
-        <icon name="play" />
-        <icon
-          name="chevron-down"
-        />
+        <icon name="play" /> <icon name="chevron-down" />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>
 
     <ul class="dropdown-menu dropdown-menu-right">
-      <li
-        v-for="(action, i) in actions"
-        :key="i">
+      <li 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 d-flex align-items-center"
-          @click="onClickAction(action)"
+          @click="onClickAction(action);"
         >
-          <span class="flex-fill">
-            {{ action.name }}
-          </span>
-          <span
-            v-if="action.scheduledAt"
-            class="text-secondary"
-          >
-            <icon name="clock" />
-            {{ remainingTime(action) }}
+          <span class="flex-fill"> {{ action.name }} </span>
+          <span v-if="action.scheduledAt" class="text-secondary">
+            <icon name="clock" /> {{ remainingTime(action) }}
           </span>
         </button>
       </li>

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

@@ -453,53 +453,28 @@ export default {
       'folder-row': model.isFolder,
     }"
     class="gl-responsive-table-row"
-    role="row">
+    role="row"
+  >
     <div
       v-gl-tooltip
       :title="model.name"
       class="table-section section-wrap section-15 text-truncate"
       role="gridcell"
     >
-      <div
-        v-if="!model.isFolder"
-        class="table-mobile-header"
-        role="rowheader"
-      >
-        {{ s__("Environments|Environment") }}
+      <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
+        {{ s__('Environments|Environment') }}
       </div>
-      <span
-        v-if="!model.isFolder"
-        class="environment-name table-mobile-content">
-        <a
-          class="qa-environment-link"
-          :href="environmentPath"
-        >
-          {{ model.name }}
-        </a>
+      <span v-if="!model.isFolder" class="environment-name table-mobile-content">
+        <a class="qa-environment-link" :href="environmentPath"> {{ model.name }} </a>
       </span>
-      <span
-        v-else
-        class="folder-name"
-        role="button"
-        @click="onClickFolder">
-
-        <icon
-          :name="folderIconName"
-          class="folder-icon"
-        />
+      <span v-else class="folder-name" role="button" @click="onClickFolder">
+        <icon :name="folderIconName" class="folder-icon" />
 
-        <icon
-          name="folder"
-          class="folder-icon"
-        />
+        <icon name="folder" class="folder-icon" />
 
-        <span>
-          {{ model.folderName }}
-        </span>
+        <span> {{ model.folderName }} </span>
 
-        <span class="badge badge-pill">
-          {{ model.size }}
-        </span>
+        <span class="badge badge-pill"> {{ model.size }} </span>
       </span>
     </div>
 
@@ -507,9 +482,7 @@ export default {
       class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
       role="gridcell"
     >
-      <span v-if="shouldRenderDeploymentID">
-        {{ deploymentInternalId }}
-      </span>
+      <span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
 
       <span v-if="!model.isFolder && deploymentHasUser">
         by
@@ -523,61 +496,32 @@ export default {
       </span>
     </div>
 
-    <div
-      class="table-section section-15 d-none d-sm-none d-md-block"
-      role="gridcell"
-    >
-      <a
-        v-if="shouldRenderBuildName"
-        :href="buildPath"
-        class="build-link flex-truncate-parent"
-      >
+    <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
+      <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
         <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
     </div>
 
-    <div
-      v-if="!model.isFolder"
-      class="table-section section-20"
-      role="gridcell"
-    >
-      <div
-        role="rowheader"
-        class="table-mobile-header"
-      >
-        {{ s__("Environments|Commit") }}
-      </div>
-      <div
-        v-if="hasLastDeploymentKey"
-        class="js-commit-component table-mobile-content">
+    <div v-if="!model.isFolder" class="table-section section-20" role="gridcell">
+      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Commit') }}</div>
+      <div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
           :commit-ref="commitRef"
           :commit-url="commitUrl"
           :short-sha="commitShortSha"
           :title="commitTitle"
-          :author="commitAuthor"/>
+          :author="commitAuthor"
+        />
       </div>
-      <div
-        v-if="!hasLastDeploymentKey"
-        class="commit-title table-mobile-content">
-        {{ s__("Environments|No deployments yet") }}
+      <div v-if="!hasLastDeploymentKey" class="commit-title table-mobile-content">
+        {{ s__('Environments|No deployments yet') }}
       </div>
     </div>
 
-    <div
-      v-if="!model.isFolder"
-      class="table-section section-10"
-      role="gridcell"
-    >
-      <div
-        role="rowheader"
-        class="table-mobile-header">
-        {{ s__("Environments|Updated") }}
-      </div>
-      <span
-        v-if="canShowDate"
-        class="environment-created-date-timeago table-mobile-content">
+    <div v-if="!model.isFolder" class="table-section section-10" role="gridcell">
+      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div>
+      <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
         {{ createdDate }}
       </span>
     </div>
@@ -585,12 +529,9 @@ export default {
     <div
       v-if="!model.isFolder && displayEnvironmentActions"
       class="table-section section-30 table-button-footer"
-      role="gridcell">
-
-      <div
-        class="btn-group table-action-buttons"
-        role="group">
-
+      role="gridcell"
+    >
+      <div class="btn-group table-action-buttons" role="group">
         <external-url-component
           v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"
@@ -601,10 +542,7 @@ export default {
           :monitoring-url="monitoringUrl"
         />
 
-        <actions-component
-          v-if="actions.length > 0"
-          :actions="actions"
-        />
+        <actions-component v-if="actions.length > 0" :actions="actions" />
 
         <terminal-button-component
           v-if="model && model.terminal_path"
@@ -617,10 +555,7 @@ export default {
           :retry-url="retryUrl"
         />
 
-        <stop-component
-          v-if="canStopEnvironment"
-          :environment="model"
-        />
+        <stop-component v-if="canStopEnvironment" :environment="model" />
       </div>
     </div>
   </div>

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

@@ -61,14 +61,7 @@ export default {
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
   >
-    <icon
-      v-if="isLastDeployment"
-      name="repeat"
-    />
-    <icon
-      v-else
-      name="redo"
-    />
+    <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
     <gl-loading-icon v-if="isLoading" />
   </button>
 </template>

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

@@ -65,6 +65,6 @@ export default {
     data-target="#stop-environment-modal"
     @click="onClick"
   >
-    <icon name="stop"/>
+    <icon name="stop" />
   </loading-button>
 </template>

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

@@ -93,21 +93,11 @@ export default {
     <stop-environment-modal :environment="environmentInStopModal" />
 
     <div class="top-area">
-      <tabs
-        :tabs="tabs"
-        scope="environments"
-        @onChangeTab="onChangeTab"
-      />
+      <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
 
-      <div
-        v-if="canCreateEnvironment && !isLoading"
-        class="nav-controls"
-      >
-        <a
-          :href="newEnvironmentPath"
-          class="btn btn-success"
-        >
-          {{ s__("Environments|New environment") }}
+      <div v-if="canCreateEnvironment && !isLoading" class="nav-controls">
+        <a :href="newEnvironmentPath" class="btn btn-success">
+          {{ s__('Environments|New environment') }}
         </a>
       </div>
     </div>

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

@@ -41,48 +41,25 @@ export default {
 };
 </script>
 <template>
-  <div
-    class="ci-table"
-    role="grid"
-  >
-    <div
-      class="gl-responsive-table-row table-row-header"
-      role="row"
-    >
-      <div
-        class="table-section section-15 environments-name"
-        role="columnheader"
-      >
-        {{ s__("Environments|Environment") }}
+  <div class="ci-table" role="grid">
+    <div class="gl-responsive-table-row table-row-header" role="row">
+      <div class="table-section section-15 environments-name" role="columnheader">
+        {{ s__('Environments|Environment') }}
       </div>
-      <div
-        class="table-section section-10 environments-deploy"
-        role="columnheader"
-      >
-        {{ s__("Environments|Deployment") }}
+      <div class="table-section section-10 environments-deploy" role="columnheader">
+        {{ s__('Environments|Deployment') }}
       </div>
-      <div
-        class="table-section section-15 environments-build"
-        role="columnheader"
-      >
-        {{ s__("Environments|Job") }}
+      <div class="table-section section-15 environments-build" role="columnheader">
+        {{ s__('Environments|Job') }}
       </div>
-      <div
-        class="table-section section-20 environments-commit"
-        role="columnheader"
-      >
-        {{ s__("Environments|Commit") }}
+      <div class="table-section section-20 environments-commit" role="columnheader">
+        {{ s__('Environments|Commit') }}
       </div>
-      <div
-        class="table-section section-10 environments-date"
-        role="columnheader"
-      >
-        {{ s__("Environments|Updated") }}
+      <div class="table-section section-10 environments-date" role="columnheader">
+        {{ s__('Environments|Updated') }}
       </div>
     </div>
-    <template
-      v-for="(model, i) in environments"
-      :model="model">
+    <template v-for="(model, i) in environments" :model="model">
       <div
         is="environment-item"
         :key="`environment-item-${i}`"
@@ -91,12 +68,8 @@ export default {
         :can-read-environment="canReadEnvironment"
       />
 
-      <template
-        v-if="shouldRenderFolderContent(model)"
-      >
-        <div
-          v-if="model.isLoadingFolderContent"
-          :key="`loading-item-${i}`">
+      <template v-if="shouldRenderFolderContent(model)">
+        <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
           <gl-loading-icon :size="2" />
         </div>
 
@@ -112,11 +85,8 @@ export default {
 
           <div :key="`sub-div-${i}`">
             <div class="text-center prepend-top-10">
-              <a
-                :href="folderUrl(model)"
-                class="btn btn-default"
-              >
-                {{ s__("Environments|Show all") }}
+              <a :href="folderUrl(model)" class="btn btn-default">
+                {{ s__('Environments|Show all') }}
               </a>
             </div>
           </div>

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

@@ -62,31 +62,25 @@ export default {
     @submit="onSubmit"
   >
     <template slot="header">
-      <h4
-        class="modal-title d-flex mw-100"
-      >
+      <h4 class="modal-title d-flex mw-100">
         Stopping
-        <span
-          v-gl-tooltip
-          :title="environment.name"
-          class="text-truncate ml-1 mr-1 flex-fill"
-        >{{ environment.name }}</span>
+        <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">{{
+          environment.name
+        }}</span>
         ?
       </h4>
     </template>
 
     <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>
 
-    <div
-      v-if="!environment.has_stop_action"
-      class="warning_message"
-    >
+    <div v-if="!environment.has_stop_action" class="warning_message">
       <p v-html="noStopActionMessage"></p>
       <a
         href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment"
         target="_blank"
         rel="noopener noreferrer"
-      >{{ s__('Environments|Learn more about stopping environments') }}</a>
+        >{{ s__('Environments|Learn more about stopping environments') }}</a
+      >
     </div>
   </gl-modal>
 </template>

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

@@ -43,20 +43,12 @@ export default {
   <div :class="cssContainerClass">
     <stop-environment-modal :environment="environmentInStopModal" />
 
-    <div
-      v-if="!isLoading"
-      class="top-area"
-    >
-
+    <div v-if="!isLoading" class="top-area">
       <h4 class="js-folder-name environments-folder-name">
-        {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
+        {{ s__('Environments|Environments') }} / <b>{{ folderName }}</b>
       </h4>
 
-      <tabs
-        :tabs="tabs"
-        scope="environments"
-        @onChangeTab="onChangeTab"
-      />
+      <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
     </div>
 
     <container

app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue

@@ -58,20 +58,16 @@ export default {
 </script>
 <template>
   <div>
-    <div
-      v-if="!isLocalStorageAvailable"
-      class="dropdown-info-note">
+    <div v-if="!isLocalStorageAvailable" class="dropdown-info-note">
       This feature requires local storage to be enabled
     </div>
     <ul v-else-if="hasItems">
-      <li
-        v-for="(item, index) in processedItems"
-        :key="`processed-items-${index}`"
-      >
+      <li v-for="(item, index) in processedItems" :key="`processed-items-${index}`">
         <button
           type="button"
           class="filtered-search-history-dropdown-item"
-          @click="onItemActivated(item.text)">
+          @click="onItemActivated(item.text);"
+        >
           <span>
             <span
               v-for="(token, tokenIndex) in item.tokens"
@@ -92,15 +88,12 @@ export default {
         <button
           type="button"
           class="filtered-search-history-clear-button"
-          @click="onRequestClearRecentSearches($event)">
+          @click="onRequestClearRecentSearches($event);"
+        >
           Clear recent searches
         </button>
       </li>
     </ul>
-    <div
-      v-else
-      class="dropdown-info-note">
-      You don't have any recent searches
-    </div>
+    <div v-else class="dropdown-info-note">You don't have any recent searches</div>
   </div>
 </template>

app/assets/javascripts/frequent_items/components/app.vue

@@ -95,19 +95,14 @@ export default {
 
 <template>
   <div>
-    <frequent-items-search-input
-      :namespace="namespace"
-    />
+    <frequent-items-search-input :namespace="namespace" />
     <gl-loading-icon
       v-if="isLoadingItems"
       :label="translations.loadingMessage"
       :size="2"
       class="loading-animation prepend-top-20"
     />
-    <div
-      v-if="!isLoadingItems && !hasSearchQuery"
-      class="section-header"
-    >
+    <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header">
       {{ translations.header }}
     </div>
     <frequent-items-list

app/assets/javascripts/frequent_items/components/frequent_items_list.vue

@@ -55,11 +55,7 @@ export default {
 <template>
   <div class="frequent-items-list-container">
     <ul class="list-unstyled">
-      <li
-        v-if="isListEmpty"
-        :class="{ 'section-failure': isFetchFailed }"
-        class="section-empty"
-      >
+      <li v-if="isListEmpty" :class="{ 'section-failure': isFetchFailed }" class="section-empty">
         {{ listEmptyMessage }}
       </li>
       <frequent-items-list-item

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

@@ -80,35 +80,14 @@ export default {
 
 <template>
   <li class="frequent-items-list-item-container">
-    <a
-      :href="webUrl"
-      class="clearfix"
-    >
+    <a :href="webUrl" class="clearfix">
       <div class="frequent-items-item-avatar-container">
-        <img
-          v-if="hasAvatar"
-          :src="avatarUrl"
-          class="avatar s32"
-        />
-        <identicon
-          v-else
-          :entity-id="itemId"
-          :entity-name="itemName"
-          size-class="s32"
-        />
+        <img v-if="hasAvatar" :src="avatarUrl" class="avatar s32" />
+        <identicon v-else :entity-id="itemId" :entity-name="itemName" size-class="s32" />
       </div>
       <div class="frequent-items-item-metadata-container">
-        <div
-          :title="itemName"
-          class="frequent-items-item-title"
-          v-html="highlightedItemName"
-        >
-        </div>
-        <div
-          v-if="truncatedNamespace"
-          :title="namespace"
-          class="frequent-items-item-namespace"
-        >
+        <div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div>
+        <div v-if="truncatedNamespace" :title="namespace" class="frequent-items-item-namespace">
           {{ truncatedNamespace }}
         </div>
       </div>

app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue

@@ -49,10 +49,6 @@ export default {
       type="search"
       class="form-control"
     />
-    <icon
-      v-if="!searchQuery"
-      name="search"
-      class="search-icon"
-    />
+    <icon v-if="!searchQuery" name="search" class="search-icon" />
   </div>
 </template>

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

@@ -43,18 +43,9 @@ export default {
       :parent-group="parentGroup"
       :action="action"
     />
-    <li
-      v-if="hasMoreChildren"
-      class="group-row">
-      <a
-        :href="parentGroup.relativePath"
-        class="group-row-contents has-more-items">
-        <i
-          class="fa fa-external-link"
-          aria-hidden="true"
-        >
-        </i>
-        {{ moreChildrenStats }}
+    <li v-if="hasMoreChildren" class="group-row">
+      <a :href="parentGroup.relativePath" class="group-row-contents has-more-items">
+        <i class="fa fa-external-link" aria-hidden="true"> </i> {{ moreChildrenStats }}
       </a>
     </li>
   </ul>

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

@@ -77,89 +77,46 @@ export default {
 </script>
 
 <template>
-  <li
-    :id="groupDomId"
-    :class="rowClass"
-    class="group-row"
-    @click.stop="onClickRowGroup"
-  >
+  <li :id="groupDomId" :class="rowClass" class="group-row" @click.stop="onClickRowGroup">
     <div
       :class="{ 'project-row-contents': !isGroup }"
       class="group-row-contents d-flex justify-content-end align-items-center"
     >
-      <div
-        class="folder-toggle-wrap append-right-4 d-flex align-items-center"
-      >
-        <item-caret
-          :is-group-open="group.isOpen"
-        />
-        <item-type-icon
-          :item-type="group.type"
-          :is-group-open="group.isOpen"
-        />
+      <div class="folder-toggle-wrap append-right-4 d-flex align-items-center">
+        <item-caret :is-group-open="group.isOpen" />
+        <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" />
       </div>
       <div
         :class="{ 'content-loading': group.isChildrenLoading }"
         class="avatar-container s24 d-none d-sm-flex"
       >
-        <a
-          :href="group.relativePath"
-          class="no-expand"
-        >
-          <img
-            v-if="hasAvatar"
-            :src="group.avatarUrl"
-            class="avatar s24"
-          />
-          <identicon
-            v-else
-            :entity-id="group.id"
-            :entity-name="group.name"
-            size-class="s24"
-          />
+        <a :href="group.relativePath" class="no-expand">
+          <img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" />
+          <identicon v-else :entity-id="group.id" :entity-name="group.name" size-class="s24" />
         </a>
       </div>
-      <div
-        class="group-text flex-grow"
-      >
-        <div
-          class="title namespace-title append-right-8"
-        >
+      <div class="group-text flex-grow">
+        <div class="title namespace-title append-right-8">
           <a
             v-tooltip
             :href="group.relativePath"
             :title="group.fullName"
             class="no-expand"
             data-placement="bottom"
-          >{{
-            // ending bracket must be by closing tag to prevent
-            // link hover text-decoration from over-extending
-            group.name
-          }}</a>
-          <span
-            v-if="group.permission"
-            class="user-access-role"
+            >{{
+              // ending bracket must be by closing tag to prevent
+              // link hover text-decoration from over-extending
+              group.name
+            }}</a
           >
-            {{ group.permission }}
-          </span>
+          <span v-if="group.permission" class="user-access-role"> {{ group.permission }} </span>
         </div>
-        <div
-          v-if="group.description"
-          class="description"
-        >
-          <span v-html="group.description">
-          </span>
+        <div v-if="group.description" class="description">
+          <span v-html="group.description"> </span>
         </div>
       </div>
-      <item-stats
-        :item="group"
-        class="group-stats prepend-top-2"
-      />
-      <item-actions
-        v-if="isGroup"
-        :group="group"
-        :parent-group="parentGroup"
-      />
+      <item-stats :item="group" class="group-stats prepend-top-2" />
+      <item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" />
     </div>
     <group-folder
       v-if="group.isOpen && hasChildren"

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

@@ -43,19 +43,9 @@ export default {
 
 <template>
   <div class="groups-list-tree-container qa-groups-list-tree-container">
-    <div
-      v-if="searchEmpty"
-      class="has-no-search-results"
-    >
-      {{ searchEmptyMessage }}
-    </div>
-    <template
-      v-else
-    >
-      <group-folder
-        :groups="groups"
-        :action="action"
-      />
+    <div v-if="searchEmpty" class="has-no-search-results">{{ searchEmptyMessage }}</div>
+    <template v-else>
+      <group-folder :groups="groups" :action="action" />
       <pagination-links
         :change="change"
         :page-info="pageInfo"

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

@@ -53,8 +53,9 @@ export default {
       :aria-label="editBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="edit-group btn no-expand">
-      <icon name="settings"/>
+      class="edit-group btn no-expand"
+    >
+      <icon name="settings" />
     </a>
     <a
       v-if="group.canLeave"
@@ -65,8 +66,9 @@ export default {
       data-container="body"
       data-placement="bottom"
       class="leave-group btn no-expand"
-      @click.prevent="onLeaveGroup">
-      <icon name="leave"/>
+      @click.prevent="onLeaveGroup"
+    >
+      <icon name="leave" />
     </a>
   </div>
 </template>

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

@@ -21,10 +21,5 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret">
-    <icon
-      :size="12"
-      :name="iconClass"
-    />
-  </span>
+  <span class="folder-caret"> <icon :size="12" :name="iconClass" /> </span>
 </template>

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

@@ -76,14 +76,8 @@ export default {
       css-class="item-visibility"
       tooltip-placement="left"
     />
-    <div
-      v-if="isProject"
-      class="last-updated"
-    >
-      <time-ago-tooltip
-        :time="item.updatedAt"
-        tooltip-placement="bottom"
-      />
+    <div v-if="isProject" class="last-updated">
+      <time-ago-tooltip :time="item.updatedAt" tooltip-placement="bottom" />
     </div>
   </div>
 </template>

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

@@ -57,12 +57,6 @@ export default {
     :title="title"
     data-container="body"
   >
-    <icon :name="iconName" />
-    <span
-      v-if="isValuePresent"
-      class="stat-value"
-    >
-      {{ value }}
-    </span>
+    <icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
   </span>
 </template>

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

@@ -29,7 +29,5 @@ export default {
 </script>
 
 <template>
-  <span class="item-type-icon">
-    <icon :name="iconClass"/>
-  </span>
+  <span class="item-type-icon"> <icon :name="iconClass" /> </span>
 </template>

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

@@ -37,7 +37,7 @@ export default {
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.edit
+            active: currentActivityView === $options.activityBarViews.edit,
           }"
           :title="s__('IDE|Edit')"
           :aria-label="s__('IDE|Edit')"
@@ -45,18 +45,16 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-edit-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.edit);"
         >
-          <icon
-            name="code"
-          />
+          <icon name="code" />
         </button>
       </li>
       <li>
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.review
+            active: currentActivityView === $options.activityBarViews.review,
           }"
           :title="s__('IDE|Review')"
           :aria-label="s__('IDE|Review')"
@@ -64,18 +62,16 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.review);"
         >
-          <icon
-            name="file-modified"
-          />
+          <icon name="file-modified" />
         </button>
       </li>
       <li v-show="hasChanges">
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.commit
+            active: currentActivityView === $options.activityBarViews.commit,
           }"
           :title="s__('IDE|Commit')"
           :aria-label="s__('IDE|Commit')"
@@ -83,11 +79,9 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-commit-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
+          @click.prevent="changedActivityView($event, $options.activityBarViews.commit);"
         >
-          <icon
-            name="commit"
-          />
+          <icon name="commit" />
         </button>
       </li>
     </ul>

app/assets/javascripts/ide/components/branches/item.vue

@@ -32,28 +32,14 @@ export default {
 </script>
 
 <template>
-  <a
-    :href="branchHref"
-    class="btn-link d-flex align-items-center"
-  >
+  <a :href="branchHref" class="btn-link d-flex align-items-center">
     <span class="d-flex append-right-default ide-search-list-current-icon">
-      <icon
-        v-if="isActive"
-        :size="18"
-        name="mobile-issue-close"
-      />
+      <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>
-      <strong>
-        {{ item.name }}
-      </strong>
-      <span
-        class="ide-merge-request-project-path d-block mt-1"
-      >
-        Updated
-        <timeago
-          :time="item.committedDate || ''"
-        />
+      <strong> {{ item.name }} </strong>
+      <span class="ide-merge-request-project-path d-block mt-1">
+        Updated <timeago :time="item.committedDate || ''" />
       </span>
     </span>
   </a>

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -68,11 +68,7 @@ export default {
           class="form-control dropdown-input-field"
           @input="searchBranches"
         />
-        <icon
-          :size="18"
-          name="search"
-          class="input-icon"
-        />
+        <icon :size="18" name="search" class="input-icon" />
       </div>
     </div>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
@@ -81,26 +77,13 @@ export default {
         :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
-      <ul
-        v-else
-        class="mb-3 w-100"
-      >
+      <ul v-else class="mb-3 w-100">
         <template v-if="hasBranches">
-          <li
-            v-for="item in branches"
-            :key="item.name"
-          >
-            <item
-              :item="item"
-              :project-id="currentProjectId"
-              :is-active="isActiveBranch(item)"
-            />
+          <li v-for="item in branches" :key="item.name">
+            <item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
           </li>
         </template>
-        <li
-          v-else
-          class="ide-search-list-empty d-flex align-items-center justify-content-center"
-        >
+        <li v-else class="ide-search-list-empty d-flex align-items-center justify-content-center">
           <template v-if="hasNoSearchResults">
             {{ __('No branches found') }}
           </template>

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

@@ -57,11 +57,7 @@ export default {
       :disabled="currentBranch && !currentBranch.can_push"
       :title="$options.currentBranchPermissionsTooltip"
     >
-      <span
-        class="ide-radio-label"
-        v-html="commitToCurrentBranchText"
-      >
-      </span>
+      <span class="ide-radio-label" v-html="commitToCurrentBranchText"> </span>
     </radio-group>
     <radio-group
       :value="$options.commitToNewBranch"

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

@@ -42,18 +42,9 @@ export default {
 
 <template>
   <div class="d-flex ide-commit-editor-header align-items-center">
-    <file-icon
-      :file-name="activeFile.name"
-      :size="16"
-      class="mr-2"
-    />
-    <strong class="mr-2">
-      {{ activeFile.path }}
-    </strong>
-    <changed-file-icon
-      :file="activeFile"
-      class="ml-0"
-    />
+    <file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
+    <strong class="mr-2"> {{ activeFile.path }} </strong>
+    <changed-file-icon :file="activeFile" class="ml-0" />
     <div class="ml-auto">
       <button
         v-if="!isStaged"
@@ -66,7 +57,7 @@ export default {
       <button
         :class="{
           'btn-success': !isStaged,
-          'btn-warning': isStaged
+          'btn-warning': isStaged,
         }"
         type="button"
         class="btn btn-inverted"