KOGITO-2599: DataTable component API changes

ui-packages/package.json

@@ -36,6 +36,7 @@
     "axios": "^0.19.0",
     "camel-case": "^3.0.0",
     "graphql": "^14.6.0",
+    "jsonpath": "^1.0.2",
     "keycloak-js": "^8.0.0",
     "lodash": "^4.17.15",
     "lower-case": "^1.1.4",

ui-packages/packages/common/index.ts

@@ -1,27 +1,14 @@
 export {
-  default as DataTable
+  default as DataTable,
+  DataTableColumn
 } from './src/components/Organisms/DataTable/DataTable';
-export {
-  default as KogitoSpinner
-} from './src/components/Atoms/KogitoSpinner/KogitoSpinner';
-export {
-  default as PageToolbar
-} from './src/components/Molecules/PageToolbar/PageToolbar';
-export {
-  default as KogitoPageLayout
-} from './src/components/Templates/KogitoPageLayout/KogitoPageLayout';
-export {
-  default as AboutModalBox
-} from './src/components/Molecules/AboutModalBox/AboutModalBox';
-export {
-  default as EndpointLink
-} from './src/components/Atoms/EndpointLink/EndpointLink';
-export {
-  default as PageNotFound
-} from './src/components/Molecules/PageNotFound/PageNotFound';
-export {
-  default as ServerUnavailable
-} from './src/components/Molecules/ServerUnavailable/ServerUnavailable';
+export { default as KogitoSpinner } from './src/components/Atoms/KogitoSpinner/KogitoSpinner';
+export { default as PageToolbar } from './src/components/Molecules/PageToolbar/PageToolbar';
+export { default as KogitoPageLayout } from './src/components/Templates/KogitoPageLayout/KogitoPageLayout';
+export { default as AboutModalBox } from './src/components/Molecules/AboutModalBox/AboutModalBox';
+export { default as EndpointLink } from './src/components/Atoms/EndpointLink/EndpointLink';
+export { default as PageNotFound } from './src/components/Molecules/PageNotFound/PageNotFound';
+export { default as ServerUnavailable } from './src/components/Molecules/ServerUnavailable/ServerUnavailable';
 export { default as NoData } from './src/components/Molecules/NoData/NoData';
 export {
   default as ServerErrors
@@ -31,11 +18,7 @@ export {
 } from './src/components/Molecules/ItemDescriptor/ItemDescriptor';
 export * from './src/components/Atoms/KogitoEmptyState/KogitoEmptyState';
 export { default as LoadMore } from './src/components/Atoms/LoadMore/LoadMore';
-export {
-  default as DomainExplorer
-} from './src/components/Organisms/DomainExplorer/DomainExplorer';
-export {
-  default as DomainExplorerListDomains
-} from './src/components/Organisms/DomainExplorerListDomains/DomainExplorerListDomains';
+export { default as DomainExplorer } from './src/components/Organisms/DomainExplorer/DomainExplorer';
+export { default as DomainExplorerListDomains } from './src/components/Organisms/DomainExplorerListDomains/DomainExplorerListDomains';
 export * from './src/utils/OuiaUtils';
 export * from './src/graphql/types';

ui-packages/packages/common/src/components/Organisms/DataTable/DataTable.tsx

@@ -4,8 +4,9 @@ import {
   Table,
   TableHeader,
   TableBody,
-  ICell,
-  IRow
+  IRow,
+  ITransform,
+  ICell
 } from '@patternfly/react-table';
 import KogitoSpinner from '../../Atoms/KogitoSpinner/KogitoSpinner';
 import {
@@ -15,25 +16,54 @@ import {
 import '@patternfly/patternfly/patternfly-addons.css';
 import _ from 'lodash';
 import uuidv4 from 'uuid';
+import jp from 'jsonpath';
 
+export interface DataTableColumn {
+  path: string;
+  label: string;
+  bodyCellTransformer?: (value: any, rowDataObj: object) => any;
+}
 interface IOwnProps {
   data: any[];
   isLoading: boolean;
-  columns?: ICell[];
+  columns?: DataTableColumn[];
   networkStatus: any;
   error: any;
   refetch: () => void;
   LoadingComponent?: React.ReactNode;
   ErrorComponent?: React.ReactNode;
 }
 
-const getColumns = (data: any[], columns: ICell[]) => {
+const getCellData = (dataObj: object, path: string) => {
+  if (dataObj && path) {
+    return !_.isEmpty(jp.value(dataObj, path))
+      ? jp.value(dataObj, path)
+      : 'N/A';
+  } else {
+    return 'N/A';
+  }
+};
+
+const getColumns = (data: any[], columns: DataTableColumn[]) => {
   let columnList: ICell[] = [];
   if (data) {
     columnList = columns
-      ? _.filter(columns, column => !_.isEmpty(column.data))
+      ? _.filter(columns, column => !_.isEmpty(column.path)).map(column => {
+          return {
+            title: column.label,
+            data: column.path,
+            cellTransforms: column.bodyCellTransformer
+              ? [
+                  ((value, extra) => {
+                    const rowDataObj = data[extra.rowIndex];
+                    return column.bodyCellTransformer(value, rowDataObj);
+                  }) as ITransform
+                ]
+              : undefined
+          } as ICell;
+        })
       : _.filter(_.keys(_.sample(data)), key => key !== '__typename').map(
-          key => ({ title: key, data: key } as ICell)
+          key => ({ title: key, data: `$.${key}` } as ICell)
         );
   }
   return columnList;
@@ -47,18 +77,9 @@ const getRows = (data: any[], columns: ICell[]) => {
         cells: _.reduce(
           columns,
           (result, column: ICell) => {
-            _.forEach(rowData, (value, key) => {
-              if (
-                column.data &&
-                key.toLowerCase() === column.data.toLowerCase()
-              ) {
-                if (_.isEmpty(value) || value === '{}') {
-                  result.push('N/A');
-                } else {
-                  result.push(value);
-                }
-              }
-            });
+            if (column.data) {
+              result.push(getCellData(rowData, column.data));
+            }
             return result;
           },
           []

ui-packages/packages/common/src/components/Organisms/DataTable/tests/DataTable.test.tsx

@@ -1,14 +1,9 @@
 import React from 'react';
-import DataTable from '../DataTable';
+import DataTable, { DataTableColumn } from '../DataTable';
 import { gql } from 'apollo-boost';
 import { MockedProvider } from '@apollo/react-testing';
 import { getWrapperAsync } from '@kogito-apps/common';
 import { Label } from '@patternfly/react-core';
-import {
-  ICell,
-  ITransform,
-  IFormatterValueType
-} from '@patternfly/react-table';
 
 jest.mock('uuid', () => {
   let value = 1;
@@ -73,7 +68,7 @@ const data = [
     referenceName: 'ConfirmTravel'
   }
 ];
-const stateColumnTransformer: ITransform = (value: IFormatterValueType) => {
+const stateColumnTransformer = (value, rowDataObj) => {
   if (!value) {
     return null;
   }
@@ -82,27 +77,27 @@ const stateColumnTransformer: ITransform = (value: IFormatterValueType) => {
     children: <Label>{title}</Label>
   };
 };
-const columns: ICell[] = [
+const columns: DataTableColumn[] = [
   {
-    title: 'ProcessId',
-    data: 'processId'
+    label: 'ProcessId',
+    path: '$.processId'
   },
   {
-    title: 'Name',
-    data: 'name'
+    label: 'Name',
+    path: '$.name'
   },
   {
-    title: 'Priority',
-    data: 'priority'
+    label: 'Priority',
+    path: '$.priority'
   },
   {
-    title: 'ProcessInstanceId',
-    data: 'processInstanceId'
+    label: 'ProcessInstanceId',
+    path: '$.processInstanceId'
   },
   {
-    title: 'State',
-    data: 'state',
-    cellTransforms: [stateColumnTransformer]
+    label: 'State',
+    path: '$.state',
+    bodyCellTransformer: stateColumnTransformer
   }
 ];
 const GET_USER_TASKS_BY_STATE = gql`