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

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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"}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ExperimentsDrawerView: () => React.JSX.Element;

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

@@ -0,0 +1,92 @@
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { Drawer, IconButton } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/science.svg";
+import { ReactComponent as arrow_back_svg_ReactComponent } from "@webiny/icons/arrow_back.svg";
+import { ExperimentFormView } from "../../ExperimentForm/index.js";
+import { ExperimentsManagerPresenterFeature } from "../feature.js";
+import { ExperimentsListView } from "./ExperimentsListView.js";
+const ExperimentsDrawerView_ExperimentsDrawerViewInner = observer(function() {
+    const { presenter } = useFeature(ExperimentsManagerPresenterFeature);
+    useEffect(()=>{
+        presenter.init();
+        return ()=>presenter.dispose();
+    }, [
+        presenter
+    ]);
+    const { open, view, editInitial } = presenter.vm;
+    const flask = /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 20,
+            height: 20
+        }
+    });
+    const back = /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(arrow_back_svg_ReactComponent, {
+            style: {
+                width: 18,
+                height: 18
+            }
+        }),
+        onClick: ()=>presenter.showList()
+    });
+    let title;
+    title = "create" === view ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, back, flask, "New experiment") : "edit" === view ? /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, back, flask, "Edit experiment") : /*#__PURE__*/ react.createElement("span", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8
+        }
+    }, flask, "Experiments");
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        open: open,
+        onClose: ()=>presenter.close(),
+        modal: true,
+        width: 520,
+        title: title,
+        headerSeparator: true,
+        bodyPadding: false,
+        className: "flex flex-col"
+    }, "list" === view ? /*#__PURE__*/ react.createElement(ExperimentsListView, {
+        presenter: presenter
+    }) : null, "create" === view ? /*#__PURE__*/ react.createElement(ExperimentFormView, {
+        onCancel: ()=>presenter.showList(),
+        onSubmit: (payload)=>presenter.createExperiment(payload),
+        submitLabel: "Create experiment"
+    }) : null, "edit" === view && editInitial ? /*#__PURE__*/ react.createElement(ExperimentFormView, {
+        initial: editInitial,
+        allowStructureChange: false,
+        submitLabel: "Save changes",
+        onCancel: ()=>presenter.showList(),
+        onSubmit: (payload)=>presenter.updateExperiment(payload)
+    }) : null);
+});
+const ExperimentsDrawerView = ()=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        ExperimentsManagerPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(ExperimentsDrawerView_ExperimentsDrawerViewInner, null));
+};
+export { ExperimentsDrawerView };
+
+//# sourceMappingURL=ExperimentsDrawerView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentsDrawerView.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { Drawer, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as ScienceIcon } from \"@webiny/icons/science.svg\";\nimport { ReactComponent as BackIcon } from \"@webiny/icons/arrow_back.svg\";\nimport { ExperimentFormView } from \"../../ExperimentForm/index.js\";\nimport { ExperimentsManagerPresenterFeature } from \"../feature.js\";\nimport { ExperimentsListView } from \"./ExperimentsListView.js\";\n\nconst ExperimentsDrawerViewInner = observer(function ExperimentsDrawerViewInner() {\n    const { presenter } = useFeature(ExperimentsManagerPresenterFeature);\n\n    useEffect(() => {\n        presenter.init();\n        return () => presenter.dispose();\n    }, [presenter]);\n\n    const { open, view, editInitial } = presenter.vm;\n\n    const flask = <ScienceIcon style={{ width: 20, height: 20 }} />;\n    const back = (\n        <IconButton\n            variant=\"ghost\"\n            size=\"sm\"\n            icon={<BackIcon style={{ width: 18, height: 18 }} />}\n            onClick={() => presenter.showList()}\n        />\n    );\n\n    let title: React.ReactNode;\n    if (view === \"create\") {\n        title = (\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                {back}\n                {flask}\n                New experiment\n            </span>\n        );\n    } else if (view === \"edit\") {\n        title = (\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                {back}\n                {flask}\n                Edit experiment\n            </span>\n        );\n    } else {\n        title = (\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                {flask}\n                Experiments\n            </span>\n        );\n    }\n\n    return (\n        <Drawer\n            open={open}\n            onClose={() => presenter.close()}\n            modal={true}\n            width={520}\n            title={title}\n            headerSeparator={true}\n            bodyPadding={false}\n            className={\"flex flex-col\"}\n        >\n            {view === \"list\" ? <ExperimentsListView presenter={presenter} /> : null}\n            {view === \"create\" ? (\n                <ExperimentFormView\n                    onCancel={() => presenter.showList()}\n                    onSubmit={payload => presenter.createExperiment(payload)}\n                    submitLabel=\"Create experiment\"\n                />\n            ) : null}\n            {view === \"edit\" && editInitial ? (\n                <ExperimentFormView\n                    initial={editInitial}\n                    allowStructureChange={false}\n                    submitLabel=\"Save changes\"\n                    onCancel={() => presenter.showList()}\n                    onSubmit={payload => presenter.updateExperiment(payload)}\n                />\n            ) : null}\n        </Drawer>\n    );\n});\n\nexport const ExperimentsDrawerView = () => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ExperimentsManagerPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <ExperimentsDrawerViewInner />\n        </DiContainerProvider>\n    );\n};\n"],"names":["ExperimentsDrawerViewInner","observer","presenter","useFeature","ExperimentsManagerPresenterFeature","useEffect","open","view","editInitial","flask","ScienceIcon","back","IconButton","BackIcon","title","Drawer","ExperimentsListView","ExperimentFormView","payload","ExperimentsDrawerView","container","useContainer","scopedContainer","useMemo","child","DiContainerProvider"],"mappings":";;;;;;;;;AAUA,MAAMA,mDAA6BC,SAAS;IACxC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACNH,UAAU,IAAI;QACd,OAAO,IAAMA,UAAU,OAAO;IAClC,GAAG;QAACA;KAAU;IAEd,MAAM,EAAEI,IAAI,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGN,UAAU,EAAE;IAEhD,MAAMO,QAAQ,WAARA,GAAQ,oBAACC,gBAAWA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;QAAG;;IAC1D,MAAMC,OAAO,WAAPA,GACF,oBAACC,YAAUA;QACP,SAAQ;QACR,MAAK;QACL,oBAAM,oBAACC,+BAAQA;YAAC,OAAO;gBAAE,OAAO;gBAAI,QAAQ;YAAG;;QAC/C,SAAS,IAAMX,UAAU,QAAQ;;IAIzC,IAAIY;IAEAA,QADAP,AAAS,aAATA,OACQ,WAARO,GACI,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;OACxDH,MACAF,OAAM,oBAIRF,AAAS,WAATA,OACC,WAARO,GACI,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;OACxDH,MACAF,OAAM,qBAKP,WAARK,GACI,oBAAC;QAAK,OAAO;YAAE,SAAS;YAAQ,YAAY;YAAU,KAAK;QAAE;OACxDL,OAAM;IAMnB,OAAO,WAAP,GACI,oBAACM,QAAMA;QACH,MAAMT;QACN,SAAS,IAAMJ,UAAU,KAAK;QAC9B,OAAO;QACP,OAAO;QACP,OAAOY;QACP,iBAAiB;QACjB,aAAa;QACb,WAAW;OAEVP,AAAS,WAATA,OAAkB,WAAT,GAAS,oBAACS,qBAAmBA;QAAC,WAAWd;SAAgB,MAClEK,AAAS,aAATA,OAAoB,WAAX,GACN,oBAACU,oBAAkBA;QACf,UAAU,IAAMf,UAAU,QAAQ;QAClC,UAAUgB,CAAAA,UAAWhB,UAAU,gBAAgB,CAACgB;QAChD,aAAY;SAEhB,MACHX,AAAS,WAATA,QAAmBC,cAAc,WAAdA,GAChB,oBAACS,oBAAkBA;QACf,SAAST;QACT,sBAAsB;QACtB,aAAY;QACZ,UAAU,IAAMN,UAAU,QAAQ;QAClC,UAAUgB,CAAAA,UAAWhB,UAAU,gBAAgB,CAACgB;SAEpD;AAGhB;AAEO,MAAMC,wBAAwB;IACjC,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,UAAU,oBAAoB;QAC5ChB,mCAAmC,QAAQ,CAACoB;QAC5C,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACC,qBAAmBA;QAAC,WAAWH;qBAC5B,oBAACtB,kDAA0BA;AAGvC"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    onCreateExperiment: () => void;
+}
+export declare const ExperimentsEmptyState: ({ onCreateExperiment }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,103 @@
+import react from "react";
+import { Button, Heading, Link, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+const Illustration = ()=>{
+    const card = {
+        width: 96,
+        height: 64,
+        borderRadius: 8,
+        border: "1px solid var(--wby-color-neutral-muted, #e0e0e0)",
+        overflow: "hidden",
+        background: "#fff"
+    };
+    const bar = {
+        height: 16,
+        background: "#1a1a1a"
+    };
+    const line = {
+        height: 4,
+        width: 48,
+        margin: 8,
+        borderRadius: 4,
+        background: "#d5d5d5"
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 24,
+            marginBottom: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: card
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: bar
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: line
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: card
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: bar
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: line
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 12,
+            background: "#ffb59b",
+            margin: "4px 8px",
+            borderRadius: 4
+        }
+    })), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            position: "absolute",
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: 38,
+            height: 38,
+            borderRadius: "50%",
+            background: "#ffe9e1",
+            color: "#e2572a",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 12,
+            fontWeight: 600
+        }
+    }, "A/B"));
+};
+const ExperimentsEmptyState = ({ onCreateExperiment })=>/*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            textAlign: "center",
+            padding: 32,
+            maxWidth: 420,
+            margin: "48px auto 0"
+        }
+    }, /*#__PURE__*/ react.createElement(Illustration, null), /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, "No experiments on this page"), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            margin: "12px 0 24px"
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Create an A/B experiment to test variants of this page against each other. Split traffic across full-page variants and run one experiment live at a time.")), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        text: "Create experiment",
+        onClick: onCreateExperiment
+    }), /*#__PURE__*/ react.createElement("div", {
+        style: {
+            marginTop: 16
+        }
+    }, /*#__PURE__*/ react.createElement(Link, {
+        to: "https://www.webiny.com/docs",
+        target: "_blank"
+    }, "Learn about A/B testing")));
+export { ExperimentsEmptyState };
+
+//# sourceMappingURL=ExperimentsEmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentsEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, Heading, Text, Link } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface Props {\n    onCreateExperiment: () => void;\n}\n\n/** A/B illustration for the empty state — two page thumbnails with an A/B badge between them. */\nconst Illustration = () => {\n    const card: React.CSSProperties = {\n        width: 96,\n        height: 64,\n        borderRadius: 8,\n        border: \"1px solid var(--wby-color-neutral-muted, #e0e0e0)\",\n        overflow: \"hidden\",\n        background: \"#fff\"\n    };\n    const bar: React.CSSProperties = { height: 16, background: \"#1a1a1a\" };\n    const line: React.CSSProperties = {\n        height: 4,\n        width: 48,\n        margin: 8,\n        borderRadius: 4,\n        background: \"#d5d5d5\"\n    };\n\n    return (\n        <div\n            style={{\n                position: \"relative\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                gap: 24,\n                marginBottom: 24\n            }}\n        >\n            <div style={card}>\n                <div style={bar} />\n                <div style={line} />\n            </div>\n            <div style={card}>\n                <div style={bar} />\n                <div style={line} />\n                <div\n                    style={{\n                        height: 12,\n                        background: \"#ffb59b\",\n                        margin: \"4px 8px\",\n                        borderRadius: 4\n                    }}\n                />\n            </div>\n            <div\n                style={{\n                    position: \"absolute\",\n                    left: \"50%\",\n                    transform: \"translateX(-50%)\",\n                    width: 38,\n                    height: 38,\n                    borderRadius: \"50%\",\n                    background: \"#ffe9e1\",\n                    color: \"#e2572a\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    fontSize: 12,\n                    fontWeight: 600\n                }}\n            >\n                A/B\n            </div>\n        </div>\n    );\n};\n\nexport const ExperimentsEmptyState = ({ onCreateExperiment }: Props) => {\n    return (\n        <div\n            style={{\n                display: \"flex\",\n                flexDirection: \"column\",\n                alignItems: \"center\",\n                textAlign: \"center\",\n                padding: 32,\n                maxWidth: 420,\n                margin: \"48px auto 0\"\n            }}\n        >\n            <Illustration />\n            <Heading level={5}>No experiments on this page</Heading>\n            <div style={{ margin: \"12px 0 24px\" }}>\n                <Text size=\"sm\">\n                    Create an A/B experiment to test variants of this page against each other. Split\n                    traffic across full-page variants and run one experiment live at a time.\n                </Text>\n            </div>\n            <Button\n                variant=\"primary\"\n                icon={<AddIcon />}\n                text=\"Create experiment\"\n                onClick={onCreateExperiment}\n            />\n            <div style={{ marginTop: 16 }}>\n                <Link to=\"https://www.webiny.com/docs\" target=\"_blank\">\n                    Learn about A/B testing\n                </Link>\n            </div>\n        </div>\n    );\n};\n"],"names":["Illustration","card","bar","line","ExperimentsEmptyState","onCreateExperiment","Heading","Text","Button","AddIcon","Link"],"mappings":";;;AASA,MAAMA,eAAe;IACjB,MAAMC,OAA4B;QAC9B,OAAO;QACP,QAAQ;QACR,cAAc;QACd,QAAQ;QACR,UAAU;QACV,YAAY;IAChB;IACA,MAAMC,MAA2B;QAAE,QAAQ;QAAI,YAAY;IAAU;IACrE,MAAMC,OAA4B;QAC9B,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,cAAc;QACd,YAAY;IAChB;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,UAAU;YACV,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,KAAK;YACL,cAAc;QAClB;qBAEA,oBAAC;QAAI,OAAOF;qBACR,oBAAC;QAAI,OAAOC;sBACZ,oBAAC;QAAI,OAAOC;uBAEhB,oBAAC;QAAI,OAAOF;qBACR,oBAAC;QAAI,OAAOC;sBACZ,oBAAC;QAAI,OAAOC;sBACZ,oBAAC;QACG,OAAO;YACH,QAAQ;YACR,YAAY;YACZ,QAAQ;YACR,cAAc;QAClB;uBAGR,oBAAC;QACG,OAAO;YACH,UAAU;YACV,MAAM;YACN,WAAW;YACX,OAAO;YACP,QAAQ;YACR,cAAc;YACd,YAAY;YACZ,OAAO;YACP,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,UAAU;YACV,YAAY;QAChB;OACH;AAKb;AAEO,MAAMC,wBAAwB,CAAC,EAAEC,kBAAkB,EAAS,GACxD,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,eAAe;YACf,YAAY;YACZ,WAAW;YACX,SAAS;YACT,UAAU;YACV,QAAQ;QACZ;qBAEA,oBAACL,cAAYA,OAAAA,WAAAA,GACb,oBAACM,SAAOA;QAAC,OAAO;OAAG,8CACnB,oBAAC;QAAI,OAAO;YAAE,QAAQ;QAAc;qBAChC,oBAACC,MAAIA;QAAC,MAAK;OAAK,6KAKpB,oBAACC,QAAMA;QACH,SAAQ;QACR,oBAAM,oBAACC,gBAAOA;QACd,MAAK;QACL,SAASJ;sBAEb,oBAAC;QAAI,OAAO;YAAE,WAAW;QAAG;qBACxB,oBAACK,MAAIA;QAAC,IAAG;QAA8B,QAAO;OAAS"}

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

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

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

@@ -0,0 +1,58 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ExperimentsEmptyState } from "./ExperimentsEmptyState.js";
+import { ExperimentCard } from "./ExperimentCard.js";
+const ExperimentsListView_ExperimentsListView = observer(function({ presenter }) {
+    const { cards } = presenter.vm;
+    if (0 === cards.length) return /*#__PURE__*/ react.createElement(ExperimentsEmptyState, {
+        onCreateExperiment: ()=>presenter.showCreate()
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            padding: 24
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: 16,
+            marginBottom: 20
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, "Only one experiment can be active at a time. Activating one deactivates the currently active experiment."), /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: ()=>presenter.showCreate(),
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            border: "none",
+            background: "#e2572a",
+            color: "#fff",
+            borderRadius: 8,
+            padding: "7px 14px",
+            fontWeight: 600,
+            fontSize: 13,
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            flexShrink: 0
+        }
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        style: {
+            width: 18,
+            height: 18,
+            fill: "currentColor"
+        }
+    }), "New")), cards.map((card)=>/*#__PURE__*/ react.createElement(ExperimentCard, {
+            key: card.experiment.id,
+            presenter: presenter,
+            card: card
+        })));
+});
+export { ExperimentsListView_ExperimentsListView as ExperimentsListView };
+
+//# sourceMappingURL=ExperimentsListView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/experiments/ExperimentsManager/components/ExperimentsListView.js","sources":["../../../../../src/presentation/experiments/ExperimentsManager/components/ExperimentsListView.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ExperimentsEmptyState } from \"./ExperimentsEmptyState.js\";\nimport { ExperimentCard } from \"./ExperimentCard.js\";\nimport type { IExperimentsManagerPresenter } from \"../abstractions/ExperimentsManagerPresenter.js\";\n\ninterface Props {\n    presenter: IExperimentsManagerPresenter;\n}\n\nexport const ExperimentsListView = observer(function ExperimentsListView({ presenter }: Props) {\n    const { cards } = presenter.vm;\n\n    if (cards.length === 0) {\n        return <ExperimentsEmptyState onCreateExperiment={() => presenter.showCreate()} />;\n    }\n\n    return (\n        <div style={{ padding: 24 }}>\n            <div\n                style={{\n                    display: \"flex\",\n                    alignItems: \"flex-start\",\n                    justifyContent: \"space-between\",\n                    gap: 16,\n                    marginBottom: 20\n                }}\n            >\n                <Text size=\"sm\">\n                    Only one experiment can be active at a time. Activating one deactivates the\n                    currently active experiment.\n                </Text>\n                <button\n                    type=\"button\"\n                    onClick={() => presenter.showCreate()}\n                    style={{\n                        display: \"inline-flex\",\n                        alignItems: \"center\",\n                        gap: 6,\n                        border: \"none\",\n                        background: \"#e2572a\",\n                        color: \"#fff\",\n                        borderRadius: 8,\n                        padding: \"7px 14px\",\n                        fontWeight: 600,\n                        fontSize: 13,\n                        cursor: \"pointer\",\n                        whiteSpace: \"nowrap\",\n                        flexShrink: 0\n                    }}\n                >\n                    <AddIcon style={{ width: 18, height: 18, fill: \"currentColor\" }} />\n                    New\n                </button>\n            </div>\n\n            {cards.map(card => (\n                <ExperimentCard key={card.experiment.id} presenter={presenter} card={card} />\n            ))}\n        </div>\n    );\n});\n"],"names":["ExperimentsListView","observer","presenter","cards","ExperimentsEmptyState","Text","AddIcon","card","ExperimentCard"],"mappings":";;;;;;AAYO,MAAMA,0CAAsBC,SAAS,SAA6B,EAAEC,SAAS,EAAS;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGD,UAAU,EAAE;IAE9B,IAAIC,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO,WAAP,GAAO,oBAACC,uBAAqBA;QAAC,oBAAoB,IAAMF,UAAU,UAAU;;IAGhF,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;QAAG;qBACtB,oBAAC;QACG,OAAO;YACH,SAAS;YACT,YAAY;YACZ,gBAAgB;YAChB,KAAK;YACL,cAAc;QAClB;qBAEA,oBAACG,MAAIA;QAAC,MAAK;OAAK,2HAIhB,oBAAC;QACG,MAAK;QACL,SAAS,IAAMH,UAAU,UAAU;QACnC,OAAO;YACH,SAAS;YACT,YAAY;YACZ,KAAK;YACL,QAAQ;YACR,YAAY;YACZ,OAAO;YACP,cAAc;YACd,SAAS;YACT,YAAY;YACZ,UAAU;YACV,QAAQ;YACR,YAAY;YACZ,YAAY;QAChB;qBAEA,oBAACI,gBAAOA;QAAC,OAAO;YAAE,OAAO;YAAI,QAAQ;YAAI,MAAM;QAAe;QAAK,SAK1EH,MAAM,GAAG,CAACI,CAAAA,OAAAA,WAAAA,GACP,oBAACC,gBAAcA;YAAC,KAAKD,KAAK,UAAU,CAAC,EAAE;YAAE,WAAWL;YAAW,MAAMK;;AAIrF"}

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

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