lablup / lablup/backend.ai-webui
RBAC role detail > Role assignment: move the user query of the assign modal into its own Suspense-bounded select
- 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