Prettify all the things

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.`) }}
-              <a
-                :href="ingressHelpPath"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+              }}
+              <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>
-        <navigation-tabs
-          :tabs="tabs"
-          scope="deployKeys"
-          @onChangeTab="onChangeTab"
-        />
+        <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" />
       </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')"