[Cases] Added Updated on column in Cases table (elastic#149116)

## Summary Fixes elastic#148871 Adds new column `Updated on ` in `Cases` table. This column can be sorted and can persist sorting options. ![image](https://user-images.githubusercontent.com/117571355/213171804-9fa1bc42-8b8b-4b7b-baf3-03ce649b1dc6.png) ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) ### Release notes - Adds new column `Updated on ` in `all cases list ` table. This column can be sorted and can persist sorting options.
wayneseymour · Jan 19, 2023 · 2e86dcb · 2e86dcb
1 parent f20364c
commit 2e86dcb
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 16 deletions.
diff --git a/x-pack/plugins/cases/common/ui/types.ts b/x-pack/plugins/cases/common/ui/types.ts
@@ -137,6 +137,7 @@ export type SingleCaseMetricsFeature =
 export enum SortFieldCase {
   closedAt = 'closedAt',
   createdAt = 'createdAt',
+  updatedAt = 'updatedAt',
   severity = 'severity',
   status = 'status',
   title = 'title',

diff --git a/x-pack/plugins/cases/public/common/translations.ts b/x-pack/plugins/cases/public/common/translations.ts
@@ -37,6 +37,10 @@ export const CREATED_ON = i18n.translate('xpack.cases.caseView.createdOn', {
   defaultMessage: 'Created on',
 });
 
+export const UPDATED_ON = i18n.translate('xpack.cases.caseView.updatedOn', {
+  defaultMessage: 'Updated on',
+});
+
 export const CLOSED_ON = i18n.translate('xpack.cases.caseView.closedOn', {
   defaultMessage: 'Closed on',
 });

diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx
@@ -208,6 +208,7 @@ describe.skip('AllCasesListGeneric', () => {
             id: null,
             createdAt: null,
             createdBy: null,
+            updatedAt: null,
             status: null,
             severity: null,
             tags: null,
@@ -270,16 +271,22 @@ describe.skip('AllCasesListGeneric', () => {
     expect(res.getByTestId('tableHeaderCell_title_0')).toBeInTheDocument();
   });
 
+  it('renders the updated on column', async () => {
+    const res = appMockRenderer.render(<AllCasesList />);
+
+    expect(res.getByTestId('tableHeaderCell_updatedAt_5')).toBeInTheDocument();
+  });
+
   it('renders the status column', async () => {
     const res = appMockRenderer.render(<AllCasesList />);
 
-    expect(res.getByTestId('tableHeaderCell_status_6')).toBeInTheDocument();
+    expect(res.getByTestId('tableHeaderCell_status_7')).toBeInTheDocument();
   });
 
   it('renders the severity column', async () => {
     const res = appMockRenderer.render(<AllCasesList />);
 
-    expect(res.getByTestId('tableHeaderCell_severity_7')).toBeInTheDocument();
+    expect(res.getByTestId('tableHeaderCell_severity_8')).toBeInTheDocument();
   });
 
   it('should render the case stats', () => {
@@ -403,7 +410,7 @@ describe.skip('AllCasesListGeneric', () => {
     const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
 
     userEvent.click(
-      within(result.getByTestId('tableHeaderCell_status_6')).getByTestId('tableHeaderSortButton')
+      within(result.getByTestId('tableHeaderCell_status_7')).getByTestId('tableHeaderSortButton')
     );
 
     await waitFor(() => {
@@ -423,7 +430,7 @@ describe.skip('AllCasesListGeneric', () => {
     const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
 
     userEvent.click(
-      within(result.getByTestId('tableHeaderCell_severity_7')).getByTestId('tableHeaderSortButton')
+      within(result.getByTestId('tableHeaderCell_severity_8')).getByTestId('tableHeaderSortButton')
     );
 
     await waitFor(() => {
@@ -459,6 +466,26 @@ describe.skip('AllCasesListGeneric', () => {
     });
   });
 
+  it('should sort by updatedOn', async () => {
+    const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
+
+    userEvent.click(
+      within(result.getByTestId('tableHeaderCell_updatedAt_5')).getByTestId('tableHeaderSortButton')
+    );
+
+    await waitFor(() => {
+      expect(useGetCasesMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          queryParams: {
+            ...DEFAULT_QUERY_PARAMS,
+            sortField: SortFieldCase.updatedAt,
+            sortOrder: 'asc',
+          },
+        })
+      );
+    });
+  });
+
   it('should filter by status: closed', async () => {
     const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
     userEvent.click(result.getByTestId('case-status-filter'));

diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
@@ -92,9 +92,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": undefined,
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -140,7 +148,7 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": undefined,
           },
           Object {
             "field": "assignees",
@@ -152,14 +160,14 @@ describe('useCasesColumns ', () => {
             "field": "tags",
             "name": "Tags",
             "render": [Function],
-            "width": "15%",
+            "width": undefined,
           },
           Object {
             "align": "right",
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "55px",
           },
           Object {
             "align": "right",
@@ -179,9 +187,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": "80px",
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": "80px",
           },
           Object {
             "field": "status",
@@ -259,9 +275,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": undefined,
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -336,9 +360,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": undefined,
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -408,9 +440,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": undefined,
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -485,9 +525,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": undefined,
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -527,20 +575,20 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": undefined,
           },
           Object {
             "field": "tags",
             "name": "Tags",
             "render": [Function],
-            "width": "15%",
+            "width": undefined,
           },
           Object {
             "align": "right",
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "55px",
           },
           Object {
             "align": "right",
@@ -560,9 +608,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": "80px",
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": "80px",
           },
           Object {
             "field": "status",
@@ -601,20 +657,20 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": undefined,
           },
           Object {
             "field": "tags",
             "name": "Tags",
             "render": [Function],
-            "width": "15%",
+            "width": undefined,
           },
           Object {
             "align": "right",
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "55px",
           },
           Object {
             "align": "right",
@@ -634,9 +690,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": "80px",
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": "80px",
           },
           Object {
             "field": "status",
@@ -707,9 +771,17 @@ describe('useCasesColumns ', () => {
             "render": [Function],
             "sortable": true,
           },
+          Object {
+            "field": "updatedAt",
+            "name": "Updated on",
+            "render": [Function],
+            "sortable": true,
+            "width": undefined,
+          },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",

diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
@@ -137,7 +137,7 @@ export const useCasesColumns = ({
         }
         return getEmptyTagValue();
       },
-      width: '20%',
+      width: !isSelectorView ? '20%' : undefined,
     },
   ];
 
@@ -197,7 +197,7 @@ export const useCasesColumns = ({
       }
       return getEmptyTagValue();
     },
-    width: '15%',
+    width: !isSelectorView ? '15%' : undefined,
   });
 
   if (isAlertsEnabled) {
@@ -209,7 +209,7 @@ export const useCasesColumns = ({
         totalAlerts != null
           ? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
           : getEmptyTagValue(),
-      width: '80px',
+      width: !isSelectorView ? '80px' : '55px',
     });
   }
 
@@ -278,6 +278,23 @@ export const useCasesColumns = ({
     });
   }
 
+  columns.push({
+    field: 'updatedAt',
+    name: i18n.UPDATED_ON,
+    sortable: true,
+    render: (updatedAt: Case['updatedAt']) => {
+      if (updatedAt != null) {
+        return (
+          <span data-test-subj="case-table-column-updatedAt">
+            <FormattedRelativePreferenceDate value={updatedAt} stripMs={true} />
+          </span>
+        );
+      }
+      return getEmptyTagValue();
+    },
+    width: isSelectorView ? '80px' : undefined,
+  });
+
   columns.push(
     {
       name: i18n.EXTERNAL_INCIDENT,
@@ -287,6 +304,7 @@ export const useCasesColumns = ({
         }
         return getEmptyTagValue();
       },
+      width: isSelectorView ? '80px' : undefined,
     },
     {
       field: 'status',