feat(site/src/pages/TemplateBuilder): scroll to module when clicking sidebar row - #27351
Merged
Conversation
…sidebar row Make each selected module row in the SelectionSummary sidebar a jump target. Clicking a module switches to the module settings step and scrolls that module's card into view via a module-config-<id> anchor. When the module settings step is skipped (no configurable variables), the click is a no-op.
aqandrew
marked this pull request as draft
July 20, 2026 20:14
The sidebar always receives a navigation handler in practice, so make onNavigateModule required and drop the untested non-interactive module row branch.
aqandrew
marked this pull request as ready for review
July 20, 2026 21:32
jeremyruppel
reviewed
Aug 5, 2026
…dule Replace the module-config DOM id lookup with a ref registry. The parent owns a useRef(new Map()) and passes a registerModuleRef callback down to ModuleSettingsStep, which attaches it via a callback ref on each module wrapper. Addresses PR review feedback.
jeremyruppel
approved these changes
Aug 6, 2026
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
What
Clicking a selected module in the right-hand
SelectionSummarysidebar now jumps to the module settings step and scrolls that module's card into view.Addresses DEVEX-587. This is an isolated slice of #27077 (which bundles several unrelated changes); only the "click a module to scroll to it" behavior is included here.
Changes
SelectionSummary: gains an optionalonNavigateModuleprop. When provided, each selected module row renders as an accessible<button>(hover + focus-ring) labeledConfigure <name>; otherwise rows stay non-interactive.ModuleSettingsStep: each module card wrapper gets a stableid={module-config-<id>}scroll anchor plusscroll-mt-24so the sticky top nav does not cover the title.TemplateBuilderPageView: addsnavigateToModule, which switches to the module settings step and scrolls the target module into view once it renders. If the module settings step is skipped (no configurable variables), the click is a no-op.SelectionSummary.stories: adds aNavigateModuleClickinteraction story and updatesWithLongNameModuleto the new button semantics.Explicitly out of scope
The rest of #27077 is not included: gallery height/card clamp, sensitive-var banner relocation, trash-icon removal wiring, the scroll-past required-field highlight subsystem, and the broader navigable-sidebar work (step labels, base-row navigation, back-stack semantics).
Testing
pnpm check(biome) cleanpnpm lint:types(tsc) cleanpnpm vitest run --project=unit src/pages/TemplateBuilder— 46 passpnpm vitest run --project=storybook src/pages/TemplateBuilder— 34 pass (incl. newNavigateModuleClick)Implementation plan / decision log
Goal
Open a new PR containing only the changes that satisfy DEVEX-587: clicking a selected module in the right-hand
SelectionSummarysidebar should jump to the module settings step and scroll that module's card into view.Base has moved since #27077
PR #27077 was cut against an older
main. Today'smainwas refactored:steps.tsalready providesStepId, per-stepgroup(1/2/3), andnearestVisible().TemplateBuilderPageViewalready hasnavigateToStep(index: number)and auseEffectthat resets window scroll on everycurrentStep.idchange.main, so module navigation can be added without removing behavior and without pulling in the trash-icon item.So the isolated diff was written against current
main, not reused verbatim from the PR. It is smaller than the PR's own hunks and does not includemaxReachedStep, step-label navigation, or base-row navigation.Decisions
module-settingsstep is skipped and clicking a module row does nothing (there is no card to scroll to).Scroll timing
navigateToSteptriggers a window scroll reset via an existing effect keyed oncurrentStep.id. To cooperate,navigateToModulestores the target module id in a ref and a follow-up effect (declared after the scroll-reset effect, so it runs second) callsscrollIntoViewinsiderequestAnimationFrameoncemodule-settingshas rendered. When already onmodule-settings, it scrolls immediately.Follow-up (deferred): full navigable sidebar
Not part of this PR, documented for later. The remainder of #27077's item #2, rebased onto current
main:onNavigateStep?: (stepId: StepId) => voidonSelectionSummary.Base Template->base-infra,Modules->module-select,Customizations->customizations.base-parameters(fall back tobase-infrawhen that step is skipped for the chosen base).maxReachedStepprop so steps at or below the furthest-reached group staycompleteand clickable even after navigating backward, while strictly-higher groups render as inertupcoming.StepIndicatorandBaseTemplateSelectionrender as<button>when a navigation handler is supplied, else stay inert.NavigationClicks,BackwardNavigation, andUpcomingStepsInert.Coder Agents generated, on behalf of @aqandrew.