[ci skip] Fix more rules

15 files changed, 370 insertions, 305 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index fc795936abf..5324d5dc797 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -23,6 +23,12 @@
    */
 
   export default {
+    components: {
+      ciIcon,
+    },
+    directives: {
+      tooltip,
+    },
     props: {
       status: {
         type: Object,
@@ -34,12 +40,6 @@
         default: true,
       },
     },
-    components: {
-      ciIcon,
-    },
-    directives: {
-      tooltip,
-    },
     computed: {
       cssClass() {
         const className = this.status.group;
@@ -53,11 +53,12 @@
     :href="status.details_path"
     :class="cssClass"
     v-tooltip
-    :title="!showText ? status.text : ''">
+    :title="!showText ? status.text : ''"
+  >
     <ci-icon :status="status" />
 
     <template v-if="showText">
-      {{status.text}}
+      {{ status.text }}
     </template>
   </a>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 2a018f38366..8fea746f4de 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -23,6 +23,9 @@
    * - Jobs show view sidebar
    */
   export default {
+    components: {
+      icon,
+    },
     props: {
       status: {
         type: Object,
@@ -30,10 +33,6 @@
       },
     },
 
-    components: {
-      icon,
-    },
-
     computed: {
       cssClass() {
         const status = this.status.group;
@@ -43,9 +42,7 @@
   };
 </script>
 <template>
-  <span
-    :class="cssClass">
-    <icon
-      :name="status.icon"/>
+  <span :class="cssClass">
+    <icon :name="status.icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 3a7143c450e..e18852af6e9 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -4,7 +4,7 @@
    */
 
   export default {
-    name: 'clipboardButton',
+    name: 'ClipboardButton',
     props: {
       text: {
         type: String,
@@ -23,10 +23,12 @@
     type="button"
     class="btn btn-transparent btn-clipboard"
     :data-title="title"
-    :data-clipboard-text="text">
-      <i
-        aria-hidden="true"
-        class="fa fa-clipboard">
-      </i>
+    :data-clipboard-text="text"
+  >
+    <i
+      aria-hidden="true"
+      class="fa fa-clipboard"
+    >
+    </i>
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 59ca9a0a6d4..6d1fe7ee8ca 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -2,9 +2,16 @@
   import commitIconSvg from 'icons/_icon_commit.svg';
   import userAvatarLink from './user_avatar/user_avatar_link.vue';
   import tooltip from '../directives/tooltip';
-  import Icon from '../../vue_shared/components/icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
+    directives: {
+      tooltip,
+    },
+    components: {
+      userAvatarLink,
+      icon,
+    },
     props: {
       /**
        * Indicates the existance of a tag.
@@ -103,13 +110,6 @@
           this.author.username ? `${this.author.username}'s avatar` : null;
       },
     },
-    directives: {
-      tooltip,
-    },
-    components: {
-      userAvatarLink,
-      Icon,
-    },
     created() {
       this.commitIconSvg = commitIconSvg;
     },
@@ -118,17 +118,17 @@
 <template>
   <div class="branch-commit">
     <template v-if="hasCommitRef && showBranch">
-      <div
-        class="icon-container hidden-xs">
+      <div class="icon-container hidden-xs">
         <i
           v-if="tag"
           class="fa fa-tag"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
         </i>
         <icon
           v-if="!tag"
-          name="fork">
-        </icon>
+          name="fork"
+        />
       </div>
 
       <a
@@ -136,25 +136,29 @@
         :href="commitRef.ref_url"
         v-tooltip
         data-container="body"
-        :title="commitRef.name">
-        {{commitRef.name}}
+        :title="commitRef.name"
+      >
+        {{ commitRef.name }}
       </a>
     </template>
     <div
       v-html="commitIconSvg"
-      class="commit-icon js-commit-icon">
+      class="commit-icon js-commit-icon"
+    >
     </div>
 
     <a
       class="commit-sha"
-      :href="commitUrl">
-      {{shortSha}}
+      :href="commitUrl"
+    >
+      {{ shortSha }}
     </a>
 
     <div class="commit-title flex-truncate-parent">
       <span
         v-if="title"
-        class="flex-truncate-child">
+        class="flex-truncate-child"
+      >
         <user-avatar-link
           v-if="hasAuthor"
           class="avatar-image-container"
@@ -165,8 +169,9 @@
         />
         <a
           class="commit-row-message"
-          :href="commitUrl">
-          {{title}}
+          :href="commitUrl"
+        >
+          {{ title }}
         </a>
       </span>
       <span v-else>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index 65c64967fdc..c9d7c0f4999 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -16,6 +16,10 @@
 
   */
   export default {
+    components: {
+      loadingIcon,
+      icon,
+    },
     props: {
       fileName: {
         type: String,
@@ -52,10 +56,6 @@
         default: '',
       },
     },
-    components: {
-      loadingIcon,
-      icon,
-    },
     computed: {
       spriteHref() {
         const iconName = getIconForFile(this.fileName) || 'file';
@@ -75,9 +75,9 @@
   <span>
     <svg
       :class="[iconSizeClass, cssClasses]"
-      v-if="!loading && !folder">
-      <use 
-        v-bind="{'xlink:href':spriteHref}"/>
+      v-if="!loading && !folder"
+    >
+      <use v-bind="{ 'xlink:href':spriteHref }" />
     </svg>
     <icon
       v-if="!loading && folder"
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index d305bd6acdc..79d240bdbba 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,75 +1,74 @@
 <script>
-import ciIconBadge from './ci_badge_link.vue';
-import loadingIcon from './loading_icon.vue';
-import timeagoTooltip from './time_ago_tooltip.vue';
-import tooltip from '../directives/tooltip';
-import userAvatarImage from './user_avatar/user_avatar_image.vue';
-
-/**
- * Renders header component for job and pipeline page based on UI mockups
- *
- * Used in:
- * - job show page
- * - pipeline show page
- */
-export default {
-  props: {
-    status: {
-      type: Object,
-      required: true,
+  import ciIconBadge from './ci_badge_link.vue';
+  import loadingIcon from './loading_icon.vue';
+  import timeagoTooltip from './time_ago_tooltip.vue';
+  import tooltip from '../directives/tooltip';
+  import userAvatarImage from './user_avatar/user_avatar_image.vue';
+
+  /**
+   * Renders header component for job and pipeline page based on UI mockups
+   *
+   * Used in:
+   * - job show page
+   * - pipeline show page
+   */
+  export default {
+    directives: {
+      tooltip,
     },
-    itemName: {
-      type: String,
-      required: true,
-    },
-    itemId: {
-      type: Number,
-      required: true,
-    },
-    time: {
-      type: String,
-      required: true,
-    },
-    user: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    actions: {
-      type: Array,
-      required: false,
-      default: () => [],
+
+    components: {
+      ciIconBadge,
+      loadingIcon,
+      timeagoTooltip,
+      userAvatarImage,
     },
-    hasSidebarButton: {
-      type: Boolean,
-      required: false,
-      default: false,
+    props: {
+      status: {
+        type: Object,
+        required: true,
+      },
+      itemName: {
+        type: String,
+        required: true,
+      },
+      itemId: {
+        type: Number,
+        required: true,
+      },
+      time: {
+        type: String,
+        required: true,
+      },
+      user: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      actions: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      hasSidebarButton: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
-  },
-
-  directives: {
-    tooltip,
-  },
-
-  components: {
-    ciIconBadge,
-    loadingIcon,
-    timeagoTooltip,
-    userAvatarImage,
-  },
-
-  computed: {
-    userAvatarAltText() {
-      return `${this.user.name}'s avatar`;
+
+    computed: {
+      userAvatarAltText() {
+        return `${this.user.name}'s avatar`;
+      },
     },
-  },
 
-  methods: {
-    onClickAction(action) {
-      this.$emit('actionClicked', action);
+    methods: {
+      onClickAction(action) {
+        this.$emit('actionClicked', action);
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
@@ -79,7 +78,7 @@ export default {
       <ci-icon-badge :status="status" />
 
       <strong>
-        {{itemName}} #{{itemId}}
+        {{ itemName }} #{{ itemId }}
       </strong>
 
       triggered
@@ -93,30 +92,35 @@ export default {
           v-tooltip
           :href="user.path"
           :title="user.email"
-          class="js-user-link commit-committer-link">
+          class="js-user-link commit-committer-link"
+        >
 
           <user-avatar-image
             :img-src="user.avatar_url"
             :img-alt="userAvatarAltText"
             :tooltip-text="user.name"
             :img-size="24"
-            />
+          />
 
-          {{user.name}}
+          {{ user.name }}
         </a>
       </template>
     </section>
 
     <section
       class="header-action-buttons"
-      v-if="actions.length">
+      v-if="actions.length"
+    >
       <template
-        v-for="action in actions">
+        v-for="(action, i) in actions"
+      >
         <a
           v-if="action.type === 'link'"
           :href="action.path"
-          :class="action.cssClass">
-          {{action.label}}
+          :class="action.cssClass"
+          :key="i"
+        >
+          {{ action.label }}
         </a>
 
         <a
@@ -124,8 +128,10 @@ export default {
           :href="action.path"
           data-method="post"
           rel="nofollow"
-          :class="action.cssClass">
-          {{action.label}}
+          :class="action.cssClass"
+          :key="i"
+        >
+          {{ action.label }}
         </a>
 
         <button
@@ -133,12 +139,15 @@ export default {
           @click="onClickAction(action)"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          type="button">
-          {{action.label}}
+          type="button"
+          :key="i"
+        >
+          {{ action.label }}
           <i
             v-show="action.isLoading"
             class="fa fa-spin fa-spinner"
-            aria-hidden="true">
+            aria-hidden="true"
+          >
           </i>
         </button>
       </template>
@@ -147,11 +156,13 @@ export default {
         type="button"
         class="btn btn-default visible-xs-block visible-sm-block sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
         aria-label="Toggle Sidebar"
-        id="toggleSidebar">
+        id="toggleSidebar"
+      >
         <i
           class="fa fa-angle-double-left"
           aria-hidden="true"
-          aria-labelledby="toggleSidebar">
+          aria-labelledby="toggleSidebar"
+        >
         </i>
       </button>
     </section>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 365229ea274..6a2e05000e1 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -1,17 +1,17 @@
 <script>
 
-/* This is a re-usable vue component for rendering a svg sprite
-   icon
+  /* This is a re-usable vue component for rendering a svg sprite
+    icon
 
-  Sample configuration:
+    Sample configuration:
 
-  <icon
-    name="retry"
-    :size="32"
-    css-classes="top"
-  />
+    <icon
+      name="retry"
+      :size="32"
+      css-classes="top"
+    />
 
-*/
+  */
   // only allow classes in images.scss e.g. s12
   const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
 
@@ -80,7 +80,6 @@
     :height="height"
     :x="x"
     :y="y">
-    <use
-      v-bind="{'xlink:href':spriteHref}"/>
+    <use v-bind="{ 'xlink:href':spriteHref }" />
   </svg>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 7cf2e029cf6..0a30f467b08 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -46,6 +46,6 @@ export default {
     class="avatar identicon"
     :class="sizeClass"
     :style="identiconStyles">
-    {{identiconTitle}}
+    {{ identiconTitle }}
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 564fc5029af..168799b9a58 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -1,7 +1,10 @@
 <script>
-  import Icon from '../../../vue_shared/components/icon.vue';
+  import icon from '../../../vue_shared/components/icon.vue';
 
   export default {
+    components: {
+      icon,
+    },
     props: {
       isLocked: {
         type: Boolean,
@@ -16,10 +19,6 @@
       },
     },
 
-    components: {
-      Icon,
-    },
-
     computed: {
       warningIcon() {
         if (this.isConfidential) return 'eye-slash';
@@ -37,12 +36,12 @@
 <template>
   <div class="issuable-note-warning">
     <icon
-        :name="warningIcon"
-        :size="16"
-        class="icon inline"
-        aria-hidden="true"
-        v-if="!isLockedAndConfidential">
-    </icon>
+      :name="warningIcon"
+      :size="16"
+      class="icon inline"
+      aria-hidden="true"
+      v-if="!isLockedAndConfidential"
+    />
 
     <span v-if="isLockedAndConfidential">
       {{ __('This issue is confidential and locked.') }}
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 247943f83e6..31caa25b723 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -1,55 +1,61 @@
 <script>
 
-/* This is a re-usable vue component for rendering a button
-   that will probably be sending off ajax requests and need
-   to show the loading status by setting the `loading` option.
-   This can also be used for initial page load when you don't
-   know the action of the button yet by setting
-   `loading: true, label: undefined`.
+  /* This is a re-usable vue component for rendering a button
+    that will probably be sending off ajax requests and need
+    to show the loading status by setting the `loading` option.
+    This can also be used for initial page load when you don't
+    know the action of the button yet by setting
+    `loading: true, label: undefined`.
 
-  Sample configuration:
+    Sample configuration:
 
-  <loading-button
-    :loading="true"
-    :label="Hello"
-    @click="..."
-  />
+    <loading-button
+      :loading="true"
+      :label="Hello"
+      @click="..."
+    />
 
-*/
+  */
 
-import loadingIcon from './loading_icon.vue';
+  import loadingIcon from './loading_icon.vue';
 
-export default {
-  props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
+  export default {
+    components: {
+      loadingIcon,
     },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
+    props: {
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      label: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      containerClass: {
+        type: String,
+        required: false,
+        default: 'btn btn-align-content',
+      },
     },
-    label: {
-      type: String,
-      required: false,
+    computed: {
+      hasLabel() {
+        return this.label !== '';
+      },
     },
-    containerClass: {
-      type: String,
-      required: false,
-      default: 'btn btn-align-content',
+    methods: {
+      onClick(e) {
+        this.$emit('click', e);
+      },
     },
-  },
-  components: {
-    loadingIcon,
-  },
-  methods: {
-    onClick(e) {
-      this.$emit('click', e);
-    },
-  },
-};
+  };
 </script>
 
 <template>
@@ -59,23 +65,23 @@ export default {
     :class="containerClass"
     :disabled="loading || disabled"
   >
-      <transition name="fade">
-        <loading-icon
-          v-if="loading"
-          :inline="true"
-          class="js-loading-button-icon"
-          :class="{
-              'append-right-5': label
-          }"
-        />
-      </transition>
-      <transition name="fade">
-        <span
-          v-if="label"
-          class="js-loading-button-label"
-        >
-          {{ label }}
-        </span>
-      </transition>
+    <transition name="fade">
+      <loading-icon
+        v-if="loading"
+        :inline="true"
+        class="js-loading-button-icon"
+        :class="{
+          'append-right-5': label
+        }"
+      />
+    </transition>
+    <transition name="fade">
+      <span
+        v-if="hasLabel"
+        class="js-loading-button-label"
+      >
+        {{ label }}
+      </span>
+    </transition>
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_icon.vue b/app/assets/javascripts/vue_shared/components/loading_icon.vue
index 15581d5c2a0..3d2b6c44384 100644
--- a/app/assets/javascripts/vue_shared/components/loading_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_icon.vue
@@ -38,7 +38,8 @@
       class="fa fa-spin fa-spinner"
       :class="cssClass"
       aria-hidden="true"
-      :aria-label="label">
+      :aria-label="label"
+    >
     </i>
   </component>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 15e3d713448..1371dca0c35 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -6,6 +6,11 @@
   import icon from '../icon.vue';
 
   export default {
+    components: {
+      markdownHeader,
+      markdownToolbar,
+      icon,
+    },
     props: {
       markdownPreviewPath: {
         type: String,
@@ -24,6 +29,7 @@
       quickActionsDocsPath: {
         type: String,
         required: false,
+        default: '',
       },
       canAttachFile: {
         type: Boolean,
@@ -45,17 +51,24 @@
         previewMarkdown: false,
       };
     },
-    components: {
-      markdownHeader,
-      markdownToolbar,
-      icon,
-    },
     computed: {
       shouldShowReferencedUsers() {
         const referencedUsersThreshold = 10;
         return this.referencedUsers.length >= referencedUsersThreshold;
       },
     },
+    mounted() {
+      /*
+        GLForm class handles all the toolbar buttons
+      */
+      return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
+    },
+    beforeDestroy() {
+      const glForm = $(this.$refs['gl-form']).data('gl-form');
+      if (glForm) {
+        glForm.destroy();
+      }
+    },
     methods: {
       showPreviewTab() {
         if (this.previewMarkdown) return;
@@ -98,18 +111,6 @@
         });
       },
     },
-    mounted() {
-      /*
-        GLForm class handles all the toolbar buttons
-      */
-      return new GLForm($(this.$refs['gl-form']), this.enableAutocomplete);
-    },
-    beforeDestroy() {
-      const glForm = $(this.$refs['gl-form']).data('gl-form');
-      if (glForm) {
-        glForm.destroy();
-      }
-    },
   };
 </script>
 
@@ -121,34 +122,39 @@
     <markdown-header
       :preview-markdown="previewMarkdown"
       @preview-markdown="showPreviewTab"
-      @write-markdown="showWriteTab" />
+      @write-markdown="showWriteTab"
+    />
     <div
       class="md-write-holder"
-      v-show="!previewMarkdown">
+      v-show="!previewMarkdown"
+    >
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
         <a
           class="zen-control zen-control-leave js-zen-leave"
           href="#"
-          aria-label="Enter zen mode">
+          aria-label="Enter zen mode"
+        >
           <icon
             name="screen-normal"
-            :size="32">
-          </icon>
+            :size="32"
+          />
         </a>
         <markdown-toolbar
           :markdown-docs-path="markdownDocsPath"
           :quick-actions-docs-path="quickActionsDocsPath"
           :can-attach-file="canAttachFile"
-          />
+        />
       </div>
     </div>
     <div
       class="md md-preview-holder md-preview"
-      v-show="previewMarkdown">
+      v-show="previewMarkdown"
+    >
       <div
         ref="markdown-preview"
-        v-html="markdownPreview">
+        v-html="markdownPreview"
+      >
       </div>
       <span v-if="markdownPreviewLoading">
         Loading...
@@ -158,23 +164,27 @@
       <div
         v-if="referencedCommands"
         v-html="referencedCommands"
-        class="referenced-commands"></div>
+        class="referenced-commands"
+      >
+      </div>
       <div
         v-if="shouldShowReferencedUsers"
-        class="referenced-users">
-          <span>
-            <i
-              class="fa fa-exclamation-triangle"
-              aria-hidden="true">
-            </i>
-            You are about to add
-            <strong>
-              <span class="js-referenced-users-count">
-                {{referencedUsers.length}}
-              </span>
-            </strong> people to the discussion. Proceed with caution.
-          </span>
-        </div>
+        class="referenced-users"
+      >
+        <span>
+          <i
+            class="fa fa-exclamation-triangle"
+            aria-hidden="true"
+          >
+          </i>
+          You are about to add
+          <strong>
+            <span class="js-referenced-users-count">
+              {{ referencedUsers.length }}
+            </span>
+          </strong> people to the discussion. Proceed with caution.
+        </span>
+      </div>
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 36d2d1dc164..f65eab11a27 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -4,18 +4,26 @@
   import icon from '../icon.vue';
 
   export default {
+    directives: {
+      tooltip,
+    },
+    components: {
+      toolbarButton,
+      icon,
+    },
     props: {
       previewMarkdown: {
         type: Boolean,
         required: true,
       },
     },
-    directives: {
-      tooltip,
+    mounted() {
+      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
-    components: {
-      toolbarButton,
-      icon,
+    beforeDestroy() {
+      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
     methods: {
       isMarkdownForm(form) {
@@ -36,14 +44,6 @@
         this.$emit('write-markdown');
       },
     },
-    mounted() {
-      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
-      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
-    },
-    beforeDestroy() {
-      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
-      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
-    },
   };
 </script>
 
@@ -52,12 +52,14 @@
     <ul class="nav-links clearfix">
       <li
         class="md-header-tab"
-        :class="{ active: !previewMarkdown }">
+        :class="{ active: !previewMarkdown }"
+      >
         <a
           class="js-write-link"
           href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="writeMarkdownTab($event)">
+          @click.prevent="writeMarkdownTab($event)"
+        >
           Write
         </a>
       </li>
@@ -68,46 +70,55 @@
           class="js-preview-link"
           href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="previewMarkdownTab($event)">
+          @click.prevent="previewMarkdownTab($event)"
+        >
           Preview
         </a>
       </li>
       <li
         class="md-header-toolbar"
-        :class="{ active: !previewMarkdown }">
+        :class="{ active: !previewMarkdown }"
+      >
         <toolbar-button
           tag="**"
           button-title="Add bold text"
-          icon="bold" />
+          icon="bold"
+        />
         <toolbar-button
           tag="*"
           button-title="Add italic text"
-          icon="italic" />
+          icon="italic"
+        />
         <toolbar-button
           tag="> "
           :prepend="true"
           button-title="Insert a quote"
-          icon="quote" />
+          icon="quote"
+        />
         <toolbar-button
           tag="`"
           tag-block="```"
           button-title="Insert code"
-          icon="code" />
+          icon="code"
+        />
         <toolbar-button
           tag="* "
           :prepend="true"
           button-title="Add a bullet list"
-          icon="list-bulleted" />
+          icon="list-bulleted"
+        />
         <toolbar-button
           tag="1. "
           :prepend="true"
           button-title="Add a numbered list"
-          icon="list-numbered" />
+          icon="list-numbered"
+        />
         <toolbar-button
           tag="* [ ] "
           :prepend="true"
           button-title="Add a task list"
-          icon="task-done" />
+          icon="task-done"
+        />
         <button
           v-tooltip
           aria-label="Go full screen"
@@ -115,10 +126,11 @@
           data-container="body"
           tabindex="-1"
           title="Go full screen"
-          type="button">
+          type="button"
+        >
           <icon
-            name="screen-full">
-          </icon>
+            name="screen-full"
+          />
         </button>
       </li>
     </ul>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index ea2509d2839..c0ee88bbf72 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -8,6 +8,7 @@
       quickActionsDocsPath: {
         type: String,
         required: false,
+        default: '',
       },
       canAttachFile: {
         type: Boolean,
@@ -15,32 +16,40 @@
         default: true,
       },
     },
+    computed: {
+      hasQuickActionsDocsPath() {
+        return this.quickActionsDocsPath !== '';
+      },
+    },
   };
 </script>
 
 <template>
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
-      <template v-if="!quickActionsDocsPath && markdownDocsPath">
+      <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
         <a
           :href="markdownDocsPath"
           target="_blank"
-          tabindex="-1">
+          tabindex="-1"
+        >
           Markdown is supported
         </a>
       </template>
-      <template v-if="quickActionsDocsPath && markdownDocsPath">
-         <a
+      <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
+        <a
           :href="markdownDocsPath"
           target="_blank"
-          tabindex="-1">
+          tabindex="-1"
+        >
           Markdown
         </a>
         and
-         <a
+        <a
           :href="quickActionsDocsPath"
           target="_blank"
-          tabindex="-1">
+          tabindex="-1"
+        >
           quick actions
         </a>
         are supported
@@ -53,46 +62,58 @@
       <span class="uploading-progress-container hide">
         <i
           class="fa fa-file-image-o toolbar-button-icon"
-          aria-hidden="true"></i>
+          aria-hidden="true"
+        >
+        </i>
         <span class="attaching-file-message"></span>
         <span class="uploading-progress">0%</span>
         <span class="uploading-spinner">
           <i
             class="fa fa-spinner fa-spin toolbar-button-icon"
-            aria-hidden="true"></i>
+            aria-hidden="true"
+          >
+          </i>
         </span>
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
           <i
             class="fa fa-file-image-o toolbar-button-icon"
-            aria-hidden="true"></i>
+            aria-hidden="true"
+          >
+          </i>
         </span>
         <span class="uploading-error-message"></span>
         <button
           class="retry-uploading-link"
-          type="button">
-            Try again
+          type="button"
+        >
+          Try again
         </button>
         or
         <button
           class="attach-new-file markdown-selector"
-          type="button">
+          type="button"
+        >
           attach a new file
         </button>
       </span>
       <button
         class="markdown-selector button-attach-file"
         tabindex="-1"
-        type="button">
+        type="button"
+      >
         <i
           class="fa fa-file-image-o toolbar-button-icon"
-          aria-hidden="true"></i>
+          aria-hidden="true"
+        >
+        </i>
         Attach a file
       </button>
       <button
         class="btn btn-default btn-xs hide button-cancel-uploading-files"
-        type="button">
+        type="button"
+      >
         Cancel
       </button>
     </span>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index e3e41f8f0ca..2d2d69ebeb2 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -3,6 +3,12 @@
   import icon from '../icon.vue';
 
   export default {
+    components: {
+      icon,
+    },
+    directives: {
+      tooltip,
+    },
     props: {
       buttonTitle: {
         type: String,
@@ -27,12 +33,6 @@
         default: false,
       },
     },
-    components: {
-      icon,
-    },
-    directives: {
-      tooltip,
-    },
   };
 </script>
 
@@ -47,9 +47,10 @@
     :data-md-block="tagBlock"
     :data-md-prepend="prepend"
     :title="buttonTitle"
-    :aria-label="buttonTitle">
+    :aria-label="buttonTitle"
+  >
     <icon
-      :name="icon">
-    </icon>
+      :name="icon"
+    />
   </button>
 </template>