Skip to content

fix(settings): decode JSON-encoded values in settings UI#156

Draft
antosubash wants to merge 1 commit intomainfrom
claude/fix-settings-display-OCpmO
Draft

fix(settings): decode JSON-encoded values in settings UI#156
antosubash wants to merge 1 commit intomainfrom
claude/fix-settings-display-OCpmO

Conversation

@antosubash
Copy link
Copy Markdown
Owner

Summary

Setting values are stored JSON-encoded (e.g. "\"SimpleModule\"", "true", "42") so SettingsService.GetSettingAsync<T>() can JsonSerializer.Deserialize<T> them. The React SettingField rendered the raw stored string, so:

  • Text settings showed up wrapped in literal double quotes ("SimpleModule" instead of SimpleModule).
  • Saving from the UI sent the unencoded value back, breaking the round-trip and making typed reads fail silently.

Changes

modules/Settings/src/SimpleModule.Settings/components/SettingField.tsx:

  • decodeForDisplay(stored, type) — parses the stored JSON and returns the human-readable form per SettingType (Text → string, Number → numeric string, Bool → true/false, JSON → pretty-printed).
  • encodeForStorage(input, type) — re-encodes the user input as JSON before sending to the API so the round-trip survives.
  • Bool toggle now goes through the same encoder.
  • JSON type validates input via JSON.parse before save and surfaces the parser error inline instead of silently posting invalid JSON.
  • Inputs now expose id={definition.key} so the existing <label htmlFor> in SettingGroup/UserSettings actually associates with the control.

Falls back to the raw stored string if JSON.parse fails (handles legacy unencoded data already in the DB).

Test plan

  • npm run check passes (biome + typecheck + page validation).
  • dotnet test modules/Settings/... — 27 existing settings tests pass.
  • Manually load /settings (admin) and /settings/me (user); verify text fields render unquoted, toggles reflect the boolean state, JSON area shows pretty-printed JSON.
  • Edit and save each type; reload the page and confirm the value persists and renders correctly.

Generated by Claude Code

…ettings

Stored setting values are JSON-encoded (e.g. '"SimpleModule"', 'true', '42'),
but SettingField rendered them raw — text inputs showed literal quotes around
the value. Decode based on SettingType for display and re-encode on save so
the round-trip stays consistent with SettingsService<T> deserialization.
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying simplemodule-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4ac1f08
Status: ✅  Deploy successful!
Preview URL: https://5db43ce6.simplemodule-website.pages.dev
Branch Preview URL: https://claude-fix-settings-display.simplemodule-website.pages.dev

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants