CONSOLE-4988: add resizable column feature to workload table#16144
CONSOLE-4988: add resizable column feature to workload table#16144vikram-raj wants to merge 1 commit intoopenshift:mainfrom
Conversation
openshift-ci-robot
added
the
jira/valid-reference
|
@vikram-raj: This pull request references CONSOLE-4988 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the spike to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: vikram-raj The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci
bot
added
component/core
|
@vikram-raj: This pull request references CONSOLE-4988 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the spike to target the "4.22.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
📝 WalkthroughWalkthroughThis pull request introduces column width resizing functionality to the OpenShift Console data views and tables. Changes include updating the PatternFly React Data View dependency to a prerelease version, introducing new hooks ( 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment Tip CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.Add a configuration file to your project to customize how CodeRabbit runs |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/public/components/workload-table.tsx (1)
167-225:⚠️ Potential issue | 🟡 MinorUse the translated header text for resize handle labels.
frontend/packages/console-app/src/components/data-view/useResizableColumnProps.tscurrently buildsresizeButtonAriaLabelfromcolumnId, so these new calls will announce internal English keys likeselectorandlabelsinstead of the visible column titles. That is an accessibility/i18n regression across every workload list using this helper. Please keepcolumnIdas the persistence key only and derive the aria label from the translated header text.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/public/components/workload-table.tsx` around lines 167 - 225, The resize handle ARIA label currently uses the raw columnId (persisted key) which exposes internal English keys; update the code that calls getResizableProps in the columns definition to pass the translated header string (the visible title) into useResizableColumnProps so resizeButtonAriaLabel is built from the localized title instead of columnId—specifically, keep tableColumnInfo[...] .id as the persistence key but change the getResizableProps invocation sites in the columns array (for Name, Namespace, Status, Labels, Pod selector) to provide the translated title (the t(...) value) to the hook or an explicit label argument so useResizableColumnProps (and its resizeButtonAriaLabel) can use that translated text for the aria label.
🧹 Nitpick comments (3)
frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts (1)
116-122: Minor redundancy:widthis retrieved twice.
getResizableProps(columnId)already returnswidthon line 88, but thengetWidth(columnId)is called again on line 119. Consider simplifying:♻️ Simplify by reusing the width from resizableProps
export const useResizableColumnProps = ( model: K8sModel, columnId: string, ): { isResizable: true; width?: number; onResize: ColumnResizeOnResize; resizeButtonAriaLabel: string; resetAllColumnWidths: () => void; } => { - const { getResizableProps, getWidth, resetAllColumnWidths } = useColumnWidthSettings(model); + const { getResizableProps, resetAllColumnWidths } = useColumnWidthSettings(model); const resizableProps = getResizableProps(columnId); return useMemo( () => ({ ...resizableProps, - width: getWidth(columnId), resetAllColumnWidths, }), - [resizableProps, getWidth, columnId, resetAllColumnWidths], + [resizableProps, resetAllColumnWidths], ); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts` around lines 116 - 122, The returned memo redundantly calls getWidth(columnId) even though getResizableProps(columnId) already provides width in resizableProps; update useResizableColumnProps to reuse resizableProps.width (remove the getWidth(columnId) call) and remove getWidth from the dependency array, keeping columnId, resizableProps, and resetAllColumnWidths as dependencies so the memo stays correct.frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts (1)
314-314: Consider stronger typing forresizablePropswhen PatternFly API stabilizes.Using
anyhere is pragmatic given the prerelease dependency (@patternfly/react-data-view@6.4.0-prerelease.12), butTableColumn<D>is a public SDK type consumed by plugins. Once PatternFly releases a stable API, consider defining a proper type or importing from PatternFly directly to improve type safety for plugin developers.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts` at line 314, The field resizableProps on the TableColumn<D> type is currently typed as any; replace it with a stronger, safer type and add a clear TODO to switch to the PatternFly type when their API stabilizes — e.g., define a local alias ResizableProps (or use unknown) and set resizableProps?: ResizableProps, and when the stable `@patternfly/react-data-view` export exists, import the concrete type and update the alias to that export; also add a short comment referencing PatternFly so future maintainers know to swap it.frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTableHelpers.tsx (1)
3-6: Use public@patternfly/react-data-viewexports instead ofdist/esmdeep imports.The current path couples this file to internal package layout. Prefer the package-root type export to reduce fragility on future upgrades.
Proposed import change
import type { DataViewTd, DataViewTh, -} from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable'; +} from '@patternfly/react-data-view';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTableHelpers.tsx` around lines 3 - 6, Replace the deep import of DataViewTd and DataViewTh from '@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable' with the package-root exports: import the types from '@patternfly/react-data-view' (referencing the DataViewTd and DataViewTh symbols used in HelmReleaseHistoryTableHelpers.tsx) so the file uses public PatternFly exports rather than internal/dist paths; update any type references accordingly and run a type check to ensure the package-root export names match.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/package.json`:
- Line 161: Update the dependency entry for "@patternfly/react-data-view" from
the prerelease version to the stable semver line "~6.4.0" so it matches the
other PatternFly packages; modify the "@patternfly/react-data-view" entry in
package.json accordingly and then reinstall (npm/yarn/pnpm) to refresh the
lockfile so the resolved dependency graph is consistent with the stable release.
In
`@frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts`:
- Line 90: The aria-label string for the resize button is hardcoded in
useResizableColumnProps (resizeButtonAriaLabel using columnId); change the hook
API to accept a translated label or the i18n translator so the label is produced
via i18n (e.g. call t('public~Resize {{columnName}} column', { columnName }))
instead of hardcoding English; update callers of useResizableColumnProps to pass
a pre-translated label or the t function and replace the resizeButtonAriaLabel
assignment to use that translated value.
In `@frontend/public/components/pod-list.tsx`:
- Around line 173-176: The column currently reuses the same columnId for both
Owner and Node which causes useColumnWidthSettings to persist a single width;
change the persisted key so Node and Owner are distinct by incorporating
showNodes into the id (or pass a scoped key to getResizableProps). Update the
column definition that uses title/id/resizableProps (referencing showNodes,
tableColumnInfo[5].id, and getResizableProps) to derive a unique id like
`${tableColumnInfo[5].id}-${showNodes ? 'node' : 'owner'}` or call
getResizableProps with a second scopedKey param so widths for Owner and Node are
saved separately.
---
Outside diff comments:
In `@frontend/public/components/workload-table.tsx`:
- Around line 167-225: The resize handle ARIA label currently uses the raw
columnId (persisted key) which exposes internal English keys; update the code
that calls getResizableProps in the columns definition to pass the translated
header string (the visible title) into useResizableColumnProps so
resizeButtonAriaLabel is built from the localized title instead of
columnId—specifically, keep tableColumnInfo[...] .id as the persistence key but
change the getResizableProps invocation sites in the columns array (for Name,
Namespace, Status, Labels, Pod selector) to provide the translated title (the
t(...) value) to the hook or an explicit label argument so
useResizableColumnProps (and its resizeButtonAriaLabel) can use that translated
text for the aria label.
---
Nitpick comments:
In
`@frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts`:
- Around line 116-122: The returned memo redundantly calls getWidth(columnId)
even though getResizableProps(columnId) already provides width in
resizableProps; update useResizableColumnProps to reuse resizableProps.width
(remove the getWidth(columnId) call) and remove getWidth from the dependency
array, keeping columnId, resizableProps, and resetAllColumnWidths as
dependencies so the memo stays correct.
In
`@frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts`:
- Line 314: The field resizableProps on the TableColumn<D> type is currently
typed as any; replace it with a stronger, safer type and add a clear TODO to
switch to the PatternFly type when their API stabilizes — e.g., define a local
alias ResizableProps (or use unknown) and set resizableProps?: ResizableProps,
and when the stable `@patternfly/react-data-view` export exists, import the
concrete type and update the alias to that export; also add a short comment
referencing PatternFly so future maintainers know to swap it.
In
`@frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTableHelpers.tsx`:
- Around line 3-6: Replace the deep import of DataViewTd and DataViewTh from
'@patternfly/react-data-view/dist/esm/DataViewTable/DataViewTable' with the
package-root exports: import the types from '@patternfly/react-data-view'
(referencing the DataViewTd and DataViewTh symbols used in
HelmReleaseHistoryTableHelpers.tsx) so the file uses public PatternFly exports
rather than internal/dist paths; update any type references accordingly and run
a type check to ensure the package-root export names match.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 78d265fb-b872-4ff3-985d-d3f9b9f6d6a9
⛔ Files ignored due to path filters (1)
frontend/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (17)
frontend/package.jsonfrontend/packages/console-app/src/components/data-view/ConsoleDataView.tsxfrontend/packages/console-app/src/components/data-view/useConsoleDataViewData.tsxfrontend/packages/console-app/src/components/data-view/useResizableColumnProps.tsfrontend/packages/console-dynamic-plugin-sdk/src/api/internal-types.tsfrontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.tsfrontend/packages/console-shared/src/constants/common.tsfrontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTable.tsxfrontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistoryTableHelpers.tsxfrontend/packages/helm-plugin/src/components/forms/rollback/RevisionListHeader.tsxfrontend/public/components/daemon-set.tsxfrontend/public/components/deployment-config.tsxfrontend/public/components/deployment.tsxfrontend/public/components/pod-list.tsxfrontend/public/components/stateful-set.tsxfrontend/public/components/workload-table.tsxfrontend/public/locales/en/public.json
| "@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", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For @patternfly/react-data-view, which APIs used for column resizing are available in 6.4.0-prerelease.12 but not in stable 6.4.x?
💡 Result:
I couldn’t find any column-resizing APIs in @patternfly/react-data-view that exist in 6.4.0-prerelease.12 but are missing from stable 6.4.x—the stable 6.4.0 build already exports the resizing surface via DataViewTh’s resizableProps (DataViewThResizableProps), including isResizable, onResize, width, minWidth, increment, shiftIncrement, resizeButtonAriaLabel, and screenReaderText. [1]
Source(s)
[1] (cdn.jsdelivr.net)
Citations:
🏁 Script executed:
# Find the frontend/package.json file and check its context around line 161
cd frontend && git diff HEAD~1 HEAD -- package.json | head -100Repository: openshift/console
Length of output: 89
🏁 Script executed:
# Search for actual imports and usage of `@patternfly/react-data-view` in the frontend codebase
rg "@patternfly/react-data-view" --type ts --type tsx --type js --type jsx -A 3 -B 1Repository: openshift/console
Length of output: 88
🏁 Script executed:
# Check git status and understand the repo context
git log --oneline -n 5Repository: openshift/console
Length of output: 118
🏁 Script executed:
# Search for `@patternfly/react-data-view` imports anywhere in frontend
rg "@patternfly/react-data-view" frontend/Repository: openshift/console
Length of output: 4704
🏁 Script executed:
# Look at the full dependency section of frontend/package.json
sed -n '150,170p' frontend/package.jsonRepository: openshift/console
Length of output: 960
🏁 Script executed:
# Find workload table components that might use resizing
rg -i "workload.*table\|resiz" frontend/public/components --type-list | head -20Repository: openshift/console
Length of output: 450
🏁 Script executed:
# Search specifically for resizable/resize in workload-related files
fd workload frontend/ | head -10Repository: openshift/console
Length of output: 1028
🏁 Script executed:
# Check for any resizable column usage in the codebase
rg "resizable\|resiz" frontend/public/components -i -B 2 -A 2Repository: openshift/console
Length of output: 43
🏁 Script executed:
# Show the actual commit diff to see what changed
git show --statRepository: openshift/console
Length of output: 50374
🏁 Script executed:
# Search more broadly for DataViewTh in workload context
rg "DataViewTh" frontend/ -B 3 -A 3 | grep -i workload -B 3 -A 3Repository: openshift/console
Length of output: 43
🏁 Script executed:
# Check if there's a workload-related table in console-app
fd -i workload frontend/packages/console-app/src --type fRepository: openshift/console
Length of output: 43
🏁 Script executed:
# Read the newly created resizable column hook
cat frontend/packages/console-app/src/components/data-view/useResizableColumnProps.tsRepository: openshift/console
Length of output: 4172
🏁 Script executed:
# Check what specific DataView APIs are actually being used
rg "from '@patternfly/react-data-view" frontend/packages/console-app/src/components/data-view/ -A 1 | head -30Repository: openshift/console
Length of output: 1245
Downgrade @patternfly/react-data-view to stable ~6.4.0.
The resizable column implementation in useResizableColumnProps.ts uses only standard DataViewTh resizable props (isResizable, onResize, width, resizeButtonAriaLabel)—all available in stable 6.4.0. Pinning a prerelease introduces unnecessary fragmentation when every other PatternFly dependency uses stable ~6.4.x. Move to the stable line to improve dependency consistency and predictability.
Suggested change
- "@patternfly/react-data-view": "6.4.0-prerelease.12",
+ "@patternfly/react-data-view": "~6.4.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@patternfly/react-data-view": "6.4.0-prerelease.12", | |
| "@patternfly/react-data-view": "~6.4.0", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/package.json` at line 161, Update the dependency entry for
"@patternfly/react-data-view" from the prerelease version to the stable semver
line "~6.4.0" so it matches the other PatternFly packages; modify the
"@patternfly/react-data-view" entry in package.json accordingly and then
reinstall (npm/yarn/pnpm) to refresh the lockfile so the resolved dependency
graph is consistent with the stable release.
| isResizable: true as const, | ||
| width: columnWidths?.[resolvedTableId]?.[columnId], | ||
| onResize, | ||
| resizeButtonAriaLabel: `Resize ${columnId} column`, |
There was a problem hiding this comment.
i18n violation: Hardcoded English aria-label.
The resizeButtonAriaLabel string is hardcoded in English. This violates i18n requirements and will not be translated for non-English users.
🌐 Proposed fix to use i18n
The hook would need access to the translation function. Consider one of these approaches:
- Accept a pre-translated label as a parameter:
export const useColumnWidthSettings = (
model: K8sModel,
+ columnLabels?: Record<string, string>, // pre-translated column names
): {- Or return a function that accepts the label:
getResizableProps: (
columnId: string,
+ translatedColumnName?: string,
) => {
// ...
- resizeButtonAriaLabel: `Resize ${columnId} column`,
+ resizeButtonAriaLabel: translatedColumnName
+ ? `Resize ${translatedColumnName} column`
+ : undefined,
};The actual text should use t('public~Resize {{columnName}} column', { columnName }) at the call site.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@frontend/packages/console-app/src/components/data-view/useResizableColumnProps.ts`
at line 90, The aria-label string for the resize button is hardcoded in
useResizableColumnProps (resizeButtonAriaLabel using columnId); change the hook
API to accept a translated label or the i18n translator so the label is produced
via i18n (e.g. call t('public~Resize {{columnName}} column', { columnName }))
instead of hardcoding English; update callers of useResizableColumnProps to pass
a pre-translated label or the t function and replace the resizeButtonAriaLabel
assignment to use that translated value.
| title: showNodes ? t('public~Node') : t('public~Owner'), | ||
| id: tableColumnInfo[5].id, | ||
| sort: showNodes ? 'spec.nodeName' : 'metadata.ownerReferences[0].name', | ||
| resizableProps: getResizableProps(tableColumnInfo[5].id), |
There was a problem hiding this comment.
Don't persist the Node and Owner widths under the same key.
useColumnWidthSettings stores widths by columnId, but this slot renders Owner in one view and Node in another while staying keyed as owner. Resizing it on one page will overwrite the saved width for the other page. Please give the showNodes variant a distinct width key, or otherwise scope the saved widths separately.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/public/components/pod-list.tsx` around lines 173 - 176, The column
currently reuses the same columnId for both Owner and Node which causes
useColumnWidthSettings to persist a single width; change the persisted key so
Node and Owner are distinct by incorporating showNodes into the id (or pass a
scoped key to getResizableProps). Update the column definition that uses
title/id/resizableProps (referencing showNodes, tableColumnInfo[5].id, and
getResizableProps) to derive a unique id like
`${tableColumnInfo[5].id}-${showNodes ? 'node' : 'owner'}` or call
getResizableProps with a second scopedKey param so widths for Owner and Node are
saved separately.
| resizableProps: getResizableProps(tableColumnInfo[3].id), | ||
| props: { | ||
| modifier: 'nowrap', | ||
| width: 20, |
There was a problem hiding this comment.
Removing this value means the labels take up as much space as possible (which is what the value was solving for) and resizing the labels column is nearly impossible.
Screen.Recording.2026-03-13.at.1.25.21.PM.mov
@nicolethoen, any ideas?
vikram-raj
force-pushed
the
console-4988-1
branch
from
c05ff79 to
73fb8ff
Compare
|
@vikram-raj: The following tests failed, say
Full PR test history. Your PR dashboard. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
vikram-raj
force-pushed
the
console-4988-1
branch
from
73fb8ff to
3e510b5
Compare
7 participants
Dependent on #16128
Add the resize column feature to the Deployments, DeploymentConfigs, daemonsets, and statefulsets list.
Summary by CodeRabbit
Release Notes
New Features
Dependencies