From 7060de871bc0aa8904b7a83f774da155f9e531cd Mon Sep 17 00:00:00 2001
From: mkrause <maikel.krause@fortanix.com>
Date: Wed, 27 Nov 2024 13:54:07 +0100
Subject: [PATCH] Rework basic DataTable components to be free of errors.

---
 src/assets/icons/_icons.ts                    |  7 ----
 src/components/graphics/Icon/Icon.tsx         |  7 +++-
 .../DataTable/plugins/useCustomFilters.tsx    |  9 +++---
 .../DataTable/plugins/useRowSelectColumn.scss |  8 ++---
 .../DataTable/plugins/useRowSelectColumn.tsx  |  7 ++--
 .../tables/DataTable/table/DataTable.tsx      |  4 +--
 .../DataTable/table/DataTablePlaceholder.tsx  | 32 ++++++-------------
 7 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/src/assets/icons/_icons.ts b/src/assets/icons/_icons.ts
index 323597b..6149133 100644
--- a/src/assets/icons/_icons.ts
+++ b/src/assets/icons/_icons.ts
@@ -56,10 +56,3 @@ export const icons = {
   'warning': {},
   'workflows': {},
 } as const satisfies Record<string, IconDef>;
-
-export type IconKey = keyof typeof icons;
-
-const iconKeys = new Set(Object.keys(icons));
-export const isIconKey = (iconKey: string): iconKey is IconKey => {
-  return iconKeys.has(iconKey);
-};
diff --git a/src/components/graphics/Icon/Icon.tsx b/src/components/graphics/Icon/Icon.tsx
index 737aaf2..884b9db 100644
--- a/src/components/graphics/Icon/Icon.tsx
+++ b/src/components/graphics/Icon/Icon.tsx
@@ -9,9 +9,14 @@ import { icons } from '../../../assets/icons/_icons.ts';
 import cl from './Icon.module.scss';
 
 
-export type IconName = keyof typeof icons;
 export { cl as IconClassNames };
 
+export type IconName = keyof typeof icons;
+export const iconNames = new Set(Object.keys(icons) as Array<IconName>);
+export const isIconName = (iconName: string): iconName is IconName => {
+  return (iconNames as Set<string>).has(iconName);
+};
+
 export type Decoration = (
   | { type: 'background-circle' }
 );
diff --git a/src/components/tables/DataTable/plugins/useCustomFilters.tsx b/src/components/tables/DataTable/plugins/useCustomFilters.tsx
index cad5263..c74c527 100644
--- a/src/components/tables/DataTable/plugins/useCustomFilters.tsx
+++ b/src/components/tables/DataTable/plugins/useCustomFilters.tsx
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import * as ReactTable from 'react-table';
+import { type FilterQuery } from '../../MultiSearch/MultiSearch.tsx';
 
 
 // Actions
@@ -26,13 +27,11 @@ const reducer = <D extends object>(
 };
 
 const useInstance = <D extends object>(instance: ReactTable.TableInstance<D>) => {
-  const {
-    state: { customFilters },
-    dispatch,
-  } = instance;
+  const { dispatch, } = instance;
+  //const customFilters = instance.state.customFilters;
   
   const setCustomFilters = React.useCallback(
-    customFilters => {
+    (customFilters: FilterQuery) => {
       return dispatch({ type: ReactTable.actions.setCustomFilters, customFilters });
     },
     [dispatch],
diff --git a/src/components/tables/DataTable/plugins/useRowSelectColumn.scss b/src/components/tables/DataTable/plugins/useRowSelectColumn.scss
index a132752..ef3aec8 100644
--- a/src/components/tables/DataTable/plugins/useRowSelectColumn.scss
+++ b/src/components/tables/DataTable/plugins/useRowSelectColumn.scss
@@ -7,12 +7,12 @@
 .bkl-data-table-row-select {
   width: bkl.$sizing-7 + bkl.$sizing-1;
   max-width: bkl.$sizing-7 + bkl.$sizing-1;
-
-  &__header {
+  
+  .bkl-data-table-row-select__header {
     margin-bottom: bkl.$sizing-m;
   }
-
-  &__cell {
+  
+  .bkl-data-table-row-select__cell {
     margin-bottom: bkl.$sizing-m;
   }
 }
diff --git a/src/components/tables/DataTable/plugins/useRowSelectColumn.tsx b/src/components/tables/DataTable/plugins/useRowSelectColumn.tsx
index e0c0578..be78f0f 100644
--- a/src/components/tables/DataTable/plugins/useRowSelectColumn.tsx
+++ b/src/components/tables/DataTable/plugins/useRowSelectColumn.tsx
@@ -4,7 +4,8 @@
 
 import * as React from 'react';
 import * as ReactTable from 'react-table';
-import { Checkbox } from '../../../forms/checkbox/Checkbox';
+
+import { Checkbox } from '../../../forms/controls/Checkbox/Checkbox.tsx';
 
 import './useRowSelectColumn.scss';
 
@@ -20,7 +21,7 @@ export const useRowSelectColumn = <D extends object>(hooks: ReactTable.Hooks<D>)
         const { checked, onChange } = getToggleAllPageRowsSelectedProps();
         return (
           <div className="bkl-data-table-row-select__header">
-            <Checkbox.Item primary checked={checked} onChange={onChange}/>
+            <Checkbox checked={checked} onChange={onChange}/>
           </div>
         );
       },
@@ -28,7 +29,7 @@ export const useRowSelectColumn = <D extends object>(hooks: ReactTable.Hooks<D>)
         const { checked, onChange } = row.getToggleRowSelectedProps();
         return (
           <div className="bkl-data-table-row-select__cell">
-            <Checkbox.Item primary checked={checked} onChange={onChange}/>
+            <Checkbox checked={checked} onChange={onChange}/>
           </div>
         );
       },
diff --git a/src/components/tables/DataTable/table/DataTable.tsx b/src/components/tables/DataTable/table/DataTable.tsx
index f8f0e80..aedb75d 100644
--- a/src/components/tables/DataTable/table/DataTable.tsx
+++ b/src/components/tables/DataTable/table/DataTable.tsx
@@ -19,7 +19,7 @@ import type { DataTableStatus } from '../DataTableContext.tsx';
 
 
 // Note: `placeholder` is included in `table` props as part of "Standard HTML Attributes", but it's not actually a
-// valid `<table>` attribute, so we can override it.
+// valid `<table>` attribute, so we can safely override it.
 type DataTableProps<D extends object> = Omit<ComponentProps<'table'>, 'placeholder'> & {
   table: ReactTable.TableInstance<D>,
   columnGroups?: React.ReactNode,
@@ -76,7 +76,7 @@ export const DataTable = <D extends object>(props: DataTableProps<D>) => {
                     {column.render('Header')}
                   </span>
                   {column.canSort &&
-                    <Icon icon="arrow-drop-down"
+                    <Icon icon="caret-down"
                       className={cx('sort-indicator',
                         { 'sort-indicator--inactive': !column.isSorted },
                         { 'asc': !column.isSorted || (column.isSorted && !column.isSortedDesc) },
diff --git a/src/components/tables/DataTable/table/DataTablePlaceholder.tsx b/src/components/tables/DataTable/table/DataTablePlaceholder.tsx
index d78bb3f..d6c8535 100644
--- a/src/components/tables/DataTable/table/DataTablePlaceholder.tsx
+++ b/src/components/tables/DataTable/table/DataTablePlaceholder.tsx
@@ -4,14 +4,13 @@
 
 import * as React from 'react';
 import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
-import { type IconKey, isIconKey } from '../../../../assets/icons/_icons.ts';
-import { Icon, type IconProps } from '../../../graphics/Icon/Icon.tsx';
+import { type IconName, isIconName, Icon, type IconProps } from '../../../graphics/Icon/Icon.tsx';
 
 //import './DataTablePlaceholder.scss';
 
 
 type DataTablePlaceholderProps = ComponentProps<'div'> & {
-  icon?: IconKey | React.ReactNode,
+  icon?: IconName | React.ReactNode,
   classNameIcon?: ClassNameArgument,
   classNameMessage?: ClassNameArgument,
   classNameActions?: ClassNameArgument,
@@ -29,16 +28,10 @@ export const DataTablePlaceholder = (props: DataTablePlaceholderProps) => {
   };
   
   const renderIcon = (): React.ReactNode => {
-    if (typeof icon === 'undefined') {
-      return renderStandardIcon('view-type-table');
+    if (typeof icon === 'string' && isIconName(icon)) {
+      return renderStandardIcon(icon);
     }
-    if (typeof icon === 'string') {
-      if (isIconKey(icon)) {
-        return renderStandardIcon(icon);
-      }
-      throw new Error(`Invalid icon ${icon}`);
-    }
-    return icon;
+    return renderStandardIcon('file');
   };
   
   return (
@@ -57,7 +50,6 @@ export const DataTablePlaceholder = (props: DataTablePlaceholderProps) => {
     </div>
   );
 };
-DataTablePlaceholder.displayName = 'DataTablePlaceholder';
 
 
 // Loading skeleton (when there's no data to show yet)
@@ -72,7 +64,6 @@ export const DataTablePlaceholderSkeleton = (props: DataTablePlaceholderSkeleton
     </div>
   );
 };
-DataTablePlaceholderSkeleton.displayName = 'DataTablePlaceholderSkeleton';
 
 
 // Empty table (ready but no data)
@@ -89,7 +80,6 @@ export const DataTablePlaceholderEmpty = (props: DataTablePlaceholderEmptyProps)
     />
   );
 };
-DataTablePlaceholderEmpty.displayName = 'DataTablePlaceholderEmpty';
 
 
 type DataTableErrorIconProps = Omit<IconProps, 'icon'> & {
@@ -100,14 +90,13 @@ export const DataTableErrorIcon = (props: DataTableErrorIconProps) => {
   return (
     <div className="bk-table-placeholder--error__error-icon">
       <Icon icon="cross" className="icon-cross"/>
-      <Icon decoration={decoration} icon="view-type-table"
+      <Icon decoration={decoration} icon="file"
         {...props}
         className={cx('bk-table-placeholder__icon', props.className)}
       />
     </div>
   );
 };
-DataTableErrorIcon.displayName = 'DataTableErrorIcon';
 
 type DataTablePlaceholderErrorProps = Omit<DataTablePlaceholderProps, 'placeholderMessage'> & {
   // Make `placeholderMessage` optional
@@ -123,11 +112,10 @@ export const DataTablePlaceholderError = (props: DataTablePlaceholderErrorProps)
     />
   );
 };
-DataTablePlaceholderError.displayName = 'DataTablePlaceholderError';
 
 
 type DataTableRowPlaceholderProps = ComponentProps<'div'> & {
-  icon?: IconKey | React.ReactNode,
+  icon?: IconName | React.ReactNode,
   classNameIcon?: ClassNameArgument,
   classNameMessage?: ClassNameArgument,
   classNameActions?: ClassNameArgument,
@@ -145,10 +133,10 @@ export const DataTableRowPlaceholder = (props: DataTableRowPlaceholderProps) =>
   
   const renderIcon = (): React.ReactNode => {
     if (typeof icon === 'undefined') {
-      return renderStandardIcon('event-warning');
+      return renderStandardIcon('alert');
     }
     if (typeof icon === 'string') {
-      if (isIconKey(icon)) {
+      if (isIconName(icon)) {
         return renderStandardIcon(icon);
       }
       throw new Error(`Invalid icon ${icon}`);
@@ -172,7 +160,6 @@ export const DataTableRowPlaceholder = (props: DataTableRowPlaceholderProps) =>
     </div>
   );
 };
-DataTableRowPlaceholder.displayName = 'DataTableRowPlaceholder';
 
 type DataTablePlaceholderEndOfTableProps = Omit<DataTableRowPlaceholderProps, 'placeholderMessage'> & {
   // Make `placeholderMessage` optional
@@ -188,4 +175,3 @@ export const DataTablePlaceholderEndOfTable = (props: DataTablePlaceholderEndOfT
     />
   );
 };
-DataTablePlaceholderEndOfTable.displayName = 'DataTablePlaceholderEndOfTable';