Prettify all the things

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/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"

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

@@ -13,22 +13,12 @@ export default {
     v-if="!lastCommitMsg"
     class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
   >
-    <div
-      class="ide-commit-empty-state-container"
-    >
-      <div class="svg-content svg-80">
-        <img :src="noChangesStateSvgPath" />
-      </div>
+    <div class="ide-commit-empty-state-container">
+      <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
       <div class="append-right-default prepend-left-default">
-        <div
-          class="text-content text-center"
-        >
-          <h4>
-            {{ __('No changes') }}
-          </h4>
-          <p>
-            {{ __('Edit files in the editor and commit changes here') }}
-          </p>
+        <div class="text-content text-center">
+          <h4>{{ __('No changes') }}</h4>
+          <p>{{ __('Edit files in the editor and commit changes here') }}</p>
         </div>
       </div>
     </div>

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

@@ -96,7 +96,7 @@ export default {
   <div
     :class="{
       'is-compact': isCompact,
-      'is-full': !isCompact
+      'is-full': !isCompact,
     }"
     :style="{
       height: componentHeight ? `${componentHeight}px` : null,
@@ -109,11 +109,7 @@ export default {
       @enter="enterTransition"
       @after-enter="afterEndTransition"
     >
-      <div
-        v-if="isCompact"
-        ref="compactEl"
-        class="commit-form-compact"
-      >
+      <div v-if="isCompact" ref="compactEl" class="commit-form-compact">
         <button
           :disabled="!hasChanges"
           type="button"
@@ -122,21 +118,10 @@ export default {
         >
           {{ __('Commit…') }}
         </button>
-        <p
-          class="text-center"
-          v-html="overviewText"
-        ></p>
+        <p class="text-center" v-html="overviewText"></p>
       </div>
-      <form
-        v-if="!isCompact"
-        ref="formEl"
-        @submit.prevent.stop="commitChanges"
-      >
-        <transition name="fade">
-          <success-message
-            v-show="lastCommitMsg"
-          />
-        </transition>
+      <form v-if="!isCompact" ref="formEl" @submit.prevent.stop="commitChanges">
+        <transition name="fade"> <success-message v-show="lastCommitMsg" /> </transition>
         <commit-message-field
           :text="commitMessage"
           :placeholder="preBuiltCommitMessage"

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

@@ -93,24 +93,11 @@ export default {
 </script>
 
 <template>
-  <div
-    class="ide-commit-list-container"
-  >
-    <header
-      class="multi-file-commit-panel-header d-flex mb-0"
-    >
-      <div
-        class="d-flex align-items-center flex-fill"
-      >
-        <icon
-          v-once
-          :name="iconName"
-          :size="18"
-          class="append-right-8"
-        />
-        <strong>
-          {{ titleText }}
-        </strong>
+  <div class="ide-commit-list-container">
+    <header class="multi-file-commit-panel-header d-flex mb-0">
+      <div class="d-flex align-items-center flex-fill">
+        <icon v-once :name="iconName" :size="18" class="append-right-8" />
+        <strong> {{ titleText }} </strong>
         <div class="d-flex ml-auto">
           <button
             ref="actionBtn"
@@ -119,7 +106,7 @@ export default {
             :aria-label="actionBtnText"
             :disabled="!filesLength"
             :class="{
-              'disabled-content': !filesLength
+              'disabled-content': !filesLength,
             }"
             type="button"
             class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
@@ -128,11 +115,7 @@ export default {
             data-boundary="viewport"
             @click="actionBtnClicked"
           >
-            <icon
-              :name="actionBtnIcon"
-              :size="16"
-              class="ml-auto mr-auto"
-            />
+            <icon :name="actionBtnIcon" :size="16" class="ml-auto mr-auto" />
           </button>
           <button
             v-if="!stagedList"
@@ -141,7 +124,7 @@ export default {
             :aria-label="__('Discard all changes')"
             :disabled="!filesLength"
             :class="{
-              'disabled-content': !filesLength
+              'disabled-content': !filesLength,
             }"
             type="button"
             class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
@@ -150,23 +133,13 @@ export default {
             data-boundary="viewport"
             @click="openDiscardModal"
           >
-            <icon
-              :size="16"
-              name="remove-all"
-              class="ml-auto mr-auto"
-            />
+            <icon :size="16" name="remove-all" class="ml-auto mr-auto" />
           </button>
         </div>
       </div>
     </header>
-    <ul
-      v-if="filesLength"
-      class="multi-file-commit-list list-unstyled append-bottom-0"
-    >
-      <li
-        v-for="file in fileList"
-        :key="file.key"
-      >
+    <ul v-if="filesLength" class="multi-file-commit-list list-unstyled append-bottom-0">
+      <li v-for="file in fileList" :key="file.key">
         <list-item
           :file="file"
           :action-component="itemActionComponent"
@@ -176,10 +149,7 @@ export default {
         />
       </li>
     </ul>
-    <p
-      v-else
-      class="multi-file-commit-list form-text text-muted text-center"
-    >
+    <p v-else class="multi-file-commit-list form-text text-muted text-center">
       {{ emptyStateText }}
     </p>
     <gl-modal

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

@@ -69,9 +69,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="multi-file-commit-list-collapsed text-center"
-  >
+  <div class="multi-file-commit-list-collapsed text-center">
     <div
       v-tooltip
       :title="titleTooltip"
@@ -79,11 +77,7 @@ export default {
       data-placement="left"
       class="append-bottom-15"
     >
-      <icon
-        v-once
-        :name="iconName"
-        :size="18"
-      />
+      <icon v-once :name="iconName" :size="18" />
     </div>
     <div
       v-tooltip
@@ -92,11 +86,7 @@ export default {
       data-placement="left"
       class="append-bottom-10"
     >
-      <icon
-        :name="additionIconName"
-        :size="18"
-        :css-classes="addedFilesIconClass"
-      />
+      <icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -106,11 +96,7 @@ export default {
       data-placement="left"
       class="prepend-top-10 append-bottom-10"
     >
-      <icon
-        :name="modifiedIconName"
-        :size="18"
-        :css-classes="modifiedFilesClass"
-      />
+      <icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>

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

@@ -99,7 +99,7 @@ export default {
       v-tooltip
       :title="tooltipTitle"
       :class="{
-        'is-active': isActive
+        'is-active': isActive,
       }"
       class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
       role="button"
@@ -107,18 +107,11 @@ export default {
       @click="openFileInEditor"
     >
       <span class="multi-file-commit-list-file-path d-flex align-items-center">
-        <file-icon
-          :file-name="file.name"
-          class="append-right-8"
-        />{{ file.name }}
+        <file-icon :file-name="file.name" class="append-right-8" />{{ file.name }}
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon
-            :name="iconName"
-            :size="16"
-            :css-classes="iconClass"
-          />
+          <icon :name="iconName" :size="16" :css-classes="iconClass" />
         </div>
       </div>
     </div>

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

@@ -71,24 +71,16 @@ export default {
   <fieldset class="common-note-form ide-commit-message-field">
     <div
       :class="{
-        'is-focused': isFocused
+        'is-focused': isFocused,
       }"
       class="md-area"
     >
-      <div
-        v-once
-        class="md-header"
-      >
+      <div v-once class="md-header">
         <ul class="nav-links">
           <li>
             {{ __('Commit Message') }}
-            <span
-              v-popover="$options.popoverOptions"
-              class="form-text text-muted prepend-left-10"
-            >
-              <icon
-                name="question"
-              />
+            <span v-popover="$options.popoverOptions" class="form-text text-muted prepend-left-10">
+              <icon name="question" />
             </span>
           </li>
         </ul>
@@ -97,22 +89,13 @@ export default {
         <div class="ide-commit-message-highlights-container">
           <div
             :style="{
-              transform: `translate3d(0, ${-scrollTop}px, 0)`
+              transform: `translate3d(0, ${-scrollTop}px, 0)`,
             }"
             class="note-textarea highlights monospace"
           >
-            <div
-              v-for="(line, index) in allLines"
-              :key="index"
-            >
-              <span
-                v-text="line.text"
-              >
-              </span><mark
-                v-show="line.highlightedText"
-                v-text="line.highlightedText"
-              >
-              </mark>
+            <div v-for="(line, index) in allLines" :key="index">
+              <span v-text="line.text"> </span
+              ><mark v-show="line.highlightedText" v-text="line.highlightedText"> </mark>
             </div>
           </div>
         </div>
@@ -124,8 +107,8 @@ export default {
           name="commit-message"
           @scroll="handleScroll"
           @input="onInput"
-          @focus="updateIsFocused(true)"
-          @blur="updateIsFocused(false)"
+          @focus="updateIsFocused(true);"
+          @blur="updateIsFocused(false);"
         >
         </textarea>
       </div>

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

@@ -56,7 +56,7 @@ export default {
       v-tooltip
       :title="tooltipTitle"
       :class="{
-        'is-disabled': disabled
+        'is-disabled': disabled,
       }"
     >
       <input
@@ -65,27 +65,18 @@ export default {
         :disabled="disabled"
         type="radio"
         name="commit-action"
-        @change="updateCommitAction($event.target.value)"
+        @change="updateCommitAction($event.target.value);"
       />
       <span class="prepend-left-10">
-        <span
-          v-if="label"
-          class="ide-radio-label"
-        >
-          {{ label }}
-        </span>
-        <slot v-else></slot>
+        <span v-if="label" class="ide-radio-label"> {{ label }} </span> <slot v-else></slot>
       </span>
     </label>
-    <div
-      v-if="commitAction === value && showInput"
-      class="ide-commit-new-branch"
-    >
+    <div v-if="commitAction === value && showInput" class="ide-commit-new-branch">
       <input
         :placeholder="newBranchName"
         type="text"
         class="form-control monospace"
-        @input="updateBranchName($event.target.value)"
+        @input="updateBranchName($event.target.value);"
       />
     </div>
   </fieldset>

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

@@ -38,10 +38,7 @@ export default {
 </script>
 
 <template>
-  <div
-    v-once
-    class="multi-file-discard-btn d-flex"
-  >
+  <div v-once class="multi-file-discard-btn d-flex">
     <button
       v-tooltip
       :aria-label="__('Stage changes')"
@@ -51,13 +48,9 @@ export default {
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click.stop.prevent="stageChange(path)"
+      @click.stop.prevent="stageChange(path);"
     >
-      <icon
-        :size="16"
-        name="mobile-issue-close"
-        class="ml-auto mr-auto"
-      />
+      <icon :size="16" name="mobile-issue-close" class="ml-auto mr-auto" />
     </button>
     <button
       v-tooltip
@@ -70,18 +63,14 @@ export default {
       data-placement="bottom"
       @click.stop.prevent="showDiscardModal"
     >
-      <icon
-        :size="16"
-        name="remove"
-        class="ml-auto mr-auto"
-      />
+      <icon :size="16" name="remove" class="ml-auto mr-auto" />
     </button>
     <gl-modal
       :id="modalId"
       :header-title-text="modalTitle"
       :footer-primary-button-text="__('Discard changes')"
       footer-primary-button-variant="danger"
-      @submit="discardFileChanges(path)"
+      @submit="discardFileChanges(path);"
     >
       {{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
     </gl-modal>