Improve handling of save new, overwrite, wipe all

Author: alex-rawlings-yyc

src/__tests__/components/modals/SaveAsProjectModal.test.tsx

@@ -200,4 +200,57 @@ describe('SaveAsProjectModal', () => {
     await waitFor(() => expect(screen.queryByText('Unnamed')).not.toBeInTheDocument());
     expect(screen.getByText('French glosses')).toBeInTheDocument();
   });
+
+  it('disables the save-as-new button while a save is in flight to block duplicate submits', async () => {
+    let resolveSave: () => void = () => {};
+    const onSaveNew = jest.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSave = resolve;
+        }),
+    );
+    render(<SaveAsProjectModal {...defaultProps} onSaveNew={onSaveNew} />);
+
+    // Let the mount's project-list load settle before interacting, so its state update is flushed.
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Cancel' })).not.toBeDisabled());
+
+    const saveButton = screen.getByTestId('save-as-new');
+    await userEvent.click(saveButton);
+
+    // While the save promise is pending the button is disabled, so the user cannot submit again.
+    expect(saveButton).toBeDisabled();
+    expect(onSaveNew).toHaveBeenCalledTimes(1);
+
+    // Resolving the save re-enables the button (this unit test keeps the modal mounted).
+    resolveSave();
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+  });
+
+  it('ignores an error from a project-list load that a newer load has superseded', async () => {
+    let rejectFirst: (reason: unknown) => void = () => {};
+    mockSendCommand
+      .mockImplementationOnce(
+        () =>
+          new Promise((_resolve, reject) => {
+            rejectFirst = reject;
+          }),
+      )
+      .mockResolvedValue(JSON.stringify([STUB_PROJECT_2]));
+
+    const { rerender } = render(<SaveAsProjectModal {...defaultProps} />);
+
+    // Supersede the first (still-pending) load by changing the source before it settles.
+    rerender(<SaveAsProjectModal {...defaultProps} sourceProjectId="src-proj-2" />);
+    await waitFor(() => expect(screen.getByText('French glosses')).toBeInTheDocument());
+
+    // Fail the stale first load: because it has been superseded, it must not log or notify.
+    rejectFirst(new Error('stale failure'));
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+
+    expect(logger.error).not.toHaveBeenCalled();
+    expect(papi.notifications.send).not.toHaveBeenCalled();
+    expect(screen.getByText('French glosses')).toBeInTheDocument();
+  });
 });

src/components/InterlinearizerLoader.tsx

@@ -276,9 +276,10 @@ function InterlinearizerLoaderInner({
     if (wipeConfirm === 'book') {
       /* v8 ignore next -- wipe-book is only offered once a book is loaded */
       if (book) wipeBook(book.bookRef);
-    } else {
-      wipeAll();
     }
+    // Match 'all' explicitly rather than via an else, so a future wipe scope can't fall through to
+    // the destructive whole-draft wipe.
+    if (wipeConfirm === 'all') wipeAll();
     setWipeConfirm(undefined);
   }, [wipeConfirm, book, wipeBook, wipeAll]);
 

src/components/modals/SaveAsProjectModal.tsx

@@ -54,8 +54,8 @@ export function SaveAsProjectModal({
   sourceProjectId: string;
   defaultName?: string;
   defaultDescription?: string;
-  onSaveNew: (name?: string, description?: string) => void;
-  onOverwrite: (project: InterlinearProjectSummary) => void;
+  onSaveNew: (name?: string, description?: string) => void | Promise<void>;
+  onOverwrite: (project: InterlinearProjectSummary) => void | Promise<void>;
   onClose: () => void;
 }>) {
   const [localizedStrings, stringsLoading] = useLocalizedStrings(SAVE_AS_MODAL_STRING_KEYS);
@@ -65,6 +65,15 @@ export function SaveAsProjectModal({
   const [projects, setProjects] = useState<InterlinearProjectSummary[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  /**
+   * True while a save (new or overwrite) is in flight; disables the save controls to block
+   * re-submits.
+   */
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  // Ref mirror of `isSubmitting` so a submit handler can short-circuit a second invocation
+  // synchronously, before the re-render that disables the button lands (guards programmatic races).
+  const isSubmittingRef = useRef(false);
+
   /** The existing project pending an overwrite confirmation, or `undefined`. */
   const [confirmOverwrite, setConfirmOverwrite] = useState<InterlinearProjectSummary | undefined>(
     undefined,
@@ -96,6 +105,9 @@ export function SaveAsProjectModal({
         throw new TypeError('getProjectsForSource did not return an array');
       setProjects(parsed.filter(isInterlinearProjectSummary));
     } catch (e) {
+      // Ignore a failure from a load that a newer one has superseded (mirrors the success-path stale
+      // guard above) so a stale rejection cannot fire a spurious error notification.
+      if (gen !== loadGenRef.current) return;
       logger.error('Interlinearizer: failed to load projects for Save As', e);
       await papi.notifications
         .send({ message: '%interlinearizer_error_load_projects_failed%', severity: 'error' })
@@ -109,11 +121,46 @@ export function SaveAsProjectModal({
     loadProjects();
   }, [loadProjects]);
 
-  /** Saves the draft as a new project with the trimmed name/description (blank fields → undefined). */
-  const handleSaveNew = useCallback(() => {
-    onSaveNew(name.trim() || undefined, description.trim() || undefined);
+  /**
+   * Saves the draft as a new project with the trimmed name/description (blank fields → undefined),
+   * blocking re-entry while the save is in flight so a double-click cannot create duplicate
+   * projects.
+   */
+  const handleSaveNew = useCallback(async () => {
+    /* v8 ignore next -- button is disabled while submitting; ref guards against programmatic races */
+    if (isSubmittingRef.current) return;
+    isSubmittingRef.current = true;
+    setIsSubmitting(true);
+    try {
+      await onSaveNew(name.trim() || undefined, description.trim() || undefined);
+    } finally {
+      isSubmittingRef.current = false;
+      setIsSubmitting(false);
+    }
   }, [name, description, onSaveNew]);
 
+  /**
+   * Overwrites the chosen existing project with the draft, blocking re-entry while the save is in
+   * flight so a double-click cannot fire the overwrite (or another save) twice.
+   *
+   * @param project - The existing project to overwrite.
+   */
+  const handleConfirmOverwrite = useCallback(
+    async (project: InterlinearProjectSummary) => {
+      /* v8 ignore next -- button is disabled while submitting; ref guards against programmatic races */
+      if (isSubmittingRef.current) return;
+      isSubmittingRef.current = true;
+      setIsSubmitting(true);
+      try {
+        await onOverwrite(project);
+      } finally {
+        isSubmittingRef.current = false;
+        setIsSubmitting(false);
+      }
+    },
+    [onOverwrite],
+  );
+
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
@@ -153,7 +200,7 @@ export function SaveAsProjectModal({
           placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
         />
         <div className="tw:flex tw:justify-end tw:mb-4">
-          <Button onClick={handleSaveNew} data-testid="save-as-new">
+          <Button onClick={handleSaveNew} data-testid="save-as-new" disabled={isSubmitting}>
             {localizedStrings['%interlinearizer_modal_saveAs_save_new%']}
           </Button>
         </div>
@@ -199,7 +246,8 @@ export function SaveAsProjectModal({
                 variant="destructive"
                 size="sm"
                 data-testid="save-as-overwrite-confirm"
-                onClick={() => onOverwrite(confirmOverwrite)}
+                onClick={() => handleConfirmOverwrite(confirmOverwrite)}
+                disabled={isSubmitting}
               >
                 {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_ok%']}
               </Button>
@@ -208,7 +256,7 @@ export function SaveAsProjectModal({
         )}
 
         <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
+          <Button variant="secondary" onClick={onClose} disabled={isLoading || isSubmitting}>
             {localizedStrings['%interlinearizer_modal_saveAs_cancel%']}
           </Button>
         </div>