feat: Add YAML import when creating a Canvas#3076
feat: Add YAML import when creating a Canvas#3076harxhist wants to merge 3 commits intosuperplanehq:mainfrom
Conversation
Signed-off-by: Harsh <harxhist@gmail.com>
|
You have run out of free Bugbot PR reviews for this billing cycle. This will reset on February 12. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
Signed-off-by: Harsh <harxhist@gmail.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| </Field> | ||
| </div> | ||
| {showYamlTab ? ( | ||
| <Tabs value={activeTab} onValueChange={setActiveTab}> |
There was a problem hiding this comment.
Modal doesn't clear imported YAML state on tab switch
Medium Severity
In CreateCanvasModal, the Tabs onValueChange is just setActiveTab, unlike CreateCanvasPage which also clears importedSpec, yamlText, and yamlError when switching back to "manual". If a user imports YAML (setting importedSpec), then switches to the manual tab and selects a template, handleSubmit still passes the stale importedSpec?.nodes and importedSpec?.edges. Since those are truthy arrays, the template lookup in useCreateCanvasModalState is skipped (!nodes && !edges is false), silently ignoring the user's template selection.
Additional Locations (1)
| } | ||
| }, | ||
| [applyParsedYaml], | ||
| ); |
There was a problem hiding this comment.
Duplicated YAML import logic across two components
Low Severity
The applyParsedYaml, handleYamlParse, and handleFileUpload callback functions are virtually identical between CreateCanvasPage and CreateCanvasModal. The YAML tab UI (textarea, parse button, upload button, success/error messages) is also duplicated. This led to the tab-switch reset bug existing in only one of the two copies. Extracting a shared hook or component would reduce divergence risk.
Additional Locations (1)
Signed-off-by: Harsh <harxhist@gmail.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| setYamlText(e.target.value); | ||
| if (yamlError) setYamlError(""); | ||
| }} |
There was a problem hiding this comment.
Stale parsed data submitted after YAML text edits
Medium Severity
The YAML textarea's onChange handler clears yamlError but not importedSpec. After a successful parse, if the user edits the YAML text, importedSpec still holds the old parsed nodes/edges, the "Parsed successfully" message remains visible, and the submit button stays enabled. Submitting sends the stale parsed data rather than reflecting the user's modifications.
Additional Locations (1)
|
@shiroyasha |
2 participants
Summary
Closes #1725
Adds the ability to create a Canvas by importing from a YAML file on the Create Canvas page (
/canvases/new).parseCanvasYaml.ts) that accepts both:apiVersion/kind: "Canvas")CreateCanvasAPI already supports a full canvas spec with nodes and edges.Video Demo: Loom
How it works
The user selects the "Import from YAML" tab, then either:
.yaml/.ymlfileClicking "Parse YAML" (or uploading a file):
These are passed through the existing
useCreateCanvasmutation on submit.The YAML format matches:
superplane get canvas)What changed
web_src/src/utils/parseCanvasYaml.tsweb_src/src/components/CreateCanvasModal/index.tsxCanvasFormFieldssubcomponent, extended submit data type with optionalnodes/edgesweb_src/src/pages/home/useCreateCanvasModalState.tsxonSubmitto pass through YAML-importednodes/edges, falling back to template lookupweb_src/src/pages/canvas/CreateCanvasPage.tsxTests
CreateCanvasAPI