Update the compliance dashboard to use the time_ago_tooltip

Now the tooltip accepts custom slot content; we can replace the timeago
mixin and use the tooltip with our own text!

Updated tests and made the time mock static

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlSprintf } from '@gitlab/ui';
 
-import { sprintf, __ } from '~/locale';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { __ } from '~/locale';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 import Approvers from './approvers.vue';
 import BranchDetails from './branch_details.vue';
@@ -12,18 +12,16 @@ import Pagination from '../shared/pagination.vue';
 import Status from './status.vue';
 
 export default {
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   components: {
     Approvers,
     BranchDetails,
+    GlSprintf,
     GridColumnHeading,
     MergeRequest,
     Pagination,
     Status,
+    TimeAgoTooltip,
   },
-  mixins: [timeagoMixin],
   props: {
     mergeRequests: {
       type: Array,
@@ -39,21 +37,14 @@ export default {
     key(id, value) {
       return `${id}-${value}`;
     },
-    timeAgoString(mergedAt) {
-      return sprintf(__('merged %{timeAgo}'), {
-        timeAgo: this.timeFormatted(mergedAt),
-      });
-    },
-    timeTooltip(mergedAt) {
-      return this.tooltipTitle(mergedAt);
-    },
     hasBranchDetails(mergeRequest) {
       return mergeRequest.target_branch && mergeRequest.source_branch;
     },
   },
   strings: {
-    mergeRequestLabel: __('Merge Request'),
     approvalStatusLabel: __('Approval Status'),
+    mergedAtText: __('merged %{timeAgo}'),
+    mergeRequestLabel: __('Merge Request'),
     pipelineStatusLabel: __('Pipeline'),
     updatesLabel: __('Updates'),
   },
@@ -106,11 +97,17 @@ export default {
               uri: mergeRequest.target_branch_uri,
             }"
           />
-          <span class="gl-text-gray-500">
-            <time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
-              timeAgoString(mergeRequest.merged_at)
-            }}</time>
-          </span>
+          <time-ago-tooltip
+            :time="mergeRequest.merged_at"
+            tooltip-placement="bottom"
+            class="gl-text-gray-500"
+          >
+            <template #default="{ timeAgo }">
+              <gl-sprintf :message="$options.strings.mergedAtText">
+                <template #timeAgo>{{ timeAgo }}</template>
+              </gl-sprintf>
+            </template>
+          </time-ago-tooltip>
         </div>
       </template>
     </div>

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap

@@ -47,13 +47,12 @@ exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] =
        
       <!---->
        
-      <span
+      <time-ago-tooltip-stub
         class="gl-text-gray-500"
-      >
-        <time>
-          merged 2 days ago
-        </time>
-      </span>
+        cssclass=""
+        time="2020-01-01T00:00:00.000Z"
+        tooltipplacement="bottom"
+      />
     </div>
     <div
       data-testid="merge-request"
@@ -78,13 +77,12 @@ exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] =
        
       <!---->
        
-      <span
+      <time-ago-tooltip-stub
         class="gl-text-gray-500"
-      >
-        <time>
-          merged 2 days ago
-        </time>
-      </span>
+        cssclass=""
+        time="2020-01-01T00:00:00.000Z"
+        tooltipplacement="bottom"
+      />
     </div>
   </div>
    

ee/spec/frontend/compliance_dashboard/components/merge_requests/grid_spec.js

 import { shallowMount } from '@vue/test-utils';
 
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
 import Approvers from 'ee/compliance_dashboard/components/merge_requests/approvers.vue';
 import BranchDetails from 'ee/compliance_dashboard/components/merge_requests/branch_details.vue';
 import MergeRequestsGrid from 'ee/compliance_dashboard/components/merge_requests/grid.vue';
 import Status from 'ee/compliance_dashboard/components/merge_requests/status.vue';
 
-import { createMergeRequests } from '../../mock_data';
+import { createMergeRequests, mergedAt } from '../../mock_data';
 
 describe('MergeRequestsGrid component', () => {
   let wrapper;
 
   const findMergeRequests = () => wrapper.findAll('[data-testid="merge-request"]');
-  const findTime = () => wrapper.find('time');
+  const findTime = () => wrapper.find(TimeAgoTooltip);
   const findStatuses = () => wrapper.findAll(Status);
   const findApprovers = () => wrapper.find(Approvers);
   const findBranchDetails = () => wrapper.find(BranchDetails);
@@ -91,7 +93,7 @@ describe('MergeRequestsGrid component', () => {
     });
 
     it('renders the "merged at" time', () => {
-      expect(findTime().text()).toBe('merged 2 days ago');
+      expect(findTime().props('time')).toEqual(mergedAt());
     });
   });
 });

ee/spec/frontend/compliance_dashboard/mock_data.js

-const twoDaysAgo = () => {
-  const date = new Date();
-  date.setDate(date.getDate() - 2);
-  return date.toISOString();
-};
-
 const createUser = id => ({
   id,
   avatar_url: `https://${id}`,
@@ -13,6 +7,15 @@ const createUser = id => ({
   web_url: `http://localhost:3000/user-${id}`,
 });
 
+export const mergedAt = () => {
+  const date = new Date();
+
+  date.setFullYear(2020, 0, 1);
+  date.setHours(0, 0, 0, 0);
+
+  return date.toISOString();
+};
+
 export const createPipelineStatus = status => ({
   details_path: '/h5bp/html5-boilerplate/pipelines/58',
   favicon: '',
@@ -30,7 +33,7 @@ export const createMergeRequest = ({ id = 1, props } = {}) => {
     id,
     approved_by_users: [],
     issuable_reference: '!1',
-    merged_at: twoDaysAgo(),
+    merged_at: mergedAt(),
     milestone: null,
     path: `/h5bp/html5-boilerplate/-/merge_requests/${id}`,
     title: `Merge request ${id}`,
@@ -44,13 +47,13 @@ export const createMergeRequest = ({ id = 1, props } = {}) => {
 
 export const createApprovers = count => {
   return Array(count)
-    .fill()
+    .fill(null)
     .map((_, id) => createUser(id));
 };
 
 export const createMergeRequests = ({ count = 1, props = {} } = {}) => {
   return Array(count)
-    .fill()
+    .fill(null)
     .map((_, id) =>
       createMergeRequest({
         id,