Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Switching instruments in the playground silently discards unsaved edits

Aperta
  • Qualcosa non va?
#1,767 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
75/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with apps/playground/src/store/slices/instrument.slice.ts and its tests in apps/playground/src/store/slices/__tests__/instrument.slice.test.ts; trace how editor files differ from the selected instrument. Then inspect apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx and the E2E coverage in testing/src/specs/playground.spec.ts. Done means switching or reloading with unsaved edits prompts appropriately, and canceling a switch preserves the edit.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Area: Playground Difficulty: Medium Enhancement Priority: Medium

Switching instruments in the playground silently discards unsaved edits. setSelectedInstrument replaces files with the chosen instrument's stored files, and nothing checks for unsaved changes first. The instrument selector, share-link import and Upload Archive all switch this way, and there is no beforeunload guard for reloads. The playground opens on the Unilingual Form template, which cannot be saved. A user who builds an instrument there and then opens an example to look something up loses all of that work with no warning. Unsaved edits to a saved instrument are reverted the same way. The app already tracks this state: the Save button is enabled exactly when a saved instrument has unsaved changes.

Where

apps/playground/src/store/slices/instrument.slice.ts:37-51:

setSelectedInstrument: (id) => {
  set((state) => {
    const instrument = state.instruments.find((item) => item.id === id);
    // ...
    state.selectedInstrument = instrument;
    state.files = instrument.files;

apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx:53-56:

onSelect={(id) => {
  setSelectedInstrument(id);
  setOpen(false);
}}

Reproduce

  1. Open the playground (Unilingual Form is selected) and make several changes to index.ts.
  2. Select Form Reference in the instrument selector, then select Unilingual Form again.

Actual: the changes are gone, and no warning was shown.
Expected: before discarding, the playground asks whether to keep editing, save (for a saved instrument), create a new instrument from the edits, or discard them. It shows the same browser prompt on reload while there are unsaved edits.

Tests

apps/playground/src/store/slices/__tests__/instrument.slice.test.ts: it('should report unsaved changes when the editor files differ from the selected instrument, so switching can ask before discarding them'), for a new hasUnsavedChanges selector that the Save button and the confirmation share.

E2E in testing/src/specs/playground.spec.ts: edit index.ts, pick another instrument, assert that the confirmation appears, cancel it, and assert that the edit is still in the editor.

Suggested fix

Add a hasUnsavedChanges selector (editor files differ from selectedInstrument.files). Route every instrument switch through a confirmation dialog when it is true, offering Create New Instrument for examples and templates and Save for saved instruments. Register a beforeunload handler while it is true.

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
1g 2h
PR unite (30g)
56

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.