lablup / lablup/backend.ai-webui

RBAC role detail > Role assignment: move the user query of the assign modal into its own Suspense-bounded select

Closed
#9,418 0 comments 0 reactions 0 assignees View on GitHub
rbac
Dominant language
TypeScript
Stars
133
Forks
81
Avg merge
1d 12h
Merged PRs (30d)
355

Description

Follow-up to FR-3725 (PR #9413).

#9413 stopped the **Add user** click from suspending the whole Role assignment tab by deferring the modal's `open` inside `AssignRoleModal` (`useDeferredValue(open, false)`). That keeps the tab rendered, but it relies on a deferred render plus a `store-only` first pass, which is indirect for what is really a missing Suspense boundary.

**Proposed change**

- Replace the deferred-open handling with a component split inside `react/src/components/AssignRoleModal.tsx`: the user options query (`AssignRoleModalQuery`), the search state and the `BAISelect` move into an `AssignRoleUserSelect` component that renders inside its own `Suspense` boundary.
- The boundary sits inside the `Form.Item` child, so the `userIds` field stays registered (and its `required` rule active) while the options load; the fallback is the same select in `loading` + `disabled` state.
- Drop the `maxTagCount` / `maxTagPlaceholder` props while moving the select: `BAISelect` accepts and ignores both.

**Expected**: same user-visible behaviour as after #9413 (tab stays rendered, modal opens at once, select shows loading), with the boundary expressed directly.

JIRA Issue: FR-3848

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in react/src/components/AssignRoleModal.tsx by reading AssignRoleModalQuery, the current search state, and BAISelect usage. Move the user-options query and select into AssignRoleUserSelect under a Suspense boundary inside the Form.Item, using the existing loading and disabled select as fallback. Done means the userIds field remains registered and required, while the tab stays rendered and the modal opens immediately during option loading.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.