Merge branch '229533-timeago-in-incidents-list' into 'master'

Surface time passed in tooltip in Incident list

See merge request gitlab-org/gitlab!37567

app/assets/javascripts/incidents/components/incidents_list.vue

 <script>
 import { GlLoadingIcon, GlTable, GlAlert } from '@gitlab/ui';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 import { I18N } from '../constants';
@@ -36,6 +37,7 @@ export default {
     GlLoadingIcon,
     GlTable,
     GlAlert,
+    TimeAgoTooltip,
   },
   inject: ['projectPath'],
   apollo: {
@@ -108,7 +110,7 @@ export default {
       </template>
 
       <template #cell(createdAt)="{ item }">
-        {{ item.createdAt }}
+        <time-ago-tooltip :time="item.createdAt" />
       </template>
 
       <template #cell(assignees)="{ item }">

changelogs/unreleased/229533-timeago-in-incidents-list.yml

+---
+title: Surface timeafo for created date in Incidents List
+merge_request: 37567
+author:
+type: added

spec/frontend/incidents/components/incidents_list_spec.js

 import { mount } from '@vue/test-utils';
 import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { I18N } from '~/incidents/constants';
+import mockIncidents from '../mocks/incidents.json';
 
 describe('Incidents List', () => {
   let wrapper;
@@ -10,6 +12,7 @@ describe('Incidents List', () => {
   const findTableRows = () => wrapper.findAll('table tbody tr');
   const findAlert = () => wrapper.find(GlAlert);
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findTimeAgo = () => wrapper.findAll(TimeAgoTooltip);
 
   function mountComponent({ data = { incidents: [] }, loading = false }) {
     wrapper = mount(IncidentsList, {
@@ -40,7 +43,6 @@ describe('Incidents List', () => {
 
   it('shows the loading state', () => {
     mountComponent({
-      props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
       loading: true,
     });
     expect(findLoader().exists()).toBe(true);
@@ -63,16 +65,20 @@ describe('Incidents List', () => {
     expect(findAlert().exists()).toBe(true);
   });
 
-  it('displays basic list', () => {
-    const incidents = [
-      { title: 1, assignees: [] },
-      { title: 2, assignees: [] },
-      { title: 3, assignees: [] },
-    ];
-    mountComponent({
-      data: { incidents },
-      loading: false,
+  describe('Incident Management list', () => {
+    beforeEach(() => {
+      mountComponent({
+        data: { incidents: mockIncidents },
+        loading: false,
+      });
+    });
+
+    it('renders rows based on provided data', () => {
+      expect(findTableRows().length).toBe(mockIncidents.length);
+    });
+
+    it('renders a createdAt with timeAgo component per row', () => {
+      expect(findTimeAgo().length).toBe(mockIncidents.length);
     });
-    expect(findTableRows().length).toBe(incidents.length);
   });
 });

spec/frontend/incidents/mocks/incidents.json

+[
+  {
+    "iid": "15",
+    "title": "New: Incident",
+    "createdAt": "2020-06-03T15:46:08Z",
+    "assignees": {}
+  },
+  {
+    "iid": "14",
+    "title": "Create issue4",
+    "createdAt": "2020-05-19T09:26:07Z",
+    "assignees": {}
+  },
+  {
+    "iid": "13",
+    "title": "Create issue3",
+    "createdAt": "2020-05-19T08:53:55Z",
+    "assignees": {}
+  },
+  {
+    "iid": "12",
+    "title": "Create issue2",
+    "createdAt": "2020-05-18T17:13:35Z",
+    "assignees": {}
+  }
+]