feat(core): download template from snapshot url (#8211)

packages/frontend/core/src/modules/import-template/entities/dialog.ts

@@ -1,15 +1,16 @@
 import { Entity, LiveData } from '@toeverything/infra';
 
+interface TemplateOptions {
+  templateName: string;
+  snapshotUrl: string;
+}
+
 export class ImportTemplateDialog extends Entity {
   readonly isOpen$ = new LiveData(false);
-  readonly template$ = new LiveData<{
-    workspaceId: string;
-    docId: string;
-    templateName: string;
-  } | null>(null);
+  readonly template$ = new LiveData<TemplateOptions | null>(null);
 
-  open(workspaceId: string, docId: string, templateName: string) {
-    this.template$.next({ workspaceId, docId, templateName });
+  open(options: TemplateOptions) {
+    this.template$.next(options);
     this.isOpen$.next(true);
   }
 

packages/frontend/core/src/modules/import-template/entities/downloader.ts

@@ -23,29 +23,27 @@ export class TemplateDownloader extends Entity {
   readonly error$ = new LiveData<any | null>(null);
 
   readonly download = effect(
-    switchMap(
-      ({ workspaceId, docId }: { workspaceId: string; docId: string }) => {
-        return fromPromise(() => this.store.download(workspaceId, docId)).pipe(
-          mergeMap(({ data }) => {
-            this.data$.next(data);
-            return EMPTY;
-          }),
-          backoffRetry({
-            when: isNetworkError,
-            count: Infinity,
-          }),
-          backoffRetry({
-            when: isBackendError,
-          }),
-          catchErrorInto(this.error$),
-          onStart(() => {
-            this.isDownloading$.next(true);
-            this.data$.next(null);
-            this.error$.next(null);
-          }),
-          onComplete(() => this.isDownloading$.next(false))
-        );
-      }
-    )
+    switchMap(({ snapshotUrl }: { snapshotUrl: string }) => {
+      return fromPromise(() => this.store.download(snapshotUrl)).pipe(
+        mergeMap(({ data }) => {
+          this.data$.next(data);
+          return EMPTY;
+        }),
+        backoffRetry({
+          when: isNetworkError,
+          count: Infinity,
+        }),
+        backoffRetry({
+          when: isBackendError,
+        }),
+        catchErrorInto(this.error$),
+        onStart(() => {
+          this.isDownloading$.next(true);
+          this.data$.next(null);
+          this.error$.next(null);
+        }),
+        onComplete(() => this.isDownloading$.next(false))
+      );
+    })
   );
 }

packages/frontend/core/src/modules/import-template/services/import.ts

@@ -1,7 +1,7 @@
 import type { WorkspaceFlavour } from '@affine/env/workspace';
 import { ZipTransformer } from '@blocksuite/blocks';
 import type { WorkspaceMetadata, WorkspacesService } from '@toeverything/infra';
-import { Service } from '@toeverything/infra';
+import { DocsService, Service } from '@toeverything/infra';
 
 export class ImportTemplateService extends Service {
   constructor(private readonly workspacesService: WorkspacesService) {
@@ -23,7 +23,10 @@ export class ImportTemplateService extends Service {
         type: 'application/zip',
       })
     );
+    const docsService = workspace.scope.get(DocsService);
     if (importedDoc) {
+      // only support page mode for now
+      docsService.list.setPrimaryMode(importedDoc.id, 'page');
       disposeWorkspace();
       return importedDoc.id;
     } else {

packages/frontend/core/src/modules/import-template/store/downloader.ts

@@ -7,16 +7,10 @@ export class TemplateDownloaderStore extends Store {
     super();
   }
 
-  async download(
-    /* not support workspaceid for now */ _workspaceId: string,
-    docId: string
-  ) {
-    const response = await this.fetchService.fetch(
-      `https://affine.pro/templates/snapshots/${docId}.zip `,
-      {
-        priority: 'high',
-      } as any
-    );
+  async download(snapshotUrl: string) {
+    const response = await this.fetchService.fetch(snapshotUrl, {
+      priority: 'high',
+    } as any);
     const arrayBuffer = await response.arrayBuffer();
 
     return { data: new Uint8Array(arrayBuffer) };

packages/frontend/core/src/modules/import-template/views/dialog.tsx

@@ -23,14 +23,12 @@ import { ImportTemplateService } from '../services/import';
 import * as styles from './dialog.css';
 
 const Dialog = ({
-  workspaceId,
-  docId,
   templateName,
+  snapshotUrl,
   onClose,
 }: {
-  workspaceId: string;
-  docId: string;
   templateName: string;
+  snapshotUrl: string;
   onClose?: () => void;
 }) => {
   const t = useI18n();
@@ -69,28 +67,26 @@ const Dialog = ({
   useEffect(() => {
     if (!isSessionRevalidating && notLogin) {
       jumpToSignIn(
-        '/template/import?workspaceId=' +
-          workspaceId +
-          '&docId=' +
-          docId +
+        '/template/import?' +
           '&name=' +
-          templateName
+          templateName +
+          '&snapshotUrl=' +
+          snapshotUrl
       );
       onClose?.();
     }
   }, [
-    docId,
     isSessionRevalidating,
     jumpToSignIn,
     notLogin,
     onClose,
+    snapshotUrl,
     templateName,
-    workspaceId,
   ]);
 
   useEffect(() => {
-    templateDownloader.download({ workspaceId, docId });
-  }, [docId, templateDownloader, workspaceId]);
+    templateDownloader.download({ snapshotUrl });
+  }, [snapshotUrl, templateDownloader]);
 
   const handleSelectedWorkspace = useCallback(
     (workspaceMetadata: WorkspaceMetadata) => {
@@ -238,9 +234,8 @@ export const ImportTemplateDialogProvider = () => {
     >
       {template && (
         <Dialog
-          docId={template.docId}
           templateName={template.templateName}
-          workspaceId={template.workspaceId}
+          snapshotUrl={template.snapshotUrl}
           onClose={() => importTemplateDialogService.dialog.close()}
         />
       )}