fix(ui): render organization profile modal close button inside the SSO wizard header#9089
fix(ui): render organization profile modal close button inside the SSO wizard header#9089iagodahlem wants to merge 3 commits into
Conversation
…O wizard header When OrganizationProfile is shown as a modal, the configure SSO wizard header now renders the close button as a flex item next to the step indicator instead of as an absolute overlay, so it no longer overlaps the "Activate" step label. The mobile top-right close button is unchanged.
🦋 Changeset detectedLatest commit: afc8ac7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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.
|
@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: |
API Changes Report
Summary
🔴 Breaking changes index (15)Every breaking change, up front. Full diffs are in the package sections below.
@clerk/backendVersion: 3.11.0 → 3.9.0 🔴 Breaking Changes (8)Changed:
|
|
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 (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds header-owned close-button state to ChangesModal Close Button Ownership
Estimated code review effort: 2 (Simple) | ~12 minutes Sequence Diagram(s)sequenceDiagram
participant ProfileCardRoot
participant ConfigureSSOHeader
participant ModalContext
participant User
ConfigureSSOHeader->>ModalContext: read toggle and modal state
ConfigureSSOHeader->>ProfileCardRoot: claim header close-button ownership
ProfileCardRoot-->>ProfileCardRoot: hide overlay close button on desktop
ConfigureSSOHeader-->>User: render Close modal IconButton
User->>ConfigureSSOHeader: click close button
ConfigureSSOHeader->>ModalContext: toggle()
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
♻️ Duplicate comments (1)
packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx (1)
345-355: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winAssertion may not test what it intends to.
This test asserts there's no
'Close modal'button on the overview screen while inside a modal, but the shared overlay close button inProfileCardRoot.tsx(rendered whenevertoggleis truthy, independent of the wizard) also usesaria-label='Close modal'. IfProfileCardRootwraps the overview page too when rendered in a modal, this overlay button would already satisfy the query, making the assertion pass/fail for reasons unrelated to the wizard-header button under test. Please confirm this is exercising the intended contract (wizard-header ownership vs. shared overlay), possibly by giving the two buttons distinct accessible names.🤖 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/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx` around lines 345 - 355, The test in OrganizationSecurityPage.test.tsx may be matching the shared overlay close control from ProfileCardRoot instead of the wizard-header button it intends to verify. Update the assertion setup around renderPageInModal and the “Close modal” query so it targets the correct contract, likely by making the wizard-header close button in OrganizationSecurityPage and the shared overlay button in ProfileCardRoot distinguishable via different accessible names or by querying a more specific element.
🤖 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.
Duplicate comments:
In
`@packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx`:
- Around line 345-355: The test in OrganizationSecurityPage.test.tsx may be
matching the shared overlay close control from ProfileCardRoot instead of the
wizard-header button it intends to verify. Update the assertion setup around
renderPageInModal and the “Close modal” query so it targets the correct
contract, likely by making the wizard-header close button in
OrganizationSecurityPage and the shared overlay button in ProfileCardRoot
distinguishable via different accessible names or by querying a more specific
element.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 5f766f66-26c4-402d-94c3-a6d140e673cb
📒 Files selected for processing (6)
.changeset/configure-sso-modal-close-button-height.mdpackages/ui/src/components/ConfigureSSO/ConfigureSSOHeader.tsxpackages/ui/src/components/ConfigureSSO/elements/ProfileCard.tsxpackages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsxpackages/ui/src/elements/ProfileCard/ProfileCardRoot.tsxpackages/ui/src/elements/ProfileCard/index.ts
1 participant
Summary
When
OrganizationProfilerenders as a modal, the close (X) button was an absolute overlay pinned to the card's top-right corner. In the Configure SSO wizard (Security tab), the step header reaches that same corner, so the X overlapped the final "Activate" step.This moves the close button into the wizard header as a real flex item aligned with the stepper on desktop, and hides the shared absolute overlay there via an additive opt-out (default off — every other profile page/component is unchanged). Mobile keeps the existing absolute close button via a breakpoint split, so there is exactly one close button at any width. The in-header button's block padding is zeroed so it does not make the header taller than the back button and stepper.
Closes ORGS-1709.
Testing
Summary by CodeRabbit