@webiny/app-headless-cms 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/admin/components/ContentModelEditor/ContentModelEditor.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from "react";
-import { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from "@webiny/app-admin";
+import react, { useEffect, useState } from "react";
+import { makeDecoratable, useDialogs } from "@webiny/app-admin";
 import { useRouter } from "@webiny/app";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { Heading, OverlayLoader, Tabs, Text, TimeAgo } from "@webiny/admin-ui";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as PreviewIcon } from "@webiny/icons/fullscreen.svg";
+import { IconButton, OverlayLoader, SegmentedControlPrimitive, Tag, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/left_panel_open.svg";
+import { ReactComponent as view_compact_alt_svg_ReactComponent } from "@webiny/icons/view_compact_alt.svg";
+import { ReactComponent as view_day_svg_ReactComponent } from "@webiny/icons/view_day.svg";
 import { FieldsSidebar } from "./FieldsSidebar.js";
 import { FieldEditor } from "../FieldEditor/index.js";
 import { PreviewTab } from "./PreviewTab.js";
@@ -12,126 +13,132 @@ import Header from "./Header.js";
 import DragPreview from "../DragPreview.js";
 import { useModelEditor } from "./useModelEditor.js";
 import { ContentEntryEditorWithConfig } from "../../config/contentEntries/index.js";
-import { ContentEntryProvider } from "../../views/contentEntries/ContentEntry/ContentEntryContext.js";
-import { ContentEntriesProvider } from "../../views/contentEntries/ContentEntriesContext.js";
 import { ModelIsBeingDeletedError } from "./ModelIsBeingDeletedError/index.js";
+const VIEW_ITEMS = [
+    {
+        id: "compact",
+        value: "compact",
+        label: "",
+        icon: /*#__PURE__*/ react.createElement(view_compact_alt_svg_ReactComponent, null)
+    },
+    {
+        id: "full",
+        value: "full",
+        label: "",
+        icon: /*#__PURE__*/ react.createElement(view_day_svg_ReactComponent, null)
+    }
+];
 const t = i18n.ns("app-headless-cms/admin/editor");
-const prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;
-export const ContentModelEditor = makeDecoratable("ContentModelEditor", () => {
-  const {
-    data,
-    setData,
-    isPristine,
-    contentModel
-  } = useModelEditor();
-  const router = useRouter();
-  const dialogs = useDialogs();
-
-  // Add a class to <body> to trigger global styles while this component is active
-  useEffect(() => {
-    document.body.classList.add("overflow-hidden");
-    return () => {
-      document.body.classList.remove("overflow-hidden");
+const ContentModelEditor_prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;
+const ContentModelEditor = makeDecoratable("ContentModelEditor", ()=>{
+    const { data, setData, isPristine } = useModelEditor();
+    const router = useRouter();
+    const dialogs = useDialogs();
+    useEffect(()=>{
+        document.body.classList.add("overflow-hidden");
+        return ()=>{
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, []);
+    const isPristineRef = react.useRef(isPristine);
+    isPristineRef.current = isPristine;
+    useEffect(()=>router.addTransitionGuard({
+            guard: ()=>!isPristineRef.current,
+            onBlocked: ()=>{
+                dialogs.showDialog({
+                    title: "Confirm Navigation",
+                    content: ContentModelEditor_prompt,
+                    acceptLabel: "Yes!",
+                    cancelLabel: "No, stay here.",
+                    onAccept: ()=>router.confirmTransition(),
+                    onClose: ()=>router.cancelTransition()
+                });
+            }
+        }), []);
+    const [activeTab, setActiveTab] = useState("edit");
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [activeView, setActiveView] = useState("compact");
+    const onChange = ({ fields, layout })=>{
+        setData((data)=>({
+                ...data,
+                fields,
+                layout
+            }));
     };
-  }, []);
-  const isPristineRef = React.useRef(isPristine);
-  isPristineRef.current = isPristine;
-  useEffect(() => {
-    return router.addTransitionGuard({
-      guard: () => !isPristineRef.current,
-      onBlocked: () => {
-        dialogs.showDialog({
-          title: "Confirm Navigation",
-          content: prompt,
-          acceptLabel: "Yes!",
-          cancelLabel: "No, stay here.",
-          onAccept: () => router.confirmTransition(),
-          onClose: () => router.cancelTransition()
-        });
-      }
+    if (!data) return /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading content model..."
     });
-  }, []);
-  const [activeTab, setActiveTab] = useState("edit");
-  const onChange = ({
-    fields,
-    layout
-  }) => {
-    setData(data => ({
-      ...data,
-      fields,
-      layout
-    }));
-  };
-  if (!data) {
-    return /*#__PURE__*/React.createElement(OverlayLoader, {
-      text: "Loading content model..."
+    if (data.isBeingDeleted) return /*#__PURE__*/ react.createElement(ModelIsBeingDeletedError, {
+        model: data
     });
-  } else if (data.isBeingDeleted) {
-    return /*#__PURE__*/React.createElement(ModelIsBeingDeletedError, {
-      model: data
-    });
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "content-model-editor flex-1"
-  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
-    className: "w-full overflow-y-auto h-main-content"
-  }, /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, {
-    span: 4,
-    className: "bg-neutral-light"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll"
-  }, /*#__PURE__*/React.createElement(FieldsSidebar, {
-    onFieldDragStart: () => {
-      setActiveTab("edit");
-    }
-  }))), /*#__PURE__*/React.createElement(RightPanel, {
-    span: 8,
-    className: "bg-neutral-base"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "h-full overflow-y-scroll"
-  }, contentModel && /*#__PURE__*/React.createElement("div", {
-    className: "px-xl pt-lg pb-md-extra"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: 4
-  }, contentModel.name), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: "text-neutral-muted"
-  }, `Created by ${contentModel.createdBy.displayName}. Last modified: `, /*#__PURE__*/React.createElement(TimeAgo, {
-    datetime: contentModel.savedOn
-  }), ".")), /*#__PURE__*/React.createElement(Tabs, {
-    size: "md",
-    spacing: "xl",
-    separator: true,
-    value: String(activeTab),
-    onValueChange: setActiveTab,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "edit",
-      value: "edit",
-      trigger: "Edit",
-      icon: /*#__PURE__*/React.createElement(EditIcon, null),
-      "data-testid": "cms.editor.tab.edit",
-      content: /*#__PURE__*/React.createElement("div", {
-        className: "relative mb-lg"
-      }, /*#__PURE__*/React.createElement(FieldEditor, {
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "content-model-editor flex-1"
+    }, /*#__PURE__*/ react.createElement(Header, {
+        activeTab: activeTab,
+        onTabChange: setActiveTab
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "w-full overflow-y-auto h-main-content"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex h-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0 bg-neutral-base border-r border-neutral-dimmed overflow-hidden h-main-content relative transition-[width] duration-200 ease-in-out",
+        style: {
+            width: isSidebarOpen ? 200 : 45
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "transition-opacity duration-150 " + (isSidebarOpen ? "opacity-100 delay-75" : "opacity-0 pointer-events-none")
+    }, /*#__PURE__*/ react.createElement(FieldsSidebar, {
+        onFieldDragStart: ()=>setActiveTab("edit"),
+        onCollapse: ()=>setIsSidebarOpen(false)
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-0 flex flex-col items-center pt-md gap-md transition-opacity duration-150 " + (isSidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100 delay-75")
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "xs",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>setIsSidebarOpen(true)
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-sm font-semibold text-neutral-strong [writing-mode:vertical-rl]"
+    }, "Fields"))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 overflow-y-scroll h-main-content " + ("edit" === activeTab ? "fill-grid" : "bg-neutral-subtle")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "sticky top-0 left-0 z-10 p-md flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement("div", null, "edit" === activeTab && /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "font-semibold text-neutral-primary"
+    }, "Model editor"), "preview" === activeTab && /*#__PURE__*/ react.createElement(Tag, {
+        content: "Preview",
+        variant: "warning"
+    })), /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+        variant: "light",
+        value: activeView,
+        onChange: setActiveView,
+        items: VIEW_ITEMS
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "pb-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: " transition-[width] duration-200 ease-in-out",
+        style: {
+            width: "compact" === activeView ? "704px" : "90%",
+            marginLeft: "auto",
+            marginRight: "auto"
+        }
+    }, "edit" === activeTab && /*#__PURE__*/ react.createElement("div", {
+        className: "relative",
+        "data-testid": "cms.editor.tab.edit"
+    }, /*#__PURE__*/ react.createElement(FieldEditor, {
         fields: data.fields,
         layout: data.layout || [],
         onChange: onChange
-      }))
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "preview",
-      value: "preview",
-      trigger: "Preview",
-      icon: /*#__PURE__*/React.createElement(PreviewIcon, null),
-      "data-testid": "cms.editor.tab.preview",
-      content: /*#__PURE__*/React.createElement(ContentEntryEditorWithConfig, null, /*#__PURE__*/React.createElement(ContentEntriesProvider, {
-        contentModel: data
-      }, /*#__PURE__*/React.createElement(ContentEntryProvider, {
-        readonly: true
-      }, /*#__PURE__*/React.createElement(PreviewTab, {
-        activeTab: activeTab === "preview"
-      }))))
-    })]
-  })))), /*#__PURE__*/React.createElement(DragPreview, null)));
+    })), "preview" === activeTab && /*#__PURE__*/ react.createElement("div", {
+        className: "px-xxl py-lg",
+        "data-testid": "cms.editor.tab.preview"
+    }, /*#__PURE__*/ react.createElement(ContentEntryEditorWithConfig, null, /*#__PURE__*/ react.createElement(PreviewTab, {
+        activeTab: true,
+        onSwitchToEdit: ()=>setActiveTab("edit")
+    }))))))), /*#__PURE__*/ react.createElement(DragPreview, null)));
 });
+export { ContentModelEditor };
 
 //# sourceMappingURL=ContentModelEditor.js.map

package/admin/components/ContentModelEditor/ContentModelEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","makeDecoratable","useDialogs","LeftPanel","RightPanel","SplitView","useRouter","i18n","Heading","OverlayLoader","Tabs","Text","TimeAgo","ReactComponent","EditIcon","PreviewIcon","FieldsSidebar","FieldEditor","PreviewTab","Header","DragPreview","useModelEditor","ContentEntryEditorWithConfig","ContentEntryProvider","ContentEntriesProvider","ModelIsBeingDeletedError","t","ns","prompt","ContentModelEditor","data","setData","isPristine","contentModel","router","dialogs","document","body","classList","add","remove","isPristineRef","useRef","current","addTransitionGuard","guard","onBlocked","showDialog","title","content","acceptLabel","cancelLabel","onAccept","confirmTransition","onClose","cancelTransition","activeTab","setActiveTab","onChange","fields","layout","createElement","text","isBeingDeleted","model","className","span","onFieldDragStart","level","name","size","createdBy","displayName","datetime","savedOn","spacing","separator","value","String","onValueChange","tabs","Tab","key","trigger","icon","readonly"],"sources":["ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Heading, OverlayLoader, Tabs, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/fullscreen.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext.js\";\nimport { ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n    const { data, setData, isPristine, contentModel } = useModelEditor();\n    const router = useRouter();\n    const dialogs = useDialogs();\n\n    // Add a class to <body> to trigger global styles while this component is active\n    useEffect(() => {\n        document.body.classList.add(\"overflow-hidden\");\n\n        return () => {\n            document.body.classList.remove(\"overflow-hidden\");\n        };\n    }, []);\n\n    const isPristineRef = React.useRef(isPristine);\n    isPristineRef.current = isPristine;\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => !isPristineRef.current,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content: prompt,\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => router.confirmTransition(),\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const [activeTab, setActiveTab] = useState<string>(\"edit\");\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <OverlayLoader text={\"Loading content model...\"} />;\n    } else if (data.isBeingDeleted) {\n        return <ModelIsBeingDeletedError model={data} />;\n    }\n\n    return (\n        <div className={\"content-model-editor flex-1\"}>\n            <Header />\n            <div className={\"w-full overflow-y-auto h-main-content\"}>\n                <SplitView>\n                    <LeftPanel span={4} className={\"bg-neutral-light\"}>\n                        <div className={\"px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll\"}>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    setActiveTab(\"edit\");\n                                }}\n                            />\n                        </div>\n                    </LeftPanel>\n                    <RightPanel span={8} className={\"bg-neutral-base\"}>\n                        <div className={\"h-full overflow-y-scroll\"}>\n                            {contentModel && (\n                                <div className={\"px-xl pt-lg pb-md-extra\"}>\n                                    <Heading level={4}>{contentModel.name}</Heading>\n                                    <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n                                        {`Created by ${contentModel.createdBy.displayName}. Last modified: `}\n                                        <TimeAgo datetime={contentModel.savedOn} />.\n                                    </Text>\n                                </div>\n                            )}\n                            <Tabs\n                                size={\"md\"}\n                                spacing={\"xl\"}\n                                separator={true}\n                                value={String(activeTab)}\n                                onValueChange={setActiveTab}\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"edit\"}\n                                        value={\"edit\"}\n                                        trigger={\"Edit\"}\n                                        icon={<EditIcon />}\n                                        data-testid={\"cms.editor.tab.edit\"}\n                                        content={\n                                            <div className={\"relative mb-lg\"}>\n                                                <FieldEditor\n                                                    fields={data.fields}\n                                                    layout={data.layout || []}\n                                                    onChange={onChange}\n                                                />\n                                            </div>\n                                        }\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"preview\"}\n                                        value={\"preview\"}\n                                        trigger={\"Preview\"}\n                                        icon={<PreviewIcon />}\n                                        data-testid={\"cms.editor.tab.preview\"}\n                                        content={\n                                            <ContentEntryEditorWithConfig>\n                                                <ContentEntriesProvider contentModel={data}>\n                                                    <ContentEntryProvider readonly={true}>\n                                                        <PreviewTab\n                                                            activeTab={activeTab === \"preview\"}\n                                                        />\n                                                    </ContentEntryProvider>\n                                                </ContentEntriesProvider>\n                                            </ContentEntryEditorWithConfig>\n                                        }\n                                    />\n                                ]}\n                            />\n                        </div>\n                    </RightPanel>\n                </SplitView>\n                <DragPreview />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditor.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { IconButton, OverlayLoader, SegmentedControlPrimitive, Tag, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as ExpandSidebarIcon } from \"@webiny/icons/left_panel_open.svg\";\nimport { ReactComponent as ViewCompactAltIcon } from \"@webiny/icons/view_compact_alt.svg\";\nimport { ReactComponent as ViewDayIcon } from \"@webiny/icons/view_day.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\n\nconst VIEW_ITEMS = [\n    { id: \"compact\", value: \"compact\", label: \"\", icon: <ViewCompactAltIcon /> },\n    { id: \"full\", value: \"full\", label: \"\", icon: <ViewDayIcon /> }\n];\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n    const { data, setData, isPristine } = useModelEditor();\n    const router = useRouter();\n    const dialogs = useDialogs();\n\n    // Add a class to <body> to trigger global styles while this component is active\n    useEffect(() => {\n        document.body.classList.add(\"overflow-hidden\");\n\n        return () => {\n            document.body.classList.remove(\"overflow-hidden\");\n        };\n    }, []);\n\n    const isPristineRef = React.useRef(isPristine);\n    isPristineRef.current = isPristine;\n\n    useEffect(() => {\n        return router.addTransitionGuard({\n            guard: () => !isPristineRef.current,\n            onBlocked: () => {\n                dialogs.showDialog({\n                    title: \"Confirm Navigation\",\n                    content: prompt,\n                    acceptLabel: \"Yes!\",\n                    cancelLabel: \"No, stay here.\",\n                    onAccept: () => router.confirmTransition(),\n                    onClose: () => router.cancelTransition()\n                });\n            }\n        });\n    }, []);\n\n    const [activeTab, setActiveTab] = useState<string>(\"edit\");\n    const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n    const [activeView, setActiveView] = useState(\"compact\");\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <OverlayLoader text={\"Loading content model...\"} />;\n    } else if (data.isBeingDeleted) {\n        return <ModelIsBeingDeletedError model={data} />;\n    }\n\n    return (\n        <div className={\"content-model-editor flex-1\"}>\n            <Header activeTab={activeTab} onTabChange={setActiveTab} />\n            <div className={\"w-full overflow-y-auto h-main-content\"}>\n                <div className={\"flex h-full\"}>\n                    <div\n                        className={\n                            \"shrink-0 bg-neutral-base border-r border-neutral-dimmed overflow-hidden h-main-content relative transition-[width] duration-200 ease-in-out\"\n                        }\n                        style={{ width: isSidebarOpen ? 200 : 45 }}\n                    >\n                        {/* Expanded content */}\n                        <div\n                            className={\n                                \"transition-opacity duration-150 \" +\n                                (isSidebarOpen\n                                    ? \"opacity-100 delay-75\"\n                                    : \"opacity-0 pointer-events-none\")\n                            }\n                        >\n                            <FieldsSidebar\n                                onFieldDragStart={() => setActiveTab(\"edit\")}\n                                onCollapse={() => setIsSidebarOpen(false)}\n                            />\n                        </div>\n                        {/* Collapsed strip */}\n                        <div\n                            className={\n                                \"absolute inset-0 flex flex-col items-center pt-md gap-md transition-opacity duration-150 \" +\n                                (!isSidebarOpen\n                                    ? \"opacity-100 delay-75\"\n                                    : \"opacity-0 pointer-events-none\")\n                            }\n                        >\n                            <IconButton\n                                variant={\"ghost\"}\n                                size={\"xs\"}\n                                icon={<ExpandSidebarIcon />}\n                                onClick={() => setIsSidebarOpen(true)}\n                            />\n                            <span\n                                className={\n                                    \"text-sm font-semibold text-neutral-strong [writing-mode:vertical-rl]\"\n                                }\n                            >\n                                Fields\n                            </span>\n                        </div>\n                    </div>\n                    <div\n                        className={\n                            \"flex-1 overflow-y-scroll h-main-content \" +\n                            (activeTab === \"edit\" ? \"fill-grid\" : \"bg-neutral-subtle\")\n                        }\n                    >\n                        <div\n                            className={\n                                \"sticky top-0 left-0 z-10 p-md flex items-center justify-between\"\n                            }\n                        >\n                            <div>\n                                {activeTab === \"edit\" && (\n                                    <Text\n                                        as=\"div\"\n                                        size={\"sm\"}\n                                        className={\"font-semibold text-neutral-primary\"}\n                                    >\n                                        Model editor\n                                    </Text>\n                                )}\n                                {activeTab === \"preview\" && (\n                                    <Tag content={\"Preview\"} variant={\"warning\"} />\n                                )}\n                            </div>\n                            <SegmentedControlPrimitive\n                                variant={\"light\"}\n                                value={activeView}\n                                onChange={setActiveView}\n                                items={VIEW_ITEMS}\n                            />\n                        </div>\n                        <div className={\"pb-lg\"}>\n                            <div\n                                className={\" transition-[width] duration-200 ease-in-out\"}\n                                style={{\n                                    width: activeView === \"compact\" ? \"704px\" : \"90%\",\n                                    marginLeft: \"auto\",\n                                    marginRight: \"auto\"\n                                }}\n                            >\n                                {activeTab === \"edit\" && (\n                                    <div className={\"relative\"} data-testid={\"cms.editor.tab.edit\"}>\n                                        <FieldEditor\n                                            fields={data.fields}\n                                            layout={data.layout || []}\n                                            onChange={onChange}\n                                        />\n                                    </div>\n                                )}\n                                {activeTab === \"preview\" && (\n                                    <div\n                                        className={\"px-xxl py-lg\"}\n                                        data-testid={\"cms.editor.tab.preview\"}\n                                    >\n                                        <ContentEntryEditorWithConfig>\n                                            <PreviewTab\n                                                activeTab={true}\n                                                onSwitchToEdit={() => setActiveTab(\"edit\")}\n                                            />\n                                        </ContentEntryEditorWithConfig>\n                                    </div>\n                                )}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <DragPreview />\n            </div>\n        </div>\n    );\n});\n"],"names":["VIEW_ITEMS","ViewCompactAltIcon","ViewDayIcon","t","i18n","prompt","ContentModelEditor","makeDecoratable","data","setData","isPristine","useModelEditor","router","useRouter","dialogs","useDialogs","useEffect","document","isPristineRef","React","activeTab","setActiveTab","useState","isSidebarOpen","setIsSidebarOpen","activeView","setActiveView","onChange","fields","layout","OverlayLoader","ModelIsBeingDeletedError","Header","FieldsSidebar","IconButton","ExpandSidebarIcon","Text","Tag","SegmentedControlPrimitive","FieldEditor","ContentEntryEditorWithConfig","PreviewTab","DragPreview"],"mappings":"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"}

package/admin/components/ContentModelEditor/ContentModelEditorProvider.d.ts

@@ -1,16 +1,15 @@
 import React from "react";
-import type { ApolloClient } from "apollo-client";
-import type { GetCmsModelQueryResponse, UpdateCmsModelMutationResponse } from "../../../admin/graphql/contentModels.js";
 import type { CmsModel } from "../../../types.js";
-import type { FetchResult } from "apollo-link";
-import type { FieldOption } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+import type { FieldOption } from "./fieldOptions.js";
 export interface ContentModelEditorProviderContext {
-    apolloClient: ApolloClient<any>;
     data: CmsModel;
     contentModel: CmsModel;
     isPristine: boolean;
-    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;
-    saveContentModel: (data?: CmsModel) => Promise<UpdateCmsModelMutationResponse["updateContentModel"]>;
+    getContentModel: (modelId: string) => Promise<void>;
+    saveContentModel: (data?: CmsModel) => Promise<{
+        data: CmsModel | null;
+        error: any | null;
+    }>;
     setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;
     activeTabIndex: number;
     setActiveTabIndex: (index: number) => void;
@@ -32,9 +31,8 @@ interface Reducer {
 }
 export declare const contentModelEditorReducer: Reducer;
 interface ContentModelEditorProviderProps {
-    apolloClient: ApolloClient<any>;
     modelId?: string;
     children: React.ReactElement;
 }
-export declare const ContentModelEditorProvider: ({ children, apolloClient, modelId }: ContentModelEditorProviderProps) => React.JSX.Element;
+export declare const ContentModelEditorProvider: ({ children, modelId }: ContentModelEditorProviderProps) => React.JSX.Element;
 export {};