FE: Refactor NewTable Types (#141)

kafbat · Feb 19, 2024 · 32d2a58 · 32d2a58
1 parent 182bbdf
commit 32d2a58
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 46 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -82,7 +82,7 @@
     "react/function-component-definition": [
       2,
       {
-        "namedComponents": "arrow-function",
+        "namedComponents": ["arrow-function", "function-declaration"],
         "unnamedComponents": "arrow-function"
       }
     ],

diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, Row } from '@tanstack/react-table';
 import { useTheme } from 'styled-components';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import Table from 'components/common/NewTable';
@@ -130,9 +130,9 @@ const ACList: React.FC = () => {
     [rowId]
   );
 
-  const onRowHover = (value: unknown) => {
-    if (value && typeof value === 'object' && 'id' in value) {
-      setRowId(value.id as string);
+  const onRowHover = (value: Row<KafkaAcl>) => {
+    if (value) {
+      setRowId(value.id);
     }
   };
 

diff --git a/frontend/src/components/Connect/Details/Tasks/Tasks.tsx b/frontend/src/components/Connect/Details/Tasks/Tasks.tsx
@@ -50,7 +50,11 @@ const Tasks: React.FC = () => {
       data={data}
       emptyMessage="No tasks found"
       enableSorting
-      getRowCanExpand={(row) => row.original.status.trace?.length > 0}
+      getRowCanExpand={(row) => {
+        const { trace } = row.original.status;
+        if (trace === undefined) return false;
+        return trace.length > 0;
+      }}
       renderSubComponent={ExpandedTaskRow}
     />
   );

diff --git a/frontend/src/components/ConsumerGroups/List.tsx b/frontend/src/components/ConsumerGroups/List.tsx
@@ -3,7 +3,7 @@ import PageHeading from 'components/common/PageHeading/PageHeading';
 import Search from 'components/common/Search/Search';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
 import {
-  ConsumerGroupDetails,
+  ConsumerGroup,
   ConsumerGroupOrdering,
   ConsumerGroupState,
   SortOrder,
@@ -33,7 +33,7 @@ const List = () => {
     search: searchParams.get('q') || '',
   });
 
-  const columns = React.useMemo<ColumnDef<ConsumerGroupDetails>[]>(
+  const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
     () => [
       {
         id: ConsumerGroupOrdering.NAME,

diff --git a/frontend/src/components/common/NewTable/ExpanderCell.tsx b/frontend/src/components/common/NewTable/ExpanderCell.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import * as S from './Table.styled';
 
-const ExpanderCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => {
+function ExpanderCell<T, V = unknown>({ row }: CellContext<T, V>) {
   return (
     <S.ExpaderButton
       width="16"
@@ -31,6 +31,6 @@ const ExpanderCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => {
       )}
     </S.ExpaderButton>
   );
-};
+}
 
 export default ExpanderCell;
diff --git a/frontend/src/components/common/NewTable/SelectRowCell.tsx b/frontend/src/components/common/NewTable/SelectRowCell.tsx
@@ -2,13 +2,15 @@ import { CellContext } from '@tanstack/react-table';
 import React from 'react';
 import IndeterminateCheckbox from 'components/common/IndeterminateCheckbox/IndeterminateCheckbox';
 
-const SelectRowCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => (
-  <IndeterminateCheckbox
-    checked={row.getIsSelected()}
-    disabled={!row.getCanSelect()}
-    indeterminate={row.getIsSomeSelected()}
-    onChange={row.getToggleSelectedHandler()}
-  />
-);
+function SelectRowCell<T, V = unknown>({ row }: CellContext<T, V>) {
+  return (
+    <IndeterminateCheckbox
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      indeterminate={row.getIsSomeSelected()}
+      onChange={row.getToggleSelectedHandler()}
+    />
+  );
+}
 
 export default SelectRowCell;
diff --git a/frontend/src/components/common/NewTable/SelectRowHeader.tsx b/frontend/src/components/common/NewTable/SelectRowHeader.tsx
@@ -1,15 +1,15 @@
-import { HeaderContext } from '@tanstack/react-table';
 import React from 'react';
 import IndeterminateCheckbox from 'components/common/IndeterminateCheckbox/IndeterminateCheckbox';
+import { HeaderContext } from '@tanstack/react-table';
 
-const SelectRowHeader: React.FC<HeaderContext<unknown, unknown>> = ({
-  table,
-}) => (
-  <IndeterminateCheckbox
-    checked={table.getIsAllRowsSelected()}
-    indeterminate={table.getIsSomeRowsSelected()}
-    onChange={table.getToggleAllRowsSelectedHandler()}
-  />
-);
+function SelectRowHeader<T, V = unknown>({ table }: HeaderContext<T, V>) {
+  return (
+    <IndeterminateCheckbox
+      checked={table.getIsAllRowsSelected()}
+      indeterminate={table.getIsSomeRowsSelected()}
+      onChange={table.getToggleAllRowsSelectedHandler()}
+    />
+  );
+}
 
 export default SelectRowHeader;
diff --git a/frontend/src/components/common/NewTable/Table.tsx b/frontend/src/components/common/NewTable/Table.tsx
@@ -26,15 +26,15 @@ import ExpanderCell from './ExpanderCell';
 import SelectRowCell from './SelectRowCell';
 import SelectRowHeader from './SelectRowHeader';
 
-export interface TableProps<TData> {
+export interface TableProps<TData, TValue> {
   data: TData[];
   pageCount?: number;
-  columns: ColumnDef<TData>[];
+  columns: ColumnDef<TData, TValue>[];
 
   // Server-side processing: sorting, pagination
   serverSideProcessing?: boolean;
 
-  // Expandeble rows
+  // Expandable rows
   getRowCanExpand?: (row: Row<TData>) => boolean; // Enables the ability to expand row. Use `() => true` when want to expand all rows.
   renderSubComponent?: React.FC<{ row: Row<TData> }>; // Component to render expanded row.
 
@@ -56,7 +56,7 @@ export interface TableProps<TData> {
   onRowHover?: (row: Row<TData>) => void;
   onMouseLeave?: () => void;
 
-  setRowId?: (originalRow: Row<TData>) => string;
+  setRowId?: (originalRow: TData) => string;
 }
 
 type UpdaterFn<T> = (previousState: T) => T;
@@ -118,8 +118,7 @@ const getSortingFromSearchParams = (searchParams: URLSearchParams) => {
  *    - use URLSearchParams to get the pagination and sorting state from the url for your server side processing.
  */
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table: React.FC<TableProps<any>> = ({
+function Table<TData, TValue = unknown>({
   data,
   pageCount,
   columns,
@@ -135,7 +134,7 @@ const Table: React.FC<TableProps<any>> = ({
   onRowHover,
   onMouseLeave,
   setRowId,
-}) => {
+}: TableProps<TData, TValue>) {
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const [rowSelection, setRowSelection] = React.useState({});
@@ -157,7 +156,7 @@ const Table: React.FC<TableProps<any>> = ({
     [searchParams, location]
   );
 
-  const table = useReactTable({
+  const table = useReactTable<TData>({
     data,
     pageCount,
     columns,
@@ -167,10 +166,16 @@ const Table: React.FC<TableProps<any>> = ({
       rowSelection,
     },
     getRowId: (originalRow, index) => {
-      return (
-        setRowId?.(originalRow) ||
-        (originalRow.name ? originalRow.name : `${index}`)
-      );
+      if (setRowId) {
+        return setRowId(originalRow);
+      }
+
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      if ('name' in (originalRow as {})) {
+        return (originalRow as unknown as { name: string }).name;
+      }
+
+      return index.toString();
     },
     onSortingChange: onSortingChange as OnChangeFn<SortingState>,
     onPaginationChange: onPaginationChange as OnChangeFn<PaginationState>,
@@ -187,7 +192,7 @@ const Table: React.FC<TableProps<any>> = ({
     enableRowSelection,
   });
 
-  const handleRowClick = (row: Row<typeof data>) => (e: React.MouseEvent) => {
+  const handleRowClick = (row: Row<TData>) => (e: React.MouseEvent) => {
     // If row selection is enabled do not handle row click.
     if (enableRowSelection) return undefined;
 
@@ -205,7 +210,7 @@ const Table: React.FC<TableProps<any>> = ({
     return undefined;
   };
 
-  const handleRowHover = (row: Row<typeof data>) => (e: React.MouseEvent) => {
+  const handleRowHover = (row: Row<TData>) => (e: React.MouseEvent) => {
     if (onRowHover) {
       e.stopPropagation();
       return onRowHover(row);
@@ -238,7 +243,7 @@ const Table: React.FC<TableProps<any>> = ({
                 {!!enableRowSelection && (
                   <S.Th key={`${headerGroup.id}-select`}>
                     {flexRender(
-                      SelectRowHeader,
+                      SelectRowHeader<TData>,
                       headerGroup.headers[0].getContext()
                     )}
                   </S.Th>
@@ -287,15 +292,15 @@ const Table: React.FC<TableProps<any>> = ({
                   {!!enableRowSelection && (
                     <td key={`${row.id}-select`} style={{ width: '1px' }}>
                       {flexRender(
-                        SelectRowCell,
+                        SelectRowCell<TData>,
                         row.getVisibleCells()[0].getContext()
                       )}
                     </td>
                   )}
                   {table.getCanSomeRowsExpand() && (
                     <td key={`${row.id}-expander`} style={{ width: '1px' }}>
                       {flexRender(
-                        ExpanderCell,
+                        ExpanderCell<TData>,
                         row.getVisibleCells()[0].getContext()
                       )}
                     </td>
@@ -397,6 +402,6 @@ const Table: React.FC<TableProps<any>> = ({
       )}
     </>
   );
-};
+}
 
 export default Table;