CONSOLE-4982: add resizable column feature to User Management tables

[vikram-raj]

Add the resize column feature to the following Compute tables

• Users
• Groups
• ServiceAccounts
• Roles
• RoleBindings

Summary by CodeRabbit

• New Features
  • Added resizable columns to role bindings, roles, groups, service accounts, and user management tables for improved data visibility.
  • Users can now reset columns to default widths.

[openshift-ci-robot]

@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.

Details

In response to this:

Add the resize column feature to the following Compute tables

• Users
• Groups
• ServiceAccounts
• Roles
• RoleBindings

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.

[openshift-ci-robot]

@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.

Details

In response to this:

Add the resize column feature to the following Compute tables

• Users
• Groups
• ServiceAccounts
• Roles
• RoleBindings

Summary by CodeRabbit

• New Features
• Added resizable columns to role bindings, roles, groups, service accounts, and user management tables for improved data visibility.
• Users can now reset columns to default widths.

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.

[openshift-ci]

[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

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [vikram-raj]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 71c6d973-b76d-4a4b-83f0-b9fabdbad96c

📥 Commits

Reviewing files that changed from the base of the PR and between d499061 and 6f04c25.

📒 Files selected for processing (5)

• frontend/public/components/RBAC/bindings.tsx
• frontend/public/components/RBAC/role.jsx
• frontend/public/components/group.tsx
• frontend/public/components/service-account.jsx
• frontend/public/components/user.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

• frontend/public/components/RBAC/role.jsx
• frontend/public/components/group.tsx
• frontend/public/components/service-account.jsx
• frontend/public/components/RBAC/bindings.tsx
• frontend/public/components/user.tsx

🧬 Code graph analysis (5)

frontend/public/components/RBAC/role.jsx (3)

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

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/service-account.jsx (3)

• useColumnWidthSettings (99-99)
• columns (101-149)
• tableColumnInfo (27-33)

frontend/public/models/index.ts (1)

• RoleModel (570-584)

frontend/public/components/group.tsx (4)

frontend/public/components/factory/table.tsx (1)

• TableColumn (663-670)

frontend/public/module/k8s/types.ts (1)

• GroupKind (1008-1010)

frontend/public/models/index.ts (1)

• GroupModel (875-890)

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

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/service-account.jsx (2)

frontend/public/components/RBAC/role.jsx (7)

• useColumnWidthSettings (396-396)
• columns (249-249)
• columns (398-428)
• tableColumnInfo (46-46)
• props (251-251)
• props (294-296)
• props (455-455)

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

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/RBAC/bindings.tsx (3)

frontend/public/components/factory/table.tsx (1)

• TableColumn (663-670)

frontend/public/models/index.ts (1)

• RoleBindingModel (554-568)

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

• nameCellProps (250-253)
• actionsCellProps (262-266)

frontend/public/components/user.tsx (2)

frontend/packages/console-app/src/components/data-view/types.ts (1)

• ConsoleDataViewColumn (5-5)

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

• nameCellProps (250-253)
• actionsCellProps (262-266)

🔇 Additional comments (7)

frontend/public/components/group.tsx (1)

79-147: LGTM — Clean implementation of resizable columns.

The refactor follows the established pattern consistently: useColumnWidthSettings(GroupModel) integration, correct useMemo dependencies including getResizableProps, and proper propagation of isResizable/resetAllColumnWidths to ConsoleDataView. Actions column appropriately excluded from resizing.

frontend/public/components/service-account.jsx (1)

97-173: LGTM — Consistent resizable column implementation.

Pattern matches the other tables in this PR: useColumnWidthSettings(ServiceAccountModel), proper useMemo dependencies, and correct wiring to ConsoleDataView. All four data columns (name, namespace, secrets, created) receive resizableProps while actions is correctly excluded.

frontend/public/components/user.tsx (1)

129-204: LGTM — Well-typed resizable column implementation.

Solid TypeScript typing on the return value { columns: ConsoleDataViewColumn<UserKind>[]; resetAllColumnWidths: () => void }. Pattern is consistent with the other User Management tables. The identities column correctly receives resizableProps despite rendering multiple <div> elements per cell.

frontend/public/components/RBAC/role.jsx (2)

394-497: LGTM — Resizable columns correctly applied to main Roles list.

The useRolesColumns hook follows the established pattern. Note that useBindingsColumns (used by BindingsListComponent for the role-details bindings tab) intentionally does not include resizing — this sub-table context appropriately differs from the main list views targeted by this PR.

---

205-244: Bindings sub-table lacks column resizing — confirm if intentional simplification.

The useBindingsColumns hook (used by BindingsListComponent in the Role details page) omits useColumnWidthSettings and resizableProps, creating an inconsistency with both useRoleBindingsColumns in bindings.tsx (the main bindings list view) and useRoleColumns in the same file (the main role table). Both of those include resizing support. If the intent is to keep sub-tables lightweight, that's a reasonable design choice—but it should be documented or the implementations should be aligned for consistency.

frontend/public/components/RBAC/bindings.tsx (2)

101-168: LGTM — Comprehensive resizable column implementation for RoleBindings.

Well-typed return value, correct application of resizableProps to all five data columns (name, roleRef, subjectKind, subjectName, namespace), and appropriate exclusion of the actions column. The useMemo dependencies are correct.

---

248-350: LGTM — ConsoleDataView correctly wired with resizing props.

The BindingsList component properly destructures { columns, resetAllColumnWidths } and passes both isResizable and resetAllColumnWidths to ConsoleDataView. Good to see the existing filter logic remains intact alongside the new feature.

---

📝 Walkthrough

Walkthrough

This pull request introduces resizable column functionality across multiple OpenShift Console list components. The changes follow a consistent pattern: introduce useColumnWidthSettings hook integration to obtain per-column resizing configuration and a reset function, update component hooks to return objects containing both columns and reset handlers instead of plain column arrays, replace sticky cell props with semantic nameCellProps and actionsCellProps, and propagate isResizable and resetAllColumnWidths props to ConsoleDataView. Affected components include RBAC bindings, roles, groups, service accounts, and users list views.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

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 biome.

[openshift-ci-robot]

@vikram-raj: This pull request references CONSOLE-4982 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 story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Add the resize column feature to the following Compute tables

• Users
• Groups
• ServiceAccounts
• Roles
• RoleBindings

Summary by CodeRabbit

• New Features
• Added resizable columns to role bindings, roles, groups, service accounts, and user management tables for improved data visibility.
• Users can now reset columns to default widths.

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.

[openshift-ci]

@vikram-raj: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	6f04c25	link	true	/test e2e-gcp-console

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.