Fix autosave PUT calls while form edits are active

packages/design/src/FormManager/store.test.ts

@@ -0,0 +1,55 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+import { createPatternTestForm, createTestSession } from '../test-form.js';
+import { initializePeriodicSave } from './store.js';
+
+describe('FormManager store', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  test('does not save while a pattern is focused', async () => {
+    vi.useFakeTimers();
+    const form = createPatternTestForm({ patternCount: 1, useSequence: false });
+    const saveForm = vi.fn().mockResolvedValue(undefined);
+    const state = {
+      focus: {
+        pattern: {},
+      },
+      session: createTestSession({ form }),
+      saveForm,
+    };
+
+    const timer = initializePeriodicSave({
+      getState: () => state,
+    } as unknown as Parameters<typeof initializePeriodicSave>[0]);
+
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(saveForm).not.toHaveBeenCalled();
+    clearInterval(timer);
+  });
+
+  test('saves once per form snapshot when no pattern is focused', async () => {
+    vi.useFakeTimers();
+    const form = createPatternTestForm({ patternCount: 1, useSequence: false });
+    const saveForm = vi.fn().mockResolvedValue(undefined);
+    const state = {
+      focus: undefined,
+      session: createTestSession({ form }),
+      saveForm,
+    };
+
+    const timer = initializePeriodicSave({
+      getState: () => state,
+    } as unknown as Parameters<typeof initializePeriodicSave>[0]);
+
+    await vi.advanceTimersByTimeAsync(5000);
+    await vi.advanceTimersByTimeAsync(5000);
+
+    expect(saveForm).toHaveBeenCalledTimes(1);
+    expect(saveForm).toHaveBeenCalledWith(form);
+    clearInterval(timer);
+  });
+});

packages/design/src/FormManager/store.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   type StoreApi,
   type StateCreator,
-  type UseBoundStore,
   create,
 } from 'zustand';
 import { createContext } from 'zustand-utils';
@@ -132,12 +131,15 @@ const createFormManagerSlice =
     },
   });
 
-const initializePeriodicSave = (
-  store: UseBoundStore<StoreApi<FormManagerStore>>
+export const initializePeriodicSave = (
+  store: Pick<StoreApi<FormManagerStore>, 'getState'>
 ) => {
   let lastForm: Blueprint;
-  setInterval(async () => {
-    const { session, saveForm } = store.getState();
+  return setInterval(async () => {
+    const { focus, session, saveForm } = store.getState();
+    if (focus !== undefined) {
+      return;
+    }
     if (session.form && session.form !== lastForm) {
       await saveForm(session.form);
       lastForm = session.form;