Improvements to Console DataView code

Author: vojtechszocs

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

@@ -26,15 +26,21 @@ import { ResourceFilters, ResourceMetadata, GetDataViewRows } from './types';
 import { useConsoleDataViewData } from './useConsoleDataViewData';
 import { useConsoleDataViewFilters } from './useConsoleDataViewFilters';
 
-export type ConsoleDataViewProps<TData, TCustomRowData, TFilters> = {
+export const initialFiltersDefault: ResourceFilters = { name: '', label: '' };
+
+export type ConsoleDataViewProps<
+  TData,
+  TCustomRowData = any,
+  TFilters extends ResourceFilters = ResourceFilters
+> = {
   label?: string;
   data: TData[];
   loaded: boolean;
   loadError?: any;
   columns: TableColumn<TData>[];
   columnLayout?: ColumnLayout;
   columnManagementID?: string;
-  initialFilters: TFilters;
+  initialFilters?: TFilters;
   additionalFilterNodes?: React.ReactNode[];
   /**
    * By default, `TData` is assumed to be assignable to `K8sResourceCommon` type.
@@ -100,12 +106,17 @@ export const ConsoleDataView = <
 }: ConsoleDataViewProps<TData, TCustomRowData, TFilters>) => {
   const { t } = useTranslation();
 
+  const initialFiltersOrDefault = React.useMemo(
+    () => initialFilters ?? (initialFiltersDefault as TFilters),
+    [initialFilters],
+  );
+
   const { filters, onSetFilters, clearAllFilters, filteredData } = useConsoleDataViewFilters<
     TData,
     TFilters
   >({
     data,
-    initialFilters,
+    initialFilters: initialFiltersOrDefault,
     getObjectMetadata,
     matchesAdditionalFilters,
   });
@@ -253,5 +264,3 @@ export const actionsCellProps = {
   hasLeftBorder: true,
   isActionCell: true,
 };
-
-export const initialFiltersDefault = { name: '', label: '' };

frontend/packages/console-app/src/components/data-view/types.ts

@@ -23,7 +23,7 @@ export type ConsoleDataViewRow = DataViewTd[];
 /**
  * Maps Console `RowProps` data to DataView compatible format.
  */
-export type GetDataViewRows<TData, TCustomRowData> = (
+export type GetDataViewRows<TData, TCustomRowData = any> = (
   data: RowProps<TData, TCustomRowData>[],
   columns: ConsoleDataViewColumn<TData>[],
 ) => ConsoleDataViewRow[];

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

@@ -545,6 +545,11 @@ const NodeList: React.FC<NodeListProps> = ({
     [],
   );
 
+  const initialFilters = React.useMemo<NodeFilters>(
+    () => ({ ...initialFiltersDefault, status: [], roles: [], architecture: [] }),
+    [],
+  );
+
   // Create stable filter nodes with stable option references to prevent filter resets
   const additionalFilterNodes = React.useMemo<React.ReactNode[]>(
     () => [
@@ -622,9 +627,7 @@ const NodeList: React.FC<NodeListProps> = ({
         columns={columns}
         columnLayout={columnLayout}
         columnManagementID={columnManagementID}
-        initialFilters={
-          { ...initialFiltersDefault, status: [], roles: [], architecture: [] } as NodeFilters
-        }
+        initialFilters={initialFilters}
         additionalFilterNodes={additionalFilterNodes}
         matchesAdditionalFilters={matchesAdditionalFilters}
         getDataViewRows={(rowData, tableColumns) =>

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

@@ -4,7 +4,6 @@ import {
   actionsCellProps,
   cellIsStickyProps,
   getNameCellProps,
-  initialFiltersDefault,
   ConsoleDataView,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
@@ -31,7 +30,7 @@ export const tableColumnInfo = [
   { id: '' },
 ];
 
-const getDataViewRows: GetDataViewRows<PodDisruptionBudgetKind, undefined> = (data, columns) => {
+const getDataViewRows: GetDataViewRows<PodDisruptionBudgetKind> = (data, columns) => {
   return data.map(({ obj: pdb }) => {
     const { name, namespace } = pdb.metadata;
     const resourceKind = referenceForModel(PodDisruptionBudgetModel);
@@ -155,7 +154,6 @@ const PodDisruptionBudgetList: React.FCC<PodDisruptionBudgetsListProps> = ({
         data={data}
         loaded={loaded}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement
       />

frontend/packages/helm-plugin/src/components/details-page/resources/HelmReleaseResourcesList.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ConsoleDataView,
-  initialFiltersDefault,
-} from '@console/app/src/components/data-view/ConsoleDataView';
+import { ConsoleDataView } from '@console/app/src/components/data-view/ConsoleDataView';
 import { TableProps } from '@console/internal/components/factory';
 import { LoadingBox } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
@@ -22,7 +19,6 @@ const HelmReleaseResourcesList: React.FC<TableProps> = (props) => {
         loaded={props.loaded}
         label={t('helm-plugin~Resources')}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="helm-resources-list"

frontend/packages/helm-plugin/src/components/details-page/resources/HelmReleaseResourcesRow.tsx

@@ -31,7 +31,7 @@ export const HelmReleaseResourceStatus: React.FC<HelmReleaseResourceStatusProps>
   );
 };
 
-export const getDataViewRows: GetDataViewRows<K8sResourceKind, undefined> = (data, columns) => {
+export const getDataViewRows: GetDataViewRows<K8sResourceKind> = (data, columns) => {
   return data.map(({ obj: resource }) => {
     const kind = referenceFor(resource);
     const rowCells = {

frontend/packages/helm-plugin/src/components/details-page/resources/__tests__/HelmReleaseResourcesRow.spec.tsx

@@ -5,7 +5,7 @@ import { getDataViewRows, HelmReleaseResourceStatus } from '../HelmReleaseResour
 
 configure({ testIdAttribute: 'data-test' });
 
-let testData: RowProps<K8sResourceKind, undefined>[];
+let testData: RowProps<K8sResourceKind>[];
 let testColumns: TableColumn<K8sResourceKind>[];
 
 describe('getDataViewRows', () => {

frontend/packages/helm-plugin/src/components/list-page/HelmChartRepositoryList.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ConsoleDataView,
-  initialFiltersDefault,
-} from '@console/app/src/components/data-view/ConsoleDataView';
+import { ConsoleDataView } from '@console/app/src/components/data-view/ConsoleDataView';
 import { TableProps } from '@console/internal/components/factory';
 import { LoadingBox } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
@@ -22,7 +19,6 @@ const HelmChartRepositoryList: React.FC<TableProps> = (props) => {
         loaded={props.loaded}
         label={t('helm-plugin~HelmChartRepositories')}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="helm-chart-repositories-list"

frontend/packages/helm-plugin/src/components/list-page/HelmChartRepositoryRow.tsx

@@ -23,7 +23,7 @@ const DisabledCell: React.FC<{ disabled?: boolean }> = ({ disabled }) => {
   return <>{disabled ? t('helm-plugin~True') : t('helm-plugin~False')}</>;
 };
 
-export const getDataViewRows: GetDataViewRows<K8sResourceKind, undefined> = (data, columns) => {
+export const getDataViewRows: GetDataViewRows<K8sResourceKind> = (data, columns) => {
   return data.map(({ obj }) => {
     const objReference = referenceFor(obj);
     const context = { [objReference]: obj };

frontend/packages/helm-plugin/src/components/list-page/HelmReleaseList.tsx

@@ -193,6 +193,8 @@ const HelmReleaseList: React.FC = () => {
     }));
   }, []);
 
+  const initialFilters = React.useMemo(() => ({ ...initialFiltersDefault, status: [] }), []);
+
   const additionalFilterNodes = React.useMemo<React.ReactNode[]>(
     () => [
       <DataViewCheckboxFilter
@@ -262,7 +264,7 @@ const HelmReleaseList: React.FC = () => {
               loaded={isLoaded}
               loadError={secretsLoadError || loadError}
               columns={columns}
-              initialFilters={{ ...initialFiltersDefault, status: [] }}
+              initialFilters={initialFilters}
               additionalFilterNodes={additionalFilterNodes}
               getObjectMetadata={getObjectMetadata}
               matchesAdditionalFilters={matchesAdditionalFilters}