fix(table): fix an issue when key in columnDefinition doesn't exist i…

…n TableItems (#146) fix: remove unused variables.
awslabs · Sep 13, 2022 · 13c7dfe · 13c7dfe
1 parent ba18720
commit 13c7dfe
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/packages/table/package.json b/packages/table/package.json
@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "IoT Application Kit - Table component",
   "license": "Apache-2.0",
   "main": "./dist/index.cj.js",

diff --git a/packages/table/src/table/index.tsx b/packages/table/src/table/index.tsx
@@ -5,14 +5,16 @@ import { TableProps } from '../utils';
 import { defaultI18nStrings, getDefaultColumnDefinitions } from '../utils/tableHelpers';
 
 export const Table: FunctionComponent<TableProps> = (props) => {
-  const { items, useCollectionOption = { sorting: {} }, columnDefinitions } = props;
-  const { collectionProps, propertyFilterProps } = useCollection(items, useCollectionOption);
+  const { items: initalItems, useCollectionOption = { sorting: {} }, columnDefinitions } = props;
+  const { items, collectionProps, propertyFilterProps } = useCollection(initalItems, useCollectionOption);
+  const { propertyFiltering } = useCollectionOption;
   return (
     <AWSUITable
       {...props}
+      items={items}
       {...collectionProps}
       columnDefinitions={getDefaultColumnDefinitions(columnDefinitions)}
-      filter={<PropertyFilter {...propertyFilterProps} i18nStrings={defaultI18nStrings} />}
+      filter={propertyFiltering && <PropertyFilter {...propertyFilterProps} i18nStrings={defaultI18nStrings} />}
     />
   );
 };
diff --git a/packages/table/src/utils/tableHelpers.spec.ts b/packages/table/src/utils/tableHelpers.spec.ts
@@ -42,8 +42,12 @@ describe('default cell function', () => {
       key: 'data',
       header: 'Data',
     },
+    {
+      key: 'notExist',
+      header: 'Not Exist',
+    },
   ];
-  const columnDef = getDefaultColumnDefinitions(userColumnDefinitions)[0];
+  const [firstColumnDef, secondColumnDef] = getDefaultColumnDefinitions(userColumnDefinitions);
 
   it("returns item's value", () => {
     const item: TableItem = {
@@ -54,14 +58,31 @@ describe('default cell function', () => {
         valueOf: jest.fn(),
       },
     };
-    const cell = columnDef.cell(item) as ReactElement<HTMLSpanElement>;
+    const cell = firstColumnDef.cell(item) as ReactElement<HTMLSpanElement>;
     act(() => {
       root.render(cell);
     });
 
     expect(container.textContent).toContain('10');
   });
 
+  it('return empty when property not found in tableItem', () => {
+    const item: TableItem = {
+      data: {
+        value: 10,
+        error: undefined,
+        isLoading: undefined,
+        valueOf: jest.fn(),
+      },
+    };
+    const cell = secondColumnDef.cell(item) as ReactElement<HTMLSpanElement>;
+    act(() => {
+      root.render(cell);
+    });
+
+    expect(container.textContent).toBeEmpty();
+  });
+
   it('returns error message when in error state', () => {
     const item: TableItem = {
       data: {
@@ -73,7 +94,7 @@ describe('default cell function', () => {
         valueOf: jest.fn(),
       },
     };
-    const cell = columnDef.cell(item) as ReactElement<HTMLSpanElement>;
+    const cell = firstColumnDef.cell(item) as ReactElement<HTMLSpanElement>;
     act(() => {
       root.render(cell);
     });
@@ -91,7 +112,7 @@ describe('default cell function', () => {
       },
     };
 
-    const cell = columnDef.cell(item) as ReactElement;
+    const cell = firstColumnDef.cell(item) as ReactElement;
     act(() => {
       root.render(cell);
     });

diff --git a/packages/table/src/utils/tableHelpers.tsx b/packages/table/src/utils/tableHelpers.tsx
@@ -7,26 +7,26 @@ import { getIcons } from './iconUtils';
 import { LoadingSpinner } from './spinner';
 
 export const getDefaultColumnDefinitions: (
-  useColumnDefinitions: ColumnDefinition<TableItem>[]
-) => AWSUITableProps.ColumnDefinition<TableItem>[] = (useColumnDefinitions) => {
-  return useColumnDefinitions.map((colDef) => ({
+  columnDefinitions: ColumnDefinition<TableItem>[]
+) => AWSUITableProps.ColumnDefinition<TableItem>[] = (columnDefinitions) => {
+  return columnDefinitions.map((colDef) => ({
     cell: (item: TableItem) => {
+      if (!(colDef.key in item)) {
+        return <span />;
+      }
+
       const { error, isLoading, value, threshold } = item[colDef.key];
       const { color = 'unset', icon } = threshold || {};
       if (error) {
         return (
-          <div className="error">
+          <>
             {getIcons(StatusIcon.ERROR)} {error.msg}
-          </div>
+          </>
         );
       }
 
       if (isLoading) {
-        return (
-          <div className="loading-wrapper">
-            <LoadingSpinner size={16} />
-          </div>
-        );
+        return <LoadingSpinner size={16} />;
       }
 
       if (colDef.formatter && value) {