feat(entities): store images as IDs, not plain objects (#557)

packages/demo-api/src/install.js

@@ -2,10 +2,11 @@ import config from "./configs";
 import { registerPlugins } from "webiny-plugins";
 import installer from "webiny-install";
 
+import filesPlugins from "webiny-api-files/install/plugins";
 import securityPlugins from "webiny-api-security/install/plugins";
 import cmsPlugins from "webiny-api-cms/install/plugins";
 
-registerPlugins(securityPlugins, cmsPlugins);
+registerPlugins(filesPlugins, securityPlugins, cmsPlugins);
 
 export const install = async (context = {}) => {
     await installer({

packages/demo-api/tasks/exportBlocks/exportBlocks.js

@@ -7,7 +7,7 @@ import { blue, green } from "chalk";
 const pwd: string = (process.cwd(): any);
 
 const copyImage = (srcFilename, targetFilename = null) => {
-    const src = `${pwd}/static/${srcFilename}`;
+    const src = `${pwd}/../../.files/${srcFilename}`;
     const dest = `${pwd}/../webiny-api-cms/src/install/plugins/importData/blocks/images/${targetFilename ||
         srcFilename}`;
     fs.copySync(src, dest);
@@ -29,12 +29,14 @@ export default async () => {
         .toArray();
 
     const exportedBlocks = [];
+    const exportedFiles = [];
 
     for (let i = 0; i < blocks.length; i++) {
         const data = blocks[i];
         // Copy images.
-        const regex = /\/files\/(.*?)"/gm;
-        const str = JSON.stringify(data.content);
+        const regex = /(image|file|preview)":"([a-f0-9]{24})"/gm;
+
+        const str = JSON.stringify(data);
         let m;
 
         console.log(`===========================\n> Block: ${data.name}`);
@@ -44,13 +46,27 @@ export default async () => {
                 regex.lastIndex++;
             }
 
-            const filename = m[1];
-
-            console.log(`${green("> Copy image:")} ${filename}`);
-            copyImage(filename);
+            if (Array.isArray(m)) {
+                const [, , id] = m;
+                if (exportedFiles.find(item => item.id === id)) {
+                    continue;
+                }
+                const file = await database.mongodb.collection("File").findOne({ id });
+                if (!file.meta) {
+                    file.meta = {};
+                }
+                file.meta.private = true;
+
+                file.name = file.src.match(/\/files\/(.*)/);
+                file.name = file.name[1];
+
+                exportedFiles.push(file);
+                console.log(`${green("> Copy image:")} ${file.name}`);
+                copyImage(file.name);
+            }
         }
 
-        console.log(`${blue("> Copy preview:")} ${data.preview.src}`);
+       /* console.log(`${blue("> Copy preview:")} ${data.preview.src}`);
         const previewName = data.preview.src.match(/\/files\/(.*)/)[1];
         let targetName = previewName;
         if (!targetName.startsWith("cms-element-")) {
@@ -59,7 +75,7 @@ export default async () => {
             data.preview.name = targetName;
             data.preview.src = data.preview.src.replace(previewName, targetName);
         }
-        copyImage(previewName, targetName);
+        copyImage(previewName, targetName);*/
 
         exportedBlocks.push(data);
     }
@@ -68,7 +84,8 @@ export default async () => {
     const index = [
         "// NOTE: THIS FILE IS AUTO-GENERATED. MANUAL CHANGES OF THIS FILE WILL BE LOST!\n",
         "",
-        `export const blocks = [${exportedBlocks.map(b => JSON.stringify(b)).join(",\n")}];`
+        `export const blocks = [${exportedBlocks.map(b => JSON.stringify(b)).join(",\n")}];`,
+        `export const files = [${exportedFiles.map(f => JSON.stringify(f)).join(",\n")}];`
     ].join("\n");
 
     console.log("\n> Writing index file...");

packages/demo-api/tasks/exportPages/exportPages.js

@@ -9,7 +9,7 @@ import inquirer from "inquirer";
 const pwd: string = (process.cwd(): any);
 
 const copyImage = (srcFilename, targetFilename = null) => {
-    const src = `${pwd}/static/${srcFilename}`;
+    const src = `${pwd}/../../.files/${srcFilename}`;
     const dest = `${pwd}/../webiny-api-cms/src/install/plugins/importData/pages/images/${targetFilename ||
         srcFilename}`;
 
@@ -26,7 +26,7 @@ const writeIndexFile = content => {
     fs.writeFileSync(dest, content);
 };
 
-const omitAttributes = obj => {
+const omitPageAttributes = obj => {
     return omit(obj, [
         "savedOn",
         "createdOn",
@@ -61,25 +61,27 @@ export default async () => {
     ]);
 
     // Filter pages
-    pages = pages.filter(p => answers.pages.includes(p.id)).map(omitAttributes);
+    pages = pages.filter(p => answers.pages.includes(p.id)).map(omitPageAttributes);
 
     // Get categories
     const categories = (await database.mongodb
         .collection("CmsCategory")
         .find()
-        .toArray()).map(omitAttributes);
+        .toArray()).map(omitPageAttributes);
 
     // Get menus
     const menus = (await database.mongodb
         .collection("CmsMenu")
         .find()
-        .toArray()).map(omitAttributes);
+        .toArray()).map(omitPageAttributes);
+
+    const exportedFiles = [];
 
     // Copy page files
     for (let i = 0; i < pages.length; i++) {
         const data = pages[i];
-        const regex = /\/files\/(.*?)"/gm;
-        const str = JSON.stringify(data.content);
+        const regex = /(image|file)":"([a-f0-9]{24})"/gm;
+        const str = JSON.stringify(data);
         let m;
 
         console.log(`===========================\n> Page: ${data.title}`);
@@ -89,7 +91,23 @@ export default async () => {
                 regex.lastIndex++;
             }
 
-            copyImage(m[1]);
+            if (Array.isArray(m)) {
+                const [, , id] = m;
+                if (exportedFiles.find(item => item.id === id)) {
+                    continue;
+                }
+                const file = await database.mongodb.collection("File").findOne({ id });
+                if (!file.meta) {
+                    file.meta = {};
+                }
+                file.meta.private = true;
+
+                file.name = file.src.match(/\/files\/(.*)/);
+                file.name = file.name[1];
+
+                exportedFiles.push(file);
+                copyImage(file.name);
+            }
         }
 
         // Copy page image from settings
@@ -111,6 +129,7 @@ export default async () => {
         "",
         `export const categories = [${categories.map(c => JSON.stringify(c)).join(", ")}];`,
         `export const pages = [${pages.map(p => JSON.stringify(p)).join(", ")}];`,
+        `export const files = [${exportedFiles.map(f => JSON.stringify(f)).join(", ")}];`,
         `export const menus = [${menus.map(m => JSON.stringify(m)).join(", ")}];`
     ].join("\n");
 

packages/webiny-admin/src/components/FileManager.js

@@ -53,7 +53,7 @@ class FileManagerPortal extends React.Component<*> {
 
         const props = {
             onChange: files => {
-                const fields = ["name", "src", "size", "type"];
+                const fields = ["id", "name", "src", "size", "type"];
                 if (Array.isArray(files)) {
                     onChange(files.map(file => pick(file, fields)));
                 } else {

packages/webiny-admin/src/components/FileManager/graphql.js

@@ -3,6 +3,7 @@ import gql from "graphql-tag";
 const fileFields = /* GraphQL */ `
     {
         __typename
+        id
         name
         src
         size

packages/webiny-api-cms/src/entities/CmsSettings.entity.js

@@ -1,17 +1,19 @@
 // @flow
 import { settingsFactory } from "webiny-api/entities";
+import { EntityModel } from "webiny-entity";
 import { Model } from "webiny-model";
-import FileModel from "./File.model";
 
-class SocialMediaModel extends Model {
-    constructor() {
-        super();
-        this.attr("facebook").char();
-        this.attr("twitter").char();
-        this.attr("instagram").char();
-        this.attr("image").model(FileModel);
-    }
-}
+const createSocialMediaModel = context =>
+    class SocialMediaModel extends EntityModel {
+        constructor() {
+            super();
+            this.setParentEntity(context.settings);
+            this.attr("facebook").char();
+            this.attr("twitter").char();
+            this.attr("instagram").char();
+            this.attr("image").entity(context.files.entities.File);
+        }
+    };
 
 class CmsSettingsPagesModel extends Model {
     constructor() {
@@ -23,22 +25,23 @@ class CmsSettingsPagesModel extends Model {
     }
 }
 
-const cmsSettingsModelFactory = () => {
-    return class CmsSettingsModel extends Model {
+const createCmsSettingsModel = context => {
+    return class CmsSettingsModel extends EntityModel {
         constructor() {
             super();
+            this.setParentEntity(context.settings);
             this.attr("pages").model(CmsSettingsPagesModel);
             this.attr("name").char();
             this.attr("domain").char();
-            this.attr("favicon").model(FileModel);
-            this.attr("logo").model(FileModel);
-            this.attr("social").model(SocialMediaModel);
+            this.attr("favicon").entity(context.files.entities.File);
+            this.attr("logo").entity(context.files.entities.File);
+            this.attr("social").model(createSocialMediaModel(context));
         }
     };
 };
 
-export const cmsSettingsFactory = (...args: Array<*>) => {
-    return class CmsSettings extends settingsFactory(...args) {
+export const cmsSettingsFactory = (context: Object) => {
+    return class CmsSettings extends settingsFactory(context) {
         static key = "cms";
         static classId = "CmsSettings";
         static collectionName = "Settings";
@@ -48,7 +51,7 @@ export const cmsSettingsFactory = (...args: Array<*>) => {
 
         constructor() {
             super();
-            this.attr("data").model(cmsSettingsModelFactory());
+            this.attr("data").model(createCmsSettingsModel({ ...context, settings: this }));
         }
     };
 };

packages/webiny-api-cms/src/entities/Element.entity.js

@@ -1,6 +1,6 @@
 // @flow
 import { Entity } from "webiny-entity";
-import FileModel from "./File.model";
+import createContentAttribute from "./Page/ContentAttribute";
 
 type ElementType = "element" | "block";
 
@@ -12,7 +12,7 @@ export interface IElement extends Entity {
     preview: Object;
 }
 
-export function elementFactory(): Class<IElement> {
+export function elementFactory(context): Class<IElement> {
     return class Element extends Entity {
         static classId = "CmsElement";
 
@@ -24,20 +24,16 @@ export function elementFactory(): Class<IElement> {
 
         constructor() {
             super();
-
             this.attr("name")
                 .char()
                 .setValidators("required");
-
             this.attr("category").char();
-
-            this.attr("content").object();
-
+            this.attr("content").custom(createContentAttribute(context));
             this.attr("type")
                 .char()
                 .setValidators("required,in:element:block");
 
-            this.attr("preview").model(FileModel);
+            this.attr("preview").entity(context.files.entities.File);
         }
     };
 }

packages/webiny-api-cms/src/entities/Page.entity.js

@@ -3,6 +3,7 @@ import { Entity, type EntityCollection } from "webiny-entity";
 import type { ICategory } from "./Category.entity";
 import pageSettingsFactory from "./PageSettings.model";
 import mdbid from "mdbid";
+import createContentAttribute from "./Page/ContentAttribute";
 
 export interface IPage extends Entity {
     createdBy: Entity;
@@ -76,11 +77,11 @@ export const pageFactory = (context: Object): Class<IPage> => {
                 .onSet(value => (this.locked ? this.url : value));
 
             this.attr("content")
-                .object()
+                .custom(createContentAttribute(context))
                 .onSet(value => (this.locked ? this.content : value));
 
             this.attr("settings")
-                .model(pageSettingsFactory({ entities: cms.entities, page: this }))
+                .model(pageSettingsFactory({ ...context, page: this }))
                 .onSet(value => (this.locked ? this.settings : value));
 
             this.attr("version").integer();