Skip to content

feat(core, react): add service types and invitation components#160

Open
rax7389 wants to merge 15 commits into
mainfrom
feat/mm-invitations-components
Open

feat(core, react): add service types and invitation components#160
rax7389 wants to merge 15 commits into
mainfrom
feat/mm-invitations-components

Conversation

@rax7389
Copy link
Copy Markdown
Contributor

@rax7389 rax7389 commented Mar 14, 2026

Changes

Summary: Adds MyOrg-dependent service types (@auth0/myorganization-js type aliases), React types/utilities that depend on MemberInvitation, and all presentational invitation components — details modal, revoke modal, table with actions, create modal with multi-email input, and search filter. All components are prop-driven and fully translatable.

Why: This PR bridges types to the actual @auth0/myorganization-js SDK and provides the complete set of presentational UI components needed for the invitation management flow. React types that depend on MemberInvitation are co-located here with the core type definitions. Separating components (this PR) from the orchestrating hook (PR 4) keeps the review focused.

What:

Core Service Types (member-management-types.ts)

Type aliases mapping internal types to @auth0/myorganization-js SDK types for members and invitations.

export type OrgMember = MyOrganization.OrgMember;
export type MemberInvitation = MyOrganization.MemberInvitation;
export type ListMemberInvitationsRequestParameters = MyOrganization.ListMemberInvitationsRequestParameters;
export type CreateMemberInvitationRequestContent = MyOrganization.CreateMemberInvitationRequestContent;

React Types (moved from PR 2)

  • organization-invitation-table-types.ts — Core entity and component prop types:
interface Invitation { id: string; invitee: { email: string }; status?: InvitationStatus; ... }
interface InvitationPaginationState { pageSize: number; currentPage: number; hasNextPage: boolean; ... }
interface InvitationSortConfig { key: string | null; direction: 'asc' | 'desc'; }
interface OrganizationInvitationTableProps { invitations: Invitation[]; pagination: ...; sortConfig?: ...; }
  • organization-member-management-types.ts — Top-level management types including service layer types:
interface UseMemberManagementServiceOptions { activeTab: ActiveTab; invitationParams: TableQueryParams<...>; ... }
interface MemberManagementServiceResult { invitationsQuery: UseQueryResult<...>; createInvitationMutation: ...; }
interface OrganizationMemberManagementProps extends SharedComponentProps<...> { ... }

Utilities (react)

  • member-management-utils.tsgetInvitationStatus() helper that computes status from expires_at when no explicit status is set.
getInvitationStatus({ expires_at: "2024-01-01T00:00:00Z" }); // "expired"
getInvitationStatus({ status: "pending" });                    // "pending"

Presentational Components

  1. InvitationDetailsModal — Read-only modal displaying all invitation fields (email, status, dates, roles, invitation URL with copy, identity provider) with inline revoke/resend action buttons.
image
  1. InvitationRevokeModal — Reusable confirmation dialog that handles both revoke and revoke-and-resend flows via the isRevokeAndResend prop.
image
  1. InvitationTableActionsColumn — Dropdown menu with context-aware actions: "View Details" (always), "Copy URL" (pending only), "Revoke and Resend", and "Revoke" (hidden in read-only mode).
image
  1. InvitationTable — Data table with sortable columns (email, status, created_at, expires_at, inviter), checkpoint-based pagination via DataPagination, role filtering via SearchFilter, and the actions column above.
image
  1. InvitationCreateModal — Form modal with multi-email input (TextFieldGroup with chips), multi-role selection (Combobox), identity provider dropdown (Select), and Zod-powered validation.
image
  1. SearchFilter — Role filter dropdown with reset button, shown above the invitation table when roles are available.
<SearchFilter
  filters={{ roleId: "role_admin" }}
  availableRoles={roles}
  onRoleFilterChange={handleFilterChange}
/>

Other

  • package.json: Updated @auth0/myorganization-js dependency
  • pnpm-lock.yaml: Lock file updates

References

Part of the member management invitations feature.

Testing

  • This change adds unit test coverage

Component tests are in PR 5. These are presentational components receiving all data via props.

  • This change has been tested on the latest version of the platform/language

Checklist

@rax7389 rax7389 force-pushed the feat/mm-invitations-core-types branch from d32ea46 to a3edf1e Compare March 14, 2026 12:06
@rax7389 rax7389 force-pushed the feat/mm-invitations-components branch from 7b93170 to bf603bf Compare March 14, 2026 12:07
@rax7389 rax7389 self-assigned this Mar 15, 2026
@rax7389 rax7389 added the enhancement New feature or request label Mar 15, 2026
@rax7389 rax7389 force-pushed the feat/mm-invitations-core-types branch from a3edf1e to 038ed92 Compare March 29, 2026 17:43
@rax7389 rax7389 force-pushed the feat/mm-invitations-components branch from bf603bf to e29c388 Compare March 29, 2026 17:44
@rax7389 rax7389 force-pushed the feat/mm-invitations-core-types branch from 038ed92 to 27b3080 Compare April 8, 2026 09:03
@rax7389 rax7389 force-pushed the feat/mm-invitations-components branch 3 times, most recently from 1397fc9 to 3fef17b Compare April 8, 2026 10:59
@rax7389 rax7389 force-pushed the feat/mm-invitations-core-types branch from a6cfe0d to 2b6461e Compare April 8, 2026 11:07
@rax7389 rax7389 closed this Apr 8, 2026
@rax7389 rax7389 force-pushed the feat/mm-invitations-components branch from 3fef17b to 2b6461e Compare April 8, 2026 11:07
@rax7389 rax7389 reopened this Apr 8, 2026
@rax7389 rax7389 closed this Apr 8, 2026
@rax7389 rax7389 force-pushed the feat/mm-invitations-components branch from 9f53be5 to e9c796d Compare April 8, 2026 11:17
@rax7389 rax7389 reopened this Apr 8, 2026
@rax7389 rax7389 requested a review from NaveenChand755 April 17, 2026 15:25
Base automatically changed from feat/mm-invitations-core-types to main April 28, 2026 09:05
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 28, 2026

Codecov Report

❌ Patch coverage is 1.01302% with 684 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.03%. Comparing base (aecf241) to head (99abbae).

Files with missing lines Patch % Lines
...on-create/organization-invitation-create-modal.tsx 0.48% 207 Missing ⚠️
...-details/organization-invitation-details-modal.tsx 0.62% 160 Missing ⚠️
...invitation-table/organization-invitation-table.tsx 0.68% 144 Missing ⚠️
...e/organization-invitation-table-actions-column.tsx 1.47% 67 Missing ⚠️
...-management/shared/search-filter/search-filter.tsx 1.88% 52 Missing ⚠️
...on-revoke/organization-invitation-revoke-modal.tsx 1.96% 50 Missing ⚠️
...ation/member-management/member-management-utils.ts 20.00% 4 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #160      +/-   ##
==========================================
- Coverage   89.47%   85.03%   -4.45%     
==========================================
  Files         156      163       +7     
  Lines       13070    13761     +691     
  Branches     1419     1342      -77     
==========================================
+ Hits        11694    11701       +7     
- Misses       1376     2060     +684     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@rax7389 rax7389 requested a review from NaveenChand755 April 28, 2026 13:21
Copy link
Copy Markdown
Contributor

@NaveenChand755 NaveenChand755 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants