CONSOLE-5091: Upgrade to PatternFly v6.5 with native indeterminate checkbox support

Upgrade to @patternfly/react-table@6.5.0-prerelease.77 which includes native
indeterminate checkbox support via PR patternfly/patternfly-react#12411.

Replace custom DOM manipulation hook with inline useEffect that sets checkbox
indeterminate state directly. This avoids React controlled/uncontrolled input
warnings that occur when passing isIndeterminate as a prop.

Changes:
- Upgrade PatternFly packages to v6.5 prerelease with peer dependency resolutions
- Delete useIndeterminateCheckbox custom hook
- Add inline useEffect in ConsoleDataView for indeterminate state via DOM manipulation
- Fix icon-utils to handle both IconDefinition and IconData formats from PF v6.5
- Add Boolean coercion for checkbox isSelected prop to prevent controlled warnings
- Wrap getDataViewRows in useCallback for performance
- Remove @ts-expect-error comments now that NotificationBadge types variant prop
- Document known reselect dev warning from legacy connect() HOC in kinds.ts

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: rhamilto

frontend/package.json

@@ -176,7 +176,7 @@
     "@patternfly/react-icons": "~6.4.0",
     "@patternfly/react-log-viewer": "~6.3.0",
     "@patternfly/react-styles": "~6.4.0",
-    "@patternfly/react-table": "~6.4.2",
+    "@patternfly/react-table": "6.5.0-prerelease.77",
     "@patternfly/react-templates": "~6.4.2",
     "@patternfly/react-tokens": "~6.4.0",
     "@patternfly/react-topology": "~6.4.0",
@@ -335,6 +335,11 @@
     "hosted-git-info": "^3.0.8",
     "lodash-es": "^4.17.23",
     "@patternfly/react-component-groups": "6.4.0-prerelease.17",
+    "@patternfly/react-core": "6.5.0-prerelease.73",
+    "@patternfly/react-icons": "6.5.0-prerelease.34",
+    "@patternfly/react-styles": "6.5.0-prerelease.24",
+    "@patternfly/react-table": "6.5.0-prerelease.77",
+    "@patternfly/react-tokens": "6.5.0-prerelease.23",
     "postcss": "^8.2.13"
   },
   "lint-staged": {

frontend/packages/console-app/src/components/data-view/BULK_SELECTION_GUIDE.md

@@ -621,9 +621,9 @@ The `useDataViewSelection` hook automatically removes selections for items that
 
 ## Related Documentation
 
-- [INDETERMINATE_CHECKBOX.md](./INDETERMINATE_CHECKBOX.md) - Details on the indeterminate checkbox pattern
 - [ConsoleDataView](./ConsoleDataView.tsx) - Main data view component
 - [dataViewSelectionHelpers.ts](./dataViewSelectionHelpers.ts) - Selection helper functions
+- [useDataViewSelection.ts](./useDataViewSelection.ts) - Selection state management hook
 
 ## Real-World Examples
 

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

@@ -37,7 +37,6 @@ import { DataViewLabelFilter } from './DataViewLabelFilter';
 import { DataViewTextFilter } from './DataViewTextFilter';
 import { useConsoleDataViewData } from './useConsoleDataViewData';
 import { useConsoleDataViewFilters } from './useConsoleDataViewFilters';
-import { useIndeterminateCheckbox } from './useIndeterminateCheckbox';
 
 export const initialFiltersDefault: ResourceFilters = { name: '', label: '' };
 
@@ -208,11 +207,6 @@ export const ConsoleDataView = <
     return { show: shouldShow, allSelected, isIndeterminate };
   }, [selection, loaded, filteredData, visibleItems]);
 
-  // Set indeterminate state on the select-all checkbox via DOM manipulation
-  // This is a workaround until PatternFly adds native support for isSelected: null
-  // See: https://github.com/patternfly/patternfly-react/issues/12404
-  useIndeterminateCheckbox(bannerState.isIndeterminate);
-
   const handleSelectAllMatching = useCallback(() => {
     if (selection?.onSelectAll) {
       selection.onSelectAll(true, filteredData);
@@ -225,6 +219,19 @@ export const ConsoleDataView = <
     }
   }, [selection, filteredData]);
 
+  // Set indeterminate state via DOM manipulation since PatternFly's controlled prop
+  // causes React controlled/uncontrolled warnings when toggling
+  useEffect(() => {
+    if (selection && loaded && filteredData.length > 0) {
+      const checkbox = document.querySelector(
+        '[data-label=""] input[type="checkbox"]',
+      ) as HTMLInputElement;
+      if (checkbox) {
+        checkbox.indeterminate = bannerState.isIndeterminate;
+      }
+    }
+  }, [selection, loaded, filteredData.length, bannerState.isIndeterminate]);
+
   const dataViewFilterNodes = useMemo<React.ReactNode[]>(() => {
     const basicFilters: ReactNode[] = [];
 

frontend/packages/console-app/src/components/data-view/INDETERMINATE_CHECKBOX.md

@@ -73,7 +73,8 @@ export const createSelectionCell = ({
       onSelect: (_event: any, isSelecting: boolean) => {
         onSelect(itemId, isSelecting);
       },
-      isSelected,
+      // Ensure isSelected is always a boolean to prevent controlled/uncontrolled warnings
+      isSelected: Boolean(isSelected),
       isDisabled: disabled,
     },
   },

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

@@ -94,12 +94,8 @@ export const useConsoleDataViewData = <
   });
 
   const dataViewColumns = useMemo<ConsoleDataViewColumn<TData>[]>(() => {
-    // Calculate selection state across all filtered items (for indeterminate state)
-    const selectedCount = selection
-      ? filteredData.filter((item) => selection.selectedItems.has(selection.getItemId(item))).length
-      : 0;
+    // Calculate selection state across all filtered items
     const totalCount = filteredData.length;
-    const someSelected = selectedCount > 0 && selectedCount < totalCount;
 
     return activeColumns.map(({ id, title, sort, props, resizableProps }, index) => {
       // Filter out custom Console props that aren't valid PatternFly ThProps
@@ -133,11 +129,8 @@ export const useConsoleDataViewData = <
           },
           isSelected: false, // Will be updated based on visible items
           isDisabled: totalCount === 0,
-          // Pass indeterminate state through props (custom extension until PF supports it)
-          // See: https://github.com/patternfly/patternfly-react/issues/12404
-          props: {
-            isIndeterminate: someSelected,
-          },
+          // NOTE: isIndeterminate is set via DOM manipulation in ConsoleDataView to avoid
+          // React controlled/uncontrolled warnings when the prop value changes
         };
       }
 
@@ -230,14 +223,11 @@ export const useConsoleDataViewData = <
               },
               select: {
                 ...column.props.select,
-                // Checkbox is checked only when ALL visible items are selected
-                // Indeterminate state is handled via DOM manipulation in ConsoleDataView
-                isSelected: allVisibleSelected,
                 onSelect: (_event: any, isSelecting: boolean) => {
-                  // When unchecked or indeterminate, clicking selects all visible items
-                  // When checked, clicking deselects all visible items
                   selection.onSelectAll(isSelecting, visibleItems);
                 },
+                isSelected: Boolean(allVisibleSelected),
+                // NOTE: isIndeterminate is set via DOM manipulation in ConsoleDataView
               },
             },
           };
@@ -273,14 +263,11 @@ export const useConsoleDataViewData = <
               ...column.props,
               select: {
                 ...column.props.select,
-                // Checkbox is checked only when ALL visible items are selected
-                // Indeterminate state is handled via DOM manipulation in ConsoleDataView
-                isSelected: allVisibleSelected,
                 onSelect: (_event: any, isSelecting: boolean) => {
-                  // When unchecked or indeterminate, clicking selects all visible items
-                  // When checked, clicking deselects all visible items
                   selection.onSelectAll(isSelecting, visibleItems);
                 },
+                isSelected: Boolean(allVisibleSelected),
+                // NOTE: isIndeterminate is set via DOM manipulation in ConsoleDataView
               },
             },
           };

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

@@ -665,9 +665,7 @@ const NodeList: FC<NodeListProps> = ({
 }) => {
   const { t } = useTranslation();
   const { columns, resetAllColumnWidths } = useNodesColumns(vmsEnabled, nodeMgmtV1Enabled);
-  const nodeMetrics = useConsoleSelector<NodeMetrics>(({ UI }) => {
-    return UI.getIn(['metrics', 'node']);
-  });
+  const nodeMetrics = useConsoleSelector<NodeMetrics>(({ UI }) => UI.getIn(['metrics', 'node']));
   const columnManagementID = referenceForModel(NodeModel);
   const statusExtensions = useNodeStatusExtensions();
 
@@ -692,6 +690,21 @@ const NodeList: FC<NodeListProps> = ({
     onComplete: clearSelection,
   });
 
+  const getDataViewRows = useCallback(
+    (rowData: any, tableColumns: any) =>
+      getNodeDataViewRows(
+        (rowData as unknown) as RowProps<NodeRowItem, GetNodeStatusExtensions>[],
+        tableColumns,
+        nodeMetrics,
+        statusExtensions,
+        {
+          selectedItems: selectedIds,
+          onSelect: onSelectItem,
+        },
+      ),
+    [nodeMetrics, statusExtensions, selectedIds, onSelectItem],
+  );
+
   const columnLayout = useMemo(
     () => ({
       id: columnManagementID,
@@ -904,18 +917,7 @@ const NodeList: FC<NodeListProps> = ({
         initialFilters={initialFilters}
         additionalFilterNodes={additionalFilterNodes}
         matchesAdditionalFilters={matchesAdditionalFilters}
-        getDataViewRows={(rowData, tableColumns) =>
-          getNodeDataViewRows(
-            (rowData as unknown) as RowProps<NodeRowItem, GetNodeStatusExtensions>[],
-            tableColumns,
-            nodeMetrics,
-            statusExtensions,
-            {
-              selectedItems: selectedIds,
-              onSelect: onSelectItem,
-            },
-          )
-        }
+        getDataViewRows={getDataViewRows}
         hideNameLabelFilters={hideNameLabelFilters}
         hideLabelFilter={hideLabelFilter}
         hideColumnManagement={hideColumnManagement}
@@ -1035,7 +1037,7 @@ export const NodesPage: FC<NodesPageProps> = ({ selector }) => {
         filterVirtualMachineInstancesByNode(vmis, node.metadata.name),
       ]),
     );
-  }, [isKubevirtPluginActive, nodes, nodesLoadError, nodesLoaded, vmis, vmisLoadError, vmisLoaded]);
+  }, [isKubevirtPluginActive, nodes, nodesLoaded, nodesLoadError, vmis, vmisLoaded, vmisLoadError]);
 
   useEffect(() => {
     const updateMetrics = async () => {

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

@@ -1,4 +1,4 @@
-import type { IconDefinition } from '@patternfly/react-icons/dist/esm/createIcon';
+import type { IconDefinition, IconData } from '@patternfly/react-icons/dist/esm/createIcon';
 
 const ICON_OPERATOR = 'icon-operator';
 export type CSVIcon = { base64data: string; mediatype: string };
@@ -10,11 +10,22 @@ export const getDefaultOperatorIcon = () => ICON_OPERATOR;
 
 /**
  * Modified from PF createIcon, returns a string with the SVG element instead of a React component.
+ * Supports both old IconDefinition format and new IconConfig format with nested icon property.
  */
 export const getSvgFromPfIconConfig = (
-  { xOffset = 0, yOffset = 0, width, height, svgPath }: IconDefinition,
+  iconConfig: IconDefinition | { icon: IconData; [key: string]: any },
   className?: string,
 ): string => {
+  // Handle new format where icon data is nested under 'icon' property (IconData type)
+  const iconDef: IconDefinition | IconData = 'icon' in iconConfig ? iconConfig.icon : iconConfig;
+  const { xOffset = 0, yOffset = 0, width, height } = iconDef;
+  // IconDefinition uses 'svgPath', IconData uses 'svgPathData'
+  const pathData =
+    'svgPath' in iconDef && iconDef.svgPath
+      ? iconDef.svgPath
+      : 'svgPathData' in iconDef
+      ? iconDef.svgPathData
+      : '';
   const viewBox = [xOffset, yOffset, width, height].join(' ');
 
   return `
@@ -25,6 +36,6 @@ export const getSvgFromPfIconConfig = (
   width="1em"
   height="1em"
 >
-    <path d='${svgPath}' />
+    <path d='${pathData}' />
 </svg>`;
 };

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

@@ -775,8 +775,6 @@ const MastheadToolbarContents: FC<MastheadToolbarContentsProps> = ({
                 <NotificationBadge
                   aria-label={t('public~Notification drawer')}
                   onClick={drawerToggle}
-                  // @ts-expect-error this prop is accepted as a button variant (but not documented).
-                  // this usage of the undocumented variant was approved by UX
                   variant="plain"
                   count={alertCount || 0}
                   data-quickstart-id="qs-masthead-notifications"
@@ -827,8 +825,6 @@ const MastheadToolbarContents: FC<MastheadToolbarContentsProps> = ({
               <NotificationBadge
                 aria-label={t('public~Notification drawer')}
                 onClick={drawerToggle}
-                // @ts-expect-error this prop is accepted as a button variant (but not documented).
-                // this usage of the undocumented variant was approved by UX
                 variant="plain"
                 count={alertCount}
                 data-quickstart-id="qs-masthead-notifications"