feat(ui): add OrganizationProfileDomainsSection mosaic component#9078
Merged
Conversation
🦋 Changeset detectedLatest commit: 9512631 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThis PR adds an organization profile domains section with add/verify, enrollment, and remove dialogs, plus controller wiring, panel/profile integration, Storybook/docs, and tests. ChangesDomains Section Feature
Estimated code review effort: 4 (Complex) | ~60 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
alexcarpenter
force-pushed
the
feat/mosaic-org-profile-profile-section
branch
from
76c5710 to
97961dc
Compare
Rebuilds the OrganizationProfile domains subsystem as a Mosaic component (list, add + verify, edit enrollment mode, remove) wired into the general panel and the OrganizationProfile compound namespace (.DomainsSection).
alexcarpenter
force-pushed
the
feat/mosaic-org-profile-domains-section
branch
from
c5c1068 to
5a66208
Compare
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
Contributor
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
![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: 4
🧹 Nitpick comments (4)
packages/ui/src/mosaic/organization/organization-profile-domains-section-remove.view.tsx (1)
63-78: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider surfacing an in-progress label while deleting.
Buttons are correctly disabled during
isDeleting, but the "Remove domain" label never changes to indicate work is in progress. A small text swap (e.g. "Removing…") would improve clarity without changing behavior.♻️ Optional tweak
<Button intent='destructive' type='button' disabled={isDeleting} onClick={() => send({ type: 'CONFIRM' })} > - Remove domain + {isDeleting ? 'Removing…' : 'Remove domain'} </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/ui/src/mosaic/organization/organization-profile-domains-section-remove.view.tsx` around lines 63 - 78, The deletion confirmation UI in organization-profile-domains-section-remove.view.tsx keeps the Remove domain button enabled state correct via isDeleting, but the label never reflects that the action is underway. Update the Button rendered for the confirm action inside the delete flow to swap its text based on isDeleting (for example, show an in-progress label like “Removing…” while the machine is deleting, and “Remove domain” otherwise), using the existing send and isDeleting state in this component.packages/ui/src/mosaic/organization/organization-profile-domains-section-add-verify.view.tsx (1)
70-252: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRepeated form/Actions structure across the four steps.
Each step (name/email/code/enrollment) duplicates the same
<form onSubmit=...><Actions .../></form>shape with slightly different guards. This isn't a functional problem, but extracting a smallStepFormwrapper that takesonSubmit,canSubmit, and children could reduce duplication and make future steps easier to add.🤖 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/ui/src/mosaic/organization/organization-profile-domains-section-add-verify.view.tsx` around lines 70 - 252, The four step blocks in the add/verify dialog repeat the same form submission pattern around onSubmit and Actions, so extract a shared StepForm wrapper in organization-profile-domains-section-add-verify.view.tsx to centralize the form shell. Have the wrapper accept the submit handler, a canSubmit flag, and children, then use it for the isNameStep, isEmailStep, isCodeStep, and isEnrollmentStep sections while keeping each step’s specific fields and guards intact.packages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-enrollment.machine.test.ts (1)
1-117: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMissing coverage for the stale
deletePendingedge case.Consider adding a test that: checks
deletePending, switches to a non-manual_invitationmode, switches back to the committed mode, and assertsSUBMITis not enabled (or thatdeletePendingis reset). This would have caught the issue flagged inorganization-profile-domains-section-enrollment.machine.ts.🤖 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/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-enrollment.machine.test.ts` around lines 1 - 117, There is no test covering the stale deletePending state when the draft mode is changed away from and then back to the committed mode, which can leave SUBMIT incorrectly enabled. Add a case in organizationProfileDomainsSectionEnrollmentMachine tests that opens the machine, toggles deletePending, selects a non-manual_invitation mode, switches back to the committed mode, and then verifies either actor.can({ type: 'SUBMIT' }) is false or the draft deletePending state is reset. Use the existing open helper and the SELECT_MODE, TOGGLE_DELETE_PENDING, and SUBMIT events to keep the test aligned with the machine behavior.packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx (1)
117-148: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd accessible names to per-row action buttons.
Manage/Verify/Removerender identically across every row; a screen-reader user tabbing through the list only hears the generic label with no domain context. Consideraria-label={Remove ${domain.name}}(and similarly for Manage/Verify).♿ Proposed fix
<Button variant='ghost' size='sm' intent='destructive' type='button' + aria-label={`Remove ${domain.name}`} onClick={() => onRemove(domain)} > Remove </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/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx` around lines 117 - 148, The per-row action buttons in the organization profile domains section use identical visible labels, so add accessible names that include the domain context. Update the buttons rendered in the `organization-profile-domains-section` row actions so `Manage`, `Verify`, and `Remove` each get an `aria-label` that includes `domain.name` (for example, through the existing `onManage`, `onVerify`, and `onRemove` button handlers), while keeping the visible button text unchanged.
🤖 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 @.changeset/mosaic-domains-section.md:
- Around line 1-2: Add a changeset for the new public OrganizationProfile export
in packages/ui. The current changeset file is empty, so update it to include a
release note and versioning entry for the public surface change introduced by
OrganizationProfile. Keep the changeset aligned with the published ui package so
the export change is captured for release.
In
`@packages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-add-verify.machine.test.ts`:
- Around line 102-114: Update the failing-verification test in
organization-profile-domains-section-add-verify.machine by removing the
expectation that the machine transitions to closed after SUBMIT_CODE when
attemptVerification returns verified: false. Instead, align it with the intended
UX fix in the machine state logic by asserting the actor remains in enteringCode
and that an error is set after the failed verification attempt, using the
existing start, attemptVerification, and actor.getSnapshot() flow.
In
`@packages/ui/src/mosaic/organization/organization-profile-domains-section-enrollment.machine.ts`:
- Around line 39-45: `deletePending` is left stale when the enrollment mode
changes, so update the state transition logic in
`OrganizationProfileDomainsSectionEnrollmentMachine` to clear it whenever
`SELECT_MODE` changes `draftEnrollmentMode` (and any related mode-reset path
around `effectiveMode`/`canSave`). Make sure the action that handles mode
selection resets `deletePending` to false before the checkbox can be hidden, so
`SUBMIT` cannot pass an unintended `deletePending: true` to
`updateEnrollmentMode`.
In
`@packages/ui/src/mosaic/organization/organization-profile-domains-section.controller.tsx`:
- Around line 146-158: The delete flow in
organizationProfileDomainsSectionRemoveMachine currently calls
organization?.getDomain() and domain?.delete() directly, bypassing the step-up
reverification used by the classic RemoveDomainForm. Update deleteDomain to
route the deletion through useReverification(deleteResource) (or the equivalent
reverification wrapper used elsewhere) so step-up auth is enforced when
required, and keep the domains?.revalidate() fire-and-forget behavior after a
successful delete.
---
Nitpick comments:
In
`@packages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-enrollment.machine.test.ts`:
- Around line 1-117: There is no test covering the stale deletePending state
when the draft mode is changed away from and then back to the committed mode,
which can leave SUBMIT incorrectly enabled. Add a case in
organizationProfileDomainsSectionEnrollmentMachine tests that opens the machine,
toggles deletePending, selects a non-manual_invitation mode, switches back to
the committed mode, and then verifies either actor.can({ type: 'SUBMIT' }) is
false or the draft deletePending state is reset. Use the existing open helper
and the SELECT_MODE, TOGGLE_DELETE_PENDING, and SUBMIT events to keep the test
aligned with the machine behavior.
In
`@packages/ui/src/mosaic/organization/organization-profile-domains-section-add-verify.view.tsx`:
- Around line 70-252: The four step blocks in the add/verify dialog repeat the
same form submission pattern around onSubmit and Actions, so extract a shared
StepForm wrapper in organization-profile-domains-section-add-verify.view.tsx to
centralize the form shell. Have the wrapper accept the submit handler, a
canSubmit flag, and children, then use it for the isNameStep, isEmailStep,
isCodeStep, and isEnrollmentStep sections while keeping each step’s specific
fields and guards intact.
In
`@packages/ui/src/mosaic/organization/organization-profile-domains-section-remove.view.tsx`:
- Around line 63-78: The deletion confirmation UI in
organization-profile-domains-section-remove.view.tsx keeps the Remove domain
button enabled state correct via isDeleting, but the label never reflects that
the action is underway. Update the Button rendered for the confirm action inside
the delete flow to swap its text based on isDeleting (for example, show an
in-progress label like “Removing…” while the machine is deleting, and “Remove
domain” otherwise), using the existing send and isDeleting state in this
component.
In
`@packages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsx`:
- Around line 117-148: The per-row action buttons in the organization profile
domains section use identical visible labels, so add accessible names that
include the domain context. Update the buttons rendered in the
`organization-profile-domains-section` row actions so `Manage`, `Verify`, and
`Remove` each get an `aria-label` that includes `domain.name` (for example,
through the existing `onManage`, `onVerify`, and `onRemove` button handlers),
while keeping the visible button text unchanged.
🪄 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: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 3b8ac0d6-59d8-4924-9fa6-704e8e990d6b
📒 Files selected for processing (25)
.changeset/mosaic-domains-section.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/organization-profile-domains-section.mdxpackages/swingset/src/stories/organization-profile-domains-section.stories.tsxpackages/swingset/src/stories/organization-profile-general-panel.stories.tsxpackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-add-verify.machine.test.tspackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-add-verify.view.test.tsxpackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-enrollment.machine.test.tspackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-enrollment.view.test.tsxpackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section-remove.machine.test.tspackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section.controller.test.tsxpackages/ui/src/mosaic/organization/__tests__/organization-profile-domains-section.view.test.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section-add-verify.machine.tspackages/ui/src/mosaic/organization/organization-profile-domains-section-add-verify.view.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section-enrollment.machine.tspackages/ui/src/mosaic/organization/organization-profile-domains-section-enrollment.view.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section-remove.machine.tspackages/ui/src/mosaic/organization/organization-profile-domains-section-remove.view.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section.controller.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section.tsxpackages/ui/src/mosaic/organization/organization-profile-domains-section.view.tsxpackages/ui/src/mosaic/organization/organization-profile-general-panel-view.tsxpackages/ui/src/mosaic/organization/organization-profile-general-panel.tsxpackages/ui/src/mosaic/organization/organization-profile.tsx
wobsoriano
approved these changes
Jul 9, 2026
- enrollment: reset deletePending on mode change so a hidden checkbox can't silently delete pending invitations/suggestions on an unchanged mode. - add-verify: keep the user on the code step with an error when a verification attempt returns verified:false instead of silently closing the dialog.
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
Mosaic
OrganizationProfileDomainsSection: list, add + verify, edit enrollment mode, remove — matches classic OrganizationProfile domains. Wired into general panel +OrganizationProfilecompound (.DomainsSection).On
main, standalone. Mosaic is internal (no public export), so no changeset surface.Preview: https://swingset-git-feat-mosaic-org-profile-domains-section.clerkstage.dev/organization/organization-profile-domains-section
Machines (3)
enteringName → creating → enteringEmail → preparing → enteringCode → attempting → selectingEnrollment → savingEnrollment, plus already-verified branches.deletePendingonmanual_invitation, pending-count callout).Machines pure; controller injects
createDomain/prepareVerification/attemptVerification/updateEnrollmentMode/deleteDomain(resolve viagetDomain, revalidate list) and gates onorg:sys_domains:read/manage+domains.enabled.Tests
New machine/controller/view suites (add-verify / enrollment / remove) — 65 cases green.
@clerk/uibuild + typecheck clean. Noany/!/ casts.Not classic-equivalent yet
localizationKeys); plain code input (not segmented OTP).delete()directly); field-level errors (singleerrorstring per machine).appearance.elements-themeable.Summary by CodeRabbit