Repository navigation
Description
The playground's Save button stays enabled after switching from a saved instrument with unsaved changes to an example or template, and anything "saved" there is lost on reload. SaveButton recalculates disabled only while the selected instrument's category is Saved. When the user switches away from a dirty saved instrument, the last value, false, is kept. Save is then enabled on an instrument that cannot be saved. Clicking it writes the edits into the in-memory example through updateSelectedInstrument. The store's merge drops every non-Saved instrument on load, so after a reload the example is back to its original code, even though the click gave every sign of success. The button also stays enabled after the click.
Where
apps/playground/src/components/Header/SaveButton/SaveButton.tsx:13-22:
const [disabled, setDisabled] = useState(true);
const editorFiles = useFilesRef();
const selectedInstrument = useAppStore((store) => store.selectedInstrument);
const updateSelectedInstrument = useAppStore((store) => store.updateSelectedInstrument);
useInterval(() => {
if (selectedInstrument.category === 'Saved') {
setDisabled(isEqual(editorFiles.current, selectedInstrument.files));
}
}, 1000);Reproduce
- Click Create New Instrument and save it as
Mine, then changeindex.ts. Save becomes enabled within a second. - Without saving, select Form Reference in the instrument selector.
- Change Form Reference's
index.ts, click Save, and reload.
Actual: Save is enabled on Form Reference, the click appears to save, and after the reload Form Reference is back to its original code.
Expected: Save is disabled whenever the selected instrument is an example or a template.
Tests
Extract the condition into a helper next to the component and test it in apps/playground/src/components/Header/SaveButton/__tests__/SaveButton.test.ts: it('should disable saving for examples and templates, so a save that cannot persist is never offered').
E2E in testing/src/specs/playground.spec.ts: follow the steps above and assert that the Save button is disabled after switching to Form Reference.
Suggested fix
Recalculate on every tick: setDisabled(selectedInstrument.category !== 'Saved' || isEqual(editorFiles.current, selectedInstrument.files)).
Activity
fix(playground): disable Save for examples and templates