fix: render embedded database in version history preview (#385)

Embedded databases inside a document showed an infinite loading spinner
when previewed in Version history. The version-preview <Editor> was not
given `loadView`/`bindViewSync` from the editor context, so the embedded
DatabaseBlock's useDocumentLoader bailed out ("loadView not available")
and the database collab doc never loaded, leaving DatabaseContent stuck
on a perpetual CircularProgress.

Forward `loadView` and `bindViewSync` (already exposed by useAppOperations
and used by the normal ViewModal path) into the preview editor. The
preview shows the database's live data, matching the normal view —
databases are separate collab objects not captured in the document
version snapshot.

Also applies a few React best-practice cleanups in the same file:
- hoist the static MUI Dialog PaperProps out of render
- reuse the existing handleClose callback for Dialog onClose
- drop the redundant handleSetDateFilter wrapper around setDateFilter

Tests:
- unit (DocumentHistoryModal.test.tsx): asserts the preview Editor
  receives loadView/bindViewSync; fails without the fix.
- e2e (version-history-database.spec.ts): signs in to the seeded
  account, opens the seeded page's Version history, and asserts the
  embedded grid renders with rows (not an infinite spinner).

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: appflowy

playwright/e2e/editor/version-history-database.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test';
+
+import { signInWithPasswordViaUi } from '../../support/auth-flow-helpers';
+import {
+  HeaderSelectors,
+  VersionHistorySelectors,
+  DatabaseGridSelectors,
+} from '../../support/selectors';
+import { testLog } from '../../support/test-helpers';
+
+/**
+ * Version History — embedded database rendering
+ *
+ * Regression coverage for the bug where an embedded database inside a document
+ * showed an infinite loading spinner when previewed in Version history. The
+ * version-preview <Editor/> was not given `loadView`/`bindViewSync`, so the
+ * embedded database could never load its collab doc.
+ *
+ * This is a BDD-style scenario against a seeded account/page:
+ *   GIVEN a signed-in user on a document that embeds a database and has version history
+ *   WHEN they open Version history
+ *   THEN the embedded database renders (grid + rows) instead of spinning forever.
+ *
+ * Note: the preview intentionally shows the database's *live* data (databases are
+ * separate collab objects not captured in the document snapshot), so this test
+ * only asserts that the grid renders — not that it matches a historical state.
+ */
+
+// Seeded account + page. Overridable via env so CI can point at its own fixture.
+const SEEDED_USER_EMAIL = process.env.SEEDED_USER_EMAIL || 'nathan@appflowy.io';
+const SEEDED_USER_PASSWORD = process.env.SEEDED_USER_PASSWORD || 'AppFlowy!@123';
+const SEEDED_WORKSPACE_ID =
+  process.env.SEEDED_WORKSPACE_ID || '997c87ed-1667-4a62-8c0a-a74ee1aadb4b';
+const SEEDED_VIEW_ID = process.env.SEEDED_VIEW_ID || 'da539c35-a852-434c-88a9-52fc086c1551';
+
+test.describe('Version History — embedded database', () => {
+  test.beforeEach(async ({ page }) => {
+    page.on('pageerror', () => {
+      // Suppress uncaught exceptions from unrelated app code
+    });
+
+    await page.setViewportSize({ width: 1440, height: 960 });
+
+    testLog.step(1, `Sign in as seeded user (${SEEDED_USER_EMAIL})`);
+    await signInWithPasswordViaUi(page, SEEDED_USER_EMAIL, SEEDED_USER_PASSWORD);
+  });
+
+  test('renders the embedded database in the version-history preview (no infinite spinner)', async ({
+    page,
+  }) => {
+    testLog.step(2, 'Open the seeded page that embeds a database');
+    await page.goto(`/app/${SEEDED_WORKSPACE_ID}/${SEEDED_VIEW_ID}`, {
+      waitUntil: 'domcontentloaded',
+    });
+    await expect(page).toHaveURL(new RegExp(`/app/${SEEDED_WORKSPACE_ID}/${SEEDED_VIEW_ID}`), {
+      timeout: 30000,
+    });
+
+    // Confirm the page itself loaded with its embedded database (baseline).
+    await expect(DatabaseGridSelectors.grid(page).first()).toBeVisible({ timeout: 30000 });
+
+    testLog.step(3, 'Open the "More actions" menu and click Version history');
+    await expect(HeaderSelectors.moreActionsButton(page)).toBeVisible({ timeout: 15000 });
+    await HeaderSelectors.moreActionsButton(page).click();
+
+    await expect(VersionHistorySelectors.menuItem(page)).toBeVisible({ timeout: 10000 });
+    await VersionHistorySelectors.menuItem(page).click();
+
+    testLog.step(4, 'Wait for the version-history modal and a selected version');
+    const modal = VersionHistorySelectors.modal(page);
+    await expect(modal).toBeVisible({ timeout: 15000 });
+    // At least one version must exist for a preview to render.
+    await expect(VersionHistorySelectors.items(page).first()).toBeVisible({ timeout: 15000 });
+
+    testLog.step(5, 'Assert the embedded database renders inside the preview');
+    // The core regression assertion: the grid appears inside the modal.
+    // Before the fix this never resolved (perpetual CircularProgress).
+    const previewGrid = modal.getByTestId('database-grid');
+    await expect(previewGrid).toBeVisible({ timeout: 30000 });
+
+    testLog.step(6, 'Assert the preview grid actually has data rows');
+    const previewRows = modal.locator('[data-testid^="grid-row-"]:not([data-testid="grid-row-undefined"])');
+    await expect(previewRows.first()).toBeVisible({ timeout: 30000 });
+    expect(await previewRows.count()).toBeGreaterThan(0);
+
+    testLog.step(7, 'Close the version-history modal');
+    await VersionHistorySelectors.closeButton(page).click();
+    await expect(modal).not.toBeVisible({ timeout: 10000 });
+  });
+});

src/components/document/history/DocumentHistoryModal.tsx

@@ -26,7 +26,14 @@ import { VersionList } from './DocumentHistoryVersionList';
 
 type PreviewEditorProps = Pick<
   EditorContextState,
-  'loadViewMeta' | 'createRow' | 'eventEmitter' | 'getMentionUser' | 'getViewIdFromDatabaseId' | 'loadDatabaseRelations'
+  | 'loadView'
+  | 'bindViewSync'
+  | 'loadViewMeta'
+  | 'createRow'
+  | 'eventEmitter'
+  | 'getMentionUser'
+  | 'getViewIdFromDatabaseId'
+  | 'loadDatabaseRelations'
 >;
 
 type VersionPreviewBodyProps = {
@@ -72,6 +79,15 @@ const VersionPreviewBody = memo(function VersionPreviewBody({
   );
 });
 
+// Static, so hoist it out of render: avoids recreating the object (and re-running
+// `cn`) on every render and handing MUI's Dialog a fresh `PaperProps` each time.
+const DIALOG_PAPER_PROPS = {
+  className: cn(
+    'flex !h-full !w-full overflow-hidden rounded-2xl bg-surface-layer-02',
+    '!max-h-[min(920px,_calc(100vh-160px))] !min-h-[min(689px,_calc(100vh-40px))] !min-w-[min(984px,_calc(100vw-40px))] !max-w-[min(1680px,_calc(100vw-240px))]'
+  ),
+};
+
 export function DocumentHistoryModal({
   open,
   onOpenChange,
@@ -86,7 +102,7 @@ export function DocumentHistoryModal({
     icon: ViewIcon | null;
   };
 }) {
-  const { loadViewMeta, createRow, getViewIdFromDatabaseId } = useAppOperations();
+  const { loadViewMeta, createRow, getViewIdFromDatabaseId, loadView, bindViewSync } = useAppOperations();
   const { getCollabHistory, previewCollabVersion, revertCollabVersion } = useCollabHistory();
   const getSubscriptions = useGetSubscriptions();
   const eventEmitter = useEventEmitter();
@@ -179,10 +195,6 @@ export function DocumentHistoryModal({
     }
   }, [viewId, getCollabHistory]);
 
-  const handleSetDateFilter = useCallback((filter: 'all' | 'last7Days' | 'last30Days' | 'last60Days') => {
-    setDateFilter(filter);
-  }, []);
-
   const clearPreviewDocs = useCallback(() => {
     previewYDocRef.current.forEach((doc) => {
       doc.destroy();
@@ -315,20 +327,15 @@ export function DocumentHistoryModal({
   return (
     <Dialog
       open={open}
-      onClose={() => onOpenChange(false)}
+      onClose={handleClose}
       aria-labelledby={titleId}
       fullWidth
       maxWidth={false}
       keepMounted={false}
       disableAutoFocus={false}
       disableEnforceFocus={false}
       disableRestoreFocus
-      PaperProps={{
-        className: cn(
-          'flex !h-full !w-full overflow-hidden rounded-2xl bg-surface-layer-02',
-          '!max-h-[min(920px,_calc(100vh-160px))] !min-h-[min(689px,_calc(100vh-40px))] !min-w-[min(984px,_calc(100vw-40px))] !max-w-[min(1680px,_calc(100vw-240px))]'
-        ),
-      }}
+      PaperProps={DIALOG_PAPER_PROPS}
     >
       <DialogContent data-testid='version-history-modal' className='flex h-full w-full overflow-hidden p-0'>
         <div className='order-2 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-t-2xl md:order-1 md:rounded-l-2xl md:rounded-tr-none'>
@@ -342,6 +349,8 @@ export function DocumentHistoryModal({
               activeDoc={activeDoc}
               workspaceId={workspaceId}
               viewId={viewId}
+              loadView={loadView}
+              bindViewSync={bindViewSync}
               loadViewMeta={loadViewMeta}
               createRow={createRow}
               eventEmitter={eventEmitter}
@@ -358,7 +367,7 @@ export function DocumentHistoryModal({
             onSelect={setSelectedVersionId}
             dateFilter={dateFilter}
             onlyShowMine={onlyShowMine}
-            onDateFilterChange={handleSetDateFilter}
+            onDateFilterChange={setDateFilter}
             onOnlyShowMineChange={setOnlyShowMine}
             onRestoreClicked={handleRestore}
             isRestoring={isRestoring}

src/components/document/history/__tests__/DocumentHistoryModal.test.tsx

@@ -0,0 +1,115 @@
+import { expect } from '@jest/globals';
+import { render, waitFor } from '@testing-library/react';
+import * as Y from 'yjs';
+
+import { DocumentHistoryModal } from '../DocumentHistoryModal';
+
+/**
+ * Regression test for the "embedded database infinitely loads in Version history" bug.
+ *
+ * Root cause: the version-history preview rendered an <Editor/> without forwarding
+ * `loadView` / `bindViewSync` from the editor context. Embedded databases load their
+ * own collab doc via `loadView`; when it was missing, `useDocumentLoader` bailed and
+ * the database block spun forever.
+ *
+ * This test asserts those two functions are passed through to the preview <Editor/>.
+ */
+
+// Capture the props the preview Editor is rendered with.
+let lastEditorProps: Record<string, unknown> | null = null;
+
+jest.mock('@/components/editor', () => ({
+  Editor: (props: Record<string, unknown>) => {
+    lastEditorProps = props;
+    return null;
+  },
+}));
+
+jest.mock('@/components/_shared/progress/ComponentLoading', () => () => null);
+jest.mock('../DocumentHistoryVersionList', () => ({ VersionList: () => null }));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const loadView = jest.fn();
+const bindViewSync = jest.fn();
+const loadViewMeta = jest.fn();
+const createRow = jest.fn();
+const getViewIdFromDatabaseId = jest.fn();
+const getMentionUser = jest.fn();
+const loadDatabaseRelations = jest.fn();
+
+const getCollabHistory = jest.fn();
+const previewCollabVersion = jest.fn();
+const revertCollabVersion = jest.fn();
+
+jest.mock('@/components/app/app.hooks', () => ({
+  useAppOperations: () => ({
+    loadViewMeta,
+    createRow,
+    getViewIdFromDatabaseId,
+    loadView,
+    bindViewSync,
+  }),
+  useCollabHistory: () => ({ getCollabHistory, previewCollabVersion, revertCollabVersion }),
+  useGetSubscriptions: () => jest.fn(),
+  useCurrentWorkspaceId: () => 'workspace-1',
+  useEventEmitter: () => ({ on: jest.fn(), off: jest.fn() }),
+  useGetMentionUser: () => getMentionUser,
+  useLoadDatabaseRelations: () => loadDatabaseRelations,
+}));
+
+jest.mock('@/components/app/hooks/useSubscriptionPlan', () => ({
+  useSubscriptionPlan: () => ({ isPro: false }),
+}));
+
+jest.mock('@/components/main/app.hooks', () => ({
+  useCurrentUser: () => ({ uid: '1' }),
+}));
+
+describe('DocumentHistoryModal version preview', () => {
+  beforeEach(() => {
+    lastEditorProps = null;
+    jest.clearAllMocks();
+
+    getCollabHistory.mockResolvedValue([
+      {
+        versionId: 'version-1',
+        parentId: null,
+        name: 'Version 1',
+        createdAt: new Date('2026-05-21T09:38:06Z'),
+        deletedAt: null,
+        editors: [1],
+      },
+    ]);
+    previewCollabVersion.mockResolvedValue(new Y.Doc());
+  });
+
+  it('forwards loadView and bindViewSync to the preview Editor so embedded databases can load', async () => {
+    render(
+      <DocumentHistoryModal
+        open
+        onOpenChange={jest.fn()}
+        viewId="view-1"
+        view={{ name: 'Project Tracker 2', icon: null }}
+      />
+    );
+
+    await waitFor(() => {
+      expect(lastEditorProps).not.toBeNull();
+    });
+
+    // The regression: these were previously omitted, leaving embedded databases
+    // stuck on an infinite loading spinner.
+    expect(lastEditorProps?.loadView).toBe(loadView);
+    expect(lastEditorProps?.bindViewSync).toBe(bindViewSync);
+
+    // The rest of the editor context should still be forwarded.
+    expect(lastEditorProps?.loadViewMeta).toBe(loadViewMeta);
+    expect(lastEditorProps?.createRow).toBe(createRow);
+    expect(lastEditorProps?.getViewIdFromDatabaseId).toBe(getViewIdFromDatabaseId);
+    expect(lastEditorProps?.loadDatabaseRelations).toBe(loadDatabaseRelations);
+    expect(lastEditorProps?.readOnly).toBe(true);
+  });
+});