@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/views/contentModels/fullDelete/useCancelDelete.js

@@ -0,0 +1,44 @@
+import { useApolloClient } from "../../../hooks/index.js";
+import { CANCEL_DELETE_CONTENT_MODEL } from "../../../viewsGraphql.js";
+import { updateModelInCache } from "../cache.js";
+import { useSnackbar } from "@webiny/app-admin";
+import { i18n } from "@webiny/app/i18n/index.js";
+const t = i18n.ns("app-headless-cms/admin/views/content-models/fully-delete-model");
+const useCancelDelete = ({ model })=>{
+    const client = useApolloClient();
+    const { showSnackbar } = useSnackbar();
+    return {
+        cancel: async ()=>{
+            await client.mutate({
+                mutation: CANCEL_DELETE_CONTENT_MODEL,
+                variables: {
+                    modelId: model.modelId
+                },
+                update (cache, { data }) {
+                    if (!data?.cancelFullyDeleteModel) return void showSnackbar("Missing data on Delete Content Model Mutation Response.");
+                    const error = data.cancelFullyDeleteModel.error;
+                    if (error) {
+                        showSnackbar(error.message, {
+                            title: t`Something unexpected happened.`
+                        });
+                        if ("MODEL_NOT_BEING_DELETED" === error.code || "DELETE_MODEL_NO_TASK_DEFINED" === error.code) updateModelInCache(cache, {
+                            ...model,
+                            isBeingDeleted: false
+                        });
+                        return;
+                    }
+                    updateModelInCache(cache, {
+                        ...model,
+                        isBeingDeleted: false
+                    });
+                    showSnackbar(t`Successfully canceled {name} deletion!.`({
+                        name: model.name
+                    }));
+                }
+            });
+        }
+    };
+};
+export { useCancelDelete };
+
+//# sourceMappingURL=useCancelDelete.js.map

package/admin/views/contentModels/fullDelete/useCancelDelete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/views/contentModels/fullDelete/useCancelDelete.js","sources":["../../../../../src/admin/views/contentModels/fullDelete/useCancelDelete.tsx"],"sourcesContent":["import type { CmsModel } from \"~/types.js\";\nimport { useApolloClient } from \"~/admin/hooks/index.js\";\nimport type {\n    ICancelDeleteCmsModelMutationResponse,\n    ICancelDeleteCmsModelMutationVariables\n} from \"~/admin/viewsGraphql.js\";\nimport { CANCEL_DELETE_CONTENT_MODEL } from \"~/admin/viewsGraphql.js\";\nimport { updateModelInCache } from \"../cache.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/views/content-models/fully-delete-model\");\n\nexport interface IUseCancelDeleteProps {\n    model: CmsModel;\n}\n\nexport const useCancelDelete = ({ model }: IUseCancelDeleteProps) => {\n    const client = useApolloClient();\n    const { showSnackbar } = useSnackbar();\n\n    return {\n        cancel: async () => {\n            await client.mutate<\n                ICancelDeleteCmsModelMutationResponse,\n                ICancelDeleteCmsModelMutationVariables\n            >({\n                mutation: CANCEL_DELETE_CONTENT_MODEL,\n                variables: {\n                    modelId: model.modelId\n                },\n                update(cache, { data }) {\n                    if (!data?.cancelFullyDeleteModel) {\n                        showSnackbar(\"Missing data on Delete Content Model Mutation Response.\");\n                        return;\n                    }\n                    const error = data.cancelFullyDeleteModel.error;\n\n                    if (error) {\n                        showSnackbar(error.message, {\n                            title: t`Something unexpected happened.`\n                        });\n                        /**\n                         * In case model is not being deleted or task is not defined in the data, just set the model to not being deleted.\n                         */\n                        if (\n                            error.code === \"MODEL_NOT_BEING_DELETED\" ||\n                            error.code === \"DELETE_MODEL_NO_TASK_DEFINED\"\n                        ) {\n                            updateModelInCache(cache, {\n                                ...model,\n                                isBeingDeleted: false\n                            });\n                        }\n                        return;\n                    }\n\n                    updateModelInCache(cache, {\n                        ...model,\n                        isBeingDeleted: false\n                    });\n\n                    showSnackbar(t`Successfully canceled {name} deletion!.`({ name: model.name }));\n                }\n            });\n        }\n    };\n};\n"],"names":["t","i18n","useCancelDelete","model","client","useApolloClient","showSnackbar","useSnackbar","CANCEL_DELETE_CONTENT_MODEL","cache","data","error","updateModelInCache"],"mappings":";;;;;AAWA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAMX,MAAMC,kBAAkB,CAAC,EAAEC,KAAK,EAAyB;IAC5D,MAAMC,SAASC;IACf,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,OAAO;QACH,QAAQ;YACJ,MAAMH,OAAO,MAAM,CAGjB;gBACE,UAAUI;gBACV,WAAW;oBACP,SAASL,MAAM,OAAO;gBAC1B;gBACA,QAAOM,KAAK,EAAE,EAAEC,IAAI,EAAE;oBAClB,IAAI,CAACA,MAAM,wBAAwB,YAC/BJ,aAAa;oBAGjB,MAAMK,QAAQD,KAAK,sBAAsB,CAAC,KAAK;oBAE/C,IAAIC,OAAO;wBACPL,aAAaK,MAAM,OAAO,EAAE;4BACxB,OAAOX,CAAC,CAAC,8BAA8B,CAAC;wBAC5C;wBAIA,IACIW,AAAe,8BAAfA,MAAM,IAAI,IACVA,AAAe,mCAAfA,MAAM,IAAI,EAEVC,mBAAmBH,OAAO;4BACtB,GAAGN,KAAK;4BACR,gBAAgB;wBACpB;wBAEJ;oBACJ;oBAEAS,mBAAmBH,OAAO;wBACtB,GAAGN,KAAK;wBACR,gBAAgB;oBACpB;oBAEAG,aAAaN,CAAC,CAAC,uCAAuC,CAAC,CAAC;wBAAE,MAAMG,MAAM,IAAI;oBAAC;gBAC/E;YACJ;QACJ;IACJ;AACJ"}

package/admin/views/contentModels/helpers/apiNameValidator.d.ts

@@ -0,0 +1,8 @@
+import type ApolloClient from "apollo-client";
+import type { CmsModel } from "../../../../types.js";
+interface Params {
+    models: CmsModel[];
+    client: ApolloClient<any>;
+}
+export declare const createApiNameValidator: (params: Params) => (name: string) => Promise<boolean>;
+export {};

package/admin/views/contentModels/helpers/apiNameValidator.js

@@ -0,0 +1,47 @@
+import upperFirst from "lodash/upperFirst.js";
+import camelCase from "lodash/camelCase.js";
+import graphql_tag from "graphql-tag";
+const disallowedModelIdEndingList = [
+    "Response",
+    "List",
+    "Meta",
+    "Input",
+    "Sorter"
+];
+const SCHEMA_TYPES = graphql_tag`
+    query ListSchemaTypes {
+        __schema {
+            types {
+                name
+            }
+        }
+    }
+`;
+const createApiNameValidator = (params)=>{
+    const { models, client } = params;
+    return async (name)=>{
+        const value = (name || "").trim();
+        if (value) {
+            if (!value.charAt(0).match(/[a-zA-Z]/)) throw new Error("The name can't start with a number.");
+        } else throw new Error("The name is required.");
+        const transformed = upperFirst(camelCase(value));
+        if (transformed !== value) throw new Error(`The name "${value}" must be in form of Upper First + Camel Cased word. For example: "ArticleCategory", "ArticleAuthor" or "BlogCategories".`);
+        for (const ending of disallowedModelIdEndingList){
+            const re = new RegExp(`${ending}$`, "i");
+            const matched = value.match(re);
+            if (null !== matched) throw new Error(`The name must not end with "${ending}".`);
+        }
+        if (models.some((m)=>m.singularApiName === value)) throw new Error(`"${name}" API name already exists. Please pick a different value.`);
+        if (models.some((m)=>m.pluralApiName === value)) throw new Error(`"${name}" API name already exists. Please pick a different value.`);
+        const { data } = await client.query({
+            query: SCHEMA_TYPES,
+            fetchPolicy: "network-only"
+        });
+        const types = data.__schema.types.map((t)=>t.name);
+        if (types.includes(transformed)) throw new Error(`"${name}" type already exists in the GraphQL schema. Please pick a different name.`);
+        return true;
+    };
+};
+export { createApiNameValidator };
+
+//# sourceMappingURL=apiNameValidator.js.map

package/admin/views/contentModels/helpers/apiNameValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/views/contentModels/helpers/apiNameValidator.js","sources":["../../../../../src/admin/views/contentModels/helpers/apiNameValidator.ts"],"sourcesContent":["import lodashUpperFirst from \"lodash/upperFirst.js\";\nimport lodashCamelCase from \"lodash/camelCase.js\";\nimport gql from \"graphql-tag\";\nimport type ApolloClient from \"apollo-client\";\nimport type { CmsModel } from \"~/types.js\";\n\n/**\n * This list is to disallow creating models that might interfere with GraphQL schema creation.\n * Add more if required.\n */\nconst disallowedModelIdEndingList: string[] = [\"Response\", \"List\", \"Meta\", \"Input\", \"Sorter\"];\n\nconst SCHEMA_TYPES = gql`\n    query ListSchemaTypes {\n        __schema {\n            types {\n                name\n            }\n        }\n    }\n`;\n\ninterface SchemaTypes {\n    __schema: {\n        types: { name: string }[];\n    };\n}\n\ninterface Params {\n    models: CmsModel[];\n    client: ApolloClient<any>;\n}\n\nexport const createApiNameValidator = (params: Params) => {\n    const { models, client } = params;\n    return async (name: string): Promise<boolean> => {\n        const value = (name || \"\").trim();\n        if (!value) {\n            throw new Error(\"The name is required.\");\n        } else if (!value.charAt(0).match(/[a-zA-Z]/)) {\n            throw new Error(\"The name can't start with a number.\");\n        }\n\n        const transformed = lodashUpperFirst(lodashCamelCase(value));\n        if (transformed !== value) {\n            throw new Error(\n                `The name \"${value}\" must be in form of Upper First + Camel Cased word. For example: \"ArticleCategory\", \"ArticleAuthor\" or \"BlogCategories\".`\n            );\n        }\n        /**\n         * We need to check for models that might interfere with GraphQL schema creation.\n         *\n         * First, there are some reserved words that we need to check for.\n         */\n        for (const ending of disallowedModelIdEndingList) {\n            const re = new RegExp(`${ending}$`, \"i\");\n            const matched = value.match(re);\n            if (matched === null) {\n                continue;\n            }\n            throw new Error(`The name must not end with \"${ending}\".`);\n        }\n        /**\n         * Then we check the GraphQL schema for types that might interfere with the model creation.\n         */\n        if (models.some(m => m.singularApiName === value)) {\n            throw new Error(`\"${name}\" API name already exists. Please pick a different value.`);\n        } else if (models.some(m => m.pluralApiName === value)) {\n            throw new Error(`\"${name}\" API name already exists. Please pick a different value.`);\n        }\n\n        // Validate GraphQL Schema type\n        const { data } = await client.query<SchemaTypes>({\n            query: SCHEMA_TYPES,\n            fetchPolicy: \"network-only\"\n        });\n\n        const types = data.__schema.types.map(t => t.name);\n\n        if (types.includes(transformed)) {\n            throw new Error(\n                `\"${name}\" type already exists in the GraphQL schema. Please pick a different name.`\n            );\n        }\n\n        return true;\n    };\n};\n"],"names":["disallowedModelIdEndingList","SCHEMA_TYPES","gql","createApiNameValidator","params","models","client","name","value","Error","transformed","lodashUpperFirst","lodashCamelCase","ending","re","RegExp","matched","m","data","types","t"],"mappings":";;;AAUA,MAAMA,8BAAwC;IAAC;IAAY;IAAQ;IAAQ;IAAS;CAAS;AAE7F,MAAMC,eAAeC,WAAG,CAAC;;;;;;;;AAQzB,CAAC;AAaM,MAAMC,yBAAyB,CAACC;IACnC,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGF;IAC3B,OAAO,OAAOG;QACV,MAAMC,QAASD,AAAAA,CAAAA,QAAQ,EAAC,EAAG,IAAI;QAC/B,IAAKC,OAEE;YAAA,IAAI,CAACA,MAAM,MAAM,CAAC,GAAG,KAAK,CAAC,aAC9B,MAAM,IAAIC,MAAM;QACpB,OAHI,MAAM,IAAIA,MAAM;QAKpB,MAAMC,cAAcC,WAAiBC,UAAgBJ;QACrD,IAAIE,gBAAgBF,OAChB,MAAM,IAAIC,MACN,CAAC,UAAU,EAAED,MAAM,yHAAyH,CAAC;QAQrJ,KAAK,MAAMK,UAAUb,4BAA6B;YAC9C,MAAMc,KAAK,IAAIC,OAAO,GAAGF,OAAO,CAAC,CAAC,EAAE;YACpC,MAAMG,UAAUR,MAAM,KAAK,CAACM;YAC5B,IAAIE,AAAY,SAAZA,SAGJ,MAAM,IAAIP,MAAM,CAAC,4BAA4B,EAAEI,OAAO,EAAE,CAAC;QAC7D;QAIA,IAAIR,OAAO,IAAI,CAACY,CAAAA,IAAKA,EAAE,eAAe,KAAKT,QACvC,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEF,KAAK,yDAAyD,CAAC;QAChF,IAAIF,OAAO,IAAI,CAACY,CAAAA,IAAKA,EAAE,aAAa,KAAKT,QAC5C,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEF,KAAK,yDAAyD,CAAC;QAIvF,MAAM,EAAEW,IAAI,EAAE,GAAG,MAAMZ,OAAO,KAAK,CAAc;YAC7C,OAAOL;YACP,aAAa;QACjB;QAEA,MAAMkB,QAAQD,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAACE,CAAAA,IAAKA,EAAE,IAAI;QAEjD,IAAID,MAAM,QAAQ,CAACT,cACf,MAAM,IAAID,MACN,CAAC,CAAC,EAAEF,KAAK,0EAA0E,CAAC;QAI5F,OAAO;IACX;AACJ"}

package/admin/views/contentModels/helpers/nameValidator.d.ts

@@ -0,0 +1,6 @@
+import type { CmsModel } from "../../../../types.js";
+interface Params {
+    models: CmsModel[];
+}
+export declare const createNameValidator: (params: Params) => (name: string) => Promise<boolean>;
+export {};

package/admin/views/contentModels/helpers/nameValidator.js

@@ -0,0 +1,21 @@
+import camelCase from "lodash/camelCase.js";
+const createNameValidator = (params)=>{
+    const { models } = params;
+    return async (name)=>{
+        const target = (name || "").trim();
+        if (target) if (target.charAt(0).match(/[a-zA-Z]/)) {
+            if (0 === models.length) return true;
+        } else throw new Error("The name can't start with a number.");
+        else throw new Error("The name is required.");
+        const modelId = camelCase(target);
+        const alreadyExists = models.some((model)=>{
+            if (model.name.toLowerCase() === target.toLowerCase()) return true;
+            return model.modelId.toLowerCase() === modelId.toLowerCase();
+        });
+        if (alreadyExists) throw new Error("This name is already taken.");
+        return true;
+    };
+};
+export { createNameValidator };
+
+//# sourceMappingURL=nameValidator.js.map

package/admin/views/contentModels/helpers/nameValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/views/contentModels/helpers/nameValidator.js","sources":["../../../../../src/admin/views/contentModels/helpers/nameValidator.ts"],"sourcesContent":["import lodashCamelCase from \"lodash/camelCase.js\";\nimport type { CmsModel } from \"~/types.js\";\n\ninterface Params {\n    models: CmsModel[];\n}\n\nexport const createNameValidator = (params: Params) => {\n    const { models } = params;\n    return async (name: string): Promise<boolean> => {\n        const target = (name || \"\").trim();\n        if (!target) {\n            throw new Error(\"The name is required.\");\n        } else if (!target.charAt(0).match(/[a-zA-Z]/)) {\n            throw new Error(\"The name can't start with a number.\");\n        } else if (models.length === 0) {\n            return true;\n        }\n\n        const modelId = lodashCamelCase(target);\n        const alreadyExists = models.some(model => {\n            if (model.name.toLowerCase() === target.toLowerCase()) {\n                return true;\n            }\n            return model.modelId.toLowerCase() === modelId.toLowerCase();\n        });\n        if (alreadyExists) {\n            throw new Error(`This name is already taken.`);\n        }\n\n        return true;\n    };\n};\n"],"names":["createNameValidator","params","models","name","target","Error","modelId","lodashCamelCase","alreadyExists","model"],"mappings":";AAOO,MAAMA,sBAAsB,CAACC;IAChC,MAAM,EAAEC,MAAM,EAAE,GAAGD;IACnB,OAAO,OAAOE;QACV,MAAMC,SAAUD,AAAAA,CAAAA,QAAQ,EAAC,EAAG,IAAI;QAChC,IAAKC,QAEE,IAAKA,OAAO,MAAM,CAAC,GAAG,KAAK,CAAC,aAE5B;YAAA,IAAIF,AAAkB,MAAlBA,OAAO,MAAM,EACpB,OAAO;QACX,OAHI,MAAM,IAAIG,MAAM;aAFhB,MAAM,IAAIA,MAAM;QAOpB,MAAMC,UAAUC,UAAgBH;QAChC,MAAMI,gBAAgBN,OAAO,IAAI,CAACO,CAAAA;YAC9B,IAAIA,MAAM,IAAI,CAAC,WAAW,OAAOL,OAAO,WAAW,IAC/C,OAAO;YAEX,OAAOK,MAAM,OAAO,CAAC,WAAW,OAAOH,QAAQ,WAAW;QAC9D;QACA,IAAIE,eACA,MAAM,IAAIH,MAAM;QAGpB,OAAO;IACX;AACJ"}

package/admin/views/contentModels/importing/ImportContentModelsDialog.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface ImportContentModelsDialogProps {
+    onClose: () => void;
+}
+export declare const ImportContentModelsDialog: (props: ImportContentModelsDialogProps) => React.JSX.Element;

package/admin/views/contentModels/importing/ImportContentModelsDialog.js

@@ -0,0 +1,42 @@
+import react, { useCallback } from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FileUpload } from "./components/FileUpload.js";
+import { Errors } from "./components/Errors.js";
+import { DataList } from "./components/DataList.js";
+import { DataListInstructions } from "./components/Model/DataListInstructions.js";
+import { ImportContextProvider } from "./ImportContext.js";
+import { Dialog, Loader } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/views/content-models/import-content-models-dialog");
+const ImportContentModelsDialog = (props)=>{
+    const { onClose } = props;
+    const onCloseClick = useCallback(()=>{
+        window.location.reload();
+        onClose();
+    }, [
+        onClose
+    ]);
+    return /*#__PURE__*/ react.createElement(ImportContextProvider, null, ({ loading, errors, validated, handleModelsImport, hasSelected, handleModelsValidation, file })=>{
+        const onClick = validated ? handleModelsImport : handleModelsValidation;
+        const disabledConfirm = errors.length > 0 || loading || !file || validated && !hasSelected();
+        return /*#__PURE__*/ react.createElement(Dialog, {
+            open: true,
+            onClose: onCloseClick,
+            "data-testid": "cms-import-content-models-modal",
+            title: t`Import Content Models`,
+            actions: /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+                onClick: onClick,
+                text: validated ? t`Import` : t`Validate file`,
+                disabled: disabledConfirm
+            })
+        }, loading ? /*#__PURE__*/ react.createElement(Loader, {
+            text: "Loading..."
+        }) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FileUpload, null), /*#__PURE__*/ react.createElement("div", {
+            className: "max-h-[50dvh] overflow-auto"
+        }, validated && /*#__PURE__*/ react.createElement(DataListInstructions, null), /*#__PURE__*/ react.createElement(Errors, {
+            errors: errors
+        }), /*#__PURE__*/ react.createElement(DataList, null))));
+    });
+};
+export { ImportContentModelsDialog };
+
+//# sourceMappingURL=ImportContentModelsDialog.js.map

package/admin/views/contentModels/importing/ImportContentModelsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/views/contentModels/importing/ImportContentModelsDialog.js","sources":["../../../../../src/admin/views/contentModels/importing/ImportContentModelsDialog.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { FileUpload } from \"./components/FileUpload.js\";\nimport { Errors } from \"./components/Errors.js\";\nimport { DataList } from \"./components/DataList.js\";\nimport { DataListInstructions } from \"./components/Model/DataListInstructions.js\";\nimport { ImportContextProvider } from \"~/admin/views/contentModels/importing/ImportContext.js\";\nimport { Dialog, Loader } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/views/content-models/import-content-models-dialog\");\n\nexport interface ImportContentModelsDialogProps {\n    onClose: () => void;\n}\n\nexport const ImportContentModelsDialog = (props: ImportContentModelsDialogProps) => {\n    const { onClose } = props;\n\n    const onCloseClick = useCallback(() => {\n        window.location.reload();\n        onClose();\n    }, [onClose]);\n\n    return (\n        <ImportContextProvider>\n            {({\n                loading,\n                errors,\n                validated,\n                handleModelsImport,\n                hasSelected,\n                handleModelsValidation,\n                file\n            }) => {\n                const onClick = validated ? handleModelsImport : handleModelsValidation;\n\n                const disabledConfirm =\n                    errors.length > 0 || loading || !file || (validated && !hasSelected());\n\n                return (\n                    <Dialog\n                        open={true}\n                        onClose={onCloseClick}\n                        data-testid=\"cms-import-content-models-modal\"\n                        title={t`Import Content Models`}\n                        actions={\n                            <Dialog.ConfirmAction\n                                onClick={onClick}\n                                text={validated ? t`Import` : t`Validate file`}\n                                disabled={disabledConfirm}\n                            />\n                        }\n                    >\n                        {loading ? (\n                            <Loader text={\"Loading...\"} />\n                        ) : (\n                            <>\n                                <FileUpload />\n                                <div className={\"max-h-[50dvh] overflow-auto\"}>\n                                    {validated && <DataListInstructions />}\n                                    <Errors errors={errors} />\n                                    <DataList />\n                                </div>\n                            </>\n                        )}\n                    </Dialog>\n                );\n            }}\n        </ImportContextProvider>\n    );\n};\n"],"names":["t","i18n","ImportContentModelsDialog","props","onClose","onCloseClick","useCallback","window","ImportContextProvider","loading","errors","validated","handleModelsImport","hasSelected","handleModelsValidation","file","onClick","disabledConfirm","Dialog","Loader","FileUpload","DataListInstructions","Errors","DataList"],"mappings":";;;;;;;;AASA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAMX,MAAMC,4BAA4B,CAACC;IACtC,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,MAAME,eAAeC,YAAY;QAC7BC,OAAO,QAAQ,CAAC,MAAM;QACtBH;IACJ,GAAG;QAACA;KAAQ;IAEZ,OAAO,WAAP,GACI,oBAACI,uBAAqBA,MACjB,CAAC,EACEC,OAAO,EACPC,MAAM,EACNC,SAAS,EACTC,kBAAkB,EAClBC,WAAW,EACXC,sBAAsB,EACtBC,IAAI,EACP;QACG,MAAMC,UAAUL,YAAYC,qBAAqBE;QAEjD,MAAMG,kBACFP,OAAO,MAAM,GAAG,KAAKD,WAAW,CAACM,QAASJ,aAAa,CAACE;QAE5D,OAAO,WAAP,GACI,oBAACK,QAAMA;YACH,MAAM;YACN,SAASb;YACT,eAAY;YACZ,OAAOL,CAAC,CAAC,qBAAqB,CAAC;YAC/B,uBACI,oBAACkB,OAAO,aAAa;gBACjB,SAASF;gBACT,MAAML,YAAYX,CAAC,CAAC,MAAM,CAAC,GAAGA,CAAC,CAAC,aAAa,CAAC;gBAC9C,UAAUiB;;WAIjBR,UAAU,WAAVA,GACG,oBAACU,QAAMA;YAAC,MAAM;2BAEd,wDACI,oBAACC,YAAUA,OAAAA,WAAAA,GACX,oBAAC;YAAI,WAAW;WACXT,aAAa,WAAbA,GAAa,oBAACU,sBAAoBA,OAAAA,WAAAA,GACnC,oBAACC,QAAMA;YAAC,QAAQZ;0BAChB,oBAACa,UAAQA;IAMjC;AAGZ"}

package/admin/views/contentModels/importing/ImportContext.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import type { CmsGroup, CmsModel } from "@webiny/app-headless-cms-common/types/index.js";
+import type { ImportGroupData, ImportModelData } from "./types.js";
+interface Data {
+    groups: CmsGroup[];
+    models: CmsModel[];
+}
+export interface OnFileCb {
+    (file: File): void;
+}
+export interface OnFileErrorCb {
+    (error: string): void;
+}
+export interface HandleModelsValidationCb {
+    (): Promise<void>;
+}
+export interface HandleModelsImportCb {
+    (): Promise<void>;
+}
+export interface IsModelSelectedCb {
+    (item: Pick<ImportModelData, "id">): boolean;
+}
+export interface IsModelRelatedCb {
+    (item: Pick<ImportModelData, "id">): boolean;
+}
+export interface AddModelCb {
+    (item: Pick<ImportModelData, "id" | "name" | "related">): void;
+}
+export interface RemoveModelCb {
+    (item: Pick<ImportModelData, "id" | "name" | "related">): void;
+}
+export interface ToggleModelCb {
+    (item: Pick<ImportModelData, "id" | "name" | "related">): void;
+}
+export interface ImportContextProperties {
+    data: Data | null;
+    loading: boolean;
+    groups?: ImportGroupData[];
+    models?: ImportModelData[];
+    hasSelected: () => boolean;
+    file: File | null;
+    errors: string[];
+    validated: boolean;
+    onFile: OnFileCb;
+    onFileError: OnFileErrorCb;
+    handleModelsValidation: HandleModelsValidationCb;
+    handleModelsImport: HandleModelsImportCb;
+    toggleModel: ToggleModelCb;
+    isModelSelected: IsModelSelectedCb;
+    isModelRelated: IsModelRelatedCb;
+}
+export declare const ImportContext: React.Context<ImportContextProperties | undefined>;
+export interface ImportContextProviderProps {
+    children: (props: ImportContextProperties) => React.ReactNode;
+}
+export declare const ImportContextProvider: ({ children }: ImportContextProviderProps) => React.JSX.Element;
+export {};

package/admin/views/contentModels/importing/ImportContext.js

@@ -0,0 +1,360 @@
+import react, { useCallback, useState } from "react";
+import { useApolloClient } from "../../../hooks/index.js";
+import { IMPORT_STRUCTURE, VALIDATE_IMPORT_STRUCTURE } from "./graphql.js";
+import { ImportAction } from "./types.js";
+import { useSnackbar } from "@webiny/app-admin";
+const parseFileData = (input)=>{
+    let data = {};
+    try {
+        data = JSON.parse(input);
+    } catch  {
+        throw new Error("Could not parse the uploaded file. Make sure it's a valid JSON file.");
+    }
+    if (data.groups?.length || data.models?.length) {
+        if (0 === data.groups.length) throw new Error("No groups in the uploaded file. There must be at least one group.");
+    } else throw new Error("No groups and models in the uploaded file.");
+    return {
+        groups: data.groups,
+        models: data.models
+    };
+};
+const parseFileContent = (content)=>{
+    if (content) {
+        if (content instanceof ArrayBuffer) {
+            const data = Buffer.from(content).toString("utf8");
+            return parseFileData(data);
+        }
+    } else throw new Error("Missing data in uploaded file.");
+    return parseFileData(content);
+};
+const createSelected = (params)=>{
+    const { previous, models, item } = params;
+    let selected = new Map(previous);
+    selected.set(item.id, item.related);
+    for (const id of item.related){
+        const model = models.find((model)=>model.id === id);
+        if (!model) continue;
+        if (selected.has(model.id) || model.imported) continue;
+        const related = createSelected({
+            previous: selected,
+            models,
+            item: model
+        });
+        selected = new Map([
+            ...selected,
+            ...related
+        ]);
+    }
+    return selected;
+};
+const getDataToImport = (state)=>{
+    const selected = Array.from(state.selected.keys());
+    const groups = new Map();
+    const models = new Map();
+    const noAction = [
+        ImportAction.CODE,
+        ImportAction.NONE
+    ];
+    for (const id of selected){
+        const validatedModel = state.models?.find((model)=>model.id === id);
+        if (!validatedModel?.action || validatedModel.error || noAction.includes(validatedModel.action)) continue;
+        const validatedGroup = state.groups?.find((group)=>group.slug === validatedModel.group);
+        if (!validatedGroup?.action || validatedGroup.error) continue;
+        const model = state.data?.models?.find((model)=>model.modelId === id);
+        if (!model) continue;
+        models.set(id, {
+            ...model,
+            layout: model.layout || [],
+            titleFieldId: model.titleFieldId || "id",
+            descriptionFieldId: model.descriptionFieldId || "",
+            imageFieldId: model.imageFieldId || "",
+            group: validatedModel.group
+        });
+        if (noAction.includes(validatedGroup.action)) continue;
+        const group = state.data?.groups?.find((group)=>group.slug === validatedModel.group);
+        if (group) groups.set(group.id, group);
+    }
+    return {
+        groups: Array.from(groups.values()),
+        models: Array.from(models.values())
+    };
+};
+const ImportContext = /*#__PURE__*/ react.createContext(void 0);
+const ImportContextProvider = ({ children })=>{
+    const client = useApolloClient();
+    const { showSnackbar } = useSnackbar();
+    const [state, setState] = useState({
+        data: null,
+        file: null,
+        loading: false,
+        validated: false,
+        selected: new Map()
+    });
+    const hasSelected = useCallback(()=>Array.from(state.selected.keys()).length > 0, [
+        state.selected
+    ]);
+    const handleModelsValidation = useCallback(async ()=>{
+        if (!state.data) return void console.error("Cannot import models without any data.");
+        setState((prev)=>({
+                ...prev,
+                loading: true
+            }));
+        let result;
+        try {
+            result = await client.mutate({
+                mutation: VALIDATE_IMPORT_STRUCTURE,
+                variables: {
+                    data: state.data
+                }
+            });
+        } catch (ex) {
+            setState((prev)=>({
+                    ...prev,
+                    loading: false,
+                    errors: [
+                        ex.message
+                    ]
+                }));
+            return;
+        }
+        const { data, error } = result.data?.validateImportStructure || {};
+        if (error) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                errors: [
+                    error.message
+                ]
+            }));
+        if (!data) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                errors: [
+                    "No validation data received."
+                ]
+            }));
+        setState((prev)=>{
+            const next = {
+                ...prev,
+                loading: false,
+                groups: data.groups.map((group)=>({
+                        id: group.group.id,
+                        name: group.group.name,
+                        slug: group.group.slug,
+                        error: group.error,
+                        action: group.action
+                    })),
+                models: data.models.map((model)=>({
+                        id: model.model.modelId,
+                        name: model.model.name,
+                        group: model.model.group,
+                        related: model.related || [],
+                        error: model.error,
+                        action: model.action
+                    })),
+                validated: true
+            };
+            return next;
+        });
+    }, [
+        state.data,
+        setState
+    ]);
+    const handleModelsImport = useCallback(async ()=>{
+        if (!state.data) return void console.error("Cannot import models without any data.");
+        if (!state.groups?.length) return void console.error("Cannot import models without any groups.");
+        if (!state.models?.length) return void console.error("Cannot import models because none are selected.");
+        if (0 === Array.from(state.selected.keys()).length) return void console.error("Cannot import models because none are selected.");
+        setState((prev)=>({
+                ...prev,
+                loading: true
+            }));
+        const dataToImport = getDataToImport(state);
+        let result;
+        try {
+            result = await client.mutate({
+                mutation: IMPORT_STRUCTURE,
+                variables: {
+                    data: dataToImport
+                },
+                errorPolicy: "all"
+            });
+        } catch (ex) {
+            setState((prev)=>({
+                    ...prev,
+                    loading: false,
+                    errors: [
+                        ex.message
+                    ]
+                }));
+            return;
+        }
+        const { data, error } = result.data?.importStructure || {};
+        if (error) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                errors: [
+                    error.message
+                ]
+            }));
+        if (!data) return void setState((prev)=>({
+                ...prev,
+                loading: false,
+                validated: false,
+                errors: [
+                    "No structure import data received."
+                ]
+            }));
+        setState((prev)=>({
+                ...prev,
+                loading: false,
+                selected: new Map(),
+                groups: state.groups.map((group)=>{
+                    const result = data.groups.find((item)=>item.group.id === group.id);
+                    return {
+                        id: result?.group.id || group.id,
+                        name: result?.group.name || group.name,
+                        slug: result?.group.slug || group.slug,
+                        error: result?.error || group.error,
+                        imported: result ? result.imported : group.imported
+                    };
+                }),
+                models: state.models.map((model)=>{
+                    const result = data.models.find((item)=>item.model.modelId === model.id);
+                    return {
+                        id: result?.model.modelId || model.id,
+                        name: result?.model.name || model.name,
+                        group: result?.model.group || model.group,
+                        related: result?.related || model.related || [],
+                        action: result?.action || model.action,
+                        error: result?.error || model.error,
+                        imported: result ? result.imported : model.imported
+                    };
+                }),
+                validated: true
+            }));
+    }, [
+        state.selected,
+        state.data,
+        setState
+    ]);
+    const onFile = useCallback((file)=>{
+        const reader = new FileReader();
+        reader.addEventListener("load", (event)=>{
+            try {
+                const data = parseFileContent(event.target?.result);
+                setState((prev)=>({
+                        ...prev,
+                        models: void 0,
+                        groups: void 0,
+                        selected: new Map(),
+                        errors: null,
+                        validated: false,
+                        file,
+                        data
+                    }));
+            } catch (ex) {
+                setState((prev)=>({
+                        ...prev,
+                        file,
+                        selected: new Map(),
+                        validated: false,
+                        groups: void 0,
+                        models: void 0,
+                        data: null,
+                        errors: [
+                            ex.message
+                        ]
+                    }));
+            }
+        });
+        reader.readAsText(file);
+    }, [
+        state.data,
+        setState
+    ]);
+    const onFileError = useCallback((error)=>{
+        setState((prev)=>({
+                ...prev,
+                file: null,
+                errors: [
+                    error
+                ]
+            }));
+    }, [
+        state,
+        setState
+    ]);
+    const isModelSelected = useCallback((item)=>state.selected.has(item.id), [
+        state.selected
+    ]);
+    const isModelRelated = useCallback(({ id: target })=>{
+        for (const id of state.selected.keys()){
+            if (id === target) continue;
+            const related = state.selected.get(id);
+            if (related?.includes(id)) return true;
+        }
+        return false;
+    }, [
+        state.selected
+    ]);
+    const addModel = useCallback((item)=>{
+        if (isModelSelected(item)) return;
+        setState((prev)=>({
+                ...prev,
+                selected: createSelected({
+                    previous: prev.selected,
+                    models: state.models || [],
+                    item
+                })
+            }));
+    }, [
+        isModelSelected,
+        state.models,
+        state.selected
+    ]);
+    const removeModel = useCallback((item)=>{
+        if (isModelRelated(item)) return void showSnackbar(`Model "${item.name}" is required due to another model having a relation to it.`);
+        setState((prev)=>{
+            const selected = prev.selected;
+            selected.delete(item.id);
+            return {
+                ...prev,
+                selected
+            };
+        });
+    }, [
+        state,
+        setState
+    ]);
+    const toggleModel = useCallback((item)=>{
+        if (isModelSelected(item)) return void removeModel(item);
+        addModel(item);
+    }, [
+        isModelSelected,
+        addModel,
+        removeModel
+    ]);
+    const value = {
+        data: state.data || null,
+        loading: state.loading || false,
+        groups: state.groups || [],
+        models: state.models || [],
+        errors: state.errors || [],
+        validated: state.validated || false,
+        hasSelected,
+        isModelRelated,
+        file: state.file,
+        onFile,
+        onFileError,
+        handleModelsValidation,
+        handleModelsImport,
+        toggleModel,
+        isModelSelected
+    };
+    return /*#__PURE__*/ react.createElement(ImportContext.Provider, {
+        value: value
+    }, children(value));
+};
+export { ImportContext, ImportContextProvider };
+
+//# sourceMappingURL=ImportContext.js.map