@webiny/app-headless-cms 6.6.0-alpha.0 → 6.6.0-alpha.1

package/presentation/contentEntries/preview/PreviewPane.js

@@ -0,0 +1,181 @@
+import react, { useCallback, useEffect, useRef, useState } from "react";
+import { MessageOrigin, Messenger } from "@webiny/cms-sdk/messenger";
+import { jsonPatch } from "@webiny/cms-sdk";
+import { IconButton, Input, OverlayLoader, SegmentedControl } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/refresh.svg";
+import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as laptop_svg_ReactComponent } from "@webiny/icons/laptop.svg";
+import { ReactComponent as smartphone_svg_ReactComponent } from "@webiny/icons/smartphone.svg";
+import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { useLivePreviewPresenter } from "./useLivePreviewPresenter.js";
+import { buildDisplayUrl, buildEditorUrl } from "./resolvePreviewUrl.js";
+const PreviewPane = ({ previewPrefix, previewSlug, entryId, entryData })=>{
+    const iframeRef = useRef(null);
+    const messengerRef = useRef(null);
+    const entryDataRef = useRef(entryData);
+    const lastSentDataRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [iframeKey, setIframeKey] = useState(0);
+    const [viewport, setViewport] = useState("desktop");
+    const presenter = useLivePreviewPresenter();
+    entryDataRef.current = entryData;
+    const displayUrl = buildDisplayUrl(previewPrefix, previewSlug, entryData || {});
+    const [address, setAddress] = useState(displayUrl);
+    useEffect(()=>{
+        setAddress(displayUrl);
+    }, [
+        displayUrl
+    ]);
+    const iframeSrc = (()=>{
+        const editorPath = buildEditorUrl(previewPrefix);
+        const url = new URL(editorPath);
+        url.searchParams.set("wb.editing", "true");
+        url.searchParams.set("wb.type", "entry");
+        url.searchParams.set("wb.id", entryId);
+        url.searchParams.set("wb.path", url.pathname);
+        url.searchParams.set("wb.referrer", window.location.origin);
+        return url.toString();
+    })();
+    const sendEntryData = useCallback(()=>{
+        const data = entryDataRef.current;
+        if (!data || !messengerRef.current) return;
+        const serialized = JSON.parse(JSON.stringify(data));
+        messengerRef.current.send("document.set", serialized);
+        lastSentDataRef.current = serialized;
+    }, []);
+    useEffect(()=>{
+        const iframe = iframeRef.current;
+        if (!iframe || !iframe.contentWindow) return;
+        const targetOrigin = new URL(iframe.src).origin;
+        const editorOrigin = new MessageOrigin(()=>window, window.location.origin);
+        const previewTarget = new MessageOrigin(()=>iframe.contentWindow, targetOrigin);
+        const messenger = new Messenger(editorOrigin, previewTarget, "wb.editor.*");
+        messengerRef.current = messenger;
+        messenger.on("preview.ready", ()=>{
+            setReady(true);
+            setLoading(false);
+            sendEntryData();
+        });
+        messenger.on("preview.component.register", (manifest)=>{
+            presenter.addComponent(manifest);
+        });
+        return ()=>{
+            messenger.dispose();
+            messengerRef.current = null;
+            lastSentDataRef.current = null;
+            setReady(false);
+        };
+    }, [
+        iframeSrc,
+        presenter,
+        iframeKey,
+        sendEntryData
+    ]);
+    useEffect(()=>{
+        if (!ready || !entryData || !messengerRef.current) return;
+        const current = JSON.parse(JSON.stringify(entryData));
+        const previous = lastSentDataRef.current;
+        if (previous) {
+            const patch = jsonPatch.compare(previous, current);
+            if (patch.length > 0) messengerRef.current.send("document.patch", patch);
+        } else messengerRef.current.send("document.set", current);
+        lastSentDataRef.current = current;
+    }, [
+        ready,
+        entryData
+    ]);
+    const reload = useCallback(()=>{
+        setLoading(true);
+        setReady(false);
+        lastSentDataRef.current = null;
+        setIframeKey((prev)=>prev + 1);
+    }, []);
+    const getDraftUrl = useCallback(()=>{
+        const url = new URL(displayUrl);
+        url.searchParams.set("wb.type", "entry");
+        url.searchParams.set("wb.path", url.pathname);
+        url.searchParams.set("wb.preview", "true");
+        url.searchParams.set("wb.id", entryId);
+        return url.toString();
+    }, [
+        displayUrl,
+        entryId
+    ]);
+    const copyUrl = useCallback(()=>{
+        navigator.clipboard.writeText(getDraftUrl());
+    }, [
+        getDraftUrl
+    ]);
+    const openInNewTab = useCallback(()=>{
+        window.open(getDraftUrl(), "_blank");
+    }, [
+        getDraftUrl
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex p-md items-center bg-white border-b border-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        value: address,
+        onChange: setAddress,
+        readOnly: true,
+        size: "md",
+        variant: "secondary",
+        className: "bg-gray-100"
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-xxs ml-sm"
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        onClick: openInNewTab,
+        icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+        variant: "ghost",
+        size: "md"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        onClick: copyUrl,
+        icon: /*#__PURE__*/ react.createElement(content_copy_svg_ReactComponent, null),
+        variant: "ghost",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        onClick: reload,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        variant: "ghost",
+        size: "sm"
+    }), /*#__PURE__*/ react.createElement(SegmentedControl, {
+        value: viewport,
+        onChange: (value)=>setViewport(value),
+        items: [
+            {
+                value: "desktop",
+                label: "",
+                icon: /*#__PURE__*/ react.createElement(laptop_svg_ReactComponent, null)
+            },
+            {
+                value: "mobile",
+                label: "",
+                icon: /*#__PURE__*/ react.createElement(smartphone_svg_ReactComponent, null)
+            }
+        ]
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: "block box-border h-full w-full overflow-auto fill-grid"
+    }, loading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Connecting to Live Preview..."
+    }) : null, /*#__PURE__*/ react.createElement("div", {
+        className: `mx-auto h-full transition-all duration-300 ${"mobile" === viewport ? "p-md" : ""}`,
+        style: {
+            width: "mobile" === viewport ? "375px" : "100%"
+        }
+    }, /*#__PURE__*/ react.createElement("iframe", {
+        key: iframeKey,
+        ref: iframeRef,
+        src: iframeSrc,
+        width: "100%",
+        height: "100%",
+        className: "h-full",
+        sandbox: "allow-same-origin allow-scripts allow-forms"
+    }))));
+};
+export { PreviewPane };
+
+//# sourceMappingURL=PreviewPane.js.map

package/presentation/contentEntries/preview/PreviewPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/PreviewPane.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewPane.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback, useState } from \"react\";\nimport { Messenger, MessageOrigin } from \"@webiny/cms-sdk/messenger\";\nimport { jsonPatch } from \"@webiny/cms-sdk\";\nimport { IconButton, Input, OverlayLoader, SegmentedControl } from \"@webiny/admin-ui\";\nimport { ReactComponent as RefreshIcon } from \"@webiny/icons/refresh.svg\";\nimport { ReactComponent as ContentCopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as LaptopIcon } from \"@webiny/icons/laptop.svg\";\nimport { ReactComponent as SmartphoneIcon } from \"@webiny/icons/smartphone.svg\";\nimport { ReactComponent as OpenInNewIcon } from \"@webiny/icons/open_in_new.svg\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { buildEditorUrl, buildDisplayUrl } from \"./resolvePreviewUrl.js\";\n\ninterface PreviewPaneProps {\n    previewPrefix: string;\n    previewSlug: string;\n    entryId: string;\n    entryData: Record<string, unknown> | null;\n}\n\ntype ViewportMode = \"desktop\" | \"mobile\";\n\nexport const PreviewPane = ({\n    previewPrefix,\n    previewSlug,\n    entryId,\n    entryData\n}: PreviewPaneProps) => {\n    const iframeRef = useRef<HTMLIFrameElement | null>(null);\n    const messengerRef = useRef<Messenger | null>(null);\n    const entryDataRef = useRef(entryData);\n    const lastSentDataRef = useRef<Record<string, unknown> | null>(null);\n    const [ready, setReady] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [iframeKey, setIframeKey] = useState(0);\n    const [viewport, setViewport] = useState<ViewportMode>(\"desktop\");\n    const presenter = useLivePreviewPresenter();\n\n    entryDataRef.current = entryData;\n\n    const displayUrl = buildDisplayUrl(\n        previewPrefix,\n        previewSlug,\n        (entryData as Record<string, unknown>) || {}\n    );\n\n    const [address, setAddress] = useState(displayUrl);\n\n    useEffect(() => {\n        setAddress(displayUrl);\n    }, [displayUrl]);\n\n    const iframeSrc = (() => {\n        const editorPath = buildEditorUrl(previewPrefix);\n        const url = new URL(editorPath);\n        url.searchParams.set(\"wb.editing\", \"true\");\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.id\", entryId);\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.referrer\", window.location.origin);\n        return url.toString();\n    })();\n\n    const sendEntryData = useCallback(() => {\n        const data = entryDataRef.current;\n        if (!data || !messengerRef.current) {\n            return;\n        }\n\n        const serialized = JSON.parse(JSON.stringify(data));\n        messengerRef.current.send(\"document.set\", serialized);\n        lastSentDataRef.current = serialized;\n    }, []);\n\n    useEffect(() => {\n        const iframe = iframeRef.current;\n        if (!iframe || !iframe.contentWindow) {\n            return;\n        }\n\n        const targetOrigin = new URL(iframe.src).origin;\n        const editorOrigin = new MessageOrigin(() => window, window.location.origin);\n        const previewTarget = new MessageOrigin(() => iframe.contentWindow!, targetOrigin);\n\n        const messenger = new Messenger(editorOrigin, previewTarget, \"wb.editor.*\");\n        messengerRef.current = messenger;\n\n        messenger.on(\"preview.ready\", () => {\n            setReady(true);\n            setLoading(false);\n            sendEntryData();\n        });\n\n        messenger.on(\n            \"preview.component.register\",\n            (manifest: { name: string; label: string; description: string }) => {\n                presenter.addComponent(manifest);\n            }\n        );\n\n        return () => {\n            messenger.dispose();\n            messengerRef.current = null;\n            lastSentDataRef.current = null;\n            setReady(false);\n        };\n    }, [iframeSrc, presenter, iframeKey, sendEntryData]);\n\n    useEffect(() => {\n        if (!ready || !entryData || !messengerRef.current) {\n            return;\n        }\n\n        const current = JSON.parse(JSON.stringify(entryData));\n        const previous = lastSentDataRef.current;\n\n        if (previous) {\n            const patch = jsonPatch.compare(previous, current);\n            if (patch.length > 0) {\n                messengerRef.current.send(\"document.patch\", patch);\n            }\n        } else {\n            messengerRef.current.send(\"document.set\", current);\n        }\n\n        lastSentDataRef.current = current;\n    }, [ready, entryData]);\n\n    const reload = useCallback(() => {\n        setLoading(true);\n        setReady(false);\n        lastSentDataRef.current = null;\n        setIframeKey(prev => prev + 1);\n    }, []);\n\n    const getDraftUrl = useCallback(() => {\n        const url = new URL(displayUrl);\n        url.searchParams.set(\"wb.type\", \"entry\");\n        url.searchParams.set(\"wb.path\", url.pathname);\n        url.searchParams.set(\"wb.preview\", \"true\");\n        url.searchParams.set(\"wb.id\", entryId);\n        return url.toString();\n    }, [displayUrl, entryId]);\n\n    const copyUrl = useCallback(() => {\n        navigator.clipboard.writeText(getDraftUrl());\n    }, [getDraftUrl]);\n\n    const openInNewTab = useCallback(() => {\n        window.open(getDraftUrl(), \"_blank\");\n    }, [getDraftUrl]);\n\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden\">\n            <div className=\"flex p-md items-center bg-white border-b border-neutral-dimmed\">\n                <div className=\"w-full\">\n                    <Input\n                        value={address}\n                        onChange={setAddress}\n                        readOnly\n                        size=\"md\"\n                        variant={\"secondary\"}\n                        className=\"bg-gray-100\"\n                    />\n                </div>\n\n                <div className=\"flex items-center gap-xxs ml-sm\">\n                    <IconButton\n                        onClick={openInNewTab}\n                        icon={<OpenInNewIcon />}\n                        variant=\"ghost\"\n                        size=\"md\"\n                    />\n                    <IconButton\n                        onClick={copyUrl}\n                        icon={<ContentCopyIcon />}\n                        variant=\"ghost\"\n                        size=\"sm\"\n                    />\n                    <IconButton onClick={reload} icon={<RefreshIcon />} variant=\"ghost\" size=\"sm\" />\n                    <SegmentedControl\n                        value={viewport}\n                        onChange={(value: string) => setViewport(value as ViewportMode)}\n                        items={[\n                            { value: \"desktop\", label: \"\", icon: <LaptopIcon /> },\n                            { value: \"mobile\", label: \"\", icon: <SmartphoneIcon /> }\n                        ]}\n                    />\n                </div>\n            </div>\n\n            <div className=\"block box-border h-full w-full overflow-auto fill-grid\">\n                {loading ? <OverlayLoader text=\"Connecting to Live Preview...\" /> : null}\n                <div\n                    className={`mx-auto h-full transition-all duration-300 ${viewport === \"mobile\" ? \"p-md\" : \"\"}`}\n                    style={{ width: viewport === \"mobile\" ? \"375px\" : \"100%\" }}\n                >\n                    <iframe\n                        key={iframeKey}\n                        ref={iframeRef}\n                        src={iframeSrc}\n                        width=\"100%\"\n                        height=\"100%\"\n                        className=\"h-full\"\n                        sandbox=\"allow-same-origin allow-scripts allow-forms\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["PreviewPane","previewPrefix","previewSlug","entryId","entryData","iframeRef","useRef","messengerRef","entryDataRef","lastSentDataRef","ready","setReady","useState","loading","setLoading","iframeKey","setIframeKey","viewport","setViewport","presenter","useLivePreviewPresenter","displayUrl","buildDisplayUrl","address","setAddress","useEffect","iframeSrc","editorPath","buildEditorUrl","url","URL","window","sendEntryData","useCallback","data","serialized","JSON","iframe","targetOrigin","editorOrigin","MessageOrigin","previewTarget","messenger","Messenger","manifest","current","previous","patch","jsonPatch","reload","prev","getDraftUrl","copyUrl","navigator","openInNewTab","Input","IconButton","OpenInNewIcon","ContentCopyIcon","RefreshIcon","SegmentedControl","value","LaptopIcon","SmartphoneIcon","OverlayLoader"],"mappings":"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"}

package/presentation/contentEntries/preview/abstractions.d.ts

@@ -0,0 +1,16 @@
+export interface PreviewComponent {
+    name: string;
+    label: string;
+    description: string;
+}
+export interface ILivePreviewPresenter {
+    vm: {
+        components: PreviewComponent[];
+    };
+    addComponent(component: PreviewComponent): void;
+    clearComponents(): void;
+}
+export declare const LivePreviewPresenter: import("@webiny/di").Abstraction<ILivePreviewPresenter>;
+export declare namespace LivePreviewPresenter {
+    type Interface = ILivePreviewPresenter;
+}

package/presentation/contentEntries/preview/abstractions.js

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const LivePreviewPresenter = createAbstraction("CmsContentEntries/LivePreviewPresenter");
+export { LivePreviewPresenter };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/contentEntries/preview/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/abstractions.js","sources":["../../../../src/presentation/contentEntries/preview/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\n\nexport interface PreviewComponent {\n    name: string;\n    label: string;\n    description: string;\n}\n\nexport interface ILivePreviewPresenter {\n    vm: {\n        components: PreviewComponent[];\n    };\n    addComponent(component: PreviewComponent): void;\n    clearComponents(): void;\n}\n\nexport const LivePreviewPresenter = createAbstraction<ILivePreviewPresenter>(\n    \"CmsContentEntries/LivePreviewPresenter\"\n);\n\nexport namespace LivePreviewPresenter {\n    export type Interface = ILivePreviewPresenter;\n}\n"],"names":["LivePreviewPresenter","createAbstraction"],"mappings":";AAgBO,MAAMA,uBAAuBC,kBAChC"}

package/presentation/contentEntries/preview/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const LivePreviewFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").ILivePreviewPresenter;
+}, []>;

package/presentation/contentEntries/preview/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { LivePreviewPresenter } from "./abstractions.js";
+import { LivePreviewPresenter as external_LivePreviewPresenter_js_LivePreviewPresenter } from "./LivePreviewPresenter.js";
+const LivePreviewFeature = createFeature({
+    name: "CmsContentEntries/LivePreview",
+    register (container) {
+        container.register(external_LivePreviewPresenter_js_LivePreviewPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(LivePreviewPresenter)
+        };
+    }
+});
+export { LivePreviewFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/contentEntries/preview/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/feature.js","sources":["../../../../src/presentation/contentEntries/preview/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { LivePreviewPresenter as Abstraction } from \"./abstractions.js\";\nimport { LivePreviewPresenter } from \"./LivePreviewPresenter.js\";\n\nexport const LivePreviewFeature = createFeature({\n    name: \"CmsContentEntries/LivePreview\",\n    register(container) {\n        container.register(LivePreviewPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["LivePreviewFeature","createFeature","container","LivePreviewPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,qBAAqBC,cAAc;IAC5C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,uDAAsB,gBAAgB;IAC7D;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/contentEntries/preview/resolvePreviewUrl.d.ts

@@ -0,0 +1,5 @@
+type EntryData = Record<string, unknown>;
+export declare function resolveSlugPattern(pattern: string, entry: EntryData): string;
+export declare function buildEditorUrl(prefix: string): string;
+export declare function buildDisplayUrl(prefix: string, slugPattern: string, entry: EntryData): string;
+export {};

package/presentation/contentEntries/preview/resolvePreviewUrl.js

@@ -0,0 +1,29 @@
+function getNestedValue(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts){
+        if (null == current || "object" != typeof current) return;
+        current = current[part];
+    }
+    return current;
+}
+function resolveSlugPattern(pattern, entry) {
+    return pattern.replace(/\{([^}]+)\}/g, (_match, path)=>{
+        const value = getNestedValue(entry, path);
+        if (null != value && "" !== value) return String(value);
+        return "";
+    });
+}
+function buildEditorUrl(prefix) {
+    const base = prefix.endsWith("/") ? prefix.slice(0, -1) : prefix;
+    return `${base}/preview`;
+}
+function buildDisplayUrl(prefix, slugPattern, entry) {
+    const base = prefix.endsWith("/") ? prefix.slice(0, -1) : prefix;
+    const slug = resolveSlugPattern(slugPattern, entry);
+    if (!slug) return base;
+    return `${base}/${slug}`;
+}
+export { buildDisplayUrl, buildEditorUrl, resolveSlugPattern };
+
+//# sourceMappingURL=resolvePreviewUrl.js.map

package/presentation/contentEntries/preview/resolvePreviewUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/resolvePreviewUrl.js","sources":["../../../../src/presentation/contentEntries/preview/resolvePreviewUrl.ts"],"sourcesContent":["type EntryData = Record<string, unknown>;\n\nfunction getNestedValue(obj: EntryData, path: string): unknown {\n    const parts = path.split(\".\");\n    let current: unknown = obj;\n    for (const part of parts) {\n        if (current === null || current === undefined || typeof current !== \"object\") {\n            return undefined;\n        }\n        current = (current as Record<string, unknown>)[part];\n    }\n    return current;\n}\n\nexport function resolveSlugPattern(pattern: string, entry: EntryData): string {\n    return pattern.replace(/\\{([^}]+)\\}/g, (_match, path: string) => {\n        const value = getNestedValue(entry, path);\n        if (value !== null && value !== undefined && value !== \"\") {\n            return String(value);\n        }\n        return \"\";\n    });\n}\n\nexport function buildEditorUrl(prefix: string): string {\n    const base = prefix.endsWith(\"/\") ? prefix.slice(0, -1) : prefix;\n    return `${base}/preview`;\n}\n\nexport function buildDisplayUrl(prefix: string, slugPattern: string, entry: EntryData): string {\n    const base = prefix.endsWith(\"/\") ? prefix.slice(0, -1) : prefix;\n    const slug = resolveSlugPattern(slugPattern, entry);\n    if (!slug) {\n        return base;\n    }\n    return `${base}/${slug}`;\n}\n"],"names":["getNestedValue","obj","path","parts","current","part","resolveSlugPattern","pattern","entry","_match","value","String","buildEditorUrl","prefix","base","buildDisplayUrl","slugPattern","slug"],"mappings":"AAEA,SAASA,eAAeC,GAAc,EAAEC,IAAY;IAChD,MAAMC,QAAQD,KAAK,KAAK,CAAC;IACzB,IAAIE,UAAmBH;IACvB,KAAK,MAAMI,QAAQF,MAAO;QACtB,IAAIC,QAAAA,WAA6C,AAAmB,YAAnB,OAAOA,SACpD;QAEJA,UAAWA,OAAmC,CAACC,KAAK;IACxD;IACA,OAAOD;AACX;AAEO,SAASE,mBAAmBC,OAAe,EAAEC,KAAgB;IAChE,OAAOD,QAAQ,OAAO,CAAC,gBAAgB,CAACE,QAAQP;QAC5C,MAAMQ,QAAQV,eAAeQ,OAAON;QACpC,IAAIQ,QAAAA,SAAyCA,AAAU,OAAVA,OACzC,OAAOC,OAAOD;QAElB,OAAO;IACX;AACJ;AAEO,SAASE,eAAeC,MAAc;IACzC,MAAMC,OAAOD,OAAO,QAAQ,CAAC,OAAOA,OAAO,KAAK,CAAC,GAAG,MAAMA;IAC1D,OAAO,GAAGC,KAAK,QAAQ,CAAC;AAC5B;AAEO,SAASC,gBAAgBF,MAAc,EAAEG,WAAmB,EAAER,KAAgB;IACjF,MAAMM,OAAOD,OAAO,QAAQ,CAAC,OAAOA,OAAO,KAAK,CAAC,GAAG,MAAMA;IAC1D,MAAMI,OAAOX,mBAAmBU,aAAaR;IAC7C,IAAI,CAACS,MACD,OAAOH;IAEX,OAAO,GAAGA,KAAK,CAAC,EAAEG,MAAM;AAC5B"}

package/presentation/contentEntries/preview/useLivePreviewPresenter.d.ts

@@ -0,0 +1 @@
+export declare function useLivePreviewPresenter(): import("./abstractions.js").ILivePreviewPresenter;

package/presentation/contentEntries/preview/useLivePreviewPresenter.js

@@ -0,0 +1,8 @@
+import { useFeature } from "@webiny/app";
+import { LivePreviewFeature } from "./feature.js";
+function useLivePreviewPresenter() {
+    return useFeature(LivePreviewFeature).presenter;
+}
+export { useLivePreviewPresenter };
+
+//# sourceMappingURL=useLivePreviewPresenter.js.map

package/presentation/contentEntries/preview/useLivePreviewPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/useLivePreviewPresenter.js","sources":["../../../../src/presentation/contentEntries/preview/useLivePreviewPresenter.ts"],"sourcesContent":["import { useFeature } from \"@webiny/app\";\nimport { LivePreviewFeature } from \"./feature.js\";\n\nexport function useLivePreviewPresenter() {\n    return useFeature(LivePreviewFeature).presenter;\n}\n"],"names":["useLivePreviewPresenter","useFeature","LivePreviewFeature"],"mappings":";;AAGO,SAASA;IACZ,OAAOC,WAAWC,oBAAoB,SAAS;AACnD"}

package/presentation/contentEntries/trashBin/CmsTrashBin.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const CmsTrashBin: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const CmsTrashBin: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/contentEntries/views/CmsAdvancedSearch.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const CmsAdvancedSearch: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const CmsAdvancedSearch: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/contentEntries/views/ContentEntriesBreadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * Emits the content-entries trail (`<root> › <Model> › <folder path>`) through the React
+ * Config API. Model and folder path come from the scoped presenter, so this is a plain
+ * observer that renders `<Breadcrumb>` entries; the header marks the last as current.
+ *
+ * The leading root defaults to "Headless CMS" but can be overridden per app via the entries
+ * list config (`Browser.BreadcrumbRoot`) — e.g. Tenant Manager, which reuses this view for the
+ * tenant model, shows "Tenant Manager" instead.
+ */
+export declare const ContentEntriesBreadcrumbs: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/presentation/contentEntries/views/ContentEntriesBreadcrumbs.js

@@ -0,0 +1,54 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Breadcrumb } from "@webiny/app-admin";
+import { useContentEntriesPresenter } from "../list/useContentEntriesPresenter.js";
+import { useContentEntryListConfig } from "../../../admin/config/contentEntries/list/ContentEntryListConfig.js";
+import { Routes } from "../../../routes.js";
+const ContentEntriesBreadcrumbs_ContentEntriesBreadcrumbs = observer(function() {
+    const presenter = useContentEntriesPresenter();
+    const { browser } = useContentEntryListConfig();
+    const model = presenter.vm.model;
+    const foldersPresenter = presenter.folders;
+    const folders = foldersPresenter.vm;
+    const root = browser.breadcrumbRoot ?? {
+        label: "Headless CMS",
+        to: {
+            route: Routes.ContentModels.List
+        }
+    };
+    const ancestorIds = folders.currentFolderId ? [
+        ...foldersPresenter.getAncestorIds(folders.currentFolderId)
+    ].reverse() : [];
+    const titleById = new Map(folders.folders.map((folder)=>[
+            folder.id,
+            folder.title
+        ]));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Breadcrumb, {
+        name: "cms",
+        label: root.label,
+        to: root.to
+    }), /*#__PURE__*/ react.createElement(Breadcrumb, {
+        name: "cms.model",
+        label: model.name,
+        to: {
+            route: Routes.ContentEntries.List,
+            params: {
+                modelId: model.modelId
+            }
+        }
+    }), ancestorIds.map((id)=>/*#__PURE__*/ react.createElement(Breadcrumb, {
+            key: id,
+            name: id,
+            label: titleById.get(id) ?? "…",
+            to: {
+                route: Routes.ContentEntries.List,
+                params: {
+                    modelId: model.modelId,
+                    folderId: id
+                }
+            }
+        })));
+});
+export { ContentEntriesBreadcrumbs_ContentEntriesBreadcrumbs as ContentEntriesBreadcrumbs };
+
+//# sourceMappingURL=ContentEntriesBreadcrumbs.js.map

package/presentation/contentEntries/views/ContentEntriesBreadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/views/ContentEntriesBreadcrumbs.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntriesBreadcrumbs.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Breadcrumb } from \"@webiny/app-admin\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { useContentEntryListConfig } from \"~/admin/config/contentEntries/list/ContentEntryListConfig.js\";\nimport { Routes } from \"~/routes.js\";\n\n/**\n * Emits the content-entries trail (`<root> › <Model> › <folder path>`) through the React\n * Config API. Model and folder path come from the scoped presenter, so this is a plain\n * observer that renders `<Breadcrumb>` entries; the header marks the last as current.\n *\n * The leading root defaults to \"Headless CMS\" but can be overridden per app via the entries\n * list config (`Browser.BreadcrumbRoot`) — e.g. Tenant Manager, which reuses this view for the\n * tenant model, shows \"Tenant Manager\" instead.\n */\nexport const ContentEntriesBreadcrumbs = observer(function ContentEntriesBreadcrumbs() {\n    const presenter = useContentEntriesPresenter();\n    const { browser } = useContentEntryListConfig();\n    const model = presenter.vm.model;\n    const foldersPresenter = presenter.folders;\n    const folders = foldersPresenter.vm;\n\n    const root = browser.breadcrumbRoot ?? {\n        label: \"Headless CMS\",\n        to: { route: Routes.ContentModels.List }\n    };\n\n    // `getAncestorIds` walks self → root; reverse it to render root → current.\n    const ancestorIds = folders.currentFolderId\n        ? [...foldersPresenter.getAncestorIds(folders.currentFolderId)].reverse()\n        : [];\n    const titleById = new Map(folders.folders.map(folder => [folder.id, folder.title]));\n\n    return (\n        <>\n            <Breadcrumb name={\"cms\"} label={root.label} to={root.to} />\n            <Breadcrumb\n                name={\"cms.model\"}\n                label={model.name}\n                to={{ route: Routes.ContentEntries.List, params: { modelId: model.modelId } }}\n            />\n            {ancestorIds.map(id => (\n                <Breadcrumb\n                    key={id}\n                    name={id}\n                    label={titleById.get(id) ?? \"…\"}\n                    to={{\n                        route: Routes.ContentEntries.List,\n                        params: { modelId: model.modelId, folderId: id }\n                    }}\n                />\n            ))}\n        </>\n    );\n});\n"],"names":["ContentEntriesBreadcrumbs","observer","presenter","useContentEntriesPresenter","browser","useContentEntryListConfig","model","foldersPresenter","folders","root","Routes","ancestorIds","titleById","Map","folder","Breadcrumb","id"],"mappings":";;;;;;AAgBO,MAAMA,sDAA4BC,SAAS;IAC9C,MAAMC,YAAYC;IAClB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAMC,QAAQJ,UAAU,EAAE,CAAC,KAAK;IAChC,MAAMK,mBAAmBL,UAAU,OAAO;IAC1C,MAAMM,UAAUD,iBAAiB,EAAE;IAEnC,MAAME,OAAOL,QAAQ,cAAc,IAAI;QACnC,OAAO;QACP,IAAI;YAAE,OAAOM,OAAO,aAAa,CAAC,IAAI;QAAC;IAC3C;IAGA,MAAMC,cAAcH,QAAQ,eAAe,GACrC;WAAID,iBAAiB,cAAc,CAACC,QAAQ,eAAe;KAAE,CAAC,OAAO,KACrE,EAAE;IACR,MAAMI,YAAY,IAAIC,IAAIL,QAAQ,OAAO,CAAC,GAAG,CAACM,CAAAA,SAAU;YAACA,OAAO,EAAE;YAAEA,OAAO,KAAK;SAAC;IAEjF,OAAO,WAAP,GACI,wDACI,oBAACC,YAAUA;QAAC,MAAM;QAAO,OAAON,KAAK,KAAK;QAAE,IAAIA,KAAK,EAAE;sBACvD,oBAACM,YAAUA;QACP,MAAM;QACN,OAAOT,MAAM,IAAI;QACjB,IAAI;YAAE,OAAOI,OAAO,cAAc,CAAC,IAAI;YAAE,QAAQ;gBAAE,SAASJ,MAAM,OAAO;YAAC;QAAE;QAE/EK,YAAY,GAAG,CAACK,CAAAA,KAAAA,WAAAA,GACb,oBAACD,YAAUA;YACP,KAAKC;YACL,MAAMA;YACN,OAAOJ,UAAU,GAAG,CAACI,OAAO;YAC5B,IAAI;gBACA,OAAON,OAAO,cAAc,CAAC,IAAI;gBACjC,QAAQ;oBAAE,SAASJ,MAAM,OAAO;oBAAE,UAAUU;gBAAG;YACnD;;AAKpB"}

package/presentation/contentEntries/views/ContentEntriesListLayout.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ContentEntriesListLayout: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const ContentEntriesListLayout: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/contentEntries/views/ContentEntriesListLayout.js

@@ -8,14 +8,14 @@ import { ReactComponent as folder_svg_ReactComponent } from "@webiny/icons/folde
 import { FolderTree } from "@webiny/app-aco/presentation/folderTree/FolderTree.js";
 import { useContentEntryListConfig } from "../../../admin/config/contentEntries/list/ContentEntryListConfig.js";
 import { useContentEntriesPresenter } from "../list/useContentEntriesPresenter.js";
+import { ContentEntriesBreadcrumbs } from "./ContentEntriesBreadcrumbs.js";
 import { ContentEntryFormView } from "./ContentEntryFormView.js";
 import { Table } from "./Table/Table.js";
 import { CmsAdvancedSearch } from "./CmsAdvancedSearch.js";
 import { SidebarFooter } from "./SidebarFooter.js";
 const ContentEntriesListLayout = observer(()=>{
     const presenter = useContentEntriesPresenter();
-    if (presenter.vm.showingEntry) return /*#__PURE__*/ react.createElement(ContentEntryFormView, null);
-    return /*#__PURE__*/ react.createElement(DocumentList, null);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ContentEntriesBreadcrumbs, null), presenter.vm.showingEntry ? /*#__PURE__*/ react.createElement(ContentEntryFormView, null) : /*#__PURE__*/ react.createElement(DocumentList, null));
 });
 const DocumentList = observer(()=>{
     const presenter = useContentEntriesPresenter();
@@ -76,6 +76,7 @@ const DocumentList = observer(()=>{
         }),
         bulkActions: /*#__PURE__*/ react.createElement(ListView.BulkActions, {
             itemLabel: "entry",
+            itemLabelPlural: "entries",
             actions: browser.bulkActions
         }),
         filters: /*#__PURE__*/ react.createElement(ListView.Filters, {

package/presentation/contentEntries/views/ContentEntriesListLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/views/ContentEntriesListLayout.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntriesListLayout.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useCreateDialog } from \"@webiny/app-aco\";\nimport { ListView, EmptyView } from \"@webiny/app-admin\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { FolderTree } from \"@webiny/app-aco/presentation/folderTree/FolderTree.js\";\nimport { useContentEntryListConfig } from \"~/admin/config/contentEntries/list/ContentEntryListConfig.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { ContentEntryFormView } from \"./ContentEntryFormView.js\";\nimport { Table } from \"./Table/Table.js\";\nimport { CmsAdvancedSearch } from \"./CmsAdvancedSearch.js\";\nimport { SidebarFooter } from \"./SidebarFooter.js\";\n\nexport const ContentEntriesListLayout = observer(() => {\n    const presenter = useContentEntriesPresenter();\n\n    if (presenter.vm.showingEntry) {\n        return <ContentEntryFormView />;\n    }\n\n    return <DocumentList />;\n});\n\nconst DocumentList = observer(() => {\n    const presenter = useContentEntriesPresenter();\n    const { browser } = useContentEntryListConfig();\n    const { showDialog: showCreateFolderDialog } = useCreateDialog();\n\n    const folderId = presenter.folders.vm.currentFolderId ?? \"root\";\n    const isRoot = folderId === \"root\";\n    const hasFolders = presenter.vm.showFolders && presenter.vm.childFolders.length > 0;\n\n    const onCreateFolder = useCallback(() => {\n        showCreateFolderDialog({ currentParentId: folderId });\n    }, [folderId]);\n\n    const onCreateEntry = useCallback(() => {\n        presenter.createEntry();\n    }, [presenter]);\n\n    return (\n        <ListView\n            list={presenter.list.vm}\n            actions={presenter.list.actions}\n            namespace={`cms/${presenter.vm.model.modelId}/list`}\n            showingFilters={presenter.list.vm.showingFilters}\n            onToggleFilters={() => {\n                presenter.list.vm.showingFilters\n                    ? presenter.list.actions.filter.hide()\n                    : presenter.list.actions.filter.show();\n            }}\n            sidebar={\n                <ListView.Sidebar title={presenter.vm.model.name}>\n                    <ListView.Sidebar.Section grow>\n                        <FolderTree\n                            vm={presenter.folders.vm}\n                            actions={presenter.folders}\n                            folderActions={browser.folder.actions}\n                            enableActions={true}\n                            enableCreate={true}\n                        />\n                    </ListView.Sidebar.Section>\n                    <ListView.Sidebar.Section scrollable={false}>\n                        <SidebarFooter />\n                    </ListView.Sidebar.Section>\n                </ListView.Sidebar>\n            }\n            header={\n                <ListView.Header\n                    title={{\n                        icon: isRoot ? <HomeIcon /> : <FolderIcon />,\n                        text: isRoot ? \"Home\" : presenter.folders.vm.currentFolderTitle\n                    }}\n                    search\n                    filtersToggle\n                    actions={\n                        <>\n                            <Button\n                                variant={\"secondary\"}\n                                onClick={onCreateFolder}\n                                text={\"New Folder\"}\n                            />\n                            <Button\n                                variant={\"primary\"}\n                                onClick={onCreateEntry}\n                                text={\"New Entry\"}\n                            />\n                        </>\n                    }\n                />\n            }\n            bulkActions={<ListView.BulkActions itemLabel=\"entry\" actions={browser.bulkActions} />}\n            filters={\n                <ListView.Filters filters={browser.filters} filtersToWhere={browser.filtersToWhere}>\n                    <CmsAdvancedSearch />\n                </ListView.Filters>\n            }\n            content={\n                <ListView.Content\n                    empty={\n                        hasFolders ? undefined : (\n                            <EmptyView\n                                title={\"No entries yet. Create your first entry.\"}\n                                action={\n                                    <>\n                                        <Button\n                                            variant={\"secondary\"}\n                                            onClick={onCreateFolder}\n                                            text={\"New Folder\"}\n                                        />\n                                        <Button\n                                            variant={\"primary\"}\n                                            onClick={onCreateEntry}\n                                            text={\"New Entry\"}\n                                        />\n                                    </>\n                                }\n                            />\n                        )\n                    }\n                    searchEmpty={<EmptyView title={\"No results found.\"} action={null} />}\n                >\n                    <Table />\n                </ListView.Content>\n            }\n            bottomBar={\n                <ListView.BottomBar\n                    meta={{ itemLabel: { singular: \"entry\", plural: \"entries\" } }}\n                    status\n                />\n            }\n        />\n    );\n});\n"],"names":["ContentEntriesListLayout","observer","presenter","useContentEntriesPresenter","ContentEntryFormView","DocumentList","browser","useContentEntryListConfig","showCreateFolderDialog","useCreateDialog","folderId","isRoot","hasFolders","onCreateFolder","useCallback","onCreateEntry","ListView","FolderTree","SidebarFooter","HomeIcon","FolderIcon","Button","CmsAdvancedSearch","undefined","EmptyView","Table"],"mappings":"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"}
+{"version":3,"file":"presentation/contentEntries/views/ContentEntriesListLayout.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntriesListLayout.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useCreateDialog } from \"@webiny/app-aco\";\nimport { ListView, EmptyView } from \"@webiny/app-admin\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { FolderTree } from \"@webiny/app-aco/presentation/folderTree/FolderTree.js\";\nimport { useContentEntryListConfig } from \"~/admin/config/contentEntries/list/ContentEntryListConfig.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { ContentEntriesBreadcrumbs } from \"./ContentEntriesBreadcrumbs.js\";\nimport { ContentEntryFormView } from \"./ContentEntryFormView.js\";\nimport { Table } from \"./Table/Table.js\";\nimport { CmsAdvancedSearch } from \"./CmsAdvancedSearch.js\";\nimport { SidebarFooter } from \"./SidebarFooter.js\";\n\nexport const ContentEntriesListLayout = observer(() => {\n    const presenter = useContentEntriesPresenter();\n\n    return (\n        <>\n            <ContentEntriesBreadcrumbs />\n            {presenter.vm.showingEntry ? <ContentEntryFormView /> : <DocumentList />}\n        </>\n    );\n});\n\nconst DocumentList = observer(() => {\n    const presenter = useContentEntriesPresenter();\n    const { browser } = useContentEntryListConfig();\n    const { showDialog: showCreateFolderDialog } = useCreateDialog();\n\n    const folderId = presenter.folders.vm.currentFolderId ?? \"root\";\n    const isRoot = folderId === \"root\";\n    const hasFolders = presenter.vm.showFolders && presenter.vm.childFolders.length > 0;\n\n    const onCreateFolder = useCallback(() => {\n        showCreateFolderDialog({ currentParentId: folderId });\n    }, [folderId]);\n\n    const onCreateEntry = useCallback(() => {\n        presenter.createEntry();\n    }, [presenter]);\n\n    return (\n        <ListView\n            list={presenter.list.vm}\n            actions={presenter.list.actions}\n            namespace={`cms/${presenter.vm.model.modelId}/list`}\n            showingFilters={presenter.list.vm.showingFilters}\n            onToggleFilters={() => {\n                presenter.list.vm.showingFilters\n                    ? presenter.list.actions.filter.hide()\n                    : presenter.list.actions.filter.show();\n            }}\n            sidebar={\n                <ListView.Sidebar title={presenter.vm.model.name}>\n                    <ListView.Sidebar.Section grow>\n                        <FolderTree\n                            vm={presenter.folders.vm}\n                            actions={presenter.folders}\n                            folderActions={browser.folder.actions}\n                            enableActions={true}\n                            enableCreate={true}\n                        />\n                    </ListView.Sidebar.Section>\n                    <ListView.Sidebar.Section scrollable={false}>\n                        <SidebarFooter />\n                    </ListView.Sidebar.Section>\n                </ListView.Sidebar>\n            }\n            header={\n                <ListView.Header\n                    title={{\n                        icon: isRoot ? <HomeIcon /> : <FolderIcon />,\n                        text: isRoot ? \"Home\" : presenter.folders.vm.currentFolderTitle\n                    }}\n                    search\n                    filtersToggle\n                    actions={\n                        <>\n                            <Button\n                                variant={\"secondary\"}\n                                onClick={onCreateFolder}\n                                text={\"New Folder\"}\n                            />\n                            <Button\n                                variant={\"primary\"}\n                                onClick={onCreateEntry}\n                                text={\"New Entry\"}\n                            />\n                        </>\n                    }\n                />\n            }\n            bulkActions={\n                <ListView.BulkActions\n                    itemLabel=\"entry\"\n                    itemLabelPlural=\"entries\"\n                    actions={browser.bulkActions}\n                />\n            }\n            filters={\n                <ListView.Filters filters={browser.filters} filtersToWhere={browser.filtersToWhere}>\n                    <CmsAdvancedSearch />\n                </ListView.Filters>\n            }\n            content={\n                <ListView.Content\n                    empty={\n                        hasFolders ? undefined : (\n                            <EmptyView\n                                title={\"No entries yet. Create your first entry.\"}\n                                action={\n                                    <>\n                                        <Button\n                                            variant={\"secondary\"}\n                                            onClick={onCreateFolder}\n                                            text={\"New Folder\"}\n                                        />\n                                        <Button\n                                            variant={\"primary\"}\n                                            onClick={onCreateEntry}\n                                            text={\"New Entry\"}\n                                        />\n                                    </>\n                                }\n                            />\n                        )\n                    }\n                    searchEmpty={<EmptyView title={\"No results found.\"} action={null} />}\n                >\n                    <Table />\n                </ListView.Content>\n            }\n            bottomBar={\n                <ListView.BottomBar\n                    meta={{ itemLabel: { singular: \"entry\", plural: \"entries\" } }}\n                    status\n                />\n            }\n        />\n    );\n});\n"],"names":["ContentEntriesListLayout","observer","presenter","useContentEntriesPresenter","ContentEntriesBreadcrumbs","ContentEntryFormView","DocumentList","browser","useContentEntryListConfig","showCreateFolderDialog","useCreateDialog","folderId","isRoot","hasFolders","onCreateFolder","useCallback","onCreateEntry","ListView","FolderTree","SidebarFooter","HomeIcon","FolderIcon","Button","CmsAdvancedSearch","undefined","EmptyView","Table"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAMA,2BAA2BC,SAAS;IAC7C,MAAMC,YAAYC;IAElB,OAAO,WAAP,GACI,wDACI,oBAACC,2BAAyBA,OACzBF,UAAU,EAAE,CAAC,YAAY,GAAG,WAAH,GAAG,oBAACG,sBAAoBA,QAAAA,WAAAA,GAAM,oBAACC,cAAYA;AAGjF;AAEA,MAAMA,eAAeL,SAAS;IAC1B,MAAMC,YAAYC;IAClB,MAAM,EAAEI,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAE,YAAYC,sBAAsB,EAAE,GAAGC;IAE/C,MAAMC,WAAWT,UAAU,OAAO,CAAC,EAAE,CAAC,eAAe,IAAI;IACzD,MAAMU,SAASD,AAAa,WAAbA;IACf,MAAME,aAAaX,UAAU,EAAE,CAAC,WAAW,IAAIA,UAAU,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG;IAElF,MAAMY,iBAAiBC,YAAY;QAC/BN,uBAAuB;YAAE,iBAAiBE;QAAS;IACvD,GAAG;QAACA;KAAS;IAEb,MAAMK,gBAAgBD,YAAY;QAC9Bb,UAAU,WAAW;IACzB,GAAG;QAACA;KAAU;IAEd,OAAO,WAAP,GACI,oBAACe,UAAQA;QACL,MAAMf,UAAU,IAAI,CAAC,EAAE;QACvB,SAASA,UAAU,IAAI,CAAC,OAAO;QAC/B,WAAW,CAAC,IAAI,EAAEA,UAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACnD,gBAAgBA,UAAU,IAAI,CAAC,EAAE,CAAC,cAAc;QAChD,iBAAiB;YACbA,UAAU,IAAI,CAAC,EAAE,CAAC,cAAc,GAC1BA,UAAU,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,KAClCA,UAAU,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI;QAC5C;QACA,uBACI,oBAACe,SAAS,OAAO;YAAC,OAAOf,UAAU,EAAE,CAAC,KAAK,CAAC,IAAI;yBAC5C,oBAACe,SAAS,OAAO,CAAC,OAAO;YAAC;yBACtB,oBAACC,YAAUA;YACP,IAAIhB,UAAU,OAAO,CAAC,EAAE;YACxB,SAASA,UAAU,OAAO;YAC1B,eAAeK,QAAQ,MAAM,CAAC,OAAO;YACrC,eAAe;YACf,cAAc;2BAGtB,oBAACU,SAAS,OAAO,CAAC,OAAO;YAAC,YAAY;yBAClC,oBAACE,eAAaA;QAI1B,sBACI,oBAACF,SAAS,MAAM;YACZ,OAAO;gBACH,MAAML,SAAS,WAATA,GAAS,oBAACQ,gBAAQA,QAAAA,WAAAA,GAAM,oBAACC,2BAAUA;gBACzC,MAAMT,SAAS,SAASV,UAAU,OAAO,CAAC,EAAE,CAAC,kBAAkB;YACnE;YACA;YACA;YACA,uBACI,wDACI,oBAACoB,QAAMA;gBACH,SAAS;gBACT,SAASR;gBACT,MAAM;8BAEV,oBAACQ,QAAMA;gBACH,SAAS;gBACT,SAASN;gBACT,MAAM;;;QAM1B,2BACI,oBAACC,SAAS,WAAW;YACjB,WAAU;YACV,iBAAgB;YAChB,SAASV,QAAQ,WAAW;;QAGpC,uBACI,oBAACU,SAAS,OAAO;YAAC,SAASV,QAAQ,OAAO;YAAE,gBAAgBA,QAAQ,cAAc;yBAC9E,oBAACgB,mBAAiBA;QAG1B,uBACI,oBAACN,SAAS,OAAO;YACb,OACIJ,aAAaW,SAAY,WAAZA,GACT,oBAACC,WAASA;gBACN,OAAO;gBACP,sBACI,wDACI,oBAACH,QAAMA;oBACH,SAAS;oBACT,SAASR;oBACT,MAAM;kCAEV,oBAACQ,QAAMA;oBACH,SAAS;oBACT,SAASN;oBACT,MAAM;;;YAO9B,2BAAa,oBAACS,WAASA;gBAAC,OAAO;gBAAqB,QAAQ;;yBAE5D,oBAACC,OAAKA;QAGd,yBACI,oBAACT,SAAS,SAAS;YACf,MAAM;gBAAE,WAAW;oBAAE,UAAU;oBAAS,QAAQ;gBAAU;YAAE;YAC5D;;;AAKpB"}

package/presentation/contentEntries/views/ContentEntryFormView.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const ContentEntryFormView: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const ContentEntryFormView: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/contentEntries/views/ContentEntryFormView.js

@@ -17,7 +17,7 @@ const ContentEntryFormView = observer(()=>{
     const listPresenter = useContentEntriesPresenter();
     const formPresenter = useContentEntryFormPresenter();
     const { presenter: revisionsPresenter } = useFeature(RevisionsListFeature);
-    const { width, newEntryWizard } = useContentEntryEditorConfig();
+    const { newEntryWizard, width } = useContentEntryEditorConfig();
     const router = useRouter();
     const dialogs = useDialogs();
     const { route } = useRoute(Routes.ContentEntries.List);
@@ -75,11 +75,10 @@ const ContentEntryFormView = observer(()=>{
         end: /*#__PURE__*/ react.createElement(EntryFormHeaderRight, null)
     }), /*#__PURE__*/ react.createElement(ScrollArea, null, vm.loading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
         text: vm.loading
-    }) : null, showWizard ? newEntryWizard : /*#__PURE__*/ react.createElement(ContentEntryFormContent, null, /*#__PURE__*/ react.createElement("div", {
-        className: "bg-neutral-base rounded-lg p-lg",
-        style: {
-            width
-        }
+    }) : null, showWizard ? newEntryWizard : /*#__PURE__*/ react.createElement(ContentEntryFormContent, {
+        width: width
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "bg-neutral-base rounded-lg p-lg"
     }, /*#__PURE__*/ react.createElement(ContentEntryForm, null)))), /*#__PURE__*/ react.createElement(RevisionDrawer, null));
 });
 const EntryFormHeaderLeft = ({ onBack, title, isNewEntry, modelName, status })=>/*#__PURE__*/ react.createElement("div", {

package/presentation/contentEntries/views/ContentEntryFormView.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/views/ContentEntryFormView.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntryFormView.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature, useRouter } from \"@webiny/app\";\nimport { Buttons, useDialogs, useRoute } from \"@webiny/app-admin\";\nimport { HeaderBar, Heading, Icon, IconButton, OverlayLoader, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { useContentEntryEditorConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport {\n    Container,\n    ScrollArea,\n    ContentEntryFormContent,\n    ContentEntryForm\n} from \"./layout/index.js\";\nimport { RevisionsListFeature } from \"../revisionsList/feature.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { RevisionDrawer } from \"./RevisionDrawer.js\";\n\nexport const ContentEntryFormView = observer(() => {\n    const listPresenter = useContentEntriesPresenter();\n    const formPresenter = useContentEntryFormPresenter();\n    const { presenter: revisionsPresenter } = useFeature(RevisionsListFeature);\n    const { width, newEntryWizard } = useContentEntryEditorConfig();\n    const router = useRouter();\n    const dialogs = useDialogs();\n    const { route } = useRoute(Routes.ContentEntries.List);\n\n    const entryId = listPresenter.vm.selectedEntryId;\n    const { vm } = formPresenter;\n\n    const hasWizard = entryId === \"new\" && newEntryWizard !== null;\n    const showWizard = hasWizard && vm.form === null;\n\n    useEffect(() => {\n        if (entryId === \"new\") {\n            if (!newEntryWizard) {\n                formPresenter.newEntry();\n            }\n        } else if (entryId) {\n            formPresenter.loadRevision(entryId);\n            revisionsPresenter.init(entryId);\n        }\n\n        return () => {\n            formPresenter.reset();\n            revisionsPresenter.dispose();\n        };\n    }, [entryId]);\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => formPresenter.vm.isDirty,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content:\n                        \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\",\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => {\n                        // We must reset the form to prevent the guard from kicking in again.\n                        formPresenter.reset();\n                        router.confirmTransition();\n                    },\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const handleBack = () => {\n        const { modelId, folderId } = route.params;\n        router.goToRoute(Routes.ContentEntries.List, { modelId, folderId });\n    };\n\n    return (\n        <Container>\n            <Helmet title={vm.entry?.meta?.title || listPresenter.vm.model.name} />\n            <HeaderBar\n                start={\n                    <EntryFormHeaderLeft\n                        onBack={handleBack}\n                        title={vm.entry?.meta?.title || `New ${listPresenter.vm.model.name}`}\n                        isNewEntry={vm.isNewEntry}\n                        modelName={listPresenter.vm.model.name}\n                        status={vm.entry?.meta?.status ?? null}\n                    />\n                }\n                end={<EntryFormHeaderRight />}\n            />\n            <ScrollArea>\n                {vm.loading ? <OverlayLoader text={vm.loading} /> : null}\n                {showWizard ? (\n                    newEntryWizard\n                ) : (\n                    <ContentEntryFormContent>\n                        <div className={\"bg-neutral-base rounded-lg p-lg\"} style={{ width }}>\n                            <ContentEntryForm />\n                        </div>\n                    </ContentEntryFormContent>\n                )}\n            </ScrollArea>\n            <RevisionDrawer />\n        </Container>\n    );\n});\n\ninterface EntryFormHeaderLeftProps {\n    onBack: () => void;\n    title: string;\n    isNewEntry: boolean;\n    modelName: string;\n    status: string | null;\n}\n\nconst EntryFormHeaderLeft = ({\n    onBack,\n    title,\n    isNewEntry,\n    modelName,\n    status\n}: EntryFormHeaderLeftProps) => {\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <IconButton variant={\"ghost\"} onClick={onBack} icon={<BackIcon />} />\n            <Heading level={5} className={`text-neutral-primary${isNewEntry ? \" opacity-50\" : \"\"}`}>\n                {title}\n            </Heading>\n            <Tooltip\n                content={`Model: ${modelName}${status ? ` - Status: ${status}` : \"\"}`}\n                trigger={\n                    <Icon icon={<InfoIcon />} label={\"Info\"} size={\"sm\"} color={\"neutral-light\"} />\n                }\n            />\n        </div>\n    );\n};\n\nconst EntryFormHeaderRight = observer(() => {\n    const presenter = useContentEntryFormPresenter();\n    const { buttonActions } = useContentEntryEditorConfig();\n\n    const { canSave, canPublish, canUnpublish, canDelete } = presenter.vm;\n\n    if (!canSave && !canPublish && !canUnpublish && !canDelete) {\n        return <div />;\n    }\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <Buttons actions={buttonActions} />\n        </div>\n    );\n});\n"],"names":["ContentEntryFormView","observer","listPresenter","useContentEntriesPresenter","formPresenter","useContentEntryFormPresenter","revisionsPresenter","useFeature","RevisionsListFeature","width","newEntryWizard","useContentEntryEditorConfig","router","useRouter","dialogs","useDialogs","route","useRoute","Routes","entryId","vm","hasWizard","showWizard","useEffect","handleBack","modelId","folderId","Container","Helmet","HeaderBar","EntryFormHeaderLeft","EntryFormHeaderRight","ScrollArea","OverlayLoader","ContentEntryFormContent","ContentEntryForm","RevisionDrawer","onBack","title","isNewEntry","modelName","status","IconButton","BackIcon","Heading","Tooltip","Icon","InfoIcon","presenter","buttonActions","canSave","canPublish","canUnpublish","canDelete","Buttons"],"mappings":"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"}
+{"version":3,"file":"presentation/contentEntries/views/ContentEntryFormView.js","sources":["../../../../src/presentation/contentEntries/views/ContentEntryFormView.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Helmet } from \"react-helmet\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature, useRouter } from \"@webiny/app\";\nimport { Buttons, useDialogs, useRoute } from \"@webiny/app-admin\";\nimport { HeaderBar, Heading, Icon, IconButton, OverlayLoader, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { useContentEntryEditorConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport {\n    Container,\n    ScrollArea,\n    ContentEntryFormContent,\n    ContentEntryForm\n} from \"./layout/index.js\";\nimport { RevisionsListFeature } from \"../revisionsList/feature.js\";\nimport { useContentEntriesPresenter } from \"~/presentation/contentEntries/list/useContentEntriesPresenter.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { RevisionDrawer } from \"./RevisionDrawer.js\";\n\nexport const ContentEntryFormView = observer(() => {\n    const listPresenter = useContentEntriesPresenter();\n    const formPresenter = useContentEntryFormPresenter();\n    const { presenter: revisionsPresenter } = useFeature(RevisionsListFeature);\n    const { newEntryWizard, width } = useContentEntryEditorConfig();\n    const router = useRouter();\n    const dialogs = useDialogs();\n    const { route } = useRoute(Routes.ContentEntries.List);\n\n    const entryId = listPresenter.vm.selectedEntryId;\n    const { vm } = formPresenter;\n\n    const hasWizard = entryId === \"new\" && newEntryWizard !== null;\n    const showWizard = hasWizard && vm.form === null;\n\n    useEffect(() => {\n        if (entryId === \"new\") {\n            if (!newEntryWizard) {\n                formPresenter.newEntry();\n            }\n        } else if (entryId) {\n            formPresenter.loadRevision(entryId);\n            revisionsPresenter.init(entryId);\n        }\n\n        return () => {\n            formPresenter.reset();\n            revisionsPresenter.dispose();\n        };\n    }, [entryId]);\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => formPresenter.vm.isDirty,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content:\n                        \"There are some unsaved changes! Are you sure you want to navigate away and discard all changes?\",\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => {\n                        // We must reset the form to prevent the guard from kicking in again.\n                        formPresenter.reset();\n                        router.confirmTransition();\n                    },\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const handleBack = () => {\n        const { modelId, folderId } = route.params;\n        router.goToRoute(Routes.ContentEntries.List, { modelId, folderId });\n    };\n\n    return (\n        <Container>\n            <Helmet title={vm.entry?.meta?.title || listPresenter.vm.model.name} />\n            <HeaderBar\n                start={\n                    <EntryFormHeaderLeft\n                        onBack={handleBack}\n                        title={vm.entry?.meta?.title || `New ${listPresenter.vm.model.name}`}\n                        isNewEntry={vm.isNewEntry}\n                        modelName={listPresenter.vm.model.name}\n                        status={vm.entry?.meta?.status ?? null}\n                    />\n                }\n                end={<EntryFormHeaderRight />}\n            />\n            <ScrollArea>\n                {vm.loading ? <OverlayLoader text={vm.loading} /> : null}\n                {showWizard ? (\n                    newEntryWizard\n                ) : (\n                    <ContentEntryFormContent width={width}>\n                        <div className={\"bg-neutral-base rounded-lg p-lg\"}>\n                            <ContentEntryForm />\n                        </div>\n                    </ContentEntryFormContent>\n                )}\n            </ScrollArea>\n            <RevisionDrawer />\n        </Container>\n    );\n});\n\ninterface EntryFormHeaderLeftProps {\n    onBack: () => void;\n    title: string;\n    isNewEntry: boolean;\n    modelName: string;\n    status: string | null;\n}\n\nconst EntryFormHeaderLeft = ({\n    onBack,\n    title,\n    isNewEntry,\n    modelName,\n    status\n}: EntryFormHeaderLeftProps) => {\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <IconButton variant={\"ghost\"} onClick={onBack} icon={<BackIcon />} />\n            <Heading level={5} className={`text-neutral-primary${isNewEntry ? \" opacity-50\" : \"\"}`}>\n                {title}\n            </Heading>\n            <Tooltip\n                content={`Model: ${modelName}${status ? ` - Status: ${status}` : \"\"}`}\n                trigger={\n                    <Icon icon={<InfoIcon />} label={\"Info\"} size={\"sm\"} color={\"neutral-light\"} />\n                }\n            />\n        </div>\n    );\n};\n\nconst EntryFormHeaderRight = observer(() => {\n    const presenter = useContentEntryFormPresenter();\n    const { buttonActions } = useContentEntryEditorConfig();\n\n    const { canSave, canPublish, canUnpublish, canDelete } = presenter.vm;\n\n    if (!canSave && !canPublish && !canUnpublish && !canDelete) {\n        return <div />;\n    }\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <Buttons actions={buttonActions} />\n        </div>\n    );\n});\n"],"names":["ContentEntryFormView","observer","listPresenter","useContentEntriesPresenter","formPresenter","useContentEntryFormPresenter","revisionsPresenter","useFeature","RevisionsListFeature","newEntryWizard","width","useContentEntryEditorConfig","router","useRouter","dialogs","useDialogs","route","useRoute","Routes","entryId","vm","hasWizard","showWizard","useEffect","handleBack","modelId","folderId","Container","Helmet","HeaderBar","EntryFormHeaderLeft","EntryFormHeaderRight","ScrollArea","OverlayLoader","ContentEntryFormContent","ContentEntryForm","RevisionDrawer","onBack","title","isNewEntry","modelName","status","IconButton","BackIcon","Heading","Tooltip","Icon","InfoIcon","presenter","buttonActions","canSave","canPublish","canUnpublish","canDelete","Buttons"],"mappings":"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"}

package/presentation/contentEntries/views/RevisionDrawer.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const RevisionDrawer: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const RevisionDrawer: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/contentEntries/views/RevisionsList.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const RevisionsList: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const RevisionsList: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };