@webiny/app-headless-cms 6.0.0 → 6.1.0-beta.1

package/admin/components/ContentEntries/SidebarFooter/SidebarFooter.js

@@ -1,14 +1,12 @@
 import React from "react";
 import { TrashBin } from "../TrashBin/index.js";
-import { Scheduler } from "../Scheduler/index.js";
 import { makeDecoratable } from "@webiny/react-composition";
-import { IsModelPublishable } from "../../../../exports/admin/cms.js";
 export const SidebarFooter = makeDecoratable(({
   children
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     className: "px-xs py-sm bg-neutral-base"
-  }, /*#__PURE__*/React.createElement(IsModelPublishable, null, /*#__PURE__*/React.createElement(Scheduler, null)), /*#__PURE__*/React.createElement(TrashBin, null), children);
+  }, /*#__PURE__*/React.createElement(TrashBin, null), children);
 });
 
 //# sourceMappingURL=SidebarFooter.js.map

package/admin/components/ContentEntries/SidebarFooter/SidebarFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TrashBin","Scheduler","makeDecoratable","IsModelPublishable","SidebarFooter","children","createElement","className"],"sources":["SidebarFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { TrashBin } from \"~/admin/components/ContentEntries/TrashBin/index.js\";\nimport { Scheduler } from \"~/admin/components/ContentEntries/Scheduler/index.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { IsModelPublishable } from \"~/exports/admin/cms.js\";\n\nexport interface ISidebarFooterProps {\n    children?: React.ReactNode;\n}\n\nexport const SidebarFooter = makeDecoratable(({ children }: ISidebarFooterProps) => {\n    return (\n        <div className={\"px-xs py-sm bg-neutral-base\"}>\n            <IsModelPublishable>\n                <Scheduler />\n            </IsModelPublishable>\n            <TrashBin />\n            {children}\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ;AACjB,SAASC,SAAS;AAClB,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB;AAM3B,OAAO,MAAMC,aAAa,GAAGF,eAAe,CAAC,CAAC;EAAEG;AAA8B,CAAC,KAAK;EAChF,oBACIN,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAA8B,gBAC1CR,KAAA,CAAAO,aAAA,CAACH,kBAAkB,qBACfJ,KAAA,CAAAO,aAAA,CAACL,SAAS,MAAE,CACI,CAAC,eACrBF,KAAA,CAAAO,aAAA,CAACN,QAAQ,MAAE,CAAC,EACXK,QACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","TrashBin","makeDecoratable","SidebarFooter","children","createElement","className"],"sources":["SidebarFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { TrashBin } from \"~/admin/components/ContentEntries/TrashBin/index.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nexport interface ISidebarFooterProps {\n    children?: React.ReactNode;\n}\n\nexport const SidebarFooter = makeDecoratable(({ children }: ISidebarFooterProps) => {\n    return (\n        <div className={\"px-xs py-sm bg-neutral-base\"}>\n            <TrashBin />\n            {children}\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ;AACjB,SAASC,eAAe,QAAQ,2BAA2B;AAM3D,OAAO,MAAMC,aAAa,GAAGD,eAAe,CAAC,CAAC;EAAEE;AAA8B,CAAC,KAAK;EAChF,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAA8B,gBAC1CN,KAAA,CAAAK,aAAA,CAACJ,QAAQ,MAAE,CAAC,EACXG,QACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/ContentEntryForm.d.ts

@@ -3,7 +3,7 @@ import type { FormOnSubmit, FormValidation } from "@webiny/form";
 import type { CmsContentEntry } from "../../../types.js";
 import type { ContentEntryFormContext, PersistEntry } from "./ContentEntryFormProvider.js";
 export interface ContentEntryFormProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-    entry: Partial<CmsContentEntry>;
+    entry: Partial<Omit<CmsContentEntry, "values">> & Pick<CmsContentEntry, "values">;
     /**
      * This callback is executed when an entry, or a revision, are created.
      * @param entry

package/admin/components/ContentEntryForm/ContentEntryForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","makeDecoratable","ModelProvider","useModel","useFormRenderer","ContentEntryFormProvider","CustomLayout","DefaultLayout","useGoToRevision","ContentEntryForm","entry","persistEntry","onChange","onInvalidFields","onAfterCreate","setSaveEntry","header","props","formElementRef","model","goToRevision","formRenderer","defaultOnAfterCreate","id","current","setTimeout","scrollTo","isBeingDeleted","createElement","Fragment","confirmNavigationIfDirty","Object","assign","ref"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FormOnSubmit, FormValidation } from \"@webiny/form\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsContentEntry } from \"~/types.js\";\nimport { ModelProvider, useModel } from \"~/admin/components/ModelProvider/index.js\";\nimport { useFormRenderer } from \"~/admin/components/ContentEntryForm/useFormRenderer.js\";\nimport type { ContentEntryFormContext, PersistEntry } from \"./ContentEntryFormProvider.js\";\nimport { ContentEntryFormProvider } from \"./ContentEntryFormProvider.js\";\nimport { CustomLayout } from \"./CustomLayout.js\";\nimport { DefaultLayout } from \"./DefaultLayout.js\";\nimport { useGoToRevision } from \"~/admin/components/ContentEntryForm/useGoToRevision.js\";\n\nexport interface ContentEntryFormProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n    entry: Partial<CmsContentEntry>;\n    /**\n     * This callback is executed when an entry, or a revision, are created.\n     * @param entry\n     */\n    onAfterCreate?: (entry: CmsContentEntry) => void;\n    /**\n     * This callback is executed when the form is valid, and it needs to persist the content entry.\n     */\n    persistEntry: PersistEntry;\n    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;\n    onInvalidFields?: (invalidFields: FormValidation) => void;\n    header?: React.ReactNode;\n    /**\n     * This prop is used to get a reference to `saveEntry` callback, so it can be triggered by components\n     * outside the ContentEntryForm context.\n     * TODO: introduce a `layout` prop to be able to mount arbitrary components around the entry form, within the context.\n     */\n    setSaveEntry?: (cb: ContentEntryFormContext[\"saveEntry\"]) => void;\n}\n\nexport const ContentEntryForm = makeDecoratable(\n    \"ContentEntryForm\",\n    ({\n        entry,\n        persistEntry,\n        onChange,\n        onInvalidFields,\n        onAfterCreate,\n        setSaveEntry,\n        header = true,\n        ...props\n    }: ContentEntryFormProps) => {\n        const formElementRef = useRef<HTMLDivElement>(null);\n        const { model } = useModel();\n        const { goToRevision } = useGoToRevision();\n        const formRenderer = useFormRenderer(model);\n\n        const defaultOnAfterCreate = (entry: CmsContentEntry) => {\n            goToRevision(entry.id);\n        };\n\n        // When entry changes, scroll to the top of the form.\n        useEffect(() => {\n            if (!formElementRef.current) {\n                return;\n            }\n\n            setTimeout(() => {\n                formElementRef.current?.scrollTo(0, 0);\n            }, 20);\n        }, [entry.id, formElementRef.current]);\n\n        if (model.isBeingDeleted) {\n            return <>Model is being deleted.</>;\n        }\n\n        return (\n            <ContentEntryFormProvider\n                model={model}\n                entry={entry}\n                onChange={onChange}\n                onInvalidFields={onInvalidFields}\n                onAfterCreate={onAfterCreate || defaultOnAfterCreate}\n                setSaveEntry={setSaveEntry}\n                confirmNavigationIfDirty={true}\n                persistEntry={persistEntry}\n            >\n                <ModelProvider model={model}>\n                    {header ? header : null}\n                    <div\n                        {...props}\n                        id={\"cms-content-form\"}\n                        data-element={\"cms-content-form\"}\n                        data-testid={\"cms-content-form\"}\n                        ref={formElementRef}\n                    >\n                        {formRenderer ? (\n                            <CustomLayout model={model} formRenderer={formRenderer} />\n                        ) : (\n                            <DefaultLayout model={model} />\n                        )}\n                    </div>\n                </ModelProvider>\n            </ContentEntryFormProvider>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa,EAAEC,QAAQ;AAChC,SAASC,eAAe;AAExB,SAASC,wBAAwB;AACjC,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,eAAe;AAyBxB,OAAO,MAAMC,gBAAgB,GAAGR,eAAe,CAC3C,kBAAkB,EAClB,CAAC;EACGS,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,eAAe;EACfC,aAAa;EACbC,YAAY;EACZC,MAAM,GAAG,IAAI;EACb,GAAGC;AACgB,CAAC,KAAK;EACzB,MAAMC,cAAc,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAM;IAAEmB;EAAM,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAEiB;EAAa,CAAC,GAAGZ,eAAe,CAAC,CAAC;EAC1C,MAAMa,YAAY,GAAGjB,eAAe,CAACe,KAAK,CAAC;EAE3C,MAAMG,oBAAoB,GAAIZ,KAAsB,IAAK;IACrDU,YAAY,CAACV,KAAK,CAACa,EAAE,CAAC;EAC1B,CAAC;;EAED;EACAxB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACmB,cAAc,CAACM,OAAO,EAAE;MACzB;IACJ;IAEAC,UAAU,CAAC,MAAM;MACbP,cAAc,CAACM,OAAO,EAAEE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAAChB,KAAK,CAACa,EAAE,EAAEL,cAAc,CAACM,OAAO,CAAC,CAAC;EAEtC,IAAIL,KAAK,CAACQ,cAAc,EAAE;IACtB,oBAAO7B,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAA+B,QAAA,QAAE,yBAAyB,CAAC;EACvC;EAEA,oBACI/B,KAAA,CAAA8B,aAAA,CAACvB,wBAAwB;IACrBc,KAAK,EAAEA,KAAM;IACbT,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEA,QAAS;IACnBC,eAAe,EAAEA,eAAgB;IACjCC,aAAa,EAAEA,aAAa,IAAIQ,oBAAqB;IACrDP,YAAY,EAAEA,YAAa;IAC3Be,wBAAwB,EAAE,IAAK;IAC/BnB,YAAY,EAAEA;EAAa,gBAE3Bb,KAAA,CAAA8B,aAAA,CAAC1B,aAAa;IAACiB,KAAK,EAAEA;EAAM,GACvBH,MAAM,GAAGA,MAAM,GAAG,IAAI,eACvBlB,KAAA,CAAA8B,aAAA,QAAAG,MAAA,CAAAC,MAAA,KACQf,KAAK;IACTM,EAAE,EAAE,kBAAmB;IACvB,gBAAc,kBAAmB;IACjC,eAAa,kBAAmB;IAChCU,GAAG,EAAEf;EAAe,IAEnBG,YAAY,gBACTvB,KAAA,CAAA8B,aAAA,CAACtB,YAAY;IAACa,KAAK,EAAEA,KAAM;IAACE,YAAY,EAAEA;EAAa,CAAE,CAAC,gBAE1DvB,KAAA,CAAA8B,aAAA,CAACrB,aAAa;IAACY,KAAK,EAAEA;EAAM,CAAE,CAEjC,CACM,CACO,CAAC;AAEnC,CACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","makeDecoratable","ModelProvider","useModel","useFormRenderer","ContentEntryFormProvider","CustomLayout","DefaultLayout","useGoToRevision","ContentEntryForm","entry","persistEntry","onChange","onInvalidFields","onAfterCreate","setSaveEntry","header","props","formElementRef","model","goToRevision","formRenderer","defaultOnAfterCreate","id","current","setTimeout","scrollTo","isBeingDeleted","createElement","Fragment","confirmNavigationIfDirty","Object","assign","ref"],"sources":["ContentEntryForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FormOnSubmit, FormValidation } from \"@webiny/form\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsContentEntry } from \"~/types.js\";\nimport { ModelProvider, useModel } from \"~/admin/components/ModelProvider/index.js\";\nimport { useFormRenderer } from \"~/admin/components/ContentEntryForm/useFormRenderer.js\";\nimport type { ContentEntryFormContext, PersistEntry } from \"./ContentEntryFormProvider.js\";\nimport { ContentEntryFormProvider } from \"./ContentEntryFormProvider.js\";\nimport { CustomLayout } from \"./CustomLayout.js\";\nimport { DefaultLayout } from \"./DefaultLayout.js\";\nimport { useGoToRevision } from \"~/admin/components/ContentEntryForm/useGoToRevision.js\";\n\nexport interface ContentEntryFormProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n    entry: Partial<Omit<CmsContentEntry, \"values\">> & Pick<CmsContentEntry, \"values\">;\n    /**\n     * This callback is executed when an entry, or a revision, are created.\n     * @param entry\n     */\n    onAfterCreate?: (entry: CmsContentEntry) => void;\n    /**\n     * This callback is executed when the form is valid, and it needs to persist the content entry.\n     */\n    persistEntry: PersistEntry;\n    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;\n    onInvalidFields?: (invalidFields: FormValidation) => void;\n    header?: React.ReactNode;\n    /**\n     * This prop is used to get a reference to `saveEntry` callback, so it can be triggered by components\n     * outside the ContentEntryForm context.\n     * TODO: introduce a `layout` prop to be able to mount arbitrary components around the entry form, within the context.\n     */\n    setSaveEntry?: (cb: ContentEntryFormContext[\"saveEntry\"]) => void;\n}\n\nexport const ContentEntryForm = makeDecoratable(\n    \"ContentEntryForm\",\n    ({\n        entry,\n        persistEntry,\n        onChange,\n        onInvalidFields,\n        onAfterCreate,\n        setSaveEntry,\n        header = true,\n        ...props\n    }: ContentEntryFormProps) => {\n        const formElementRef = useRef<HTMLDivElement>(null);\n        const { model } = useModel();\n        const { goToRevision } = useGoToRevision();\n        const formRenderer = useFormRenderer(model);\n\n        const defaultOnAfterCreate = (entry: CmsContentEntry) => {\n            goToRevision(entry.id);\n        };\n\n        // When entry changes, scroll to the top of the form.\n        useEffect(() => {\n            if (!formElementRef.current) {\n                return;\n            }\n\n            setTimeout(() => {\n                formElementRef.current?.scrollTo(0, 0);\n            }, 20);\n        }, [entry.id, formElementRef.current]);\n\n        if (model.isBeingDeleted) {\n            return <>Model is being deleted.</>;\n        }\n\n        return (\n            <ContentEntryFormProvider\n                model={model}\n                entry={entry}\n                onChange={onChange}\n                onInvalidFields={onInvalidFields}\n                onAfterCreate={onAfterCreate || defaultOnAfterCreate}\n                setSaveEntry={setSaveEntry}\n                confirmNavigationIfDirty={true}\n                persistEntry={persistEntry}\n            >\n                <ModelProvider model={model}>\n                    {header ? header : null}\n                    <div\n                        {...props}\n                        id={\"cms-content-form\"}\n                        data-element={\"cms-content-form\"}\n                        data-testid={\"cms-content-form\"}\n                        ref={formElementRef}\n                    >\n                        {formRenderer ? (\n                            <CustomLayout model={model} formRenderer={formRenderer} />\n                        ) : (\n                            <DefaultLayout model={model} />\n                        )}\n                    </div>\n                </ModelProvider>\n            </ContentEntryFormProvider>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa,EAAEC,QAAQ;AAChC,SAASC,eAAe;AAExB,SAASC,wBAAwB;AACjC,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,eAAe;AAyBxB,OAAO,MAAMC,gBAAgB,GAAGR,eAAe,CAC3C,kBAAkB,EAClB,CAAC;EACGS,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,eAAe;EACfC,aAAa;EACbC,YAAY;EACZC,MAAM,GAAG,IAAI;EACb,GAAGC;AACgB,CAAC,KAAK;EACzB,MAAMC,cAAc,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAM;IAAEmB;EAAM,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAEiB;EAAa,CAAC,GAAGZ,eAAe,CAAC,CAAC;EAC1C,MAAMa,YAAY,GAAGjB,eAAe,CAACe,KAAK,CAAC;EAE3C,MAAMG,oBAAoB,GAAIZ,KAAsB,IAAK;IACrDU,YAAY,CAACV,KAAK,CAACa,EAAE,CAAC;EAC1B,CAAC;;EAED;EACAxB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACmB,cAAc,CAACM,OAAO,EAAE;MACzB;IACJ;IAEAC,UAAU,CAAC,MAAM;MACbP,cAAc,CAACM,OAAO,EAAEE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAAChB,KAAK,CAACa,EAAE,EAAEL,cAAc,CAACM,OAAO,CAAC,CAAC;EAEtC,IAAIL,KAAK,CAACQ,cAAc,EAAE;IACtB,oBAAO7B,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAA+B,QAAA,QAAE,yBAAyB,CAAC;EACvC;EAEA,oBACI/B,KAAA,CAAA8B,aAAA,CAACvB,wBAAwB;IACrBc,KAAK,EAAEA,KAAM;IACbT,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEA,QAAS;IACnBC,eAAe,EAAEA,eAAgB;IACjCC,aAAa,EAAEA,aAAa,IAAIQ,oBAAqB;IACrDP,YAAY,EAAEA,YAAa;IAC3Be,wBAAwB,EAAE,IAAK;IAC/BnB,YAAY,EAAEA;EAAa,gBAE3Bb,KAAA,CAAA8B,aAAA,CAAC1B,aAAa;IAACiB,KAAK,EAAEA;EAAM,GACvBH,MAAM,GAAGA,MAAM,GAAG,IAAI,eACvBlB,KAAA,CAAA8B,aAAA,QAAAG,MAAA,CAAAC,MAAA,KACQf,KAAK;IACTM,EAAE,EAAE,kBAAmB;IACvB,gBAAc,kBAAmB;IACjC,eAAa,kBAAmB;IAChCU,GAAG,EAAEf;EAAe,IAEnBG,YAAY,gBACTvB,KAAA,CAAA8B,aAAA,CAACtB,YAAY;IAACa,KAAK,EAAEA,KAAM;IAACE,YAAY,EAAEA;EAAa,CAAE,CAAC,gBAE1DvB,KAAA,CAAA8B,aAAA,CAACrB,aAAa;IAACY,KAAK,EAAEA;EAAM,CAAE,CAEjC,CACM,CACO,CAAC;AAEnC,CACJ,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js

@@ -1,17 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { makeDecoratable } from "@webiny/app-admin";
 import { ModelProvider } from "../ModelProvider/index.js";
 import { useFormRenderer } from "./useFormRenderer.js";
 import { CustomLayout } from "./CustomLayout.js";
 import { DefaultLayout } from "./DefaultLayout.js";
 import { ContentEntryFormProvider } from "./ContentEntryFormProvider.js";
+const baseEntry = {
+  values: {}
+};
 export const ContentEntryFormPreview = makeDecoratable("ContentEntryFormPreview", props => {
   const {
     contentModel
   } = props;
   const formRenderer = useFormRenderer(contentModel);
+  const initialEntry = useMemo(() => {
+    return baseEntry;
+  }, []);
   return /*#__PURE__*/React.createElement(ContentEntryFormProvider, {
-    entry: {},
+    entry: initialEntry,
     model: contentModel,
     persistEntry: async entry => {
       return {

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","ModelProvider","useFormRenderer","CustomLayout","DefaultLayout","ContentEntryFormProvider","ContentEntryFormPreview","props","contentModel","formRenderer","createElement","entry","model","persistEntry","confirmNavigationIfDirty","className"],"sources":["ContentEntryFormPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsContentEntry, CmsEditorContentModel } from \"~/types.js\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider/index.js\";\nimport { useFormRenderer } from \"~/admin/components/ContentEntryForm/useFormRenderer.js\";\nimport { CustomLayout } from \"~/admin/components/ContentEntryForm/CustomLayout.js\";\nimport { DefaultLayout } from \"~/admin/components/ContentEntryForm/DefaultLayout.js\";\nimport { ContentEntryFormProvider } from \"./ContentEntryFormProvider.js\";\n\nexport interface ContentEntryFormPreviewProps {\n    contentModel: CmsEditorContentModel;\n}\n\nexport const ContentEntryFormPreview = makeDecoratable(\n    \"ContentEntryFormPreview\",\n    (props: ContentEntryFormPreviewProps) => {\n        const { contentModel } = props;\n\n        const formRenderer = useFormRenderer(contentModel);\n\n        return (\n            <ContentEntryFormProvider\n                entry={{}}\n                model={contentModel}\n                persistEntry={async entry => {\n                    return {\n                        entry: entry as CmsContentEntry\n                    };\n                }}\n                confirmNavigationIfDirty={false}\n            >\n                <ModelProvider model={contentModel}>\n                    <div\n                        className={\"h-calc(100vh-260px) overflow-auto\"}\n                        data-testid={\"cms-content-form\"}\n                    >\n                        {formRenderer ? (\n                            <CustomLayout model={contentModel} formRenderer={formRenderer} />\n                        ) : (\n                            <DefaultLayout model={contentModel} />\n                        )}\n                    </div>\n                </ModelProvider>\n            </ContentEntryFormProvider>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,wBAAwB;AAMjC,OAAO,MAAMC,uBAAuB,GAAGN,eAAe,CAClD,yBAAyB,EACxBO,KAAmC,IAAK;EACrC,MAAM;IAAEC;EAAa,CAAC,GAAGD,KAAK;EAE9B,MAAME,YAAY,GAAGP,eAAe,CAACM,YAAY,CAAC;EAElD,oBACIT,KAAA,CAAAW,aAAA,CAACL,wBAAwB;IACrBM,KAAK,EAAE,CAAC,CAAE;IACVC,KAAK,EAAEJ,YAAa;IACpBK,YAAY,EAAE,MAAMF,KAAK,IAAI;MACzB,OAAO;QACHA,KAAK,EAAEA;MACX,CAAC;IACL,CAAE;IACFG,wBAAwB,EAAE;EAAM,gBAEhCf,KAAA,CAAAW,aAAA,CAACT,aAAa;IAACW,KAAK,EAAEJ;EAAa,gBAC/BT,KAAA,CAAAW,aAAA;IACIK,SAAS,EAAE,mCAAoC;IAC/C,eAAa;EAAmB,GAE/BN,YAAY,gBACTV,KAAA,CAAAW,aAAA,CAACP,YAAY;IAACS,KAAK,EAAEJ,YAAa;IAACC,YAAY,EAAEA;EAAa,CAAE,CAAC,gBAEjEV,KAAA,CAAAW,aAAA,CAACN,aAAa;IAACQ,KAAK,EAAEJ;EAAa,CAAE,CAExC,CACM,CACO,CAAC;AAEnC,CACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","makeDecoratable","ModelProvider","useFormRenderer","CustomLayout","DefaultLayout","ContentEntryFormProvider","baseEntry","values","ContentEntryFormPreview","props","contentModel","formRenderer","initialEntry","createElement","entry","model","persistEntry","confirmNavigationIfDirty","className"],"sources":["ContentEntryFormPreview.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsContentEntry, CmsEditorContentModel } from \"~/types.js\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider/index.js\";\nimport { useFormRenderer } from \"~/admin/components/ContentEntryForm/useFormRenderer.js\";\nimport { CustomLayout } from \"~/admin/components/ContentEntryForm/CustomLayout.js\";\nimport { DefaultLayout } from \"~/admin/components/ContentEntryForm/DefaultLayout.js\";\nimport { ContentEntryFormProvider } from \"./ContentEntryFormProvider.js\";\n\nexport interface ContentEntryFormPreviewProps {\n    contentModel: CmsEditorContentModel;\n}\n\nconst baseEntry: Pick<CmsContentEntry, \"values\"> = {\n    values: {}\n};\n\nexport const ContentEntryFormPreview = makeDecoratable(\n    \"ContentEntryFormPreview\",\n    (props: ContentEntryFormPreviewProps) => {\n        const { contentModel } = props;\n\n        const formRenderer = useFormRenderer(contentModel);\n\n        const initialEntry = useMemo(() => {\n            return baseEntry;\n        }, []);\n\n        return (\n            <ContentEntryFormProvider\n                entry={initialEntry}\n                model={contentModel}\n                persistEntry={async entry => {\n                    return {\n                        entry: entry as CmsContentEntry\n                    };\n                }}\n                confirmNavigationIfDirty={false}\n            >\n                <ModelProvider model={contentModel}>\n                    <div\n                        className={\"h-calc(100vh-260px) overflow-auto\"}\n                        data-testid={\"cms-content-form\"}\n                    >\n                        {formRenderer ? (\n                            <CustomLayout model={contentModel} formRenderer={formRenderer} />\n                        ) : (\n                            <DefaultLayout model={contentModel} />\n                        )}\n                    </div>\n                </ModelProvider>\n            </ContentEntryFormProvider>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,YAAY;AACrB,SAASC,aAAa;AACtB,SAASC,wBAAwB;AAMjC,MAAMC,SAA0C,GAAG;EAC/CC,MAAM,EAAE,CAAC;AACb,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGR,eAAe,CAClD,yBAAyB,EACxBS,KAAmC,IAAK;EACrC,MAAM;IAAEC;EAAa,CAAC,GAAGD,KAAK;EAE9B,MAAME,YAAY,GAAGT,eAAe,CAACQ,YAAY,CAAC;EAElD,MAAME,YAAY,GAAGb,OAAO,CAAC,MAAM;IAC/B,OAAOO,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIR,KAAA,CAAAe,aAAA,CAACR,wBAAwB;IACrBS,KAAK,EAAEF,YAAa;IACpBG,KAAK,EAAEL,YAAa;IACpBM,YAAY,EAAE,MAAMF,KAAK,IAAI;MACzB,OAAO;QACHA,KAAK,EAAEA;MACX,CAAC;IACL,CAAE;IACFG,wBAAwB,EAAE;EAAM,gBAEhCnB,KAAA,CAAAe,aAAA,CAACZ,aAAa;IAACc,KAAK,EAAEL;EAAa,gBAC/BZ,KAAA,CAAAe,aAAA;IACIK,SAAS,EAAE,mCAAoC;IAC/C,eAAa;EAAmB,GAE/BP,YAAY,gBACTb,KAAA,CAAAe,aAAA,CAACV,YAAY;IAACY,KAAK,EAAEL,YAAa;IAACC,YAAY,EAAEA;EAAa,CAAE,CAAC,gBAEjEb,KAAA,CAAAe,aAAA,CAACT,aAAa;IAACW,KAAK,EAAEL;EAAa,CAAE,CAExC,CACM,CACO,CAAC;AAEnC,CACJ,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/ContentEntryFormProvider.d.ts

@@ -7,7 +7,7 @@ interface SaveEntryOptions {
     createNewRevision?: boolean;
 }
 export interface ContentEntryFormContext {
-    entry: Partial<CmsContentEntry>;
+    entry: Partial<Omit<CmsContentEntry, "values">> & Pick<CmsContentEntry, "values">;
     saveEntry: (options?: SaveEntryOptions) => Promise<CmsContentEntry | null>;
     invalidFields: FormInvalidFields;
 }
@@ -19,7 +19,7 @@ export interface PersistEntry {
     (entry: Partial<CmsContentEntry>, options?: SaveEntryOptions): Promise<CreateEntryResponse | UpdateEntryRevisionResponse>;
 }
 interface ContentEntryFormProviderProps {
-    entry: Partial<CmsContentEntry>;
+    entry: Partial<Omit<CmsContentEntry, "values">> & Pick<CmsContentEntry, "values">;
     model: CmsModel;
     persistEntry: PersistEntry;
     confirmNavigationIfDirty: boolean;

package/admin/components/ContentEntryForm/ContentEntryFormProvider.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { CompositionScope, NavigationPrompt, useSnackbar } from "@webiny/app-admin";
+import { DevToolsSection, useDialogs, useSnackbar } from "@webiny/app-admin";
+import { useRouter } from "@webiny/app";
 import { Form } from "@webiny/form";
 import { prepareFormData } from "@webiny/app-headless-cms-common";
 const promptMessage = "There are some unsaved changes! Are you sure you want to navigate away and discard all changes?";
@@ -30,6 +31,27 @@ export const ContentEntryFormProvider = ({
   const saveOptionsRef = useRef({
     skipValidators: undefined
   });
+  const router = useRouter();
+  const dialogs = useDialogs();
+  const isPristineRef = useRef(true);
+  useEffect(() => {
+    if (!confirmNavigationIfDirty) {
+      return;
+    }
+    return router.addTransitionGuard({
+      guard: () => !isPristineRef.current,
+      onBlocked: () => {
+        dialogs.showDialog({
+          title: "Confirm Navigation",
+          content: promptMessage,
+          acceptLabel: "Yes!",
+          cancelLabel: "No, stay here.",
+          onAccept: () => router.confirmTransition(),
+          onClose: () => router.cancelTransition()
+        });
+      }
+    });
+  }, [confirmNavigationIfDirty]);
   const saveEntry = useCallback(async (options = {}) => {
     saveOptionsRef.current.skipValidators = options.skipValidators;
     return await ref.current.submit(undefined, {
@@ -66,6 +88,7 @@ export const ContentEntryFormProvider = ({
     if ((isNewEntry || isNewRevision) && onAfterCreate) {
       onAfterSubmitRef.current = onAfterCreate;
     }
+    router.unblockTransition();
     return entry;
   };
   useEffect(() => {
@@ -89,6 +112,7 @@ export const ContentEntryFormProvider = ({
       showSnackbar("Some fields did not pass the validation. Please check the form.");
     }
   }, formProps => {
+    isPristineRef.current = formProps.form.isPristine;
     const context = {
       entry: {
         ...initialEntry,
@@ -99,12 +123,12 @@ export const ContentEntryFormProvider = ({
     };
     return /*#__PURE__*/React.createElement(ContentEntryFormContext.Provider, {
       value: context
-    }, confirmNavigationIfDirty ? /*#__PURE__*/React.createElement(CompositionScope, {
-      name: "cms.contentEntryForm"
-    }, /*#__PURE__*/React.createElement(NavigationPrompt, {
-      when: () => !formProps.form.isPristine,
-      message: promptMessage
-    })) : null, children);
+    }, /*#__PURE__*/React.createElement(DevToolsSection, {
+      name: "Entry",
+      group: "CMS",
+      data: context.entry,
+      views: "raw"
+    }), children);
   });
 };
 

package/admin/components/ContentEntryForm/ContentEntryFormProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","CompositionScope","NavigationPrompt","useSnackbar","Form","prepareFormData","promptMessage","ContentEntryFormContext","createContext","undefined","formValidationToMap","invalidFields","Object","keys","reduce","acc","key","message","ContentEntryFormProvider","model","entry","initialEntry","children","persistEntry","onChange","onInvalidFields","onAfterCreate","setSaveEntry","confirmNavigationIfDirty","ref","onAfterSubmitRef","setInvalidFields","showSnackbar","saveOptionsRef","skipValidators","saveEntry","options","current","submit","onFormSubmit","data","values","fields","isNewEntry","id","error","createNewRevision","meta","locked","code","errors","item","fieldId","isNewRevision","createElement","onSubmit","onAfterSubmit","validateOnFirstSubmit","onInvalid","formProps","context","Provider","value","name","when","form","isPristine"],"sources":["ContentEntryFormProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { CompositionScope, NavigationPrompt, useSnackbar } from \"@webiny/app-admin\";\nimport type { FormAPI, FormInvalidFields, FormOnSubmit, FormValidation } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { prepareFormData } from \"@webiny/app-headless-cms-common\";\nimport type { CmsContentEntry, CmsModel } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport type {\n    CreateEntryResponse,\n    UpdateEntryRevisionResponse\n} from \"~/admin/contexts/Cms/index.js\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\n\nconst promptMessage =\n    \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\";\n\ninterface SaveEntryOptions {\n    skipValidators?: string[];\n    createNewRevision?: boolean;\n}\n\nexport interface ContentEntryFormContext {\n    entry: Partial<CmsContentEntry>;\n    saveEntry: (options?: SaveEntryOptions) => Promise<CmsContentEntry | null>;\n    invalidFields: FormInvalidFields;\n}\n\nexport const ContentEntryFormContext = React.createContext<ContentEntryFormContext | undefined>(\n    undefined\n);\n\nexport interface SetSaveEntry {\n    (cb: ContentEntryFormContext[\"saveEntry\"]): void;\n}\n\nexport interface PersistEntry {\n    (\n        entry: Partial<CmsContentEntry>,\n        options?: SaveEntryOptions\n    ): Promise<CreateEntryResponse | UpdateEntryRevisionResponse>;\n}\n\ninterface ContentEntryFormProviderProps {\n    entry: Partial<CmsContentEntry>;\n    model: CmsModel;\n    persistEntry: PersistEntry;\n    confirmNavigationIfDirty: boolean;\n    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;\n    onInvalidFields?: (invalidFields: FormValidation) => void;\n    onAfterCreate?: (entry: CmsContentEntry) => void;\n    setSaveEntry?: SetSaveEntry;\n    children: React.ReactNode;\n}\n\ninterface InvalidFieldError {\n    fieldId: string;\n    error: string;\n}\n\nconst formValidationToMap = (invalidFields: FormValidation): FormInvalidFields => {\n    return Object.keys(invalidFields).reduce(\n        (acc, key) => ({ ...acc, [key]: invalidFields[key].message || \"Value is invalid.\" }),\n        {} as FormInvalidFields\n    );\n};\n\nexport const ContentEntryFormProvider = ({\n    model,\n    entry: initialEntry,\n    children,\n    persistEntry,\n    onChange,\n    onInvalidFields,\n    onAfterCreate,\n    setSaveEntry,\n    confirmNavigationIfDirty\n}: ContentEntryFormProviderProps) => {\n    const ref = useRef<FormAPI<CmsContentEntry> | null>(null);\n    const onAfterSubmitRef = useRef<(entry: CmsContentEntry) => void>(() => void 0);\n    const [invalidFields, setInvalidFields] = useState<FormInvalidFields>({});\n    const { showSnackbar } = useSnackbar();\n    const saveOptionsRef = useRef<SaveEntryOptions>({ skipValidators: undefined });\n\n    const saveEntry = useCallback(async (options: SaveEntryOptions = {}) => {\n        saveOptionsRef.current.skipValidators = options.skipValidators;\n\n        return (await ref.current!.submit(undefined, {\n            skipValidators: options.skipValidators\n        })) as Promise<CmsContentEntry | null>;\n    }, []);\n\n    const onFormSubmit: FormOnSubmit<CmsContentEntry> = async data => {\n        const values = prepareFormData<GenericRecord>(data, model.fields);\n        const isNewEntry = initialEntry.id === undefined;\n\n        const { entry, error } = await persistEntry(\n            {\n                id: initialEntry.id,\n                values\n            },\n            {\n                skipValidators: saveOptionsRef.current.skipValidators,\n                createNewRevision: initialEntry.meta?.locked\n            }\n        );\n\n        if (error) {\n            if (error.code === \"VALIDATION_FAILED\") {\n                const errors: InvalidFieldError[] = error.data || [];\n\n                setInvalidFields(\n                    errors.reduce((acc, item) => ({ ...acc, [item.fieldId]: item.error }), {})\n                );\n            }\n            showSnackbar(error.message);\n\n            return;\n        }\n\n        showSnackbar(\"Entry saved successfully!\");\n        setInvalidFields({});\n\n        const isNewRevision = !isNewEntry && entry.id !== initialEntry.id;\n\n        if ((isNewEntry || isNewRevision) && onAfterCreate) {\n            onAfterSubmitRef.current = onAfterCreate;\n        }\n\n        return entry;\n    };\n\n    useEffect(() => {\n        if (typeof setSaveEntry === \"function\") {\n            setSaveEntry(saveEntry);\n        }\n    }, [setSaveEntry]);\n\n    return (\n        <Form<CmsContentEntry>\n            onSubmit={onFormSubmit}\n            onAfterSubmit={data => {\n                onAfterSubmitRef.current(data);\n            }}\n            onChange={onChange}\n            data={initialEntry.values}\n            ref={ref}\n            validateOnFirstSubmit\n            invalidFields={invalidFields}\n            onInvalid={invalidFields => {\n                setInvalidFields(formValidationToMap(invalidFields));\n                onInvalidFields && onInvalidFields(invalidFields);\n                showSnackbar(\"Some fields did not pass the validation. Please check the form.\");\n            }}\n        >\n            {formProps => {\n                const context: ContentEntryFormContext = {\n                    entry: { ...initialEntry, values: formProps.data },\n                    saveEntry,\n                    invalidFields\n                };\n                return (\n                    <ContentEntryFormContext.Provider value={context}>\n                        {confirmNavigationIfDirty ? (\n                            <CompositionScope name={\"cms.contentEntryForm\"}>\n                                <NavigationPrompt\n                                    when={() => !formProps.form.isPristine}\n                                    message={promptMessage}\n                                />\n                            </CompositionScope>\n                        ) : null}\n                        {children}\n                    </ContentEntryFormContext.Provider>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","DevToolsSection","useDialogs","useSnackbar","useRouter","Form","prepareFormData","promptMessage","ContentEntryFormContext","createContext","undefined","formValidationToMap","invalidFields","Object","keys","reduce","acc","key","message","ContentEntryFormProvider","model","entry","initialEntry","children","persistEntry","onChange","onInvalidFields","onAfterCreate","setSaveEntry","confirmNavigationIfDirty","ref","onAfterSubmitRef","setInvalidFields","showSnackbar","saveOptionsRef","skipValidators","router","dialogs","isPristineRef","addTransitionGuard","guard","current","onBlocked","showDialog","title","content","acceptLabel","cancelLabel","onAccept","confirmTransition","onClose","cancelTransition","saveEntry","options","submit","onFormSubmit","data","values","fields","isNewEntry","id","error","createNewRevision","meta","locked","code","errors","item","fieldId","isNewRevision","unblockTransition","createElement","onSubmit","onAfterSubmit","validateOnFirstSubmit","onInvalid","formProps","form","isPristine","context","Provider","value","name","group","views"],"sources":["ContentEntryFormProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { DevToolsSection, useDialogs, useSnackbar } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport type { FormAPI, FormInvalidFields, FormOnSubmit, FormValidation } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { prepareFormData } from \"@webiny/app-headless-cms-common\";\nimport type { CmsContentEntry, CmsModel } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport type {\n    CreateEntryResponse,\n    UpdateEntryRevisionResponse\n} from \"~/admin/contexts/Cms/index.js\";\nimport type { GenericRecord } from \"@webiny/app/types.js\";\n\nconst promptMessage =\n    \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\";\n\ninterface SaveEntryOptions {\n    skipValidators?: string[];\n    createNewRevision?: boolean;\n}\n\nexport interface ContentEntryFormContext {\n    entry: Partial<Omit<CmsContentEntry, \"values\">> & Pick<CmsContentEntry, \"values\">;\n    saveEntry: (options?: SaveEntryOptions) => Promise<CmsContentEntry | null>;\n    invalidFields: FormInvalidFields;\n}\n\nexport const ContentEntryFormContext = React.createContext<ContentEntryFormContext | undefined>(\n    undefined\n);\n\nexport interface SetSaveEntry {\n    (cb: ContentEntryFormContext[\"saveEntry\"]): void;\n}\n\nexport interface PersistEntry {\n    (\n        entry: Partial<CmsContentEntry>,\n        options?: SaveEntryOptions\n    ): Promise<CreateEntryResponse | UpdateEntryRevisionResponse>;\n}\n\ninterface ContentEntryFormProviderProps {\n    entry: Partial<Omit<CmsContentEntry, \"values\">> & Pick<CmsContentEntry, \"values\">;\n    model: CmsModel;\n    persistEntry: PersistEntry;\n    confirmNavigationIfDirty: boolean;\n    onChange?: FormOnSubmit<Partial<CmsContentEntry>>;\n    onInvalidFields?: (invalidFields: FormValidation) => void;\n    onAfterCreate?: (entry: CmsContentEntry) => void;\n    setSaveEntry?: SetSaveEntry;\n    children: React.ReactNode;\n}\n\ninterface InvalidFieldError {\n    fieldId: string;\n    error: string;\n}\n\nconst formValidationToMap = (invalidFields: FormValidation): FormInvalidFields => {\n    return Object.keys(invalidFields).reduce(\n        (acc, key) => ({ ...acc, [key]: invalidFields[key].message || \"Value is invalid.\" }),\n        {} as FormInvalidFields\n    );\n};\n\nexport const ContentEntryFormProvider = ({\n    model,\n    entry: initialEntry,\n    children,\n    persistEntry,\n    onChange,\n    onInvalidFields,\n    onAfterCreate,\n    setSaveEntry,\n    confirmNavigationIfDirty\n}: ContentEntryFormProviderProps) => {\n    const ref = useRef<FormAPI<CmsContentEntry> | null>(null);\n    const onAfterSubmitRef = useRef<(entry: CmsContentEntry) => void>(() => void 0);\n    const [invalidFields, setInvalidFields] = useState<FormInvalidFields>({});\n    const { showSnackbar } = useSnackbar();\n    const saveOptionsRef = useRef<SaveEntryOptions>({ skipValidators: undefined });\n    const router = useRouter();\n    const dialogs = useDialogs();\n    const isPristineRef = useRef(true);\n\n    useEffect(() => {\n        if (!confirmNavigationIfDirty) {\n            return;\n        }\n\n        return router.addTransitionGuard({\n            guard: () => !isPristineRef.current,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content: promptMessage,\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => router.confirmTransition(),\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, [confirmNavigationIfDirty]);\n\n    const saveEntry = useCallback(async (options: SaveEntryOptions = {}) => {\n        saveOptionsRef.current.skipValidators = options.skipValidators;\n\n        return (await ref.current!.submit(undefined, {\n            skipValidators: options.skipValidators\n        })) as Promise<CmsContentEntry | null>;\n    }, []);\n\n    const onFormSubmit: FormOnSubmit<CmsContentEntry> = async data => {\n        const values = prepareFormData<GenericRecord>(data, model.fields);\n        const isNewEntry = initialEntry.id === undefined;\n\n        const { entry, error } = await persistEntry(\n            {\n                id: initialEntry.id,\n                values\n            },\n            {\n                skipValidators: saveOptionsRef.current.skipValidators,\n                createNewRevision: initialEntry.meta?.locked\n            }\n        );\n\n        if (error) {\n            if (error.code === \"VALIDATION_FAILED\") {\n                const errors: InvalidFieldError[] = error.data || [];\n\n                setInvalidFields(\n                    errors.reduce((acc, item) => ({ ...acc, [item.fieldId]: item.error }), {})\n                );\n            }\n            showSnackbar(error.message);\n\n            return;\n        }\n\n        showSnackbar(\"Entry saved successfully!\");\n        setInvalidFields({});\n\n        const isNewRevision = !isNewEntry && entry.id !== initialEntry.id;\n\n        if ((isNewEntry || isNewRevision) && onAfterCreate) {\n            onAfterSubmitRef.current = onAfterCreate;\n        }\n\n        router.unblockTransition();\n\n        return entry;\n    };\n\n    useEffect(() => {\n        if (typeof setSaveEntry === \"function\") {\n            setSaveEntry(saveEntry);\n        }\n    }, [setSaveEntry]);\n\n    return (\n        <Form<CmsContentEntry>\n            onSubmit={onFormSubmit}\n            onAfterSubmit={data => {\n                onAfterSubmitRef.current(data);\n            }}\n            onChange={onChange}\n            data={initialEntry.values}\n            ref={ref}\n            validateOnFirstSubmit\n            invalidFields={invalidFields}\n            onInvalid={invalidFields => {\n                setInvalidFields(formValidationToMap(invalidFields));\n                onInvalidFields && onInvalidFields(invalidFields);\n                showSnackbar(\"Some fields did not pass the validation. Please check the form.\");\n            }}\n        >\n            {formProps => {\n                isPristineRef.current = formProps.form.isPristine;\n\n                const context: ContentEntryFormContext = {\n                    entry: { ...initialEntry, values: formProps.data },\n                    saveEntry,\n                    invalidFields\n                };\n                return (\n                    <ContentEntryFormContext.Provider value={context}>\n                        <DevToolsSection\n                            name={\"Entry\"}\n                            group={\"CMS\"}\n                            data={context.entry}\n                            views={\"raw\"}\n                        />\n                        {children}\n                    </ContentEntryFormContext.Provider>\n                );\n            }}\n        </Form>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/ContentEntryForm/Header/SaveContent/SaveContent.js

@@ -2,13 +2,14 @@ import React from "react";
 import { ContentEntryEditorConfig } from "../../../../config/contentEntries/index.js";
 import { usePermission } from "../../../../hooks/usePermission.js";
 import { useContentEntryForm } from "../../useContentEntryForm.js";
+import { useIsModelPublishable } from "../../../../hooks/useIsModelPublishable.js";
 export const SaveContentButton = () => {
-  const {
-    canEdit
-  } = usePermission();
   const {
     useButtons
   } = ContentEntryEditorConfig.Actions.ButtonAction;
+  const {
+    canEdit
+  } = usePermission();
   const {
     ButtonSecondary
   } = useButtons();
@@ -16,13 +17,15 @@ export const SaveContentButton = () => {
     entry,
     saveEntry
   } = useContentEntryForm();
+  const isModelPublishable = useIsModelPublishable();
   if (!canEdit(entry, "cms.contentEntry")) {
     return null;
   }
+  const skipValidators = isModelPublishable ? ["required"] : [];
   return /*#__PURE__*/React.createElement(ButtonSecondary, {
     "data-testid": "cms-content-save-content-button",
     onAction: () => saveEntry({
-      skipValidators: ["required"]
+      skipValidators
     })
   }, "Save");
 };

package/admin/components/ContentEntryForm/Header/SaveContent/SaveContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ContentEntryEditorConfig","usePermission","useContentEntryForm","SaveContentButton","canEdit","useButtons","Actions","ButtonAction","ButtonSecondary","entry","saveEntry","createElement","onAction","skipValidators"],"sources":["SaveContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { ContentEntryEditorConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { usePermission } from \"~/admin/hooks/usePermission.js\";\nimport { useContentEntryForm } from \"~/admin/components/ContentEntryForm/useContentEntryForm.js\";\n\nexport const SaveContentButton = () => {\n    const { canEdit } = usePermission();\n    const { useButtons } = ContentEntryEditorConfig.Actions.ButtonAction;\n    const { ButtonSecondary } = useButtons();\n    const { entry, saveEntry } = useContentEntryForm();\n\n    if (!canEdit(entry, \"cms.contentEntry\")) {\n        return null;\n    }\n\n    return (\n        <ButtonSecondary\n            data-testid={\"cms-content-save-content-button\"}\n            onAction={() => saveEntry({ skipValidators: [\"required\"] })}\n        >\n            {\"Save\"}\n        </ButtonSecondary>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,wBAAwB;AACjC,SAASC,aAAa;AACtB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAM;IAAEC;EAAQ,CAAC,GAAGH,aAAa,CAAC,CAAC;EACnC,MAAM;IAAEI;EAAW,CAAC,GAAGL,wBAAwB,CAACM,OAAO,CAACC,YAAY;EACpE,MAAM;IAAEC;EAAgB,CAAC,GAAGH,UAAU,CAAC,CAAC;EACxC,MAAM;IAAEI,KAAK;IAAEC;EAAU,CAAC,GAAGR,mBAAmB,CAAC,CAAC;EAElD,IAAI,CAACE,OAAO,CAACK,KAAK,EAAE,kBAAkB,CAAC,EAAE;IACrC,OAAO,IAAI;EACf;EAEA,oBACIV,KAAA,CAAAY,aAAA,CAACH,eAAe;IACZ,eAAa,iCAAkC;IAC/CI,QAAQ,EAAEA,CAAA,KAAMF,SAAS,CAAC;MAAEG,cAAc,EAAE,CAAC,UAAU;IAAE,CAAC;EAAE,GAE3D,MACY,CAAC;AAE1B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ContentEntryEditorConfig","usePermission","useContentEntryForm","useIsModelPublishable","SaveContentButton","useButtons","Actions","ButtonAction","canEdit","ButtonSecondary","entry","saveEntry","isModelPublishable","skipValidators","createElement","onAction"],"sources":["SaveContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { ContentEntryEditorConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { usePermission } from \"~/admin/hooks/usePermission.js\";\nimport { useContentEntryForm } from \"~/admin/components/ContentEntryForm/useContentEntryForm.js\";\nimport { useIsModelPublishable } from \"~/admin/hooks/useIsModelPublishable.js\";\n\nexport const SaveContentButton = () => {\n    const { useButtons } = ContentEntryEditorConfig.Actions.ButtonAction;\n    const { canEdit } = usePermission();\n    const { ButtonSecondary } = useButtons();\n    const { entry, saveEntry } = useContentEntryForm();\n    const isModelPublishable = useIsModelPublishable();\n\n    if (!canEdit(entry, \"cms.contentEntry\")) {\n        return null;\n    }\n\n    const skipValidators = isModelPublishable ? [\"required\"] : [];\n\n    return (\n        <ButtonSecondary\n            data-testid={\"cms-content-save-content-button\"}\n            onAction={() => saveEntry({ skipValidators })}\n        >\n            {\"Save\"}\n        </ButtonSecondary>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,wBAAwB;AACjC,SAASC,aAAa;AACtB,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAE9B,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAM;IAAEC;EAAW,CAAC,GAAGL,wBAAwB,CAACM,OAAO,CAACC,YAAY;EACpE,MAAM;IAAEC;EAAQ,CAAC,GAAGP,aAAa,CAAC,CAAC;EACnC,MAAM;IAAEQ;EAAgB,CAAC,GAAGJ,UAAU,CAAC,CAAC;EACxC,MAAM;IAAEK,KAAK;IAAEC;EAAU,CAAC,GAAGT,mBAAmB,CAAC,CAAC;EAClD,MAAMU,kBAAkB,GAAGT,qBAAqB,CAAC,CAAC;EAElD,IAAI,CAACK,OAAO,CAACE,KAAK,EAAE,kBAAkB,CAAC,EAAE;IACrC,OAAO,IAAI;EACf;EAEA,MAAMG,cAAc,GAAGD,kBAAkB,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE;EAE7D,oBACIb,KAAA,CAAAe,aAAA,CAACL,eAAe;IACZ,eAAa,iCAAkC;IAC/CM,QAAQ,EAAEA,CAAA,KAAMJ,SAAS,CAAC;MAAEE;IAAe,CAAC;EAAE,GAE7C,MACY,CAAC;AAE1B,CAAC","ignoreList":[]}

package/admin/components/ContentEntryForm/ParentValue.js

@@ -17,7 +17,7 @@ export const ParentFieldProvider = ({
 }) => {
   const parent = useContext(ParentField);
   const form = useForm();
-  const formRef = useRef();
+  const formRef = useRef(null);
   let field;
   try {
     const fieldContext = useModelField();

package/admin/components/ContentEntryForm/ParentValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useCallback","useContext","useEffect","useRef","get","useModelField","useForm","ParentField","undefined","useParentField","level","parent","getParentField","ParentFieldProvider","path","value","children","form","formRef","field","fieldContext","current","data","setValue","fieldId","cb","fieldPath","context","createElement","type","Provider"],"sources":["ParentValue.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useRef } from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelField } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport type { FormAPI } from \"@webiny/form\";\nimport { useForm } from \"@webiny/form\";\n\ndeclare module \"react\" {\n    namespace JSX {\n        interface IntrinsicElements {\n            \"hcms-parent-field-provider\": React.HTMLProps<HTMLDivElement>;\n        }\n    }\n}\n\ninterface ParentField {\n    value: any;\n    setValue: (fieldId: string, cb: (prevValue: any) => any) => void;\n    field: CmsModelField;\n    getParentField(level: number): ParentField | undefined;\n    path: string;\n}\n\nconst ParentField = createContext<ParentField | undefined>(undefined);\n\nexport function useParentField(level = 0): ParentField | undefined {\n    const parent = useContext(ParentField);\n\n    if (!parent) {\n        return undefined;\n    }\n\n    return level === 0 ? parent : parent.getParentField(level - 1);\n}\n\ninterface ParentFieldProviderProps {\n    value: any;\n    path: string;\n    children: React.ReactNode;\n}\n\nexport const ParentFieldProvider = ({ path, value, children }: ParentFieldProviderProps) => {\n    const parent = useContext(ParentField);\n    const form = useForm();\n    const formRef = useRef<FormAPI>();\n\n    let field: CmsModelField | undefined;\n    try {\n        const fieldContext = useModelField();\n        field = fieldContext.field;\n    } catch {\n        field = undefined;\n    }\n\n    const getParentField = (level = 0) => {\n        return parent ? (level === 0 ? parent : parent.getParentField(level - 1)) : undefined;\n    };\n\n    useEffect(() => {\n        formRef.current = form;\n    }, [form.data]);\n\n    const setValue = useCallback<ParentField[\"setValue\"]>((fieldId, cb) => {\n        const fieldPath = `${path}.${fieldId}`;\n        if (!path || !formRef.current) {\n            return;\n        }\n\n        formRef.current.setValue(fieldPath, cb(get(formRef.current.data, fieldPath)));\n    }, []);\n\n    const context: ParentField | undefined = field\n        ? {\n              value,\n              field,\n              getParentField,\n              path,\n              setValue\n          }\n        : undefined;\n\n    return (\n        <hcms-parent-field-provider data-path={path} data-field-type={field?.type}>\n            <ParentField.Provider value={context}>{children}</ParentField.Provider>\n        </hcms-parent-field-provider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACxF,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,aAAa;AAEtB,SAASC,OAAO,QAAQ,cAAc;AAkBtC,MAAMC,WAAW,gBAAGR,aAAa,CAA0BS,SAAS,CAAC;AAErE,OAAO,SAASC,cAAcA,CAACC,KAAK,GAAG,CAAC,EAA2B;EAC/D,MAAMC,MAAM,GAAGV,UAAU,CAACM,WAAW,CAAC;EAEtC,IAAI,CAACI,MAAM,EAAE;IACT,OAAOH,SAAS;EACpB;EAEA,OAAOE,KAAK,KAAK,CAAC,GAAGC,MAAM,GAAGA,MAAM,CAACC,cAAc,CAACF,KAAK,GAAG,CAAC,CAAC;AAClE;AAQA,OAAO,MAAMG,mBAAmB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAmC,CAAC,KAAK;EACxF,MAAML,MAAM,GAAGV,UAAU,CAACM,WAAW,CAAC;EACtC,MAAMU,IAAI,GAAGX,OAAO,CAAC,CAAC;EACtB,MAAMY,OAAO,GAAGf,MAAM,CAAU,CAAC;EAEjC,IAAIgB,KAAgC;EACpC,IAAI;IACA,MAAMC,YAAY,GAAGf,aAAa,CAAC,CAAC;IACpCc,KAAK,GAAGC,YAAY,CAACD,KAAK;EAC9B,CAAC,CAAC,MAAM;IACJA,KAAK,GAAGX,SAAS;EACrB;EAEA,MAAMI,cAAc,GAAGA,CAACF,KAAK,GAAG,CAAC,KAAK;IAClC,OAAOC,MAAM,GAAID,KAAK,KAAK,CAAC,GAAGC,MAAM,GAAGA,MAAM,CAACC,cAAc,CAACF,KAAK,GAAG,CAAC,CAAC,GAAIF,SAAS;EACzF,CAAC;EAEDN,SAAS,CAAC,MAAM;IACZgB,OAAO,CAACG,OAAO,GAAGJ,IAAI;EAC1B,CAAC,EAAE,CAACA,IAAI,CAACK,IAAI,CAAC,CAAC;EAEf,MAAMC,QAAQ,GAAGvB,WAAW,CAA0B,CAACwB,OAAO,EAAEC,EAAE,KAAK;IACnE,MAAMC,SAAS,GAAG,GAAGZ,IAAI,IAAIU,OAAO,EAAE;IACtC,IAAI,CAACV,IAAI,IAAI,CAACI,OAAO,CAACG,OAAO,EAAE;MAC3B;IACJ;IAEAH,OAAO,CAACG,OAAO,CAACE,QAAQ,CAACG,SAAS,EAAED,EAAE,CAACrB,GAAG,CAACc,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEI,SAAS,CAAC,CAAC,CAAC;EACjF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAgC,GAAGR,KAAK,GACxC;IACIJ,KAAK;IACLI,KAAK;IACLP,cAAc;IACdE,IAAI;IACJS;EACJ,CAAC,GACDf,SAAS;EAEf,oBACIV,KAAA,CAAA8B,aAAA;IAA4B,aAAWd,IAAK;IAAC,mBAAiBK,KAAK,EAAEU;EAAK,gBACtE/B,KAAA,CAAA8B,aAAA,CAACrB,WAAW,CAACuB,QAAQ;IAACf,KAAK,EAAEY;EAAQ,GAAEX,QAA+B,CAC9C,CAAC;AAErC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createContext","useCallback","useContext","useEffect","useRef","get","useModelField","useForm","ParentField","undefined","useParentField","level","parent","getParentField","ParentFieldProvider","path","value","children","form","formRef","field","fieldContext","current","data","setValue","fieldId","cb","fieldPath","context","createElement","type","Provider"],"sources":["ParentValue.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useRef } from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelField } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport type { FormAPI } from \"@webiny/form\";\nimport { useForm } from \"@webiny/form\";\n\ndeclare module \"react\" {\n    namespace JSX {\n        interface IntrinsicElements {\n            \"hcms-parent-field-provider\": React.HTMLProps<HTMLDivElement>;\n        }\n    }\n}\n\ninterface ParentField {\n    value: any;\n    setValue: (fieldId: string, cb: (prevValue: any) => any) => void;\n    field: CmsModelField;\n    getParentField(level: number): ParentField | undefined;\n    path: string;\n}\n\nconst ParentField = createContext<ParentField | undefined>(undefined);\n\nexport function useParentField(level = 0): ParentField | undefined {\n    const parent = useContext(ParentField);\n\n    if (!parent) {\n        return undefined;\n    }\n\n    return level === 0 ? parent : parent.getParentField(level - 1);\n}\n\ninterface ParentFieldProviderProps {\n    value: any;\n    path: string;\n    children: React.ReactNode;\n}\n\nexport const ParentFieldProvider = ({ path, value, children }: ParentFieldProviderProps) => {\n    const parent = useContext(ParentField);\n    const form = useForm();\n    const formRef = useRef<FormAPI | null>(null);\n\n    let field: CmsModelField | undefined;\n    try {\n        const fieldContext = useModelField();\n        field = fieldContext.field;\n    } catch {\n        field = undefined;\n    }\n\n    const getParentField = (level = 0) => {\n        return parent ? (level === 0 ? parent : parent.getParentField(level - 1)) : undefined;\n    };\n\n    useEffect(() => {\n        formRef.current = form;\n    }, [form.data]);\n\n    const setValue = useCallback<ParentField[\"setValue\"]>((fieldId, cb) => {\n        const fieldPath = `${path}.${fieldId}`;\n        if (!path || !formRef.current) {\n            return;\n        }\n\n        formRef.current.setValue(fieldPath, cb(get(formRef.current.data, fieldPath)));\n    }, []);\n\n    const context: ParentField | undefined = field\n        ? {\n              value,\n              field,\n              getParentField,\n              path,\n              setValue\n          }\n        : undefined;\n\n    return (\n        <hcms-parent-field-provider data-path={path} data-field-type={field?.type}>\n            <ParentField.Provider value={context}>{children}</ParentField.Provider>\n        </hcms-parent-field-provider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACxF,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,aAAa;AAEtB,SAASC,OAAO,QAAQ,cAAc;AAkBtC,MAAMC,WAAW,gBAAGR,aAAa,CAA0BS,SAAS,CAAC;AAErE,OAAO,SAASC,cAAcA,CAACC,KAAK,GAAG,CAAC,EAA2B;EAC/D,MAAMC,MAAM,GAAGV,UAAU,CAACM,WAAW,CAAC;EAEtC,IAAI,CAACI,MAAM,EAAE;IACT,OAAOH,SAAS;EACpB;EAEA,OAAOE,KAAK,KAAK,CAAC,GAAGC,MAAM,GAAGA,MAAM,CAACC,cAAc,CAACF,KAAK,GAAG,CAAC,CAAC;AAClE;AAQA,OAAO,MAAMG,mBAAmB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAmC,CAAC,KAAK;EACxF,MAAML,MAAM,GAAGV,UAAU,CAACM,WAAW,CAAC;EACtC,MAAMU,IAAI,GAAGX,OAAO,CAAC,CAAC;EACtB,MAAMY,OAAO,GAAGf,MAAM,CAAiB,IAAI,CAAC;EAE5C,IAAIgB,KAAgC;EACpC,IAAI;IACA,MAAMC,YAAY,GAAGf,aAAa,CAAC,CAAC;IACpCc,KAAK,GAAGC,YAAY,CAACD,KAAK;EAC9B,CAAC,CAAC,MAAM;IACJA,KAAK,GAAGX,SAAS;EACrB;EAEA,MAAMI,cAAc,GAAGA,CAACF,KAAK,GAAG,CAAC,KAAK;IAClC,OAAOC,MAAM,GAAID,KAAK,KAAK,CAAC,GAAGC,MAAM,GAAGA,MAAM,CAACC,cAAc,CAACF,KAAK,GAAG,CAAC,CAAC,GAAIF,SAAS;EACzF,CAAC;EAEDN,SAAS,CAAC,MAAM;IACZgB,OAAO,CAACG,OAAO,GAAGJ,IAAI;EAC1B,CAAC,EAAE,CAACA,IAAI,CAACK,IAAI,CAAC,CAAC;EAEf,MAAMC,QAAQ,GAAGvB,WAAW,CAA0B,CAACwB,OAAO,EAAEC,EAAE,KAAK;IACnE,MAAMC,SAAS,GAAG,GAAGZ,IAAI,IAAIU,OAAO,EAAE;IACtC,IAAI,CAACV,IAAI,IAAI,CAACI,OAAO,CAACG,OAAO,EAAE;MAC3B;IACJ;IAEAH,OAAO,CAACG,OAAO,CAACE,QAAQ,CAACG,SAAS,EAAED,EAAE,CAACrB,GAAG,CAACc,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEI,SAAS,CAAC,CAAC,CAAC;EACjF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAgC,GAAGR,KAAK,GACxC;IACIJ,KAAK;IACLI,KAAK;IACLP,cAAc;IACdE,IAAI;IACJS;EACJ,CAAC,GACDf,SAAS;EAEf,oBACIV,KAAA,CAAA8B,aAAA;IAA4B,aAAWd,IAAK;IAAC,mBAAiBK,KAAK,EAAEU;EAAK,gBACtE/B,KAAA,CAAA8B,aAAA,CAACrB,WAAW,CAACuB,QAAQ;IAACf,KAAK,EAAEY;EAAQ,GAAEX,QAA+B,CAC9C,CAAC;AAErC,CAAC","ignoreList":[]}

package/admin/components/ContentModelEditor/ContentModelEditor.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { makeDecoratable, NavigationPrompt, LeftPanel, RightPanel, SplitView } from "@webiny/app-admin";
+import { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from "@webiny/app-admin";
+import { useRouter } from "@webiny/app";
 import { i18n } from "@webiny/app/i18n/index.js";
 import { Heading, OverlayLoader, Tabs, Text, TimeAgo } from "@webiny/admin-ui";
 import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
@@ -23,6 +24,8 @@ export const ContentModelEditor = makeDecoratable("ContentModelEditor", () => {
     isPristine,
     contentModel
   } = useModelEditor();
+  const router = useRouter();
+  const dialogs = useDialogs();
 
   // Add a class to <body> to trigger global styles while this component is active
   useEffect(() => {
@@ -31,6 +34,23 @@ export const ContentModelEditor = makeDecoratable("ContentModelEditor", () => {
       document.body.classList.remove("overflow-hidden");
     };
   }, []);
+  const isPristineRef = React.useRef(isPristine);
+  isPristineRef.current = isPristine;
+  useEffect(() => {
+    return router.addTransitionGuard({
+      guard: () => !isPristineRef.current,
+      onBlocked: () => {
+        dialogs.showDialog({
+          title: "Confirm Navigation",
+          content: prompt,
+          acceptLabel: "Yes!",
+          cancelLabel: "No, stay here.",
+          onAccept: () => router.confirmTransition(),
+          onClose: () => router.cancelTransition()
+        });
+      }
+    });
+  }, []);
   const [activeTab, setActiveTab] = useState("edit");
   const onChange = ({
     fields,
@@ -53,10 +73,7 @@ export const ContentModelEditor = makeDecoratable("ContentModelEditor", () => {
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "content-model-editor flex-1"
-  }, /*#__PURE__*/React.createElement(NavigationPrompt, {
-    when: !isPristine,
-    message: prompt
-  }), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
     className: "w-full overflow-y-auto h-main-content"
   }, /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, {
     span: 4,

package/admin/components/ContentModelEditor/ContentModelEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","makeDecoratable","NavigationPrompt","LeftPanel","RightPanel","SplitView","i18n","Heading","OverlayLoader","Tabs","Text","TimeAgo","ReactComponent","EditIcon","PreviewIcon","FieldsSidebar","FieldEditor","PreviewTab","Header","DragPreview","useModelEditor","ContentEntryEditorWithConfig","ContentEntryProvider","ContentEntriesProvider","ModelIsBeingDeletedError","t","ns","prompt","ContentModelEditor","data","setData","isPristine","contentModel","document","body","classList","add","remove","activeTab","setActiveTab","onChange","fields","layout","createElement","text","isBeingDeleted","model","className","when","message","span","onFieldDragStart","level","name","size","createdBy","displayName","datetime","savedOn","spacing","separator","value","String","onValueChange","tabs","Tab","key","trigger","icon","content","readonly"],"sources":["ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport {\n    makeDecoratable,\n    NavigationPrompt,\n    LeftPanel,\n    RightPanel,\n    SplitView\n} from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Heading, OverlayLoader, Tabs, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/fullscreen.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext.js\";\nimport { ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n    const { data, setData, isPristine, contentModel } = useModelEditor();\n\n    // Add a class to <body> to trigger global styles while this component is active\n    useEffect(() => {\n        document.body.classList.add(\"overflow-hidden\");\n\n        return () => {\n            document.body.classList.remove(\"overflow-hidden\");\n        };\n    }, []);\n\n    const [activeTab, setActiveTab] = useState<string>(\"edit\");\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <OverlayLoader text={\"Loading content model...\"} />;\n    } else if (data.isBeingDeleted) {\n        return <ModelIsBeingDeletedError model={data} />;\n    }\n\n    return (\n        <div className={\"content-model-editor flex-1\"}>\n            <NavigationPrompt when={!isPristine} message={prompt} />\n            <Header />\n            <div className={\"w-full overflow-y-auto h-main-content\"}>\n                <SplitView>\n                    <LeftPanel span={4} className={\"bg-neutral-light\"}>\n                        <div className={\"px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll\"}>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    setActiveTab(\"edit\");\n                                }}\n                            />\n                        </div>\n                    </LeftPanel>\n                    <RightPanel span={8} className={\"bg-neutral-base\"}>\n                        <div className={\"h-full overflow-y-scroll\"}>\n                            {contentModel && (\n                                <div className={\"px-xl pt-lg pb-md-extra\"}>\n                                    <Heading level={4}>{contentModel.name}</Heading>\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        {`Created by ${contentModel.createdBy.displayName}. Last modified: `}\n                                        <TimeAgo datetime={contentModel.savedOn} />.\n                                    </Text>\n                                </div>\n                            )}\n                            <Tabs\n                                size={\"md\"}\n                                spacing={\"xl\"}\n                                separator={true}\n                                value={String(activeTab)}\n                                onValueChange={setActiveTab}\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"edit\"}\n                                        value={\"edit\"}\n                                        trigger={\"Edit\"}\n                                        icon={<EditIcon />}\n                                        data-testid={\"cms.editor.tab.edit\"}\n                                        content={\n                                            <div className={\"relative mb-lg\"}>\n                                                <FieldEditor\n                                                    fields={data.fields}\n                                                    layout={data.layout || []}\n                                                    onChange={onChange}\n                                                />\n                                            </div>\n                                        }\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"preview\"}\n                                        value={\"preview\"}\n                                        trigger={\"Preview\"}\n                                        icon={<PreviewIcon />}\n                                        data-testid={\"cms.editor.tab.preview\"}\n                                        content={\n                                            <ContentEntryEditorWithConfig>\n                                                <ContentEntriesProvider contentModel={data}>\n                                                    <ContentEntryProvider readonly={true}>\n                                                        <PreviewTab\n                                                            activeTab={activeTab === \"preview\"}\n                                                        />\n                                                    </ContentEntryProvider>\n                                                </ContentEntriesProvider>\n                                            </ContentEntryEditorWithConfig>\n                                        }\n                                    />\n                                ]}\n                            />\n                        </div>\n                    </RightPanel>\n                </SplitView>\n                <DragPreview />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","makeDecoratable","useDialogs","LeftPanel","RightPanel","SplitView","useRouter","i18n","Heading","OverlayLoader","Tabs","Text","TimeAgo","ReactComponent","EditIcon","PreviewIcon","FieldsSidebar","FieldEditor","PreviewTab","Header","DragPreview","useModelEditor","ContentEntryEditorWithConfig","ContentEntryProvider","ContentEntriesProvider","ModelIsBeingDeletedError","t","ns","prompt","ContentModelEditor","data","setData","isPristine","contentModel","router","dialogs","document","body","classList","add","remove","isPristineRef","useRef","current","addTransitionGuard","guard","onBlocked","showDialog","title","content","acceptLabel","cancelLabel","onAccept","confirmTransition","onClose","cancelTransition","activeTab","setActiveTab","onChange","fields","layout","createElement","text","isBeingDeleted","model","className","span","onFieldDragStart","level","name","size","createdBy","displayName","datetime","savedOn","spacing","separator","value","String","onValueChange","tabs","Tab","key","trigger","icon","readonly"],"sources":["ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Heading, OverlayLoader, Tabs, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/fullscreen.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext.js\";\nimport { ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n    const { data, setData, isPristine, contentModel } = useModelEditor();\n    const router = useRouter();\n    const dialogs = useDialogs();\n\n    // Add a class to <body> to trigger global styles while this component is active\n    useEffect(() => {\n        document.body.classList.add(\"overflow-hidden\");\n\n        return () => {\n            document.body.classList.remove(\"overflow-hidden\");\n        };\n    }, []);\n\n    const isPristineRef = React.useRef(isPristine);\n    isPristineRef.current = isPristine;\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => !isPristineRef.current,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content: prompt,\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => router.confirmTransition(),\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const [activeTab, setActiveTab] = useState<string>(\"edit\");\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <OverlayLoader text={\"Loading content model...\"} />;\n    } else if (data.isBeingDeleted) {\n        return <ModelIsBeingDeletedError model={data} />;\n    }\n\n    return (\n        <div className={\"content-model-editor flex-1\"}>\n            <Header />\n            <div className={\"w-full overflow-y-auto h-main-content\"}>\n                <SplitView>\n                    <LeftPanel span={4} className={\"bg-neutral-light\"}>\n                        <div className={\"px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll\"}>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    setActiveTab(\"edit\");\n                                }}\n                            />\n                        </div>\n                    </LeftPanel>\n                    <RightPanel span={8} className={\"bg-neutral-base\"}>\n                        <div className={\"h-full overflow-y-scroll\"}>\n                            {contentModel && (\n                                <div className={\"px-xl pt-lg pb-md-extra\"}>\n                                    <Heading level={4}>{contentModel.name}</Heading>\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        {`Created by ${contentModel.createdBy.displayName}. Last modified: `}\n                                        <TimeAgo datetime={contentModel.savedOn} />.\n                                    </Text>\n                                </div>\n                            )}\n                            <Tabs\n                                size={\"md\"}\n                                spacing={\"xl\"}\n                                separator={true}\n                                value={String(activeTab)}\n                                onValueChange={setActiveTab}\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"edit\"}\n                                        value={\"edit\"}\n                                        trigger={\"Edit\"}\n                                        icon={<EditIcon />}\n                                        data-testid={\"cms.editor.tab.edit\"}\n                                        content={\n                                            <div className={\"relative mb-lg\"}>\n                                                <FieldEditor\n                                                    fields={data.fields}\n                                                    layout={data.layout || []}\n                                                    onChange={onChange}\n                                                />\n                                            </div>\n                                        }\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"preview\"}\n                                        value={\"preview\"}\n                                        trigger={\"Preview\"}\n                                        icon={<PreviewIcon />}\n                                        data-testid={\"cms.editor.tab.preview\"}\n                                        content={\n                                            <ContentEntryEditorWithConfig>\n                                                <ContentEntriesProvider contentModel={data}>\n                                                    <ContentEntryProvider readonly={true}>\n                                                        <PreviewTab\n                                                            activeTab={activeTab === \"preview\"}\n                                                        />\n                                                    </ContentEntryProvider>\n                                                </ContentEntriesProvider>\n                                            </ContentEntryEditorWithConfig>\n                                        }\n                                    />\n                                ]}\n                            />\n                        </div>\n                    </RightPanel>\n                </SplitView>\n                <DragPreview />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -20,7 +20,9 @@ const Field = props => {
   }, ({
     drag
   }) => /*#__PURE__*/React.createElement("div", {
-    ref: drag,
+    ref: element => {
+      drag(element);
+    },
     "data-testid": `cms-editor-fields-field-${type}`,
     onDragStart: onFieldDragStart,
     className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
@@ -56,7 +58,9 @@ const LayoutFieldItem = props => {
   }, ({
     drag
   }) => /*#__PURE__*/React.createElement("div", {
-    ref: drag,
+    ref: element => {
+      drag(element);
+    },
     "data-testid": `cms-editor-fields-layout-field-${type}`,
     onDragStart: onFieldDragStart,
     className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"

package/admin/components/ContentModelEditor/FieldsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","plugins","Draggable","Heading","Icon","Text","Field","props","onFieldDragStart","fieldType","type","label","icon","description","createElement","beginDrag","drag","ref","onDragStart","className","size","color","level","LayoutFieldItem","layoutField","layoutFieldType","FieldsSidebar","fieldTypePlugin","byType","filter","p","field","hideInAdmin","layoutFieldPlugins","Fragment","as","map","fieldPlugin","key","length","lp"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import type { DragEventHandler } from \"react\";\nimport React from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport Draggable from \"../Draggable.js\";\nimport type { CmsModelFieldTypePlugin, CmsModelLayoutFieldTypePlugin } from \"~/types.js\";\nimport { Heading, Icon, Text } from \"@webiny/admin-ui\";\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\n\nconst Field = (props: FieldProps) => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                    className={\n                        \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n                    }\n                >\n                    <div className={\"flex items-center gap-md\"}>\n                        <div>\n                            <Icon\n                                icon={icon as React.ReactElement}\n                                label={label}\n                                size={\"md\"}\n                                color={\"neutral-light\"}\n                            />\n                        </div>\n                        <div>\n                            <Heading level={6}>{label}</Heading>\n                            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {description}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface LayoutFieldItemProps {\n    onFieldDragStart: DragEventHandler;\n    layoutField: CmsModelLayoutFieldTypePlugin[\"field\"];\n}\n\nconst LayoutFieldItem = (props: LayoutFieldItemProps) => {\n    const {\n        onFieldDragStart,\n        layoutField: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newLayoutField\", layoutFieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    data-testid={`cms-editor-fields-layout-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                    className={\n                        \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n                    }\n                >\n                    <div className={\"flex items-center gap-md\"}>\n                        <div>\n                            <Icon icon={icon} label={label} size={\"md\"} color={\"neutral-light\"} />\n                        </div>\n                        <div>\n                            <Heading level={6}>{label}</Heading>\n                            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {description}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\n\nexport const FieldsSidebar = ({ onFieldDragStart }: FieldsSidebarProps) => {\n    const fieldTypePlugin = plugins\n        .byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\")\n        .filter(p => !p.field.hideInAdmin);\n\n    const layoutFieldPlugins = plugins.byType<CmsModelLayoutFieldTypePlugin>(\n        \"cms-editor-layout-field-type\"\n    );\n\n    return (\n        <>\n            <Text\n                as=\"div\"\n                size={\"md\"}\n                className={\"text-neutral-strong uppercase mt-0 mb-md font-semibold\"}\n            >\n                Fields\n            </Text>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n            {layoutFieldPlugins.length > 0 && (\n                <>\n                    <Text\n                        as=\"div\"\n                        size={\"md\"}\n                        className={\"text-neutral-strong uppercase my-md font-semibold\"}\n                    >\n                        Layout\n                    </Text>\n                    {layoutFieldPlugins.map(lp => (\n                        <LayoutFieldItem\n                            key={lp.field.type}\n                            layoutField={lp.field}\n                            onFieldDragStart={onFieldDragStart}\n                        />\n                    ))}\n                </>\n            )}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","plugins","Draggable","Heading","Icon","Text","Field","props","onFieldDragStart","fieldType","type","label","icon","description","createElement","beginDrag","drag","ref","element","onDragStart","className","size","color","level","LayoutFieldItem","layoutField","layoutFieldType","FieldsSidebar","fieldTypePlugin","byType","filter","p","field","hideInAdmin","layoutFieldPlugins","Fragment","as","map","fieldPlugin","key","length","lp"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import type { DragEventHandler } from \"react\";\nimport React from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport Draggable from \"../Draggable.js\";\nimport type { CmsModelFieldTypePlugin, CmsModelLayoutFieldTypePlugin } from \"~/types.js\";\nimport { Heading, Icon, Text } from \"@webiny/admin-ui\";\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\n\nconst Field = (props: FieldProps) => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={element => {\n                        drag(element);\n                    }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                    className={\n                        \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n                    }\n                >\n                    <div className={\"flex items-center gap-md\"}>\n                        <div>\n                            <Icon\n                                icon={icon as React.ReactElement}\n                                label={label}\n                                size={\"md\"}\n                                color={\"neutral-light\"}\n                            />\n                        </div>\n                        <div>\n                            <Heading level={6}>{label}</Heading>\n                            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {description}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface LayoutFieldItemProps {\n    onFieldDragStart: DragEventHandler;\n    layoutField: CmsModelLayoutFieldTypePlugin[\"field\"];\n}\n\nconst LayoutFieldItem = (props: LayoutFieldItemProps) => {\n    const {\n        onFieldDragStart,\n        layoutField: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newLayoutField\", layoutFieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={element => {\n                        drag(element);\n                    }}\n                    data-testid={`cms-editor-fields-layout-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                    className={\n                        \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n                    }\n                >\n                    <div className={\"flex items-center gap-md\"}>\n                        <div>\n                            <Icon icon={icon} label={label} size={\"md\"} color={\"neutral-light\"} />\n                        </div>\n                        <div>\n                            <Heading level={6}>{label}</Heading>\n                            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                                {description}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\n\nexport const FieldsSidebar = ({ onFieldDragStart }: FieldsSidebarProps) => {\n    const fieldTypePlugin = plugins\n        .byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\")\n        .filter(p => !p.field.hideInAdmin);\n\n    const layoutFieldPlugins = plugins.byType<CmsModelLayoutFieldTypePlugin>(\n        \"cms-editor-layout-field-type\"\n    );\n\n    return (\n        <>\n            <Text\n                as=\"div\"\n                size={\"md\"}\n                className={\"text-neutral-strong uppercase mt-0 mb-md font-semibold\"}\n            >\n                Fields\n            </Text>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n            {layoutFieldPlugins.length > 0 && (\n                <>\n                    <Text\n                        as=\"div\"\n                        size={\"md\"}\n                        className={\"text-neutral-strong uppercase my-md font-semibold\"}\n                    >\n                        Layout\n                    </Text>\n                    {layoutFieldPlugins.map(lp => (\n                        <LayoutFieldItem\n                            key={lp.field.type}\n                            layoutField={lp.field}\n                            onFieldDragStart={onFieldDragStart}\n                        />\n                    ))}\n                </>\n            )}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/components/DragPreview.js

@@ -12,7 +12,7 @@ const onOffsetChange = monitor => () => {
   }
   const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;
   dragPreviewRef.style["transform"] = transform;
-  // TODO @ts-refactor figure out better type
+  // TODO @ts-refactor figure out better type / possibly not needed in newer browsers
   // @ts-expect-error
   dragPreviewRef.style["-webkit-transform"] = transform;
 };
@@ -64,7 +64,9 @@ const DragPreview = () => {
     },
     className: "fixed pointer-events-none left-0 top-0 w-full h-full"
   }, /*#__PURE__*/React.createElement("div", {
-    ref: el => dragPreviewRef = el,
+    ref: el => {
+      dragPreviewRef = el;
+    },
     className: "transition-opacity duration-250 ease-in-out block",
     style: {
       opacity: dragHelperOpacity

package/admin/components/DragPreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","useDragLayer","subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","getClientOffset","transform","x","y","style","DragPreview","dragHelperOpacity","setDragHelperOpacity","isDragging","initialMonitor","subscribeToOffsetChange","setTimeout","createElement","zIndex","className","ref","el","opacity"],"sources":["DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragSourceMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport type { DragSourceMonitorImpl } from \"~/types.js\";\n\nlet subscribedToOffsetChange = false;\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragSourceMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // TODO @ts-refactor figure out better type\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nconst DragPreview = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n    const { isDragging } = useDragLayer(initialMonitor => {\n        /**\n         * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.\n         */\n        const monitor = initialMonitor as unknown as DragSourceMonitorImpl;\n        if (!subscribedToOffsetChange) {\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect(() => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n        } else {\n            setDragHelperOpacity(0);\n        }\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (!isDragging) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{ zIndex: 1001 }}\n            className=\"fixed pointer-events-none left-0 top-0 w-full h-full\"\n        >\n            <div\n                ref={el => (dragPreviewRef = el)}\n                className=\"transition-opacity duration-250 ease-in-out block\"\n                style={{ opacity: dragHelperOpacity }}\n            >\n                <div className=\"size-lg rounded-full bg-primary\" />\n            </div>\n        </div>\n    );\n};\nexport default DragPreview;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,YAAY,QAAQ,WAAW;AAGxC,IAAIC,wBAAwB,GAAG,KAAK;AAEpC,IAAIC,cAAqC,GAAG,IAAI;AAEhD,MAAMC,cAAc,GAAIC,OAA0B,IAAK,MAAM;EACzD,IAAI,CAACF,cAAc,EAAE;IACjB;EACJ;EAEA,MAAMG,MAAM,GAAGD,OAAO,CAACE,eAAe,CAAC,CAAC;EACxC,IAAI,CAACD,MAAM,EAAE;IACT;EACJ;EAEA,MAAME,SAAS,GAAG,aAAaF,MAAM,CAACG,CAAC,GAAG,EAAE,OAAOH,MAAM,CAACI,CAAC,GAAG,EAAE,KAAK;EACrEP,cAAc,CAACQ,KAAK,CAAC,WAAW,CAAC,GAAGH,SAAS;EAC7C;EACA;EACAL,cAAc,CAACQ,KAAK,CAAC,mBAAmB,CAAC,GAAGH,SAAS;AACzD,CAAC;AAED,MAAMI,WAAW,GAAGA,CAAA,KAAM;EACtB,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGd,QAAQ,CAAC,CAAC,CAAC;EAC7D,MAAM;IAAEe;EAAW,CAAC,GAAGd,YAAY,CAACe,cAAc,IAAI;IAClD;AACR;AACA;IACQ,MAAMX,OAAO,GAAGW,cAAkD;IAClE,IAAI,CAACd,wBAAwB,EAAE;MAC3BG,OAAO,CAACY,uBAAuB,CAACb,cAAc,CAACC,OAAO,CAAC,CAAC;MACxDH,wBAAwB,GAAG,IAAI;IACnC;IAEA,OAAO;MACHa,UAAU,EAAEV,OAAO,CAACU,UAAU,CAAC;IACnC,CAAC;EACL,CAAC,CAAC;EAEFhB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTG,wBAAwB,GAAG,KAAK;MAChCC,cAAc,GAAG,IAAI;IACzB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA;EACAJ,SAAS,CAAC,MAAM;IACZ,IAAIgB,UAAU,EAAE;MACZG,UAAU,CAAC,MAAM;QACbJ,oBAAoB,CAACC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC5C,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHD,oBAAoB,CAAC,CAAC,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACC,UAAU,CAAC,CAAC;EAEhB,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,oBACIjB,KAAA,CAAAqB,aAAA;IACIR,KAAK,EAAE;MAAES,MAAM,EAAE;IAAK,CAAE;IACxBC,SAAS,EAAC;EAAsD,gBAEhEvB,KAAA,CAAAqB,aAAA;IACIG,GAAG,EAAEC,EAAE,IAAKpB,cAAc,GAAGoB,EAAI;IACjCF,SAAS,EAAC,mDAAmD;IAC7DV,KAAK,EAAE;MAAEa,OAAO,EAAEX;IAAkB;EAAE,gBAEtCf,KAAA,CAAAqB,aAAA;IAAKE,SAAS,EAAC;EAAiC,CAAE,CACjD,CACJ,CAAC;AAEd,CAAC;AACD,eAAeT,WAAW","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","useDragLayer","subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","getClientOffset","transform","x","y","style","DragPreview","dragHelperOpacity","setDragHelperOpacity","isDragging","initialMonitor","subscribeToOffsetChange","setTimeout","createElement","zIndex","className","ref","el","opacity"],"sources":["DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragSourceMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport type { DragSourceMonitorImpl } from \"~/types.js\";\n\nlet subscribedToOffsetChange = false;\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragSourceMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // TODO @ts-refactor figure out better type / possibly not needed in newer browsers\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nconst DragPreview = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n    const { isDragging } = useDragLayer(initialMonitor => {\n        /**\n         * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.\n         */\n        const monitor = initialMonitor as unknown as DragSourceMonitorImpl;\n        if (!subscribedToOffsetChange) {\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect(() => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n        } else {\n            setDragHelperOpacity(0);\n        }\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (!isDragging) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{ zIndex: 1001 }}\n            className=\"fixed pointer-events-none left-0 top-0 w-full h-full\"\n        >\n            <div\n                ref={el => {\n                    dragPreviewRef = el;\n                }}\n                className=\"transition-opacity duration-250 ease-in-out block\"\n                style={{ opacity: dragHelperOpacity }}\n            >\n                <div className=\"size-lg rounded-full bg-primary\" />\n            </div>\n        </div>\n    );\n};\nexport default DragPreview;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,YAAY,QAAQ,WAAW;AAGxC,IAAIC,wBAAwB,GAAG,KAAK;AAEpC,IAAIC,cAAqC,GAAG,IAAI;AAEhD,MAAMC,cAAc,GAAIC,OAA0B,IAAK,MAAM;EACzD,IAAI,CAACF,cAAc,EAAE;IACjB;EACJ;EAEA,MAAMG,MAAM,GAAGD,OAAO,CAACE,eAAe,CAAC,CAAC;EACxC,IAAI,CAACD,MAAM,EAAE;IACT;EACJ;EAEA,MAAME,SAAS,GAAG,aAAaF,MAAM,CAACG,CAAC,GAAG,EAAE,OAAOH,MAAM,CAACI,CAAC,GAAG,EAAE,KAAK;EACrEP,cAAc,CAACQ,KAAK,CAAC,WAAW,CAAC,GAAGH,SAAS;EAC7C;EACA;EACAL,cAAc,CAACQ,KAAK,CAAC,mBAAmB,CAAC,GAAGH,SAAS;AACzD,CAAC;AAED,MAAMI,WAAW,GAAGA,CAAA,KAAM;EACtB,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGd,QAAQ,CAAC,CAAC,CAAC;EAC7D,MAAM;IAAEe;EAAW,CAAC,GAAGd,YAAY,CAACe,cAAc,IAAI;IAClD;AACR;AACA;IACQ,MAAMX,OAAO,GAAGW,cAAkD;IAClE,IAAI,CAACd,wBAAwB,EAAE;MAC3BG,OAAO,CAACY,uBAAuB,CAACb,cAAc,CAACC,OAAO,CAAC,CAAC;MACxDH,wBAAwB,GAAG,IAAI;IACnC;IAEA,OAAO;MACHa,UAAU,EAAEV,OAAO,CAACU,UAAU,CAAC;IACnC,CAAC;EACL,CAAC,CAAC;EAEFhB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTG,wBAAwB,GAAG,KAAK;MAChCC,cAAc,GAAG,IAAI;IACzB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA;EACAJ,SAAS,CAAC,MAAM;IACZ,IAAIgB,UAAU,EAAE;MACZG,UAAU,CAAC,MAAM;QACbJ,oBAAoB,CAACC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC5C,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHD,oBAAoB,CAAC,CAAC,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACC,UAAU,CAAC,CAAC;EAEhB,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,oBACIjB,KAAA,CAAAqB,aAAA;IACIR,KAAK,EAAE;MAAES,MAAM,EAAE;IAAK,CAAE;IACxBC,SAAS,EAAC;EAAsD,gBAEhEvB,KAAA,CAAAqB,aAAA;IACIG,GAAG,EAAEC,EAAE,IAAI;MACPpB,cAAc,GAAGoB,EAAE;IACvB,CAAE;IACFF,SAAS,EAAC,mDAAmD;IAC7DV,KAAK,EAAE;MAAEa,OAAO,EAAEX;IAAkB;EAAE,gBAEtCf,KAAA,CAAAqB,aAAA;IAAKE,SAAS,EAAC;EAAiC,CAAE,CACjD,CACJ,CAAC;AAEd,CAAC;AACD,eAAeT,WAAW","ignoreList":[]}