Iago/configure sso layers#8493
Draft
iagodahlem wants to merge 10 commits intomainfrom
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
…rActions context Adds a parallel wizard primitive at packages/ui/src/components/ConfigureSSO/elements/Wizard/, copied verbatim from packages/ui/src/components/ConfigureSSO/wizard/, then refactored: - Renamed exports from ConfigureSSOWizard / useConfigureSSOWizard to Wizard / useWizard. - Split FooterActionsContext from WizardContext. WizardContext owns navigation only (activeSteps, currentStep, goNext, goPrev, isLoading). FooterActionsContext owns step-action registration (continueAction, setContinueAction, chrome stack registry). - Stripped UI from the Wizard root: removed Header, Footer, StepIndicator, Body, and helpers. Wizard now provides context + step extraction + active-step rendering only. Header and Footer will be added back as ConfigureSSO layout components in a follow-up. - Preserved nested-wizard URL scoping via Option (a): the Wizard root keeps a Switch with a Route per step, so each Route children get a scoped RouteContext for nested wizards. Step itself stays a null-returning descriptor (its children are harvested by extractSteps and rendered inside the Switch). This stays close to the existing shape and avoids requiring a free-floating Route from Step. Laura's existing wizard/ folder is untouched and still in use by ConfigureSSO.tsx. The new elements/Wizard/ is dormant until ConfigureSSO.tsx switches over in a later commit.
The Wizard primitive renders step children directly inside each Route, with no Col wrapper and no element descriptors. Layout sizing belongs to the host's ConfigureSSO layout component, and per-step descriptors belong to each step's own root element — neither is the wizard's concern.
Extracts the numbered breadcrumb rendering from the existing wizard Header into a presentational primitive at packages/ui/src/components/ ConfigureSSO/elements/Breadcrumbs/. The primitive takes items, currentIndex, and onItemClick — no awareness of the wizard or its context. Wires existing element descriptors (configureSSOWizardHeader*) through to the same DOM elements they covered in the old Header.
Replaces the items/currentIndex prop pair with `<Breadcrumbs.Item>` children and a `currentId` prop on the parent. Mirrors the pattern used by `<Wizard>` / `<Wizard.Step>` in the same component folder. Breadcrumbs walks its children via an extractItems helper (with fragment support) and computes the active index from `currentId` internally. Reachability logic, element descriptors, and the visual rendering are unchanged.
Adds three new top-level components under packages/ui/src/components/ ConfigureSSO/ that consume the wizard primitive and the breadcrumbs primitive: - ConfigureSSOLayout: ProfileCard shell with the navbar sidebar and a body Col that owns the flex sizing for the wizard's step output. - ConfigureSSOHeader: thin wrapper that drives the declarative Breadcrumbs primitive from the wizard's active steps + currentStep. - ConfigureSSOFooter: shared Previous / Continue footer that dispatches to the deepest mounted wizard via the FooterActions context registry. Nothing wires these in yet — that swap lands in a follow-up commit.
Removes the shared StepLayout wrapper from each step file and inlines the header (Heading + subtitle) plus body Col directly. Each step now owns its own visual chrome: - ProvideEmailStep, VerifyDomainStep, ConfigureCreateAppStep, TestConfigurationStep render their own header row and body. - ConfirmationStep drops the header entirely per the Figma design. Step files also switch wizard hook imports from the old wizard/ folder to the new elements/Wizard/ primitive, and each step attaches its own configureSSOWizardBody descriptor at its outermost rendered element. Flow.Part does not accept elementDescriptor / elementId props, so each step uses the fallback shape: a Col wrapper inside Flow.Part carries the descriptor. The wrapper Col keeps flex: 1 / minHeight: 0 so the inner body Col's flex: 1 / overflowY: auto continues to size against the layout's flex column context. useRegisterContinueAction usage is unchanged in this commit; the move to a Wizard.Step canContinue prop lands separately. The shared StepLayout file is left on disk (no more imports) and gets removed in a final cleanup commit.
Wires the new ConfigureSSO surface into the layered components shipped in the previous commits: - ConfigureSSO.tsx adopts the new shape — Flow.Part wrap inside Flow.Root for convention parity with OrganizationProfile, an initial load gate at the root that returns a centered spinner inside ConfigureSSOLayout, and a FooterActionsProvider wrap around the layout. The inline ProfileCard / NavBar / Col chrome moves out; ConfigureSSOLayout owns it now. - ConfigureSSOSteps switches its wizard imports from the old wizard/ folder to the new elements/Wizard/ primitive. The declarative step tree shape is preserved. - isLoading is lifted out of ConfigureSSOFlowContext and out of the wizard's context value. The root-level gate handles initial loading; subsequent re-fetches no longer flip the wizard into a loading state in context. ConfigureSSOFooter drops the isLoading-driven disable. - The Wizard primitive no longer imports useConfigureSSOFlow — it's a fully generic primitive at the navigation layer now. - The unused legacy wizard folder also drops its isLoading reads (spinner branch in Body, skeleton in Header, force-disable in Footer) so the typechecker stays clean while it sits on disk. The old wizard/ folder is unused after this commit but stays on disk for a final cleanup commit.
Replaces the route-based wizard primitive with a state-driven version:
- Wizard renders {children} directly. Header, Footer, and step
descriptors all render as siblings inside the wizard scope. The
Switch / Route / useRouter routing layer is gone.
- Wizard.Step is a self-rendering component now: it registers itself
with the parent wizard via useLayoutEffect on mount, then renders
its children only when its id matches the wizard's currentStep.
Inactive steps render null.
- Active-step state is internal — first registered step becomes the
default; goNext / goPrev / goToStep mutate that state. Nested
wizards still bubble to parent.goNext on inner-last-step continue.
- Step descriptors no longer carry a path; navigation is purely by id.
- Footer now reads the deepest wizard's value from reactive context
state (not a ref), so navigation inside a nested wizard re-renders
the Footer and isFirstStep / isLastStep stay in sync.
Also picks up earlier in-flight work in ConfigureSSO: rename
ConfigureSSOLayout to ConfigureSSOCard (the inner Col flex wrapper
was dropped — the body Col on the card scrollbox owns sizing now),
and Header / Steps / Footer mount as siblings inside the wizard
scope so the breadcrumb and footer chrome render alongside the
active step body.
Splits the navbar chrome into ConfigureSSONavbar so the layout composition is more readable. Adds a ConfigureSSOSkeleton that mirrors the live shell — breadcrumb placeholders, centered content spinner, disabled footer buttons — used by the initial-load gate. Drops the orphaned ConfigureSSOCard (replaced by inline ProfileCard.Root + the new navbar component). Adjusts breadcrumb bullet sizing and the separator caret to match the latest visual direction.
iagodahlem
force-pushed
the
iago/configure-sso-layers
branch
from
aee336b to
1e69b19
Compare
- Add elements/ProfileCard with ProfileCardHeader + ProfileCardFooter primitives (semantic <header>/<footer>, border + padding chrome). - ConfigureSSOHeader, ConfigureSSOFooter, and ConfigureSSOSkeleton wrap their content in the new primitives instead of inlining the Flex chrome. - Breadcrumbs primitive trimmed: outer Flex no longer renders its own border / padding (lives in ProfileCardHeader now). Bullet refined — neutralAlpha400 background, foreground-on-completed label color, white check, number wrapped in Text for color contrast. Descriptor placement flagged with TODOs for the cleanup sweep. - Wrap the wizard tree in ConfigureSSOFlowProvider so steps can read enterpriseConnection state. - VerifyDomainStep's placeholder isDisabled commented out for manual step-navigation testing until verification ships.
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
1 participant
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
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change