fix: create db view order

Author: appflowy

src/application/database-yjs/__tests__/useAddDatabaseView.test.tsx

@@ -92,6 +92,7 @@ describe('useAddDatabaseView', () => {
       activeViewId,
       expect.objectContaining({
         parent_view_id: containerId,
+        prev_view_id: activeViewId,
         database_id: databaseId,
         layout: ViewLayout.Calendar,
         name: 'Calendar',
@@ -154,6 +155,7 @@ describe('useAddDatabaseView', () => {
       baseViewId,
       expect.objectContaining({
         parent_view_id: documentId,
+        prev_view_id: baseViewId,
         database_id: databaseId,
         layout: ViewLayout.Board,
         name: 'Board',
@@ -221,5 +223,69 @@ describe('useAddDatabaseView', () => {
         embedded: false,
       })
     );
+
+    const [, payload] = createDatabaseView.mock.calls[0];
+
+    expect(payload.prev_view_id).toBeUndefined();
+  });
+
+  it('uses the container last child as prev_view_id when the current route is the container itself', async () => {
+    const databaseId = 'db-1';
+    const containerId = 'container-view-id';
+    const firstChildId = 'grid-view-id';
+    const secondChildId = 'board-view-id';
+
+    const createDatabaseView = jest.fn().mockResolvedValue({
+      view_id: 'new-view-id',
+      database_id: databaseId,
+    });
+
+    const loadViewMeta = jest.fn(async (viewId: string) => {
+      if (viewId === containerId) {
+        return createView({
+          view_id: containerId,
+          layout: ViewLayout.Grid,
+          extra: { is_space: false, is_database_container: true },
+          children: [
+            createView({ view_id: firstChildId, layout: ViewLayout.Grid, parent_view_id: containerId }),
+            createView({ view_id: secondChildId, layout: ViewLayout.Board, parent_view_id: containerId }),
+          ],
+        });
+      }
+
+      return null;
+    });
+
+    const contextValue: DatabaseContextState = {
+      readOnly: false,
+      databaseDoc: createDatabaseDoc(databaseId),
+      databasePageId: containerId,
+      activeViewId: containerId,
+      rowDocMap: {},
+      workspaceId: 'workspace-id',
+      createDatabaseView,
+      loadViewMeta,
+      isDocumentBlock: false,
+    };
+
+    const { result } = renderHook(() => useAddDatabaseView(), {
+      wrapper: ({ children }) => <DatabaseContext.Provider value={contextValue}>{children}</DatabaseContext.Provider>,
+    });
+
+    await act(async () => {
+      await result.current(DatabaseViewLayout.Calendar, 'Calendar');
+    });
+
+    expect(createDatabaseView).toHaveBeenCalledWith(
+      containerId,
+      expect.objectContaining({
+        parent_view_id: containerId,
+        prev_view_id: secondChildId,
+        database_id: databaseId,
+        layout: ViewLayout.Calendar,
+        name: 'Calendar',
+        embedded: false,
+      })
+    );
   });
 });

src/application/database-yjs/__tests__/useDatabaseViewsSelector.test.tsx

@@ -10,16 +10,21 @@ jest.mock('@/utils/runtime-config', () => ({
   getConfigValue: (_key: string, fallback: string) => fallback,
 }));
 
-function createDatabaseDocWithViews(viewIdsInInsertionOrder: string[]): YDoc {
+function createDatabaseDocWithViews(
+  viewIdsInInsertionOrder: Array<string | { viewId: string; createdAt?: string }>
+): YDoc {
   const doc = new Y.Doc() as unknown as YDoc;
   const sharedRoot = doc.getMap(YjsEditorKey.data_section);
   const database = new Y.Map();
   const views = new Y.Map();
 
-  viewIdsInInsertionOrder.forEach((viewId) => {
+  viewIdsInInsertionOrder.forEach((input, index) => {
+    const viewId = typeof input === 'string' ? input : input.viewId;
+    const createdAt =
+      typeof input === 'string' ? new Date(Date.UTC(2024, 0, index + 1)).toISOString() : input.createdAt;
     const view = new Y.Map();
 
-    view.set('created_at', new Date().toISOString());
+    view.set(YjsDatabaseKey.created_at, createdAt);
     views.set(viewId, view);
   });
 
@@ -29,6 +34,40 @@ function createDatabaseDocWithViews(viewIdsInInsertionOrder: string[]): YDoc {
 }
 
 describe('useDatabaseViewsSelector', () => {
+  it('sorts standalone database views by created_at instead of raw Yjs insertion order', () => {
+    const gridId = 'grid-id';
+    const boardId = 'board-id';
+    const calendarId = 'calendar-id';
+
+    const databaseDoc = createDatabaseDocWithViews([
+      { viewId: boardId, createdAt: '2024-01-02T00:00:00.000Z' },
+      { viewId: gridId, createdAt: '2024-01-01T00:00:00.000Z' },
+      { viewId: calendarId, createdAt: '2024-01-03T00:00:00.000Z' },
+    ]);
+
+    const contextValue: DatabaseContextState = {
+      readOnly: true,
+      databaseDoc,
+      databasePageId: gridId,
+      activeViewId: gridId,
+      rowDocMap: null,
+      workspaceId: 'workspace-id',
+    };
+
+    const { result } = renderHook(
+      () => useDatabaseViewsSelector(gridId),
+      {
+        wrapper: ({ children }) => (
+          <DatabaseContext.Provider value={contextValue}>
+            {children}
+          </DatabaseContext.Provider>
+        ),
+      }
+    );
+
+    expect(result.current.viewIds).toEqual([gridId, boardId, calendarId]);
+  });
+
   it('preserves visibleViewIds ordering (folder/outline order)', () => {
     const gridId = 'grid-id';
     const boardId = 'board-id';

src/application/database-yjs/dispatch.ts

@@ -2220,10 +2220,19 @@ export function useAddDatabaseView() {
       const viewLayout = layoutToViewLayout[layout];
       const name = layoutToName[layout];
 
-      const tabsParentViewId = await (async (): Promise<string> => {
+      const getLastChildViewId = (view: View | null | undefined): string | undefined => {
+        const children = view?.children ?? [];
+
+        return children.length > 0 ? children[children.length - 1].view_id : undefined;
+      };
+
+      const { tabsParentViewId, prevViewId } = await (async (): Promise<{
+        tabsParentViewId: string;
+        prevViewId?: string;
+      }> => {
         // Best-effort: fall back to previous behavior if meta lookup isn't available.
         if (!loadViewMeta) {
-          return databasePageId;
+          return { tabsParentViewId: databasePageId };
         }
 
         const safeLoadViewMeta = async (viewId: string): Promise<View | null> => {
@@ -2238,34 +2247,47 @@ export function useAddDatabaseView() {
 
         // If the current view itself is a container, attach under it.
         if (currentMeta && isDatabaseContainer(currentMeta)) {
-          return currentMeta.view_id;
+          return {
+            tabsParentViewId: currentMeta.view_id,
+            prevViewId: getLastChildViewId(currentMeta),
+          };
         }
 
         const parentId = currentMeta?.parent_view_id;
 
         if (!parentId) {
-          return databasePageId;
+          return { tabsParentViewId: databasePageId };
         }
 
         // If parent is a database container, attach under the container (Scenario 4).
         const parentMeta = await safeLoadViewMeta(parentId);
 
         if (isDatabaseContainer(parentMeta)) {
-          return parentId;
+          return {
+            tabsParentViewId: parentId,
+            prevViewId: currentMeta?.view_id,
+          };
         }
 
         // Embedded databases without a container attach under the document (Scenario 3).
         if (isDocumentBlock) {
-          return parentId;
+          return {
+            tabsParentViewId: parentId,
+            prevViewId: currentMeta?.view_id,
+          };
         }
 
         // Backward-compatible fallback: attach under the current database view.
-        return databasePageId;
+        return {
+          tabsParentViewId: databasePageId,
+          prevViewId: getLastChildViewId(currentMeta),
+        };
       })();
 
       // Create new view as a child of the database container (or document for embedded linked views).
       const response = await createDatabaseView(requestViewId, {
         parent_view_id: tabsParentViewId,
+        prev_view_id: prevViewId,
         database_id: databaseId,
         layout: viewLayout,
         name: nameOverride ?? name,

src/application/database-yjs/selector.ts

@@ -107,6 +107,26 @@ export function useDatabaseViewsSelector(databasePageId: string, visibleViewIds?
         }
       >;
 
+      const insertionOrder = new Map<string, number>();
+
+      const getCreatedAtSortValue = (viewId: string): number => {
+        const createdAt = views.get(viewId)?.get(YjsDatabaseKey.created_at);
+
+        if (!createdAt) {
+          return Number.POSITIVE_INFINITY;
+        }
+
+        const numericValue = Number(createdAt);
+
+        if (Number.isFinite(numericValue)) {
+          return numericValue;
+        }
+
+        const timestampValue = Date.parse(createdAt);
+
+        return Number.isFinite(timestampValue) ? timestampValue : Number.POSITIVE_INFINITY;
+      };
+
       // 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) => {
@@ -119,6 +139,10 @@ export function useDatabaseViewsSelector(databasePageId: string, visibleViewIds?
         return !isInline;
       });
 
+      allViewIds.forEach((viewId, index) => {
+        insertionOrder.set(viewId, index);
+      });
+
       // Step 2: Apply context-specific filtering (separate concerns)
       if (stableVisibleViewIds !== undefined && stableVisibleViewIds.length > 0) {
         // For embedded databases: show ONLY views in visibleViewIds
@@ -136,6 +160,16 @@ export function useDatabaseViewsSelector(databasePageId: string, visibleViewIds?
 
           return !isEmbedded;
         });
+
+        allViewIds.sort((left, right) => {
+          const createdAtDiff = getCreatedAtSortValue(left) - getCreatedAtSortValue(right);
+
+          if (createdAtDiff !== 0) {
+            return createdAtDiff;
+          }
+
+          return (insertionOrder.get(left) ?? 0) - (insertionOrder.get(right) ?? 0);
+        });
       }
 
       setViewIds(allViewIds);

src/application/services/js-services/http/page-api.ts

@@ -136,6 +136,7 @@ export async function createDatabaseView(workspaceId: string, viewId: string, pa
   return executeAPIRequest<CreateDatabaseViewResponse>(() =>
     getAxios()?.post<APIResponse<CreateDatabaseViewResponse>>(url, {
       parent_view_id: payload.parent_view_id,
+      prev_view_id: payload.prev_view_id,
       database_id: payload.database_id,
       layout: payload.layout,
       name: payload.name,

src/application/types.ts

@@ -1391,6 +1391,8 @@ export interface DuplicatePageOptions {
 
 export interface CreateDatabaseViewPayload {
   parent_view_id: string;
+  /** Insert the new database view after this sibling. When omitted the backend prepends. */
+  prev_view_id?: string;
   database_id: string;
   layout: ViewLayout;
   name?: string;