Switching instruments in the playground silently discards unsaved edits #1767

Activity

1. joshunrau

   added

   Priority: MediumReal value; schedule normallyReal value; schedule normally

   EnhancementType: an improvement to an existing feature, including performanceType: an improvement to an existing feature, including performance

   Difficulty: MediumStraightforward change, about a day or lessStraightforward change, about a day or less

   Area: Playgroundapps/playground (in-browser instrument editor)apps/playground (in-browser instrument editor)

   on Oct 7, 2026
2. joshunrau commented on Oct 26, 2026

   

   joshunrau

   on Oct 26, 2026

   CollaboratorAuthor

   More actions

   Still reproduces on main (d86740e). No commit since this was filed touches the switch path.

   Land after

   • fix: resolve 26 low-difficulty issues, one commit each #1825. It fixes Deleting a saved instrument leaves its files in the playground editor while the selector switches to Unilingual Form #1740: removeInstrument resets selectedInstrument but leaves the deleted instrument's files (instrument.slice.ts:19-24), so the unsaved-changes predicate below is true with no edits and the next switch would prompt. It also adds SaveButton/is-save-disabled.ts (The playground Save button stays enabled after switching to an example, and the save is lost on reload #1754) and store/slices/__tests__/instrument.slice.test.ts to build on. Its The playground Save button stays enabled after switching to an example, and the save is lost on reload #1754 e2e, should disable Save after switching from an edited saved instrument to an example, edits and then switches, so it has to pick Discard in the new dialog.
   • After a reload, the playground shows the default template's files under the selected saved instrument, and Save overwrites it #1737. After a reload with a saved instrument selected, files is the template's while selectedInstrument is the saved instrument, so the predicate is true with no edits. Every switch and every further reload would prompt, and the dialog's Save would write the template over the instrument.
   • Playground something duplicates index.html when saving an instrument with index.html and reopening #932. updateSelectedInstrument deep-merges files with lodash merge (instrument.slice.ts:52-58). After a file is deleted and saved, the saved list keeps an extra entry, never equals the editor's again, and every later switch prompts.
   • Opening a second share link in the same playground tab deletes the instrument imported from the first link #1744 and Reloading a playground share link after editing its instrument adds a new copy on every load and switches away from the edits #1745. The share import's effect cleanup removes the instrument it imported (IndexPage.tsx:76-80). If the user is editing that instrument and pastes a second link, the cleanup runs before the new import switches, and with fix: resolve 26 low-difficulty issues, one commit each #1825 removeInstrument loads the template without asking. Once Opening a second share link in the same playground tab deletes the instrument imported from the first link #1744 drops the cleanup, their importSharedInstrument action can call the guarded setSelectedInstrument as is.

   Put the guard in the store

   Wrapping three call sites leaves the next caller unguarded.

   • Export selectHasUnsavedChanges (!isEqual(state.files, state.selectedInstrument.files)) and define isSaveDisabled as category !== 'Saved' || !hasUnsavedChanges. SaveButton can then subscribe to it and drop the 1 s useInterval (SaveButton.tsx:18-22).
   • Make setSelectedInstrument itself guarded: when the switch would discard edits, it sets pendingInstrumentId and returns. One dialog mounted in IndexPage resolves it with cancel, discard, or save-then-switch. merge (After a reload, the playground shows the default template's files under the selected saved instrument, and Save overwrites it #1737), removeInstrument, resetInstruments and the dialog's confirm load through an unguarded loadInstrumentIntoEditor(state, instrument), generalising fix: resolve 26 low-difficulty issues, one commit each #1825's loadDefaultInstrument. InstrumentSelector.tsx then needs no change, so this does not conflict with fix(playground): search instruments by label #1817.
   • Picking the instrument that is already selected also reverts its edits today, because setSelectedInstrument reloads its stored files. Make the same id a no-op.
   • "Would discard edits" must also require the target's files to differ from the editor's. Otherwise Create New Instrument prompts: CloneButton.tsx:30-31 adds an instrument holding the editor's files and switches to it while the old selection is still dirty.
   • Upload Archive and the share import add the instrument before switching, so cancelling keeps the new instrument in the list and loses nothing. Delete Instrument and Restore Defaults already confirm.
   • Save-as-new for examples and templates needs a label and the uniqueness check in CloneButton.tsx:64-72. Reuse that form, or ship cancel/discard/save first.
   • files is never persisted (partialize), so beforeunload is the only protection on reload for every category.
   • New strings use t({ en, fr }), like the rest of the playground.

   Tests

   instrument.slice.test.ts:

   • it('should hold a switch that would discard edits as pending, so the editor keeps them until the user decides')
   • it('should switch without asking when the target holds the editor files, so Create New Instrument never prompts')
   • it('should keep the edits when the selected instrument is selected again, so picking it in the selector reverts nothing')
   • it('should save the edits before switching when a pending switch is confirmed with save')

   Fold the is-save-disabled.test.ts cases into the selector's tests.

   The beforeunload hook needs a // @vitest-environment happy-dom test, as in apps/gateway. On main the playground has no happy-dom or @testing-library/react devDependency; #1660 adds both, so land after it rather than adding them here.

   E2E in testing/src/specs/playground.spec.ts, besides the issue's case:

   • Create New Instrument after an edit shows no dialog.
   • After an edit, page.close({ runBeforeUnload: true }) raises a beforeunload dialog (as Gateway lets a patient reload or leave mid-instrument without warning, discarding every unsaved answer #1726 proposes for the gateway).

   #1825's Save test types into Monaco inline (click .monaco-editor .view-lines, then page.keyboard.type). Move that into a PlaygroundPage method. #1817 and #1660 both edit that page object and this spec.

   _{Triage note written with Claude Code. Code references point at main @ d86740e.}