feat(ui): add OrganizationProfileProfileSection#9068
Merged
Conversation
🦋 Changeset detectedLatest commit: 97961dc 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
📝 WalkthroughWalkthroughThis PR introduces an "Organization Profile Section" feature enabling users to edit an organization's name/slug and manage its logo. It adds two XState machines (details, logo), a controller hook orchestrating them via Clerk hooks, a view/component, integration into the general panel, tests, and Storybook/docs entries. ChangesOrganization Profile Section
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant OrganizationProfileProfileSectionView
participant DetailsMachine
participant Controller
participant ClerkOrganization
OrganizationProfileProfileSectionView->>DetailsMachine: send TYPE_NAME/TYPE_SLUG
OrganizationProfileProfileSectionView->>DetailsMachine: send SUBMIT
DetailsMachine->>Controller: invoke updateOrganization(name, slug)
Controller->>ClerkOrganization: organization.update(...)
ClerkOrganization-->>Controller: resolve/reject
Controller-->>DetailsMachine: onDone/onError
DetailsMachine-->>OrganizationProfileProfileSectionView: closed / editing with error
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
@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 |
wobsoriano
approved these changes
Jul 9, 2026
![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: 1
🧹 Nitpick comments (2)
packages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section-details.machine.test.ts (1)
40-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding a test for slug-only edits.
Coverage exercises name-only changes and the slug-disabled path, but not the case where only the slug diverges while the name is unchanged (
dataChanged's slug branch, Line 36 in the machine). Worth adding givencanSavecurrently has no dedicated guard for a blank slug either (see companion comment on the machine file).🤖 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-profile-section-details.machine.test.ts` around lines 40 - 46, Add a machine test in organization-profile-profile-section-details.machine.test for the slug-only edit case: keep the name unchanged, send a slug update, and assert SUBMIT is allowed so the dataChanged slug branch is covered. Use the existing start() helper and the same actor.can({ type: 'SUBMIT' }) pattern, and place it alongside the current name-divergence coverage to mirror the machine behavior in dataChanged/canSave.packages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section.controller.test.tsx (1)
106-133: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding coverage for save failures and late-loading organization data.
Current tests don't cover
organization.update/setLogorejecting (to verify error propagation intosnapshot.context.error), nor the scenario whereorganizationbecomes available only after the initial render — which is the specific case the PR description says the machine design is meant to handle correctly. Given the stale-closure risk flagged in the controller file, a regression test here would materially increase confidence. As per coding guidelines, tests should "Verify proper error handling and edge cases."🤖 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-profile-section.controller.test.tsx` around lines 106 - 133, Add regression coverage in the organization profile controller tests for the missing edge cases: verify that failures from organization.update and setLogo flow into snapshot.context.error, and add a case where organization is undefined on initial render but becomes available later. Use Harness, update, and setLogo to drive the save path and assert the error state and late-bound organization handling, matching the stale-closure scenario the controller is meant to support.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/ui/src/mosaic/organization/organization-profile-profile-section.view.tsx`:
- Around line 152-158: The Cancel button in
organization-profile-profile-section.view.tsx is inside the form but has no
explicit button type, so it defaults to submit and can accidentally trigger
handleSubmit alongside the CANCEL action. Update the Button used for Cancel in
the organization profile section to use a non-submit type (matching the intent
of the existing trigger and Save buttons), while keeping the onClick send({
type: 'CANCEL' }) behavior intact. Verify the fix in the component that renders
the form around handleSubmit and canSubmit so Cancel only discards changes and
never submits.
---
Nitpick comments:
In
`@packages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section-details.machine.test.ts`:
- Around line 40-46: Add a machine test in
organization-profile-profile-section-details.machine.test for the slug-only edit
case: keep the name unchanged, send a slug update, and assert SUBMIT is allowed
so the dataChanged slug branch is covered. Use the existing start() helper and
the same actor.can({ type: 'SUBMIT' }) pattern, and place it alongside the
current name-divergence coverage to mirror the machine behavior in
dataChanged/canSave.
In
`@packages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section.controller.test.tsx`:
- Around line 106-133: Add regression coverage in the organization profile
controller tests for the missing edge cases: verify that failures from
organization.update and setLogo flow into snapshot.context.error, and add a case
where organization is undefined on initial render but becomes available later.
Use Harness, update, and setLogo to drive the save path and assert the error
state and late-bound organization handling, matching the stale-closure scenario
the controller is meant to support.
🪄 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: dc1682bd-645e-4779-82a0-4f33b7081759
📒 Files selected for processing (18)
.changeset/org-profile-profile-section.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/organization-profile-general-panel.mdxpackages/swingset/src/stories/organization-profile-general-panel.stories.tsxpackages/swingset/src/stories/organization-profile-profile-section.mdxpackages/swingset/src/stories/organization-profile-profile-section.stories.tsxpackages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section-details.machine.test.tspackages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section-logo.machine.test.tspackages/ui/src/mosaic/organization/__tests__/organization-profile-profile-section.controller.test.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-profile-section-details.machine.tspackages/ui/src/mosaic/organization/organization-profile-profile-section-logo.machine.tspackages/ui/src/mosaic/organization/organization-profile-profile-section.controller.tsxpackages/ui/src/mosaic/organization/organization-profile-profile-section.tsxpackages/ui/src/mosaic/organization/organization-profile-profile-section.view.tsxpackages/ui/src/mosaic/organization/organization-profile.tsx
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.
Description
Mosaic OrganizationProfile: name/slug edit section (machine + controller + view + wrapper), wired into General Panel.
useEffectsync. Committed-vs-draft: org values injected read-only each render (committed*); edits held machine-owned (draft*, null=untouched); effective =draft ?? committed. Seeds late-loading org + refreshes post-save, never clobbers typing.closed/editing/saving+ OPEN/CANCEL), mirroring delete section. Modalopendriven by state; closes on save success, no effect.organizationSettings.slug.disabled) + Save/Cancel.org:sys_profile:manage.profileslot at top (profile → leave → delete, matching legacy order).Internal-only under
/experimentalMosaic; no public API change.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Bug Fixes