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

packages/frontend/core/src/components/cloud/share-header-right-item/import-template.tsx

@@ -3,20 +3,18 @@ import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { useI18n } from '@affine/i18n';
 
 export const ImportTemplateButton = ({
-  workspaceId,
-  docId,
   name,
+  snapshotUrl,
 }: {
-  workspaceId: string;
-  docId: string;
   name: string;
+  snapshotUrl: string;
 }) => {
   const t = useI18n();
   const { jumpToImportTemplate } = useNavigateHelper();
   return (
     <Button
       variant="primary"
-      onClick={() => jumpToImportTemplate(workspaceId, docId, name)}
+      onClick={() => jumpToImportTemplate(name, snapshotUrl)}
     >
       {t['com.affine.share-page.header.import-template']()}
     </Button>

packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx

@@ -9,19 +9,17 @@ import * as styles from './styles.css';
 import { PublishPageUserAvatar } from './user-avatar';
 
 export type ShareHeaderRightItemProps = {
-  workspaceId: string;
-  docId: string;
   publishMode: DocMode;
   isTemplate?: boolean;
   templateName?: string;
+  snapshotUrl?: string;
 };
 
 const ShareHeaderRightItem = ({
   publishMode,
   isTemplate,
   templateName,
-  workspaceId,
+  snapshotUrl,
-  docId,
 }: ShareHeaderRightItemProps) => {
   const loginStatus = useLiveData(useService(AuthService).session.status$);
   const authenticated = loginStatus === 'authenticated';
@@ -29,9 +27,8 @@ const ShareHeaderRightItem = ({
     <div className={styles.rightItemContainer}>
       {isTemplate ? (
         <ImportTemplateButton
-          docId={docId}
-          workspaceId={workspaceId}
           name={templateName ?? ''}
+          snapshotUrl={snapshotUrl ?? ''}
         />
       ) : (
         <>

packages/frontend/core/src/hooks/use-navigate-helper.ts

@@ -183,9 +183,9 @@ export function useNavigateHelper() {
   );
 
   const jumpToImportTemplate = useCallback(
-    (workspaceId: string, docId: string, name: string) => {
+    (name: string, snapshotUrl: string) => {
       return navigate(
-        `/template/import?workspaceId=${encodeURIComponent(workspaceId)}&docId=${encodeURIComponent(docId)}&name=${encodeURIComponent(name)}`
+        `/template/import?name=${encodeURIComponent(name)}&snapshotUrl=${encodeURIComponent(snapshotUrl)}`
       );
     },
     [navigate]

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<{
+  readonly template$ = new LiveData<TemplateOptions | null>(null);
-    workspaceId: string;
-    docId: string;
-    templateName: string;
-  } | null>(null);
 
-  open(workspaceId: string, docId: string, templateName: string) {
+  open(options: TemplateOptions) {
-    this.template$.next({ workspaceId, docId, templateName });
+    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(
+    switchMap(({ snapshotUrl }: { snapshotUrl: string }) => {
-      ({ workspaceId, docId }: { workspaceId: string; docId: string }) => {
+      return fromPromise(() => this.store.download(snapshotUrl)).pipe(
-        return fromPromise(() => this.store.download(workspaceId, docId)).pipe(
+        mergeMap(({ data }) => {
-          mergeMap(({ data }) => {
+          this.data$.next(data);
-            this.data$.next(data);
+          return EMPTY;
-            return EMPTY;
+        }),
-          }),
+        backoffRetry({
-          backoffRetry({
+          when: isNetworkError,
-            when: isNetworkError,
+          count: Infinity,
-            count: Infinity,
+        }),
-          }),
+        backoffRetry({
-          backoffRetry({
+          when: isBackendError,
-            when: isBackendError,
+        }),
-          }),
+        catchErrorInto(this.error$),
-          catchErrorInto(this.error$),
+        onStart(() => {
-          onStart(() => {
+          this.isDownloading$.next(true);
-            this.isDownloading$.next(true);
+          this.data$.next(null);
-            this.data$.next(null);
+          this.error$.next(null);
-            this.error$.next(null);
+        }),
-          }),
+        onComplete(() => this.isDownloading$.next(false))
-          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(
+  async download(snapshotUrl: string) {
-    /* not support workspaceid for now */ _workspaceId: string,
+    const response = await this.fetchService.fetch(snapshotUrl, {
-    docId: string
+      priority: 'high',
-  ) {
+    } as any);
-    const response = await this.fetchService.fetch(
-      `https://affine.pro/templates/snapshots/${docId}.zip `,
-      {
-        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=' +
+        '/template/import?' +
-          workspaceId +
-          '&docId=' +
-          docId +
           '&name=' +
-          templateName
+          templateName +
+          '&snapshotUrl=' +
+          snapshotUrl
       );
       onClose?.();
     }
   }, [
-    docId,
     isSessionRevalidating,
     jumpToSignIn,
     notLogin,
     onClose,
+    snapshotUrl,
     templateName,
-    workspaceId,
   ]);
 
   useEffect(() => {
-    templateDownloader.download({ workspaceId, docId });
+    templateDownloader.download({ snapshotUrl });
-  }, [docId, templateDownloader, workspaceId]);
+  }, [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()}
         />
       )}

packages/frontend/core/src/pages/import-template.tsx

@@ -10,11 +10,10 @@ export const Component = () => {
   const [searchParams] = useSearchParams();
   const { jumpToIndex } = useNavigateHelper();
   useEffect(() => {
-    importTemplateDialogService.dialog.open(
+    importTemplateDialogService.dialog.open({
-      searchParams.get('workspaceId') ?? '',
+      templateName: searchParams.get('name') ?? '',
-      searchParams.get('docId') ?? '',
+      snapshotUrl: searchParams.get('snapshotUrl') ?? '',
-      searchParams.get('name') ?? ''
+    });
-    );
   }, [importTemplateDialogService.dialog, jumpToIndex, searchParams]);
   // no ui for this route, just open the dialog
   return null;

packages/frontend/core/src/pages/workspace/share/share-header.tsx

@@ -3,22 +3,21 @@ import { BlocksuiteHeaderTitle } from '@affine/core/components/blocksuite/block-
 import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch';
 import ShareHeaderRightItem from '@affine/core/components/cloud/share-header-right-item';
 import type { DocMode } from '@blocksuite/blocks';
-import type { DocCollection } from '@blocksuite/store';
 
 import * as styles from './share-header.css';
 
 export function ShareHeader({
   pageId,
   publishMode,
-  docCollection,
   isTemplate,
   templateName,
+  snapshotUrl,
 }: {
   pageId: string;
   publishMode: DocMode;
-  docCollection: DocCollection;
   isTemplate?: boolean;
   templateName?: string;
+  snapshotUrl?: string;
 }) {
   return (
     <div className={styles.header}>
@@ -26,10 +25,9 @@ export function ShareHeader({
       <BlocksuiteHeaderTitle docId={pageId} />
       <div className={styles.spacer} />
       <ShareHeaderRightItem
-        workspaceId={docCollection.id}
-        docId={pageId}
         publishMode={publishMode}
         isTemplate={isTemplate}
+        snapshotUrl={snapshotUrl}
         templateName={templateName}
       />
       <AuthModal />

packages/frontend/core/src/pages/workspace/share/share-page.tsx

@@ -57,19 +57,21 @@ export const SharePage = ({
 
   const location = useLocation();
 
-  const { mode, isTemplate, templateName } = useMemo(() => {
+  const { mode, isTemplate, templateName, templateSnapshotUrl } =
-    const searchParams = new URLSearchParams(location.search);
+    useMemo(() => {
-    const queryStringMode = searchParams.get('mode') as DocMode | null;
+      const searchParams = new URLSearchParams(location.search);
+      const queryStringMode = searchParams.get('mode') as DocMode | null;
 
-    return {
+      return {
-      mode:
+        mode:
-        queryStringMode && DocModes.includes(queryStringMode)
+          queryStringMode && DocModes.includes(queryStringMode)
-          ? queryStringMode
+            ? queryStringMode
-          : null,
+            : null,
-      isTemplate: searchParams.has('isTemplate'),
+        isTemplate: searchParams.has('isTemplate'),
-      templateName: searchParams.get('templateName') || '',
+        templateName: searchParams.get('templateName') || '',
-    };
+        templateSnapshotUrl: searchParams.get('snapshotUrl') || '',
-  }, [location.search]);
+      };
+    }, [location.search]);
 
   useEffect(() => {
     shareReaderService.reader.loadShare({ workspaceId, docId });
@@ -94,6 +96,7 @@ export const SharePage = ({
         publishMode={mode || data.publishMode}
         isTemplate={isTemplate}
         templateName={templateName}
+        templateSnapshotUrl={templateSnapshotUrl}
       />
     );
   } else {
@@ -109,6 +112,7 @@ const SharePageInner = ({
   publishMode = 'page' as DocMode,
   isTemplate,
   templateName,
+  templateSnapshotUrl,
 }: {
   workspaceId: string;
   docId: string;
@@ -117,6 +121,7 @@ const SharePageInner = ({
   publishMode?: DocMode;
   isTemplate?: boolean;
   templateName?: string;
+  templateSnapshotUrl?: string;
 }) => {
   const workspacesService = useService(WorkspacesService);
 
@@ -227,9 +232,9 @@ const SharePageInner = ({
                   <ShareHeader
                     pageId={page.id}
                     publishMode={publishMode}
-                    docCollection={page.blockSuiteDoc.collection}
                     isTemplate={isTemplate}
                     templateName={templateName}
+                    snapshotUrl={templateSnapshotUrl}
                   />
                   <Scrollable.Root>
                     <Scrollable.Viewport

packages/frontend/core/src/router.tsx

@@ -101,9 +101,14 @@ export const topLevelRoutes = [
           const workspaceId = url.searchParams.get('workspaceId');
           const docId = url.searchParams.get('docId');
           const templateName = url.searchParams.get('name');
+          const snapshotUrl = url.searchParams.get('snapshotUrl');
 
           return redirect(
-            `/workspace/${workspaceId}/${docId}?isTemplate=true&templateName=${encodeURIComponent(templateName ?? '')}`
+            `/workspace/${workspaceId}/${docId}?${new URLSearchParams({
+              isTemplate: 'true',
+              templateName: templateName ?? '',
+              snapshotUrl: snapshotUrl ?? '',
+            }).toString()}`
           );
         },
       },