@webiny/app-website-builder 6.6.0-alpha.0 → 6.6.0-alpha.1

package/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.js

@@ -0,0 +1,147 @@
+import react, { useState } from "react";
+import { DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as public_svg_ReactComponent } from "@webiny/icons/public.svg";
+import { ReactComponent as check_svg_ReactComponent } from "@webiny/icons/check.svg";
+import { ReactComponent as tune_svg_ReactComponent } from "@webiny/icons/tune.svg";
+const Dot = ({ color })=>/*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: color,
+            flexShrink: 0
+        }
+    });
+const StatusBadge = ({ status })=>{
+    const active = "active" === status;
+    return /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 12,
+            fontWeight: 500,
+            color: active ? "#0f9d58" : "#6b7280",
+            background: active ? "#e6f4ea" : "#f2f2f2",
+            borderRadius: 6,
+            padding: "1px 8px",
+            whiteSpace: "nowrap"
+        }
+    }, active ? "Active" : "Inactive");
+};
+const Row = ({ title, subtitle, right, selected })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column"
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: subtitle ? 600 : 400
+        }
+    }, title), subtitle ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontSize: 12,
+            color: "#6b7280"
+        }
+    }, subtitle) : null), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, right, selected ? /*#__PURE__*/ react.createElement(check_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            color: "#e2572a"
+        }
+    }) : null));
+const ExperimentsSwitcher = ({ experiments, selectedId, onSelect, onManage })=>{
+    const [open, setOpen] = useState(false);
+    const selected = experiments.find((e)=>e.id === selectedId) ?? null;
+    const label = selected ? selected.name : "Experiments";
+    const trigger = /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            border: "1px solid #f2c9ba",
+            color: "#e2572a",
+            background: "#fff",
+            borderRadius: 8,
+            padding: "6px 12px",
+            fontWeight: 600,
+            cursor: "pointer"
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            fill: "currentColor"
+        }
+    }), label, /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            fill: "currentColor"
+        }
+    }));
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        open: open,
+        onOpenChange: setOpen,
+        trigger: trigger,
+        style: {
+            minWidth: 320
+        }
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Now viewing"
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(public_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        text: /*#__PURE__*/ react.createElement(Row, {
+            title: "Original page",
+            subtitle: "No experiment applied",
+            selected: null === selectedId
+        }),
+        onClick: ()=>onSelect(null)
+    }), /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Experiments"
+    }), experiments.map((experiment)=>/*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            key: experiment.id,
+            icon: /*#__PURE__*/ react.createElement(Dot, {
+                color: "active" === experiment.status ? "#10b981" : "#9ca3af"
+            }),
+            text: /*#__PURE__*/ react.createElement(Row, {
+                title: experiment.name,
+                right: /*#__PURE__*/ react.createElement(StatusBadge, {
+                    status: experiment.status
+                }),
+                selected: selectedId === experiment.id
+            }),
+            onClick: ()=>onSelect(experiment.id)
+        })), /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+        icon: /*#__PURE__*/ react.createElement(tune_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        text: "Manage experiments…",
+        onClick: onManage
+    }));
+};
+export { ExperimentsSwitcher };
+
+//# sourceMappingURL=ExperimentsSwitcher.js.map

package/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/components/ExperimentsSwitcher.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as ChevronDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/public.svg\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ReactComponent as TuneIcon } from \"@webiny/icons/tune.svg\";\n\nexport interface ExperimentItem {\n    id: string;\n    name: string;\n    status: \"active\" | \"inactive\";\n}\n\ninterface Props {\n    experiments: ExperimentItem[];\n    selectedId: string | null;\n    onSelect: (id: string | null) => void;\n    onManage: () => void;\n}\n\nconst Dot = ({ color }: { color: string }) => (\n    <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: color, flexShrink: 0 }} />\n);\n\nconst StatusBadge = ({ status }: { status: ExperimentItem[\"status\"] }) => {\n    const active = status === \"active\";\n    return (\n        <span\n            style={{\n                fontSize: 12,\n                fontWeight: 500,\n                color: active ? \"#0f9d58\" : \"#6b7280\",\n                background: active ? \"#e6f4ea\" : \"#f2f2f2\",\n                borderRadius: 6,\n                padding: \"1px 8px\",\n                whiteSpace: \"nowrap\"\n            }}\n        >\n            {active ? \"Active\" : \"Inactive\"}\n        </span>\n    );\n};\n\ninterface RowProps {\n    title: string;\n    subtitle?: string;\n    right?: React.ReactNode;\n    selected: boolean;\n}\n\nconst Row = ({ title, subtitle, right, selected }: RowProps) => (\n    <div\n        style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            gap: 8\n        }}\n    >\n        <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n            <span style={{ fontWeight: subtitle ? 600 : 400 }}>{title}</span>\n            {subtitle ? <span style={{ fontSize: 12, color: \"#6b7280\" }}>{subtitle}</span> : null}\n        </div>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n            {right}\n            {selected ? <CheckIcon style={{ width: 16, height: 16, color: \"#e2572a\" }} /> : null}\n        </div>\n    </div>\n);\n\nexport const ExperimentsSwitcher = ({ experiments, selectedId, onSelect, onManage }: Props) => {\n    const [open, setOpen] = useState(false);\n    const selected = experiments.find(e => e.id === selectedId) ?? null;\n    const label = selected ? selected.name : \"Experiments\";\n\n    const trigger = (\n        <button\n            type=\"button\"\n            style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: 8,\n                border: \"1px solid #f2c9ba\",\n                color: \"#e2572a\",\n                background: \"#fff\",\n                borderRadius: 8,\n                padding: \"6px 12px\",\n                fontWeight: 600,\n                cursor: \"pointer\"\n            }}\n        >\n            <ScienceIcon style={{ width: 18, height: 18, fill: \"currentColor\" }} />\n            {label}\n            <ChevronDownIcon style={{ width: 16, height: 16, fill: \"currentColor\" }} />\n        </button>\n    );\n\n    return (\n        <DropdownMenu\n            open={open}\n            onOpenChange={setOpen}\n            trigger={trigger}\n            style={{ minWidth: 320 }}\n        >\n            <DropdownMenu.Label text=\"Now viewing\" />\n            <DropdownMenu.Item\n                icon={<GlobeIcon style={{ width: 18, height: 18 }} />}\n                text={\n                    <Row\n                        title=\"Original page\"\n                        subtitle=\"No experiment applied\"\n                        selected={selectedId === null}\n                    />\n                }\n                onClick={() => onSelect(null)}\n            />\n            <DropdownMenu.Separator />\n            <DropdownMenu.Label text=\"Experiments\" />\n            {experiments.map(experiment => (\n                <DropdownMenu.Item\n                    key={experiment.id}\n                    icon={<Dot color={experiment.status === \"active\" ? \"#10b981\" : \"#9ca3af\"} />}\n                    text={\n                        <Row\n                            title={experiment.name}\n                            right={<StatusBadge status={experiment.status} />}\n                            selected={selectedId === experiment.id}\n                        />\n                    }\n                    onClick={() => onSelect(experiment.id)}\n                />\n            ))}\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item\n                icon={<TuneIcon style={{ width: 18, height: 18 }} />}\n                text=\"Manage experiments…\"\n                onClick={onManage}\n            />\n        </DropdownMenu>\n    );\n};\n"],"names":["Dot","color","StatusBadge","status","active","Row","title","subtitle","right","selected","CheckIcon","ExperimentsSwitcher","experiments","selectedId","onSelect","onManage","open","setOpen","useState","e","label","trigger","ScienceIcon","ChevronDownIcon","DropdownMenu","GlobeIcon","experiment","TuneIcon"],"mappings":"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"}

package/presentation/experiments/ExperimentsEditor/feature.d.ts

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

package/presentation/experiments/ExperimentsEditor/feature.js

@@ -0,0 +1,21 @@
+import { createFeature } from "@webiny/feature/admin";
+import { ExperimentsFeature } from "../../../features/experiments/index.js";
+import { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+import { ExperimentsEditorPresenter as external_ExperimentsEditorPresenter_js_ExperimentsEditorPresenter } from "./ExperimentsEditorPresenter.js";
+import { ExperimentsEditorDataSource } from "./ExperimentsEditorDataSource.js";
+const ExperimentsEditorPresenterFeature = createFeature({
+    name: "WebsiteBuilder/ExperimentsEditorPresenter",
+    register (container) {
+        ExperimentsFeature.register(container);
+        container.register(ExperimentsEditorDataSource).inSingletonScope();
+        container.register(external_ExperimentsEditorPresenter_js_ExperimentsEditorPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(ExperimentsEditorPresenter)
+        };
+    }
+});
+export { ExperimentsEditorPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/experiments/ExperimentsEditor/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/feature.js","sources":["../../../../src/presentation/experiments/ExperimentsEditor/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { ExperimentsFeature } from \"~/features/experiments/index.js\";\nimport { ExperimentsEditorPresenter as PresenterAbstraction } from \"./abstractions/ExperimentsEditorPresenter.js\";\nimport { ExperimentsEditorPresenter } from \"./ExperimentsEditorPresenter.js\";\nimport { ExperimentsEditorDataSource } from \"./ExperimentsEditorDataSource.js\";\n\nexport const ExperimentsEditorPresenterFeature = createFeature({\n    name: \"WebsiteBuilder/ExperimentsEditorPresenter\",\n    register(container) {\n        ExperimentsFeature.register(container);\n        container.register(ExperimentsEditorDataSource).inSingletonScope();\n        container.register(ExperimentsEditorPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return { presenter: container.resolve(PresenterAbstraction) };\n    }\n});\n"],"names":["ExperimentsEditorPresenterFeature","createFeature","container","ExperimentsFeature","ExperimentsEditorDataSource","ExperimentsEditorPresenter","PresenterAbstraction"],"mappings":";;;;;AAMO,MAAMA,oCAAoCC,cAAc;IAC3D,MAAM;IACN,UAASC,SAAS;QACdC,mBAAmB,QAAQ,CAACD;QAC5BA,UAAU,QAAQ,CAACE,6BAA6B,gBAAgB;QAChEF,UAAU,QAAQ,CAACG,mEAA4B,gBAAgB;IACnE;IACA,SAAQH,SAAS;QACb,OAAO;YAAE,WAAWA,UAAU,OAAO,CAACI;QAAsB;IAChE;AACJ"}

package/presentation/experiments/ExperimentsEditor/index.d.ts

@@ -0,0 +1,4 @@
+export { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+export type { IExperimentsEditorPresenter, IExperimentsEditorViewModel, VariantOption } from "./abstractions/ExperimentsEditorPresenter.js";
+export { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+export { ExperimentsEditorPresenterFeature } from "./feature.js";

package/presentation/experiments/ExperimentsEditor/index.js

@@ -0,0 +1,3 @@
+export { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+export { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+export { ExperimentsEditorPresenterFeature } from "./feature.js";

package/presentation/experiments/ExperimentsManager/ExperimentsManagerPresenter.d.ts

@@ -0,0 +1,39 @@
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import type { ExperimentDto } from "../../../features/experiments/index.js";
+import type { NewExperimentPayload } from "../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+import { ExperimentsEditorPresenter } from "../ExperimentsEditor/index.js";
+import { type IExperimentsManagerPresenter, type IExperimentsManagerViewModel } from "./abstractions/ExperimentsManagerPresenter.js";
+/**
+ * Owns the manage drawer's view state (open/view/editTarget) and the per-experiment variant
+ * summaries the cards render. All domain actions are delegated to the editor hub presenter, which
+ * remains the single source of truth for the page's experiments and their lifecycle.
+ */
+declare class ExperimentsManagerPresenterImpl implements IExperimentsManagerPresenter {
+    private readonly hub;
+    private readonly gateway;
+    private view;
+    private editInitial;
+    private variantsByExperiment;
+    private disposers;
+    constructor(hub: ExperimentsEditorPresenter.Interface, gateway: ExperimentsGateway.Interface);
+    private get experiments();
+    private get cards();
+    get vm(): IExperimentsManagerViewModel;
+    init(): void;
+    dispose(): void;
+    /** Load the variants for every listed experiment so the cards render as pure observers. */
+    private loadCardVariants;
+    showList(): void;
+    showCreate(): void;
+    startEdit(experiment: ExperimentDto): Promise<void>;
+    close(): void;
+    createExperiment(payload: NewExperimentPayload): Promise<void>;
+    updateExperiment(payload: NewExperimentPayload): Promise<void>;
+    activateExperiment(experiment: ExperimentDto): Promise<void>;
+    deactivateExperiment(experiment: ExperimentDto): Promise<void>;
+    deleteExperiment(experiment: ExperimentDto): Promise<void>;
+}
+export declare const ExperimentsManagerPresenter: typeof ExperimentsManagerPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IExperimentsManagerPresenter>;
+};
+export {};

package/presentation/experiments/ExperimentsManager/ExperimentsManagerPresenter.js

@@ -0,0 +1,219 @@
+import { computed, makeAutoObservable, reaction, runInAction } from "mobx";
+import slugify from "slugify";
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import { bucketColor } from "../shared/variantColors.js";
+import { ExperimentsEditorPresenter } from "../ExperimentsEditor/index.js";
+import { ExperimentsManagerPresenter } from "./abstractions/ExperimentsManagerPresenter.js";
+const BAND_COLORS = [
+    "#4f46e5",
+    "#0f9d58",
+    "#c2410c",
+    "#1f2937",
+    "#0891b2"
+];
+const toKey = (value)=>slugify(value, {
+        lower: true,
+        strict: true
+    });
+class ExperimentsManagerPresenterImpl {
+    constructor(hub, gateway){
+        this.hub = hub;
+        this.gateway = gateway;
+        this.view = "list";
+        this.editInitial = null;
+        this.variantsByExperiment = {};
+        this.disposers = [];
+        makeAutoObservable(this, {
+            vm: computed,
+            hub: false,
+            gateway: false
+        });
+    }
+    get experiments() {
+        return this.hub.vm.experiments;
+    }
+    get cards() {
+        return this.experiments.map((experiment)=>{
+            const variants = this.variantsByExperiment[experiment.id] ?? [];
+            const active = "running" === experiment.status;
+            const split = experiment.trafficSplit ?? {
+                control: 0,
+                variants: {}
+            };
+            const buckets = [
+                {
+                    key: "control",
+                    name: "Control",
+                    weight: split.control ?? 0,
+                    dot: bucketColor(true, 0),
+                    band: BAND_COLORS[0],
+                    isControl: true
+                },
+                ...variants.map((variant, index)=>({
+                        key: variant.entryId,
+                        name: variant.name,
+                        weight: split.variants?.[variant.entryId] ?? 0,
+                        dot: bucketColor(false, index),
+                        band: BAND_COLORS[(index + 1) % BAND_COLORS.length],
+                        isControl: false
+                    }))
+            ];
+            return {
+                experiment,
+                active,
+                buckets,
+                variantCount: Object.keys(split.variants ?? {}).length
+            };
+        });
+    }
+    get vm() {
+        return {
+            open: this.hub.vm.drawerOpen,
+            view: this.view,
+            editTarget: this.hub.vm.editTarget,
+            editInitial: this.editInitial,
+            experiments: this.experiments,
+            pageEntryId: this.hub.vm.pageEntryId,
+            baselineRevisionId: this.hub.vm.baselineRevisionId,
+            cards: this.cards
+        };
+    }
+    init() {
+        this.disposers.push(reaction(()=>({
+                open: this.hub.vm.drawerOpen,
+                editTarget: this.hub.vm.editTarget
+            }), ({ open, editTarget })=>{
+            if (!open) return;
+            if (editTarget) this.startEdit(editTarget);
+            else runInAction(()=>{
+                this.view = "list";
+                this.editInitial = null;
+            });
+        }, {
+            fireImmediately: true
+        }));
+        this.disposers.push(reaction(()=>this.experiments.map((experiment)=>experiment.id), ()=>this.loadCardVariants(), {
+            fireImmediately: true
+        }));
+    }
+    dispose() {
+        this.disposers.forEach((dispose)=>dispose());
+        this.disposers = [];
+    }
+    loadCardVariants() {
+        for (const experiment of this.experiments)this.gateway.listVariants(experiment.id).then((list)=>{
+            runInAction(()=>{
+                this.variantsByExperiment = {
+                    ...this.variantsByExperiment,
+                    [experiment.id]: list
+                };
+            });
+        }).catch(()=>{
+            runInAction(()=>{
+                this.variantsByExperiment = {
+                    ...this.variantsByExperiment,
+                    [experiment.id]: []
+                };
+            });
+        });
+    }
+    showList() {
+        this.view = "list";
+        this.editInitial = null;
+    }
+    showCreate() {
+        this.view = "create";
+    }
+    async startEdit(experiment) {
+        const variants = await this.gateway.listVariants(experiment.id);
+        const split = experiment.trafficSplit ?? {
+            control: 100,
+            variants: {}
+        };
+        const buckets = [
+            {
+                id: "control",
+                isControl: true,
+                name: "Control",
+                key: "control",
+                keyEdited: true,
+                description: "",
+                weight: split.control ?? 0
+            },
+            ...variants.map((variant)=>({
+                    id: variant.entryId,
+                    isControl: false,
+                    name: variant.name,
+                    key: toKey(variant.name),
+                    keyEdited: true,
+                    description: "",
+                    weight: split.variants?.[variant.entryId] ?? 0,
+                    revisionId: variant.id
+                }))
+        ];
+        runInAction(()=>{
+            this.editInitial = {
+                name: experiment.name,
+                key: experiment.analytics?.experimentKey ?? "",
+                buckets
+            };
+            this.view = "edit";
+        });
+    }
+    close() {
+        this.hub.closeDrawer();
+    }
+    async createExperiment(payload) {
+        await this.hub.createExperiment(payload);
+        await this.hub.reload();
+        runInAction(()=>{
+            this.view = "list";
+        });
+    }
+    async updateExperiment(payload) {
+        const editTarget = this.hub.vm.editTarget;
+        if (!editTarget) return;
+        const variantSplit = {};
+        for (const variant of payload.variants)variantSplit[variant.id] = variant.weight;
+        await this.hub.updateExperiment(editTarget.id, {
+            name: payload.name,
+            analytics: {
+                provider: "posthog",
+                experimentKey: payload.key
+            },
+            trafficSplit: {
+                control: payload.control.weight,
+                variants: variantSplit
+            }
+        });
+        for (const variant of payload.variants)if (variant.revisionId) await this.hub.saveVariant(variant.revisionId, {
+            name: variant.name
+        });
+        await this.hub.reload();
+        runInAction(()=>{
+            this.view = "list";
+        });
+    }
+    async activateExperiment(experiment) {
+        await this.hub.activate(experiment.id);
+        await this.hub.reload();
+    }
+    async deactivateExperiment(experiment) {
+        await this.hub.deactivate(experiment.id);
+        await this.hub.reload();
+    }
+    async deleteExperiment(experiment) {
+        await this.hub.deleteExperiment(experiment.id);
+        await this.hub.reload();
+    }
+}
+const ExperimentsManagerPresenter_ExperimentsManagerPresenter = ExperimentsManagerPresenter.createImplementation({
+    implementation: ExperimentsManagerPresenterImpl,
+    dependencies: [
+        ExperimentsEditorPresenter,
+        ExperimentsGateway
+    ]
+});
+export { ExperimentsManagerPresenter_ExperimentsManagerPresenter as ExperimentsManagerPresenter };
+
+//# sourceMappingURL=ExperimentsManagerPresenter.js.map

package/presentation/experiments/ExperimentsManager/ExperimentsManagerPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/ExperimentsManagerPresenter.js","sources":["../../../../src/presentation/experiments/ExperimentsManager/ExperimentsManagerPresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed, reaction, runInAction, type IReactionDisposer } from \"mobx\";\nimport slugify from \"slugify\";\nimport { ExperimentsGateway } from \"~/features/experiments/index.js\";\nimport type { ExperimentDto, VariantDto } from \"~/features/experiments/index.js\";\nimport type {\n    ExperimentFormInitial,\n    NewExperimentPayload\n} from \"../ExperimentForm/abstractions/ExperimentFormPresenter.js\";\nimport { bucketColor } from \"../shared/variantColors.js\";\nimport { ExperimentsEditorPresenter } from \"../ExperimentsEditor/index.js\";\nimport {\n    ExperimentsManagerPresenter as Abstraction,\n    type ExperimentCardViewModel,\n    type ExperimentsManagerView,\n    type IExperimentsManagerPresenter,\n    type IExperimentsManagerViewModel\n} from \"./abstractions/ExperimentsManagerPresenter.js\";\n\n// Decorative \"hero band\" colours for the mini page previews (unrelated to bucket dot colours).\nconst BAND_COLORS = [\"#4f46e5\", \"#0f9d58\", \"#c2410c\", \"#1f2937\", \"#0891b2\"];\n\nconst toKey = (value: string): string => slugify(value, { lower: true, strict: true });\n\n/**\n * Owns the manage drawer's view state (open/view/editTarget) and the per-experiment variant\n * summaries the cards render. All domain actions are delegated to the editor hub presenter, which\n * remains the single source of truth for the page's experiments and their lifecycle.\n */\nclass ExperimentsManagerPresenterImpl implements IExperimentsManagerPresenter {\n    private view: ExperimentsManagerView = \"list\";\n    private editInitial: ExperimentFormInitial | null = null;\n    // Variants keyed by experiment id, loaded for the listed experiments so cards need no fetching.\n    private variantsByExperiment: Record<string, VariantDto[]> = {};\n    private disposers: IReactionDisposer[] = [];\n\n    constructor(\n        private readonly hub: ExperimentsEditorPresenter.Interface,\n        // Read-only variant listing for card summaries and the edit form; all mutations go via the hub.\n        private readonly gateway: ExperimentsGateway.Interface\n    ) {\n        makeAutoObservable<this, \"hub\" | \"gateway\">(this, {\n            vm: computed,\n            hub: false,\n            gateway: false\n        });\n    }\n\n    private get experiments(): ExperimentDto[] {\n        return this.hub.vm.experiments;\n    }\n\n    private get cards(): ExperimentCardViewModel[] {\n        return this.experiments.map(experiment => {\n            const variants = this.variantsByExperiment[experiment.id] ?? [];\n            const active = experiment.status === \"running\";\n            const split = experiment.trafficSplit ?? { control: 0, variants: {} };\n\n            const buckets = [\n                {\n                    key: \"control\",\n                    name: \"Control\",\n                    weight: split.control ?? 0,\n                    dot: bucketColor(true, 0),\n                    band: BAND_COLORS[0],\n                    isControl: true\n                },\n                ...variants.map((variant, index) => ({\n                    key: variant.entryId,\n                    name: variant.name,\n                    weight: split.variants?.[variant.entryId] ?? 0,\n                    dot: bucketColor(false, index),\n                    band: BAND_COLORS[(index + 1) % BAND_COLORS.length],\n                    isControl: false\n                }))\n            ];\n\n            return {\n                experiment,\n                active,\n                buckets,\n                variantCount: Object.keys(split.variants ?? {}).length\n            };\n        });\n    }\n\n    get vm(): IExperimentsManagerViewModel {\n        return {\n            open: this.hub.vm.drawerOpen,\n            view: this.view,\n            editTarget: this.hub.vm.editTarget,\n            editInitial: this.editInitial,\n            experiments: this.experiments,\n            pageEntryId: this.hub.vm.pageEntryId,\n            baselineRevisionId: this.hub.vm.baselineRevisionId,\n            cards: this.cards\n        };\n    }\n\n    init(): void {\n        // Reset the drawer whenever it opens: jump straight to editing when asked, otherwise the\n        // list. Mirrors the old drawer's open effect, now reading the hub's drawer state.\n        this.disposers.push(\n            reaction(\n                () => ({ open: this.hub.vm.drawerOpen, editTarget: this.hub.vm.editTarget }),\n                ({ open, editTarget }) => {\n                    if (!open) {\n                        return;\n                    }\n                    if (editTarget) {\n                        this.startEdit(editTarget);\n                    } else {\n                        runInAction(() => {\n                            this.view = \"list\";\n                            this.editInitial = null;\n                        });\n                    }\n                },\n                { fireImmediately: true }\n            )\n        );\n\n        // Load per-experiment variant summaries for the cards whenever the experiment set changes.\n        this.disposers.push(\n            reaction(\n                () => this.experiments.map(experiment => experiment.id),\n                () => this.loadCardVariants(),\n                { fireImmediately: true }\n            )\n        );\n    }\n\n    dispose(): void {\n        this.disposers.forEach(dispose => dispose());\n        this.disposers = [];\n    }\n\n    /** Load the variants for every listed experiment so the cards render as pure observers. */\n    private loadCardVariants(): void {\n        for (const experiment of this.experiments) {\n            this.gateway\n                .listVariants(experiment.id)\n                .then(list => {\n                    runInAction(() => {\n                        this.variantsByExperiment = {\n                            ...this.variantsByExperiment,\n                            [experiment.id]: list\n                        };\n                    });\n                })\n                .catch(() => {\n                    runInAction(() => {\n                        this.variantsByExperiment = {\n                            ...this.variantsByExperiment,\n                            [experiment.id]: []\n                        };\n                    });\n                });\n        }\n    }\n\n    showList(): void {\n        this.view = \"list\";\n        this.editInitial = null;\n    }\n\n    showCreate(): void {\n        this.view = \"create\";\n    }\n\n    async startEdit(experiment: ExperimentDto): Promise<void> {\n        const variants = await this.gateway.listVariants(experiment.id);\n        const split = experiment.trafficSplit ?? { control: 100, variants: {} };\n        const buckets = [\n            {\n                id: \"control\",\n                isControl: true,\n                name: \"Control\",\n                key: \"control\",\n                keyEdited: true,\n                description: \"\",\n                weight: split.control ?? 0\n            },\n            ...variants.map(variant => ({\n                id: variant.entryId,\n                isControl: false,\n                name: variant.name,\n                key: toKey(variant.name),\n                keyEdited: true,\n                description: \"\",\n                weight: split.variants?.[variant.entryId] ?? 0,\n                revisionId: variant.id\n            }))\n        ];\n        runInAction(() => {\n            this.editInitial = {\n                name: experiment.name,\n                key: (experiment.analytics?.experimentKey as string | undefined) ?? \"\",\n                buckets\n            };\n            this.view = \"edit\";\n        });\n    }\n\n    close(): void {\n        this.hub.closeDrawer();\n    }\n\n    async createExperiment(payload: NewExperimentPayload): Promise<void> {\n        await this.hub.createExperiment(payload);\n        await this.hub.reload();\n        runInAction(() => {\n            this.view = \"list\";\n        });\n    }\n\n    async updateExperiment(payload: NewExperimentPayload): Promise<void> {\n        const editTarget = this.hub.vm.editTarget;\n        if (!editTarget) {\n            return;\n        }\n        const variantSplit: Record<string, number> = {};\n        for (const variant of payload.variants) {\n            variantSplit[variant.id] = variant.weight;\n        }\n        await this.hub.updateExperiment(editTarget.id, {\n            name: payload.name,\n            analytics: { provider: \"posthog\", experimentKey: payload.key },\n            trafficSplit: { control: payload.control.weight, variants: variantSplit }\n        });\n        for (const variant of payload.variants) {\n            if (variant.revisionId) {\n                await this.hub.saveVariant(variant.revisionId, { name: variant.name });\n            }\n        }\n        await this.hub.reload();\n        runInAction(() => {\n            this.view = \"list\";\n        });\n    }\n\n    async activateExperiment(experiment: ExperimentDto): Promise<void> {\n        await this.hub.activate(experiment.id);\n        await this.hub.reload();\n    }\n\n    async deactivateExperiment(experiment: ExperimentDto): Promise<void> {\n        await this.hub.deactivate(experiment.id);\n        await this.hub.reload();\n    }\n\n    async deleteExperiment(experiment: ExperimentDto): Promise<void> {\n        await this.hub.deleteExperiment(experiment.id);\n        await this.hub.reload();\n    }\n}\n\nexport const ExperimentsManagerPresenter = Abstraction.createImplementation({\n    implementation: ExperimentsManagerPresenterImpl,\n    dependencies: [ExperimentsEditorPresenter, ExperimentsGateway]\n});\n"],"names":["BAND_COLORS","toKey","value","slugify","ExperimentsManagerPresenterImpl","hub","gateway","makeAutoObservable","computed","experiment","variants","active","split","buckets","bucketColor","variant","index","Object","reaction","open","editTarget","runInAction","dispose","list","payload","variantSplit","ExperimentsManagerPresenter","Abstraction","ExperimentsEditorPresenter","ExperimentsGateway"],"mappings":"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"}

package/presentation/experiments/ExperimentsManager/abstractions/ExperimentsManagerPresenter.d.ts

@@ -0,0 +1,52 @@
+import type { ExperimentDto } from "../../../../features/experiments/index.js";
+import type { ExperimentFormInitial, NewExperimentPayload } from "../../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+/** Which view the drawer is currently showing. */
+export type ExperimentsManagerView = "list" | "create" | "edit";
+/** A single bucket (control or variant) summarised for a card's thumbnails/traffic bar/legend. */
+export interface ExperimentCardBucket {
+    key: string;
+    name: string;
+    weight: number;
+    dot: string;
+    band: string;
+    isControl: boolean;
+}
+/** Per-experiment summary used to render a card without any per-card data loading. */
+export interface ExperimentCardViewModel {
+    experiment: ExperimentDto;
+    active: boolean;
+    buckets: ExperimentCardBucket[];
+    variantCount: number;
+}
+export interface IExperimentsManagerViewModel {
+    open: boolean;
+    view: ExperimentsManagerView;
+    editTarget: ExperimentDto | null;
+    editInitial: ExperimentFormInitial | null;
+    experiments: ExperimentDto[];
+    pageEntryId: string;
+    baselineRevisionId: string;
+    cards: ExperimentCardViewModel[];
+}
+export interface IExperimentsManagerPresenter {
+    readonly vm: IExperimentsManagerViewModel;
+    init(): void;
+    dispose(): void;
+    showList(): void;
+    showCreate(): void;
+    startEdit(experiment: ExperimentDto): Promise<void>;
+    close(): void;
+    createExperiment(payload: NewExperimentPayload): Promise<void>;
+    updateExperiment(payload: NewExperimentPayload): Promise<void>;
+    activateExperiment(experiment: ExperimentDto): Promise<void>;
+    deactivateExperiment(experiment: ExperimentDto): Promise<void>;
+    deleteExperiment(experiment: ExperimentDto): Promise<void>;
+}
+export declare const ExperimentsManagerPresenter: import("@webiny/di").Abstraction<IExperimentsManagerPresenter>;
+export declare namespace ExperimentsManagerPresenter {
+    type Interface = IExperimentsManagerPresenter;
+    type ViewModel = IExperimentsManagerViewModel;
+    type View = ExperimentsManagerView;
+    type Card = ExperimentCardViewModel;
+    type CardBucket = ExperimentCardBucket;
+}

package/presentation/experiments/ExperimentsManager/abstractions/ExperimentsManagerPresenter.js

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

package/presentation/experiments/ExperimentsManager/abstractions/ExperimentsManagerPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/abstractions/ExperimentsManagerPresenter.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/abstractions/ExperimentsManagerPresenter.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { ExperimentDto } from \"~/features/experiments/index.js\";\nimport type {\n    ExperimentFormInitial,\n    NewExperimentPayload\n} from \"../../ExperimentForm/abstractions/ExperimentFormPresenter.js\";\n\n/** Which view the drawer is currently showing. */\nexport type ExperimentsManagerView = \"list\" | \"create\" | \"edit\";\n\n/** A single bucket (control or variant) summarised for a card's thumbnails/traffic bar/legend. */\nexport interface ExperimentCardBucket {\n    key: string;\n    name: string;\n    weight: number;\n    dot: string;\n    band: string;\n    isControl: boolean;\n}\n\n/** Per-experiment summary used to render a card without any per-card data loading. */\nexport interface ExperimentCardViewModel {\n    experiment: ExperimentDto;\n    active: boolean;\n    buckets: ExperimentCardBucket[];\n    variantCount: number;\n}\n\nexport interface IExperimentsManagerViewModel {\n    // Drawer visibility (driven by the hub presenter's manage/edit entry points).\n    open: boolean;\n    // Which sub-view the drawer is showing.\n    view: ExperimentsManagerView;\n    // The experiment being edited (null in list/create views).\n    editTarget: ExperimentDto | null;\n    // Initial form values for the edit view (null until loaded).\n    editInitial: ExperimentFormInitial | null;\n    // The page's experiments (mirrored from the hub presenter).\n    experiments: ExperimentDto[];\n    pageEntryId: string;\n    baselineRevisionId: string;\n    // Card summaries (variant thumbnails/traffic/legend), one per listed experiment.\n    cards: ExperimentCardViewModel[];\n}\n\nexport interface IExperimentsManagerPresenter {\n    readonly vm: IExperimentsManagerViewModel;\n    init(): void;\n    dispose(): void;\n    showList(): void;\n    showCreate(): void;\n    startEdit(experiment: ExperimentDto): Promise<void>;\n    close(): void;\n    createExperiment(payload: NewExperimentPayload): Promise<void>;\n    updateExperiment(payload: NewExperimentPayload): Promise<void>;\n    activateExperiment(experiment: ExperimentDto): Promise<void>;\n    deactivateExperiment(experiment: ExperimentDto): Promise<void>;\n    deleteExperiment(experiment: ExperimentDto): Promise<void>;\n}\n\nexport const ExperimentsManagerPresenter = createAbstraction<IExperimentsManagerPresenter>(\n    \"WebsiteBuilder/ExperimentsManager/Presenter\"\n);\n\nexport namespace ExperimentsManagerPresenter {\n    export type Interface = IExperimentsManagerPresenter;\n    export type ViewModel = IExperimentsManagerViewModel;\n    export type View = ExperimentsManagerView;\n    export type Card = ExperimentCardViewModel;\n    export type CardBucket = ExperimentCardBucket;\n}\n"],"names":["ExperimentsManagerPresenter","createAbstraction"],"mappings":";AA4DO,MAAMA,8BAA8BC,kBACvC"}

package/presentation/experiments/ExperimentsManager/components/ExperimentCard.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ExperimentCardViewModel, IExperimentsManagerPresenter } from "../abstractions/ExperimentsManagerPresenter.js";
+interface Props {
+    presenter: IExperimentsManagerPresenter;
+    card: ExperimentCardViewModel;
+}
+export declare const ExperimentCard: (({ presenter, card }: Props) => React.JSX.Element) & React.NamedExoticComponent<Props> & {
+    readonly type: ({ presenter, card }: Props) => React.JSX.Element;
+};
+export {};