CONSOLE-5091: Add bulk selection and schedulable actions to Nodes page

Implements row selection with checkboxes for the Nodes list page, allowing
users to select multiple nodes and perform bulk actions to mark them as
schedulable or unschedulable.

Changes:
- Add selection column with checkboxes for each node row
- Integrate PatternFly BulkSelect component in ConsoleDataView with i18n support
- Add bulk actions (schedulable/unschedulable) with context-aware visibility
- Implement sticky selection and name columns for better horizontal scroll UX
- Add name column offset helpers for bulk select compatibility
- Create reusable selection helpers: useDataViewSelection, dataViewSelectionHelpers
- Add configurable actionsBreakpoint prop for responsive toolbar layout
- Fix DropEvent type conflict in droppable-edit-yaml
- Remove isActionCell prop to fix React DOM warning
- Update i18n keys to use itemCount/nodeCount instead of reserved 'count' keyword

Features:
- Filter-aware selection: bulk select respects current filters
- Filter-aware bulk actions: actions only apply to filtered selected items
- Context-aware actions: only show relevant actions based on selection state
- Robust error handling with Promise.allSettled() and granular feedback
- Full internationalization support for all user-facing strings
- Backward compatible API: existing code using nameCellProps continues to work

Selection behavior:
- BulkSelect counts only show items in current filtered view
- Bulk actions operate only on filtered selected items
- Selection automatically updates when filters change to reflect visible items
- When "select all" is used with filters, only filtered items are selected

Implementation details:
- Added getItemId to selection config for proper ID tracking across filters
- Added onFilteredSelectionChange callback to notify parent of filtered selection
- BulkSelect now receives pageCount for accurate "Select page (N)" labels
- Added SELECTION_COLUMN_WIDTH constant and selectionColumnProps for selection column
- Added getNameColumnProps(hasRightBorder?, withBulkSelect?) helper for sticky name columns
- Enhanced getNameCellProps(name, withBulkSelect?) with optional parameter
- Selection column offset (SELECTION_COLUMN_WIDTH) only added when withBulkSelect is true
- Maintains full backward compatibility with existing tables (35+ files unchanged)

TODO:
- Update @patternfly/react-component-groups to published version after
  patternfly/react-component-groups#896 is merged
- Revert temporary local package testing changes in package.json and
  scripts/check-patternfly-modules.ts

Temporary changes for testing:
- Using local react-component-groups package for i18n fixes
- Disabled version check in check-patternfly-modules.ts

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

Author: rhamilto

frontend/package.json

@@ -154,7 +154,7 @@
     "@patternfly/react-catalog-view-extension": "~6.3.0",
     "@patternfly/react-charts": "~8.4.1",
     "@patternfly/react-code-editor": "~6.4.2",
-    "@patternfly/react-component-groups": "~6.4.0",
+    "@patternfly/react-component-groups": "6.4.0-prerelease.17",
     "@patternfly/react-core": "~6.4.2",
     "@patternfly/react-data-view": "~6.4.0-prerelease.12",
     "@patternfly/react-drag-drop": "~6.5.0-prerelease.38",
@@ -318,6 +318,7 @@
     "glob-parent": "^5.1.2",
     "hosted-git-info": "^3.0.8",
     "lodash-es": "^4.17.23",
+    "@patternfly/react-component-groups": "6.4.0-prerelease.17",
     "postcss": "^8.2.13"
   },
   "lint-staged": {

frontend/packages/console-app/locales/en/console-app.json

@@ -465,6 +465,10 @@
   "Certificate approval required": "Certificate approval required",
   "An error occurred. Please try again": "An error occurred. Please try again",
   "No new Pods or workloads will be placed on this Node until it's marked as schedulable.": "No new Pods or workloads will be placed on this Node until it's marked as schedulable.",
+  "Failed to mark {{failureCount}} of {{totalCount}} nodes as schedulable": "Failed to mark {{failureCount}} of {{totalCount}} nodes as schedulable",
+  "Failed to mark {{failureCount}} of {{totalCount}} nodes as unschedulable": "Failed to mark {{failureCount}} of {{totalCount}} nodes as unschedulable",
+  "Mark as schedulable ({{nodeCount}})": "Mark as schedulable ({{nodeCount}})",
+  "Mark as unschedulable ({{nodeCount}})": "Mark as unschedulable ({{nodeCount}})",
   "Identity providers": "Identity providers",
   "Mapping method": "Mapping method",
   "Remove identity provider": "Remove identity provider",

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

@@ -1,7 +1,9 @@
 import type { FC, ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
 import './ConsoleDataView.scss';
 import {
+  BulkSelect,
+  BulkSelectValue,
   ResponsiveAction,
   ResponsiveActions,
   SkeletonTableBody,
@@ -80,6 +82,10 @@ export const ConsoleDataView = <
   mock,
   isResizable,
   resetAllColumnWidths,
+  bulkSelect,
+  bulkActions,
+  selection,
+  actionsBreakpoint = 'lg',
 }: ConsoleDataViewProps<TData, TCustomRowData, TFilters>) => {
   const { t } = useTranslation();
   const launchModal = useOverlay();
@@ -100,6 +106,22 @@ export const ConsoleDataView = <
     matchesAdditionalFilters,
   });
 
+  // Notify parent of filtered selected items when filters or selection changes
+  useEffect(() => {
+    if (selection?.onFilteredSelectionChange) {
+      const filteredSelectedItems = filteredData.filter((item) =>
+        selection.selectedItems.has(selection.getItemId(item)),
+      );
+      selection.onFilteredSelectionChange(filteredSelectedItems);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    filteredData,
+    selection?.selectedItems,
+    selection?.getItemId,
+    selection?.onFilteredSelectionChange,
+  ]);
+
   const { dataViewColumns, dataViewRows, pagination } = useConsoleDataViewData<
     TData,
     TCustomRowData,
@@ -134,6 +156,43 @@ export const ConsoleDataView = <
     return undefined;
   }, [filteredData.length, loaded]);
 
+  // Create bulkSelect component if selection is provided but bulkSelect prop is not
+  let defaultBulkSelect = null;
+  if (selection?.onSelectAll && !bulkSelect) {
+    const totalCount = filteredData.length;
+    const pageCount = dataViewRows.length;
+    // Count only selected items that are in the current filtered dataset
+    const selectedCount = filteredData.filter((item) =>
+      selection.selectedItems.has(selection.getItemId(item)),
+    ).length;
+
+    const handleBulkSelect = (value: BulkSelectValue) => {
+      if (value === BulkSelectValue.all || value === BulkSelectValue.page) {
+        selection.onSelectAll(true, filteredData);
+      } else if (value === BulkSelectValue.none || value === BulkSelectValue.nonePage) {
+        selection.onSelectAll(false, filteredData);
+      }
+    };
+
+    defaultBulkSelect = (
+      <BulkSelect
+        pageCount={pageCount}
+        selectedCount={selectedCount}
+        totalCount={totalCount}
+        onSelect={handleBulkSelect}
+        canSelectAll
+        selectNoneLabel={t('public~Select none (0)')}
+        selectPageLabel={(itemCount) =>
+          `${t('public~Select page')}${itemCount ? ` (${itemCount})` : ''}`
+        }
+        selectAllLabel={(itemCount) =>
+          `${t('public~Select all')}${itemCount ? ` (${itemCount})` : ''}`
+        }
+        selectedLabel={(itemCount) => t('public~{{itemCount}} selected', { itemCount })}
+      />
+    );
+  }
+
   const dataViewFilterNodes = useMemo<React.ReactNode[]>(() => {
     const basicFilters: ReactNode[] = [];
 
@@ -177,6 +236,7 @@ export const ConsoleDataView = <
         className={css(dataViewFilterNodes.length === 1 && 'co-console-data-view-single-filter')}
       >
         <DataViewToolbar
+          bulkSelect={bulkSelect ?? defaultBulkSelect}
           filters={
             dataViewFilterNodes.length > 0 && (
               <DataViewFilters values={filters} onChange={(_e, values) => onSetFilters(values)}>
@@ -186,7 +246,8 @@ export const ConsoleDataView = <
           }
           clearAllFilters={clearAllFilters}
           actions={
-            <ResponsiveActions breakpoint="lg">
+            <ResponsiveActions breakpoint={actionsBreakpoint}>
+              {bulkActions}
               {!hideColumnManagement && (
                 <ResponsiveAction
                   isPersistent
@@ -251,22 +312,45 @@ export const ConsoleDataView = <
   );
 };
 
+export const SELECTION_COLUMN_WIDTH = '45px';
+
 export const cellIsStickyProps = {
   isStickyColumn: true,
   stickyMinWidth: '0',
 };
 
+export const selectionColumnProps = {
+  ...cellIsStickyProps,
+  stickyLeftOffset: '0',
+};
+
 export const nameCellProps = {
   ...cellIsStickyProps,
   hasRightBorder: true,
 };
 
-export const getNameCellProps = (name: string) => {
-  return {
-    ...nameCellProps,
-    'data-test': `data-view-cell-${name}-name`,
-  };
-};
+/**
+ * Returns name column props with appropriate offset based on whether bulk select is enabled.
+ * Use this for column definitions.
+ * @param hasRightBorder - Whether to include hasRightBorder (default: true)
+ * @param withBulkSelect - Whether the table has bulk selection enabled (default: false)
+ */
+export const getNameColumnProps = (hasRightBorder = true, withBulkSelect = false) => ({
+  ...cellIsStickyProps,
+  ...(hasRightBorder && { hasRightBorder: true }),
+  ...(withBulkSelect && { stickyLeftOffset: SELECTION_COLUMN_WIDTH }),
+});
+
+/**
+ * Returns name cell props with appropriate offset based on whether bulk select is enabled.
+ * Use this for row cell definitions.
+ * @param name - The name to use in the data-test attribute
+ * @param withBulkSelect - Whether the table has bulk selection enabled (default: false)
+ */
+export const getNameCellProps = (name: string, withBulkSelect = false) => ({
+  ...getNameColumnProps(true, withBulkSelect),
+  'data-test': `data-view-cell-${name}-name`,
+});
 
 export const actionsCellProps = {
   ...cellIsStickyProps,

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

@@ -0,0 +1,78 @@
+import type { TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+
+const selectionColumnProps = {
+  isStickyColumn: true,
+  stickyMinWidth: '0',
+  stickyLeftOffset: '0',
+} as const;
+
+/**
+ * Creates a selection column definition for DataView tables.
+ * This column displays checkboxes for row selection.
+ *
+ * @example
+ * ```typescript
+ * const columns = [
+ *   createSelectionColumn(),
+ *   { title: 'Name', id: 'name', ... },
+ *   ...
+ * ];
+ * ```
+ */
+export const createSelectionColumn = <T>(): TableColumn<T> => ({
+  title: '',
+  id: 'select',
+  props: selectionColumnProps,
+});
+
+type CreateSelectionCellOptions = {
+  /** Row index in the table */
+  rowIndex: number;
+  /** Unique ID for the item being selected */
+  itemId: string;
+  /** Whether the item is currently selected */
+  isSelected: boolean;
+  /** Callback when selection state changes */
+  onSelect: (itemId: string, isSelecting: boolean) => void;
+  /** Whether the checkbox should be disabled */
+  disabled?: boolean;
+};
+
+/**
+ * Creates a selection cell object for a DataView row.
+ * This cell contains the checkbox for row selection.
+ *
+ * @example
+ * ```typescript
+ * const rowCells = {
+ *   select: createSelectionCell({
+ *     rowIndex: 0,
+ *     itemId: getUID(node),
+ *     isSelected: selectedIds.has(getUID(node)),
+ *     onSelect: onSelectItem,
+ *   }),
+ *   name: { cell: <NodeName node={node} /> },
+ *   ...
+ * };
+ * ```
+ */
+export const createSelectionCell = ({
+  rowIndex,
+  itemId,
+  isSelected,
+  onSelect,
+  disabled = false,
+}: CreateSelectionCellOptions) => ({
+  cell: '', // Checkbox is rendered via props, no content needed
+  props: {
+    ...selectionColumnProps,
+    select: {
+      rowIndex,
+      onSelect: (_event: any, isSelecting: boolean) => {
+        onSelect(itemId, isSelecting);
+      },
+      isSelected,
+      isDisabled: disabled,
+    },
+  },
+});

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

@@ -0,0 +1,106 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+
+type UseDataViewSelectionOptions<T> = {
+  /** All data items */
+  data: T[];
+  /** Function to extract unique ID from an item */
+  getItemId: (item: T) => string;
+  /** Optional filter to exclude certain items from selection (e.g., filter out CSRs) */
+  filterSelectable?: (item: T) => boolean;
+};
+
+type UseDataViewSelectionResult<T> = {
+  /** Set of selected item IDs */
+  selectedIds: Set<string>;
+  /** Array of selected item objects */
+  selectedItems: T[];
+  /** Callback to select/deselect a single item */
+  onSelectItem: (itemId: string, isSelecting: boolean) => void;
+  /** Callback to select/deselect all filtered items */
+  onSelectAll: (isSelecting: boolean, filteredItems: T[]) => void;
+  /** Clear all selections */
+  clearSelection: () => void;
+};
+
+/**
+ * Custom hook for managing selection state in DataView components.
+ * Provides selection state, callbacks, and selected item objects.
+ *
+ * @example
+ * ```typescript
+ * const { selectedIds, selectedItems, onSelectItem, onSelectAll, clearSelection } =
+ *   useDataViewSelection({
+ *     data,
+ *     getItemId: (node) => getUID(node),
+ *     filterSelectable: (item) => !isCSRResource(item),
+ *   });
+ * ```
+ */
+export const useDataViewSelection = <T>({
+  data,
+  getItemId,
+  filterSelectable,
+}: UseDataViewSelectionOptions<T>): UseDataViewSelectionResult<T> => {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  // Update selection to only include items that still exist in the current data
+  useEffect(() => {
+    const selectableData = filterSelectable ? data.filter(filterSelectable) : data;
+    const currentValidIds = new Set(selectableData.map(getItemId));
+
+    setSelectedIds((prev) => {
+      const filtered = new Set<string>();
+      prev.forEach((id) => {
+        if (currentValidIds.has(id)) {
+          filtered.add(id);
+        }
+      });
+      // Only update if the selection actually changed
+      return filtered.size === prev.size ? prev : filtered;
+    });
+  }, [data, getItemId, filterSelectable]);
+
+  const onSelectItem = useCallback((itemId: string, isSelecting: boolean) => {
+    setSelectedIds((prev) => {
+      const newSet = new Set(prev);
+      if (isSelecting) {
+        newSet.add(itemId);
+      } else {
+        newSet.delete(itemId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const onSelectAll = useCallback(
+    (isSelecting: boolean, filteredItems: T[]) => {
+      if (isSelecting) {
+        const selectableItems = filterSelectable
+          ? filteredItems.filter(filterSelectable)
+          : filteredItems;
+        const itemIds = selectableItems.map(getItemId);
+        setSelectedIds(new Set(itemIds));
+      } else {
+        setSelectedIds(new Set());
+      }
+    },
+    [getItemId, filterSelectable],
+  );
+
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+  }, []);
+
+  const selectedItems = useMemo(() => {
+    const selectableData = filterSelectable ? data.filter(filterSelectable) : data;
+    return selectableData.filter((item) => selectedIds.has(getItemId(item)));
+  }, [data, selectedIds, getItemId, filterSelectable]);
+
+  return {
+    selectedIds,
+    selectedItems,
+    onSelectItem,
+    onSelectAll,
+    clearSelection,
+  };
+};