Creating from pasted YAML within 300ms of an edit saves the previous version

Depends on #4848. However issue was possibly present before this epic.

User story

As someone importing a workflow from YAML, I want the workflow that gets created to be the one I can see in the editor, so that I don't silently end up with something I already replaced.

Details

In the YAML import modal, paste workflow A, wait for it to validate, then paste workflow B and press Create within 300ms. Workflow A is persisted while the editor shows B. There is no error and nothing visibly wrong — the user finds out later, if at all.

Reproduced by hand on 2026-07-27, by temporarily widening the debounce from 300ms to 3000ms to make the window hittable. Workflow A was created while the editor displayed B. At the shipped 300ms the window is about a third of a second, so this is easy to miss when testing and easy to hit when pasting quickly.

Mechanism. In assets/js/collaborative-editor/components/YAMLImportModal.tsx, pasting new content calls handleYAMLChange (:104), which sets yamlContent and schedules the debounce — but resets neither importState nor validatedState. The Create button is enabled whenever importState === 'valid' (:133-137), so it stays live, and handleSave (:116) reads validatedState directly and never re-parses. For the whole debounce window the button offers to create content the editor is no longer showing.

setImportState('parsing') — the thing that would disable the button — sits inside the debounced body at :80, so it doesn't run until 300ms after the last keystroke.

Related, and fixed by the same change: setImportState('parsing') (:80) and setImportState('valid') (:85) run in the same synchronous callback, so React batches them and 'parsing' never renders. The spinner at :205 gated on that state is currently dead code; hoisting the call out of the debounce makes both the disable and the spinner real.

Provenance: pre-existing — carried over from main's YAMLImportPanel, not introduced by the #4848 epic. Filed now because the import path is more prominent in the new landing screen than it was as a left-hand panel.

A second bug in the same file has the same shape and is worth fixing in the same sitting. The mode toggle (:160) — setMode(mode === 'upload' ? 'paste' : 'upload') — clears none of yamlContent / validatedState / importState / errors. Paste valid YAML, then switch to Upload: the editor is unmounted but Create is still enabled and will create from content you can no longer see. Mirror case: paste errors stay rendered under the dropzone. Same root cause as the debounce race — state that survives an input change that should have invalidated it.

Implementation notes

The main fix is three lines: hoist setImportState('parsing') out of the debounced body so the button disables the moment the content changes. Belt and braces would be to have handleSave re-parse rather than trust validatedState.

The mode toggle wants the same treatment — reset validation state when the input source changes.

Release notes

Fixed a bug where creating a workflow immediately after editing pasted YAML could create the previous version instead.

User acceptance criteria

• Paste A, wait for validation, paste B, press Create within 300ms → workflow B is created. (Equivalently: Create is disabled until validation of B completes.) Easiest way to verify by hand is to widen the debounce to 3000ms temporarily.
• Switching between Upload and Paste clears content, validation state and errors.
• A regression test covers the debounce race.

Start in assets/js/collaborative-editor/components/YAMLImportModal.tsx at handleYAMLChange, handleSave, the debounced validation callback, and the mode toggle. Reproduce the A-then-B paste sequence and the Upload/Paste switch, then verify the Create button and spinner states. Done means B is created, switching modes clears content and validation errors, and a regression test covers the debounce race.