@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/components/ContentEntryForm/useGoToRevision.js

@@ -0,0 +1,22 @@
+import { useRoute, useRouter } from "@webiny/app-admin";
+import { useCallback } from "react";
+import { Routes } from "../../../routes.js";
+const useGoToRevision = ()=>{
+    const { goToRoute } = useRouter();
+    const { route } = useRoute(Routes.ContentEntries.List);
+    const goToRevision = useCallback((id)=>{
+        goToRoute(Routes.ContentEntries.List, {
+            id,
+            modelId: route.params.modelId,
+            folderId: route.params.folderId
+        });
+    }, [
+        route
+    ]);
+    return {
+        goToRevision
+    };
+};
+export { useGoToRevision };
+
+//# sourceMappingURL=useGoToRevision.js.map

package/admin/components/ContentEntryForm/useGoToRevision.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentEntryForm/useGoToRevision.js","sources":["../../../../src/admin/components/ContentEntryForm/useGoToRevision.ts"],"sourcesContent":["import { useRoute, useRouter } from \"@webiny/app-admin\";\nimport { useCallback } from \"react\";\nimport { Routes } from \"~/routes.js\";\n\nexport const useGoToRevision = () => {\n    const { goToRoute } = useRouter();\n    const { route } = useRoute(Routes.ContentEntries.List);\n\n    const goToRevision = useCallback(\n        (id: string) => {\n            goToRoute(Routes.ContentEntries.List, {\n                id,\n                modelId: route.params.modelId,\n                folderId: route.params.folderId\n            });\n        },\n        [route]\n    );\n\n    return { goToRevision };\n};\n"],"names":["useGoToRevision","goToRoute","useRouter","route","useRoute","Routes","goToRevision","useCallback","id"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,cAAc,CAAC,IAAI;IAErD,MAAMC,eAAeC,YACjB,CAACC;QACGP,UAAUI,OAAO,cAAc,CAAC,IAAI,EAAE;YAClCG;YACA,SAASL,MAAM,MAAM,CAAC,OAAO;YAC7B,UAAUA,MAAM,MAAM,CAAC,QAAQ;QACnC;IACJ,GACA;QAACA;KAAM;IAGX,OAAO;QAAEG;IAAa;AAC1B"}

package/admin/components/ContentEntryForm/useRenderPlugins.d.ts

@@ -1,2 +1 @@
-import { CmsEditorFieldRendererPlugin } from "../../../types";
-export declare function useRenderPlugins(): CmsEditorFieldRendererPlugin[];
+export * from "@webiny/app-headless-cms-common/Fields/useRenderPlugins.js";

package/admin/components/ContentEntryForm/useRenderPlugins.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRenderPlugins = useRenderPlugins;
-
-var _plugins = require("@webiny/plugins");
-
-var _react = require("react");
-
-function useRenderPlugins() {
-  return (0, _react.useMemo)(function () {
-    return _plugins.plugins.byType("cms-editor-field-renderer");
-  }, []);
-}
+export * from "@webiny/app-headless-cms-common/Fields/useRenderPlugins.js";

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

@@ -0,0 +1,20 @@
+import React from "react";
+export declare const ContentModelEditor: (() => React.JSX.Element) & {
+    original: () => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => React.JSX.Element) & {
+        original: () => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app").ComponentDecorator<(() => React.JSX.Element) & {
+        original: () => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/admin/components/ContentModelEditor/ContentModelEditor.js

@@ -0,0 +1,126 @@
+import react, { useEffect, useState } from "react";
+import { LeftPanel, RightPanel, SplitView, 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 } from "@webiny/icons/edit.svg";
+import { ReactComponent as fullscreen_svg_ReactComponent } from "@webiny/icons/fullscreen.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 { ContentEntryProvider } from "../../views/contentEntries/ContentEntry/ContentEntryContext.js";
+import { ContentEntriesProvider } from "../../views/contentEntries/ContentEntriesContext.js";
+import { ModelIsBeingDeletedError } from "./ModelIsBeingDeletedError/index.js";
+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, contentModel } = 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 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, 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(ReactComponent, null),
+                "data-testid": "cms.editor.tab.edit",
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "relative mb-lg"
+                }, /*#__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(fullscreen_svg_ReactComponent, 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: "preview" === activeTab
+                }))))
+            })
+        ]
+    })))), /*#__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, 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"],"names":["t","i18n","prompt","ContentModelEditor","makeDecoratable","data","setData","isPristine","contentModel","useModelEditor","router","useRouter","dialogs","useDialogs","useEffect","document","isPristineRef","React","activeTab","setActiveTab","useState","onChange","fields","layout","OverlayLoader","ModelIsBeingDeletedError","Header","SplitView","LeftPanel","FieldsSidebar","RightPanel","Heading","Text","TimeAgo","Tabs","String","EditIcon","FieldEditor","PreviewIcon","ContentEntryEditorWithConfig","ContentEntriesProvider","ContentEntryProvider","PreviewTab","DragPreview"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+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";
+export interface ContentModelEditorProviderContext {
+    apolloClient: ApolloClient<any>;
+    data: CmsModel;
+    contentModel: CmsModel;
+    isPristine: boolean;
+    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;
+    saveContentModel: (data?: CmsModel) => Promise<UpdateCmsModelMutationResponse["updateContentModel"]>;
+    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;
+    activeTabIndex: number;
+    setActiveTabIndex: (index: number) => void;
+    fieldOptions: FieldOption[];
+}
+export declare const contentModelEditorContext: React.Context<ContentModelEditorProviderContext | undefined>;
+interface State {
+    modelId: string | null;
+    isPristine: boolean;
+    data: CmsModel;
+    activeTabIndex: number;
+}
+interface Action {
+    data: Partial<State> | Partial<CmsModel>;
+    type: "state" | "data";
+}
+interface Reducer {
+    (prev: State, action: Action): State;
+}
+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 {};

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js

@@ -0,0 +1,182 @@
+import react, { useCallback, useEffect, useMemo, useReducer } from "react";
+import get from "lodash/get.js";
+import pick from "lodash/pick.js";
+import { useRouter, useSnackbar } from "@webiny/app-admin";
+import { GET_CONTENT_MODEL, UPDATE_CONTENT_MODEL } from "../../graphql/contentModels.js";
+import { LIST_MENU_CONTENT_GROUPS_MODELS } from "../../viewsGraphql.js";
+import { ModelProvider } from "../ModelProvider/index.js";
+import { createHashing } from "@webiny/app/utils/index.js";
+import { Routes } from "../../../routes.js";
+import { buildFieldLabelPrefixes, buildFieldOptions } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+import { plugins } from "@webiny/plugins";
+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;
+    }
+};
+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)
+                    }))
+            }
+        };
+    });
+const cleanupModelData = (data)=>({
+        ...data,
+        fields: cleanupModelDataFields(data.fields)
+    });
+const createDefaultState = (modelId)=>({
+        modelId: modelId || null,
+        isPristine: true,
+        data: null,
+        activeTabIndex: 0
+    });
+const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
+    const [state, dispatch] = useReducer(contentModelEditorReducer, createDefaultState(modelId));
+    const { goToRoute } = useRouter();
+    const { showSnackbar } = useSnackbar();
+    const setPristine = (flag)=>{
+        dispatch({
+            type: "state",
+            data: {
+                isPristine: flag
+            }
+        });
+    };
+    const saveContentModel = async (data)=>{
+        if (!data) data = state.data;
+        const modelData = pick(data, [
+            "group",
+            "layout",
+            "fields",
+            "tags",
+            "name",
+            "settings",
+            "description",
+            "titleFieldId",
+            "descriptionFieldId",
+            "imageFieldId",
+            "icon"
+        ]);
+        const response = await apolloClient.mutate({
+            mutation: UPDATE_CONTENT_MODEL,
+            variables: {
+                modelId: data.modelId,
+                data: cleanupModelData(modelData)
+            },
+            refetchQueries: [
+                {
+                    query: LIST_MENU_CONTENT_GROUPS_MODELS
+                }
+            ]
+        });
+        setPristine(true);
+        if (!response.data || !response.data.updateContentModel) return {
+            data: null,
+            error: null
+        };
+        return response.data.updateContentModel;
+    };
+    const setActiveTabIndex = useCallback((activeTabIndex)=>{
+        dispatch({
+            type: "state",
+            data: {
+                activeTabIndex
+            }
+        });
+    }, []);
+    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);
+    };
+    const getContentModel = async (modelId)=>{
+        const response = await apolloClient.query({
+            query: GET_CONTENT_MODEL,
+            variables: {
+                modelId
+            }
+        });
+        const { data, error } = get(response, "data.getContentModel");
+        if (error) throw new Error(error.message);
+        await setData(()=>data, false);
+        setPristine(true);
+        return response;
+    };
+    useEffect(()=>{
+        if (!modelId) return;
+        getContentModel(modelId).catch(()=>{
+            goToRoute(Routes.ContentModels.List);
+            showSnackbar("Could not load content model with given ID.");
+        });
+    }, [
+        modelId
+    ]);
+    const layoutFieldPlugins = plugins.byType("cms-editor-layout-field-type");
+    const fieldOptions = useMemo(()=>{
+        const model = state.data;
+        if (!model) return [];
+        const prefixes = model.layout ? buildFieldLabelPrefixes(model.layout, layoutFieldPlugins) : void 0;
+        return buildFieldOptions(model.fields ?? [], "", "", prefixes, layoutFieldPlugins);
+    }, [
+        state.data?.fields,
+        state.data?.layout
+    ]);
+    const value = useMemo(()=>({
+            data: state.data,
+            contentModel: state.data,
+            modelId,
+            apolloClient,
+            dispatch,
+            isPristine: state.isPristine,
+            getContentModel,
+            saveContentModel,
+            setData,
+            activeTabIndex: state.activeTabIndex,
+            setActiveTabIndex,
+            fieldOptions
+        }), [
+        state,
+        apolloClient,
+        fieldOptions
+    ]);
+    const { Provider } = contentModelEditorContext;
+    return /*#__PURE__*/ react.createElement(Provider, {
+        value: value
+    }, /*#__PURE__*/ react.createElement(ModelProvider, {
+        model: value.contentModel
+    }, children));
+};
+export { ContentModelEditorProvider, contentModelEditorContext, contentModelEditorReducer };
+
+//# sourceMappingURL=ContentModelEditorProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditorProvider.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditorProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useReducer } from \"react\";\nimport get from \"lodash/get.js\";\nimport pick from \"lodash/pick.js\";\nimport type { ApolloClient } from \"apollo-client\";\nimport { useSnackbar, useRouter } from \"@webiny/app-admin\";\nimport type {\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables,\n    UpdateCmsModelMutationResponse,\n    UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels.js\";\nimport { GET_CONTENT_MODEL, UPDATE_CONTENT_MODEL } from \"~/admin/graphql/contentModels.js\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql.js\";\nimport type { CmsModel, CmsModelField } from \"~/types.js\";\nimport type { CmsModelLayoutFieldTypePlugin } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport type { FetchResult } from \"apollo-link\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider/index.js\";\nimport { createHashing } from \"@webiny/app/utils/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport type { FieldOption } from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport {\n    buildFieldOptions,\n    buildFieldLabelPrefixes\n} from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport { plugins } from \"@webiny/plugins\";\n\nexport interface ContentModelEditorProviderContext {\n    apolloClient: ApolloClient<any>;\n    data: CmsModel;\n    contentModel: CmsModel;\n    isPristine: boolean;\n    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;\n    saveContentModel: (\n        data?: CmsModel\n    ) => Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]>;\n    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;\n    activeTabIndex: number;\n    setActiveTabIndex: (index: number) => void;\n    fieldOptions: FieldOption[];\n}\n\nexport const contentModelEditorContext = React.createContext<\n    ContentModelEditorProviderContext | undefined\n>(undefined);\n\ntype PickedCmsModel = Pick<\n    CmsModel,\n    \"layout\" | \"fields\" | \"name\" | \"settings\" | \"description\" | \"titleFieldId\" | \"group\"\n>;\ninterface State {\n    modelId: string | null;\n    isPristine: boolean;\n    data: CmsModel;\n    activeTabIndex: number;\n}\ninterface Action {\n    data: Partial<State> | Partial<CmsModel>;\n    type: \"state\" | \"data\";\n}\ninterface Reducer {\n    (prev: State, action: Action): State;\n}\nexport const contentModelEditorReducer: Reducer = (prev: State, action: Action): State => {\n    const { data, type } = action;\n    switch (type) {\n        case \"state\":\n            return { ...prev, ...data };\n\n        case \"data\":\n            return { ...prev, data: data as CmsModel };\n        default:\n            return prev;\n    }\n};\n\nconst hashModel = createHashing(\"SHA-256\");\n\n/**\n * Cleanup is required because backend always expects string value in predefined values entries\n */\nconst cleanupModelDataFields = (fields: CmsModelField[]): CmsModelField[] => {\n    return fields.map(field => {\n        const { predefinedValues } = field;\n        const { enabled = false, values = [] } = predefinedValues || {};\n        return {\n            ...field,\n            predefinedValues: {\n                enabled,\n                values: values.map(({ label, value, selected }) => {\n                    return {\n                        label,\n                        selected: selected || false,\n                        value: String(value)\n                    };\n                })\n            }\n        };\n    });\n};\n\nconst cleanupModelData = (data: PickedCmsModel): PickedCmsModel => {\n    return {\n        ...data,\n        fields: cleanupModelDataFields(data.fields)\n    };\n};\n\ninterface ContentModelEditorProviderProps {\n    apolloClient: ApolloClient<any>;\n    modelId?: string;\n    children: React.ReactElement;\n}\n\nconst createDefaultState = (modelId?: string): State => {\n    return {\n        modelId: modelId || null,\n        isPristine: true,\n        data: null as unknown as CmsModel,\n        activeTabIndex: 0\n    };\n};\n\nexport const ContentModelEditorProvider = ({\n    children,\n    apolloClient,\n    modelId\n}: ContentModelEditorProviderProps) => {\n    const [state, dispatch] = useReducer(contentModelEditorReducer, createDefaultState(modelId));\n\n    const { goToRoute } = useRouter();\n    const { showSnackbar } = useSnackbar();\n\n    const setPristine = (flag: boolean): void => {\n        dispatch({ type: \"state\", data: { isPristine: flag } });\n    };\n\n    const saveContentModel = async (\n        data?: CmsModel\n    ): Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]> => {\n        if (!data) {\n            data = state.data;\n        }\n        const modelData: PickedCmsModel = pick(data, [\n            \"group\",\n            \"layout\",\n            \"fields\",\n            \"tags\",\n            \"name\",\n            \"settings\",\n            \"description\",\n            \"titleFieldId\",\n            \"descriptionFieldId\",\n            \"imageFieldId\",\n            \"icon\"\n        ]);\n        const response = await apolloClient.mutate<\n            UpdateCmsModelMutationResponse,\n            UpdateCmsModelMutationVariables\n        >({\n            mutation: UPDATE_CONTENT_MODEL,\n            variables: {\n                modelId: data.modelId,\n                data: cleanupModelData(modelData)\n            },\n            refetchQueries: [\n                {\n                    query: LIST_MENU_CONTENT_GROUPS_MODELS\n                }\n            ]\n        });\n\n        setPristine(true);\n\n        if (!response.data || !response.data.updateContentModel) {\n            return {\n                data: null,\n                error: null\n            };\n        }\n\n        return response.data.updateContentModel;\n    };\n\n    const setActiveTabIndex = useCallback((activeTabIndex: number) => {\n        dispatch({ type: \"state\", data: { activeTabIndex } });\n    }, []);\n\n    /**\n     * Set form data by providing a callback, which receives a fresh copy of data on which you can work on.\n     * Return new data once finished.\n     */\n    const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {\n        const data = setter(state.data);\n        const existingHash = await hashModel(state.data);\n        const newHash = await hashModel(data);\n        if (existingHash === newHash) {\n            return;\n        }\n        setPristine(false);\n        dispatch({ type: \"data\", data });\n        if (!saveModel) {\n            return;\n        }\n        await saveContentModel(data);\n    };\n\n    const getContentModel = async (\n        modelId: string\n    ): Promise<FetchResult<GetCmsModelQueryResponse>> => {\n        const response = await apolloClient.query<\n            GetCmsModelQueryResponse,\n            GetCmsModelQueryVariables\n        >({\n            query: GET_CONTENT_MODEL,\n            variables: {\n                modelId\n            }\n        });\n\n        const { data, error } = get(response, \"data.getContentModel\");\n        if (error) {\n            throw new Error(error.message);\n        }\n\n        await setData(() => data, false);\n\n        setPristine(true);\n        return response;\n    };\n\n    useEffect(() => {\n        if (!modelId) {\n            return;\n        }\n        getContentModel(modelId).catch(() => {\n            goToRoute(Routes.ContentModels.List);\n            showSnackbar(`Could not load content model with given ID.`);\n        });\n    }, [modelId]);\n\n    const layoutFieldPlugins = plugins.byType<CmsModelLayoutFieldTypePlugin>(\n        \"cms-editor-layout-field-type\"\n    );\n\n    const fieldOptions = useMemo(() => {\n        const model = state.data;\n        if (!model) {\n            return [];\n        }\n        const prefixes = model.layout\n            ? buildFieldLabelPrefixes(model.layout, layoutFieldPlugins)\n            : undefined;\n        return buildFieldOptions(model.fields ?? [], \"\", \"\", prefixes, layoutFieldPlugins);\n    }, [state.data?.fields, state.data?.layout]);\n\n    const value = useMemo<ContentModelEditorProviderContext>(\n        () => ({\n            // Keeping `data` for compatibility\n            data: state.data,\n            contentModel: state.data,\n            modelId,\n            apolloClient,\n            dispatch,\n            isPristine: state.isPristine,\n            getContentModel,\n            saveContentModel,\n            setData,\n            activeTabIndex: state.activeTabIndex,\n            setActiveTabIndex,\n            fieldOptions\n        }),\n        [state, apolloClient, fieldOptions]\n    );\n\n    const { Provider } = contentModelEditorContext;\n\n    return (\n        <Provider value={value}>\n            <ModelProvider model={value.contentModel}>{children}</ModelProvider>\n        </Provider>\n    );\n};\n"],"names":["contentModelEditorContext","React","undefined","contentModelEditorReducer","prev","action","data","type","hashModel","createHashing","cleanupModelDataFields","fields","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","createDefaultState","modelId","ContentModelEditorProvider","children","apolloClient","state","dispatch","useReducer","goToRoute","useRouter","showSnackbar","useSnackbar","setPristine","flag","saveContentModel","modelData","pick","response","UPDATE_CONTENT_MODEL","LIST_MENU_CONTENT_GROUPS_MODELS","setActiveTabIndex","useCallback","activeTabIndex","setData","setter","saveModel","existingHash","newHash","getContentModel","GET_CONTENT_MODEL","error","get","Error","useEffect","Routes","layoutFieldPlugins","plugins","fieldOptions","useMemo","model","prefixes","buildFieldLabelPrefixes","buildFieldOptions","Provider","ModelProvider"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
-import React, { DragEventHandler } from "react";
+import type { DragEventHandler } from "react";
+import React from "react";
 interface FieldsSidebarProps {
     onFieldDragStart: DragEventHandler;
 }
-export declare const FieldsSidebar: React.FC<FieldsSidebarProps>;
+export declare const FieldsSidebar: ({ onFieldDragStart }: FieldsSidebarProps) => React.JSX.Element;
 export {};