CONSOLE-4838: Improvements to Console DataView code

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.
@@ -86,7 +92,7 @@ export const ConsoleDataView = <
   columns,
   columnLayout,
   columnManagementID,
-  initialFilters,
+  initialFilters = initialFiltersDefault as TFilters,
   additionalFilterNodes,
   getObjectMetadata,
   matchesAdditionalFilters,
@@ -253,5 +259,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}

frontend/packages/helm-plugin/src/components/list-page/ProjectHelmChartRepositoryList.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 ProjectHelmChartRepositoryList: React.FC<TableProps> = (props) => {
         loaded={props.loaded}
         label={t('helm-plugin~HelmChartRepositories')}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="project-helm-chart-repositories-list"

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

@@ -28,7 +28,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/RepositoriesList.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 RepositoriesList: React.FC<TableProps> = (props) => {
         loaded={props.loaded}
         label={t('helm-plugin~HelmChartRepositories')}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement
         data-test="repositories-list"

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

@@ -28,7 +28,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/public/components/RBAC/bindings.tsx

@@ -190,7 +190,7 @@ const bindingType = (binding: BindingKind) => {
   return binding.metadata.namespace ? 'namespace' : 'cluster';
 };
 
-const getDataViewRows: GetDataViewRows<BindingKind, undefined> = (data, columns) => {
+const getDataViewRows: GetDataViewRows<BindingKind> = (data, columns) => {
   return data.map(({ obj: binding }) => {
     const rowCells = {
       [tableColumnInfo[0].id]: {
@@ -266,6 +266,8 @@ export const BindingsList: React.FCC<BindingsListTableProps> = (props) => {
     return options;
   }, [hasCRBindings, t]);
 
+  const initialFilters = React.useMemo(() => ({ ...initialFiltersDefault, 'role-kind': [] }), []);
+
   const additionalFilterNodes = React.useMemo<React.ReactNode[]>(
     () => [
       <DataViewCheckboxFilter
@@ -318,7 +320,7 @@ export const BindingsList: React.FCC<BindingsListTableProps> = (props) => {
         loaded={loaded}
         label={t('public~RoleBindings')}
         columns={columns}
-        initialFilters={{ ...initialFiltersDefault, 'role-kind': [] }}
+        initialFilters={initialFilters}
         additionalFilterNodes={additionalFilterNodes}
         matchesAdditionalFilters={matchesAdditionalFilters}
         getDataViewRows={getDataViewRows}

frontend/public/components/RBAC/role.jsx

@@ -280,7 +280,6 @@ const BindingsListComponent = (props) => {
         loaded={loaded}
         label={t('public~RoleBindings')}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getBindingsDataViewRows}
         hideColumnManagement={true}
       />
@@ -446,6 +445,8 @@ const RolesList = (props) => {
   const columns = useRolesColumns();
   const roleFilterOptions = useRoleFilterOptions();
 
+  const initialFilters = React.useMemo(() => ({ ...initialFiltersDefault, 'role-kind': [] }), []);
+
   const additionalFilterNodes = React.useMemo(
     () => [
       <DataViewCheckboxFilter
@@ -480,7 +481,7 @@ const RolesList = (props) => {
           label={t('public~Roles')}
           columns={columns}
           getDataViewRows={getDataViewRows}
-          initialFilters={{ ...initialFiltersDefault, 'role-kind': [] }}
+          initialFilters={initialFilters}
           additionalFilterNodes={additionalFilterNodes}
           matchesAdditionalFilters={matchesAdditionalFilters}
           hideColumnManagement={true}

frontend/public/components/alert-manager.tsx

@@ -19,7 +19,6 @@ import { ListPage } from './factory/list-page';
 import {
   cellIsStickyProps,
   getNameCellProps,
-  initialFiltersDefault,
   ConsoleDataView,
 } from '@console/app/src/components/data-view/ConsoleDataView';
 import { GetDataViewRows } from '@console/app/src/components/data-view/types';
@@ -124,7 +123,7 @@ const tableColumnInfo = [
   { id: 'nodeSelector' },
 ];
 
-const getDataViewRows: GetDataViewRows<K8sResourceKind, undefined> = (data, columns) => {
+const getDataViewRows: GetDataViewRows<K8sResourceKind> = (data, columns) => {
   return data.map(({ obj: alertManager }) => {
     const { metadata, spec } = alertManager;
 
@@ -230,7 +229,6 @@ const AlertManagersList: React.FCC<AlertManagersListProps> = ({ data, loaded, ..
         data={data}
         loaded={loaded}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
       />

frontend/public/components/build-config.tsx

@@ -33,7 +33,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';
@@ -134,7 +133,7 @@ const tableColumnInfo = [
   { id: 'actions' },
 ];
 
-const getDataViewRows: GetDataViewRows<BuildConfig, undefined> = (data, columns) => {
+const getDataViewRows: GetDataViewRows<BuildConfig> = (data, columns) => {
   return data.map(({ obj }) => {
     const { name, namespace } = obj.metadata;
     const latestBuild = obj?.latestBuild;
@@ -328,7 +327,6 @@ export const BuildConfigsList: React.FCC<BuildConfigsListProps> = ({ data, loade
         data={buildResource}
         loaded={loaded}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
       />

frontend/public/components/build.tsx

@@ -34,7 +34,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';
@@ -358,7 +357,7 @@ const tableColumnInfo = [
   { id: 'actions' },
 ];
 
-const getDataViewRows: GetDataViewRows<K8sResourceKind, undefined> = (data, columns) => {
+const getDataViewRows: GetDataViewRows<K8sResourceKind> = (data, columns) => {
   return data.map(({ obj }) => {
     const { name, namespace } = obj.metadata;
     const kindReference = referenceFor(obj);
@@ -466,7 +465,6 @@ export const BuildsList: React.FCC<BuildsListProps> = ({ data, loaded, ...props
         data={data}
         loaded={loaded}
         columns={columns}
-        initialFilters={initialFiltersDefault}
         getDataViewRows={getDataViewRows}
         hideColumnManagement={true}
       />

frontend/public/components/cluster-settings/cluster-operator.tsx

@@ -185,6 +185,7 @@ export const ClusterOperatorList: React.FC<ClusterOperatorListProps> = ({
 }) => {
   const { t } = useTranslation();
   const columns = useClusterOperatorColumns();
+
   const clusterOperatorStatusFilterOptions = React.useMemo<DataViewFilterOption[]>(() => {
     return [
       {
@@ -213,6 +214,9 @@ export const ClusterOperatorList: React.FC<ClusterOperatorListProps> = ({
       },
     ];
   }, [t]);
+
+  const initialFilters = React.useMemo(() => ({ ...initialFiltersDefault, status: [] }), []);
+
   const additionalFilterNodes = React.useMemo<React.ReactNode[]>(
     () => [
       <DataViewCheckboxFilter
@@ -225,6 +229,7 @@ export const ClusterOperatorList: React.FC<ClusterOperatorListProps> = ({
     ],
     [t, clusterOperatorStatusFilterOptions],
   );
+
   const matchesAdditionalFilters = React.useCallback(
     (resource: ClusterOperator, filters: ClusterOperatorFilters) =>
       filters.status.length === 0 || filters.status.includes(getClusterOperatorStatus(resource)),
@@ -239,7 +244,7 @@ export const ClusterOperatorList: React.FC<ClusterOperatorListProps> = ({
         data={data}
         loaded={loaded}
         columns={columns}
-        initialFilters={{ ...initialFiltersDefault, status: [] }}
+        initialFilters={initialFilters}
         additionalFilterNodes={additionalFilterNodes}
         matchesAdditionalFilters={matchesAdditionalFilters}
         getDataViewRows={getClusterOperatorDataViewRows}