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

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue

 <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 }}

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue

 <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: {

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,

changelogs/unreleased/use-tooltip-component-in-mr-widget-author-time-component.yml

+---
+title: Use Tooltip component in MrWidgetAuthorTime vue comonent
+merge_request: 19635
+author: George Tsiolis
+type: performance

spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js

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

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