CONSOLE-5040: Detangle TableColumn and ConsoleDataViewColumn

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx

@@ -352,7 +352,6 @@ export const ConsoleDataView = <
           <DataViewTable
             key={tableKey}
             aria-label={t(`public~{{label}} table`, { label })}
-            // @ts-expect-error - TODO(react18): CONSOLE-5040: Remove ConsoleDataViewColumn bodge
             columns={dataViewColumns}
             rows={dataViewRows}
             bodyStates={{ empty: bodyEmpty, loading: bodyLoading }}

frontend/packages/console-app/src/components/data-view/useConsoleDataViewData.tsx

@@ -7,20 +7,16 @@ import { SortByDirection } from '@patternfly/react-table';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router';
-import type { ConsoleDataViewTh } from '@console/dynamic-plugin-sdk/src/api/internal-types';
-import type {
-  TableColumn,
-  RowProps,
-} from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+import type { RowProps } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
 import { sortResourceByValue } from '@console/internal/components/factory/Table/sort';
 import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace';
 import type { ConsoleDataViewColumn, GetDataViewRows, ResourceFilters } from './types';
 import { useConsoleDataViewSort, getSortByDirection } from './useConsoleDataViewSort';
 
-const isDataViewConfigurableColumn = (
-  column: ConsoleDataViewTh,
-): column is Extract<DataViewTh, { cell: ReactNode }> => (column as any)?.cell !== undefined;
+const isDataViewConfigurableColumn = <TData,>(
+  column: ConsoleDataViewColumn<TData>,
+): column is ConsoleDataViewColumn<TData> & { cell: ReactNode } => column?.cell !== undefined;
 
 export const useConsoleDataViewData = <
   TData,
@@ -37,7 +33,7 @@ export const useConsoleDataViewData = <
   isResizable = true,
   selection,
 }: {
-  columns: TableColumn<TData>[];
+  columns: ConsoleDataViewColumn<TData>[];
   filteredData: TData[];
   filters: TFilters;
   getDataViewRows: GetDataViewRows<TData, TCustomRowData>;
@@ -97,10 +93,8 @@ export const useConsoleDataViewData = <
 
     return activeColumns.map(({ id, title, sort, props, resizableProps }, index) => {
       // Filter out custom Console props that aren't valid PatternFly ThProps
-      const { isActionCell, ...validThProps } = props || {};
-
       const headerProps: ThProps = {
-        ...validThProps,
+        ...props,
         dataLabel: title,
       };
 
@@ -133,15 +127,15 @@ export const useConsoleDataViewData = <
       return {
         id,
         title,
-        sortFunction: sort,
+        sort,
         props: headerProps,
         resizableProps: isResizable ? resizableProps : undefined,
         cell: title ? (
           <span>{title}</span>
         ) : (
           <span className="pf-v6-u-screen-reader">{t('Actions')}</span>
         ),
-      };
+      } satisfies ConsoleDataViewColumn<TData>;
     });
   }, [activeColumns, t, isResizable, selection, filteredData]);
 
@@ -157,14 +151,14 @@ export const useConsoleDataViewData = <
       return filteredData;
     }
 
-    if (typeof sortColumn.sortFunction === 'string') {
+    if (typeof sortColumn.sort === 'string') {
       return filteredData.sort(
-        sortResourceByValue(sortDirection, (obj) => _.get(obj, sortColumn.sortFunction as string)),
+        sortResourceByValue(sortDirection, (obj) => _.get(obj, sortColumn.sort as string)),
       );
     }
 
-    if (typeof sortColumn.sortFunction === 'function') {
-      return sortColumn.sortFunction(filteredData, sortDirection);
+    if (typeof sortColumn.sort === 'function') {
+      return sortColumn.sort(filteredData, sortDirection);
     }
 
     return filteredData;
@@ -186,16 +180,19 @@ export const useConsoleDataViewData = <
   const dataViewRows = getDataViewRows(transformedData, dataViewColumns);
 
   // Apply sort state and select-all handler updates to columns independently
-  const dataViewColumnsWithSortApplied = useMemo(
+  const dataViewColumnsWithSortApplied = useMemo<DataViewTh[]>(
     () =>
       dataViewColumns.map((column) => {
         if (!isDataViewConfigurableColumn(column)) {
-          return column;
+          return {
+            ...column,
+            cell: null,
+          };
         }
 
         let updatedProps = column.props;
 
-        if (column.sortFunction !== undefined && column.props.sort) {
+        if (column.sort !== undefined && column.props.sort) {
           updatedProps = {
             ...updatedProps,
             sort: {

frontend/packages/console-app/src/components/nodes/NodesPage.tsx

@@ -35,7 +35,6 @@ import type {
   NodeCertificateSigningRequestKind,
   OwnerReference,
   RowProps,
-  TableColumn,
 } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import type { NodeMetrics } from '@console/internal/actions/ui';
 import { setNodeMetrics } from '@console/internal/actions/ui';
@@ -177,12 +176,12 @@ const kind = 'Node';
 const useNodesColumns = (
   vmsEnabled: boolean,
   isOpenShift5: boolean,
-): { columns: TableColumn<NodeRowItem>[]; resetAllColumnWidths: () => void } => {
+): { columns: ConsoleDataViewColumn<NodeRowItem>[]; resetAllColumnWidths: () => void } => {
   const { t } = useTranslation('console-app');
   const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(NodeModel);
   const isAdmin = useFlag(FLAGS.CAN_LIST_NS);
 
-  const columns = useMemo(
+  const columns = useMemo<ConsoleDataViewColumn<NodeRowItem>[]>(
     () => [
       createSelectionColumn<NodeRowItem>(),
       {
@@ -192,7 +191,7 @@ const useNodesColumns = (
         resizableProps: getResizableProps(nodeColumnInfo.name.id),
         props: {
           ...getNameColumnProps(true, true),
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -201,7 +200,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeReadiness, 'False'),
         resizableProps: getResizableProps(nodeColumnInfo.status.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       ...(isOpenShift5
@@ -212,7 +211,7 @@ const useNodesColumns = (
               sort: 'groups',
               resizableProps: getResizableProps(nodeColumnInfo.groups.id),
               props: {
-                modifier: 'nowrap',
+                modifier: 'nowrap' as const,
               },
             },
           ]
@@ -223,7 +222,7 @@ const useNodesColumns = (
         sort: 'machineOwner.name',
         resizableProps: getResizableProps(nodeColumnInfo.machineOwner.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       ...(vmsEnabled
@@ -236,7 +235,7 @@ const useNodesColumns = (
               props: isAdmin
                 ? undefined
                 : {
-                    modifier: 'nowrap',
+                    modifier: 'nowrap' as const,
                     info: {
                       tooltip: t(
                         'This count is based on your access permissions and might not include all virtual machines. Contact your administrator for full access.',
@@ -255,7 +254,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodePods, 0),
         resizableProps: getResizableProps(nodeColumnInfo.pods.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -264,7 +263,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeMemory, 0),
         resizableProps: getResizableProps(nodeColumnInfo.memory.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -273,7 +272,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeCPU, 0),
         resizableProps: getResizableProps(nodeColumnInfo.cpu.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -282,7 +281,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeRolesSort, ''),
         resizableProps: getResizableProps(nodeColumnInfo.role.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -292,7 +291,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeArch, ''),
         resizableProps: getResizableProps(nodeColumnInfo.architecture.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -302,7 +301,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeFS, 0),
         resizableProps: getResizableProps(nodeColumnInfo.filesystem.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -312,7 +311,7 @@ const useNodesColumns = (
         sort: 'metadata.creationTimestamp',
         resizableProps: getResizableProps(nodeColumnInfo.created.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -322,7 +321,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeInstanceType, ''),
         resizableProps: getResizableProps(nodeColumnInfo.instanceType.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -332,7 +331,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeMachine, ''),
         resizableProps: getResizableProps(nodeColumnInfo.machine.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -342,7 +341,7 @@ const useNodesColumns = (
         sort: 'machineConfigPool.metadata.name',
         resizableProps: getResizableProps(nodeColumnInfo.machineConfigPool.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -352,7 +351,7 @@ const useNodesColumns = (
         sort: 'metadata.labels',
         resizableProps: getResizableProps(nodeColumnInfo.labels.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
           ...getLabelsColumnWidthStyleProp(getWidth(nodeColumnInfo.labels.id)),
         },
         additional: true,
@@ -363,7 +362,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeZone, ''),
         resizableProps: getResizableProps(nodeColumnInfo.zone.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },
@@ -373,7 +372,7 @@ const useNodesColumns = (
         sort: sortWithCSRResource(nodeUptime, ''),
         resizableProps: getResizableProps(nodeColumnInfo.uptime.id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
         additional: true,
       },

frontend/packages/console-app/src/components/pdb/PDBList.tsx

@@ -7,9 +7,11 @@ import {
   ConsoleDataView,
   nameCellProps,
 } from '@console/app/src/components/data-view/ConsoleDataView';
-import type { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import type {
+  ConsoleDataViewColumn,
+  GetDataViewRows,
+} from '@console/app/src/components/data-view/types';
 import { useColumnWidthSettings } from '@console/app/src/components/data-view/useResizableColumnProps';
-import type { TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import { ResourceLink } from '@console/internal/components/utils/resource-link';
 import { Selector } from '@console/internal/components/utils/selector';
 import { LoadingBox } from '@console/internal/components/utils/status-box';
@@ -75,14 +77,14 @@ const getDataViewRows: GetDataViewRows<PodDisruptionBudgetKind> = (data, columns
   });
 
 const usePDBColumns = (): {
-  columns: TableColumn<PodDisruptionBudgetKind>[];
+  columns: ConsoleDataViewColumn<PodDisruptionBudgetKind>[];
   resetAllColumnWidths: () => void;
 } => {
   const { t } = useTranslation('console-app');
   const { getResizableProps, resetAllColumnWidths } =
     useColumnWidthSettings(PodDisruptionBudgetModel);
 
-  const columns = useMemo(
+  const columns = useMemo<ConsoleDataViewColumn<PodDisruptionBudgetKind>[]>(
     () => [
       {
         title: t('Name'),
@@ -91,7 +93,7 @@ const usePDBColumns = (): {
         resizableProps: getResizableProps(tableColumnInfo[0].id),
         props: {
           ...nameCellProps,
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -100,7 +102,7 @@ const usePDBColumns = (): {
         sort: 'metadata.namespace',
         resizableProps: getResizableProps(tableColumnInfo[1].id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -109,7 +111,7 @@ const usePDBColumns = (): {
         sort: 'spec.selector',
         resizableProps: getResizableProps(tableColumnInfo[2].id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -118,7 +120,7 @@ const usePDBColumns = (): {
         sort: 'spec.minAvailable',
         resizableProps: getResizableProps(tableColumnInfo[3].id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -127,7 +129,7 @@ const usePDBColumns = (): {
         sort: 'status.disruptionsAllowed',
         resizableProps: getResizableProps(tableColumnInfo[4].id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {
@@ -136,7 +138,7 @@ const usePDBColumns = (): {
         sort: 'metadata.creationTimestamp',
         resizableProps: getResizableProps(tableColumnInfo[5].id),
         props: {
-          modifier: 'nowrap',
+          modifier: 'nowrap' as const,
         },
       },
       {