@webiny/app-headless-cms 6.3.0-beta.4 → 6.4.0-beta.0

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js

@@ -1,215 +1,182 @@
-import React, { useCallback, useEffect, useMemo, useReducer } from "react";
+import react, { useCallback, useEffect, useMemo, useReducer } from "react";
 import get from "lodash/get.js";
 import pick from "lodash/pick.js";
-import { useSnackbar, useRouter } from "@webiny/app-admin";
+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 { buildFieldOptions, buildFieldLabelPrefixes } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+import { buildFieldLabelPrefixes, buildFieldOptions } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
 import { plugins } from "@webiny/plugins";
-export const contentModelEditorContext = /*#__PURE__*/React.createContext(undefined);
-export 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 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");
-
-/**
- * Cleanup is required because backend always expects string value in predefined values entries
- */
-const cleanupModelDataFields = fields => {
-  return fields.map(field => {
-    const {
-      predefinedValues
-    } = field;
-    const {
-      enabled = false,
-      values = []
-    } = predefinedValues || {};
-    return {
-      ...field,
-      predefinedValues: {
-        enabled,
-        values: values.map(({
-          label,
-          value,
-          selected
-        }) => {
-          return {
-            label,
-            selected: selected || false,
-            value: String(value)
-          };
-        })
-      }
-    };
-  });
-};
-const cleanupModelData = data => {
-  return {
-    ...data,
-    fields: cleanupModelDataFields(data.fields)
-  };
-};
-const createDefaultState = modelId => {
-  return {
-    modelId: modelId || null,
-    isPristine: true,
-    data: null,
-    activeTabIndex: 0
-  };
-};
-export 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 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 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
-      }]
+const cleanupModelData = (data)=>({
+        ...data,
+        fields: cleanupModelDataFields(data.fields)
     });
-    setPristine(true);
-    if (!response.data || !response.data.updateContentModel) {
-      return {
+const createDefaultState = (modelId)=>({
+        modelId: modelId || null,
+        isPristine: true,
         data: null,
-        error: null
-      };
-    }
-    return response.data.updateContentModel;
-  };
-  const setActiveTabIndex = useCallback(activeTabIndex => {
-    dispatch({
-      type: "state",
-      data: {
-        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.
-   */
-  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
+        activeTabIndex: 0
     });
-    if (!saveModel) {
-      return;
-    }
-    await saveContentModel(data);
-  };
-  const getContentModel = async modelId => {
-    const response = await apolloClient.query({
-      query: GET_CONTENT_MODEL,
-      variables: {
+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 {
-      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) : undefined;
-    return buildFieldOptions(model.fields ?? [], "", "", prefixes, layoutFieldPlugins);
-  }, [state.data?.fields, state.data?.layout]);
-  const value = useMemo(() => ({
-    // Keeping `data` for compatibility
-    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));
+    ]);
+    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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useReducer","get","pick","useSnackbar","useRouter","GET_CONTENT_MODEL","UPDATE_CONTENT_MODEL","LIST_MENU_CONTENT_GROUPS_MODELS","ModelProvider","createHashing","Routes","buildFieldOptions","buildFieldLabelPrefixes","plugins","contentModelEditorContext","createContext","undefined","contentModelEditorReducer","prev","action","data","type","hashModel","cleanupModelDataFields","fields","map","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","createDefaultState","modelId","isPristine","activeTabIndex","ContentModelEditorProvider","children","apolloClient","state","dispatch","goToRoute","showSnackbar","setPristine","flag","saveContentModel","modelData","response","mutate","mutation","variables","refetchQueries","query","updateContentModel","error","setActiveTabIndex","setData","setter","saveModel","existingHash","newHash","getContentModel","Error","message","catch","ContentModels","List","layoutFieldPlugins","byType","fieldOptions","model","prefixes","layout","contentModel","Provider","createElement"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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.js

@@ -1,105 +1,84 @@
-import React from "react";
+import react from "react";
 import { plugins } from "@webiny/plugins";
 import Draggable from "../Draggable.js";
 import { Heading, Icon, Text } from "@webiny/admin-ui";
-const Field = props => {
-  const {
-    onFieldDragStart,
-    fieldType: {
-      type,
-      label,
-      icon,
-      description
-    }
-  } = props;
-  return /*#__PURE__*/React.createElement(Draggable, {
-    beginDrag: {
-      type: "newField",
-      fieldType: type
-    }
-  }, ({
-    drag
-  }) => /*#__PURE__*/React.createElement("div", {
-    ref: element => {
-      drag(element);
-    },
-    "data-testid": `cms-editor-fields-field-${type}`,
-    onDragStart: onFieldDragStart,
-    className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-md"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    label: label,
-    size: "md",
-    color: "neutral-light"
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
-    level: 6
-  }, label), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: "text-neutral-strong"
-  }, description)))));
+const Field = (props)=>{
+    const { onFieldDragStart, fieldType: { type, label, icon, description } } = props;
+    return /*#__PURE__*/ react.createElement(Draggable, {
+        beginDrag: {
+            type: "newField",
+            fieldType: type
+        }
+    }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+            ref: (element)=>{
+                drag(element);
+            },
+            "data-testid": `cms-editor-fields-field-${type}`,
+            onDragStart: onFieldDragStart,
+            className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Icon, {
+            icon: icon,
+            label: label,
+            size: "md",
+            color: "neutral-light"
+        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+            level: 6
+        }, label), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-strong"
+        }, description)))));
 };
-const LayoutFieldItem = props => {
-  const {
-    onFieldDragStart,
-    layoutField: {
-      type,
-      label,
-      icon,
-      description
-    }
-  } = props;
-  return /*#__PURE__*/React.createElement(Draggable, {
-    beginDrag: {
-      type: "newLayoutField",
-      layoutFieldType: type
-    }
-  }, ({
-    drag
-  }) => /*#__PURE__*/React.createElement("div", {
-    ref: element => {
-      drag(element);
-    },
-    "data-testid": `cms-editor-fields-layout-field-${type}`,
-    onDragStart: onFieldDragStart,
-    className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-md"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    label: label,
-    size: "md",
-    color: "neutral-light"
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
-    level: 6
-  }, label), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: "text-neutral-strong"
-  }, description)))));
+const LayoutFieldItem = (props)=>{
+    const { onFieldDragStart, layoutField: { type, label, icon, description } } = props;
+    return /*#__PURE__*/ react.createElement(Draggable, {
+        beginDrag: {
+            type: "newLayoutField",
+            layoutFieldType: type
+        }
+    }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+            ref: (element)=>{
+                drag(element);
+            },
+            "data-testid": `cms-editor-fields-layout-field-${type}`,
+            onDragStart: onFieldDragStart,
+            className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-md"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Icon, {
+            icon: icon,
+            label: label,
+            size: "md",
+            color: "neutral-light"
+        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
+            level: 6
+        }, label), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "text-neutral-strong"
+        }, description)))));
 };
-export const FieldsSidebar = ({
-  onFieldDragStart
-}) => {
-  const fieldTypePlugin = plugins.byType("cms-editor-field-type").filter(p => !p.field.hideInAdmin);
-  const layoutFieldPlugins = plugins.byType("cms-editor-layout-field-type");
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    size: "md",
-    className: "text-neutral-strong uppercase mt-0 mb-md font-semibold"
-  }, "Fields"), fieldTypePlugin.map(fieldPlugin => /*#__PURE__*/React.createElement(Field, {
-    key: fieldPlugin.field.type,
-    fieldType: fieldPlugin.field,
-    onFieldDragStart: onFieldDragStart
-  })), layoutFieldPlugins.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    size: "md",
-    className: "text-neutral-strong uppercase my-md font-semibold"
-  }, "Layout"), layoutFieldPlugins.map(lp => /*#__PURE__*/React.createElement(LayoutFieldItem, {
-    key: lp.field.type,
-    layoutField: lp.field,
-    onFieldDragStart: onFieldDragStart
-  }))));
+const FieldsSidebar = ({ onFieldDragStart })=>{
+    const fieldTypePlugin = plugins.byType("cms-editor-field-type").filter((p)=>!p.field.hideInAdmin);
+    const layoutFieldPlugins = plugins.byType("cms-editor-layout-field-type");
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "text-neutral-strong uppercase mt-0 mb-md font-semibold"
+    }, "Fields"), fieldTypePlugin.map((fieldPlugin)=>/*#__PURE__*/ react.createElement(Field, {
+            key: fieldPlugin.field.type,
+            fieldType: fieldPlugin.field,
+            onFieldDragStart: onFieldDragStart
+        })), layoutFieldPlugins.length > 0 && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "text-neutral-strong uppercase my-md font-semibold"
+    }, "Layout"), layoutFieldPlugins.map((lp)=>/*#__PURE__*/ react.createElement(LayoutFieldItem, {
+            key: lp.field.type,
+            layoutField: lp.field,
+            onFieldDragStart: onFieldDragStart
+        }))));
 };
+export { FieldsSidebar };
 
 //# sourceMappingURL=FieldsSidebar.js.map