chore(ui): Add wizard steps to <ConfigureSSO />#8468
Open
LauraBeatris wants to merge 11 commits intomainfrom
Open
chore(ui): Add wizard steps to <ConfigureSSO />#8468LauraBeatris wants to merge 11 commits intomainfrom
<ConfigureSSO />#8468LauraBeatris wants to merge 11 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: a7f1340 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 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.
|
LauraBeatris
force-pushed
the
laura/add-configure-sso-component
branch
6 times, most recently
from
67fbe0d to
bcc4254
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
ff61174 to
e8b8f9a
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
e8b8f9a to
18f5bfd
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
7d5575c to
24fadad
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
24fadad to
e4b796e
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
e4b796e to
541f9aa
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
541f9aa to
b5e2c1a
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
b5e2c1a to
0caf48e
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
0caf48e to
1db042b
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
1db042b to
265c4b1
Compare
![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
🤖 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/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx`:
- Around line 67-85: The WizardChromeProvider is mutating
stackRef/deepestWizardRef without updating context consumers; add a version
counter state (e.g., const [stackVersion, setStackVersion] = React.useState(0))
and increment it inside pushWizard and popWizard (call setStackVersion(s => s +
1)) after updating stackRef/deepestWizardRef, then include stackVersion in the
useMemo dependency array so the returned WizardChromeRegistry object changes and
consumers (like Footer reading deepestWizardRef.current) re-render when
registration state updates; keep existing names pushWizard, popWizard, stackRef,
deepestWizardRef, continueAction, setContinueAction and only change the provider
to bump version on mutations and add it to useMemo deps.
🪄 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), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 54f4da1f-99e0-4834-85d7-42ab603131db
📒 Files selected for processing (6)
packages/clerk-js/src/core/clerk.tspackages/ui/src/components/ConfigureSSO/ConfigureSSO.tsxpackages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsxpackages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsxpackages/ui/src/components/ConfigureSSO/wizard/index.tspackages/ui/src/components/ConfigureSSO/wizard/types.ts
Comment on lines
+67
to
+85
| export const WizardChromeProvider = ({ children }: { children: React.ReactNode }): JSX.Element => { | ||
| const [continueAction, setContinueAction] = React.useState<ContinueAction | undefined>(undefined); | ||
| const stackRef = React.useRef<WizardValueRef[]>([]); | ||
| const deepestWizardRef = React.useRef<WizardValueRef | undefined>(undefined); | ||
|
|
||
| const pushWizard = React.useCallback((ref: WizardValueRef) => { | ||
| stackRef.current = [...stackRef.current, ref]; | ||
| deepestWizardRef.current = stackRef.current[stackRef.current.length - 1]; | ||
| }, []); | ||
|
|
||
| const popWizard = React.useCallback((ref: WizardValueRef) => { | ||
| stackRef.current = stackRef.current.filter(r => r !== ref); | ||
| deepestWizardRef.current = stackRef.current[stackRef.current.length - 1]; | ||
| }, []); | ||
|
|
||
| const value = React.useMemo<WizardChromeRegistry>( | ||
| () => ({ continueAction, setContinueAction, pushWizard, popWizard, deepestWizardRef }), | ||
| [continueAction, pushWizard, popWizard], | ||
| ); |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Wizard registration path:"
rg -n -C2 'deepestWizardRef|pushWizard|popWizard|useRegisterWizard' packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx
echo
echo "Footer render-time dependency on deepest wizard:"
rg -n -C2 'deepestWizardRef\.current|isFirstStep|isLastStep' packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsxRepository: clerk/javascript
Length of output: 3104
Add a state trigger for wizard stack registration changes.
The wizard stack is tracked entirely in refs (stackRef, deepestWizardRef), but pushWizard/popWizard mutations don't notify context consumers. The Footer reads deepestWizardRef.current during render and defaults both step flags to true when undefined. On first mount, the Footer renders before the registration effect runs, leaving buttons disabled. After useRegisterWizard pushes the wizard to the stack, no re-render is triggered because the context value object remains unchanged—useMemo dependencies only include continueAction, pushWizard, and popWizard, not the stack state.
Include a version counter that bumps in pushWizard/popWizard and add it to the useMemo dependency array so the context value changes and subscribers re-render when registration completes.
Suggested fix
export const WizardChromeProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
const [continueAction, setContinueAction] = React.useState<ContinueAction | undefined>(undefined);
+ const [stackVersion, bumpStackVersion] = React.useReducer((x: number) => x + 1, 0);
const stackRef = React.useRef<WizardValueRef[]>([]);
const deepestWizardRef = React.useRef<WizardValueRef | undefined>(undefined);
const pushWizard = React.useCallback((ref: WizardValueRef) => {
stackRef.current = [...stackRef.current, ref];
deepestWizardRef.current = stackRef.current[stackRef.current.length - 1];
+ bumpStackVersion();
}, []);
const popWizard = React.useCallback((ref: WizardValueRef) => {
stackRef.current = stackRef.current.filter(r => r !== ref);
deepestWizardRef.current = stackRef.current[stackRef.current.length - 1];
+ bumpStackVersion();
}, []);
const value = React.useMemo<WizardChromeRegistry>(
() => ({ continueAction, setContinueAction, pushWizard, popWizard, deepestWizardRef }),
- [continueAction, pushWizard, popWizard],
+ [continueAction, pushWizard, popWizard, stackVersion],
);🤖 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/ConfigureSSO/wizard/ConfigureSSOWizardContext.tsx`
around lines 67 - 85, The WizardChromeProvider is mutating
stackRef/deepestWizardRef without updating context consumers; add a version
counter state (e.g., const [stackVersion, setStackVersion] = React.useState(0))
and increment it inside pushWizard and popWizard (call setStackVersion(s => s +
1)) after updating stackRef/deepestWizardRef, then include stackVersion in the
useMemo dependency array so the returned WizardChromeRegistry object changes and
consumers (like Footer reading deepestWizardRef.current) re-render when
registration state updates; keep existing names pushWizard, popWizard, stackRef,
deepestWizardRef, continueAction, setContinueAction and only change the provider
to bump version on mutations and add it to useMemo deps.
c0e5daf to
aa04cf0
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/components/ConfigureSSO/ConfigureSSO.tsx`:
- Line 1: The import line in ConfigureSSO.tsx duplicates useUser, causing an
import/no-duplicates lint error; edit the import statement `import {
__internal_useUserEnterpriseConnections, useOrganization, useUser, useUser }
from '@clerk/shared/react';` to remove the second `useUser` so each symbol is
only listed once (keep `__internal_useUserEnterpriseConnections`,
`useOrganization`, and `useUser`).
🪄 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), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 57d13034-c273-46f4-8e70-b521d99cd2d8
📒 Files selected for processing (2)
packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx`:
- Around line 180-181: The isFirstStep and isLastStep flags in
ConfigureSSOWizard.tsx are incorrectly computed to force nested wizards to never
be absolute-first/last by ANDing with !parentWizard; update the logic so
isFirstStep becomes (index <= 0) and isLastStep becomes (index ===
activeSteps.length - 1) regardless of parentWizard, while preserving any
existing local/relative navigation behavior elsewhere; adjust any places that
relied on the old flags (e.g., footer/navigation render) to respect the absolute
boundary flags so Previous/Next become no-op-disabled at true first/last
positions.
🪄 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), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 4d798647-9ece-48ff-86be-e806b52877e1
📒 Files selected for processing (4)
packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsxpackages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsxpackages/ui/src/components/ConfigureSSO/steps/index.tspackages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
aa04cf0 to
8c7e926
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
8c7e926 to
551b23a
Compare
LauraBeatris
commented
May 5, 2026
| return; | ||
| } | ||
|
|
||
| if (noUserExists(this)) { |
Member
Author
There was a problem hiding this comment.
Added this one that got missed on the first PR
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
8ff7711 to
17a34d2
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
17a34d2 to
a52fec0
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
a52fec0 to
bb1e4e2
Compare
LauraBeatris
force-pushed
the
laura/add-wizard-to-configure-sso
branch
from
bb1e4e2 to
a7f1340
Compare
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
Flow.Partper step typeTo be handled in next PRs:
CleanShot.2026-05-05.at.00.18.48.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change