Merge pull request #4834 from vojtechszocs/TableRow-types-followup

Fix remaining Table.Row prop typings

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

@@ -6,7 +6,13 @@ import { sortable } from '@patternfly/react-table';
 import { getName, getUID } from '@console/shared';
 import { NodeModel } from '@console/internal/models';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
-import { Table, TableRow, TableData, ListPage } from '@console/internal/components/factory';
+import {
+  Table,
+  TableRow,
+  TableData,
+  ListPage,
+  RowFunctionArgs,
+} from '@console/internal/components/factory';
 import {
   Kebab,
   ResourceKebab,
@@ -103,7 +109,13 @@ type NodesRowMapFromStateProps = {
 };
 
 const NodesTableRow = connect<NodesRowMapFromStateProps, null, NodesTableRowProps>(mapStateToProps)(
-  ({ obj: node, index, key, style, metrics }: NodesTableRowProps & NodesRowMapFromStateProps) => {
+  ({
+    obj: node,
+    index,
+    rowKey,
+    style,
+    metrics,
+  }: NodesTableRowProps & NodesRowMapFromStateProps) => {
     const nodeName = getName(node);
     const nodeUID = getUID(node);
     const usedMem = metrics?.usedMemory?.[nodeName];
@@ -121,7 +133,7 @@ const NodesTableRow = connect<NodesRowMapFromStateProps, null, NodesTableRowProp
         : '-';
     const pods = metrics?.pods?.[nodeName] ?? '-';
     return (
-      <TableRow id={nodeUID} index={index} trKey={key} style={style}>
+      <TableRow id={nodeUID} index={index} trKey={rowKey} style={style}>
         <TableData className={tableColumnClasses[0]}>
           <ResourceLink kind={referenceForModel(NodeModel)} name={nodeName} title={nodeUID} />
         </TableData>
@@ -156,16 +168,23 @@ NodesTableRow.displayName = 'NodesTableRow';
 type NodesTableRowProps = {
   obj: NodeKind;
   index: number;
-  key?: string;
+  rowKey: string;
   style: object;
 };
 
 const NodesTable: React.FC<NodesTableProps> = React.memo((props) => {
-  const row = React.useCallback(
-    (rowProps: NodesTableRowProps) => <NodesTableRow {...rowProps} />,
+  const Row = React.useCallback(
+    (rowArgs: RowFunctionArgs<NodeKind>) => (
+      <NodesTableRow
+        obj={rowArgs.obj}
+        index={rowArgs.index}
+        rowKey={rowArgs.key}
+        style={rowArgs.style}
+      />
+    ),
     [],
   );
-  return <Table {...props} aria-label="Nodes" Header={NodeTableHeader} Row={row} virtualize />;
+  return <Table {...props} aria-label="Nodes" Header={NodeTableHeader} Row={Row} virtualize />;
 });
 
 type NodesTableProps = React.ComponentProps<typeof Table> & {

frontend/packages/dev-console/src/components/custom-resource-list/__tests__/CustomResourceList.spec.tsx

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import * as fuzzy from 'fuzzysearch';
 import { SortByDirection, sortable } from '@patternfly/react-table';
-import { TableRow, TableData, Table, TextFilter } from '@console/internal/components/factory';
+import {
+  TableRow,
+  TableData,
+  Table,
+  TextFilter,
+  RowFunction,
+} from '@console/internal/components/factory';
 import CustomResourceList from '../CustomResourceList';
 import {
   CustomResourceListProps,
   CustomResourceListRowFilter,
-  CustomResourceListRowProps,
 } from '../custom-resource-list-types';
 
 let customResourceListProps: CustomResourceListProps;
@@ -41,7 +46,7 @@ const MockTableHeader = () => {
   ];
 };
 
-const MockTableRow: React.FC<CustomResourceListRowProps> = ({ obj, index, key, style }) => (
+const MockTableRow: RowFunction = ({ obj, index, key, style }) => (
   <TableRow id={obj.name} index={index} trKey={key} style={style}>
     <TableData className={mockColumnClasses.name}>{obj.name}</TableData>
     <TableData className={mockColumnClasses.version}>{obj.version}</TableData>

frontend/packages/dev-console/src/components/custom-resource-list/custom-resource-list-types.ts

@@ -1,3 +1,4 @@
+import { RowFunction } from '@console/internal/components/factory';
 import { SortByDirection } from '@patternfly/react-table';
 
 export interface CustomResourceListRowFilter {
@@ -7,19 +8,12 @@ export interface CustomResourceListRowFilter {
   items: { [key: string]: any }[];
 }
 
-export interface CustomResourceListRowProps {
-  obj: { [key: string]: any };
-  index: number;
-  key?: string;
-  style: object;
-}
-
 export interface CustomResourceListProps {
   queryArg?: string;
   rowFilters?: CustomResourceListRowFilter[];
   sortBy: string;
   sortOrder: SortByDirection;
-  resourceRow: React.ComponentType<CustomResourceListRowProps>;
+  resourceRow: RowFunction;
   dependentResource?: any;
   resourceHeader: () => { [key: string]: any }[];
   fetchCustomResources: () => Promise<{ [key: string]: any }[]>;

frontend/packages/dev-console/src/components/helm/HelmReleaseHistoryRow.tsx

@@ -1,17 +1,11 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Status } from '@console/shared';
-import { TableRow, TableData } from '@console/internal/components/factory';
+import { TableRow, TableData, RowFunction } from '@console/internal/components/factory';
 import { Timestamp } from '@console/internal/components/utils';
 import { tableColumnClasses } from './HelmReleaseHistoryHeader';
-import { CustomResourceListRowProps } from '../custom-resource-list/custom-resource-list-types';
 
-const HelmReleaseHistoryRow: React.FC<CustomResourceListRowProps> = ({
-  obj,
-  index,
-  key,
-  style,
-}) => {
+const HelmReleaseHistoryRow: RowFunction = ({ obj, index, key, style }) => {
   return (
     <TableRow id={obj.revision} index={index} trKey={key} style={style}>
       <TableData className={tableColumnClasses.revision}>{obj.version}</TableData>

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/networking-tab/vm-wizard-nic-row.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Kebab, KebabOption } from '@console/internal/components/utils';
+import { RowFunction } from '@console/internal/components/factory';
 import { NicSimpleRow } from '../../../vm-nics/nic-row';
 import { VMWizardNetworkWithWrappers } from '../../types';
 import { VMWizardNetworkBundle, VMWizardNicRowActionOpts, VMWizardNicRowCustomData } from './types';
@@ -46,14 +47,7 @@ const getActions = (
   return actions.map((a) => a(wizardNetworkData, opts));
 };
 
-export type VMWizardNicRowProps = {
-  obj: VMWizardNetworkBundle;
-  customData: VMWizardNicRowCustomData;
-  index: number;
-  style: object;
-};
-
-export const VMWizardNicRow: React.FC<VMWizardNicRowProps> = ({
+export const VMWizardNicRow: RowFunction<VMWizardNetworkBundle, VMWizardNicRowCustomData> = ({
   obj: { name, wizardNetworkData, ...restData },
   customData: { isDisabled, columnClasses, removeNIC, withProgress, wizardReduxID },
   index,

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/storage-tab/vm-wizard-storage-row.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Kebab, KebabOption } from '@console/internal/components/utils';
+import { RowFunction } from '@console/internal/components/factory';
 import { VMWizardStorageType, VMWizardStorageWithWrappers } from '../../types';
 import { DiskSimpleRow } from '../../../vm-disks/disk-row';
 import {
@@ -52,14 +53,10 @@ export const getActions = (
   opts: VMWizardStorageRowActionOpts,
 ) => [menuActionEdit, menuActionRemove].map((a) => a(wizardNetworkData, opts));
 
-export type VMWizardNicRowProps = {
-  obj: VMWizardStorageBundle;
-  customData: VMWizardStorageRowCustomData;
-  index: number;
-  style: object;
-};
-
-export const VmWizardStorageRow: React.FC<VMWizardNicRowProps> = ({
+export const VmWizardStorageRow: RowFunction<
+  VMWizardStorageBundle,
+  VMWizardStorageRowCustomData
+> = ({
   obj: { name, wizardStorageData, ...restData },
   customData: { isDisabled, columnClasses, removeStorage, withProgress, wizardReduxID },
   index,

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/virtual-hardware-tab/vm-wizard-virtualhardware-row.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Kebab } from '@console/internal/components/utils';
+import { RowFunction } from '@console/internal/components/factory';
 import { CDSimpleRow } from '../../../vm-disks/cd-row';
 import { VMWizardStorageBundle, VMWizardStorageRowCustomData } from '../storage-tab/types';
 import { getActions } from '../storage-tab/vm-wizard-storage-row';
 
-export type VmWizardVirtualHardwareRowProps = {
-  obj: VMWizardStorageBundle;
-  customData: VMWizardStorageRowCustomData;
-  index: number;
-  style: object;
-};
-
-export const VmWizardVirtualHardwareRow: React.FC<VmWizardVirtualHardwareRowProps> = ({
+export const VmWizardVirtualHardwareRow: RowFunction<
+  VMWizardStorageBundle,
+  VMWizardStorageRowCustomData
+> = ({
   obj: { name, wizardStorageData, ...restData },
   customData: { isDisabled, columnClasses, removeStorage, withProgress, wizardReduxID },
   index,

frontend/packages/kubevirt-plugin/src/components/vm-disks/disk-row.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TableData, TableRow } from '@console/internal/components/factory';
+import { TableData, TableRow, RowFunction } from '@console/internal/components/factory';
 import {
   asAccessReview,
   Kebab,
@@ -140,14 +140,7 @@ export const DiskSimpleRow: React.FC<VMDiskSimpleRowProps> = ({
   );
 };
 
-export type VMDiskRowProps = {
-  obj: StorageBundle;
-  customData: VMStorageRowCustomData;
-  index: number;
-  style: object;
-};
-
-export const DiskRow: React.FC<VMDiskRowProps> = ({
+export const DiskRow: RowFunction<StorageBundle, VMStorageRowCustomData> = ({
   obj: { disk, ...restData },
   customData: { isDisabled, withProgress, vmLikeEntity, columnClasses, templateValidations },
   index,

frontend/packages/kubevirt-plugin/src/components/vm-disks/vm-cds.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Table } from '@console/internal/components/factory';
+import { Table, RowFunction } from '@console/internal/components/factory';
 import { dimensifyHeader } from '@console/shared';
 import { sortable } from '@patternfly/react-table';
 
 export type VMCDsTableProps = {
   data?: any[];
   customData?: object;
-  row: React.ComponentClass<any, any> | React.ComponentType<any>;
+  row: RowFunction;
   columnClasses: string[];
 };
 

frontend/packages/kubevirt-plugin/src/components/vm-disks/vm-disks.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Table } from '@console/internal/components/factory';
+import { Table, RowFunction } from '@console/internal/components/factory';
 import { PersistentVolumeClaimModel, TemplateModel } from '@console/internal/models';
 import { Firehose, FirehoseResult, EmptyBox } from '@console/internal/components/utils';
 import { useSafetyFirst } from '@console/internal/components/safety-first';
@@ -54,7 +54,7 @@ const getStoragesData = ({
 export type VMDisksTableProps = {
   data?: any[];
   customData?: object;
-  row: React.ComponentClass<any, any> | React.ComponentType<any>;
+  row: RowFunction;
   columnClasses: string[];
 };
 

frontend/packages/kubevirt-plugin/src/components/vm-nics/nic-row.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TableData, TableRow } from '@console/internal/components/factory';
+import { TableData, TableRow, RowFunction } from '@console/internal/components/factory';
 import { asAccessReview, Kebab, KebabOption } from '@console/internal/components/utils';
 import { TemplateModel } from '@console/internal/models';
 import { DASH, dimensifyRow, getDeletetionTimestamp } from '@console/shared';
@@ -113,14 +113,7 @@ export const NicSimpleRow: React.FC<VMNicSimpleRowProps> = ({
   );
 };
 
-export type VMNicRowProps = {
-  obj: NetworkBundle;
-  customData: VMNicRowCustomData;
-  index: number;
-  style: object;
-};
-
-export const NicRow: React.FC<VMNicRowProps> = ({
+export const NicRow: RowFunction<NetworkBundle, VMNicRowCustomData> = ({
   obj: { name, nic, network, ...restData },
   customData: { isDisabled, withProgress, vmLikeEntity, columnClasses },
   index,

frontend/packages/kubevirt-plugin/src/components/vm-nics/vm-nics.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table } from '@console/internal/components/factory';
+import { Table, RowFunction } from '@console/internal/components/factory';
 import { sortable } from '@patternfly/react-table';
 import { useSafetyFirst } from '@console/internal/components/safety-first';
 import { createBasicLookup, dimensifyHeader } from '@console/shared';
@@ -47,7 +47,7 @@ const getNicsData = (vmLikeEntity: VMGenericLikeEntityKind): NetworkBundle[] =>
 export type VMNicsTableProps = {
   data?: any[];
   customData?: object;
-  row: React.ComponentClass<any, any> | React.ComponentType<any>;
+  row: RowFunction;
   columnClasses: string[];
 };
 

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx

@@ -9,6 +9,7 @@ import {
   TableRow,
   TableData,
   MultiListPage,
+  RowFunction,
 } from '@console/internal/components/factory';
 import {
   Kebab,
@@ -106,13 +107,12 @@ const VMTemplateTableHeader = () =>
 
 VMTemplateTableHeader.displayName = 'VMTemplateTableHeader';
 
-const VMTemplateTableRow: React.FC<VMTemplateTableRowProps> = ({
-  obj: template,
-  customData: { dataVolumeLookup },
-  index,
-  key,
-  style,
-}) => {
+const VMTemplateTableRow: RowFunction<
+  TemplateKind,
+  {
+    dataVolumeLookup: K8sEntityMap<V1alpha1DataVolume>;
+  }
+> = ({ obj: template, customData: { dataVolumeLookup }, index, key, style }) => {
   const dimensify = dimensifyRow(tableColumnClasses);
   const os = getTemplateOperatingSystems([template])[0];
 
@@ -160,7 +160,6 @@ const VMTemplateTableRow: React.FC<VMTemplateTableRowProps> = ({
     </TableRow>
   );
 };
-VMTemplateTableRow.displayName = 'VmTemplateTableRow';
 
 type VirtualMachineTemplatesProps = {
   data: TemplateKind[];
@@ -248,16 +247,6 @@ const WrappedVirtualMachineTemplatesPage: React.FC<VirtualMachineTemplatesPagePr
 
 const VirtualMachineTemplatesPage = withStartGuide(WrappedVirtualMachineTemplatesPage);
 
-type VMTemplateTableRowProps = {
-  obj: TemplateKind;
-  index: number;
-  key: string;
-  style: any;
-  customData: {
-    dataVolumeLookup: K8sEntityMap<V1alpha1DataVolume>;
-  };
-};
-
 type VirtualMachineTemplatesPageProps = {
   match: match<{ ns?: string }>;
   customData: {