feat: disable save button on validation errors + server-side error docs

[mrabbani]

Summary

• Adds hasErrors: boolean to SaveButtonRenderProps so consumers can disable the save button when fields have validation errors
• Adds hasScopeErrors(scopeId) helper to SettingsContextValue for scope-level error checking
• Blocks handleSave internally when the scope has validation errors
• Documents server-side validation error handling with examples (throw { errors: { fieldKey: "message" } } from onSave)
• Adds a dedicated ServerSideValidation story — type "test" as store name and save to see the error flow

Test plan

• Run npm run typecheck and npm run lint — both pass
• Open Storybook → Settings → Default story: enter an invalid value (e.g. zoom level below min) → save button should be disabled
• Fix the value → save button re-enables
• Open ServerSideValidation story → type "test" as store name → save → server error appears on field, save button disables
• Change store name → error clears, save button re-enables

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Server-side validation handling for form submissions with field-level error mapping
  • Save button now disables when validation errors are present (prevents saving until errors cleared)
  • UI exposes per-scope error awareness so save controls reflect scope validation state

• Documentation

  • Updated guides and examples for async validation flows and error handling
  • Added "Server-Side Validation Errors" section describing UI behavior and feedback

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 186cb97f-e6d5-4548-b52c-e1495046e286

📥 Commits

Reviewing files that changed from the base of the PR and between 99d9706 and 2d65247.

📒 Files selected for processing (1)

• src/components/settings/Settings.stories.tsx

---

📝 Walkthrough

Walkthrough

The PR adds per-scope error detection and plumbs a new hasErrors flag into the Settings save flow: SettingsContext gains hasScopeErrors(scopeId), SettingsContent prevents saves when errors exist and passes hasErrors into renderSaveButton, and docs/examples are updated to reflect the API change.

Changes

Cohort / File(s)	Summary
Documentation & Examples CLAUDE.md, DEVELOPER_GUIDE.md, src/DeveloperGuide.mdx, src/components/settings/Settings.mdx	Updated docs and examples to show renderSaveButton({ dirty, hasErrors, onSave }) and the Save button being disabled when hasErrors is true; added server-side validation example and expanded props table.
Type Definitions src/components/settings/settings-types.ts	Added hasErrors: boolean to SaveButtonRenderProps.
Context & State Management src/components/settings/settings-context.tsx	Added hasScopeErrors(scopeId: string): boolean to SettingsContextValue and implemented per-scope error-checking logic.
Component Implementation src/components/settings/settings-content.tsx	Compute hasErrors via hasScopeErrors, prevent save when errors exist, and pass hasErrors into renderSaveButton.
Stories & Demonstrations src/components/settings/Settings.stories.tsx	Added ServerSideValidation story demonstrating async onSave that throws structured server validation errors and shows hasErrors driven disabling of Save button.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Form as Settings Form
    participant Context as SettingsContext
    participant Content as SettingsContent
    participant RenderBtn as renderSaveButton

    User->>Form: Edit fields (may add errors)
    Form->>Context: Update errors state
    User->>Content: Attempts to Save (click)
    Content->>Context: hasScopeErrors(scopeId)?
    Context-->>Content: hasErrors = true/false
    Content->>RenderBtn: renderSaveButton({dirty, hasErrors, onSave})
    RenderBtn-->>User: Render Save (disabled if !dirty || hasErrors)

    alt hasErrors == false and dirty == true
        User->>Content: Click enabled Save
        Content->>Content: handleSave checks !hasErrors
        Content->>Context: invoke onSave(...)
        Content-->>User: Save completes
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix: update onSave to pass nested tree values and handle save errors #65: Changes the settings error/save plumbing and server-side error merging in the same settings-context / save-flow areas.

Poem

🐰 I hopped through code with careful paws,

hasErrors tucked into Save's laws.
The button waits till fields are right,
then I thump joy into the night. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: adding hasErrors support to disable the save button on validation errors, plus documentation for server-side error handling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/save-button-validation-errors

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}