fix(infra): create template workspace with isolated nanoid (#4569)

apps/core/src/adapters/local/index.tsx

@@ -1,6 +1,5 @@
 import { DebugLogger } from '@affine/debug';
 import {
-  DEFAULT_HELLO_WORLD_PAGE_ID_SUFFIX,
   DEFAULT_WORKSPACE_NAME,
   PageNotFoundError,
 } from '@affine/env/constant';
@@ -61,8 +60,9 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
           logger.error('init page with preloading failed', err);
         });
       } else {
-        const page = blockSuiteWorkspace.createPage({
+        const page = blockSuiteWorkspace.createPage();
-          id: `${blockSuiteWorkspace.id}-${DEFAULT_HELLO_WORLD_PAGE_ID_SUFFIX}`,
+        blockSuiteWorkspace.setPageMeta(page.id, {
+          jumpOnce: true,
         });
         initEmptyPage(page).catch(error => {
           logger.error('init page with empty failed', error);

apps/core/src/pages/index.tsx

@@ -1,5 +1,4 @@
 import { DebugLogger } from '@affine/debug';
-import { DEFAULT_HELLO_WORLD_PAGE_ID_SUFFIX } from '@affine/env/constant';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { Menu } from '@toeverything/components/menu';
 import { getWorkspace } from '@toeverything/infra/__internal__/workspace';
@@ -32,10 +31,7 @@ export const loader: LoaderFunction = async () => {
     const nonTrashPages = targetWorkspace.meta.pageMetas.filter(
       ({ trash }) => !trash
     );
-    const helloWorldPage = nonTrashPages.find(
+    const helloWorldPage = nonTrashPages.find(({ jumpOnce }) => jumpOnce)?.id;
-      ({ id, jumpOnce }) =>
-        id.endsWith(DEFAULT_HELLO_WORLD_PAGE_ID_SUFFIX) && jumpOnce
-    )?.id;
     const pageId =
       nonTrashPages.find(({ id }) => id === lastPageId)?.id ??
       nonTrashPages.at(0)?.id;

packages/env/src/constant.ts

@@ -17,7 +17,6 @@ export const isDesktop = isBrowser && !!window.appInfo?.electron;
 //#endregion
 export const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
 export const UNTITLED_WORKSPACE_NAME = 'Untitled';
-export const DEFAULT_HELLO_WORLD_PAGE_ID_SUFFIX = 'hello-world';
 
 export const DEFAULT_SORT_KEY = 'updatedDate';
 export const MessageCode = {

packages/infra/src/blocksuite/index.ts

@@ -88,81 +88,84 @@ export async function buildShowcaseWorkspace(
     },
   };
   workspace.meta.setProperties(prototypes);
+  const edgelessPage1 = nanoid();
+  const edgelessPage2 = nanoid();
+  const edgelessPage3 = nanoid();
   const { store, atoms } = options;
-  ['F1SX6cgNxy', 'nQd2Bdvoqz', 'j8hIA_C0QF'].forEach(pageId => {
+  [edgelessPage1, edgelessPage2, edgelessPage3].forEach(pageId => {
     store.set(atoms.pageMode, pageId, 'edgeless');
   });
 
   const pageMetas = {
-    'gc5FeppNDv-hello-world': {
+    '9f6f3c04-cf32-470c-9648-479dc838f10e': {
       createDate: 1691548231530,
       tags: ['ZHBa2NtdSo', 'QYFD_HeQc-', 'wg-fBtd2eI'],
       updatedDate: 1691676331623,
       favorite: true,
       jumpOnce: true,
     },
-    F1SX6cgNxy: {
+    '0773e198-5de0-45d4-a35e-de22ea72b96b': {
       createDate: 1691548220794,
       tags: [],
       updatedDate: 1691676775642,
       favorite: false,
     },
-    '3R9X-gMh3m': {
+    '59b140eb-4449-488f-9eeb-42412dcc044e': {
       createDate: 1691551731225,
       tags: [],
       updatedDate: 1691654611175,
       favorite: false,
     },
-    z_v6LOqNpp: {
+    '7217fbe2-61db-4a91-93c6-ad5c800e5a43': {
       createDate: 1691552082822,
       tags: [],
       updatedDate: 1691654606912,
       favorite: false,
     },
-    '0N0WzwmtK_': {
+    '6eb43ea8-8c11-456d-bb1d-5193937961ab': {
       createDate: 1691552090989,
       tags: [],
       updatedDate: 1691646748171,
       favorite: false,
     },
-    '6gexHy-jto': {
+    '3ddc8a4f-62c7-4fd4-8064-9ed9f61e437a': {
       createDate: 1691564303138,
       tags: [],
       updatedDate: 1691646845195,
     },
-    nQd2Bdvoqz: {
+    '512b1cb3-d22d-4b20-a7aa-58e2afcb1238': {
       createDate: 1691574743531,
       tags: ['icg1n5UdkP'],
       updatedDate: 1691647117761,
     },
-    bj_cuI1tN7: {
+    '22163830-8252-43fe-b62d-fd9bbeaa4caa': {
       createDate: 1691574859042,
       tags: [],
       updatedDate: 1691648159371,
     },
-    fFoDX2J1Z5: {
+    'b7a9e1bc-e205-44aa-8dad-7e328269d00b': {
       createDate: 1691575011078,
       tags: ['8qcYPCTK0h'],
       updatedDate: 1691645074511,
       favorite: false,
     },
-    PqZ7MLlL_9: {
+    '646305d9-93e0-48df-bb92-d82944ceb5a3': {
       createDate: 1691634722239,
       tags: ['ze07JVwBu4'],
       updatedDate: 1691647069662,
       favorite: false,
     },
-    A4wBRdQZN0: {
+    '0350509d-8702-4797-b4d7-168f5e9359c7': {
       createDate: 1691635388447,
       tags: ['Oe5dSe1DDJ'],
       updatedDate: 1691645873930,
     },
-    kBB4lzhm7C: {
+    'aa02af3c-5c5c-4856-b7ce-947ad17331f3': {
       createDate: 1691636192263,
       tags: ['q3mceOl_zi', 'g1L5dXKctL'],
       updatedDate: 1691645102104,
     },
-    j8hIA_C0QF: {
+    '9d6e716e-a071-45a2-88ac-2f2f6eec0109': {
       createDate: 1691574743531,
       tags: ['icg1n5UdkP'],
       updatedDate: 1691574743531,
@@ -170,42 +173,100 @@ export async function buildShowcaseWorkspace(
   } satisfies Record<string, Partial<PageMeta>>;
   const data = [
     [
-      'gc5FeppNDv-hello-world',
+      '9f6f3c04-cf32-470c-9648-479dc838f10e',
       import('@affine/templates/v1/getting-started.json'),
+      nanoid(),
     ],
-    ['F1SX6cgNxy', import('@affine/templates/v1/preloading.json')],
-    ['3R9X-gMh3m', import('@affine/templates/v1/template-galleries.json')],
-    ['z_v6LOqNpp', import('@affine/templates/v1/personal-home.json')],
-    ['0N0WzwmtK_', import('@affine/templates/v1/working-home.json')],
     [
-      '6gexHy-jto',
+      '0773e198-5de0-45d4-a35e-de22ea72b96b',
+      import('@affine/templates/v1/preloading.json'),
+      edgelessPage1,
+    ],
+    [
+      '59b140eb-4449-488f-9eeb-42412dcc044e',
+      import('@affine/templates/v1/template-galleries.json'),
+      nanoid(),
+    ],
+    [
+      '7217fbe2-61db-4a91-93c6-ad5c800e5a43',
+      import('@affine/templates/v1/personal-home.json'),
+      nanoid(),
+    ],
+    [
+      '6eb43ea8-8c11-456d-bb1d-5193937961ab',
+      import('@affine/templates/v1/working-home.json'),
+      nanoid(),
+    ],
+    [
+      '3ddc8a4f-62c7-4fd4-8064-9ed9f61e437a',
       import('@affine/templates/v1/personal-project-management.json'),
+      nanoid(),
     ],
-    ['nQd2Bdvoqz', import('@affine/templates/v1/travel-plan.json')],
     [
-      'bj_cuI1tN7',
+      '512b1cb3-d22d-4b20-a7aa-58e2afcb1238',
+      import('@affine/templates/v1/travel-plan.json'),
+      edgelessPage2,
+    ],
+    [
+      '22163830-8252-43fe-b62d-fd9bbeaa4caa',
       import('@affine/templates/v1/personal-knowledge-management.json'),
+      nanoid(),
     ],
     [
-      'fFoDX2J1Z5',
+      'b7a9e1bc-e205-44aa-8dad-7e328269d00b',
       import('@affine/templates/v1/annual-performance-review.json'),
+      nanoid(),
+    ],
+    [
+      '646305d9-93e0-48df-bb92-d82944ceb5a3',
+      import('@affine/templates/v1/brief-event-planning.json'),
+      nanoid(),
+    ],
+    [
+      '0350509d-8702-4797-b4d7-168f5e9359c7',
+      import('@affine/templates/v1/meeting-summary.json'),
+      nanoid(),
+    ],
+    [
+      'aa02af3c-5c5c-4856-b7ce-947ad17331f3',
+      import('@affine/templates/v1/okr-template.json'),
+      nanoid(),
+    ],
+    [
+      '9d6e716e-a071-45a2-88ac-2f2f6eec0109',
+      import('@affine/templates/v1/travel-note.json'),
+      edgelessPage3,
     ],
-    ['PqZ7MLlL_9', import('@affine/templates/v1/brief-event-planning.json')],
-    ['A4wBRdQZN0', import('@affine/templates/v1/meeting-summary.json')],
-    ['kBB4lzhm7C', import('@affine/templates/v1/okr-template.json')],
-    ['j8hIA_C0QF', import('@affine/templates/v1/travel-note.json')],
   ] as const;
+  const idMap = await Promise.all(data).then(async data => {
+    return data.reduce<Record<string, string>>(
+      (record, currentValue) => {
+        const [oldId, _, newId] = currentValue;
+        record[oldId] = newId;
+        return record;
+      },
+      {} as Record<string, string>
+    );
+  });
   await Promise.all(
-    data.map(async ([id, promise]) => {
+    data.map(async ([id, promise, newId]) => {
       const { default: template } = await promise;
+      let json = JSON.stringify(template);
+      Object.entries(idMap).forEach(([oldId, newId]) => {
+        json = json.replaceAll(oldId, newId);
+      });
+      json = JSON.parse(json);
       await workspace
-        .importPageSnapshot(structuredClone(template), id)
+        .importPageSnapshot(structuredClone(json), newId)
         .catch(error => {
           console.error('error importing page', id, error);
         });
-      workspace.setPageMeta(id, pageMetas[id]);
     })
   );
+  Object.entries(pageMetas).forEach(([oldId, meta]) => {
+    const newId = idMap[oldId];
+    workspace.setPageMeta(newId, meta);
+  });
 }
 
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';

packages/templates/v1/getting-started.json

@@ -144,7 +144,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "F1SX6cgNxy"
+              "pageId": "0773e198-5de0-45d4-a35e-de22ea72b96b"
             }
           }
         },
@@ -177,7 +177,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "3R9X-gMh3m"
+              "pageId": "59b140eb-4449-488f-9eeb-42412dcc044e"
             }
           }
         },

packages/templates/v1/personal-home.json

@@ -49,7 +49,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "PqZ7MLlL_9"
+              "pageId": "646305d9-93e0-48df-bb92-d82944ceb5a3"
             }
           }
         }
@@ -67,7 +67,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "nQd2Bdvoqz"
+              "pageId": "512b1cb3-d22d-4b20-a7aa-58e2afcb1238"
             }
           }
         }
@@ -84,7 +84,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "bj_cuI1tN7"
+              "pageId": "22163830-8252-43fe-b62d-fd9bbeaa4caa"
             }
           }
         },

packages/templates/v1/template-galleries.json

@@ -111,7 +111,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "z_v6LOqNpp"
+              "pageId": "7217fbe2-61db-4a91-93c6-ad5c800e5a43"
             }
           }
         },
@@ -142,7 +142,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "0N0WzwmtK_"
+              "pageId": "6eb43ea8-8c11-456d-bb1d-5193937961ab"
             }
           }
         }

packages/templates/v1/travel-plan.json

@@ -680,7 +680,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "j8hIA_C0QF"
+              "pageId": "9d6e716e-a071-45a2-88ac-2f2f6eec0109"
             }
           }
         }

packages/templates/v1/working-home.json

@@ -65,7 +65,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "fFoDX2J1Z5"
+              "pageId": "b7a9e1bc-e205-44aa-8dad-7e328269d00b"
             }
           }
         }
@@ -114,7 +114,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "A4wBRdQZN0"
+              "pageId": "0350509d-8702-4797-b4d7-168f5e9359c7"
             }
           }
         }
@@ -179,7 +179,7 @@
           "attributes": {
             "reference": {
               "type": "LinkedPage",
-              "pageId": "kBB4lzhm7C"
+              "pageId": "aa02af3c-5c5c-4856-b7ce-947ad17331f3"
             }
           }
         }

tests/affine-cloud/e2e/basic.spec.ts

@@ -100,8 +100,8 @@ test.describe('basic', () => {
       timeout: 60000,
     });
     await page.goto(
-      // page 'F1SX6cgNxy' has edgeless mode
+      // page '0773e198-5de0-45d4-a35e-de22ea72b96b' has edgeless mode
-      `${coreUrl}/workspace/${workspaceId}/F1SX6cgNxy`
+      `${coreUrl}/workspace/${workspaceId}/0773e198-5de0-45d4-a35e-de22ea72b96b`
     );
     await waitForEditorLoad(page);
     await clickEdgelessModeButton(page);