chore: add test for db views (#204)

* chore: add test for db views

* chore: fix test

* chore: fix test

* chore: fix test

* chore: add hook

* chore: add hook

Author: appflowy

cypress/e2e/database/database-view-tabs.cy.ts

@@ -132,11 +132,21 @@ describe('Database View Tabs', () => {
         }
       });
 
-      // Verify children exist
+      // Verify children exist and match the database views (Grid, Board, Calendar)
       PageSelectors.itemByName('New Database', { timeout: 10000 }).within(() => {
         PageSelectors.names().should('have.length.at.least', 3);
+        // Verify each view type exists in sidebar
+        cy.contains('Grid').should('exist');
+        cy.contains('Board').should('exist');
+        cy.contains('Calendar').should('exist');
       });
 
+      // Step 7.1: Verify tab bar and sidebar have matching views
+      cy.task('log', '[STEP 7.1] Verifying tab bar and sidebar views match');
+      DatabaseViewSelectors.viewTab().contains('Grid').should('exist');
+      DatabaseViewSelectors.viewTab().contains('Board').should('exist');
+      DatabaseViewSelectors.viewTab().contains('Calendar').should('exist');
+
       // Step 8: Navigate away and back to verify tabs persist
       cy.task('log', '[STEP 8] Navigating away and back');
       AddPageSelectors.inlineAddButton().first().click({ force: true });
@@ -225,4 +235,113 @@ describe('Database View Tabs', () => {
       cy.task('log', '[TEST COMPLETE] Tab selection updates sidebar');
     });
   });
+
+  /**
+   * Regression test for: newly created views should appear immediately in tab bar.
+   *
+   * Previously, views wouldn't appear until the folder/outline synced from the server.
+   * The fix ensures views from Yjs (database_update) are shown immediately without
+   * waiting for folder sync.
+   *
+   * See: selector.ts - useDatabaseViewsSelector now includes non-embedded views from Yjs
+   */
+  it('newly created view appears immediately in tab bar (no sync delay)', () => {
+    const testEmail = generateRandomEmail();
+
+    cy.task('log', `[TEST] Immediate view appearance - Email: ${testEmail}`);
+
+    cy.visit('/login', { failOnStatusCode: false });
+    cy.wait(2000);
+
+    const authUtils = new AuthTestUtils();
+    authUtils.signInWithTestUrl(testEmail).then(() => {
+      cy.url({ timeout: 30000 }).should('include', '/app');
+      cy.wait(3000);
+
+      // Create a Grid database
+      cy.task('log', '[STEP 1] Creating Grid database');
+      AddPageSelectors.inlineAddButton().first().click({ force: true });
+      waitForReactUpdate(1000);
+      AddPageSelectors.addGridButton().should('be.visible').click({ force: true });
+      cy.wait(5000);
+
+      // Verify initial state - should have exactly 1 tab (Grid)
+      cy.task('log', '[STEP 2] Verifying initial tab count');
+      DatabaseViewSelectors.viewTab().should('have.length.at.least', 1);
+      DatabaseViewSelectors.viewTab().then(($tabs) => {
+        cy.wrap($tabs.length).as('initialTabCount');
+      });
+
+      // Click + button to add Board view
+      cy.task('log', '[STEP 3] Clicking + button to add Board view');
+      DatabaseViewSelectors.addViewButton().scrollIntoView().click({ force: true });
+      waitForReactUpdate(300); // Short wait for menu to appear
+
+      // Click Board option
+      cy.get('[role="menu"], [role="menuitem"]', { timeout: 5000 })
+        .should('be.visible')
+        .contains('Board')
+        .click({ force: true });
+
+      // CRITICAL: Verify tab appears quickly (within 1s)
+      // This tests that the view appears from Yjs immediately, not waiting for folder sync
+      // Previously this would fail because views only appeared after folder sync (3+ seconds)
+      cy.task('log', '[STEP 4] Verifying Board tab appears quickly (within 1s)');
+      waitForReactUpdate(200); // Minimal wait for React to process the state update
+      cy.get('@initialTabCount').then((initialCount) => {
+        cy.get('[data-testid^="view-tab-"]', { timeout: 1000 }).should(
+          'have.length',
+          (initialCount as number) + 1
+        );
+      });
+
+      // Verify the Board tab is active (selected)
+      cy.task('log', '[STEP 5] Verifying Board tab is active');
+      DatabaseViewSelectors.activeViewTab().should('exist');
+      cy.get('[data-testid^="view-tab-"][data-state="active"]')
+        .should('contain.text', 'Board');
+
+      // Add Calendar view with same immediate check
+      cy.task('log', '[STEP 6] Adding Calendar view');
+      DatabaseViewSelectors.addViewButton().scrollIntoView().click({ force: true });
+      waitForReactUpdate(300);
+
+      cy.get('[role="menu"], [role="menuitem"]', { timeout: 5000 })
+        .should('be.visible')
+        .contains('Calendar')
+        .click({ force: true });
+
+      // Verify Calendar tab appears immediately
+      cy.task('log', '[STEP 7] Verifying Calendar tab appears IMMEDIATELY');
+      cy.get('@initialTabCount').then((initialCount) => {
+        cy.get('[data-testid^="view-tab-"]', { timeout: 500 }).should(
+          'have.length',
+          (initialCount as number) + 2
+        );
+      });
+
+      // Step 8: Verify sidebar matches tab bar views
+      cy.task('log', '[STEP 8] Verifying sidebar matches tab bar views');
+      ensureSpaceExpanded(spaceName);
+      waitForReactUpdate(500);
+
+      // Expand the database to see children
+      PageSelectors.itemByName('New Database', { timeout: 10000 }).then(($dbItem) => {
+        const expandToggle = $dbItem.find('[data-testid="outline-toggle-expand"]');
+        if (expandToggle.length > 0) {
+          cy.wrap(expandToggle).first().click({ force: true });
+          waitForReactUpdate(500);
+        }
+      });
+
+      // Verify sidebar contains all view types
+      PageSelectors.itemByName('New Database', { timeout: 10000 }).within(() => {
+        cy.contains('Grid').should('exist');
+        cy.contains('Board').should('exist');
+        cy.contains('Calendar').should('exist');
+      });
+
+      cy.task('log', '[TEST COMPLETE] Views appear immediately without sync delay');
+    });
+  });
 });

src/application/database-yjs/selector.ts

@@ -70,9 +70,15 @@ export function useDatabaseViewsSelector(databasePageId: string, visibleViewIds?
   const [viewIds, setViewIds] = useState<string[]>([]);
   const [childViews, setChildViews] = useState<ReturnType<typeof views.get>[]>([]);
 
+  // Stabilize visibleViewIds reference to avoid unnecessary effect re-runs
+  const visibleViewIdsKey = visibleViewIds?.join(',') ?? '';
+
   useEffect(() => {
     if (!views) return;
 
+    // Parse the stabilized key back to array (or undefined)
+    const stableVisibleViewIds = visibleViewIdsKey ? visibleViewIdsKey.split(',') : undefined;
+
     const observerEvent = () => {
       const viewsObj = views.toJSON() as Record<
         string,
@@ -81,24 +87,35 @@ export function useDatabaseViewsSelector(databasePageId: string, visibleViewIds?
         }
       >;
 
-      // Get all views from the database and filter out inline views
+      // Step 1: Get all non-inline views from Yjs (don't filter by embedded yet)
+      // See: flowy-database2/src/services/database/database_editor.rs:get_database_view_ids()
       let allViewIds = Object.keys(viewsObj).filter((viewId) => {
         const view = views.get(viewId);
 
         if (!view) return false;
+
         const isInline = view.get(YjsDatabaseKey.is_inline);
 
         return !isInline;
       });
 
-      // If visibleViewIds is provided (for embedded databases), filter to only show those views
-      // visibleViewIds is undefined for standalone databases, [] for embedded with no child views yet
-      if (visibleViewIds !== undefined) {
-        // Preserve the ordering defined by `visibleViewIds` (folder/outline order), not the
-        // internal insertion order of the Yjs `views` map.
-        const availableIds = new Set(allViewIds);
+      // Step 2: Apply context-specific filtering (separate concerns)
+      if (stableVisibleViewIds !== undefined && stableVisibleViewIds.length > 0) {
+        // For embedded databases: show ONLY views in visibleViewIds
+        // This handles views with embedded: true (created via + button)
+        // The visibleViewIds list is the source of truth for what to display
+        const allViewIdsSet = new Set(allViewIds);
 
-        allViewIds = visibleViewIds.filter((viewId) => availableIds.has(viewId));
+        allViewIds = stableVisibleViewIds.filter((viewId) => allViewIdsSet.has(viewId));
+      } else {
+        // For standalone databases: exclude embedded views
+        // Embedded views belong to their respective embedded database blocks
+        allViewIds = allViewIds.filter((viewId) => {
+          const view = views.get(viewId);
+          const isEmbedded = view?.get(YjsDatabaseKey.embedded) === true;
+
+          return !isEmbedded;
+        });
       }
 
       setViewIds(allViewIds);
@@ -111,7 +128,7 @@ export function useDatabaseViewsSelector(databasePageId: string, visibleViewIds?
     return () => {
       views.unobserveDeep(observerEvent);
     };
-  }, [views, visibleViewIds, databasePageId]);
+  }, [views, visibleViewIdsKey]);
 
   return {
     childViews,

src/components/app/DatabaseView.tsx

@@ -2,7 +2,6 @@ import { Suspense, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { ViewComponentProps, ViewLayout, YDatabase, YjsEditorKey } from '@/application/types';
-import { getDatabaseTabViewIds, isDatabaseContainer } from '@/application/view-utils';
 import { findView } from '@/components/_shared/outline/utils';
 import ComponentLoading from '@/components/_shared/progress/ComponentLoading';
 import CalendarSkeleton from '@/components/_shared/skeleton/CalendarSkeleton';
@@ -12,6 +11,7 @@ import KanbanSkeleton from '@/components/_shared/skeleton/KanbanSkeleton';
 import { useAppOutline } from '@/components/app/app.hooks';
 import { DATABASE_TAB_VIEW_ID_QUERY_PARAM } from '@/components/app/hooks/resolveSidebarSelectedViewId';
 import { Database } from '@/components/database';
+import { useContainerVisibleViewIds } from '@/components/database/hooks';
 
 import ViewMetaPreview from 'src/components/view-meta/ViewMetaPreview';
 
@@ -31,36 +31,12 @@ function DatabaseView(props: ViewComponentProps) {
     return findView(outline || [], databasePageId);
   }, [outline, databasePageId]);
 
-  const containerView = useMemo(() => {
-    if (!outline || !view) return;
-
-    if (isDatabaseContainer(view)) {
-      return view;
-    }
-
-    const parentId = view.parent_view_id;
-
-    if (!parentId) {
-      return;
-    }
-
-    const parent = findView(outline || [], parentId);
-
-    return isDatabaseContainer(parent) ? parent : undefined;
-  }, [outline, view]);
+  // Use hook to determine container view and visible view IDs
+  const { containerView, visibleViewIds } = useContainerVisibleViewIds({ view, outline });
 
   // Use container view (if present) as the "page meta" view for naming/icon operations.
   const pageView = containerView || view;
 
-  const visibleViewIds = useMemo(() => {
-    if (containerView) {
-      return getDatabaseTabViewIds(databasePageId, containerView);
-    }
-
-    if (!view) return [];
-    return [view.view_id, ...(view.children?.map((v) => v.view_id) || [])];
-  }, [containerView, view, databasePageId]);
-
   const pageMeta = useMemo(() => {
     if (!pageView) {
       return viewMeta;
@@ -154,10 +130,10 @@ function DatabaseView(props: ViewComponentProps) {
           activeViewId={activeViewId}
           rowId={rowId}
           showActions={true}
-          visibleViewIds={visibleViewIds}
           onChangeView={handleChangeView}
           onOpenRowPage={handleNavigateToRow}
           modalRowId={modalRowId}
+          visibleViewIds={visibleViewIds}
         />
       </Suspense>
     </div>

src/components/database/Database.tsx

@@ -44,7 +44,11 @@ export interface Database2Props {
   onChangeView: (viewId: string) => void;
   onViewAdded?: (viewId: string) => void;
   onOpenRowPage?: (rowId: string) => void;
-  visibleViewIds: string[];
+  /**
+   * For embedded databases: restricts which views are shown (from block data).
+   * For standalone databases: should be undefined to show all non-embedded views.
+   */
+  visibleViewIds?: string[];
   /**
    * The database's page ID in the folder/outline structure.
    * This is the main entry point for the database and remains constant.