Show the MR details for a merge request violation

ee/app/assets/javascripts/compliance_dashboard/components/report.vue

@@ -3,8 +3,8 @@ import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { __ } from '~/locale';
 import { thWidthClass } from '~/lib/utils/table_utility';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import complianceViolationsQuery from '../graphql/compliance_violations.query.graphql';
-import { mapResponse } from '../graphql/mappers';
 import EmptyState from './empty_state.vue';
 import MergeCommitsExportButton from './merge_requests/merge_commits_export_button.vue';
 import ViolationReason from './violations/reason.vue';
@@ -18,6 +18,7 @@ export default {
     GlTable,
     MergeCommitsExportButton,
     ViolationReason,
+    TimeAgoTooltip,
   },
   props: {
     emptyStateSvgPath: {
@@ -45,7 +46,7 @@ export default {
         };
       },
       update(data) {
-        return mapResponse(data?.group?.mergeRequestViolations?.nodes || []);
+        return data?.group?.mergeRequestViolations?.nodes;
       },
       error(e) {
         Sentry.captureException(e);
@@ -73,12 +74,12 @@ export default {
     {
       key: 'reason',
       label: __('Violation'),
-      thClass: thWidthClass(25),
+      thClass: thWidthClass(15),
     },
     {
       key: 'mergeRequest',
       label: __('Merge request'),
-      thClass: thWidthClass(30),
+      thClass: thWidthClass(40),
     },
     {
       key: 'mergedAt',
@@ -128,6 +129,12 @@ export default {
       <template #cell(reason)="{ item: { reason, violatingUser } }">
         <violation-reason :reason="reason" :user="violatingUser" />
       </template>
+      <template #cell(mergeRequest)="{ item: { mergeRequest } }">
+        {{ mergeRequest.title }}
+      </template>
+      <template #cell(mergedAt)="{ item: { mergeRequest } }">
+        <time-ago-tooltip :time="mergeRequest.mergedAt" />
+      </template>
     </gl-table>
     <empty-state v-else :image-path="emptyStateSvgPath" />
   </section>

ee/app/assets/javascripts/compliance_dashboard/graphql/mappers.js

-export const mapResponse = (response) => {
-  return response.map((item) => {
-    return {
-      ...item,
-      mergedAt: item.mergeRequest.mergedAt,
-    };
-  });
-};

ee/spec/frontend/compliance_dashboard/components/graphql/mappers_spec.js

-import { mapResponse } from 'ee/compliance_dashboard/graphql/mappers';
-
-describe('Mappers', () => {
-  describe('mapResponse', () => {
-    it('returns an empty array if it receives one', () => {
-      expect(mapResponse([])).toStrictEqual([]);
-    });
-
-    it('returns the correct array if it receives data', () => {
-      expect(mapResponse([{ mergeRequest: { mergedAt: '1970-01-01' } }])).toStrictEqual([
-        { mergeRequest: { mergedAt: '1970-01-01' }, mergedAt: '1970-01-01' },
-      ]);
-    });
-  });
-});

ee/spec/frontend/compliance_dashboard/components/report_spec.js

@@ -10,6 +10,7 @@ import ViolationReason from 'ee/compliance_dashboard/components/violations/reaso
 import resolvers from 'ee/compliance_dashboard/graphql/resolvers';
 import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 Vue.use(VueApollo);
 
@@ -27,6 +28,7 @@ describe('ComplianceReport component', () => {
   const findEmptyState = () => wrapper.findComponent(EmptyState);
   const findMergeCommitsExportButton = () => wrapper.findComponent(MergeCommitsExportButton);
   const findViolationReason = () => wrapper.findComponent(ViolationReason);
+  const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
 
   const findTableHeaders = () => findViolationsTable().findAll('th');
   const findTablesFirstRowData = () =>
@@ -112,15 +114,14 @@ describe('ComplianceReport component', () => {
 
     // Note: This should be refactored as each table component is created
     // Severity: https://gitlab.com/gitlab-org/gitlab/-/issues/342900
-    // Merge request and date merged: https://gitlab.com/gitlab-org/gitlab/-/issues/342902
     it('has the correct first row data', () => {
       const headerTexts = findTablesFirstRowData().wrappers.map((d) => d.text());
 
       expect(headerTexts).toEqual([
         '1',
         'Approved by committer',
-        expect.anything(),
-        '2021-11-25T11:56:52.215Z',
+        'Officiis architecto voluptas ut sit qui qui quisquam sequi consectetur porro.',
+        'in 1 year',
       ]);
     });
 
@@ -135,6 +136,14 @@ describe('ComplianceReport component', () => {
         user,
       });
     });
+
+    it('renders the time ago tooltip', () => {
+      const {
+        mergeRequest: { mergedAt },
+      } = mockResolver().mergeRequestViolations.nodes[0];
+
+      expect(findTimeAgoTooltip().props('time')).toBe(mergedAt);
+    });
   });
 
   describe('when there are no violations', () => {