fix: highlight selected view after creating db (#314)

* fix: highlight selected view after creating db

* chore: fix test

Author: appflowy

playwright/e2e/database/board-edit-operations.spec.ts

@@ -157,7 +157,7 @@ test.describe('Board Operations', () => {
       await page.waitForTimeout(1500);
 
       // Then: the modal should show the original title
-      const dialog = page.locator('[role="dialog"]');
+      const dialog = page.locator('.MuiDialog-paper').filter({ has: page.getByTestId('row-title-input') }).first();
       await expect(dialog).toBeVisible({ timeout: 10000 });
       await expect(dialog.getByTestId('row-title-input')).toHaveValue(originalName, { timeout: 10000 });
 
@@ -316,7 +316,7 @@ test.describe('Board Operations', () => {
       await BoardSelectors.boardContainer(page).getByText(cardName).click({ force: true });
       await page.waitForTimeout(1500);
 
-      const dialog = page.locator('[role="dialog"]');
+      const dialog = page.locator('.MuiDialog-paper').filter({ has: page.getByTestId('row-title-input') }).first();
       await expect(dialog).toBeVisible({ timeout: 10000 });
 
       await dialog.locator('[data-block-type]').first().click({ force: true });

playwright/e2e/database/duplicate-row-doc-content.spec.ts

@@ -3,9 +3,9 @@ import { generateRandomEmail, setupPageErrorHandling } from '../../support/test-
 import { signUpAndLoginWithPasswordViaUi } from '../../support/auth-flow-helpers';
 import {
   openRowDetail,
-  closeRowDetailWithEscape,
-  typeInRowDocument,
   duplicateRowFromDetail,
+  getVisibleDataRowIds,
+  openRowDetailByRowId,
 } from '../../support/row-detail-helpers';
 import { createDatabaseView, waitForGridReady } from '../../support/database-ui-helpers';
 import { DatabaseGridSelectors } from '../../support/selectors';
@@ -57,6 +57,8 @@ test.describe('Duplicate row preserves document content', () => {
     await page.waitForTimeout(3000);
 
     // Duplicate the row from row detail
+    const rowIdsBeforeDuplicate = await getVisibleDataRowIds(page);
+
     await openRowDetail(page, 0);
     await duplicateRowFromDetail(page);
     // duplicateRowFromDetail auto-closes the dialog; ensure it's closed
@@ -65,12 +67,16 @@ test.describe('Duplicate row preserves document content', () => {
 
     // Verify 4 rows (3 default + 1 duplicate)
     const rowCount = await DatabaseGridSelectors.dataRows(page).count();
-    expect(rowCount).toBe(4);
+    expect(rowCount).toBe(rowIdsBeforeDuplicate.length + 1);
+
+    const rowIdsAfterDuplicate = await getVisibleDataRowIds(page);
+    const duplicatedRowId = rowIdsAfterDuplicate.find((rowId) => !rowIdsBeforeDuplicate.includes(rowId));
+    expect(duplicatedRowId).toBeTruthy();
 
-    // Open the duplicated row (index 1) in full-page mode so the Yjs
+    // Open the duplicated row in full-page mode so the Yjs
     // provider creates a fresh connection on each attempt.  The dialog's
     // lazy sub-document loading can miss updates; full-page mode is reliable.
-    await openRowDetail(page, 1);
+    await openRowDetailByRowId(page, duplicatedRowId!);
     const dialogTitle2 = page.locator('.MuiDialogTitle-root');
     await dialogTitle2.locator('button').first().click({ force: true });
     await page.waitForTimeout(2000);

playwright/e2e/database/duplicate-row-inline-db.spec.ts

@@ -5,6 +5,8 @@ import {
   openRowDetail,
   closeRowDetailWithEscape,
   duplicateRowFromDetail,
+  getVisibleDataRowIds,
+  openRowDetailByRowId,
 } from '../../support/row-detail-helpers';
 import { createDatabaseView, waitForGridReady } from '../../support/database-ui-helpers';
 import {
@@ -70,6 +72,8 @@ test.describe('Duplicate row with inline database', () => {
     await page.waitForTimeout(1000);
 
     // Duplicate the row from row detail
+    const rowIdsBeforeDuplicate = await getVisibleDataRowIds(page);
+
     await openRowDetail(page, 0);
     await duplicateRowFromDetail(page);
     await closeRowDetailWithEscape(page);
@@ -85,10 +89,14 @@ test.describe('Duplicate row with inline database', () => {
     await page.waitForTimeout(2000);
 
     // Verify the grid now has 4 rows (3 default + 1 duplicate)
-    expect(await getGridRowCount(page)).toBe(4);
+    expect(await getGridRowCount(page)).toBe(rowIdsBeforeDuplicate.length + 1);
+
+    const rowIdsAfterDuplicate = await getVisibleDataRowIds(page);
+    const duplicatedRowId = rowIdsAfterDuplicate.find((rowId) => !rowIdsBeforeDuplicate.includes(rowId));
+    expect(duplicatedRowId).toBeTruthy();
 
-    // Open the duplicated row (index 1) in full page mode to verify
-    await openRowDetail(page, 1);
+    // Open the duplicated row in full page mode to verify
+    await openRowDetailByRowId(page, duplicatedRowId!);
     const dialogTitle2 = page.locator('.MuiDialogTitle-root');
     await dialogTitle2.locator('button').first().click({ force: true });
     await page.waitForTimeout(2000);
@@ -108,7 +116,7 @@ test.describe('Duplicate row with inline database', () => {
       await page.goBack();
       await page.waitForTimeout(3000);
       await waitForGridReady(page);
-      await openRowDetail(page, 1);
+      await openRowDetailByRowId(page, duplicatedRowId!);
       const dt = page.locator('.MuiDialogTitle-root');
       await dt.locator('button').first().click({ force: true });
       await page.waitForTimeout(2000);

playwright/e2e/embeded/database/duplicate-doc-inline-and-linked-db.spec.ts

@@ -39,9 +39,9 @@ test.describe('Duplicate Document Inline And Linked Database', () => {
 
     const docViewId = await createNamedDocumentPage(page, docName);
     const editor = editorForView(page, docViewId);
-    // The linked database picker searches by container name ("New Database"),
-    // not the renamed view name.
-    await insertLinkedGridViaSlash(page, docViewId, 'New Database', 0);
+    // The linked database picker lists databases by the container name.
+    // `createNamedGridPage` renames the container itself, so search by sourceDbName.
+    await insertLinkedGridViaSlash(page, docViewId, sourceDbName, 0);
 
     await expect(databaseBlocks(editor)).toHaveCount(1, { timeout: 30000 });
     await expectNoActiveFilters(databaseBlocks(editor).nth(0));

playwright/e2e/embeded/database/duplicate-doc-linked-db-filter.spec.ts

@@ -37,13 +37,13 @@ test.describe('Duplicate Document Linked Database Filter', () => {
 
     const docViewId = await createNamedDocumentPage(page, docName);
     const editor = editorForView(page, docViewId);
-    // The linked database picker searches by container name ("New Database"),
-    // not the renamed view name. Each test workspace has only one database.
-    await insertLinkedGridViaSlash(page, docViewId, 'New Database', 0);
+    // The linked database picker lists databases by the container name.
+    // `createNamedGridPage` renames the container itself, so search by sourceDbName.
+    await insertLinkedGridViaSlash(page, docViewId, sourceDbName, 0);
     // Wait for the first linked grid to fully render and for any background
     // IndexedDB sync activity to settle before opening the slash menu again.
     await page.waitForTimeout(3000);
-    await insertLinkedGridViaSlash(page, docViewId, 'New Database', 1);
+    await insertLinkedGridViaSlash(page, docViewId, sourceDbName, 1);
 
     await expect(databaseBlocks(editor)).toHaveCount(2, { timeout: 30000 });
     await expectNoActiveFilters(databaseBlocks(editor).nth(0));

playwright/support/row-detail-helpers.ts

@@ -42,6 +42,37 @@ export async function openRowDetail(page: Page, rowIndex: number = 0): Promise<v
   await expect(RowDetailSelectors.modal(page)).toBeVisible();
 }
 
+/**
+ * Return visible data-row ids in DOM order.
+ */
+export async function getVisibleDataRowIds(page: Page): Promise<string[]> {
+  const testIds = await DatabaseGridSelectors.dataRows(page).evaluateAll((rows) =>
+    rows
+      .map((row) => row.getAttribute('data-testid') || '')
+      .filter(Boolean)
+  );
+
+  return testIds.map((testId) => testId.replace('grid-row-', ''));
+}
+
+/**
+ * Open a specific row detail modal by row id.
+ */
+export async function openRowDetailByRowId(page: Page, rowId: string): Promise<void> {
+  const row = DatabaseGridSelectors.rowById(page, rowId);
+  await expect(row).toBeVisible({ timeout: 10000 });
+  await row.scrollIntoViewIfNeeded();
+  await row.hover();
+  await page.waitForTimeout(500);
+
+  const expandButton = page.getByTestId('row-expand-button').first();
+  await expect(expandButton).toBeVisible({ timeout: 5000 });
+  await expandButton.click({ force: true });
+  await page.waitForTimeout(1000);
+
+  await expect(RowDetailSelectors.modal(page)).toBeVisible();
+}
+
 /**
  * Open row detail by hovering over a cell to reveal the expand button
  */

src/application/types.ts

@@ -1290,6 +1290,7 @@ export interface ViewMetaProps {
   cover?: ViewMetaCover;
   name?: string;
   viewId?: string;
+  parentViewId?: string;
   workspaceId?: string;
   layout?: ViewLayout;
   visibleViewIds?: string[];

src/components/app/DatabaseView.tsx

@@ -37,7 +37,13 @@ function DatabaseView(props: DatabaseViewProps) {
   }, [outline, databasePageId]);
 
   // Use hook to determine container view and visible view IDs
-  const { containerView, visibleViewIds } = useContainerVisibleViewIds({ view, outline });
+  const { containerView, visibleViewIds } = useContainerVisibleViewIds({
+    view,
+    outline,
+    parentViewId: viewMeta.parentViewId,
+    databaseId: viewMeta.extra?.database_id,
+    embedded: viewMeta.extra?.embedded,
+  });
 
   // Use container view (if present) as the "page meta" view for naming/icon operations.
   const pageView = containerView || view;

src/components/app/app.hooks.tsx

@@ -5,6 +5,7 @@ import LoadingDots from '@/components/_shared/LoadingDots';
 import { findView } from '@/components/_shared/outline/utils';
 import {
   DATABASE_TAB_VIEW_ID_QUERY_PARAM,
+  resolveSidebarHighlightedViewIds,
   resolveSidebarSelectedViewId,
 } from '@/components/app/hooks/resolveSidebarSelectedViewId';
 
@@ -511,3 +512,22 @@ export function useSidebarSelectedViewId() {
     [outline, routeViewId, tabViewId]
   );
 }
+
+export function useSidebarHighlightedViewIds() {
+  const routeViewId = useAppViewId();
+  const outline = useAppOutline();
+  const breadcrumbs = useBreadcrumb();
+  const [searchParams] = useSearchParams();
+  const tabViewId = searchParams.get(DATABASE_TAB_VIEW_ID_QUERY_PARAM);
+
+  return useMemo(
+    () =>
+      resolveSidebarHighlightedViewIds({
+        routeViewId,
+        tabViewId,
+        outline,
+        breadcrumbs,
+      }),
+    [breadcrumbs, outline, routeViewId, tabViewId]
+  );
+}

src/components/app/hooks/__tests__/ViewItem.databaseContainer.test.tsx

@@ -6,6 +6,8 @@ import ViewItem from '@/components/app/outline/ViewItem';
 declare global {
   // eslint-disable-next-line no-var
   var __selectedViewId: string | undefined;
+  // eslint-disable-next-line no-var
+  var __highlightedViewIds: string[] | undefined;
 }
 
 jest.mock('react-i18next', () => ({
@@ -14,6 +16,7 @@ jest.mock('react-i18next', () => ({
 
 jest.mock('@/components/app/app.hooks', () => ({
   useSidebarSelectedViewId: () => global.__selectedViewId,
+  useSidebarHighlightedViewIds: () => global.__highlightedViewIds || [],
   useAppOperations: () => ({
     updatePage: jest.fn(),
     uploadFile: jest.fn(),
@@ -30,6 +33,7 @@ jest.mock('@/components/_shared/view-icon/PageIcon', () => () => null);
 describe('ViewItem database container', () => {
   beforeEach(() => {
     global.__selectedViewId = undefined;
+    global.__highlightedViewIds = undefined;
   });
 
   it('clicking a container opens its first child', () => {
@@ -112,4 +116,45 @@ describe('ViewItem database container', () => {
 
     expect(el.getAttribute('data-selected')).toBe('true');
   });
+
+  it('marks both the database container and active child view as selected', () => {
+    const childView: View = {
+      view_id: 'child-view-id',
+      name: 'Grid',
+      icon: null,
+      layout: ViewLayout.Grid,
+      extra: { is_space: false },
+      children: [],
+      is_published: false,
+      is_private: false,
+      parent_view_id: 'container-view-id',
+    };
+
+    const containerView: View = {
+      view_id: 'container-view-id',
+      name: 'New database',
+      icon: null,
+      layout: ViewLayout.Grid,
+      extra: { is_space: false, is_database_container: true },
+      children: [childView],
+      is_published: false,
+      is_private: false,
+    };
+
+    global.__selectedViewId = childView.view_id;
+    global.__highlightedViewIds = [childView.view_id, containerView.view_id];
+
+    render(
+      <ViewItem
+        view={containerView}
+        width={240}
+        expandIds={[containerView.view_id]}
+        toggleExpand={jest.fn()}
+        onClickView={jest.fn()}
+      />
+    );
+
+    expect(screen.getByTestId(`page-${containerView.view_id}`).getAttribute('data-selected')).toBe('true');
+    expect(screen.getByTestId(`page-${childView.view_id}`).getAttribute('data-selected')).toBe('true');
+  });
 });