feat: truncate roles display in member table with clickable expansion - #448
Open
rax7389 wants to merge 4 commits into
Open
feat: truncate roles display in member table with clickable expansion#448rax7389 wants to merge 4 commits into
rax7389 wants to merge 4 commits into
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughMember management now supports tab-aware detail actions, roles-tab navigation from the member table, validated member-role queries with prefetching, loading feedback in the assignment modal, updated translations, and expanded examples, tests, and documentation. ChangesMember management flow
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant MemberTable
participant MemberManagement
participant ViewMemberDetailsAction
participant MemberDetail
MemberTable->>MemberManagement: select member or view all roles
MemberManagement->>ViewMemberDetailsAction: send { userId, tab? }
ViewMemberDetailsAction->>MemberDetail: navigate with optional tab
MemberDetail->>MemberDetail: initialize active tab
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
🚀 Preview deploymentBranch: 📝 Preview URL: https://auth0-universal-components-nbf9yhv79-ui-components-217de888.vercel.app Updated at 2026-08-03T02:51:39.850Z |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #448 +/- ##
==========================================
+ Coverage 90.86% 90.90% +0.03%
==========================================
Files 239 239
Lines 17620 17671 +51
Branches 2467 2478 +11
==========================================
+ Hits 16010 16063 +53
+ Misses 1610 1608 -2 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (4)
packages/react/src/hooks/my-organization/__tests__/use-member-management-service.test.ts (1)
541-618: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAlign the
describeblock naming with the stated test convention.The new
describe('memberRolesQuery', ...)block names the feature under test. As per coding guidelines, describe blocks should describe conditions using "when...", anditnames should describe the action/outcome. Consider restructuring, for example nestingdescribe('when userId is invalid or the query is disabled', ...)anddescribe('when userId is valid and the query is enabled', ...), withitnames stating the resulting behavior.As per coding guidelines: "Use Vitest tests with
describe/itnaming: describe conditions withwhen...and describe actions in theitname."🤖 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/__tests__/use-member-management-service.test.ts` around lines 541 - 618, Restructure the memberRolesQuery tests so describe blocks express conditions beginning with “when...”, rather than naming the feature; group the disabled/absent/invalid userId cases separately from the valid-and-enabled case, and update each it name to state the resulting fetch behavior or query-key outcome.Source: Coding guidelines
packages/react/src/components/auth0/my-organization/__tests__/organization-member-detail.test.tsx (1)
2-2: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMerge the duplicate package imports.
Line 2 adds a second import declaration from
@auth0/universal-components-core. Merge it with the existingComponentActionimport.As per coding guidelines: group imports by external package and internal imports, separate groups with newlines, and alphabetize imports within each group.
Proposed import consolidation
-import type { ComponentAction } from '`@auth0/universal-components-core`'; -import { memberManagementQueryKeys } from '`@auth0/universal-components-core`'; +import { + memberManagementQueryKeys, + type ComponentAction, +} from '`@auth0/universal-components-core`';🤖 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/components/auth0/my-organization/__tests__/organization-member-detail.test.tsx` at line 2, Merge the memberManagementQueryKeys import with the existing ComponentAction import from `@auth0/universal-components-core`, keeping imports grouped by package and alphabetized within the external-import group.Source: Coding guidelines
packages/react/src/components/auth0/my-organization/organization-member-detail.tsx (1)
243-253: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a regression test for
initialTab.The new prop is forwarded to
useOrganizationMemberDetail, but the provided tests do not exerciseinitialTab="roles". Add a component test that asserts the Roles tab is active before user interaction.As per coding guidelines: add component tests for new React blocks and maintain at least 80% coverage.
🤖 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/components/auth0/my-organization/organization-member-detail.tsx` around lines 243 - 253, Add a component regression test for OrganizationMemberDetail that renders with initialTab set to "roles" and verifies the Roles tab is active before any user interaction. Reuse the existing test setup and selectors for the component, and ensure the test covers the prop forwarding through useOrganizationMemberDetail.Source: Coding guidelines
packages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/organization-member-assign-roles-modal.tsx (1)
93-97: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a component test for the role-loading branch.
When
isLoadingRolesis true, the modal replaces the role selector with a spinner. Add a test that asserts the spinner is present and the combobox is absent.As per coding guidelines: add component tests for new React blocks and maintain at least 80% coverage.
🤖 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/components/auth0/my-organization/shared/member-management/members/organization-member-roles/organization-member-assign-roles-modal.tsx` around lines 93 - 97, Add a component test for the role-loading branch in the organization member roles modal, setting isLoadingRoles to true and asserting that the spinner is rendered while the role-selector combobox is absent. Follow the existing modal test setup and queries, and keep coverage at or above the project’s 80% requirement.Source: Coding guidelines
🤖 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.
Inline comments:
In `@docs-site/src/pages/MemberManagementDocs.tsx`:
- Around line 586-590: Update the Next.js example’s
viewMemberDetailsAction.onAfter handler to use the App Router-compatible
router.push href string, constructing the optional tab query with
URLSearchParams or equivalent while preserving navigation to /members/{userId}
when no tab is provided.
In `@packages/core/src/i18n/translations/en-US.json`:
- Line 1175: Update the view_all_roles placeholder from {{count}} to ${count} in
packages/core/src/i18n/translations/en-US.json lines 1175-1175,
packages/core/src/i18n/translations/fr.json lines 1110-1110, and
packages/core/src/i18n/translations/ja.json lines 1173-1173 so the translation
service substitutes the role count correctly.
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/members/members-table/__tests__/organization-member-table-actions-column.test.tsx`:
- Line 91: Preserve the legacy string argument contract for
OrganizationMemberTableActionsColumnProps.onViewDetails and
handleViewMemberDetails so existing ComponentAction<string> consumers and
useMemberManagementServiceOptions.viewMemberDetailsAction remain
type-compatible; if tab-aware data is required internally, add an adapter or
typing guard at the boundary rather than changing the public callback signature.
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/organization-member-remove-role-modal.tsx`:
- Around line 62-65: Update the translation components map in the organization
member remove-role modal to retain the legacy bold component alias alongside
roleBold and memberBold, preserving formatting for customMessages that still use
<bold>. Add a compatibility test verifying the legacy bold tag renders with
strong formatting.
In
`@packages/react/src/hooks/my-organization/use-organization-member-management.ts`:
- Around line 86-88: Document the invariant linking ROLES_PREFETCH_THRESHOLD to
the role truncation limit used by MEMBER_LIST_FIELDS, or derive the threshold
from that shared API limit instead of retaining an unexplained literal. Update
the selectedMemberRolesCount/memberRolesQuery flow so assignments at the
truncation boundary continue to prefetch complete roles.
In
`@packages/react/src/lib/utils/my-organization/member-management/__tests__/member-management-utils.test.tsx`:
- Around line 22-57: Rename the outer describe block for isValidUserId tests to
a condition-based name beginning with “when,” such as “when validating user
IDs,” while leaving the existing it descriptions and test behavior unchanged.
---
Nitpick comments:
In
`@packages/react/src/components/auth0/my-organization/__tests__/organization-member-detail.test.tsx`:
- Line 2: Merge the memberManagementQueryKeys import with the existing
ComponentAction import from `@auth0/universal-components-core`, keeping imports
grouped by package and alphabetized within the external-import group.
In
`@packages/react/src/components/auth0/my-organization/organization-member-detail.tsx`:
- Around line 243-253: Add a component regression test for
OrganizationMemberDetail that renders with initialTab set to "roles" and
verifies the Roles tab is active before any user interaction. Reuse the existing
test setup and selectors for the component, and ensure the test covers the prop
forwarding through useOrganizationMemberDetail.
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/organization-member-assign-roles-modal.tsx`:
- Around line 93-97: Add a component test for the role-loading branch in the
organization member roles modal, setting isLoadingRoles to true and asserting
that the spinner is rendered while the role-selector combobox is absent. Follow
the existing modal test setup and queries, and keep coverage at or above the
project’s 80% requirement.
In
`@packages/react/src/hooks/my-organization/__tests__/use-member-management-service.test.ts`:
- Around line 541-618: Restructure the memberRolesQuery tests so describe blocks
express conditions beginning with “when...”, rather than naming the feature;
group the disabled/absent/invalid userId cases separately from the
valid-and-enabled case, and update each it name to state the resulting fetch
behavior or query-key outcome.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2f0ec698-ee0e-4e6a-b39b-adbf75ce6f28
📒 Files selected for processing (26)
docs-site/src/pages/MemberManagementDocs.tsxpackages/core/src/i18n/translations/en-US.jsonpackages/core/src/i18n/translations/fr.jsonpackages/core/src/i18n/translations/ja.jsonpackages/react/src/components/auth0/my-organization/__tests__/organization-member-detail.test.tsxpackages/react/src/components/auth0/my-organization/__tests__/organization-member-management.test.tsxpackages/react/src/components/auth0/my-organization/organization-member-detail.tsxpackages/react/src/components/auth0/my-organization/organization-member-management.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/members-table/__tests__/organization-member-table-actions-column.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/members-table/__tests__/organization-member-table.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/members-table/organization-member-table-actions-column.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/members-table/organization-member-table.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/organization-member-assign-roles-modal.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/organization-member-remove-role-modal.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/organization-member-detail/organization-member-roles-tab.tsxpackages/react/src/hooks/my-organization/__tests__/use-member-management-service.test.tspackages/react/src/hooks/my-organization/shared/services/use-member-detail-service.tspackages/react/src/hooks/my-organization/shared/services/use-member-management-service.tspackages/react/src/hooks/my-organization/use-member-detail.tspackages/react/src/hooks/my-organization/use-organization-member-management.tspackages/react/src/lib/constants/my-organization/member-management/member-management-constants.tspackages/react/src/lib/utils/my-organization/member-management/__tests__/member-management-utils.test.tsxpackages/react/src/lib/utils/my-organization/member-management/member-management-utils.tspackages/react/src/types/my-organization/member-management/organization-member-detail-types.tspackages/react/src/types/my-organization/member-management/organization-member-management-types.tspackages/react/src/types/my-organization/member-management/organization-member-table-types.ts
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/__tests__/organization-member-assign-roles-modal.test.tsx (1)
61-73: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse a condition-based
describeblock for the loading test.Move this test under
describe('when isLoadingRoles is true', ...)and use an action-focuseditname such asit('shows the loading state', ...). The current test is nested underdescribe('content').As per coding guidelines, Vitest tests must describe conditions with
when...and describe actions in theitname.🤖 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/components/auth0/my-organization/shared/member-management/members/organization-member-roles/__tests__/organization-member-assign-roles-modal.test.tsx` around lines 61 - 73, Move the loading-state test from the existing content describe block into a condition-based describe('when isLoadingRoles is true', ...) block, and rename the test to an action-focused name such as “shows the loading state.” Preserve its current assertions and setup.Source: Coding guidelines
🤖 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.
Inline comments:
In
`@packages/react/src/types/my-organization/member-management/organization-member-detail-types.ts`:
- Line 18: Preserve the published MemberDetailTab API by adding a deprecated
alias to OrganizationMemberDetailTab in the member detail types, then
re-exporting MemberDetailTab from the package entry point. Keep
OrganizationMemberDetailTab as the current type and ensure existing consumers
importing MemberDetailTab continue to compile.
---
Nitpick comments:
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/__tests__/organization-member-assign-roles-modal.test.tsx`:
- Around line 61-73: Move the loading-state test from the existing content
describe block into a condition-based describe('when isLoadingRoles is true',
...) block, and rename the test to an action-focused name such as “shows the
loading state.” Preserve its current assertions and setup.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f37e2861-67ff-479c-ae4b-aa0aac192c13
📒 Files selected for processing (18)
docs-site/src/pages/MemberManagementDocs.tsxexamples/next-rwa/src/app/member-management/[user_id]/page.tsxexamples/next-rwa/src/app/member-management/page.tsxexamples/react-spa-npm/src/views/member-detail-page.tsxexamples/react-spa-npm/src/views/member-management-page.tsxexamples/react-spa-shadcn/src/pages/MemberDetail.tsxexamples/react-spa-shadcn/src/pages/MemberManagement.tsxpackages/core/src/i18n/translations/en-US.jsonpackages/core/src/i18n/translations/fr.jsonpackages/core/src/i18n/translations/ja.jsonpackages/react/src/components/auth0/my-organization/__tests__/organization-member-detail.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/members/organization-member-roles/__tests__/organization-member-assign-roles-modal.test.tsxpackages/react/src/hooks/my-organization/__tests__/use-member-management-service.test.tspackages/react/src/hooks/my-organization/use-member-detail.tspackages/react/src/lib/constants/my-organization/member-management/member-management-constants.tspackages/react/src/lib/utils/my-organization/member-management/__tests__/member-management-utils.test.tsxpackages/react/src/types/my-organization/member-management/organization-member-detail-types.tspackages/react/src/types/my-organization/member-management/organization-member-management-types.ts
🚧 Files skipped from review as they are similar to previous changes (10)
- packages/core/src/i18n/translations/ja.json
- packages/core/src/i18n/translations/en-US.json
- packages/core/src/i18n/translations/fr.json
- packages/react/src/components/auth0/my-organization/tests/organization-member-detail.test.tsx
- packages/react/src/lib/constants/my-organization/member-management/member-management-constants.ts
- packages/react/src/hooks/my-organization/tests/use-member-management-service.test.ts
- packages/react/src/hooks/my-organization/use-member-detail.ts
- packages/react/src/lib/utils/my-organization/member-management/tests/member-management-utils.test.tsx
- docs-site/src/pages/MemberManagementDocs.tsx
- packages/react/src/types/my-organization/member-management/organization-member-management-types.ts
11 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Truncates the roles column in the member management table to show only the first 2 roles, with a clickable "+more" link that navigates to the member's roles tab for viewing all assigned roles.
Why
When members have many roles assigned, the roles column in the member table becomes cluttered and difficult to scan. This change improves table readability while maintaining easy access to full role details.
What
memberRolesQuerytouseMemberManagementServicefor fetching member rolesisValidUserIdutility function for validationPackages
packages/corepackages/reactexamplesTesting
Initial Load
When Clicked on +more
Checklist
Contributing
Summary by CodeRabbit
New Features
Bug Fixes