feat(core, react): add server-side role search for member management - #416
Conversation
- add DEBOUNCE default and rolesSearch query key + page-size constant - add useDebouncedValue hook to throttle search-as-you-type requests - query roles server-side with take + name params via debounced term - add filterLocally prop to combobox to defer filtering to the server - cache selected combobox options so chips keep labels after list narrows - wire assign-roles and invitation-create modals to server-side search
|
Warning Review limit reached
Next review available in: 43 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (9)
📝 WalkthroughWalkthroughRole management now supports debounced server-side role search. Hooks expose searched roles and search state, while assignment and invitation modals pass search input through the updated Combobox behavior. ChangesRole search service and contracts
Hook orchestration and derived roles
Combobox and modal behavior
View wiring and integration tests
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant RoleCombobox
participant OrganizationMemberManagement
participant useMemberManagementService
participant RolesAPI
User->>RoleCombobox: Enter role search text
RoleCombobox->>OrganizationMemberManagement: onRoleSearch(term)
OrganizationMemberManagement->>useMemberManagementService: setRoleSearchTerm(term)
useMemberManagementService->>RolesAPI: Fetch roles with debounced name filter
RolesAPI-->>useMemberManagementService: Return searched roles
useMemberManagementService-->>RoleCombobox: Render searched roles
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #416 +/- ##
==========================================
- Coverage 88.75% 88.72% -0.03%
==========================================
Files 203 204 +1
Lines 17376 17456 +80
Branches 1817 1910 +93
==========================================
+ Hits 15422 15488 +66
- Misses 1954 1968 +14 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
- add enableRolesList and deferRoleSearch options to member management service
- gate role search query behind enableRoleSearch, triggered when the
assignRoles modal opens
- drop eager rolesQuery/availableRoles from the member detail path
- remove availableRoles and isFetchingAvailableRoles from detail types, props, and mocks
- pass enableRoleSearch to member service with deferRoleSearch: true - trigger role search via effect only on create/assignRole modal open
|
@coderabbitai review this PR |
|
✅ Action performedReview finished.
|
|
@coderabbitai Review the PR changes |
|
The Comment images show the Auth0 Members page at
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/react/src/hooks/my-organization/use-organization-member-management.ts (1)
122-126: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd coverage for deferred role-search activation.
Cover that role search remains deferred before the create/assign-role modal opens and becomes enabled when either modal opens.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/react/src/hooks/my-organization/use-organization-member-management.ts` around lines 122 - 126, Add tests around the use-organization-member-management hook to verify role search remains disabled before the modal opens, then becomes enabled when modalState.type changes to either 'create' or 'assignRole'. Exercise both modal types and preserve the existing enableRoleSearch behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@packages/react/src/hooks/my-organization/use-organization-member-management.ts`:
- Around line 122-126: Add tests around the use-organization-member-management
hook to verify role search remains disabled before the modal opens, then becomes
enabled when modalState.type changes to either 'create' or 'assignRole'.
Exercise both modal types and preserve the existing enableRoleSearch behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 65ee71e3-7d7d-4fb9-97fc-f10be9853ae8
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
auth0-myorganization-js-1.1.0.tgzpackages/core/package.jsonpackages/react/src/hooks/my-organization/use-organization-member-management.ts
| export function useDebouncedValue<T>(value: T, delayMs = 300): T { | ||
| const [debouncedValue, setDebouncedValue] = React.useState(value); | ||
|
|
||
| React.useEffect(() => { | ||
| const timeoutId = setTimeout(() => { | ||
| setDebouncedValue(value); | ||
| }, delayMs); | ||
|
|
||
| return () => clearTimeout(timeoutId); | ||
| }, [value, delayMs]); | ||
|
|
||
| return debouncedValue; |
There was a problem hiding this comment.
I am also thinking if we could have this in combobox itself? and based on prop we could have debounced input change or non
There was a problem hiding this comment.
UDS is not the place to keep debounce, happy to discuss
3 participants
Summary
Adds server-side role search to the organization member-management modals (assign-roles and invitation-create), so role options are fetched and filtered by the API as the admin types instead of loading the full list up front.
Why
Role selection loaded the entire role list client-side, which does not scale for organizations with many roles and made the "as-you-type" filter operate on a partial/eager dataset. This PR moves filtering to the server with a debounced query, so the combobox reflects the full role catalog without over-fetching.
What
Packages
packages/corepackages/reactexamplesReferences
Testing
Checklist
Contributing
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes