@webiny/app-headless-cms 6.5.0-beta.0 → 6.5.0-beta.10

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

@@ -14,6 +14,13 @@ export interface IContentEntriesViewModel {
     showFolders: boolean;
     childFolders: FolderDto[];
 }
+export type IDuplicateEntryResult = {
+    entry: CmsContentEntry;
+    error?: never;
+} | {
+    entry?: never;
+    error: Error;
+};
 export interface IContentEntriesPresenter {
     readonly vm: IContentEntriesViewModel;
     readonly list: IListPresenter<CmsContentEntry>;
@@ -25,6 +32,10 @@ export interface IContentEntriesPresenter {
     publishEntry(id: string): Promise<boolean>;
     unpublishEntry(id: string): Promise<boolean>;
     moveEntry(id: string, folderId: string): Promise<boolean>;
+    /**
+     * Resolves to `false` when the user cancels the confirmation dialog.
+     */
+    duplicateEntry(entry: CmsContentEntry): Promise<IDuplicateEntryResult | false>;
     init(config?: IContentEntriesInitConfig): void;
     dispose(): void;
 }
@@ -33,4 +44,5 @@ export declare namespace ContentEntriesPresenter {
     type Interface = IContentEntriesPresenter;
     type ViewModel = IContentEntriesViewModel;
     type InitConfig = IContentEntriesInitConfig;
+    type DuplicateEntryResult = IDuplicateEntryResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/list/abstractions.js","sources":["../../../../src/presentation/contentEntries/list/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { IListPresenter } from \"@webiny/app-admin/presentation/listPresenter/abstractions.js\";\nimport type { IFolderTreePresenter } from \"@webiny/app-aco/presentation/folderTree/abstractions.js\";\nimport type { FolderDto } from \"@webiny/app-aco\";\nimport type { CmsContentEntry, CmsModel } from \"~/types.js\";\n\nexport interface IContentEntriesInitConfig {\n    initialFolderId?: string;\n    initialSearch?: string;\n    filterNames?: string[];\n}\n\nexport interface IContentEntriesViewModel {\n    model: CmsModel;\n    selectedEntryId: string | null;\n    showingEntry: boolean;\n    showFolders: boolean;\n    childFolders: FolderDto[];\n}\n\nexport interface IContentEntriesPresenter {\n    readonly vm: IContentEntriesViewModel;\n    readonly list: IListPresenter<CmsContentEntry>;\n    readonly folders: IFolderTreePresenter;\n\n    selectEntry(id: string): void;\n    deselectEntry(): void;\n    createEntry(): void;\n    deleteEntry(id: string): Promise<boolean>;\n    publishEntry(id: string): Promise<boolean>;\n    unpublishEntry(id: string): Promise<boolean>;\n    moveEntry(id: string, folderId: string): Promise<boolean>;\n\n    init(config?: IContentEntriesInitConfig): void;\n    dispose(): void;\n}\n\nexport const ContentEntriesPresenter =\n    createAbstraction<IContentEntriesPresenter>(\"ContentEntriesPresenter\");\n\nexport namespace ContentEntriesPresenter {\n    export type Interface = IContentEntriesPresenter;\n    export type ViewModel = IContentEntriesViewModel;\n    export type InitConfig = IContentEntriesInitConfig;\n}\n"],"names":["ContentEntriesPresenter","createAbstraction"],"mappings":";AAqCO,MAAMA,0BACTC,kBAA4C"}
+{"version":3,"file":"presentation/contentEntries/list/abstractions.js","sources":["../../../../src/presentation/contentEntries/list/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { IListPresenter } from \"@webiny/app-admin/presentation/listPresenter/abstractions.js\";\nimport type { IFolderTreePresenter } from \"@webiny/app-aco/presentation/folderTree/abstractions.js\";\nimport type { FolderDto } from \"@webiny/app-aco\";\nimport type { CmsContentEntry, CmsModel } from \"~/types.js\";\n\nexport interface IContentEntriesInitConfig {\n    initialFolderId?: string;\n    initialSearch?: string;\n    filterNames?: string[];\n}\n\nexport interface IContentEntriesViewModel {\n    model: CmsModel;\n    selectedEntryId: string | null;\n    showingEntry: boolean;\n    showFolders: boolean;\n    childFolders: FolderDto[];\n}\n\nexport type IDuplicateEntryResult =\n    | { entry: CmsContentEntry; error?: never }\n    | { entry?: never; error: Error };\n\nexport interface IContentEntriesPresenter {\n    readonly vm: IContentEntriesViewModel;\n    readonly list: IListPresenter<CmsContentEntry>;\n    readonly folders: IFolderTreePresenter;\n\n    selectEntry(id: string): void;\n    deselectEntry(): void;\n    createEntry(): void;\n    deleteEntry(id: string): Promise<boolean>;\n    publishEntry(id: string): Promise<boolean>;\n    unpublishEntry(id: string): Promise<boolean>;\n    moveEntry(id: string, folderId: string): Promise<boolean>;\n    /**\n     * Resolves to `false` when the user cancels the confirmation dialog.\n     */\n    duplicateEntry(entry: CmsContentEntry): Promise<IDuplicateEntryResult | false>;\n\n    init(config?: IContentEntriesInitConfig): void;\n    dispose(): void;\n}\n\nexport const ContentEntriesPresenter =\n    createAbstraction<IContentEntriesPresenter>(\"ContentEntriesPresenter\");\n\nexport namespace ContentEntriesPresenter {\n    export type Interface = IContentEntriesPresenter;\n    export type ViewModel = IContentEntriesViewModel;\n    export type InitConfig = IContentEntriesInitConfig;\n    export type DuplicateEntryResult = IDuplicateEntryResult;\n}\n"],"names":["ContentEntriesPresenter","createAbstraction"],"mappings":";AA6CO,MAAMA,0BACTC,kBAA4C"}

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

@@ -1,12 +1,23 @@
+import { GetModelUseCase } from "../../../features/model/getModel/abstractions.js";
+import { GetEntryUseCase } from "../../../features/contentEntry/getEntry/abstractions.js";
+import type { CmsReferenceValue } from "../../../features/contentEntry/refTypes.js";
 import { type ILivePreviewPresenter, type PreviewComponent } from "./abstractions.js";
+import type { RefValuesMap } from "./resolvePreviewUrl.js";
 declare class LivePreviewPresenterImpl implements ILivePreviewPresenter {
+    private readonly getModelUseCase;
+    private readonly getEntryUseCase;
     private components;
-    constructor();
+    private refValues;
+    private requestedRefs;
+    constructor(getModelUseCase: GetModelUseCase.Interface, getEntryUseCase: GetEntryUseCase.Interface);
     get vm(): {
         components: PreviewComponent[];
+        refValues: RefValuesMap;
     };
     addComponent(component: PreviewComponent): void;
     clearComponents(): void;
+    loadRefValues(refs: CmsReferenceValue[]): void;
+    private loadRef;
 }
 export declare const LivePreviewPresenter: typeof LivePreviewPresenterImpl & {
     __abstraction: import("@webiny/di").Abstraction<ILivePreviewPresenter>;

package/presentation/contentEntries/preview/LivePreviewPresenter.js

@@ -1,15 +1,25 @@
-import { computed, makeAutoObservable } from "mobx";
+import { computed, makeAutoObservable, runInAction } from "mobx";
+import { GetModelUseCase } from "../../../features/model/getModel/abstractions.js";
+import { GetEntryUseCase } from "../../../features/contentEntry/getEntry/abstractions.js";
 import { LivePreviewPresenter } from "./abstractions.js";
 class LivePreviewPresenterImpl {
-    constructor(){
+    constructor(getModelUseCase, getEntryUseCase){
+        this.getModelUseCase = getModelUseCase;
+        this.getEntryUseCase = getEntryUseCase;
         this.components = [];
+        this.refValues = {};
+        this.requestedRefs = new Set();
         makeAutoObservable(this, {
-            vm: computed
+            vm: computed,
+            getModelUseCase: false,
+            getEntryUseCase: false,
+            requestedRefs: false
         });
     }
     get vm() {
         return {
-            components: this.components
+            components: this.components,
+            refValues: this.refValues
         };
     }
     addComponent(component) {
@@ -23,10 +33,43 @@ class LivePreviewPresenterImpl {
     clearComponents() {
         this.components = [];
     }
+    loadRefValues(refs) {
+        for (const ref of refs)if (!this.requestedRefs.has(ref.id)) {
+            this.requestedRefs.add(ref.id);
+            this.loadRef(ref);
+        }
+    }
+    async loadRef(ref) {
+        try {
+            const model = await this.getModelUseCase.execute({
+                modelId: ref.modelId
+            });
+            const entry = await this.getEntryUseCase.execute({
+                model,
+                id: ref.id
+            });
+            runInAction(()=>{
+                this.refValues = {
+                    ...this.refValues,
+                    [ref.id]: entry.values ?? {}
+                };
+            });
+        } catch  {
+            runInAction(()=>{
+                this.refValues = {
+                    ...this.refValues,
+                    [ref.id]: null
+                };
+            });
+        }
+    }
 }
 const LivePreviewPresenter_LivePreviewPresenter = LivePreviewPresenter.createImplementation({
     implementation: LivePreviewPresenterImpl,
-    dependencies: []
+    dependencies: [
+        GetModelUseCase,
+        GetEntryUseCase
+    ]
 });
 export { LivePreviewPresenter_LivePreviewPresenter as LivePreviewPresenter };
 

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

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/LivePreviewPresenter.js","sources":["../../../../src/presentation/contentEntries/preview/LivePreviewPresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed } from \"mobx\";\nimport {\n    LivePreviewPresenter as Abstraction,\n    type ILivePreviewPresenter,\n    type PreviewComponent\n} from \"./abstractions.js\";\n\nclass LivePreviewPresenterImpl implements ILivePreviewPresenter {\n    private components: PreviewComponent[] = [];\n\n    constructor() {\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    get vm() {\n        return {\n            components: this.components\n        };\n    }\n\n    addComponent(component: PreviewComponent): void {\n        const exists = this.components.some(c => c.name === component.name);\n        if (exists) {\n            this.components = this.components.map(c => (c.name === component.name ? component : c));\n        } else {\n            this.components = [...this.components, component];\n        }\n    }\n\n    clearComponents(): void {\n        this.components = [];\n    }\n}\n\nexport const LivePreviewPresenter = Abstraction.createImplementation({\n    implementation: LivePreviewPresenterImpl,\n    dependencies: []\n});\n"],"names":["LivePreviewPresenterImpl","makeAutoObservable","computed","component","exists","c","LivePreviewPresenter","Abstraction"],"mappings":";;AAOA,MAAMA;IAGF,aAAc;aAFN,UAAU,GAAuB,EAAE;QAGvCC,mBAAmB,IAAI,EAAE;YAAE,IAAIC;QAAS;IAC5C;IAEA,IAAI,KAAK;QACL,OAAO;YACH,YAAY,IAAI,CAAC,UAAU;QAC/B;IACJ;IAEA,aAAaC,SAA2B,EAAQ;QAC5C,MAAMC,SAAS,IAAI,CAAC,UAAU,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAKF,UAAU,IAAI;QAClE,IAAIC,QACA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAACC,CAAAA,IAAMA,EAAE,IAAI,KAAKF,UAAU,IAAI,GAAGA,YAAYE;aAEpF,IAAI,CAAC,UAAU,GAAG;eAAI,IAAI,CAAC,UAAU;YAAEF;SAAU;IAEzD;IAEA,kBAAwB;QACpB,IAAI,CAAC,UAAU,GAAG,EAAE;IACxB;AACJ;AAEO,MAAMG,4CAAuBC,qBAAAA,oBAAgC,CAAC;IACjE,gBAAgBP;IAChB,cAAc,EAAE;AACpB"}
+{"version":3,"file":"presentation/contentEntries/preview/LivePreviewPresenter.js","sources":["../../../../src/presentation/contentEntries/preview/LivePreviewPresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed, runInAction } from \"mobx\";\nimport { GetModelUseCase } from \"~/features/model/getModel/abstractions.js\";\nimport { GetEntryUseCase } from \"~/features/contentEntry/getEntry/abstractions.js\";\nimport type { CmsReferenceValue } from \"~/features/contentEntry/refTypes.js\";\nimport {\n    LivePreviewPresenter as Abstraction,\n    type ILivePreviewPresenter,\n    type PreviewComponent\n} from \"./abstractions.js\";\nimport type { RefValuesMap } from \"./resolvePreviewUrl.js\";\n\nclass LivePreviewPresenterImpl implements ILivePreviewPresenter {\n    private components: PreviewComponent[] = [];\n    private refValues: RefValuesMap = {};\n    private requestedRefs = new Set<string>();\n\n    constructor(\n        private readonly getModelUseCase: GetModelUseCase.Interface,\n        private readonly getEntryUseCase: GetEntryUseCase.Interface\n    ) {\n        makeAutoObservable<\n            LivePreviewPresenterImpl,\n            \"getModelUseCase\" | \"getEntryUseCase\" | \"requestedRefs\"\n        >(this, {\n            vm: computed,\n            getModelUseCase: false,\n            getEntryUseCase: false,\n            requestedRefs: false\n        });\n    }\n\n    get vm() {\n        return {\n            components: this.components,\n            refValues: this.refValues\n        };\n    }\n\n    addComponent(component: PreviewComponent): void {\n        const exists = this.components.some(c => c.name === component.name);\n        if (exists) {\n            this.components = this.components.map(c => (c.name === component.name ? component : c));\n        } else {\n            this.components = [...this.components, component];\n        }\n    }\n\n    clearComponents(): void {\n        this.components = [];\n    }\n\n    loadRefValues(refs: CmsReferenceValue[]): void {\n        for (const ref of refs) {\n            if (this.requestedRefs.has(ref.id)) {\n                continue;\n            }\n            this.requestedRefs.add(ref.id);\n            void this.loadRef(ref);\n        }\n    }\n\n    private async loadRef(ref: CmsReferenceValue): Promise<void> {\n        try {\n            const model = await this.getModelUseCase.execute({ modelId: ref.modelId });\n            const entry = await this.getEntryUseCase.execute({ model, id: ref.id });\n            runInAction(() => {\n                this.refValues = { ...this.refValues, [ref.id]: entry.values ?? {} };\n            });\n        } catch {\n            runInAction(() => {\n                this.refValues = { ...this.refValues, [ref.id]: null };\n            });\n        }\n    }\n}\n\nexport const LivePreviewPresenter = Abstraction.createImplementation({\n    implementation: LivePreviewPresenterImpl,\n    dependencies: [GetModelUseCase, GetEntryUseCase]\n});\n"],"names":["LivePreviewPresenterImpl","getModelUseCase","getEntryUseCase","Set","makeAutoObservable","computed","component","exists","c","refs","ref","model","entry","runInAction","LivePreviewPresenter","Abstraction","GetModelUseCase","GetEntryUseCase"],"mappings":";;;;AAWA,MAAMA;IAKF,YACqBC,eAA0C,EAC1CC,eAA0C,CAC7D;aAFmBD,eAAe,GAAfA;aACAC,eAAe,GAAfA;aANb,UAAU,GAAuB,EAAE;aACnC,SAAS,GAAiB,CAAC;aAC3B,aAAa,GAAG,IAAIC;QAMxBC,mBAGE,IAAI,EAAE;YACJ,IAAIC;YACJ,iBAAiB;YACjB,iBAAiB;YACjB,eAAe;QACnB;IACJ;IAEA,IAAI,KAAK;QACL,OAAO;YACH,YAAY,IAAI,CAAC,UAAU;YAC3B,WAAW,IAAI,CAAC,SAAS;QAC7B;IACJ;IAEA,aAAaC,SAA2B,EAAQ;QAC5C,MAAMC,SAAS,IAAI,CAAC,UAAU,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAKF,UAAU,IAAI;QAClE,IAAIC,QACA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAACC,CAAAA,IAAMA,EAAE,IAAI,KAAKF,UAAU,IAAI,GAAGA,YAAYE;aAEpF,IAAI,CAAC,UAAU,GAAG;eAAI,IAAI,CAAC,UAAU;YAAEF;SAAU;IAEzD;IAEA,kBAAwB;QACpB,IAAI,CAAC,UAAU,GAAG,EAAE;IACxB;IAEA,cAAcG,IAAyB,EAAQ;QAC3C,KAAK,MAAMC,OAAOD,KACd,KAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAACC,IAAI,EAAE;YAGjC,IAAI,CAAC,aAAa,CAAC,GAAG,CAACA,IAAI,EAAE;YACxB,IAAI,CAAC,OAAO,CAACA;;IAE1B;IAEA,MAAc,QAAQA,GAAsB,EAAiB;QACzD,IAAI;YACA,MAAMC,QAAQ,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;gBAAE,SAASD,IAAI,OAAO;YAAC;YACxE,MAAME,QAAQ,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;gBAAED;gBAAO,IAAID,IAAI,EAAE;YAAC;YACrEG,YAAY;gBACR,IAAI,CAAC,SAAS,GAAG;oBAAE,GAAG,IAAI,CAAC,SAAS;oBAAE,CAACH,IAAI,EAAE,CAAC,EAAEE,MAAM,MAAM,IAAI,CAAC;gBAAE;YACvE;QACJ,EAAE,OAAM;YACJC,YAAY;gBACR,IAAI,CAAC,SAAS,GAAG;oBAAE,GAAG,IAAI,CAAC,SAAS;oBAAE,CAACH,IAAI,EAAE,CAAC,EAAE;gBAAK;YACzD;QACJ;IACJ;AACJ;AAEO,MAAMI,4CAAuBC,qBAAAA,oBAAgC,CAAC;IACjE,gBAAgBf;IAChB,cAAc;QAACgB;QAAiBC;KAAgB;AACpD"}

package/presentation/contentEntries/preview/LivePreviewPresenter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/presentation/contentEntries/preview/LivePreviewPresenter.test.js

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from "vitest";
+import { Container } from "@webiny/di";
+import { GetModelUseCase } from "../../../features/model/getModel/abstractions.js";
+import { GetEntryUseCase } from "../../../features/contentEntry/getEntry/abstractions.js";
+import { LivePreviewPresenter } from "./abstractions.js";
+import { LivePreviewPresenter as external_LivePreviewPresenter_js_LivePreviewPresenter } from "./LivePreviewPresenter.js";
+const setup = ()=>{
+    const getModel = vi.fn(async ({ modelId })=>({
+            modelId,
+            fields: []
+        }));
+    const getEntry = vi.fn(async ({ id })=>{
+        if ("missing#0001" === id) throw new Error("Entry not found.");
+        return {
+            id,
+            values: {
+                slug: "baker"
+            }
+        };
+    });
+    const container = new Container();
+    container.registerInstance(GetModelUseCase, {
+        execute: getModel
+    });
+    container.registerInstance(GetEntryUseCase, {
+        execute: getEntry
+    });
+    container.register(external_LivePreviewPresenter_js_LivePreviewPresenter);
+    return {
+        presenter: container.resolve(LivePreviewPresenter),
+        getModel,
+        getEntry
+    };
+};
+describe("LivePreviewPresenter", ()=>{
+    it("should load each referenced entry once and expose its values", async ()=>{
+        const { presenter, getEntry } = setup();
+        const ref = {
+            id: "loc1#0001",
+            modelId: "location"
+        };
+        presenter.loadRefValues([
+            ref
+        ]);
+        presenter.loadRefValues([
+            ref
+        ]);
+        await vi.waitFor(()=>{
+            expect(presenter.vm.refValues[ref.id]).toEqual({
+                slug: "baker"
+            });
+        });
+        expect(getEntry).toHaveBeenCalledTimes(1);
+        expect(getEntry).toHaveBeenCalledWith({
+            model: {
+                modelId: "location",
+                fields: []
+            },
+            id: ref.id
+        });
+    });
+    it("should mark a ref that fails to load and not request it again", async ()=>{
+        const { presenter, getEntry } = setup();
+        const ref = {
+            id: "missing#0001",
+            modelId: "location"
+        };
+        presenter.loadRefValues([
+            ref
+        ]);
+        await vi.waitFor(()=>{
+            expect(presenter.vm.refValues[ref.id]).toBeNull();
+        });
+        presenter.loadRefValues([
+            ref
+        ]);
+        expect(getEntry).toHaveBeenCalledTimes(1);
+    });
+});
+
+//# sourceMappingURL=LivePreviewPresenter.test.js.map

package/presentation/contentEntries/preview/LivePreviewPresenter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/LivePreviewPresenter.test.js","sources":["../../../../src/presentation/contentEntries/preview/LivePreviewPresenter.test.ts"],"sourcesContent":["import { describe, it, expect, vi } from \"vitest\";\nimport { Container } from \"@webiny/di\";\nimport { GetModelUseCase } from \"~/features/model/getModel/abstractions.js\";\nimport { GetEntryUseCase } from \"~/features/contentEntry/getEntry/abstractions.js\";\nimport { LivePreviewPresenter as Abstraction } from \"./abstractions.js\";\nimport { LivePreviewPresenter } from \"./LivePreviewPresenter.js\";\n\nconst setup = () => {\n    const getModel = vi.fn(async ({ modelId }: { modelId: string }) => ({ modelId, fields: [] }));\n    const getEntry = vi.fn(async ({ id }: { id: string }) => {\n        if (id === \"missing#0001\") {\n            throw new Error(\"Entry not found.\");\n        }\n        return { id, values: { slug: \"baker\" } };\n    });\n\n    const container = new Container();\n    container.registerInstance(GetModelUseCase, {\n        execute: getModel\n    } as unknown as GetModelUseCase.Interface);\n    container.registerInstance(GetEntryUseCase, {\n        execute: getEntry\n    } as unknown as GetEntryUseCase.Interface);\n    container.register(LivePreviewPresenter);\n\n    return { presenter: container.resolve(Abstraction), getModel, getEntry };\n};\n\ndescribe(\"LivePreviewPresenter\", () => {\n    it(\"should load each referenced entry once and expose its values\", async () => {\n        const { presenter, getEntry } = setup();\n        const ref = { id: \"loc1#0001\", modelId: \"location\" };\n\n        presenter.loadRefValues([ref]);\n        presenter.loadRefValues([ref]);\n\n        await vi.waitFor(() => {\n            expect(presenter.vm.refValues[ref.id]).toEqual({ slug: \"baker\" });\n        });\n        expect(getEntry).toHaveBeenCalledTimes(1);\n        expect(getEntry).toHaveBeenCalledWith({\n            model: { modelId: \"location\", fields: [] },\n            id: ref.id\n        });\n    });\n\n    it(\"should mark a ref that fails to load and not request it again\", async () => {\n        const { presenter, getEntry } = setup();\n        const ref = { id: \"missing#0001\", modelId: \"location\" };\n\n        presenter.loadRefValues([ref]);\n\n        await vi.waitFor(() => {\n            expect(presenter.vm.refValues[ref.id]).toBeNull();\n        });\n\n        presenter.loadRefValues([ref]);\n        expect(getEntry).toHaveBeenCalledTimes(1);\n    });\n});\n"],"names":["setup","getModel","vi","modelId","getEntry","id","Error","container","Container","GetModelUseCase","GetEntryUseCase","LivePreviewPresenter","Abstraction","describe","it","presenter","ref","expect"],"mappings":";;;;;;AAOA,MAAMA,QAAQ;IACV,MAAMC,WAAWC,GAAG,EAAE,CAAC,OAAO,EAAEC,OAAO,EAAuB,GAAM;YAAEA;YAAS,QAAQ,EAAE;QAAC;IAC1F,MAAMC,WAAWF,GAAG,EAAE,CAAC,OAAO,EAAEG,EAAE,EAAkB;QAChD,IAAIA,AAAO,mBAAPA,IACA,MAAM,IAAIC,MAAM;QAEpB,OAAO;YAAED;YAAI,QAAQ;gBAAE,MAAM;YAAQ;QAAE;IAC3C;IAEA,MAAME,YAAY,IAAIC;IACtBD,UAAU,gBAAgB,CAACE,iBAAiB;QACxC,SAASR;IACb;IACAM,UAAU,gBAAgB,CAACG,iBAAiB;QACxC,SAASN;IACb;IACAG,UAAU,QAAQ,CAACI;IAEnB,OAAO;QAAE,WAAWJ,UAAU,OAAO,CAACK;QAAcX;QAAUG;IAAS;AAC3E;AAEAS,SAAS,wBAAwB;IAC7BC,GAAG,gEAAgE;QAC/D,MAAM,EAAEC,SAAS,EAAEX,QAAQ,EAAE,GAAGJ;QAChC,MAAMgB,MAAM;YAAE,IAAI;YAAa,SAAS;QAAW;QAEnDD,UAAU,aAAa,CAAC;YAACC;SAAI;QAC7BD,UAAU,aAAa,CAAC;YAACC;SAAI;QAE7B,MAAMd,GAAG,OAAO,CAAC;YACbe,OAAOF,UAAU,EAAE,CAAC,SAAS,CAACC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC;gBAAE,MAAM;YAAQ;QACnE;QACAC,OAAOb,UAAU,qBAAqB,CAAC;QACvCa,OAAOb,UAAU,oBAAoB,CAAC;YAClC,OAAO;gBAAE,SAAS;gBAAY,QAAQ,EAAE;YAAC;YACzC,IAAIY,IAAI,EAAE;QACd;IACJ;IAEAF,GAAG,iEAAiE;QAChE,MAAM,EAAEC,SAAS,EAAEX,QAAQ,EAAE,GAAGJ;QAChC,MAAMgB,MAAM;YAAE,IAAI;YAAgB,SAAS;QAAW;QAEtDD,UAAU,aAAa,CAAC;YAACC;SAAI;QAE7B,MAAMd,GAAG,OAAO,CAAC;YACbe,OAAOF,UAAU,EAAE,CAAC,SAAS,CAACC,IAAI,EAAE,CAAC,EAAE,QAAQ;QACnD;QAEAD,UAAU,aAAa,CAAC;YAACC;SAAI;QAC7BC,OAAOb,UAAU,qBAAqB,CAAC;IAC3C;AACJ"}

package/presentation/contentEntries/preview/ModelEditorComponentDiscovery.js

@@ -20,7 +20,7 @@ const ModelEditorComponentDiscovery = ContentModelEditor.createDecorator((Origin
             }, [
             presenter
         ]);
-        return /*#__PURE__*/ react.createElement(react.Fragment, null, previewPath ? /*#__PURE__*/ react.createElement(ComponentDiscoveryIframe, {
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, previewPath && previewDomain ? /*#__PURE__*/ react.createElement(ComponentDiscoveryIframe, {
             domain: previewDomain,
             previewPath: previewPath
         }) : null, /*#__PURE__*/ react.createElement(Original, null));

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

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/ModelEditorComponentDiscovery.js","sources":["../../../../src/presentation/contentEntries/preview/ModelEditorComponentDiscovery.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { ContentModelEditor } from \"~/admin/components/ContentModelEditor/ContentModelEditor.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ComponentDiscoveryIframe } from \"./ComponentDiscoveryIframe.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\n\nexport const ModelEditorComponentDiscovery = ContentModelEditor.createDecorator(Original => {\n    return function ModelEditorWithDiscovery() {\n        const { data } = useModelEditor();\n        const presenter = useLivePreviewPresenter();\n        const previewPath = data?.settings?.previewPath as string | undefined;\n        const { previewDomain } = usePreviewDomain();\n\n        useEffect(() => {\n            if (!previewPath) {\n                presenter.clearComponents();\n            }\n        }, [previewPath, presenter]);\n\n        useEffect(() => {\n            return () => {\n                presenter.clearComponents();\n            };\n        }, [presenter]);\n\n        return (\n            <>\n                {previewPath ? (\n                    <ComponentDiscoveryIframe domain={previewDomain} previewPath={previewPath} />\n                ) : null}\n                <Original />\n            </>\n        );\n    };\n});\n"],"names":["ModelEditorComponentDiscovery","ContentModelEditor","Original","data","useModelEditor","presenter","useLivePreviewPresenter","previewPath","previewDomain","usePreviewDomain","useEffect","ComponentDiscoveryIframe"],"mappings":";;;;;;AAOO,MAAMA,gCAAgCC,mBAAmB,eAAe,CAACC,CAAAA,WACrE;QACH,MAAM,EAAEC,IAAI,EAAE,GAAGC;QACjB,MAAMC,YAAYC;QAClB,MAAMC,cAAcJ,MAAM,UAAU;QACpC,MAAM,EAAEK,aAAa,EAAE,GAAGC;QAE1BC,UAAU;YACN,IAAI,CAACH,aACDF,UAAU,eAAe;QAEjC,GAAG;YAACE;YAAaF;SAAU;QAE3BK,UAAU,IACC;gBACHL,UAAU,eAAe;YAC7B,GACD;YAACA;SAAU;QAEd,OAAO,WAAP,GACI,0CACKE,cAAc,WAAdA,GACG,oBAACI,0BAAwBA;YAAC,QAAQH;YAAe,aAAaD;aAC9D,oBACJ,oBAACL,UAAAA;IAGb"}
+{"version":3,"file":"presentation/contentEntries/preview/ModelEditorComponentDiscovery.js","sources":["../../../../src/presentation/contentEntries/preview/ModelEditorComponentDiscovery.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { ContentModelEditor } from \"~/admin/components/ContentModelEditor/ContentModelEditor.js\";\nimport { useModelEditor } from \"~/admin/components/ContentModelEditor/useModelEditor.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ComponentDiscoveryIframe } from \"./ComponentDiscoveryIframe.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\n\nexport const ModelEditorComponentDiscovery = ContentModelEditor.createDecorator(Original => {\n    return function ModelEditorWithDiscovery() {\n        const { data } = useModelEditor();\n        const presenter = useLivePreviewPresenter();\n        const previewPath = data?.settings?.previewPath as string | undefined;\n        const { previewDomain } = usePreviewDomain();\n\n        useEffect(() => {\n            if (!previewPath) {\n                presenter.clearComponents();\n            }\n        }, [previewPath, presenter]);\n\n        useEffect(() => {\n            return () => {\n                presenter.clearComponents();\n            };\n        }, [presenter]);\n\n        return (\n            <>\n                {previewPath && previewDomain ? (\n                    <ComponentDiscoveryIframe domain={previewDomain} previewPath={previewPath} />\n                ) : null}\n                <Original />\n            </>\n        );\n    };\n});\n"],"names":["ModelEditorComponentDiscovery","ContentModelEditor","Original","data","useModelEditor","presenter","useLivePreviewPresenter","previewPath","previewDomain","usePreviewDomain","useEffect","ComponentDiscoveryIframe"],"mappings":";;;;;;AAOO,MAAMA,gCAAgCC,mBAAmB,eAAe,CAACC,CAAAA,WACrE;QACH,MAAM,EAAEC,IAAI,EAAE,GAAGC;QACjB,MAAMC,YAAYC;QAClB,MAAMC,cAAcJ,MAAM,UAAU;QACpC,MAAM,EAAEK,aAAa,EAAE,GAAGC;QAE1BC,UAAU;YACN,IAAI,CAACH,aACDF,UAAU,eAAe;QAEjC,GAAG;YAACE;YAAaF;SAAU;QAE3BK,UAAU,IACC;gBACHL,UAAU,eAAe;YAC7B,GACD;YAACA;SAAU;QAEd,OAAO,WAAP,GACI,0CACKE,eAAeC,gBAAgB,WAAhBA,GACZ,oBAACG,0BAAwBA;YAAC,QAAQH;YAAe,aAAaD;aAC9D,oBACJ,oBAACL,UAAAA;IAGb"}

package/presentation/contentEntries/preview/PreviewDecorator.js

@@ -1,16 +1,19 @@
-import react from "react";
+import react, { useEffect } from "react";
 import { createReactiveComponent } from "@webiny/app-admin";
 import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView/SplitView.js";
 import { usePreviewDomain } from "@webiny/frontend-settings/exports/admin.js";
 import { ContentEntryFormContent } from "../views/layout/ContentEntryFormContent.js";
 import { useContentEntryFormPresenter } from "../form/useContentEntryFormPresenter.js";
 import { PreviewPane } from "./PreviewPane.js";
+import { PreviewDomainStatus } from "./PreviewDomainStatus.js";
+import { useLivePreviewPresenter } from "./useLivePreviewPresenter.js";
+import { getPatternRefFieldIds, getRefValues, withRefValues } from "./resolvePreviewUrl.js";
 const PreviewDecorator = ContentEntryFormContent.createDecorator((Original)=>createReactiveComponent((props)=>{
         const presenter = useContentEntryFormPresenter();
+        const livePreview = useLivePreviewPresenter();
         const model = presenter.vm.model;
         const previewPath = model?.settings?.previewPath;
-        const { previewDomain } = usePreviewDomain();
-        if (!previewPath) return /*#__PURE__*/ react.createElement(Original, props);
+        const domain = usePreviewDomain();
         const form = presenter.vm.form;
         const entry = presenter.vm.entry;
         const formValues = form ? form.getData() : null;
@@ -18,6 +21,16 @@ const PreviewDecorator = ContentEntryFormContent.createDecorator((Original)=>cre
             ...entry,
             values: formValues
         } : null;
+        const refFieldIds = previewPath && model ? getPatternRefFieldIds(previewPath, model.fields) : [];
+        const refs = formValues ? getRefValues(formValues, refFieldIds) : [];
+        const refsKey = refs.map((ref)=>ref.id).join(",");
+        useEffect(()=>{
+            if (refs.length > 0) livePreview.loadRefValues(refs);
+        }, [
+            refsKey
+        ]);
+        if (!previewPath) return /*#__PURE__*/ react.createElement(Original, props);
+        const urlEntryData = entryData ? withRefValues(entryData, refFieldIds, livePreview.vm.refValues) : null;
         const entryId = entry?.id || "new";
         return /*#__PURE__*/ react.createElement(SplitView, {
             namespace: "cms-live-preview",
@@ -37,11 +50,17 @@ const PreviewDecorator = ContentEntryFormContent.createDecorator((Original)=>cre
             style: {
                 overflowY: "hidden"
             }
-        }, /*#__PURE__*/ react.createElement(PreviewPane, {
-            domain: previewDomain,
+        }, domain.previewDomain ? /*#__PURE__*/ react.createElement(PreviewPane, {
+            domain: domain.previewDomain,
+            settingsDomain: domain.isOverridden ? domain.settingsDomain : null,
+            onResetDomain: domain.unsetPreviewDomain,
             previewPath: previewPath,
             entryId: entryId,
-            entryData: entryData
+            entryData: entryData,
+            urlEntryData: urlEntryData
+        }) : /*#__PURE__*/ react.createElement(PreviewDomainStatus, {
+            error: domain.error,
+            onRetry: domain.retry
         })));
     }));
 export { PreviewDecorator };

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

@@ -1 +1 @@
-{"version":3,"file":"presentation/contentEntries/preview/PreviewDecorator.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDecorator.tsx"],"sourcesContent":["import React from \"react\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport {\n    SplitView,\n    LeftPanel,\n    RightPanel\n} from \"@webiny/app-admin/components/SplitView/SplitView.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ContentEntryFormContent } from \"~/presentation/contentEntries/views/layout/ContentEntryFormContent.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { PreviewPane } from \"./PreviewPane.js\";\n\nexport const PreviewDecorator = ContentEntryFormContent.createDecorator(Original => {\n    return createReactiveComponent(\n        (props: React.HTMLAttributes<HTMLDivElement> & { width?: string }) => {\n            const presenter = useContentEntryFormPresenter();\n            const model = presenter.vm.model;\n            const previewPath = model?.settings?.previewPath as string | undefined;\n            const { previewDomain } = usePreviewDomain();\n\n            if (!previewPath) {\n                return <Original {...props} />;\n            }\n\n            const form = presenter.vm.form;\n            const entry = presenter.vm.entry;\n            const formValues = form ? form.getData() : null;\n            const entryData = formValues\n                ? { ...entry, values: formValues as Record<string, unknown> }\n                : null;\n\n            const entryId = entry?.id || \"new\";\n\n            return (\n                <SplitView namespace={\"cms-live-preview\"} className=\"h-full\">\n                    <LeftPanel span={5} minSize={20} className=\"bg-white overflow-y-auto\">\n                        <Original\n                            {...props}\n                            width={\"100%\"}\n                            className={\"!pt-0 [&>div]:!rounded-none\"}\n                        />\n                    </LeftPanel>\n                    <RightPanel\n                        span={7}\n                        minSize={20}\n                        className=\"overflow-hidden p-md\"\n                        style={{ overflowY: \"hidden\" }}\n                    >\n                        <PreviewPane\n                            domain={previewDomain}\n                            previewPath={previewPath}\n                            entryId={entryId}\n                            entryData={entryData}\n                        />\n                    </RightPanel>\n                </SplitView>\n            );\n        }\n    );\n});\n"],"names":["PreviewDecorator","ContentEntryFormContent","Original","createReactiveComponent","props","presenter","useContentEntryFormPresenter","model","previewPath","previewDomain","usePreviewDomain","form","entry","formValues","entryData","entryId","SplitView","LeftPanel","RightPanel","PreviewPane"],"mappings":";;;;;;;AAYO,MAAMA,mBAAmBC,wBAAwB,eAAe,CAACC,CAAAA,WAC7DC,wBACH,CAACC;QACG,MAAMC,YAAYC;QAClB,MAAMC,QAAQF,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMG,cAAcD,OAAO,UAAU;QACrC,MAAM,EAAEE,aAAa,EAAE,GAAGC;QAE1B,IAAI,CAACF,aACD,OAAO,WAAP,GAAO,oBAACN,UAAaE;QAGzB,MAAMO,OAAON,UAAU,EAAE,CAAC,IAAI;QAC9B,MAAMO,QAAQP,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMQ,aAAaF,OAAOA,KAAK,OAAO,KAAK;QAC3C,MAAMG,YAAYD,aACZ;YAAE,GAAGD,KAAK;YAAE,QAAQC;QAAsC,IAC1D;QAEN,MAAME,UAAUH,OAAO,MAAM;QAE7B,OAAO,WAAP,GACI,oBAACI,WAASA;YAAC,WAAW;YAAoB,WAAU;yBAChD,oBAACC,WAASA;YAAC,MAAM;YAAG,SAAS;YAAI,WAAU;yBACvC,oBAACf,UAAAA;YACI,GAAGE,KAAK;YACT,OAAO;YACP,WAAW;2BAGnB,oBAACc,YAAUA;YACP,MAAM;YACN,SAAS;YACT,WAAU;YACV,OAAO;gBAAE,WAAW;YAAS;yBAE7B,oBAACC,aAAWA;YACR,QAAQV;YACR,aAAaD;YACb,SAASO;YACT,WAAWD;;IAK/B"}
+{"version":3,"file":"presentation/contentEntries/preview/PreviewDecorator.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDecorator.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport {\n    SplitView,\n    LeftPanel,\n    RightPanel\n} from \"@webiny/app-admin/components/SplitView/SplitView.js\";\nimport { usePreviewDomain } from \"@webiny/frontend-settings/exports/admin.js\";\nimport { ContentEntryFormContent } from \"~/presentation/contentEntries/views/layout/ContentEntryFormContent.js\";\nimport { useContentEntryFormPresenter } from \"~/presentation/contentEntries/form/useContentEntryFormPresenter.js\";\nimport { PreviewPane } from \"./PreviewPane.js\";\nimport { PreviewDomainStatus } from \"./PreviewDomainStatus.js\";\nimport { useLivePreviewPresenter } from \"./useLivePreviewPresenter.js\";\nimport { getPatternRefFieldIds, getRefValues, withRefValues } from \"./resolvePreviewUrl.js\";\n\nexport const PreviewDecorator = ContentEntryFormContent.createDecorator(Original => {\n    return createReactiveComponent(\n        (props: React.HTMLAttributes<HTMLDivElement> & { width?: string }) => {\n            const presenter = useContentEntryFormPresenter();\n            const livePreview = useLivePreviewPresenter();\n            const model = presenter.vm.model;\n            const previewPath = model?.settings?.previewPath as string | undefined;\n            const domain = usePreviewDomain();\n\n            const form = presenter.vm.form;\n            const entry = presenter.vm.entry;\n            const formValues = form ? (form.getData() as Record<string, unknown>) : null;\n            const entryData = formValues ? { ...entry, values: formValues } : null;\n\n            const refFieldIds =\n                previewPath && model ? getPatternRefFieldIds(previewPath, model.fields) : [];\n            const refs = formValues ? getRefValues(formValues, refFieldIds) : [];\n            const refsKey = refs.map(ref => ref.id).join(\",\");\n\n            useEffect(() => {\n                if (refs.length > 0) {\n                    livePreview.loadRefValues(refs);\n                }\n            }, [refsKey]);\n\n            if (!previewPath) {\n                return <Original {...props} />;\n            }\n\n            // Only the preview URL gets the referenced values; the iframe receives the raw form data.\n            const urlEntryData = entryData\n                ? withRefValues(entryData, refFieldIds, livePreview.vm.refValues)\n                : null;\n\n            const entryId = entry?.id || \"new\";\n\n            return (\n                <SplitView namespace={\"cms-live-preview\"} className=\"h-full\">\n                    <LeftPanel span={5} minSize={20} className=\"bg-white overflow-y-auto\">\n                        <Original\n                            {...props}\n                            width={\"100%\"}\n                            className={\"!pt-0 [&>div]:!rounded-none\"}\n                        />\n                    </LeftPanel>\n                    <RightPanel\n                        span={7}\n                        minSize={20}\n                        className=\"overflow-hidden p-md\"\n                        style={{ overflowY: \"hidden\" }}\n                    >\n                        {domain.previewDomain ? (\n                            <PreviewPane\n                                domain={domain.previewDomain}\n                                settingsDomain={domain.isOverridden ? domain.settingsDomain : null}\n                                onResetDomain={domain.unsetPreviewDomain}\n                                previewPath={previewPath}\n                                entryId={entryId}\n                                entryData={entryData}\n                                urlEntryData={urlEntryData}\n                            />\n                        ) : (\n                            <PreviewDomainStatus error={domain.error} onRetry={domain.retry} />\n                        )}\n                    </RightPanel>\n                </SplitView>\n            );\n        }\n    );\n});\n"],"names":["PreviewDecorator","ContentEntryFormContent","Original","createReactiveComponent","props","presenter","useContentEntryFormPresenter","livePreview","useLivePreviewPresenter","model","previewPath","domain","usePreviewDomain","form","entry","formValues","entryData","refFieldIds","getPatternRefFieldIds","refs","getRefValues","refsKey","ref","useEffect","urlEntryData","withRefValues","entryId","SplitView","LeftPanel","RightPanel","PreviewPane","PreviewDomainStatus"],"mappings":";;;;;;;;;;AAeO,MAAMA,mBAAmBC,wBAAwB,eAAe,CAACC,CAAAA,WAC7DC,wBACH,CAACC;QACG,MAAMC,YAAYC;QAClB,MAAMC,cAAcC;QACpB,MAAMC,QAAQJ,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMK,cAAcD,OAAO,UAAU;QACrC,MAAME,SAASC;QAEf,MAAMC,OAAOR,UAAU,EAAE,CAAC,IAAI;QAC9B,MAAMS,QAAQT,UAAU,EAAE,CAAC,KAAK;QAChC,MAAMU,aAAaF,OAAQA,KAAK,OAAO,KAAiC;QACxE,MAAMG,YAAYD,aAAa;YAAE,GAAGD,KAAK;YAAE,QAAQC;QAAW,IAAI;QAElE,MAAME,cACFP,eAAeD,QAAQS,sBAAsBR,aAAaD,MAAM,MAAM,IAAI,EAAE;QAChF,MAAMU,OAAOJ,aAAaK,aAAaL,YAAYE,eAAe,EAAE;QACpE,MAAMI,UAAUF,KAAK,GAAG,CAACG,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7CC,UAAU;YACN,IAAIJ,KAAK,MAAM,GAAG,GACdZ,YAAY,aAAa,CAACY;QAElC,GAAG;YAACE;SAAQ;QAEZ,IAAI,CAACX,aACD,OAAO,WAAP,GAAO,oBAACR,UAAaE;QAIzB,MAAMoB,eAAeR,YACfS,cAAcT,WAAWC,aAAaV,YAAY,EAAE,CAAC,SAAS,IAC9D;QAEN,MAAMmB,UAAUZ,OAAO,MAAM;QAE7B,OAAO,WAAP,GACI,oBAACa,WAASA;YAAC,WAAW;YAAoB,WAAU;yBAChD,oBAACC,WAASA;YAAC,MAAM;YAAG,SAAS;YAAI,WAAU;yBACvC,oBAAC1B,UAAAA;YACI,GAAGE,KAAK;YACT,OAAO;YACP,WAAW;2BAGnB,oBAACyB,YAAUA;YACP,MAAM;YACN,SAAS;YACT,WAAU;YACV,OAAO;gBAAE,WAAW;YAAS;WAE5BlB,OAAO,aAAa,GAAG,WAAH,GACjB,oBAACmB,aAAWA;YACR,QAAQnB,OAAO,aAAa;YAC5B,gBAAgBA,OAAO,YAAY,GAAGA,OAAO,cAAc,GAAG;YAC9D,eAAeA,OAAO,kBAAkB;YACxC,aAAaD;YACb,SAASgB;YACT,WAAWV;YACX,cAAcQ;2BAGlB,oBAACO,qBAAmBA;YAAC,OAAOpB,OAAO,KAAK;YAAE,SAASA,OAAO,KAAK;;IAKnF"}

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface PreviewDomainStatusProps {
+    error: string | null;
+    onRetry: () => void;
+}
+/**
+ * Shown in place of the preview while the Frontend Domain setting loads, or when it fails to load.
+ */
+export declare const PreviewDomainStatus: ({ error, onRetry }: PreviewDomainStatusProps) => React.JSX.Element;
+export {};

package/presentation/contentEntries/preview/PreviewDomainStatus.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { Alert, OverlayLoader } from "@webiny/admin-ui";
+const PreviewDomainStatus = ({ error, onRetry })=>/*#__PURE__*/ react.createElement("div", {
+        className: "relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden fill-grid"
+    }, error ? /*#__PURE__*/ react.createElement("div", {
+        className: "p-md"
+    }, /*#__PURE__*/ react.createElement(Alert, {
+        type: "danger",
+        variant: "subtle",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Retry",
+            onClick: onRetry
+        })
+    }, "Could not load the Frontend Domain setting, so the live preview cannot start. ", error)) : /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading preview settings..."
+    }));
+export { PreviewDomainStatus };
+
+//# sourceMappingURL=PreviewDomainStatus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/contentEntries/preview/PreviewDomainStatus.js","sources":["../../../../src/presentation/contentEntries/preview/PreviewDomainStatus.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert, OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface PreviewDomainStatusProps {\n    error: string | null;\n    onRetry: () => void;\n}\n\n/**\n * Shown in place of the preview while the Frontend Domain setting loads, or when it fails to load.\n */\nexport const PreviewDomainStatus = ({ error, onRetry }: PreviewDomainStatusProps) => {\n    return (\n        <div className=\"relative border border-neutral-dimmed rounded-t-lg flex flex-col flex-1 h-full overflow-hidden fill-grid\">\n            {error ? (\n                <div className=\"p-md\">\n                    <Alert\n                        type={\"danger\"}\n                        variant={\"subtle\"}\n                        actions={<Alert.Action text={\"Retry\"} onClick={onRetry} />}\n                    >\n                        Could not load the Frontend Domain setting, so the live preview cannot\n                        start. {error}\n                    </Alert>\n                </div>\n            ) : (\n                <OverlayLoader text=\"Loading preview settings...\" />\n            )}\n        </div>\n    );\n};\n"],"names":["PreviewDomainStatus","error","onRetry","Alert","OverlayLoader"],"mappings":";;AAWO,MAAMA,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAA4B,GACrE,WAAP,GACI,oBAAC;QAAI,WAAU;OACVD,QAAQ,WAARA,GACG,oBAAC;QAAI,WAAU;qBACX,oBAACE,OAAKA;QACF,MAAM;QACN,SAAS;QACT,uBAAS,oBAACA,MAAM,MAAM;YAAC,MAAM;YAAS,SAASD;;OAClD,kFAEWD,UAAAA,WAAAA,GAIhB,oBAACG,eAAaA;QAAC,MAAK"}

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

@@ -1,9 +1,18 @@
 import React from "react";
 interface PreviewPaneProps {
     domain: string;
+    /**
+     * The Frontend Domain setting, passed only when the user overrides it with their own preview domain.
+     */
+    settingsDomain: string | null;
+    onResetDomain: () => void;
     previewPath: string;
     entryId: string;
     entryData: Record<string, unknown> | null;
+    /**
+     * Entry data used to resolve the preview path, with referenced entries' values filled in.
+     */
+    urlEntryData: Record<string, unknown> | null;
 }
-export declare const PreviewPane: ({ domain, previewPath, entryId, entryData }: PreviewPaneProps) => React.JSX.Element;
+export declare const PreviewPane: ({ domain, settingsDomain, onResetDomain, previewPath, entryId, entryData, urlEntryData }: PreviewPaneProps) => React.JSX.Element;
 export {};

package/presentation/contentEntries/preview/PreviewPane.js

@@ -1,32 +1,29 @@
 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 { Alert, CopyButton, IconButton, OverlayLoader, SegmentedControl, Text, Tooltip, useToast } 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 { PreviewDomainMenu } from "@webiny/frontend-settings/exports/admin.js";
 import { useLivePreviewPresenter } from "./useLivePreviewPresenter.js";
 import { buildDisplayUrl, buildEditorUrl } from "./resolvePreviewUrl.js";
-const PreviewPane = ({ domain, previewPath, entryId, entryData })=>{
+const READY_TIMEOUT_MS = 20000;
+const PreviewPane = ({ domain, settingsDomain, onResetDomain, previewPath, entryId, entryData, urlEntryData })=>{
     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 [timedOut, setTimedOut] = useState(false);
     const [iframeKey, setIframeKey] = useState(0);
     const [viewport, setViewport] = useState("desktop");
     const presenter = useLivePreviewPresenter();
+    const { showToast } = useToast();
     entryDataRef.current = entryData;
-    const displayUrl = buildDisplayUrl(domain, previewPath, entryData || {});
-    const [address, setAddress] = useState(displayUrl);
-    useEffect(()=>{
-        setAddress(displayUrl);
-    }, [
-        displayUrl
-    ]);
+    const displayUrl = buildDisplayUrl(domain, previewPath, urlEntryData || {});
     const iframeSrc = (()=>{
         const editorPath = buildEditorUrl(domain, previewPath);
         const url = new URL(editorPath);
@@ -52,15 +49,21 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData })=>{
         const previewTarget = new MessageOrigin(()=>iframe.contentWindow, targetOrigin);
         const messenger = new Messenger(editorOrigin, previewTarget, "wb.editor.*");
         messengerRef.current = messenger;
+        setLoading(true);
+        setTimedOut(false);
+        const timeout = setTimeout(()=>setTimedOut(true), READY_TIMEOUT_MS);
         messenger.on("preview.ready", ()=>{
+            clearTimeout(timeout);
             setReady(true);
             setLoading(false);
+            setTimedOut(false);
             sendEntryData();
         });
         messenger.on("preview.component.register", (manifest)=>{
             presenter.addComponent(manifest);
         });
         return ()=>{
+            clearTimeout(timeout);
             messenger.dispose();
             messengerRef.current = null;
             lastSentDataRef.current = null;
@@ -102,11 +105,11 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData })=>{
         displayUrl,
         entryId
     ]);
-    const copyUrl = useCallback(()=>{
-        navigator.clipboard.writeText(getDraftUrl());
-    }, [
-        getDraftUrl
-    ]);
+    const confirmCopy = useCallback(()=>{
+        showToast({
+            title: "Preview link copied to clipboard!"
+        });
+    }, []);
     const openInNewTab = useCallback(()=>{
         window.open(getDraftUrl(), "_blank");
     }, [
@@ -115,34 +118,51 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData })=>{
     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"
+        className: "flex flex-row items-center gap-sm p-sm bg-neutral-base border-b-sm 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, {
+        className: "relative flex-auto min-w-0 h-[32px]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full absolute -top-px py-xs-plus pl-xl pr-[112px] border-sm text-md truncate cursor-not-allowed rounded-md border-neutral-subtle bg-neutral-disabled text-neutral-disabled"
+    }, /*#__PURE__*/ react.createElement(PreviewDomainMenu, {
+        className: "absolute left-0 top-0"
+    }), displayUrl), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute right-0 top-0 flex"
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Refresh preview"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "md",
+            onClick: reload,
+            variant: "ghost"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Copy preview link"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(CopyButton, {
+            size: "md",
+            value: getDraftUrl(),
+            onCopy: confirmCopy,
+            variant: "ghost"
+        })
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement(Text, {
+            size: "md"
+        }, "Preview entry in a new tab"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+            size: "md",
+            onClick: openInNewTab,
+            variant: "ghost"
+        })
+    }))), /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0"
+    }, /*#__PURE__*/ react.createElement(SegmentedControl, {
         value: viewport,
         onChange: (value)=>setViewport(value),
         items: [
@@ -157,9 +177,25 @@ const PreviewPane = ({ domain, previewPath, entryId, entryData })=>{
                 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, {
+    }))), settingsDomain ? /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        variant: "subtle",
+        className: "rounded-none",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Use Frontend Domain",
+            onClick: onResetDomain
+        })
+    }, "Previewing on your custom domain ", domain, " instead of the Frontend Domain", " ", settingsDomain, ".") : null, loading && timedOut ? /*#__PURE__*/ react.createElement(Alert, {
+        type: "warning",
+        variant: "subtle",
+        className: "rounded-none",
+        actions: /*#__PURE__*/ react.createElement(Alert.Action, {
+            text: "Reload",
+            onClick: reload
+        })
+    }, new URL(iframeSrc).origin, " is not responding to the live preview. Check that the frontend app is running at that address, that it initializes the Webiny SDK in editing mode, and that it allows this admin app as a referrer.") : null, /*#__PURE__*/ react.createElement("div", {
+        className: "relative block box-border h-full w-full overflow-auto fill-grid"
+    }, loading && !timedOut ? /*#__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" : ""}`,