Merge branch 'use-tooltip-component-in-mr-widget-author-time-component' into 'master'

Use Tooltip component in MrWidgetAuthorTime vue component

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

6 files changed, 20 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index 644e4b7d81a..a9868486e83 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -1,11 +1,15 @@
 <script>
+  import tooltip from '~/vue_shared/directives/tooltip';
   import MrWidgetAuthor from './mr_widget_author.vue';
 
   export default {
-    name: 'MRWidgetAuthorTime',
+    name: 'MrWidgetAuthorTime',
     components: {
       MrWidgetAuthor,
     },
+    directives: {
+      tooltip,
+    },
     props: {
       actionText: {
         type: String,
@@ -32,8 +36,7 @@
     <mr-widget-author :author="author" />
     <time
       :title="dateTitle"
-      data-toggle="tooltip"
-      data-placement="top"
+      v-tooltip
       data-container="body"
     >
       {{ dateReadable }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 68b691fc914..25a57e520ee 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,11 +1,11 @@
 <script>
-  import mrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
   import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetClosed',
     components: {
-      mrWidgetAuthorTime,
+      MrWidgetAuthorTime,
       statusIcon,
     },
     props: {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index eb581b807a2..bc95706f47d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -4,7 +4,7 @@
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import { s__, __ } from '~/locale';
   import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-  import mrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
   import statusIcon from '../mr_widget_status_icon.vue';
   import eventHub from '../../event_hub';
 
@@ -14,7 +14,7 @@
       tooltip,
     },
     components: {
-      mrWidgetAuthorTime,
+      MrWidgetAuthorTime,
       loadingIcon,
       statusIcon,
       ClipboardButton,
diff --git a/changelogs/unreleased/use-tooltip-component-in-mr-widget-author-time-component.yml b/changelogs/unreleased/use-tooltip-component-in-mr-widget-author-time-component.yml
new file mode 100644
index 00000000000..4ab9b6dadc0
--- /dev/null
+++ b/changelogs/unreleased/use-tooltip-component-in-mr-widget-author-time-component.yml
@@ -0,0 +1,5 @@
+---
+title: Use Tooltip component in MrWidgetAuthorTime vue comonent
+merge_request: 19635
+author: George Tsiolis
+type: performance
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
index 6784b498c29..10143402acf 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
@@ -1,12 +1,12 @@
 import Vue from 'vue';
-import authorTimeComponent from '~/vue_merge_request_widget/components/mr_widget_author_time.vue';
+import MrWidgetAuthorTime from '~/vue_merge_request_widget/components/mr_widget_author_time.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
-describe('MRWidgetAuthorTime', () => {
+describe('MrWidgetAuthorTime', () => {
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(authorTimeComponent);
+    const Component = Vue.extend(MrWidgetAuthorTime);
 
     vm = mountComponent(Component, {
       actionText: 'Merged by',
@@ -34,7 +34,7 @@ describe('MRWidgetAuthorTime', () => {
   });
 
   it('renders provided time', () => {
-    expect(vm.$el.querySelector('time').getAttribute('title')).toEqual('2017-03-23T23:02:00.807Z');
+    expect(vm.$el.querySelector('time').getAttribute('data-original-title')).toEqual('2017-03-23T23:02:00.807Z');
     expect(vm.$el.querySelector('time').textContent.trim()).toEqual('12 hours ago');
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
index adeea03481f..3e2fd71b5b8 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
@@ -186,7 +186,7 @@ describe('MRWidgetMerged', () => {
 
   it('should use mergedEvent mergedAt as tooltip title', () => {
     expect(
-      vm.$el.querySelector('time').getAttribute('title'),
+      vm.$el.querySelector('time').getAttribute('data-original-title'),
     ).toBe('Jan 24, 2018 1:02pm GMT+0000');
   });
 });