feat(FR-1804): enhance user management table with flexible column composition

[yomybaby]

Resolves #4862 (FR-1804)

Background

The current user management table implementation uses a fixed array-based approach for column composition (extraColumns?: BAIColumnType[]). This approach has limitations:

1. Limited Flexibility: Can only prepend or append columns, cannot insert at specific positions
2. Tight Coupling: Query logic and presentation are coupled in a single component
3. Difficult Maintenance: Changes to column ordering require modifying the base component

Purpose

This enhancement introduces a function-based column composition pattern to address these limitations:

1. Architectural Separation: Separate data fetching (query orchestrator) from presentation (fragment-based table component)
2. Flexible Composition: Enable inserting, filtering, reordering columns at any position
3. Better Developer Experience: Provide render-props pattern for maximum control over column composition
4. Maintainability: Allow parent components to customize columns without modifying base component

Benefits

• Flexibility: Insert control columns at specific positions (e.g., after email column)
• Reusability: Base table component can be reused with different column compositions
• Type Safety: TypeScript ensures column customization is type-safe
• Clean Architecture: Follows separation of concerns principle (data fetching vs presentation)

Implementation Details

Changed API

Before:

extraColumns?: BAIColumnType<UserNodeInList>[]

After:

customizeColumns?: (baseColumns: BAIColumnType<UserNodeInList>[]) => BAIColumnType<UserNodeInList>[]

Usage Example

<UserNodes
  usersFrgmt={users}
  customizeColumns={(baseColumns) => [
    baseColumns[0],          // Keep email column first
    controlColumn,           // Insert control column
    ...baseColumns.slice(1)  // Rest of base columns
  ]}
/>

Changes

• New UserNodes.tsx component with fragment-based GraphQL pattern
• Function-based customizeColumns prop for flexible composition
• Updated UserManagement.tsx to use new composition pattern
• Added translations for 21 languages
• Removed UserNodeList.tsx (replaced by UserNodes)

Test Plan

Checklist:

• Verify user list displays correctly with all columns
• Check control column is inserted at correct position (after email)
• Test column sorting functionality
• Verify status filter (active/inactive) works
• Test search and filtering
• Confirm user actions (edit, enable/disable) work correctly
• Check all 21 language translations display properly

[yomybaby]

• feat(FR-1822): add logic to validate CIDR range correctly feat/add-logic-to-validate-CIDR #4888
• feat(FR-1808): migrate user creation and modification features from Control Panel to WebUI #4876
• feat(FR-1804): enhance user management table with flexible column composition #4863 👈 (View in Graphite)
• feat(FR-1788): add more fields to User list page with BooleanTagWithFallBack component #4820
• feat(FR-1785): move Admin Settings to top menu and apply admin primary colors #4816
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./packages/backend.ai-ui

St.❔	Category	Percentage	Covered / Total
🟡	Statements	60.7%	227/374
🔴	Branches	33.33%	104/312
🔴	Functions	48.31%	43/89
🟡	Lines	62.42%	206/330

Test suite run success

146 tests passing in 8 suites.

Report generated by 🧪jest coverage report action from bc71618

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	4.23% (+0% 🔼)	496/11724
🔴	Branches	3.65%	298/8159
🔴	Functions	2.55% (+0.01% 🔼)	92/3604
🔴	Lines	4.2% (+0% 🔼)	482/11466

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / UserManagement.tsx	0%	0%	0%	0%

Test suite run success

144 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from bc71618

[Copilot]

Pull request overview

This PR refactors the user management table to introduce a flexible column composition pattern, improving architectural separation and maintainability. The changes replace UserNodeList with two components: UserManagement (query orchestrator) and UserNodes (fragment-based presentation), moving from array-based (extraColumns) to function-based (customizeColumns) column composition.

Key Changes:

• Introduces flexible function-based column composition API for better control over column positioning
• Separates data fetching concerns (UserManagement) from presentation logic (UserNodes)
• Adds comprehensive translations for comp:UserNodes across 21 languages
• Migrates from use-query-params to modern nuqs library for better query parameter handling
• Adds user-friendly button titles for improved accessibility

Reviewed changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
react/src/pages/UserCredentialsPage.tsx	Updates import from UserNodeList to UserManagement component
react/src/components/UserNodeList.tsx	Deleted legacy component with monolithic query+presentation logic
react/src/components/UserManagement.tsx	New query orchestrator component that manages data fetching and passes fragment data to UserNodes via customizeColumns pattern
packages/backend.ai-ui/src/components/UserNodes.tsx	New fragment-based presentation component with customizable column composition API
packages/backend.ai-ui/src/components/index.ts	Exports new UserNodes component and related types
packages/backend.ai-ui/src/locale/*.json (21 files)	Adds comp:UserNodes translation keys across all supported languages
packages/backend.ai-ui/src/components/Table/BAITableSettingModal.tsx	Adds requiredMark={false} for cleaner UI in table settings modal

[nowgnuesLee]

sorting by created_at isn't working.

[nowgnuesLee]

LGTM

[ironAiken2]

Although this is not a change in this PR, the i18n translation text used in InfoModal should also be changed to true or false.

[ironAiken2]

LGTM

[graphite-app]

Merge activity

• Dec 24, 4:47 AM UTC: yomybaby added this pull request to the Graphite merge queue.
• Dec 24, 4:50 AM UTC: Merged by the Graphite merge queue.