Merge branch 'gt-use-gl-tooltip-directive' into 'master'

Use `gl-tooltip` directive in badges, cycle analytics, and diffs

See merge request gitlab-org/gitlab-ce!22770

app/assets/javascripts/badges/components/badge.vue

 <script>
 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: 'Badge',
   components: {
     Icon,
-    Tooltip,
     GlLoadingIcon,
   },
   directives: {
-    Tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     imageUrl: {
@@ -93,7 +91,7 @@ export default {
 
     <button
       v-show="hasError"
-      v-tooltip
+      v-gl-tooltip.hover
       :title="s__('Badges|Reload badge image')"
       class="btn btn-transparent btn-sm text-primary"
       type="button"

app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue

 <script>
-import tooltip from '../../vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     count: {
@@ -16,13 +16,12 @@ export default {
 <template>
   <span v-if="count === 50" class="events-info float-right">
     <i
-      v-tooltip
+      v-gl-tooltip
       :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"
     >
     </i>
     {{ n__('Showing %d event', 'Showing %d events', 50) }}

app/assets/javascripts/diffs/components/commit_item.vue

 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -21,9 +20,6 @@ import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_sta
  *
  */
 export default {
-  directives: {
-    tooltip,
-  },
   components: {
     UserAvatarLink,
     Icon,

app/assets/javascripts/diffs/components/compare_versions.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import Tooltip from '@gitlab/ui/dist/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -12,7 +12,7 @@ export default {
     Icon,
   },
   directives: {
-    Tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     mergeRequestDiffs: {
@@ -75,7 +75,7 @@ export default {
   <div class="mr-version-controls">
     <div class="mr-version-menus-container content-block">
       <button
-        v-tooltip.hover
+        v-gl-tooltip.hover
         type="button"
         class="btn btn-default append-right-8 js-toggle-tree-list"
         :class="{

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -4,7 +4,7 @@ import { mapActions, mapGetters } from 'vuex';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import Tooltip from '~/vue_shared/directives/tooltip';
+import { GlTooltipDirective } from '@gitlab/ui';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
 import EditButton from './edit_button.vue';
@@ -17,7 +17,7 @@ export default {
     FileIcon,
   },
   directives: {
-    Tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     discussionPath: {
@@ -161,23 +161,21 @@ export default {
         />
         <span v-if="diffFile.renamed_file">
           <strong
-            v-tooltip
+            v-gl-tooltip
             :title="diffFile.old_path"
             class="file-title-name"
-            data-container="body"
             v-html="diffFile.old_path_html"
           ></strong>
           →
           <strong
-            v-tooltip
+            v-gl-tooltip
             :title="diffFile.new_path"
             class="file-title-name"
-            data-container="body"
             v-html="diffFile.new_path_html"
           ></strong>
         </span>
 
-        <strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body">
+        <strong v-else v-gl-tooltip :title="filePath" class="file-title-name" data-container="body">
           {{ filePath }}
         </strong>
       </a>
@@ -233,7 +231,7 @@ export default {
 
       <a
         v-if="diffFile.external_url"
-        v-tooltip
+        v-gl-tooltip.hover
         :href="diffFile.external_url"
         :title="`View on ${diffFile.formatted_external_url}`"
         target="_blank"

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

 <script>
-import tooltip from '../directives/tooltip';
+import { GlTooltipDirective } from '@gitlab/ui';
 import timeagoMixin from '../mixins/timeago';
 import '../../lib/utils/datetime_utility';
 
@@ -9,7 +9,7 @@ import '../../lib/utils/datetime_utility';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
   props: {
@@ -17,13 +17,11 @@ export default {
       type: String,
       required: true,
     },
-
     tooltipPlacement: {
       type: String,
       required: false,
       default: 'top',
     },
-
     cssClass: {
       type: String,
       required: false,
@@ -34,11 +32,9 @@ export default {
 </script>
 <template>
   <time
-    v-tooltip
+    v-gl-tooltip="{ placement: tooltipPlacement }"
     :class="cssClass"
     :title="tooltipTitle(time)"
-    :data-placement="tooltipPlacement"
-    data-container="body"
     v-text="timeFormated(time)"
   >
   </time>

changelogs/unreleased/gt-use-gl-tooltip-directive.yml

+---
+title: Replace tooltip directive with gl-tooltip diretive in badges, cycle analytics, and diffs
+merge_request: 22770
+author: George Tsiolis
+type: performance

spec/javascripts/issue_show/components/edited_spec.js

@@ -46,14 +46,4 @@ describe('edited', () => {
     expect(editedComponent.$el.querySelector('.author-link')).toBeFalsy();
     expect(editedComponent.$el.querySelector('time')).toBeTruthy();
   });
-
-  it('renders time ago tooltip at the bottom', () => {
-    const editedComponent = new EditedComponent({
-      propsData: {
-        updatedAt: '2017-05-15T12:31:04.428Z',
-      },
-    }).$mount();
-
-    expect(editedComponent.$el.querySelector('time').dataset.placement).toEqual('bottom');
-  });
 });

spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js

@@ -26,24 +26,11 @@ describe('Time ago with tooltip component', () => {
       formatDate('2017-05-08T14:57:39.781Z'),
     );
 
-    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
-
     const timeago = getTimeago();
 
     expect(vm.$el.textContent.trim()).toEqual(timeago.format('2017-05-08T14:57:39.781Z'));
   });
 
-  it('should render tooltip placed in bottom', () => {
-    vm = new TimeagoTooltip({
-      propsData: {
-        time: '2017-05-08T14:57:39.781Z',
-        tooltipPlacement: 'bottom',
-      },
-    }).$mount();
-
-    expect(vm.$el.getAttribute('data-placement')).toEqual('bottom');
-  });
-
   it('should render provided html class', () => {
     vm = new TimeagoTooltip({
       propsData: {