feat(undo): preserve editor undo history across tab changes (#10299)

Author: jackkav

packages/insomnia-smoke-test/tests/smoke/tab-switch-undo.test.ts

@@ -0,0 +1,57 @@
+import { expect, type Page } from '@playwright/test';
+
+import { loadFixture } from '../../playwright/paths';
+import { test } from '../../playwright/test';
+
+// Regression guard for undo history surviving a tab change. Switching the active
+// request unmounts the previous request's pane (its editors) and mounts the next;
+// the undo history must survive that remount via the shared editor-state cache, so
+// Cmd/Ctrl+Z still undoes after returning to the request. See docs/undo-redo-baseline.md.
+
+const URL_SEL = 'div.editor__container:has(textarea#request-url-bar) .CodeMirror';
+const isMac = process.platform === 'darwin';
+
+const readUrlState = (page: Page) =>
+  page.evaluate((sel: string) => {
+    const node = document.querySelector(sel) as any;
+    const cm = node?.CodeMirror;
+    return {
+      value: cm?.getValue() as string,
+      undo: cm?.historySize().undo as number,
+    };
+  }, URL_SEL);
+
+test('undo history survives switching request tabs', async ({ page, app, insomnia }) => {
+  const text = await loadFixture('simple.yaml');
+  await app.evaluate(async ({ clipboard }, t) => clipboard.writeText(t), text);
+  await page.getByLabel('Import').click();
+  await page.locator('[data-test-id="import-from-clipboard"]').click();
+  await page.getByRole('button', { name: 'Scan' }).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
+  await page.getByRole('dialog').waitFor({ state: 'hidden' });
+
+  // Open the first request and edit its URL, building undo history.
+  await insomnia.navigationSidebar.clickRequestOrFolder('example http');
+  const urlInput = page.locator(`${URL_SEL} textarea`);
+  await urlInput.focus();
+  await page.keyboard.type('/undo-marker');
+  // Web-first assertion settles the debounced persist + loader revalidation.
+  await expect.soft(page.locator(URL_SEL)).toContainText('/undo-marker');
+  expect.soft((await readUrlState(page)).undo).toBeGreaterThan(0);
+
+  // Change tabs: to another request and back. This unmounts the first request's
+  // URL editor and remounts it — the round-trip that used to drop undo history.
+  await insomnia.navigationSidebar.clickRequestOrFolder('proxyEnabled');
+  await insomnia.navigationSidebar.clickRequestOrFolder('example http');
+  await expect.soft(page.locator(URL_SEL)).toContainText('/undo-marker');
+
+  const afterSwitch = await readUrlState(page);
+  // Value preserved AND undo history restored across the remount.
+  expect.soft(afterSwitch.value).toContain('/undo-marker');
+  expect.soft(afterSwitch.undo).toBeGreaterThan(0);
+
+  // Undo works on the remounted editor: it reverts the edit made before the switch.
+  await page.locator(`${URL_SEL} textarea`).focus();
+  await page.keyboard.press(isMac ? 'Meta+z' : 'Control+z');
+  await expect.soft(page.locator(URL_SEL)).not.toContainText('/undo-marker');
+});

packages/insomnia/src/routes/organization.tsx

@@ -11,6 +11,7 @@ import { useWorkspaceLoaderData } from '~/routes/organization.$organizationId.pr
 import { useSyncOrganizationsAndProjectsActionFetcher } from '~/routes/organization.sync-organizations-and-projects';
 import { useUntrackedProjectsLoaderFetcher } from '~/routes/untracked-projects';
 import { AnalyticsEvent } from '~/ui/analytics';
+import { useEditorHistoryTabCleanup } from '~/ui/components/.client/codemirror/editor-history-cleanup';
 import { CommandPalette } from '~/ui/components/command-palette';
 import { GitHubStarsButton } from '~/ui/components/github-stars-button';
 import { HeaderInviteButton } from '~/ui/components/header-invite-button';
@@ -256,6 +257,10 @@ const Component = ({ loaderData }: Route.ComponentProps) => {
     organizationId,
   });
 
+  // Reclaim cached editor undo/redo history when tabs close, so switching between
+  // open tabs never evicts a still-open tab's history from the shared cache.
+  useEditorHistoryTabCleanup();
+
   const [isSidebarCollapsed, setIsSidebarCollapsed] = reactUse.useLocalStorage('project-navigation-collapsed', false);
 
   const toggleSidebar = useCallback(

packages/insomnia/src/ui/components/.client/codemirror/editor-history-cleanup.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+import uiEventBus from '~/ui/event-bus';
+
+import { purgeCachedEditorStates } from './editor-state-cache';
+
+// Lifecycle cleanup for the shared editor-state cache: when a tab closes, drop the
+// cached undo/redo history for the editors it owned, so closed tabs never crowd out
+// still-open tabs (which is what caused undo to be lost when switching tabs).
+//
+// A tab's id is its resource id (e.g. the request id), and the editors inside embed
+// that id in their historyKeys — `request-url-bar::<id>`, `<id>::render`,
+// `auth::<id>::<field>`, `request-description::<id>`, etc. — so purging every cached
+// key that contains a closed tab's id reclaims that tab's editors. (Key-value row
+// keys are keyed on the pair id instead and are reclaimed on row delete; see the
+// key-value editor.)
+export const useEditorHistoryTabCleanup = () => {
+  useEffect(() => {
+    const handleCloseTab = (_organizationId: string, ids: string[] | 'all') => {
+      // 'all' means every tab in the org closed — no live tab-scoped editors remain.
+      if (ids === 'all') {
+        purgeCachedEditorStates(() => true);
+        return;
+      }
+      if (!ids.length) {
+        return;
+      }
+      purgeCachedEditorStates(key => ids.some(id => key.includes(id)));
+    };
+    return uiEventBus.on('CLOSE_TAB', handleCloseTab);
+  }, []);
+};

packages/insomnia/src/ui/components/.client/codemirror/editor-state-cache.test.ts

@@ -0,0 +1,55 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { getCachedEditorState, purgeCachedEditorStates, setCachedEditorState } from './editor-state-cache';
+
+// The cache is a module-level singleton, so clear it between tests.
+afterEach(() => {
+  purgeCachedEditorStates(() => true);
+});
+
+const state = (history: string) => ({ history });
+
+describe('purgeCachedEditorStates', () => {
+  it('removes only the entries whose key matches the predicate and returns the count', () => {
+    setCachedEditorState('request-url-bar::req_1', state('a'));
+    setCachedEditorState('auth::req_1::token', state('b'));
+    setCachedEditorState('request-url-bar::req_2', state('c'));
+
+    const removed = purgeCachedEditorStates(key => key.includes('req_1'));
+
+    expect(removed).toBe(2);
+    expect(getCachedEditorState('request-url-bar::req_1')).toBeUndefined();
+    expect(getCachedEditorState('auth::req_1::token')).toBeUndefined();
+    // an unrelated tab's entry is untouched
+    expect(getCachedEditorState('request-url-bar::req_2')).toEqual(state('c'));
+  });
+
+  it('purges a deleted row without touching sibling rows', () => {
+    setCachedEditorState('key-value-editor__namepair_1', state('n1'));
+    setCachedEditorState('key-value-editor__valuepair_1', state('v1'));
+    setCachedEditorState('key-value-editor__namepair_2', state('n2'));
+
+    purgeCachedEditorStates(key => key.includes('pair_1'));
+
+    expect(getCachedEditorState('key-value-editor__namepair_1')).toBeUndefined();
+    expect(getCachedEditorState('key-value-editor__valuepair_1')).toBeUndefined();
+    expect(getCachedEditorState('key-value-editor__namepair_2')).toEqual(state('n2'));
+  });
+
+  it('purge-all clears the whole cache', () => {
+    setCachedEditorState('a', state('1'));
+    setCachedEditorState('b', state('2'));
+
+    const removed = purgeCachedEditorStates(() => true);
+
+    expect(removed).toBe(2);
+    expect(getCachedEditorState('a')).toBeUndefined();
+    expect(getCachedEditorState('b')).toBeUndefined();
+  });
+
+  it('returns 0 when nothing matches', () => {
+    setCachedEditorState('keep-me', state('1'));
+    expect(purgeCachedEditorStates(key => key.includes('nope'))).toBe(0);
+    expect(getCachedEditorState('keep-me')).toEqual(state('1'));
+  });
+});

packages/insomnia/src/ui/components/.client/codemirror/editor-state-cache.ts

@@ -12,12 +12,15 @@ export interface CachedEditorState {
   marks?: Partial<CodeMirror.MarkerRange>[];
 }
 
-// Bounded LRU. Keys can be ephemeral (e.g. one per key-value pair id, minted per
-// row and never reused), so without a cap this would grow unboundedly for the
-// lifetime of the renderer, each entry retaining a CodeMirror history stack.
-// The cap only needs to cover editors that might remount roughly concurrently;
-// a few dozen is plenty, 100 is comfortably safe.
-const MAX_CACHED_EDITOR_STATES = 100;
+// The cache is primarily bounded by lifecycle purging (see purgeCachedEditorStates):
+// entries are dropped when their owning tab closes or their key-value row is
+// deleted, so it tracks live editors rather than growing forever. The LRU cap
+// below is only a safety backstop for entries no lifecycle event reaches. It must
+// be high enough that a single param/header-heavy request — which alone can mint a
+// few hundred keys (three per key-value row) — never evicts its own editors, and
+// that switching between several open tabs never evicts a still-open tab's undo
+// history. Each entry is a small CodeMirror history snapshot.
+const MAX_CACHED_EDITOR_STATES = 2000;
 // Map preserves insertion order, so the first key is the least-recently-used.
 const editorStates = new Map<string, CachedEditorState>();
 
@@ -43,3 +46,19 @@ export const setCachedEditorState = (historyKey: string, state: CachedEditorStat
     editorStates.delete(lruKey);
   }
 };
+
+// Lifecycle purge: drop every cached entry whose historyKey matches `shouldPurge`.
+// Used to reclaim history when the owning scope goes away — e.g. a closed tab
+// (purge keys that embed the closed request id) or a deleted key-value row (purge
+// that pair's keys) — so stale entries never accumulate or crowd out live editors.
+// Returns the number of entries removed.
+export const purgeCachedEditorStates = (shouldPurge: (historyKey: string) => boolean): number => {
+  let purged = 0;
+  for (const key of editorStates.keys()) {
+    if (shouldPurge(key)) {
+      editorStates.delete(key);
+      purged++;
+    }
+  }
+  return purged;
+};

packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx

@@ -18,6 +18,7 @@ import {
 import { checkNestedKeys, ensureKeyIsValid } from '~/common/utils/environment-utils';
 import { base64decode } from '~/common/utils/vault';
 import { getRuntime } from '~/runtimes';
+import { purgeCachedEditorStates } from '~/ui/components/.client/codemirror/editor-state-cache';
 import { OneLineEditor, type OneLineEditorHandle } from '~/ui/components/.client/codemirror/one-line-editor';
 
 import { generateId } from '../../../../common/misc';
@@ -303,6 +304,9 @@ export const EnvironmentKVEditor = ({
   };
 
   const handleDeleteItem = (id: string) => {
+    // Drop the deleted row's cached undo history (keyed on the pair id) so its
+    // ephemeral entries don't linger in the shared cache.
+    purgeCachedEditorStates(key => key.includes(id));
     onChange(persistedPairs.filter(d => d.id !== id));
   };
 

packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-aria-components';
 
 import { utf8ByteLength } from '~/common/utils/utf8-bytes';
+import { purgeCachedEditorStates } from '~/ui/components/.client/codemirror/editor-state-cache';
 import { OneLineEditor, type OneLineEditorHandle } from '~/ui/components/.client/codemirror/one-line-editor';
 
 import { describeByteSize, generateId } from '../../../common/misc';
@@ -657,6 +658,12 @@ export const KeyValueEditor: FC<Props> = ({
                     confirmMessage=""
                     doneMessage=""
                     onClick={() => {
+                      // Drop the deleted row's cached undo history (keyed on pair.id)
+                      // so its ephemeral entries don't linger in the shared cache.
+                      const pairId = pair.id;
+                      if (pairId) {
+                        purgeCachedEditorStates(key => key.includes(pairId));
+                      }
                       onChange(persistedItems.filter(item => item.id !== pair.id));
                     }}
                   >