feat(core, react): implement multi select invitation delete - #434
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughOrganization member management now supports selecting invitations and revoking them individually or in bulk through a confirmation modal and bulk API mutation. Related types, translations, loading behavior, row labels, mocks, and tests were updated. ChangesBulk invitation revocation
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant OrganizationInvitationTable
participant OrganizationMemberManagement
participant useOrganizationMemberManagement
participant useMemberManagementService
participant organization.invitations
OrganizationInvitationTable->>OrganizationMemberManagement: click bulk revoke
OrganizationMemberManagement->>useOrganizationMemberManagement: open bulkRevoke modal
useOrganizationMemberManagement->>OrganizationMemberManagement: render selected invitations
OrganizationMemberManagement->>useOrganizationMemberManagement: confirm revocation
useOrganizationMemberManagement->>useMemberManagementService: revoke invitation array
useMemberManagementService->>organization.invitations: deleteMemberInvitations({ invitations: ids })
organization.invitations-->>useMemberManagementService: return revocation result
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1⚔️ Resolve merge conflicts 💡
📝 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 |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx (2)
30-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueName test suites as conditions.
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx#L30-L30: rename the suite to begin withwhen....packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsx#L37-L38: rename both suites to begin withwhen....As per coding guidelines, describe conditions with
when...and actions initnames.🤖 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/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx` at line 30, Rename the OrganizationInvitationDeleteModal test suite in packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx:30 to begin with “when”. Also rename both test suites in packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsx:37-38 to begin with “when”, keeping actions expressed in their existing it names.Source: Coding guidelines
5-5: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse the React package alias for these component imports.
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx#L5-L5: replace the../import with the equivalent@/components/...import and merge it into the internal-import group.packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsx#L5-L5: replace the../import with the equivalent@/components/...import and merge it into the internal-import group.🤖 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/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx` at line 5, Update the OrganizationInvitationDeleteModal import in packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx:5-5 to use the equivalent `@/components/`... alias and place it in the internal-import group. Apply the same alias conversion and grouping to the organization-invitation-table.test.tsx import at packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsx:5-5.Source: Coding guidelines
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/organization-invitation-table.tsx (1)
202-212: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueReplace the
selectabletype assertion.
DataTableProps.selectableis declared asboolean, and a typed spread passes it as such, soselectable: truesatisfies the type without an assertion.🤖 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/invitations/invitation-table/organization-invitation-table.tsx` around lines 202 - 212, Remove the unnecessary `as const` assertion from the `selectable` property in the selectionEnabled spread within the organization invitation table. Keep the value as the boolean literal true so it satisfies DataTableProps.selectable without a type assertion.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/components/auth0/my-organization/organization-member-management.tsx`:
- Around line 308-318: Add a distinct OrganizationInvitationTab-deleteModal key
to OrganizationInvitationTabClasses and update the
OrganizationInvitationDeleteModal className to use it instead of
OrganizationInvitationTab-revokeModal, leaving the revoke modal styling key
unchanged.
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/organization-invitation-table.tsx`:
- Around line 171-191: Update the selected-invitations toolbar condition in the
invitation table to require onDeleteSelected in addition to selectionEnabled and
selectedCount > 0, so the destructive action is rendered only when its callback
is available.
In
`@packages/react/src/hooks/my-organization/use-organization-member-management.ts`:
- Line 83: Reset selectedInvitations whenever the displayed invitation set
changes, including tab changes and pagination, filter, or sort updates that
replace currentInvitations. Update the relevant effects or handlers around
invitationsQuery/currentInvitations so setSelectedInvitations clears stale
entries before OrganizationInvitationTable uses them.
---
Nitpick comments:
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx`:
- Line 30: Rename the OrganizationInvitationDeleteModal test suite in
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx:30
to begin with “when”. Also rename both test suites in
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsx:37-38
to begin with “when”, keeping actions expressed in their existing it names.
- Line 5: Update the OrganizationInvitationDeleteModal import in
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsx:5-5
to use the equivalent `@/components/`... alias and place it in the internal-import
group. Apply the same alias conversion and grouping to the
organization-invitation-table.test.tsx import at
packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsx:5-5.
In
`@packages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/organization-invitation-table.tsx`:
- Around line 202-212: Remove the unnecessary `as const` assertion from the
`selectable` property in the selectionEnabled spread within the organization
invitation table. Keep the value as the boolean literal true so it satisfies
DataTableProps.selectable without a type assertion.
🪄 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: 98116297-6e3f-4908-bce8-acf464a633de
📒 Files selected for processing (15)
packages/core/src/i18n/custom-messages/my-organization/member-management/invitation-tab-types.tspackages/core/src/i18n/translations/en-US.jsonpackages/core/src/i18n/translations/ja.jsonpackages/react/src/components/auth0/my-organization/__tests__/organization-member-management.test.tsxpackages/react/src/components/auth0/my-organization/organization-member-management.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-delete-modal.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/organization-invitation-delete-modal.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/organization-invitation-table.tsxpackages/react/src/hooks/my-organization/__tests__/use-member-management-service.test.tspackages/react/src/hooks/my-organization/shared/services/use-member-management-service.tspackages/react/src/hooks/my-organization/use-organization-member-management.tspackages/react/src/tests/utils/__mocks__/core/core-client.mocks.tspackages/react/src/types/my-organization/member-management/organization-invitation-table-types.tspackages/react/src/types/my-organization/member-management/organization-member-management-types.ts
| confirm_button?: string; | ||
| cancel_button?: string; | ||
| }; | ||
| delete_selected?: { |
There was a problem hiding this comment.
in invitations we refer delete as revoke, we should rename this and other places where we use it
There was a problem hiding this comment.
delete is going to be depreciated we should use deleteMemberInvitations here as well
| selectable: true as const, | ||
| selectionLabels: { | ||
| selectAll: t('data_table.select_all'), | ||
| selectRow: (index: number) => `${t('data_table.select_row')} ${index + 1}`, |
There was a problem hiding this comment.
we should add the translated text
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/core/src/i18n/translations/ja.json (1)
1307-1322: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win"削除" (delete) wording left over in
bulk_revokeconfirmation strings.
button,button_plural,confirm.title,confirm.title_plural,confirm.confirm_button, andconfirm.confirm_button_pluralall use "削除" (delete), whilesuccess(line 1312) anderror.bulk_revoke_failed(line 1333) correctly use "取り消し" (revoke) — matching the existing singularrevoke/revoke_resendblocks. This is the same delete→revoke terminology drift a previous reviewer asked to fix across "other places where we use it"; the key was renamed tobulk_revokebut the visible text wasn't updated to match, so users see "Delete" in the confirmation dialog but "Revoked" in the success toast for the same action.🌐 Suggested wording alignment
"bulk_revoke": { - "button": "選択項目を削除", - "button_plural": "選択項目を削除", + "button": "選択項目を取り消す", + "button_plural": "選択項目を取り消す", "count": "${count}件を選択中", "count_plural": "${count}件を選択中", "success": "${count}件の招待が取り消されました。", "confirm": { - "title": "保留中の招待を1件削除しますか?", - "title_plural": "保留中の招待を${count}件削除しますか?", + "title": "保留中の招待を取り消しますか?", + "title_plural": "保留中の招待を${count}件取り消しますか?", "description": "この招待を受けたメンバーは、元の招待リンクを使用してチームに参加できなくなります。この操作は取り消せません。", "description_plural": "これらの招待を受けたメンバーは、元の招待リンクを使用してチームに参加できなくなります。この操作は取り消せません。", - "confirm_button": "招待を削除", - "confirm_button_plural": "招待を削除", + "confirm_button": "招待を取り消す", + "confirm_button_plural": "招待を取り消す", "cancel_button": "キャンセル" } },🤖 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/core/src/i18n/translations/ja.json` around lines 1307 - 1322, Update the Japanese bulk_revoke translations so all visible action and confirmation text uses revoke terminology (取り消し) instead of delete terminology (削除). Modify button, button_plural, confirm.title, confirm.title_plural, confirm.confirm_button, and confirm.confirm_button_plural while preserving the existing success and cancellation wording.packages/react/src/hooks/my-organization/use-organization-member-management.ts (1)
129-131: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winSelection reset effect misses pagination changes.
This effect only clears
selectedInvitationsonactiveTab/invitationFilters/invitationSortConfigchanges, but not on invitation pagination changes (invitationCurrentPage/invitationFromToken/invitationPageSize). Navigating to the next/previous page or changing page size still replacescurrentInvitations, yetselectedInvitations(and thus the bulk-revoke toolbar count) persists from the prior page. A user could click "Bulk revoke" and revoke invitations that are no longer visible on screen, which is surprising for a destructive action.🐛 Proposed fix
React.useEffect(() => { setSelectedInvitations([]); - }, [activeTab, invitationFilters, invitationSortConfig]); + }, [activeTab, invitationFilters, invitationSortConfig, invitationCurrentPage, invitationPageSize]);🤖 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 129 - 131, Update the selection-reset React.useEffect to also depend on invitationCurrentPage, invitationFromToken, and invitationPageSize, so selectedInvitations is cleared whenever invitation pagination changes while preserving the existing resets for activeTab, invitationFilters, and invitationSortConfig.
🤖 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-management-types.ts`:
- Around line 117-118: Update the JSDoc above revokeInvitationAction to
explicitly state that the action hooks support single or bulk invitation
revocation, matching the equivalent OrganizationMemberManagementProps
documentation.
---
Outside diff comments:
In `@packages/core/src/i18n/translations/ja.json`:
- Around line 1307-1322: Update the Japanese bulk_revoke translations so all
visible action and confirmation text uses revoke terminology (取り消し) instead of
delete terminology (削除). Modify button, button_plural, confirm.title,
confirm.title_plural, confirm.confirm_button, and confirm.confirm_button_plural
while preserving the existing success and cancellation wording.
In
`@packages/react/src/hooks/my-organization/use-organization-member-management.ts`:
- Around line 129-131: Update the selection-reset React.useEffect to also depend
on invitationCurrentPage, invitationFromToken, and invitationPageSize, so
selectedInvitations is cleared whenever invitation pagination changes while
preserving the existing resets for activeTab, invitationFilters, and
invitationSortConfig.
🪄 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: 2c8f70ee-bfe7-45e5-a0cf-516df58ed3c8
📒 Files selected for processing (17)
packages/core/src/i18n/custom-messages/my-organization/member-management/invitation-tab-types.tspackages/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-management.test.tsxpackages/react/src/components/auth0/my-organization/organization-member-management.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/__tests__/organization-invitation-bulk-revoke-modal.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-revoke/organization-invitation-bulk-revoke-modal.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/__tests__/organization-invitation-table.test.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/invitations/invitation-table/organization-invitation-table.tsxpackages/react/src/components/auth0/my-organization/shared/member-management/organization-member-detail/__tests__/organization-member-roles-tab.test.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-management-service.tspackages/react/src/hooks/my-organization/use-organization-member-management.tspackages/react/src/types/my-organization/member-management/organization-invitation-table-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 (1)
- packages/core/src/i18n/translations/en-US.json
| /** Action hooks for invitation revocation (onBefore/onAfter) */ | ||
| revokeInvitationAction?: ComponentAction<MemberInvitation>; | ||
| revokeInvitationAction?: ComponentAction<MemberInvitation[]>; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Stale JSDoc: doesn't mention bulk revocation support.
revokeInvitationAction was updated to ComponentAction<MemberInvitation[]> to support bulk revoke, but the JSDoc above it still says "Action hooks for invitation revocation (onBefore/onAfter)" — unlike the equivalent comment on OrganizationMemberManagementProps (line 226) which was updated to "single or bulk".
📝 Suggested doc fix
- /** Action hooks for invitation revocation (onBefore/onAfter) */
+ /** Action hooks for invitation revocation, single or bulk (onBefore/onAfter) */
revokeInvitationAction?: ComponentAction<MemberInvitation[]>;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /** Action hooks for invitation revocation (onBefore/onAfter) */ | |
| revokeInvitationAction?: ComponentAction<MemberInvitation>; | |
| revokeInvitationAction?: ComponentAction<MemberInvitation[]>; | |
| /** Action hooks for invitation revocation, single or bulk (onBefore/onAfter) */ | |
| revokeInvitationAction?: ComponentAction<MemberInvitation[]>; |
🤖 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/types/my-organization/member-management/organization-member-management-types.ts`
around lines 117 - 118, Update the JSDoc above revokeInvitationAction to
explicitly state that the action hooks support single or bulk invitation
revocation, matching the equivalent OrganizationMemberManagementProps
documentation.
Summary
Adds multi-select bulk deletion of pending invitations to the organization member management view — users can now select several pending invitations and delete them in a single confirmation step.
Why
The invitations table only supported revoking one invitation at a time. Cleaning up multiple stale or pending invitations meant repeating the revoke-and-confirm flow once per row, which is tedious for organizations with many outstanding invites. This PR adds a batch delete path and, in doing so, moves single revoke onto the same batch delete endpoint so both flows share one code path.
What
deleteInvitationsMutationin the member management service that deletes a batch of invitations via the SDK'sorganization.invitations.deleteMemberInvitations({ invitations })endpoint.deleteInvitationsAction(ComponentAction<MemberInvitation[]>) exposed onUseOrganizationMemberManagementOptions, withonBefore/onAfterhooks —onBeforereturningfalsecancels the deletion;onAfterfires on success.OrganizationInvitationDeleteModalcomponent and a{ type: 'deleteInvitations'; invitations }variant added toMemberManagementModalState, wired into the member management view.OrganizationInvitationTablegains row selection for triggering bulk delete.revokeInvitationMutation) now also usesdeleteMemberInvitationsinstead of the removedinvitations.delete(id)call, unifying the two paths.en-US) and Japanese (ja) translations added for the new confirm modal (singular/plural titles, buttons) and the bulk-delete error message.Packages
packages/corepackages/reactexamplesReferences
Testing
How can this be verified? Note anything intentionally not covered by tests and why.
Delete N pending invitations?) and a plural confirm button.Checklist
Contributing
Summary by CodeRabbit