[Content management] Add "Last updated" metadata to TableListView (#1…

…32321)

src/plugins/dashboard/public/services/saved_object_loader.ts

@@ -98,12 +98,16 @@ export class SavedObjectLoader {
   mapHitSource(
     source: Record<string, unknown>,
     id: string,
-    references: SavedObjectReference[] = []
-  ) {
-    source.id = id;
-    source.url = this.urlFor(id);
-    source.references = references;
-    return source;
+    references: SavedObjectReference[] = [],
+    updatedAt?: string
+  ): Record<string, unknown> {
+    return {
+      ...source,
+      id,
+      url: this.urlFor(id),
+      references,
+      updatedAt,
+    };
   }
 
   /**
@@ -116,12 +120,14 @@ export class SavedObjectLoader {
     attributes,
     id,
     references = [],
+    updatedAt,
   }: {
     attributes: Record<string, unknown>;
     id: string;
     references?: SavedObjectReference[];
+    updatedAt?: string;
   }) {
-    return this.mapHitSource(attributes, id, references);
+    return this.mapHitSource(attributes, id, references, updatedAt);
   }
 
   /**

src/plugins/kibana_react/public/table_list_view/table_list_view.test.tsx

@@ -7,13 +7,24 @@
  */
 
 import { EuiEmptyPrompt } from '@elastic/eui';
-import { shallowWithIntl } from '@kbn/test-jest-helpers';
+import { shallowWithIntl, registerTestBed, TestBed } from '@kbn/test-jest-helpers';
 import { ToastsStart } from '@kbn/core/public';
 import React from 'react';
+import moment, { Moment } from 'moment';
+import { act } from 'react-dom/test-utils';
 import { themeServiceMock, applicationServiceMock } from '@kbn/core/public/mocks';
-import { TableListView } from './table_list_view';
+import { TableListView, TableListViewProps } from './table_list_view';
 
-const requiredProps = {
+jest.mock('lodash', () => {
+  const original = jest.requireActual('lodash');
+
+  return {
+    ...original,
+    debounce: (handler: () => void) => handler,
+  };
+});
+
+const requiredProps: TableListViewProps<Record<string, unknown>> = {
   entityName: 'test',
   entityNamePlural: 'tests',
   listingLimit: 5,
@@ -30,6 +41,14 @@ const requiredProps = {
 };
 
 describe('TableListView', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   test('render default empty prompt', async () => {
     const component = shallowWithIntl(<TableListView {...requiredProps} />);
 
@@ -81,4 +100,149 @@ describe('TableListView', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('default columns', () => {
+    let testBed: TestBed;
+
+    const tableColumns = [
+      {
+        field: 'title',
+        name: 'Title',
+        sortable: true,
+      },
+      {
+        field: 'description',
+        name: 'Description',
+        sortable: true,
+      },
+    ];
+
+    const twoDaysAgo = new Date(new Date().setDate(new Date().getDate() - 2));
+    const yesterday = new Date(new Date().setDate(new Date().getDate() - 1));
+
+    const hits = [
+      {
+        title: 'Item 1',
+        description: 'Item 1 description',
+        updatedAt: twoDaysAgo,
+      },
+      {
+        title: 'Item 2',
+        description: 'Item 2 description',
+        // This is the latest updated and should come first in the table
+        updatedAt: yesterday,
+      },
+    ];
+
+    const findItems = jest.fn(() => Promise.resolve({ total: hits.length, hits }));
+
+    const defaultProps: TableListViewProps<Record<string, unknown>> = {
+      ...requiredProps,
+      tableColumns,
+      findItems,
+      createItem: () => undefined,
+    };
+
+    const setup = registerTestBed(TableListView, { defaultProps });
+
+    test('should add a "Last updated" column if "updatedAt" is provided', async () => {
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      const { component, table } = testBed!;
+      component.update();
+
+      const { tableCellsValues } = table.getMetaData('itemsInMemTable');
+
+      expect(tableCellsValues).toEqual([
+        ['Item 2', 'Item 2 description', 'yesterday'], // Comes first as it is the latest updated
+        ['Item 1', 'Item 1 description', '2 days ago'],
+      ]);
+    });
+
+    test('should not display relative time for items updated more than 7 days ago', async () => {
+      const updatedAtValues: Moment[] = [];
+
+      const updatedHits = hits.map(({ title, description }, i) => {
+        const updatedAt = new Date(new Date().setDate(new Date().getDate() - (7 + i)));
+        updatedAtValues[i] = moment(updatedAt);
+
+        return {
+          title,
+          description,
+          updatedAt,
+        };
+      });
+
+      await act(async () => {
+        testBed = await setup({
+          findItems: jest.fn(() =>
+            Promise.resolve({
+              total: updatedHits.length,
+              hits: updatedHits,
+            })
+          ),
+        });
+      });
+
+      const { component, table } = testBed!;
+      component.update();
+
+      const { tableCellsValues } = table.getMetaData('itemsInMemTable');
+
+      expect(tableCellsValues).toEqual([
+        // Renders the datetime with this format: "05/10/2022 @ 2:34 PM"
+        ['Item 1', 'Item 1 description', updatedAtValues[0].format('LL')],
+        ['Item 2', 'Item 2 description', updatedAtValues[1].format('LL')],
+      ]);
+    });
+
+    test('should not add a "Last updated" column if no "updatedAt" is provided', async () => {
+      await act(async () => {
+        testBed = await setup({
+          findItems: jest.fn(() =>
+            Promise.resolve({
+              total: hits.length,
+              hits: hits.map(({ title, description }) => ({ title, description })),
+            })
+          ),
+        });
+      });
+
+      const { component, table } = testBed!;
+      component.update();
+
+      const { tableCellsValues } = table.getMetaData('itemsInMemTable');
+
+      expect(tableCellsValues).toEqual([
+        ['Item 1', 'Item 1 description'], // Sorted by title
+        ['Item 2', 'Item 2 description'],
+      ]);
+    });
+
+    test('should not display anything if there is no updatedAt metadata for an item', async () => {
+      await act(async () => {
+        testBed = await setup({
+          findItems: jest.fn(() =>
+            Promise.resolve({
+              total: hits.length + 1,
+              hits: [...hits, { title: 'Item 3', description: 'Item 3 description' }],
+            })
+          ),
+        });
+      });
+
+      const { component, table } = testBed!;
+      component.update();
+
+      const { tableCellsValues } = table.getMetaData('itemsInMemTable');
+
+      expect(tableCellsValues).toEqual([
+        ['Item 2', 'Item 2 description', 'yesterday'],
+        ['Item 1', 'Item 1 description', '2 days ago'],
+        ['Item 3', 'Item 3 description', '-'], // Empty column as no updatedAt provided
+      ]);
+    });
+  });
 });