1 files changed, 29 insertions, 71 deletions

diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 0f0d7f4661a..d99694b06e9 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -1,8 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   name: 'NoteActions',
@@ -11,7 +10,7 @@ export default {
     GlLoadingIcon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     authorId: {
@@ -119,116 +118,76 @@ export default {
 
 <template>
   <div class="note-actions">
-    <span
-      v-if="accessLevel"
-      class="note-role user-access-role">
-      {{ accessLevel }}
-    </span>
-    <div
-      v-if="canResolve"
-      class="note-actions-item">
+    <span v-if="accessLevel" class="note-role user-access-role">{{ accessLevel }}</span>
+    <div v-if="canResolve" class="note-actions-item">
       <button
-        v-tooltip
+        v-gl-tooltip
         :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
         :title="resolveButtonTitle"
         :aria-label="resolveButtonTitle"
         type="button"
         class="line-resolve-btn note-action-button"
-        @click="onResolve">
+        @click="onResolve"
+      >
         <template v-if="!isResolving">
           <icon name="check-circle" />
         </template>
-        <gl-loading-icon
-          v-else
-          inline
-        />
+        <gl-loading-icon v-else inline />
       </button>
     </div>
-    <div
-      v-if="canAwardEmoji"
-      class="note-actions-item">
+    <div v-if="canAwardEmoji" class="note-actions-item">
       <a
-        v-tooltip
+        v-gl-tooltip.bottom
         :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
         class="note-action-button note-emoji-button js-add-award js-note-emoji"
         data-position="right"
-        data-placement="bottom"
-        data-container="body"
         href="#"
         title="Add reaction"
       >
-        <gl-loading-icon inline/>
+        <gl-loading-icon inline />
         <icon
           css-classes="link-highlight award-control-icon-neutral"
           name="emoji_slightly_smiling_face"
         />
-        <icon
-          css-classes="link-highlight award-control-icon-positive"
-          name="emoji_smiley"
-        />
-        <icon
-          css-classes="link-highlight award-control-icon-super-positive"
-          name="emoji_smiley"
-        />
+        <icon css-classes="link-highlight award-control-icon-positive" name="emoji_smiley" />
+        <icon css-classes="link-highlight award-control-icon-super-positive" name="emoji_smiley" />
       </a>
     </div>
-    <div
-      v-if="canEdit"
-      class="note-actions-item">
+    <div v-if="canEdit" class="note-actions-item">
       <button
-        v-tooltip
+        v-gl-tooltip.bottom
         type="button"
         title="Edit comment"
         class="note-action-button js-note-edit btn btn-transparent"
-        data-container="body"
-        data-placement="bottom"
-        @click="onEdit">
-        <icon
-          name="pencil"
-          css-classes="link-highlight"
-        />
+        @click="onEdit"
+      >
+        <icon name="pencil" css-classes="link-highlight" />
       </button>
     </div>
-    <div
-      v-if="showDeleteAction"
-      class="note-actions-item"
-    >
+    <div v-if="showDeleteAction" class="note-actions-item">
       <button
-        v-tooltip
+        v-gl-tooltip.bottom
         type="button"
         title="Delete comment"
         class="note-action-button js-note-delete btn btn-transparent"
-        data-container="body"
-        data-placement="bottom"
         @click="onDelete"
       >
-        <icon
-          name="remove"
-          class="link-highlight"
-        />
+        <icon name="remove" class="link-highlight" />
       </button>
     </div>
-    <div
-      v-else-if="shouldShowActionsDropdown"
-      class="dropdown more-actions note-actions-item">
+    <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item">
       <button
-        v-tooltip
+        v-gl-tooltip.bottom
         type="button"
         title="More actions"
         class="note-action-button more-actions-toggle btn btn-transparent"
         data-toggle="dropdown"
-        data-container="body"
-        data-placement="bottom">
-        <icon
-          css-classes="icon"
-          name="ellipsis_v"
-        />
+      >
+        <icon css-classes="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">
-          <a :href="reportAbusePath">
-            {{ __('Report abuse to GitLab') }}
-          </a>
+          <a :href="reportAbusePath">{{ __('Report abuse to GitLab') }}</a>
         </li>
         <li v-if="noteUrl">
           <button
@@ -243,10 +202,9 @@ export default {
           <button
             class="btn btn-transparent js-note-delete js-note-delete"
             type="button"
-            @click.prevent="onDelete">
-            <span class="text-danger">
-              {{ __('Delete comment') }}
-            </span>
+            @click.prevent="onDelete"
+          >
+            <span class="text-danger">{{ __('Delete comment') }}</span>
           </button>
         </li>
       </ul>