Switching instruments in the playground silently discards unsaved edits

Abierto
  • ¿Algo no está bien?
#1,767 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
75/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
119
Forks
19
Merge medio
4 d 15 h
PR fusionados (30 d)
38

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de DouglasNeuroInformatics/OpenDataCapture

Todos los issues de DouglasNeuroInformatics/OpenDataCapture

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.