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

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 {};

package/presentation/experiments/ExperimentsManager/components/ExperimentCard.js

@@ -0,0 +1,296 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Button, Text } from "@webiny/admin-ui";
+import { useConfirmationDialog, useSnackbar } from "@webiny/app-admin";
+import { ReactComponent } from "@webiny/icons/play_arrow.svg";
+import { ReactComponent as pause_svg_ReactComponent } from "@webiny/icons/pause.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+const Dot = ({ color })=>/*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: color,
+            flexShrink: 0
+        }
+    });
+const Thumbnail = ({ band })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            border: "1px solid #e5e7eb",
+            borderRadius: 6,
+            overflow: "hidden",
+            background: "#fff"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 18,
+            background: "#000"
+        }
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: "8px 8px 0"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 4,
+            borderRadius: 2,
+            background: "#e5e7eb",
+            width: "70%"
+        }
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 4,
+            borderRadius: 2,
+            background: "#eef0f2",
+            width: "45%",
+            marginTop: 4
+        }
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 14,
+            background: band,
+            marginTop: 8
+        }
+    }));
+const ExperimentCard_ExperimentCard = observer(function({ presenter, card }) {
+    const { experiment, active, buckets, variantCount } = card;
+    const { showSnackbar } = useSnackbar();
+    const { showConfirmation } = useConfirmationDialog({
+        title: "Delete experiment",
+        loading: "Deleting experiment...",
+        message: /*#__PURE__*/ react.createElement(Text, null, "You are about to permanently delete this experiment and all of its variants. This cannot be undone.")
+    });
+    const activate = async ()=>{
+        try {
+            await presenter.activateExperiment(experiment);
+            showSnackbar(`"${experiment.name}" is now active.`);
+        } catch (ex) {
+            showSnackbar(ex.message || "Could not activate the experiment.");
+        }
+    };
+    const deactivate = async ()=>{
+        try {
+            await presenter.deactivateExperiment(experiment);
+            showSnackbar(`"${experiment.name}" was deactivated.`);
+        } catch (ex) {
+            showSnackbar(ex.message || "Could not deactivate the experiment.");
+        }
+    };
+    const remove = ()=>showConfirmation(async ()=>{
+            try {
+                await presenter.deleteExperiment(experiment);
+                showSnackbar(`"${experiment.name}" was deleted.`);
+            } catch (ex) {
+                showSnackbar(ex.message || "Could not delete the experiment.");
+            }
+        });
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            border: active ? "1px solid #b7e4c7" : "1px solid #e5e7eb",
+            background: active ? "#f4fbf6" : "#fff",
+            borderRadius: 12,
+            padding: 16,
+            marginBottom: 16
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: 8
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            minWidth: 0
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: 600,
+            fontSize: 15,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+        }
+    }, experiment.name), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 5,
+            fontSize: 12,
+            fontWeight: 500,
+            color: active ? "#0f9d58" : "#6b7280",
+            background: active ? "transparent" : "#f2f2f2",
+            borderRadius: 6,
+            padding: active ? 0 : "1px 8px",
+            whiteSpace: "nowrap"
+        }
+    }, active ? /*#__PURE__*/ react.createElement(Dot, {
+        color: "#10b981"
+    }) : null, active ? "Active" : "Inactive")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            fontSize: 13,
+            color: "#6b7280",
+            marginTop: 4
+        }
+    }, variantCount, " variant", 1 === variantCount ? "" : "s", " \xb7 splitting traffic")), active ? /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        icon: /*#__PURE__*/ react.createElement(pause_svg_ReactComponent, null),
+        text: "Deactivate",
+        onClick: deactivate
+    }) : /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: activate,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "none",
+            background: "#10b981",
+            color: "#fff",
+            borderRadius: 8,
+            padding: "7px 14px",
+            fontWeight: 600,
+            fontSize: 13,
+            cursor: "pointer",
+            whiteSpace: "nowrap"
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            fill: "currentColor"
+        }
+    }), "Activate")), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(${buckets.length}, 1fr)`,
+            gap: 10,
+            marginTop: 16
+        }
+    }, buckets.map((bucket)=>/*#__PURE__*/ react.createElement("div", {
+            key: bucket.key
+        }, /*#__PURE__*/ react.createElement(Thumbnail, {
+            band: bucket.band
+        }), /*#__PURE__*/ react.createElement("div", {
+            style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 6,
+                marginTop: 8
+            }
+        }, /*#__PURE__*/ react.createElement("span", {
+            style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                minWidth: 0
+            }
+        }, /*#__PURE__*/ react.createElement(Dot, {
+            color: bucket.dot
+        }), /*#__PURE__*/ react.createElement("span", {
+            style: {
+                fontSize: 13,
+                fontWeight: 600,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+            }
+        }, bucket.name)), /*#__PURE__*/ react.createElement("span", {
+            style: {
+                fontSize: 13,
+                color: "#6b7280"
+            }
+        }, bucket.weight, "%"))))), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            height: 8,
+            borderRadius: 4,
+            overflow: "hidden",
+            marginTop: 16,
+            background: "#eef0f2"
+        }
+    }, buckets.map((bucket)=>/*#__PURE__*/ react.createElement("div", {
+            key: bucket.key,
+            style: {
+                width: `${bucket.weight}%`,
+                background: bucket.dot
+            }
+        }))), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: 16,
+            marginTop: 12
+        }
+    }, buckets.map((bucket)=>/*#__PURE__*/ react.createElement("span", {
+            key: bucket.key,
+            style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: 13
+            }
+        }, /*#__PURE__*/ react.createElement(Dot, {
+            color: bucket.dot
+        }), /*#__PURE__*/ react.createElement("span", {
+            style: {
+                color: "#374151"
+            }
+        }, bucket.name), /*#__PURE__*/ react.createElement("span", {
+            style: {
+                color: "#9ca3af"
+            }
+        }, "\xb7"), /*#__PURE__*/ react.createElement("span", {
+            style: {
+                fontWeight: 600
+            }
+        }, bucket.weight, "%")))), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: 16,
+            paddingTop: 14,
+            borderTop: "1px solid #eef0f2"
+        }
+    }, /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+        text: "Edit",
+        onClick: ()=>presenter.startEdit(experiment)
+    }), /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: remove,
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "1px solid #f0d0cb",
+            background: "#fff",
+            color: "#d93025",
+            borderRadius: 8,
+            padding: "7px 14px",
+            fontWeight: 600,
+            fontSize: 13,
+            cursor: "pointer"
+        }
+    }, /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            fill: "currentColor"
+        }
+    }), "Delete")));
+});
+export { ExperimentCard_ExperimentCard as ExperimentCard };
+
+//# sourceMappingURL=ExperimentCard.js.map

package/presentation/experiments/ExperimentsManager/components/ExperimentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentCard.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button, Text } from \"@webiny/admin-ui\";\nimport { useConfirmationDialog, useSnackbar } from \"@webiny/app-admin\";\nimport { ReactComponent as PlayIcon } from \"@webiny/icons/play_arrow.svg\";\nimport { ReactComponent as PauseIcon } from \"@webiny/icons/pause.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport type {\n    ExperimentCardViewModel,\n    IExperimentsManagerPresenter\n} from \"../abstractions/ExperimentsManagerPresenter.js\";\n\ninterface Props {\n    presenter: IExperimentsManagerPresenter;\n    card: ExperimentCardViewModel;\n}\n\nconst Dot = ({ color }: { color: string }) => (\n    <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: color, flexShrink: 0 }} />\n);\n\n/** A single page thumbnail — a black header, a couple of placeholder lines and a coloured band. */\nconst Thumbnail = ({ band }: { band: string }) => (\n    <div\n        style={{\n            border: \"1px solid #e5e7eb\",\n            borderRadius: 6,\n            overflow: \"hidden\",\n            background: \"#fff\"\n        }}\n    >\n        <div style={{ height: 18, background: \"#000\" }} />\n        <div style={{ padding: \"8px 8px 0\" }}>\n            <div style={{ height: 4, borderRadius: 2, background: \"#e5e7eb\", width: \"70%\" }} />\n            <div\n                style={{\n                    height: 4,\n                    borderRadius: 2,\n                    background: \"#eef0f2\",\n                    width: \"45%\",\n                    marginTop: 4\n                }}\n            />\n        </div>\n        <div style={{ height: 14, background: band, marginTop: 8 }} />\n    </div>\n);\n\nexport const ExperimentCard = observer(function ExperimentCard({ presenter, card }: Props) {\n    const { experiment, active, buckets, variantCount } = card;\n    const { showSnackbar } = useSnackbar();\n    const { showConfirmation } = useConfirmationDialog({\n        title: \"Delete experiment\",\n        loading: \"Deleting experiment...\",\n        message: (\n            <Text>\n                You are about to permanently delete this experiment and all of its variants. This\n                cannot be undone.\n            </Text>\n        )\n    });\n\n    const activate = async () => {\n        try {\n            await presenter.activateExperiment(experiment);\n            showSnackbar(`\"${experiment.name}\" is now active.`);\n        } catch (ex: any) {\n            showSnackbar(ex.message || \"Could not activate the experiment.\");\n        }\n    };\n\n    const deactivate = async () => {\n        try {\n            await presenter.deactivateExperiment(experiment);\n            showSnackbar(`\"${experiment.name}\" was deactivated.`);\n        } catch (ex: any) {\n            showSnackbar(ex.message || \"Could not deactivate the experiment.\");\n        }\n    };\n\n    const remove = () =>\n        showConfirmation(async () => {\n            try {\n                await presenter.deleteExperiment(experiment);\n                showSnackbar(`\"${experiment.name}\" was deleted.`);\n            } catch (ex: any) {\n                showSnackbar(ex.message || \"Could not delete the experiment.\");\n            }\n        });\n\n    return (\n        <div\n            style={{\n                border: active ? \"1px solid #b7e4c7\" : \"1px solid #e5e7eb\",\n                background: active ? \"#f4fbf6\" : \"#fff\",\n                borderRadius: 12,\n                padding: 16,\n                marginBottom: 16\n            }}\n        >\n            {/* Header */}\n            <div\n                style={{\n                    display: \"flex\",\n                    alignItems: \"flex-start\",\n                    justifyContent: \"space-between\",\n                    gap: 8\n                }}\n            >\n                <div style={{ minWidth: 0 }}>\n                    <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n                        <span\n                            style={{\n                                fontWeight: 600,\n                                fontSize: 15,\n                                whiteSpace: \"nowrap\",\n                                overflow: \"hidden\",\n                                textOverflow: \"ellipsis\"\n                            }}\n                        >\n                            {experiment.name}\n                        </span>\n                        <span\n                            style={{\n                                display: \"inline-flex\",\n                                alignItems: \"center\",\n                                gap: 5,\n                                fontSize: 12,\n                                fontWeight: 500,\n                                color: active ? \"#0f9d58\" : \"#6b7280\",\n                                background: active ? \"transparent\" : \"#f2f2f2\",\n                                borderRadius: 6,\n                                padding: active ? 0 : \"1px 8px\",\n                                whiteSpace: \"nowrap\"\n                            }}\n                        >\n                            {active ? <Dot color=\"#10b981\" /> : null}\n                            {active ? \"Active\" : \"Inactive\"}\n                        </span>\n                    </div>\n                    <div style={{ fontSize: 13, color: \"#6b7280\", marginTop: 4 }}>\n                        {variantCount} variant{variantCount === 1 ? \"\" : \"s\"} · splitting traffic\n                    </div>\n                </div>\n                {active ? (\n                    <Button\n                        variant=\"secondary\"\n                        icon={<PauseIcon />}\n                        text=\"Deactivate\"\n                        onClick={deactivate}\n                    />\n                ) : (\n                    <button\n                        type=\"button\"\n                        onClick={activate}\n                        style={{\n                            display: \"inline-flex\",\n                            alignItems: \"center\",\n                            gap: 6,\n                            border: \"none\",\n                            background: \"#10b981\",\n                            color: \"#fff\",\n                            borderRadius: 8,\n                            padding: \"7px 14px\",\n                            fontWeight: 600,\n                            fontSize: 13,\n                            cursor: \"pointer\",\n                            whiteSpace: \"nowrap\"\n                        }}\n                    >\n                        <PlayIcon style={{ width: 18, height: 18, fill: \"currentColor\" }} />\n                        Activate\n                    </button>\n                )}\n            </div>\n\n            {/* Thumbnails */}\n            <div\n                style={{\n                    display: \"grid\",\n                    gridTemplateColumns: `repeat(${buckets.length}, 1fr)`,\n                    gap: 10,\n                    marginTop: 16\n                }}\n            >\n                {buckets.map(bucket => (\n                    <div key={bucket.key}>\n                        <Thumbnail band={bucket.band} />\n                        <div\n                            style={{\n                                display: \"flex\",\n                                alignItems: \"center\",\n                                justifyContent: \"space-between\",\n                                gap: 6,\n                                marginTop: 8\n                            }}\n                        >\n                            <span\n                                style={{\n                                    display: \"flex\",\n                                    alignItems: \"center\",\n                                    gap: 6,\n                                    minWidth: 0\n                                }}\n                            >\n                                <Dot color={bucket.dot} />\n                                <span\n                                    style={{\n                                        fontSize: 13,\n                                        fontWeight: 600,\n                                        whiteSpace: \"nowrap\",\n                                        overflow: \"hidden\",\n                                        textOverflow: \"ellipsis\"\n                                    }}\n                                >\n                                    {bucket.name}\n                                </span>\n                            </span>\n                            <span style={{ fontSize: 13, color: \"#6b7280\" }}>{bucket.weight}%</span>\n                        </div>\n                    </div>\n                ))}\n            </div>\n\n            {/* Traffic bar */}\n            <div\n                style={{\n                    display: \"flex\",\n                    height: 8,\n                    borderRadius: 4,\n                    overflow: \"hidden\",\n                    marginTop: 16,\n                    background: \"#eef0f2\"\n                }}\n            >\n                {buckets.map(bucket => (\n                    <div\n                        key={bucket.key}\n                        style={{ width: `${bucket.weight}%`, background: bucket.dot }}\n                    />\n                ))}\n            </div>\n\n            {/* Legend */}\n            <div\n                style={{\n                    display: \"flex\",\n                    flexWrap: \"wrap\",\n                    alignItems: \"center\",\n                    gap: 16,\n                    marginTop: 12\n                }}\n            >\n                {buckets.map(bucket => (\n                    <span\n                        key={bucket.key}\n                        style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 13 }}\n                    >\n                        <Dot color={bucket.dot} />\n                        <span style={{ color: \"#374151\" }}>{bucket.name}</span>\n                        <span style={{ color: \"#9ca3af\" }}>·</span>\n                        <span style={{ fontWeight: 600 }}>{bucket.weight}%</span>\n                    </span>\n                ))}\n            </div>\n\n            {/* Footer */}\n            <div\n                style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"space-between\",\n                    marginTop: 16,\n                    paddingTop: 14,\n                    borderTop: \"1px solid #eef0f2\"\n                }}\n            >\n                <Button\n                    variant=\"secondary\"\n                    icon={<EditIcon />}\n                    text=\"Edit\"\n                    onClick={() => presenter.startEdit(experiment)}\n                />\n                <button\n                    type=\"button\"\n                    onClick={remove}\n                    style={{\n                        display: \"inline-flex\",\n                        alignItems: \"center\",\n                        gap: 6,\n                        border: \"1px solid #f0d0cb\",\n                        background: \"#fff\",\n                        color: \"#d93025\",\n                        borderRadius: 8,\n                        padding: \"7px 14px\",\n                        fontWeight: 600,\n                        fontSize: 13,\n                        cursor: \"pointer\"\n                    }}\n                >\n                    <DeleteIcon style={{ width: 18, height: 18, fill: \"currentColor\" }} />\n                    Delete\n                </button>\n            </div>\n        </div>\n    );\n});\n"],"names":["Dot","color","Thumbnail","band","ExperimentCard","observer","presenter","card","experiment","active","buckets","variantCount","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","Text","activate","ex","deactivate","remove","Button","PauseIcon","PlayIcon","bucket","EditIcon","DeleteIcon"],"mappings":"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"}