fix: render blocks when previewing (instead of using preview image) (w…

…ebiny#3329)

packages/api-page-builder-import-export/src/export/process/exporters/BlockExporter.ts

@@ -4,7 +4,7 @@ import Zipper from "~/export/zipper";
 import { extractFilesFromData } from "~/export/utils";
 
 export interface ExportedBlockData {
-    block: Pick<PageBlock, "name" | "content" | "preview">;
+    block: Pick<PageBlock, "name" | "content">;
     category: BlockCategory;
     files: File[];
 }
@@ -26,21 +26,12 @@ export class BlockExporter {
             const [filesData] = await this.fileManager.listFiles({ where: { id_in: fileIds } });
             imageFilesData.push(...filesData);
         }
-        // Add block preview image file data
-        if (block.preview.id) {
-            const previewImage = await this.getPreviewImageFile(block);
-            if (previewImage) {
-                imageFilesData.push(previewImage);
-                block.preview.id = previewImage.id;
-            }
-        }
 
         // Extract the block data in a json file and upload it to S3
         const blockData = {
             block: {
                 name: block.name,
-                content: block.content,
-                preview: block.preview
+                content: block.content
             },
             category: {
                 name: blockCategory.name,
@@ -63,16 +54,4 @@ export class BlockExporter {
 
         return zipper.process();
     }
-
-    private async getPreviewImageFile(block: PageBlock): Promise<File | undefined> {
-        // For BC, we need to check 2 IDs: the preview `id` and the `id` from the file URL.
-        const idFromSrc = block.preview.src?.split("/files/")[1].split("/")[0];
-        const possibleIds = [block.preview.id, idFromSrc].filter(Boolean);
-
-        const [files] = await this.fileManager.listFiles({
-            where: { id_in: possibleIds, meta: { private: true } }
-        });
-
-        return files[0];
-    }
 }

packages/api-page-builder-import-export/src/export/utils.ts

@@ -1,4 +1,165 @@
-import { File } from "@webiny/api-file-manager/types";
+import S3 from "aws-sdk/clients/s3";
+import { BlockCategory, Page, PageBlock, PageTemplate } from "@webiny/api-page-builder/types";
+import { FileManagerContext, File } from "@webiny/api-file-manager/types";
+import get from "lodash/get";
+import Zipper from "./zipper";
+
+export const EXPORT_PAGES_FOLDER_KEY = "WEBINY_PB_EXPORT_PAGES";
+export const EXPORT_BLOCKS_FOLDER_KEY = "WEBINY_PB_EXPORT_BLOCK";
+export const EXPORT_TEMPLATES_FOLDER_KEY = "WEBINY_PB_EXPORT_TEMPLATE";
+export const EXPORT_FORMS_FOLDER_KEY = "WEBINY_FB_EXPORT_FORM";
+
+export interface ExportedPageData {
+    page: Pick<Page, "content" | "title" | "version" | "status" | "settings" | "path">;
+    files: File[];
+}
+
+export async function exportPage(
+    page: Page,
+    exportPagesDataKey: string,
+    fileManager: FileManagerContext["fileManager"]
+): Promise<S3.ManagedUpload.SendData> {
+    // Extract all files
+    const files = extractFilesFromData(page.content || {});
+    // Extract images from page settings
+    const pageSettingsImages = [
+        get(page, "settings.general.image") as unknown as File,
+        get(page, "settings.social.image") as unknown as File
+    ].filter(image => image && image.src);
+
+    const fileIds = [...files, ...pageSettingsImages].map(imageFile => imageFile.id);
+    // Get file data for all images
+    const imageFilesData = [];
+    if (fileIds.length > 0) {
+        const [filesData] = await fileManager.listFiles({ where: { id_in: fileIds } });
+        imageFilesData.push(...filesData);
+    }
+
+    // Extract the page data in a json file and upload it to S3
+    const pageData = {
+        page: {
+            content: page.content,
+            title: page.title,
+            path: page.path,
+            version: page.version,
+            status: page.status,
+            settings: page.settings
+        },
+        files: imageFilesData
+    };
+    const pageDataBuffer = Buffer.from(JSON.stringify(pageData));
+
+    const zipper = new Zipper({
+        exportInfo: {
+            files: imageFilesData,
+            name: page.title,
+            dataBuffer: pageDataBuffer
+        },
+        archiveFileKey: exportPagesDataKey
+    });
+
+    return zipper.process();
+}
+
+export interface ExportedBlockData {
+    block: Pick<PageBlock, "name" | "content">;
+    category: BlockCategory;
+    files: File[];
+}
+
+export async function exportBlock(
+    block: PageBlock,
+    blockCategory: BlockCategory,
+    exportBlocksDataKey: string,
+    fileManager: FileManagerContext["fileManager"]
+): Promise<S3.ManagedUpload.SendData> {
+    // Extract all files
+    const files = extractFilesFromData(block.content || {});
+    const fileIds = files.map(imageFile => imageFile.id);
+    // Get file data for all images
+    const imageFilesData = [];
+    if (fileIds.length > 0) {
+        const [filesData] = await fileManager.listFiles({ where: { id_in: fileIds } });
+        imageFilesData.push(...filesData);
+    }
+
+    // Extract the block data in a json file and upload it to S3
+    const blockData = {
+        block: {
+            name: block.name,
+            content: block.content
+        },
+        category: {
+            name: blockCategory.name,
+            slug: blockCategory.slug,
+            icon: blockCategory.icon,
+            description: blockCategory.description
+        },
+        files: imageFilesData
+    };
+    const blockDataBuffer = Buffer.from(JSON.stringify(blockData));
+
+    const zipper = new Zipper({
+        exportInfo: {
+            files: imageFilesData,
+            name: block.name,
+            dataBuffer: blockDataBuffer
+        },
+        archiveFileKey: exportBlocksDataKey
+    });
+
+    return zipper.process();
+}
+
+export interface ExportedTemplateData {
+    template: Pick<
+        PageTemplate,
+        "title" | "slug" | "tags" | "description" | "content" | "layout" | "pageCategory"
+    >;
+    files: File[];
+}
+
+export async function exportTemplate(
+    template: PageTemplate,
+    exportTemplatesDataKey: string,
+    fileManager: FileManagerContext["fileManager"]
+): Promise<S3.ManagedUpload.SendData> {
+    // Extract all files
+    const files = extractFilesFromData(template.content || {});
+    const fileIds = files.map(imageFile => imageFile.id);
+    // Get file data for all images
+    const imageFilesData = [];
+    if (fileIds.length > 0) {
+        const [filesData] = await fileManager.listFiles({ where: { id_in: fileIds } });
+        imageFilesData.push(...filesData);
+    }
+
+    // Extract the template data in a json file and upload it to S3
+    const templateData = {
+        template: {
+            title: template.title,
+            slug: template.slug,
+            tags: template.tags,
+            description: template.description,
+            content: template.content,
+            layout: template.layout,
+            pageCategory: template.pageCategory
+        },
+        files: imageFilesData
+    };
+    const templateDataBuffer = Buffer.from(JSON.stringify(templateData));
+
+    const zipper = new Zipper({
+        exportInfo: {
+            files: imageFilesData,
+            name: template.title,
+            dataBuffer: templateDataBuffer
+        },
+        archiveFileKey: exportTemplatesDataKey
+    });
+
+    return zipper.process();
+}
 
 export function extractFilesFromData(data: Record<string, any>, files: File[] = []) {
     if (!data || typeof data !== "object") {

packages/api-page-builder-import-export/src/import/process/blocks/blocksHandler.ts

@@ -76,8 +76,7 @@ export const blocksHandler = async (
         const pbBlock = await context.pageBuilder.createPageBlock({
             name: block.name,
             blockCategory: block.blockCategory,
-            content: block.content,
-            preview: block.preview
+            content: block.content
         });
 
         // Update task record in DB

packages/api-page-builder-import-export/src/import/process/blocks/importBlock.ts

@@ -2,9 +2,8 @@ import path from "path";
 import dotProp from "dot-prop-immutable";
 import loadJson from "load-json-file";
 import { ensureDirSync, createWriteStream } from "fs-extra";
-import { FileInput } from "@webiny/api-file-manager/types";
 import { PbImportExportContext } from "~/graphql/types";
-import { File as ImageFile, FileUploadsData } from "~/types";
+import { FileUploadsData } from "~/types";
 import { PageBlock } from "@webiny/api-page-builder/types";
 import { s3Stream } from "~/export/s3Stream";
 import { uploadAssets } from "~/import/utils/uploadAssets";
@@ -21,17 +20,11 @@ interface ImportBlockParams {
     fileUploadsData: FileUploadsData;
 }
 
-interface UpdateBlockPreviewImage {
-    fileIdToNewFileMap: Map<string, FileInput>;
-    srcPrefix: string;
-    file: ImageFile;
-}
-
 export async function importBlock({
     blockKey,
     context,
     fileUploadsData
-}: ImportBlockParams): Promise<Pick<PageBlock, "name" | "content" | "preview" | "blockCategory">> {
+}: ImportBlockParams): Promise<Pick<PageBlock, "name" | "content" | "blockCategory">> {
     const log = console.log;
 
     // Making Directory for block in which we're going to extract the block data file.
@@ -78,15 +71,6 @@ export async function importBlock({
             fileIdToNewFileMap,
             srcPrefix
         });
-
-        block.preview = updateBlockPreviewImage({
-            /**
-             * Casting as this is only a type error.
-             */
-            file: (block.preview as ImageFile) || {},
-            fileIdToNewFileMap,
-            srcPrefix
-        });
     }
 
     let loadedCategory;
@@ -123,22 +107,3 @@ export async function importBlock({
 
     return { ...block, blockCategory: loadedCategory!.slug };
 }
-
-function updateBlockPreviewImage(params: UpdateBlockPreviewImage): ImageFile {
-    const { file: blockPreview, fileIdToNewFileMap, srcPrefix } = params;
-    const newFile = fileIdToNewFileMap.get(blockPreview.id || "");
-
-    if (!newFile) {
-        console.log("Block preview file not found!");
-        return blockPreview;
-    }
-
-    const srcPrefixWithoutTrailingSlash = srcPrefix.endsWith("/")
-        ? srcPrefix.slice(0, -1)
-        : srcPrefix;
-
-    blockPreview.id = newFile.id;
-    blockPreview.src = `${srcPrefixWithoutTrailingSlash}/${newFile.key}`;
-
-    return blockPreview;
-}

packages/api-page-builder/__tests__/graphql/blockCategories.test.ts

@@ -298,23 +298,20 @@ describe("Block Categories CRUD Test", () => {
             data: {
                 name: `page-block-one-name`,
                 blockCategory: `delete-block-cat`,
-                preview: { src: `https://test.com/page-block-one-name/src.jpg` },
                 content: { some: `page-block-one-content` }
             }
         }).then(([res]) => res.data.pageBuilder.createPageBlock.data);
         const b2 = await createPageBlock({
             data: {
                 name: `page-block-two-name`,
                 blockCategory: `delete-block-cat`,
-                preview: { src: `https://test.com/page-block-two-name/src.jpg` },
                 content: { some: `page-block-two-content` }
             }
         }).then(([res]) => res.data.pageBuilder.createPageBlock.data);
         const b3 = await createPageBlock({
             data: {
                 name: `page-block-three-name`,
                 blockCategory: `delete-block-cat`,
-                preview: { src: `https://test.com/page-block-three-name/src.jpg` },
                 content: { some: `page-block-three-content` }
             }
         }).then(([res]) => res.data.pageBuilder.createPageBlock.data);

packages/api-page-builder/__tests__/graphql/graphql/pageBlocks.ts

@@ -2,7 +2,6 @@ export const DATA_FIELD = /* GraphQL */ `
     {
         id
         blockCategory
-        preview
         name
         content
         createdOn

packages/api-page-builder/__tests__/graphql/graphql/pageElements.ts

@@ -2,7 +2,6 @@ export const DATA_FIELD = /* GraphQL */ `
     {
         id
         category
-        preview
         name
         content
         type

packages/api-page-builder/__tests__/graphql/lifecycleEvents.pageBlocks.test.ts

@@ -8,7 +8,6 @@ const blockCategory = "block-category-lifecycle-events";
 const pageBlockData = {
     name: "Page Block Lifecycle Events",
     blockCategory,
-    preview: { src: "https://test.com/src.jpg" },
     content: { some: "page-block-content" }
 };