feat(site/src/pages/TemplateBuilder): make sidebar steps navigable - #28153
Open
aqandrew wants to merge 2 commits into
Open
feat(site/src/pages/TemplateBuilder): make sidebar steps navigable#28153aqandrew wants to merge 2 commits into
aqandrew wants to merge 2 commits into
Conversation
Make the SelectionSummary step labels and the selected base-template row clickable jump targets, matching the already-navigable module rows. Add a maxReachedGroup back-stack so completed steps stay green and clickable after navigating backward, and gate clickability on it. The base-template row jumps to base-parameters, falling back to base-infra when that step is skipped.
aqandrew
marked this pull request as ready for review
August 13, 2026 20:43
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.
What
Makes the remaining
SelectionSummarysidebar elements clickable jump targets on/templates/new/builder, continuing the work from #27351 (which made module rows navigable).Clickable now:
Base Templatelabelbase-infrabase-parameters(falls back tobase-infrawhen that step is skipped)Moduleslabelmodule-selectmodule-settings+ scroll (already shipped in #27351)CustomizationslabelcustomizationsBack-stack behavior
The sidebar previously colored groups purely from the current step, so jumping backward would grey out and disable steps you had already reached. This adds a
maxReachedGroupthat never shrinks on backward navigation:complete(green) and clickable, like a browser back-stack.upcomingand inert (no button, no hover, not focusable).maxReachedGroup, not the current step, so it stays green after navigating backward.Clickability is gated on
maxReachedGroup(you can only jump to steps you have already reached).Changes
SelectionSummary.tsx: new requiredmaxReachedStepandonNavigateStepprops. Split the singlevariant()intoindicatorVariant(label circle),dividerVariant(connecting line), and areachable()gate.StepIndicatorandBaseTemplateSelectionrender as<button>(hover + focus ring,aria-label) when a reachable handler is supplied, else stay inert.TemplateBuilderPageView.tsx: trackmaxReachedGroup; addnavigateToStepId(stepId)that resolves skipped steps vianearestVisible(sobase-parametersfalls back tobase-infra) and mirrors the existing customizations reset when leaving that step. Wire both new props intoSelectionSummary.SelectionSummary.stories.tsx: addonNavigateStepto meta andmaxReachedStepto existing stories; addNavigationClicks(asserts each label/base/module callback),BackwardNavigation(dividers stay green), andUpcomingStepsInert(steps above max-reached are not buttons).Out of scope
Everything else from #27077 stays out: gallery height, sensitive-var banner relocation, trash-icon wiring, and the scroll-past required-field subsystem.
Testing
pnpm check(biome) cleanpnpm lint:types(tsc) cleanpnpm vitest run --project=storybook src/pages/TemplateBuilder— 37 passpnpm vitest run --project=unit src/pages/TemplateBuilder— 55 passImplementation plan / decision log
Origin
This is the remainder of PR #27077's item #2 (navigable selection summary), rebased onto current
mainafter #27351 shipped the module-row navigation.Why a
maxReachedGroupback-stackfurthestAllowedIndex(state)on currentmainis all-or-nothing (0 without a base selected, otherwise the last step), so it cannot express "how far the user has progressed" for the sidebar coloring. A monotonicmaxReachedGroup(bumped when the current group advances, never shrunk) is needed to keep completed steps green and clickable after backward navigation, matching #27077.Decisions
maxReachedGroup(only jump to steps already reached), rather than the looserfurthestAllowedIndex(which would let users skip required steps once a base is chosen).base-parametersand letnearestVisiblefall back tobase-infrawhen the base has no parameters/prerequisites.onNavigateModulepassed directly (not re-gated on reachability), since a module can only be selected after reaching group 2, soreachable(2)is always true when module rows render. This preserves the earlier decision to keep the module row's handler required with no inert branch.Coder Agents generated, on behalf of @aqandrew.