Merge branch 'update-time-ago-tooltip-to-accept-sprintf-text' into 'master'

Update the time_ago_tooltip component to support custom text

See merge request gitlab-org/gitlab!39325

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

 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
+
 import timeagoMixin from '../mixins/timeago';
 import '../../lib/utils/datetime_utility';
 
@@ -28,6 +29,11 @@ export default {
       default: '',
     },
   },
+  computed: {
+    timeAgo() {
+      return this.timeFormatted(this.time);
+    },
+  },
 };
 </script>
 <template>
@@ -35,7 +41,7 @@ export default {
     v-gl-tooltip.viewport="{ placement: tooltipPlacement }"
     :class="cssClass"
     :title="tooltipTitle(time)"
-    v-text="timeFormatted(time)"
+    :datetime="time"
+    ><slot :timeAgo="timeAgo">{{ timeAgo }}</slot></time
   >
-  </time>
 </template>

ee/spec/frontend/geo_replicable/components/__snapshots__/geo_replicable_time_ago_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`GeoReplicableTimeAgo template when dateString exists TimeAgo sets innerHTML as 09-23-1994 1`] = `"<time title=\\"Sep 23, 1994 12:00am GMT+0000\\" class=\\"\\">25 years ago</time>"`;
+exports[`GeoReplicableTimeAgo template when dateString exists TimeAgo sets innerHTML as 09-23-1994 1`] = `"<time title=\\"Sep 23, 1994 12:00am GMT+0000\\" datetime=\\"09-23-1994\\" class=\\"\\">25 years ago</time>"`;
 
 exports[`GeoReplicableTimeAgo template when dateString is null DefaultText sets innerHTML as props.defaultText 1`] = `"<span>Default Text</span>"`;

spec/frontend/vue_shared/components/time_ago_tooltip_spec.js

 import { shallowMount } from '@vue/test-utils';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
 import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('Time ago with tooltip component', () => {
   let vm;
 
-  const buildVm = (propsData = {}) => {
+  const buildVm = (propsData = {}, scopedSlots = {}) => {
     vm = shallowMount(TimeAgoTooltip, {
       propsData,
+      scopedSlots,
     });
   };
   const timestamp = '2017-05-08T14:57:39.781Z';
+  const timeAgoTimestamp = getTimeago().format(timestamp);
 
   afterEach(() => {
     vm.destroy();
@@ -20,10 +23,9 @@ describe('Time ago with tooltip component', () => {
     buildVm({
       time: timestamp,
     });
-    const timeago = getTimeago();
 
     expect(vm.attributes('title')).toEqual(formatDate(timestamp));
-    expect(vm.text()).toEqual(timeago.format(timestamp));
+    expect(vm.text()).toEqual(timeAgoTimestamp);
   });
 
   it('should render provided html class', () => {
@@ -34,4 +36,16 @@ describe('Time ago with tooltip component', () => {
 
     expect(vm.classes()).toContain('foo');
   });
+
+  it('should render with the datetime attribute', () => {
+    buildVm({ time: timestamp });
+
+    expect(vm.attributes('datetime')).toEqual(timestamp);
+  });
+
+  it('should render provided scope content with the correct timeAgo string', () => {
+    buildVm({ time: timestamp }, { default: `<span>The time is {{ props.timeAgo }}</span>` });
+
+    expect(vm.text()).toEqual(`The time is ${timeAgoTimestamp}`);
+  });
 });