Prettify all the things

12 files changed, 61 insertions, 206 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index a8b5c7a16d0..d360dc42cd3 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/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"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
index b0e60edcbe5..5119dbf32eb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue
+++ b/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"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
index d0a60d647e5..a23bae8e4c7 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 802827fce76..e5cd2411541 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/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"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 3e3539e364b..a1094570275 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/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
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index 699fa7dc937..3156a398113 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index ee0e72cd05f..4be4b02ac1e 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 37ca108fafc..3173e8a4f9f 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
index 969e2aa61c4..3525084b1cb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
index adf4b479c97..02c2004d495 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index a6df91b79c2..b1d5de8682d 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -9,23 +9,11 @@ export default {
 </script>
 
 <template>
-  <div
-    class="multi-file-commit-panel-success-message"
-    aria-live="assertive"
-  >
-    <div class="svg-content svg-80">
-      <img
-        :src="committedStateSvgPath"
-        alt=""
-      />
-    </div>
+  <div class="multi-file-commit-panel-success-message" aria-live="assertive">
+    <div class="svg-content svg-80"><img :src="committedStateSvgPath" alt="" /></div>
     <div class="append-right-default prepend-left-default">
-      <div
-        class="text-content text-center"
-      >
-        <h4>
-          {{ __('All changes are committed') }}
-        </h4>
+      <div class="text-content text-center">
+        <h4>{{ __('All changes are committed') }}</h4>
         <p v-html="lastCommitMsg"></p>
       </div>
     </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
index 86c40602074..ce41fcdb087 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
@@ -23,10 +23,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="__('Unstage changes')"
@@ -36,13 +33,9 @@ export default {
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click.stop.prevent="unstageChange(path)"
+      @click.stop.prevent="unstageChange(path);"
     >
-      <icon
-        :size="16"
-        name="redo"
-        class="ml-auto mr-auto"
-      />
+      <icon :size="16" name="redo" class="ml-auto mr-auto" />
     </button>
   </div>
 </template>