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

package/presentation/experiments/ExperimentsEditor/ExperimentsEditorPresenter.js

@@ -0,0 +1,224 @@
+import { computed, makeAutoObservable, runInAction } from "mobx";
+import { ExperimentsGateway } from "../../../features/experiments/index.js";
+import { ExperimentsEditorPresenter } from "./abstractions/ExperimentsEditorPresenter.js";
+import { ExperimentsEditorDataSource } from "./abstractions/ExperimentsEditorDataSource.js";
+import { bucketColor } from "../shared/variantColors.js";
+class ExperimentsEditorPresenterImpl {
+    constructor(gateway, dataSource){
+        this.gateway = gateway;
+        this.dataSource = dataSource;
+        this.baselineRevisionId = "";
+        this.pageEntryId = "";
+        this.experiments = [];
+        this.selectedExperimentId = null;
+        this.selectedVariantId = null;
+        this.variants = [];
+        this.paused = false;
+        this.drawerOpen = false;
+        this.editTarget = null;
+        this.loadToken = 0;
+        makeAutoObservable(this, {
+            vm: computed
+        });
+    }
+    get selectedExperiment() {
+        return this.experiments.find((experiment)=>experiment.id === this.selectedExperimentId) ?? null;
+    }
+    get selectedVariant() {
+        return this.variants.find((variant)=>variant.entryId === this.selectedVariantId) ?? null;
+    }
+    get variantOptions() {
+        const split = this.selectedExperiment?.trafficSplit ?? {
+            control: 0,
+            variants: {}
+        };
+        return [
+            {
+                id: null,
+                name: "Control",
+                weight: split.control ?? 0,
+                isControl: true,
+                color: bucketColor(true, 0)
+            },
+            ...this.variants.map((variant, index)=>({
+                    id: variant.entryId,
+                    name: variant.name,
+                    weight: split.variants?.[variant.entryId] ?? 0,
+                    isControl: false,
+                    color: bucketColor(false, index)
+                }))
+        ];
+    }
+    get currentBucket() {
+        const options = this.variantOptions;
+        return options.find((option)=>option.id === this.selectedVariantId) ?? options[0] ?? null;
+    }
+    get runningExperiment() {
+        return this.experiments.find((experiment)=>"running" === experiment.status) ?? null;
+    }
+    get switcherItems() {
+        return this.experiments.map((experiment)=>({
+                id: experiment.id,
+                name: experiment.name,
+                status: "running" === experiment.status ? "active" : "inactive"
+            }));
+    }
+    get vm() {
+        return {
+            baselineRevisionId: this.baselineRevisionId,
+            pageEntryId: this.pageEntryId,
+            experiments: this.experiments,
+            selectedExperimentId: this.selectedExperimentId,
+            selectedExperiment: this.selectedExperiment,
+            selectedVariantId: this.selectedVariantId,
+            selectedVariant: this.selectedVariant,
+            variantOptions: this.variantOptions,
+            currentBucket: this.currentBucket,
+            runningExperiment: this.runningExperiment,
+            switcherItems: this.switcherItems,
+            paused: this.paused,
+            drawerOpen: this.drawerOpen,
+            editTarget: this.editTarget
+        };
+    }
+    init(pageRevisionId) {
+        this.baselineRevisionId = pageRevisionId;
+        this.pageEntryId = pageRevisionId.split("#")[0];
+        this.reload();
+    }
+    async reload() {
+        const list = await this.dataSource.listExperiments(this.pageEntryId);
+        runInAction(()=>{
+            this.experiments = list;
+            if (this.selectedExperimentId && !list.some((experiment)=>experiment.id === this.selectedExperimentId)) this.selectedExperimentId = null;
+        });
+    }
+    selectExperiment(id) {
+        this.selectedExperimentId = id;
+        this.selectedVariantId = null;
+        this.loadSelectedExperiment();
+    }
+    selectVariant(variantId) {
+        this.selectedVariantId = variantId;
+    }
+    syncReadOnlySelection(isReadOnly) {
+        if (!isReadOnly) return;
+        const running = this.experiments.find((experiment)=>"running" === experiment.status) ?? null;
+        if (running && this.selectedExperimentId !== running.id) this.selectExperiment(running.id);
+    }
+    openManage() {
+        this.editTarget = null;
+        this.drawerOpen = true;
+    }
+    editExperiment(experiment) {
+        this.editTarget = experiment;
+        this.drawerOpen = true;
+    }
+    closeDrawer() {
+        this.drawerOpen = false;
+    }
+    loadSelectedExperiment() {
+        const token = ++this.loadToken;
+        const experimentId = this.selectedExperimentId;
+        if (!experimentId) {
+            this.variants = [];
+            this.paused = false;
+            return;
+        }
+        this.dataSource.listVariants(experimentId).then((list)=>{
+            if (token === this.loadToken) runInAction(()=>{
+                this.variants = list;
+            });
+        });
+        const experiment = this.experiments.find((item)=>item.id === experimentId) ?? null;
+        if (experiment && "running" === experiment.status) this.dataSource.getExperimentPaused(experiment.entryId).then((value)=>{
+            if (token === this.loadToken) runInAction(()=>{
+                this.paused = value;
+            });
+        });
+        else this.paused = false;
+    }
+    async pause() {
+        const experiment = this.selectedExperiment;
+        if (!experiment) return;
+        await this.gateway.pauseExperiment(experiment.entryId);
+        runInAction(()=>{
+            this.paused = true;
+        });
+    }
+    async resume() {
+        const experiment = this.selectedExperiment;
+        if (!experiment) return;
+        await this.gateway.resumeExperiment(experiment.entryId);
+        runInAction(()=>{
+            this.paused = false;
+        });
+    }
+    async activate(experimentId) {
+        const active = this.experiments.find((experiment)=>"running" === experiment.status && experiment.id !== experimentId);
+        if (active) await this.gateway.stopExperiment(active.id);
+        return this.gateway.startExperiment(experimentId);
+    }
+    deactivate(experimentId) {
+        return this.gateway.stopExperiment(experimentId);
+    }
+    async createExperiment(payload) {
+        const experiment = await this.gateway.createExperiment({
+            pageEntryId: this.pageEntryId,
+            baselineRevisionId: this.baselineRevisionId,
+            name: payload.name,
+            targeting: {
+                trafficPercentage: 100
+            },
+            analytics: {
+                provider: "posthog",
+                experimentKey: payload.key
+            },
+            trafficSplit: {
+                control: payload.control.weight,
+                variants: {}
+            }
+        });
+        const variantSplit = {};
+        for (const variant of payload.variants){
+            const created = await this.gateway.createVariant({
+                experimentId: experiment.id,
+                name: variant.name
+            });
+            await this.gateway.updateVariant(created.id, {
+                status: "ready"
+            });
+            variantSplit[created.entryId] = variant.weight;
+        }
+        return this.gateway.updateExperiment(experiment.id, {
+            trafficSplit: {
+                control: payload.control.weight,
+                variants: variantSplit
+            }
+        });
+    }
+    updateExperiment(id, input) {
+        return this.gateway.updateExperiment(id, input);
+    }
+    async deleteExperiment(experimentId) {
+        const variants = await this.gateway.listVariants(experimentId).catch(()=>[]);
+        for (const variant of variants)await this.gateway.deleteVariant(variant.id).catch(()=>void 0);
+        return this.gateway.deleteExperiment(experimentId);
+    }
+    getVariant(id) {
+        return this.gateway.getVariant(id);
+    }
+    saveVariant(revisionId, doc) {
+        return this.gateway.updateVariant(revisionId, doc);
+    }
+}
+const ExperimentsEditorPresenter_ExperimentsEditorPresenter = ExperimentsEditorPresenter.createImplementation({
+    implementation: ExperimentsEditorPresenterImpl,
+    dependencies: [
+        ExperimentsGateway,
+        ExperimentsEditorDataSource
+    ]
+});
+export { ExperimentsEditorPresenter_ExperimentsEditorPresenter as ExperimentsEditorPresenter };
+
+//# sourceMappingURL=ExperimentsEditorPresenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/ExperimentsEditorPresenter.js","sources":["../../../../src/presentation/experiments/ExperimentsEditor/ExperimentsEditorPresenter.ts"],"sourcesContent":["import { makeAutoObservable, computed, runInAction } from \"mobx\";\nimport { ExperimentsGateway } from \"~/features/experiments/index.js\";\nimport type {\n    ExperimentDto,\n    UpdateExperimentInput,\n    VariantContentDto,\n    VariantDto\n} from \"~/features/experiments/index.js\";\nimport type { NewExperimentPayload } from \"../ExperimentForm/abstractions/ExperimentFormPresenter.js\";\nimport {\n    ExperimentsEditorPresenter as Abstraction,\n    type IExperimentsEditorPresenter,\n    type IExperimentsEditorViewModel,\n    type SwitcherItem,\n    type VariantOption\n} from \"./abstractions/ExperimentsEditorPresenter.js\";\nimport { ExperimentsEditorDataSource } from \"./abstractions/ExperimentsEditorDataSource.js\";\nimport { bucketColor } from \"../shared/variantColors.js\";\n\nclass ExperimentsEditorPresenterImpl implements IExperimentsEditorPresenter {\n    // Revision id of the page being edited (e.g. \"<entryId>#0001\"); the baseline for its experiments.\n    private baselineRevisionId = \"\";\n    private pageEntryId = \"\";\n    private experiments: ExperimentDto[] = [];\n    private selectedExperimentId: string | null = null;\n    // Currently edited bucket: `null` = control, otherwise a variant entry id.\n    private selectedVariantId: string | null = null;\n    private variants: VariantDto[] = [];\n    private paused = false;\n    private drawerOpen = false;\n    private editTarget: ExperimentDto | null = null;\n    // Guards async variant/paused loads against out-of-order responses when the selection changes.\n    private loadToken = 0;\n\n    constructor(\n        private readonly gateway: ExperimentsGateway.Interface,\n        private readonly dataSource: ExperimentsEditorDataSource.Interface\n    ) {\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    private get selectedExperiment(): ExperimentDto | null {\n        return (\n            this.experiments.find(experiment => experiment.id === this.selectedExperimentId) ?? null\n        );\n    }\n\n    private get selectedVariant(): VariantDto | null {\n        return this.variants.find(variant => variant.entryId === this.selectedVariantId) ?? null;\n    }\n\n    private get variantOptions(): VariantOption[] {\n        const split = this.selectedExperiment?.trafficSplit ?? { control: 0, variants: {} };\n        return [\n            {\n                id: null,\n                name: \"Control\",\n                weight: split.control ?? 0,\n                isControl: true,\n                color: bucketColor(true, 0)\n            },\n            ...this.variants.map((variant, index) => ({\n                id: variant.entryId,\n                name: variant.name,\n                weight: split.variants?.[variant.entryId] ?? 0,\n                isControl: false,\n                color: bucketColor(false, index)\n            }))\n        ];\n    }\n\n    private get currentBucket(): VariantOption | null {\n        const options = this.variantOptions;\n        return options.find(option => option.id === this.selectedVariantId) ?? options[0] ?? null;\n    }\n\n    private get runningExperiment(): ExperimentDto | null {\n        return this.experiments.find(experiment => experiment.status === \"running\") ?? null;\n    }\n\n    private get switcherItems(): SwitcherItem[] {\n        return this.experiments.map((experiment): SwitcherItem => ({\n            id: experiment.id,\n            name: experiment.name,\n            status: experiment.status === \"running\" ? \"active\" : \"inactive\"\n        }));\n    }\n\n    get vm(): IExperimentsEditorViewModel {\n        return {\n            baselineRevisionId: this.baselineRevisionId,\n            pageEntryId: this.pageEntryId,\n            experiments: this.experiments,\n            selectedExperimentId: this.selectedExperimentId,\n            selectedExperiment: this.selectedExperiment,\n            selectedVariantId: this.selectedVariantId,\n            selectedVariant: this.selectedVariant,\n            variantOptions: this.variantOptions,\n            currentBucket: this.currentBucket,\n            runningExperiment: this.runningExperiment,\n            switcherItems: this.switcherItems,\n            paused: this.paused,\n            drawerOpen: this.drawerOpen,\n            editTarget: this.editTarget\n        };\n    }\n\n    init(pageRevisionId: string): void {\n        this.baselineRevisionId = pageRevisionId;\n        this.pageEntryId = pageRevisionId.split(\"#\")[0];\n        this.reload();\n    }\n\n    async reload(): Promise<void> {\n        const list = await this.dataSource.listExperiments(this.pageEntryId);\n        runInAction(() => {\n            this.experiments = list;\n            // Drop the selection if the experiment no longer exists.\n            if (\n                this.selectedExperimentId &&\n                !list.some(experiment => experiment.id === this.selectedExperimentId)\n            ) {\n                this.selectedExperimentId = null;\n            }\n        });\n    }\n\n    selectExperiment(id: string | null): void {\n        this.selectedExperimentId = id;\n        // Reset the edited bucket to the control whenever the experiment changes.\n        this.selectedVariantId = null;\n        this.loadSelectedExperiment();\n    }\n\n    selectVariant(variantId: string | null): void {\n        this.selectedVariantId = variantId;\n    }\n\n    /**\n     * On the published (read-only) view, surface the running experiment and keep it selected so the\n     * preview toolbar tracks it. Mirrors the old read-only auto-select effect.\n     */\n    syncReadOnlySelection(isReadOnly: boolean): void {\n        if (!isReadOnly) {\n            return;\n        }\n        const running =\n            this.experiments.find(experiment => experiment.status === \"running\") ?? null;\n        if (running && this.selectedExperimentId !== running.id) {\n            this.selectExperiment(running.id);\n        }\n    }\n\n    openManage(): void {\n        this.editTarget = null;\n        this.drawerOpen = true;\n    }\n\n    editExperiment(experiment: ExperimentDto): void {\n        this.editTarget = experiment;\n        this.drawerOpen = true;\n    }\n\n    closeDrawer(): void {\n        this.drawerOpen = false;\n    }\n\n    /**\n     * Load the variants and kill-switch state for the currently selected experiment. A load token\n     * guards against a stale response overwriting a newer selection.\n     */\n    private loadSelectedExperiment(): void {\n        const token = ++this.loadToken;\n        const experimentId = this.selectedExperimentId;\n\n        if (!experimentId) {\n            this.variants = [];\n            this.paused = false;\n            return;\n        }\n\n        this.dataSource.listVariants(experimentId).then(list => {\n            if (token === this.loadToken) {\n                runInAction(() => {\n                    this.variants = list;\n                });\n            }\n        });\n\n        // Load the kill-switch state only for a running experiment (keyed on its entryId).\n        const experiment = this.experiments.find(item => item.id === experimentId) ?? null;\n        if (experiment && experiment.status === \"running\") {\n            this.dataSource.getExperimentPaused(experiment.entryId).then(value => {\n                if (token === this.loadToken) {\n                    runInAction(() => {\n                        this.paused = value;\n                    });\n                }\n            });\n        } else {\n            this.paused = false;\n        }\n    }\n\n    async pause(): Promise<void> {\n        const experiment = this.selectedExperiment;\n        if (!experiment) {\n            return;\n        }\n        await this.gateway.pauseExperiment(experiment.entryId);\n        runInAction(() => {\n            this.paused = true;\n        });\n    }\n\n    async resume(): Promise<void> {\n        const experiment = this.selectedExperiment;\n        if (!experiment) {\n            return;\n        }\n        await this.gateway.resumeExperiment(experiment.entryId);\n        runInAction(() => {\n            this.paused = false;\n        });\n    }\n\n    /**\n     * Activate an experiment. Only one experiment can run on a page at a time, so any other running\n     * experiment (from the same page) is stopped first.\n     */\n    async activate(experimentId: string): Promise<ExperimentDto> {\n        const active = this.experiments.find(\n            experiment => experiment.status === \"running\" && experiment.id !== experimentId\n        );\n        if (active) {\n            await this.gateway.stopExperiment(active.id);\n        }\n        return this.gateway.startExperiment(experimentId);\n    }\n\n    deactivate(experimentId: string): Promise<ExperimentDto> {\n        return this.gateway.stopExperiment(experimentId);\n    }\n\n    /**\n     * Persist a new experiment: create the experiment, then each variant (whose content the API\n     * copies from the baseline) marked ready, then write the traffic split now that we have the\n     * variant ids. The experiment key is carried in the analytics config.\n     */\n    async createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto> {\n        const experiment = await this.gateway.createExperiment({\n            pageEntryId: this.pageEntryId,\n            baselineRevisionId: this.baselineRevisionId,\n            name: payload.name,\n            targeting: { trafficPercentage: 100 },\n            analytics: { provider: \"posthog\", experimentKey: payload.key },\n            trafficSplit: { control: payload.control.weight, variants: {} }\n        });\n\n        const variantSplit: Record<string, number> = {};\n        for (const variant of payload.variants) {\n            const created = await this.gateway.createVariant({\n                experimentId: experiment.id,\n                name: variant.name\n            });\n            await this.gateway.updateVariant(created.id, { status: \"ready\" });\n            variantSplit[created.entryId] = variant.weight;\n        }\n\n        return this.gateway.updateExperiment(experiment.id, {\n            trafficSplit: { control: payload.control.weight, variants: variantSplit }\n        });\n    }\n\n    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto> {\n        return this.gateway.updateExperiment(id, input);\n    }\n\n    /** Delete an experiment along with its variants. */\n    async deleteExperiment(experimentId: string): Promise<boolean> {\n        const variants = await this.gateway.listVariants(experimentId).catch(() => []);\n        for (const variant of variants) {\n            await this.gateway.deleteVariant(variant.id).catch(() => undefined);\n        }\n        return this.gateway.deleteExperiment(experimentId);\n    }\n\n    getVariant(id: string): Promise<VariantContentDto | null> {\n        return this.gateway.getVariant(id);\n    }\n\n    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto> {\n        return this.gateway.updateVariant(revisionId, doc);\n    }\n}\n\nexport const ExperimentsEditorPresenter = Abstraction.createImplementation({\n    implementation: ExperimentsEditorPresenterImpl,\n    dependencies: [ExperimentsGateway, ExperimentsEditorDataSource]\n});\n"],"names":["ExperimentsEditorPresenterImpl","gateway","dataSource","makeAutoObservable","computed","experiment","variant","split","bucketColor","index","options","option","pageRevisionId","list","runInAction","id","variantId","isReadOnly","running","token","experimentId","item","value","active","payload","variantSplit","created","input","variants","undefined","revisionId","doc","ExperimentsEditorPresenter","Abstraction","ExperimentsGateway","ExperimentsEditorDataSource"],"mappings":"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"}

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorDataSource.d.ts

@@ -0,0 +1,10 @@
+import type { ExperimentDto, VariantDto } from "../../../../features/experiments/index.js";
+export interface IExperimentsEditorDataSource {
+    listExperiments(pageEntryId: string): Promise<ExperimentDto[]>;
+    listVariants(experimentId: string): Promise<VariantDto[]>;
+    getExperimentPaused(experimentEntryId: string): Promise<boolean>;
+}
+export declare const ExperimentsEditorDataSource: import("@webiny/di").Abstraction<IExperimentsEditorDataSource>;
+export declare namespace ExperimentsEditorDataSource {
+    type Interface = IExperimentsEditorDataSource;
+}

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorDataSource.js

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

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorDataSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorDataSource.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorDataSource.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { ExperimentDto, VariantDto } from \"~/features/experiments/index.js\";\n\nexport interface IExperimentsEditorDataSource {\n    // Load all experiments for a page (by its entry id).\n    listExperiments(pageEntryId: string): Promise<ExperimentDto[]>;\n    // Load the variants of a single experiment.\n    listVariants(experimentId: string): Promise<VariantDto[]>;\n    // Read the runtime kill-switch state for an experiment (keyed on its entryId).\n    getExperimentPaused(experimentEntryId: string): Promise<boolean>;\n}\n\nexport const ExperimentsEditorDataSource = createAbstraction<IExperimentsEditorDataSource>(\n    \"WebsiteBuilder/ExperimentsEditor/DataSource\"\n);\n\nexport namespace ExperimentsEditorDataSource {\n    export type Interface = IExperimentsEditorDataSource;\n}\n"],"names":["ExperimentsEditorDataSource","createAbstraction"],"mappings":";AAYO,MAAMA,8BAA8BC,kBACvC"}

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.d.ts

@@ -0,0 +1,58 @@
+import type { ExperimentDto, UpdateExperimentInput, VariantContentDto, VariantDto } from "../../../../features/experiments/index.js";
+import type { NewExperimentPayload } from "../../ExperimentForm/abstractions/ExperimentFormPresenter.js";
+/** A single "thing you can edit" within an experiment: the control, or one of its variants. */
+export interface VariantOption {
+    id: string | null;
+    name: string;
+    weight: number;
+    isControl: boolean;
+    color: string;
+}
+/** A row in the top-bar experiment switcher. */
+export interface SwitcherItem {
+    id: string;
+    name: string;
+    status: "active" | "inactive";
+}
+export interface IExperimentsEditorViewModel {
+    baselineRevisionId: string;
+    pageEntryId: string;
+    experiments: ExperimentDto[];
+    selectedExperimentId: string | null;
+    selectedExperiment: ExperimentDto | null;
+    selectedVariantId: string | null;
+    selectedVariant: VariantDto | null;
+    variantOptions: VariantOption[];
+    currentBucket: VariantOption | null;
+    runningExperiment: ExperimentDto | null;
+    switcherItems: SwitcherItem[];
+    paused: boolean;
+    drawerOpen: boolean;
+    editTarget: ExperimentDto | null;
+}
+export interface IExperimentsEditorPresenter {
+    readonly vm: IExperimentsEditorViewModel;
+    init(pageRevisionId: string): void;
+    reload(): Promise<void>;
+    selectExperiment(id: string | null): void;
+    selectVariant(variantId: string | null): void;
+    syncReadOnlySelection(isReadOnly: boolean): void;
+    openManage(): void;
+    editExperiment(experiment: ExperimentDto): void;
+    closeDrawer(): void;
+    pause(): Promise<void>;
+    resume(): Promise<void>;
+    activate(experimentId: string): Promise<ExperimentDto>;
+    deactivate(experimentId: string): Promise<ExperimentDto>;
+    createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto>;
+    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto>;
+    deleteExperiment(experimentId: string): Promise<boolean>;
+    getVariant(id: string): Promise<VariantContentDto | null>;
+    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto>;
+}
+export declare const ExperimentsEditorPresenter: import("@webiny/di").Abstraction<IExperimentsEditorPresenter>;
+export declare namespace ExperimentsEditorPresenter {
+    type Interface = IExperimentsEditorPresenter;
+    type ViewModel = IExperimentsEditorViewModel;
+    type Option = VariantOption;
+}

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.js

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

package/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/abstractions/ExperimentsEditorPresenter.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type {\n    ExperimentDto,\n    UpdateExperimentInput,\n    VariantContentDto,\n    VariantDto\n} from \"~/features/experiments/index.js\";\nimport type { NewExperimentPayload } from \"../../ExperimentForm/abstractions/ExperimentFormPresenter.js\";\n\n/** A single \"thing you can edit\" within an experiment: the control, or one of its variants. */\nexport interface VariantOption {\n    // `null` identifies the control (the baseline page); otherwise the variant entry id.\n    id: string | null;\n    name: string;\n    weight: number;\n    isControl: boolean;\n    // Palette colour for the bucket, assigned by index (control neutral, variants cycle).\n    color: string;\n}\n\n/** A row in the top-bar experiment switcher. */\nexport interface SwitcherItem {\n    id: string;\n    name: string;\n    status: \"active\" | \"inactive\";\n}\n\nexport interface IExperimentsEditorViewModel {\n    // Revision id of the page being edited; the baseline for its experiments.\n    baselineRevisionId: string;\n    // Entry id of the page being edited (derived from the baseline revision id).\n    pageEntryId: string;\n    experiments: ExperimentDto[];\n    selectedExperimentId: string | null;\n    selectedExperiment: ExperimentDto | null;\n    // Currently edited bucket: `null` = control, otherwise a variant entry id.\n    selectedVariantId: string | null;\n    // The variant DTO matching `selectedVariantId` (null when editing the control).\n    selectedVariant: VariantDto | null;\n    variantOptions: VariantOption[];\n    // The bucket currently being previewed/edited (control or the selected variant).\n    currentBucket: VariantOption | null;\n    // The single running experiment on the page, if any (drives the read-only indicator).\n    runningExperiment: ExperimentDto | null;\n    // Experiments as switcher rows (id + name + active/inactive status).\n    switcherItems: SwitcherItem[];\n    // Kill-switch state of the selected experiment.\n    paused: boolean;\n    // Manage/edit drawer UI state.\n    drawerOpen: boolean;\n    editTarget: ExperimentDto | null;\n}\n\nexport interface IExperimentsEditorPresenter {\n    readonly vm: IExperimentsEditorViewModel;\n    init(pageRevisionId: string): void;\n    reload(): Promise<void>;\n    selectExperiment(id: string | null): void;\n    selectVariant(variantId: string | null): void;\n    // On a published (read-only) page, keep the running experiment selected so the preview tracks it.\n    syncReadOnlySelection(isReadOnly: boolean): void;\n    openManage(): void;\n    editExperiment(experiment: ExperimentDto): void;\n    closeDrawer(): void;\n    pause(): Promise<void>;\n    resume(): Promise<void>;\n    activate(experimentId: string): Promise<ExperimentDto>;\n    deactivate(experimentId: string): Promise<ExperimentDto>;\n    createExperiment(payload: NewExperimentPayload): Promise<ExperimentDto>;\n    updateExperiment(id: string, input: UpdateExperimentInput): Promise<ExperimentDto>;\n    deleteExperiment(experimentId: string): Promise<boolean>;\n    getVariant(id: string): Promise<VariantContentDto | null>;\n    saveVariant(revisionId: string, doc: Record<string, any>): Promise<VariantDto>;\n}\n\nexport const ExperimentsEditorPresenter = createAbstraction<IExperimentsEditorPresenter>(\n    \"WebsiteBuilder/ExperimentsEditor/Presenter\"\n);\n\nexport namespace ExperimentsEditorPresenter {\n    export type Interface = IExperimentsEditorPresenter;\n    export type ViewModel = IExperimentsEditorViewModel;\n    export type Option = VariantOption;\n}\n"],"names":["ExperimentsEditorPresenter","createAbstraction"],"mappings":";AA2EO,MAAMA,6BAA6BC,kBACtC"}

package/presentation/experiments/ExperimentsEditor/components/ExperimentIndicator.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ExperimentDto } from "../../../../features/experiments/index.js";
+/**
+ * Top-bar indicator shown on a published (read-only) page: names the running experiment, shows
+ * whether it's live (Active) or paused (Inactive), and lets the editor toggle the kill-switch.
+ */
+export declare const ExperimentIndicator: (({ experiment }: {
+    experiment: ExperimentDto;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    experiment: ExperimentDto;
+}> & {
+    readonly type: ({ experiment }: {
+        experiment: ExperimentDto;
+    }) => React.JSX.Element;
+};

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

@@ -0,0 +1,110 @@
+import react, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as pause_svg_ReactComponent } from "@webiny/icons/pause.svg";
+import { ReactComponent as play_arrow_svg_ReactComponent } from "@webiny/icons/play_arrow.svg";
+import { ExperimentsEditorPresenterFeature } from "../feature.js";
+const ExperimentIndicator_ExperimentIndicator = observer(function({ experiment }) {
+    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);
+    const { paused } = presenter.vm;
+    const [busy, setBusy] = useState(false);
+    const active = !paused;
+    const toggle = async ()=>{
+        setBusy(true);
+        try {
+            await (paused ? presenter.resume() : presenter.pause());
+        } finally{
+            setBusy(false);
+        }
+    };
+    const toggleStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        borderRadius: 8,
+        padding: "6px 12px",
+        fontWeight: 600,
+        fontSize: 13,
+        cursor: busy ? "default" : "pointer",
+        opacity: busy ? 0.6 : 1,
+        ...active ? {
+            border: "1px solid #d5d7db",
+            background: "#fff",
+            color: "#1f2937"
+        } : {
+            border: "none",
+            background: "#10b981",
+            color: "#fff"
+        }
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 12,
+            border: "1px solid #e5e7eb",
+            borderRadius: 8,
+            padding: "4px 4px 4px 12px",
+            background: "#fff"
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            minWidth: 0
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            color: "#e2572a",
+            fill: "currentColor"
+        }
+    }), /*#__PURE__*/ react.createElement("span", {
+        style: {
+            fontWeight: 600,
+            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",
+            whiteSpace: "nowrap"
+        }
+    }, /*#__PURE__*/ react.createElement("span", {
+        style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: active ? "#10b981" : "#9ca3af"
+        }
+    }), active ? "Active" : "Inactive")), /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: toggle,
+        disabled: busy,
+        style: toggleStyle
+    }, active ? /*#__PURE__*/ react.createElement(pause_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            fill: "currentColor"
+        }
+    }) : /*#__PURE__*/ react.createElement(play_arrow_svg_ReactComponent, {
+        style: {
+            width: 16,
+            height: 16,
+            fill: "currentColor"
+        }
+    }), active ? "Pause" : "Resume"));
+});
+export { ExperimentIndicator_ExperimentIndicator as ExperimentIndicator };
+
+//# sourceMappingURL=ExperimentIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsEditor/components/ExperimentIndicator.js","sources":["../../../../../src/presentation/experiments/ExperimentsEditor/components/ExperimentIndicator.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as PauseIcon } from \"@webiny/icons/pause.svg\";\nimport { ReactComponent as PlayIcon } from \"@webiny/icons/play_arrow.svg\";\nimport { ExperimentsEditorPresenterFeature } from \"../feature.js\";\nimport type { ExperimentDto } from \"~/features/experiments/index.js\";\n\n/**\n * Top-bar indicator shown on a published (read-only) page: names the running experiment, shows\n * whether it's live (Active) or paused (Inactive), and lets the editor toggle the kill-switch.\n */\nexport const ExperimentIndicator = observer(function ExperimentIndicator({\n    experiment\n}: {\n    experiment: ExperimentDto;\n}) {\n    const { presenter } = useFeature(ExperimentsEditorPresenterFeature);\n    const { paused } = presenter.vm;\n    const [busy, setBusy] = useState(false);\n    const active = !paused;\n\n    const toggle = async () => {\n        setBusy(true);\n        try {\n            await (paused ? presenter.resume() : presenter.pause());\n        } finally {\n            setBusy(false);\n        }\n    };\n\n    const toggleStyle: React.CSSProperties = {\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: 6,\n        borderRadius: 8,\n        padding: \"6px 12px\",\n        fontWeight: 600,\n        fontSize: 13,\n        cursor: busy ? \"default\" : \"pointer\",\n        opacity: busy ? 0.6 : 1,\n        ...(active\n            ? { border: \"1px solid #d5d7db\", background: \"#fff\", color: \"#1f2937\" }\n            : { border: \"none\", background: \"#10b981\", color: \"#fff\" })\n    };\n\n    return (\n        <div\n            style={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                gap: 12,\n                border: \"1px solid #e5e7eb\",\n                borderRadius: 8,\n                padding: \"4px 4px 4px 12px\",\n                background: \"#fff\"\n            }}\n        >\n            <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, minWidth: 0 }}>\n                <ScienceIcon\n                    style={{ width: 18, height: 18, color: \"#e2572a\", fill: \"currentColor\" }}\n                />\n                <span\n                    style={{\n                        fontWeight: 600,\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                        whiteSpace: \"nowrap\"\n                    }}\n                >\n                    <span\n                        style={{\n                            width: 8,\n                            height: 8,\n                            borderRadius: \"50%\",\n                            background: active ? \"#10b981\" : \"#9ca3af\"\n                        }}\n                    />\n                    {active ? \"Active\" : \"Inactive\"}\n                </span>\n            </span>\n            <button type=\"button\" onClick={toggle} disabled={busy} style={toggleStyle}>\n                {active ? (\n                    <PauseIcon style={{ width: 16, height: 16, fill: \"currentColor\" }} />\n                ) : (\n                    <PlayIcon style={{ width: 16, height: 16, fill: \"currentColor\" }} />\n                )}\n                {active ? \"Pause\" : \"Resume\"}\n            </button>\n        </div>\n    );\n});\n"],"names":["ExperimentIndicator","observer","experiment","presenter","useFeature","ExperimentsEditorPresenterFeature","paused","busy","setBusy","useState","active","toggle","toggleStyle","ScienceIcon","PauseIcon","PlayIcon"],"mappings":";;;;;;;AAaO,MAAMA,0CAAsBC,SAAS,SAA6B,EACrEC,UAAU,EAGb;IACG,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,MAAM,EAAE,GAAGH,UAAU,EAAE;IAC/B,MAAM,CAACI,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,SAAS,CAACJ;IAEhB,MAAMK,SAAS;QACXH,QAAQ;QACR,IAAI;YACA,MAAOF,CAAAA,SAASH,UAAU,MAAM,KAAKA,UAAU,KAAK,EAAC;QACzD,SAAU;YACNK,QAAQ;QACZ;IACJ;IAEA,MAAMI,cAAmC;QACrC,SAAS;QACT,YAAY;QACZ,KAAK;QACL,cAAc;QACd,SAAS;QACT,YAAY;QACZ,UAAU;QACV,QAAQL,OAAO,YAAY;QAC3B,SAASA,OAAO,MAAM;QACtB,GAAIG,SACE;YAAE,QAAQ;YAAqB,YAAY;YAAQ,OAAO;QAAU,IACpE;YAAE,QAAQ;YAAQ,YAAY;YAAW,OAAO;QAAO,CAAC;IAClE;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,KAAK;YACL,QAAQ;YACR,cAAc;YACd,SAAS;YACT,YAAY;QAChB;qBAEA,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAe,YAAY;YAAU,KAAK;YAAG,UAAU;QAAE;qBAC7E,oBAACG,gBAAWA;QACR,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,OAAO;YAAW,MAAM;QAAe;sBAE3E,oBAAC;QACG,OAAO;YACH,YAAY;YACZ,YAAY;YACZ,UAAU;YACV,cAAc;QAClB;OAECX,WAAW,IAAI,iBAEpB,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,KAAK;YACL,UAAU;YACV,YAAY;YACZ,OAAOQ,SAAS,YAAY;YAC5B,YAAY;QAChB;qBAEA,oBAAC;QACG,OAAO;YACH,OAAO;YACP,QAAQ;YACR,cAAc;YACd,YAAYA,SAAS,YAAY;QACrC;QAEHA,SAAS,WAAW,4BAG7B,oBAAC;QAAO,MAAK;QAAS,SAASC;QAAQ,UAAUJ;QAAM,OAAOK;OACzDF,SAAS,WAATA,GACG,oBAACI,0BAASA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,MAAM;QAAe;uBAEhE,oBAACC,+BAAQA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,MAAM;QAAe;QAElEL,SAAS,UAAU;AAIpC"}

package/presentation/experiments/ExperimentsEditor/components/ExperimentPreviewToolbar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * A bar shown between the address bar and the canvas while an experiment is selected. It names the
+ * experiment, shows its status and the bucket currently being edited, and lets the editor switch
+ * between the control and each variant or jump to editing the experiment.
+ */
+export declare const ExperimentPreviewToolbar: (() => React.JSX.Element | null) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element | null;
+};