From 878f870a5e9ec15e3eb00ff507ff432dd7034a7a Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Mon, 11 Jun 2018 13:04:50 +0300
Subject: [PATCH 1/3] Use Tooltip component in MrWidgetAuthorTime vue component

---
 .../components/mr_widget_author_time.vue                   | 7 +++++--
 1 file changed, 5 insertions(+), 2 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..8007d5c3114 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,4 +1,5 @@
 <script>
+  import tooltip from '~/vue_shared/directives/tooltip';
   import MrWidgetAuthor from './mr_widget_author.vue';
 
   export default {
@@ -6,6 +7,9 @@
     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 }}

From 927d2459cd6f36a314f6201db99610044ecd2fad Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Mon, 11 Jun 2018 13:06:29 +0300
Subject: [PATCH 2/3] Rename MrWidgetAuthorTime vue component

---
 .../components/mr_widget_author_time.vue                    | 2 +-
 .../components/states/mr_widget_closed.vue                  | 4 ++--
 .../components/states/mr_widget_merged.vue                  | 4 ++--
 ...tooltip-component-in-mr-widget-author-time-component.yml | 5 +++++
 .../vue_mr_widget/components/mr_widget_author_time_spec.js  | 6 +++---
 5 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 changelogs/unreleased/use-tooltip-component-in-mr-widget-author-time-component.yml

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 8007d5c3114..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
@@ -3,7 +3,7 @@
   import MrWidgetAuthor from './mr_widget_author.vue';
 
   export default {
-    name: 'MRWidgetAuthorTime',
+    name: 'MrWidgetAuthorTime',
     components: {
       MrWidgetAuthor,
     },
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..ef9def03db7 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',

From d5e910710760cf8c189b3fc9629ff0874c1ee335 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Mon, 11 Jun 2018 14:14:51 +0300
Subject: [PATCH 3/3] Update MrWidgetAuthorTime and MRWidgetMerged spec

---
 .../vue_mr_widget/components/mr_widget_author_time_spec.js      | 2 +-
 .../vue_mr_widget/components/states/mr_widget_merged_spec.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 ef9def03db7..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
@@ -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');
   });
 });