feat: add explicit json apply actions - #38
Conversation
There was a problem hiding this comment.
Pull request overview
Adds explicit “apply” actions to same-draft JSON editors so users can intentionally sync valid JSON edits into the paired visual/fields editor, and updates documentation and E2E coverage to reflect the standardized flow.
Changes:
- Add “Apply to Visual Editor” for Payload JSON drafts in
FormJsonTabs. - Add “Apply to Fields” for Plugin JSON drafts in the plugin editor drawer.
- Extend Playwright E2E coverage and document the same-draft apply pattern.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/components/form/FormJsonTabs.tsx |
Introduces applyJsonToForm + explicit “Apply to Visual Editor” action and reuses it during tab switching. |
src/components/form-slice/FormItemPlugins/PluginEditorDrawer.tsx |
Introduces applyJsonToFields + explicit “Apply to Fields” action and reuses it during tab switching. |
e2e/tests/resource-required-templates.spec.ts |
Adds assertions that form edits propagate to JSON drafts and that “apply” actions switch back to the paired editor. |
docs/design/json-editor-standard.md |
Documents the explicit apply action standard for same-draft JSON editors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const applyJsonToForm = useCallback(() => { | ||
| try { | ||
| const parsed = JSON.parse(jsonStr || '{}') as Record<string, unknown>; | ||
| const sanitizedParsed = rawData ? stripSystemReadonlyFields(parsed) : parsed; | ||
| form.reset(sanitizedParsed, { keepDefaultValues: true }); | ||
| setJsonTabDirty(false); | ||
| setJsonError(null); | ||
| void form.trigger(); | ||
| return true; | ||
| } catch (e) { | ||
| setJsonError('Invalid JSON: ' + String(e)); | ||
| return false; | ||
| } |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 913aed1c31
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| try { | ||
| const parsed = JSON.parse(jsonStr || '{}') as Record<string, unknown>; | ||
| const sanitizedParsed = rawData ? stripSystemReadonlyFields(parsed) : parsed; | ||
| form.reset(sanitizedParsed, { keepDefaultValues: true }); |
There was a problem hiding this comment.
In create flows that pass a createJsonTemplate (routes, services, upstreams), this reset() clears formState.touchedFields. After a user edits Payload JSON, clicks the new Apply button, and then opens Payload JSON again without touching a visual field, handleTabChange still treats the form as untouched and rewrites jsonStr from the minimal template, discarding the JSON payload they just applied. Mark the form as no longer template-initial or preserve touched state after applying JSON so the next JSON tab render serializes form.getValues() instead of the template.
Useful? React with 👍 / 👎.
Summary
Apply to Visual Editoraction for Payload JSON drafts.Apply to Fieldsaction for Plugin JSON drafts.Verification