CONSOLE-4988: add resizable column feature to Pods list (openshift#16128)

vikram-raj · web-flow · commit dd183f5d536c · 2026-03-14T17:43:38.000Z
* Upgrade @patternfly/react-data-view to 6.4.0-prerelease.12

* add resizable column feature to Pods list

* extract onResize type and remove unused const

* Add leftBorder and rightBorder to sticky Th

* Add reset columns width button in the table toolbar

* Add reset columns width button in the table toolbar
diff --git a/frontend/package.json b/frontend/package.json
@@ -159,7 +159,7 @@
     "@patternfly/react-code-editor": "~6.4.0",
     "@patternfly/react-component-groups": "~6.4.0",
     "@patternfly/react-core": "~6.4.0",
-    "@patternfly/react-data-view": "~6.3.0",
+    "@patternfly/react-data-view": "6.4.0-prerelease.12",
     "@patternfly/react-drag-drop": "~6.4.0",
     "@patternfly/react-icons": "~6.4.0",
     "@patternfly/react-log-viewer": "~6.3.0",
diff --git a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   ResponsiveAction,
   ResponsiveActions,
@@ -14,7 +14,7 @@ import {
   DataViewToolbar,
 } from '@patternfly/react-data-view';
 import DataViewFilters from '@patternfly/react-data-view/dist/cjs/DataViewFilters';
-import { ColumnsIcon } from '@patternfly/react-icons';
+import { ColumnsIcon, UndoIcon } from '@patternfly/react-icons';
 import { InnerScrollContainer, Tbody, Td, Tr } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 import type {
@@ -76,9 +76,17 @@ export const ConsoleDataView = <
   hideLabelFilter,
   hideColumnManagement,
   mock,
+  isResizable,
+  resetAllColumnWidths,
 }: ConsoleDataViewProps<TData, TCustomRowData, TFilters>) => {
   const { t } = useTranslation();
   const launchModal = useOverlay();
+  const [tableKey, setTableKey] = useState(0);
+
+  const handleResetColumnWidths = useCallback(() => {
+    resetAllColumnWidths?.();
+    setTableKey((k) => k + 1);
+  }, [resetAllColumnWidths]);
 
   const { filters, onSetFilters, clearAllFilters, filteredData } = useConsoleDataViewFilters<
     TData,
@@ -102,6 +110,7 @@ export const ConsoleDataView = <
     showNamespaceOverride,
     columnManagementID,
     customRowData,
+    isResizable,
   });
 
   const bodyLoading = useMemo(() => <BodyLoading columns={dataViewColumns.length} />, [
@@ -172,8 +181,8 @@ export const ConsoleDataView = <
           }
           clearAllFilters={clearAllFilters}
           actions={
-            !hideColumnManagement && (
-              <ResponsiveActions breakpoint="lg">
+            <ResponsiveActions breakpoint="lg">
+              {!hideColumnManagement && (
                 <ResponsiveAction
                   isPersistent
                   variant="plain"
@@ -190,8 +199,21 @@ export const ConsoleDataView = <
                     <ColumnsIcon />
                   </Tooltip>
                 </ResponsiveAction>
-              </ResponsiveActions>
-            )
+              )}
+              {isResizable && resetAllColumnWidths && (
+                <ResponsiveAction
+                  isPersistent
+                  variant="plain"
+                  onClick={handleResetColumnWidths}
+                  aria-label={t('public~Reset column widths')}
+                  data-test="reset-column-widths"
+                >
+                  <Tooltip content={t('public~Reset column widths')} trigger="mouseenter">
+                    <UndoIcon />
+                  </Tooltip>
+                </ResponsiveAction>
+              )}
+            </ResponsiveActions>
           }
           pagination={
             <Pagination
@@ -203,6 +225,7 @@ export const ConsoleDataView = <
         />
         <InnerScrollContainer>
           <DataViewTable
+            key={tableKey}
             aria-label={t(`public~{{label}} table`, { label })}
             // @ts-expect-error - TODO(react18): CONSOLE-5040: Remove ConsoleDataViewColumn bodge
             columns={dataViewColumns}
@@ -211,6 +234,7 @@ export const ConsoleDataView = <
             gridBreakPoint=""
             variant="compact"
             data-test="data-view-table"
+            isResizable={isResizable}
           />
         </InnerScrollContainer>
       </DataView>
@@ -223,7 +247,7 @@ export const cellIsStickyProps = {
   stickyMinWidth: '0',
 };
 
-const nameCellProps = {
+export const nameCellProps = {
   ...cellIsStickyProps,
   hasRightBorder: true,
 };
diff --git a/frontend/packages/console-app/src/components/data-view/useConsoleDataViewData.tsx b/frontend/packages/console-app/src/components/data-view/useConsoleDataViewData.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { useRef, useEffect, useMemo } from 'react';
-import type { DataViewTh } from '@patternfly/react-data-view';
 import { useDataViewPagination } from '@patternfly/react-data-view';
+import type { DataViewTh } from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable';
 import type { ThProps } from '@patternfly/react-table';
 import { SortByDirection } from '@patternfly/react-table';
 import * as _ from 'lodash';
@@ -35,6 +35,7 @@ export const useConsoleDataViewData = <
   showNamespaceOverride,
   columnManagementID,
   customRowData,
+  isResizable = true,
 }: {
   columns: TableColumn<TData>[];
   filteredData: TData[];
@@ -43,6 +44,7 @@ export const useConsoleDataViewData = <
   showNamespaceOverride?: boolean;
   columnManagementID?: string;
   customRowData?: TCustomRowData;
+  isResizable?: boolean;
 }) => {
   const { t } = useTranslation();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -79,7 +81,7 @@ export const useConsoleDataViewData = <
 
   const dataViewColumns = useMemo<ConsoleDataViewColumn<TData>[]>(
     () =>
-      activeColumns.map(({ id, title, sort, props }, index) => {
+      activeColumns.map(({ id, title, sort, props, resizableProps }, index) => {
         const headerProps: ThProps = {
           ...props,
           dataLabel: title,
@@ -101,14 +103,15 @@ export const useConsoleDataViewData = <
           title,
           sortFunction: sort,
           props: headerProps,
+          resizableProps: isResizable ? resizableProps : undefined,
           cell: title ? (
             <span>{title}</span>
           ) : (
             <span className="pf-v6-u-screen-reader">{t('public~Actions')}</span>
           ),
         };
       }),
-    [activeColumns, t],
+    [activeColumns, t, isResizable],
   );
 
   const { sortBy, onSort } = useConsoleDataViewSort<TData>({
diff --git a/frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts b/frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts
@@ -0,0 +1,124 @@
+import type { MouseEvent } from 'react';
+import { useCallback, useMemo } from 'react';
+import type { K8sModel } from '@console/dynamic-plugin-sdk';
+import { referenceForModel } from '@console/internal/module/k8s';
+import { COLUMN_WIDTH_CONFIGMAP_KEY } from '@console/shared/src/constants/common';
+import { useUserPreference } from '@console/shared/src/hooks/useUserPreference';
+
+/**
+ * Stored column widths keyed by table then column for easy reading in the configMap.
+ * Example: { "core~v1~Pod": { "name": 200, "namespace": 150 } }
+ */
+export type ColumnWidthUserSettings = Record<string, Record<string, number>>;
+
+/** Callback when a table column is resized: event, column id, and new width in pixels. */
+type ColumnResizeOnResize = (
+  event: MouseEvent<HTMLDivElement>,
+  id: string | number | undefined,
+  width: number,
+) => void;
+
+/**
+ * Table-level hook: one source of truth per table so that each column resize merges into
+ * the same state and creates/updates an entry for that column without replacing others.
+ * Use this when a table has many columns so that all column widths are stored under one
+ * configMap key and each resize adds/updates only that column's entry.
+ *
+ * @param model - K8s model (e.g. PodModel) for the resource table
+ * @returns getResizableProps(columnId), getWidth(columnId), and resetAllColumnWidths()
+ */
+export const useColumnWidthSettings = (
+  model: K8sModel,
+): {
+  getResizableProps: (
+    columnId: string,
+  ) => {
+    isResizable: true;
+    width?: number;
+    onResize: ColumnResizeOnResize;
+    resizeButtonAriaLabel: string;
+  };
+  getWidth: (columnId: string) => number | undefined;
+  /** Reset saved widths for all columns in this table. */
+  resetAllColumnWidths: () => void;
+} => {
+  const resolvedTableId = useMemo(() => referenceForModel(model), [model]);
+
+  const [columnWidths, setColumnWidths] = useUserPreference<ColumnWidthUserSettings>(
+    COLUMN_WIDTH_CONFIGMAP_KEY,
+    {},
+  );
+
+  const setColumnWidth = useCallback(
+    (columnId: string, newWidth: number) => {
+      setColumnWidths((prev) => {
+        const existing = prev ?? {};
+        const tableColumns = existing[resolvedTableId] ?? {};
+        return {
+          ...existing,
+          [resolvedTableId]: {
+            ...tableColumns,
+            [columnId]: newWidth,
+          },
+        };
+      });
+    },
+    [resolvedTableId, setColumnWidths],
+  );
+
+  const resetAllColumnWidths = useCallback(() => {
+    setColumnWidths((prev) => {
+      const existing = prev ?? {};
+      const { [resolvedTableId]: _removed, ...rest } = existing;
+      return rest;
+    });
+  }, [resolvedTableId, setColumnWidths]);
+
+  const getWidth = useCallback((columnId: string) => columnWidths?.[resolvedTableId]?.[columnId], [
+    columnWidths,
+    resolvedTableId,
+  ]);
+
+  const getResizableProps = useCallback(
+    (columnId: string) => {
+      const onResize: ColumnResizeOnResize = (_event, _id, newWidth) =>
+        setColumnWidth(columnId, newWidth);
+      return {
+        isResizable: true as const,
+        width: columnWidths?.[resolvedTableId]?.[columnId],
+        onResize,
+        resizeButtonAriaLabel: `Resize ${columnId} column`,
+      };
+    },
+    [columnWidths, resolvedTableId, setColumnWidth],
+  );
+
+  return { getResizableProps, getWidth, resetAllColumnWidths };
+};
+
+/**
+ * Per-column hook for resizable props. Prefer {@link useColumnWidthSettings} for tables
+ * with many columns so that one configMap entry holds all column widths and each resize
+ * creates/updates only that column's entry.
+ */
+export const useResizableColumnProps = (
+  model: K8sModel,
+  columnId: string,
+): {
+  isResizable: true;
+  width?: number;
+  onResize: ColumnResizeOnResize;
+  resizeButtonAriaLabel: string;
+  resetAllColumnWidths: () => void;
+} => {
+  const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(model);
+  const resizableProps = getResizableProps(columnId);
+  return useMemo(
+    () => ({
+      ...resizableProps,
+      width: getWidth(columnId),
+      resetAllColumnWidths,
+    }),
+    [resizableProps, getWidth, columnId, resetAllColumnWidths],
+  );
+};
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/api/internal-types.ts b/frontend/packages/console-dynamic-plugin-sdk/src/api/internal-types.ts
@@ -1,6 +1,6 @@
 import type { ReactNode, ComponentType, SetStateAction, Dispatch } from 'react';
 import type { QuickStart } from '@patternfly/quickstarts';
-import type { DataViewTh } from '@patternfly/react-data-view';
+import type { DataViewTh } from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable';
 import type { SortByDirection, ThProps } from '@patternfly/react-table';
 import type { Map as ImmutableMap } from 'immutable';
 import type {
@@ -322,6 +322,7 @@ export type ConsoleDataViewColumn<TData> = ConsoleDataViewTh & {
   id: string;
   title: string;
   sortFunction?: string | ((filteredData: TData[], sortDirection: SortByDirection) => TData[]);
+  resizableProps?: any;
 };
 
 export type ConsoleDataViewRow = any[];
@@ -354,6 +355,9 @@ export type ConsoleDataViewProps<
   hideLabelFilter?: boolean;
   hideColumnManagement?: boolean;
   mock?: boolean;
+  isResizable?: boolean;
+  /** When provided and isResizable is true, a toolbar action is shown to reset all column widths. */
+  resetAllColumnWidths?: () => void;
 };
 
 // ConsoleDataView helper types
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts
@@ -311,6 +311,7 @@ export type TableColumn<D> = ICell & {
   id: string;
   additional?: boolean;
   sort?: ((data: D[], sortDirection: SortByDirection) => D[]) | string;
+  resizableProps?: any;
 };
 
 export type RowProps<D, R extends any = {}> = {
diff --git a/frontend/packages/console-shared/src/constants/common.ts b/frontend/packages/console-shared/src/constants/common.ts
@@ -104,6 +104,7 @@ export enum FLAGS {
 
 export const CONFIG_STORAGE_CONSOLE = 'console';
 export const COLUMN_MANAGEMENT_CONFIGMAP_KEY = `${CONFIG_STORAGE_CONSOLE}.tableColumns`;
+export const COLUMN_WIDTH_CONFIGMAP_KEY = `${CONFIG_STORAGE_CONSOLE}.tableColumnsWidth`;
 export const ACM_LINK_ID = 'acm-console-link';
 
 export const SYSTEM_NAMESPACES_PREFIX = ['kube-', 'openshift-', 'kubernetes-'];
diff --git a/frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTable.tsx b/frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTable.tsx
@@ -1,13 +1,16 @@
 import type { MouseEvent, FC } from 'react';
 import { useMemo, useCallback, Suspense } from 'react';
 import { Pagination } from '@patternfly/react-core';
-import type { DataViewTd, DataViewTh } from '@patternfly/react-data-view';
 import {
   DataView,
   DataViewTable,
   DataViewToolbar,
   useDataViewPagination,
 } from '@patternfly/react-data-view';
+import type {
+  DataViewTd,
+  DataViewTh,
+} from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable';
 import { InnerScrollContainer, SortByDirection } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom-v5-compat';
diff --git a/frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTableHelpers.tsx b/frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTableHelpers.tsx
@@ -1,6 +1,9 @@
 import type { FC, MouseEvent } from 'react';
 import { useMemo } from 'react';
-import type { DataViewTd, DataViewTh } from '@patternfly/react-data-view';
+import type {
+  DataViewTd,
+  DataViewTh,
+} from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable';
 import type { SortByDirection, ThProps } from '@patternfly/react-table';
 import { Trans, useTranslation } from 'react-i18next';
 import { coFetchJSON } from '@console/internal/co-fetch';
diff --git a/frontend/packages/helm-plugin/src/components/forms/rollback/RevisionListHeader.tsx b/frontend/packages/helm-plugin/src/components/forms/rollback/RevisionListHeader.tsx
@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
-import type { DataViewTh } from '@patternfly/react-data-view';
+import type { DataViewTh } from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable';
 import type { ThProps, SortByDirection } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 
diff --git a/frontend/public/components/pod-list.tsx b/frontend/public/components/pod-list.tsx
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
