aws / aws/graph-explorer

Style dialog form-schema foundation and buffered save/cancel/reset

Open
#1,883 1 comment 0 reactions 0 assignees View on GitHub
enhancement internal ready-for-agent tech debt
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
6d 8h
Merged PRs (30d)
5

Description

## What to build

Shift the style dialog's **foundations** — the form architecture and the edit model — without changing its visual layout. A separate spike covers the eventual visual redesign; this slice makes the plumbing right so the Default dialog (next slice) can build on it.

- A `useStyleForm`-style module: Zod schema as the single source of truth (the visual-style type is derived from it via `z.infer`), react-hook-form wired with `standardSchemaResolver`, resolved-cascade values as defaults, and an injected write target. Validate real constraints (opacity range, non-negative widths, enum shapes/line/arrow styles).
- Extract a shared `` / `` component (resolved-style in, patch out) so the visual field rendering lives once and the Default dialog can reuse it. The per-type dialog composes it plus the attribute/label fields.
- Switch from **live per-field commit to buffered save/cancel/reset**: the dialog holds edits in form state and applies them only on Save; Cancel discards; Reset returns to the resolved baseline. This is now possible because the live `NodePreview`/`EdgePreview` (from the preview slice) shows changes as you edit, so the graph no longer needs to mutate on every keystroke. Delete the legacy debounce/`usePrevious`/`useEffect` sync dance.
- Mount the live preview at the top of the dialog, driven by the buffered form state.

Keep the existing visual layout — field groupings, controls, and styling stay as-is. Only the form wiring and the commit model change.

## Acceptance criteria

- [ ] A shared form module drives the dialog; the visual-style type is derived from its Zod schema
- [ ] `` / `` extracted and used by the per-type dialog
- [ ] Field validation rejects out-of-range/invalid values with inline feedback
- [ ] Save applies buffered edits; Cancel discards; Reset returns to the resolved baseline
- [ ] The legacy debounce/usePrevious live-commit sync is removed
- [ ] The dialog shows a live preview reflecting buffered (unsaved) edits
- [ ] `pnpm checks` and `pnpm test` pass

## Blocked by

- Blocked by the node/edge preview slice (the dialog mounts the preview, and buffered editing depends on it for feedback).

> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.

Contributor guide

Open the contributing guide

Research direction

Start by locating the existing style dialog entry points, the live NodePreview and EdgePreview components, and the legacy debounce/usePrevious/useEffect synchronization. Trace how resolved cascade values enter the dialogs and how edits are currently committed. Done means shared buffered form behavior, validation, extracted visual fields, live unsaved previews, and passing pnpm checks and pnpm test; the issue notes that it is internal-only and not accepting external contributions.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.