feat(site/src/pages/TemplateBuilder): keep Continue button enabled with inline validation - #28940
Conversation
Review notesI checked out the branch and ran the frontend checks against the diff:
The core mechanism is clean: dropping the A few findings: 1. Dead branch in 2. useEffect(() => { setShowContinueError(false); }, [currentStep.id]);FE8 says use 3. Required Nothing blocking — #1 is the only one I'd suggest addressing before merge. Generated by Coder Agents on behalf of @jeremyruppel. |
The template builder Continue button was disabled until the current step's requirements were met, which left users guessing why they could not advance. Keep the button enabled at all times and, when the step is incomplete, surface a red validation message explaining what is missing instead of advancing.
…nk error text Use a 12px (text-xs) font for the Continue validation message and outline the required input fields that block continuation in red when the user tries to advance an incomplete step.
Remove the unreachable customizations branch from continueErrorMessage (the final step renders Create Template, not Continue) and replace the step-change reset effect with a render-time state adjustment that tracks the active step.
Co-authored-by: Andrew Aquino <[email protected]>
Co-authored-by: Andrew Aquino <[email protected]>
Co-authored-by: Andrew Aquino <[email protected]>
…essage Clarify the helper name so it reads as "get a continue-error-message".
1e84f6c to
35ac744
Compare
3 participants
Summary
On the template builder (
/templates/new/builder), the Continue button was disabled until the current step's requirements were met, leaving users with no explanation for why they could not advance.This PR keeps the Continue button enabled at all times. When the current step is incomplete, clicking Continue no longer advances; instead it:
Changes
disabled={!canContinue}guard from the Continue button so it is always clickable.handleNextblocks navigation when the step is incomplete and reveals the red validation message instead.continueErrorMessage(stepId)with a step-specific reason (base template not selected, required parameters/module settings missing, no provisioner online).text-xs) font.aria-invalid+border-border-destructive). Optional fields are unaffected.TemplateBuilderPageView(Continue stays enabled, message appears then clears),BaseTemplateParametersStepandModuleSettingsStep(required field flagged invalid when empty).The final-step "Create Template" button keeps its existing provisioner-based disable behavior; this change is scoped to the Continue button as requested.
Visual proof
Base template step (
?step=base-infra), no base selected:Module settings step (
?step=module-settings) — required field outlined in red with the 12px message on Continue:Testing
pnpm check,pnpm lint,pnpm lint:types,pnpm formatpass.vitest --project=storybookfor the three step/page stories).Implementation notes
Requirement: "for the template builder (
/templates/new/builder) always keep the continue button enabled. If the requirements to continue are not met, show the error in red." Follow-up: "use 12px for the font size for the error message and highlight the input fields that cause the error with a red outline if applicable."Approach:
disabledprop.handleNext: whencanContinueis false, set a localshowContinueErrorflag and return instead of navigating.text-content-destructive), 12px (text-xs) validation message below the nav controls whenshowContinueError && !canContinue.showContinueErrorinto the step renderers asshowErrors; the base-parameters and module-settings steps mark each required-but-empty field'sfield.error, whichFormFieldrenders asaria-invalidplus a red border.continueErrorMessage(stepId).This PR was generated by Coder Agents on behalf of @chrifro.