@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/admin/components/ContentModelEditor/ContentModelEditor.js

@@ -0,0 +1,144 @@
+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 { 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";
+import Header from "./Header.js";
+import DragPreview from "../DragPreview.js";
+import { useModelEditor } from "./useModelEditor.js";
+import { ContentEntryEditorWithConfig } from "../../config/contentEntries/index.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 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
+            }));
+    };
+    if (!data) return /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading content model..."
+    });
+    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, {
+        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
+    })), "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

@@ -0,0 +1 @@
+{"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,20 +1,19 @@
-import React, { MutableRefObject } from "react";
-import { ApolloClient } from "apollo-client";
-import { GetCmsModelQueryResponse, UpdateCmsModelMutationResponse } from "../../graphql/contentModels";
-import { CmsModel } from "../../../types";
-import { FetchResult } from "apollo-link";
-import { TabsImperativeApi } from "@webiny/ui/Tabs";
+import React from "react";
+import type { CmsModel } from "../../../types.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>;
-    tabsRef: MutableRefObject<TabsImperativeApi | undefined>;
     activeTabIndex: number;
     setActiveTabIndex: (index: number) => void;
+    fieldOptions: FieldOption[];
 }
 export declare const contentModelEditorContext: React.Context<ContentModelEditorProviderContext | undefined>;
 interface State {
@@ -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: React.FC<ContentModelEditorProviderProps>;
+export declare const ContentModelEditorProvider: ({ children, modelId }: ContentModelEditorProviderProps) => React.JSX.Element;
 export {};

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js

@@ -1,260 +1,178 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.contentModelEditorReducer = exports.contentModelEditorContext = exports.ContentModelEditorProvider = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _get2 = _interopRequireDefault(require("lodash/get"));
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _reactRouter = require("@webiny/react-router");
-var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
-var _contentModels = require("../../graphql/contentModels");
-var _viewsGraphql = require("../../viewsGraphql");
-var _ModelProvider = require("../ModelProvider");
-var contentModelEditorContext = /*#__PURE__*/_react.default.createContext(undefined);
-exports.contentModelEditorContext = contentModelEditorContext;
-var contentModelEditorReducer = function contentModelEditorReducer(prev, action) {
-  var data = action.data,
-    type = action.type;
-  switch (type) {
-    case "state":
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), data);
-    case "data":
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-        data: data
-      });
-    default:
-      return prev;
-  }
+import react, { useCallback, useEffect, useMemo, useReducer } from "react";
+import pick from "lodash/pick.js";
+import { useRouter, useSnackbar } from "@webiny/app-admin";
+import { useContainer, useFeature } from "@webiny/app";
+import { ModelProvider } from "../ModelProvider/index.js";
+import { createHashing } from "@webiny/app/utils/index.js";
+import { Routes } from "../../../routes.js";
+import { buildFieldLabelPrefixes, buildFieldOptions } from "./fieldOptions.js";
+import { CmsLayoutFieldType } from "../../../presentation/fieldTypes/abstractions.js";
+import { GetModelFeature } from "../../../features/model/getModel/feature.js";
+import { UpdateModelFeature } from "../../../features/model/updateModel/feature.js";
+const contentModelEditorContext = /*#__PURE__*/ react.createContext(void 0);
+const contentModelEditorReducer = (prev, action)=>{
+    const { data, type } = action;
+    switch(type){
+        case "state":
+            return {
+                ...prev,
+                ...data
+            };
+        case "data":
+            return {
+                ...prev,
+                data: data
+            };
+        default:
+            return prev;
+    }
 };
-
-/**
- * Cleanup is required because backend always expects string value in predefined values entries
- */
-exports.contentModelEditorReducer = contentModelEditorReducer;
-var cleanupModelDataFields = function cleanupModelDataFields(fields) {
-  return fields.map(function (field) {
-    var predefinedValues = field.predefinedValues;
-    var _ref = predefinedValues || {},
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? false : _ref$enabled,
-      _ref$values = _ref.values,
-      values = _ref$values === void 0 ? [] : _ref$values;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, field), {}, {
-      predefinedValues: {
-        enabled: enabled,
-        values: values.map(function (_ref2) {
-          var label = _ref2.label,
-            value = _ref2.value,
-            selected = _ref2.selected;
-          return {
-            label: label,
-            selected: selected || false,
-            value: String(value)
-          };
-        })
-      }
+const hashModel = createHashing("SHA-256");
+const cleanupModelDataFields = (fields)=>fields.map((field)=>{
+        const { predefinedValues } = field;
+        const { enabled = false, values = [] } = predefinedValues || {};
+        return {
+            ...field,
+            predefinedValues: {
+                enabled,
+                values: values.map(({ label, value, selected })=>({
+                        label,
+                        selected: selected || false,
+                        value: String(value)
+                    }))
+            }
+        };
     });
-  });
-};
-var cleanupModelData = function cleanupModelData(data) {
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
-    fields: cleanupModelDataFields(data.fields)
-  });
-};
-var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
-  var children = _ref3.children,
-    apolloClient = _ref3.apolloClient,
-    modelId = _ref3.modelId;
-  var _useReducer = (0, _react.useReducer)(contentModelEditorReducer, {
-      modelId: modelId || null,
-      isPristine: true,
-      data: null,
-      activeTabIndex: 0
-    }),
-    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  var tabsRef = (0, _react.useRef)();
-  var _useRouter = (0, _reactRouter.useRouter)(),
-    history = _useRouter.history;
-  var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var setPristine = function setPristine(flag) {
-    dispatch({
-      type: "state",
-      data: {
-        isPristine: flag
-      }
+const cleanupModelData = (data)=>({
+        ...data,
+        fields: cleanupModelDataFields(data.fields)
     });
-  };
-  var saveContentModel = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(data) {
-      var modelData, response;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!data) {
-              data = state.data;
+const createDefaultState = (modelId)=>({
+        modelId: modelId || null,
+        isPristine: true,
+        data: null,
+        activeTabIndex: 0
+    });
+const ContentModelEditorProvider = ({ children, modelId })=>{
+    const { useCase: getModelUseCase } = useFeature(GetModelFeature);
+    const { useCase: updateModelUseCase } = useFeature(UpdateModelFeature);
+    const [state, dispatch] = useReducer(contentModelEditorReducer, createDefaultState(modelId));
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const setPristine = (flag)=>{
+        dispatch({
+            type: "state",
+            data: {
+                isPristine: flag
             }
-            modelData = (0, _pick.default)(data, ["group", "layout", "fields", "tags", "name", "settings", "description", "titleFieldId", "descriptionFieldId", "imageFieldId", "icon"]);
-            _context.next = 4;
-            return apolloClient.mutate({
-              mutation: _contentModels.UPDATE_CONTENT_MODEL,
-              variables: {
+        });
+    };
+    const saveContentModel = async (data)=>{
+        if (!data) data = state.data;
+        const modelData = pick(data, [
+            "group",
+            "layout",
+            "fields",
+            "tags",
+            "name",
+            "settings",
+            "description",
+            "titleFieldId",
+            "descriptionFieldId",
+            "imageFieldId",
+            "icon"
+        ]);
+        try {
+            const result = await updateModelUseCase.execute({
                 modelId: data.modelId,
                 data: cleanupModelData(modelData)
-              },
-              refetchQueries: [{
-                query: _viewsGraphql.LIST_MENU_CONTENT_GROUPS_MODELS
-              }]
             });
-          case 4:
-            response = _context.sent;
             setPristine(true);
-            if (!(!response.data || !response.data.updateContentModel)) {
-              _context.next = 8;
-              break;
-            }
-            return _context.abrupt("return", {
-              data: null,
-              error: null
-            });
-          case 8:
-            return _context.abrupt("return", response.data.updateContentModel);
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function saveContentModel(_x) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var setActiveTabIndex = (0, _react.useCallback)(function (activeTabIndex) {
-    dispatch({
-      type: "state",
-      data: {
-        activeTabIndex: activeTabIndex
-      }
-    });
-  }, []);
-
-  /**
-   * Set form data by providing a callback, which receives a fresh copy of data on which you can work on.
-   * Return new data once finished.
-   */
-  var setData = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(setter) {
-      var saveModel,
-        data,
-        _args2 = arguments;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            saveModel = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false;
-            setPristine(false);
-            data = setter(state.data);
-            dispatch({
-              type: "data",
-              data: data
-            });
-            if (saveModel) {
-              _context2.next = 6;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 6:
-            _context2.next = 8;
-            return saveContentModel(data);
-          case 8:
-          case "end":
-            return _context2.stop();
+            return {
+                data: result,
+                error: null
+            };
+        } catch (ex) {
+            return {
+                data: null,
+                error: {
+                    message: ex.message
+                }
+            };
         }
-      }, _callee2);
-    }));
-    return function setData(_x2) {
-      return _ref5.apply(this, arguments);
     };
-  }();
-  var getContentModel = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(modelId) {
-      var response, _get, data, error;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            _context3.next = 2;
-            return apolloClient.query({
-              query: _contentModels.GET_CONTENT_MODEL,
-              variables: {
-                modelId: modelId
-              }
-            });
-          case 2:
-            response = _context3.sent;
-            _get = (0, _get2.default)(response, "data.getContentModel"), data = _get.data, error = _get.error;
-            if (!error) {
-              _context3.next = 6;
-              break;
+    const setActiveTabIndex = useCallback((activeTabIndex)=>{
+        dispatch({
+            type: "state",
+            data: {
+                activeTabIndex
             }
-            throw new Error(error.message);
-          case 6:
-            _context3.next = 8;
-            return setData(function () {
-              return data;
-            }, false);
-          case 8:
-            setPristine(true);
-            return _context3.abrupt("return", response);
-          case 10:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function getContentModel(_x3) {
-      return _ref6.apply(this, arguments);
+        });
+    }, []);
+    const setData = async (setter, saveModel = false)=>{
+        const data = setter(state.data);
+        const existingHash = await hashModel(state.data);
+        const newHash = await hashModel(data);
+        if (existingHash === newHash) return;
+        setPristine(false);
+        dispatch({
+            type: "data",
+            data
+        });
+        if (!saveModel) return;
+        await saveContentModel(data);
     };
-  }();
-  (0, _react.useEffect)(function () {
-    if (!modelId) {
-      return;
-    }
-    getContentModel(modelId).catch(function () {
-      history.push("/cms/content-models");
-      showSnackbar("Could not load content model with given ID.");
-    });
-  }, [modelId]);
-  var value = (0, _react.useMemo)(function () {
-    return {
-      // Keeping `data` for compatibility
-      data: state.data,
-      contentModel: state.data,
-      modelId: modelId,
-      apolloClient: apolloClient,
-      dispatch: dispatch,
-      isPristine: state.isPristine,
-      getContentModel: getContentModel,
-      saveContentModel: saveContentModel,
-      setData: setData,
-      tabsRef: tabsRef,
-      activeTabIndex: state.activeTabIndex,
-      setActiveTabIndex: setActiveTabIndex
+    const getContentModel = async (id)=>{
+        const data = await getModelUseCase.execute({
+            modelId: id
+        });
+        data.settings = data.settings || {};
+        await setData(()=>data, false);
+        setPristine(true);
     };
-  }, [state, apolloClient]);
-  var Provider = contentModelEditorContext.Provider;
-  return /*#__PURE__*/_react.default.createElement(Provider, {
-    value: value
-  }, /*#__PURE__*/_react.default.createElement(_ModelProvider.ModelProvider, {
-    model: value.contentModel
-  }, children));
+    useEffect(()=>{
+        if (!modelId) return;
+        getContentModel(modelId).catch(()=>{
+            goToRoute(Routes.ContentModels.List);
+            showSnackbar("Could not load content model with given ID.");
+        });
+    }, [
+        modelId
+    ]);
+    const container = useContainer();
+    const layoutFieldTypes = useMemo(()=>container.resolveAll(CmsLayoutFieldType), [
+        container
+    ]);
+    const fieldOptions = useMemo(()=>{
+        const model = state.data;
+        if (!model) return [];
+        const prefixes = model.layout ? buildFieldLabelPrefixes(model.layout, layoutFieldTypes) : void 0;
+        return buildFieldOptions(model.fields ?? [], "", "", prefixes, layoutFieldTypes);
+    }, [
+        state.data?.fields,
+        state.data?.layout
+    ]);
+    const value = useMemo(()=>({
+            data: state.data,
+            contentModel: state.data,
+            isPristine: state.isPristine,
+            getContentModel,
+            saveContentModel,
+            setData,
+            activeTabIndex: state.activeTabIndex,
+            setActiveTabIndex,
+            fieldOptions
+        }), [
+        state,
+        fieldOptions
+    ]);
+    const { Provider } = contentModelEditorContext;
+    return /*#__PURE__*/ react.createElement(Provider, {
+        value: value
+    }, /*#__PURE__*/ react.createElement(ModelProvider, {
+        model: value.contentModel
+    }, children));
 };
-exports.ContentModelEditorProvider = ContentModelEditorProvider;
+export { ContentModelEditorProvider, contentModelEditorContext, contentModelEditorReducer };
+
+//# sourceMappingURL=ContentModelEditorProvider.js.map