@webiny/app-headless-cms 5.39.1 → 5.39.2-beta.0

package/admin/components/ContentEntries/BulkActions/ActionDelete.js

@@ -12,6 +12,7 @@ var _mobxReactLite = require("mobx-react-lite");
 var _contentEntries = require("../../../config/contentEntries");
 var _hooks = require("../../../hooks");
 var _BulkActions = require("./BulkActions");
+var _parseIdentifier2 = require("@webiny/utils/parseIdentifier");
 var ActionDelete = (0, _mobxReactLite.observer)(function () {
   var _useCms = (0, _hooks.useCms)(),
     deleteEntry = _useCms.deleteEntry;
@@ -42,10 +43,16 @@ var ActionDelete = (0, _mobxReactLite.observer)(function () {
           var item = _ref.item,
             report = _ref.report;
           try {
+            /**
+             * We need an entryId because we want to delete all revisions of the entry.
+             * By sending an entryId (id without #version), we are telling to the API to delete all revisions.
+             */
+            var _parseIdentifier = (0, _parseIdentifier2.parseIdentifier)(item.id),
+              id = _parseIdentifier.id;
             var response = await deleteEntry({
               model: contentModel,
               entry: item,
-              id: item.id
+              id: id
             });
             var error = response.error;
             if (error) {

package/admin/components/ContentEntries/BulkActions/ActionDelete.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_delete","_appAco","_mobxReactLite","_contentEntries","_hooks","_BulkActions","ActionDelete","observer","_useCms","useCms","deleteEntry","_useContentEntry","useContentEntry","contentModel","_useRecords","useRecords","removeRecordFromCache","_ContentEntryListConf","ContentEntryListConfig","Browser","BulkAction","useWorker","useButtons","useDialog","_useButtons","IconButton","worker","_useDialog","showConfirmationDialog","showResultsDialog","entriesLabel","useMemo","getEntriesLabel","items","length","openDeleteEntriesDialog","title","message","concat","loadingLabel","execute","processInSeries","_ref","item","report","response","model","entry","id","error","Error","success","meta","e","resetItems","results","default","createElement","icon","ReactComponent","onAction","label","tooltipPlacement","exports"],"sources":["ActionDelete.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\nimport { useRecords } from \"@webiny/app-aco\";\nimport { observer } from \"mobx-react-lite\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries\";\nimport { useCms, useContentEntry } from \"~/admin/hooks\";\nimport { getEntriesLabel } from \"~/admin/components/ContentEntries/BulkActions/BulkActions\";\n\nexport const ActionDelete = observer(() => {\n    const { deleteEntry } = useCms();\n    const { contentModel } = useContentEntry();\n    const { removeRecordFromCache } = useRecords();\n\n    const { useWorker, useButtons, useDialog } = ContentEntryListConfig.Browser.BulkAction;\n    const { IconButton } = useButtons();\n    const worker = useWorker();\n    const { showConfirmationDialog, showResultsDialog } = useDialog();\n\n    const entriesLabel = useMemo(() => {\n        return getEntriesLabel(worker.items.length);\n    }, [worker.items.length]);\n\n    const openDeleteEntriesDialog = () =>\n        showConfirmationDialog({\n            title: \"Delete entries\",\n            message: `You are about to delete ${entriesLabel}. Are you sure you want to continue?`,\n            loadingLabel: `Processing ${entriesLabel}`,\n            execute: async () => {\n                await worker.processInSeries(async ({ item, report }) => {\n                    try {\n                        const response = await deleteEntry({\n                            model: contentModel,\n                            entry: item,\n                            id: item.id\n                        });\n\n                        const { error } = response;\n\n                        if (error) {\n                            throw new Error(\n                                error.message || \"Unknown error while deleting the entry\"\n                            );\n                        }\n\n                        removeRecordFromCache(item.id);\n\n                        report.success({\n                            title: `${item.meta.title}`,\n                            message: \"Entry successfully deleted.\"\n                        });\n                    } catch (e) {\n                        report.error({\n                            title: `${item.meta.title}`,\n                            message: e.message\n                        });\n                    }\n                });\n\n                worker.resetItems();\n\n                showResultsDialog({\n                    results: worker.results,\n                    title: \"Delete entries\",\n                    message: \"Finished deleting entries! See full report below:\"\n                });\n            }\n        });\n\n    return (\n        <IconButton\n            icon={<DeleteIcon />}\n            onAction={openDeleteEntriesDialog}\n            label={`Delete ${entriesLabel}`}\n            tooltipPlacement={\"bottom\"}\n        />\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_delete","_appAco","_mobxReactLite","_contentEntries","_hooks","_BulkActions","_parseIdentifier2","ActionDelete","observer","_useCms","useCms","deleteEntry","_useContentEntry","useContentEntry","contentModel","_useRecords","useRecords","removeRecordFromCache","_ContentEntryListConf","ContentEntryListConfig","Browser","BulkAction","useWorker","useButtons","useDialog","_useButtons","IconButton","worker","_useDialog","showConfirmationDialog","showResultsDialog","entriesLabel","useMemo","getEntriesLabel","items","length","openDeleteEntriesDialog","title","message","concat","loadingLabel","execute","processInSeries","_ref","item","report","_parseIdentifier","parseIdentifier","id","response","model","entry","error","Error","success","meta","e","resetItems","results","default","createElement","icon","ReactComponent","onAction","label","tooltipPlacement","exports"],"sources":["ActionDelete.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\nimport { useRecords } from \"@webiny/app-aco\";\nimport { observer } from \"mobx-react-lite\";\nimport { ContentEntryListConfig } from \"~/admin/config/contentEntries\";\nimport { useCms, useContentEntry } from \"~/admin/hooks\";\nimport { getEntriesLabel } from \"~/admin/components/ContentEntries/BulkActions/BulkActions\";\nimport { parseIdentifier } from \"@webiny/utils/parseIdentifier\";\n\nexport const ActionDelete = observer(() => {\n    const { deleteEntry } = useCms();\n    const { contentModel } = useContentEntry();\n    const { removeRecordFromCache } = useRecords();\n\n    const { useWorker, useButtons, useDialog } = ContentEntryListConfig.Browser.BulkAction;\n    const { IconButton } = useButtons();\n    const worker = useWorker();\n    const { showConfirmationDialog, showResultsDialog } = useDialog();\n\n    const entriesLabel = useMemo(() => {\n        return getEntriesLabel(worker.items.length);\n    }, [worker.items.length]);\n\n    const openDeleteEntriesDialog = () =>\n        showConfirmationDialog({\n            title: \"Delete entries\",\n            message: `You are about to delete ${entriesLabel}. Are you sure you want to continue?`,\n            loadingLabel: `Processing ${entriesLabel}`,\n            execute: async () => {\n                await worker.processInSeries(async ({ item, report }) => {\n                    try {\n                        /**\n                         * We need an entryId because we want to delete all revisions of the entry.\n                         * By sending an entryId (id without #version), we are telling to the API to delete all revisions.\n                         */\n                        const { id } = parseIdentifier(item.id);\n                        const response = await deleteEntry({\n                            model: contentModel,\n                            entry: item,\n                            id\n                        });\n\n                        const { error } = response;\n\n                        if (error) {\n                            throw new Error(\n                                error.message || \"Unknown error while deleting the entry\"\n                            );\n                        }\n\n                        removeRecordFromCache(item.id);\n\n                        report.success({\n                            title: `${item.meta.title}`,\n                            message: \"Entry successfully deleted.\"\n                        });\n                    } catch (e) {\n                        report.error({\n                            title: `${item.meta.title}`,\n                            message: e.message\n                        });\n                    }\n                });\n\n                worker.resetItems();\n\n                showResultsDialog({\n                    results: worker.results,\n                    title: \"Delete entries\",\n                    message: \"Finished deleting entries! See full report below:\"\n                });\n            }\n        });\n\n    return (\n        <IconButton\n            icon={<DeleteIcon />}\n            onAction={openDeleteEntriesDialog}\n            label={`Delete ${entriesLabel}`}\n            tooltipPlacement={\"bottom\"}\n        />\n    );\n});\n"],"mappings":"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"}

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

@@ -1,9 +1,8 @@
-import React, { MutableRefObject } from "react";
+import React 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";
 export interface ContentModelEditorProviderContext {
     apolloClient: ApolloClient<any>;
     data: CmsModel;
@@ -12,7 +11,6 @@ export interface ContentModelEditorProviderContext {
     getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;
     saveContentModel: (data?: CmsModel) => Promise<UpdateCmsModelMutationResponse["updateContentModel"]>;
     setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;
-    tabsRef: MutableRefObject<TabsImperativeApi | undefined>;
     activeTabIndex: number;
     setActiveTabIndex: (index: number) => void;
 }

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js

@@ -80,7 +80,6 @@ var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
     _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)(),
@@ -183,7 +182,6 @@ var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
       getContentModel: getContentModel,
       saveContentModel: saveContentModel,
       setData: setData,
-      tabsRef: tabsRef,
       activeTabIndex: state.activeTabIndex,
       setActiveTabIndex: setActiveTabIndex
     };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_get2","_interopRequireDefault","_pick","_reactRouter","_useSnackbar2","_contentModels","_viewsGraphql","_ModelProvider","contentModelEditorContext","React","createContext","undefined","exports","contentModelEditorReducer","prev","action","data","type","_objectSpread2","default","cleanupModelDataFields","fields","map","field","predefinedValues","_ref","_ref$enabled","enabled","_ref$values","values","_ref2","label","value","selected","String","cleanupModelData","ContentModelEditorProvider","_ref3","children","apolloClient","modelId","_useReducer","useReducer","isPristine","activeTabIndex","_useReducer2","_slicedToArray2","state","dispatch","tabsRef","useRef","_useRouter","useRouter","history","_useSnackbar","useSnackbar","showSnackbar","setPristine","flag","saveContentModel","modelData","pick","response","mutate","mutation","UPDATE_CONTENT_MODEL","variables","refetchQueries","query","LIST_MENU_CONTENT_GROUPS_MODELS","updateContentModel","error","setActiveTabIndex","useCallback","setData","setter","saveModel","arguments","length","getContentModel","GET_CONTENT_MODEL","_get","get","Error","message","useEffect","catch","push","useMemo","contentModel","Provider","createElement","ModelProvider","model"],"sources":["ContentModelEditorProvider.tsx"],"sourcesContent":["import React, {\n    MutableRefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useReducer,\n    useRef\n} from \"react\";\nimport get from \"lodash/get\";\nimport pick from \"lodash/pick\";\nimport { ApolloClient } from \"apollo-client\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables,\n    UPDATE_CONTENT_MODEL,\n    UpdateCmsModelMutationResponse,\n    UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { FetchResult } from \"apollo-link\";\nimport { TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\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    tabsRef: MutableRefObject<TabsImperativeApi | undefined>;\n    activeTabIndex: number;\n    setActiveTabIndex: (index: number) => void;\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\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\nexport const ContentModelEditorProvider = ({\n    children,\n    apolloClient,\n    modelId\n}: ContentModelEditorProviderProps) => {\n    const [state, dispatch] = useReducer<Reducer>(contentModelEditorReducer, {\n        modelId: modelId || null,\n        isPristine: true,\n        data: null as unknown as CmsModel,\n        activeTabIndex: 0\n    });\n\n    const tabsRef = useRef<TabsImperativeApi>();\n\n    const { history } = 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        setPristine(false);\n        const data = setter(state.data);\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        setPristine(true);\n        return response;\n    };\n\n    useEffect(() => {\n        if (!modelId) {\n            return;\n        }\n        getContentModel(modelId).catch(() => {\n            history.push(`/cms/content-models`);\n            showSnackbar(`Could not load content model with given ID.`);\n        });\n    }, [modelId]);\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            tabsRef,\n            activeTabIndex: state.activeTabIndex,\n            setActiveTabIndex\n        }),\n        [state, apolloClient]\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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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_get2","_interopRequireDefault","_pick","_reactRouter","_useSnackbar2","_contentModels","_viewsGraphql","_ModelProvider","contentModelEditorContext","React","createContext","undefined","exports","contentModelEditorReducer","prev","action","data","type","_objectSpread2","default","cleanupModelDataFields","fields","map","field","predefinedValues","_ref","_ref$enabled","enabled","_ref$values","values","_ref2","label","value","selected","String","cleanupModelData","ContentModelEditorProvider","_ref3","children","apolloClient","modelId","_useReducer","useReducer","isPristine","activeTabIndex","_useReducer2","_slicedToArray2","state","dispatch","_useRouter","useRouter","history","_useSnackbar","useSnackbar","showSnackbar","setPristine","flag","saveContentModel","modelData","pick","response","mutate","mutation","UPDATE_CONTENT_MODEL","variables","refetchQueries","query","LIST_MENU_CONTENT_GROUPS_MODELS","updateContentModel","error","setActiveTabIndex","useCallback","setData","setter","saveModel","arguments","length","getContentModel","GET_CONTENT_MODEL","_get","get","Error","message","useEffect","catch","push","useMemo","contentModel","Provider","createElement","ModelProvider","model"],"sources":["ContentModelEditorProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useReducer } from \"react\";\nimport get from \"lodash/get\";\nimport pick from \"lodash/pick\";\nimport { ApolloClient } from \"apollo-client\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport {\n    GET_CONTENT_MODEL,\n    GetCmsModelQueryResponse,\n    GetCmsModelQueryVariables,\n    UPDATE_CONTENT_MODEL,\n    UpdateCmsModelMutationResponse,\n    UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { FetchResult } from \"apollo-link\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\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}\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\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\nexport const ContentModelEditorProvider = ({\n    children,\n    apolloClient,\n    modelId\n}: ContentModelEditorProviderProps) => {\n    const [state, dispatch] = useReducer<Reducer>(contentModelEditorReducer, {\n        modelId: modelId || null,\n        isPristine: true,\n        data: null as unknown as CmsModel,\n        activeTabIndex: 0\n    });\n\n    const { history } = 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        setPristine(false);\n        const data = setter(state.data);\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        setPristine(true);\n        return response;\n    };\n\n    useEffect(() => {\n        if (!modelId) {\n            return;\n        }\n        getContentModel(modelId).catch(() => {\n            history.push(`/cms/content-models`);\n            showSnackbar(`Could not load content model with given ID.`);\n        });\n    }, [modelId]);\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        }),\n        [state, apolloClient]\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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"}

package/admin/components/ContentModelEditor/Editor.js

@@ -78,7 +78,6 @@ var Editor = function Editor() {
     data = _useModelEditor.data,
     setData = _useModelEditor.setData,
     isPristine = _useModelEditor.isPristine;
-  var tabsRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeTabIndex = _useState2[0],
@@ -112,16 +111,13 @@ var Editor = function Editor() {
     use: "headline6"
   }, "Fields")), /*#__PURE__*/_react.default.createElement(LeftBarFieldList, null, /*#__PURE__*/_react.default.createElement(_FieldsSidebar.FieldsSidebar, {
     onFieldDragStart: function onFieldDragStart() {
-      if (!tabsRef.current) {
-        return;
-      }
-      tabsRef.current.switchTab(0);
+      setActiveTabIndex(0);
     }
   }))), /*#__PURE__*/_react.default.createElement(_SplitView.RightPanel, {
     span: 8
   }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
+    value: activeTabIndex,
     className: formTabs,
-    ref: tabsRef,
     onActivate: function onActivate(e) {
       return setActiveTabIndex(e);
     }

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactRouter","_styled","_interopRequireDefault","_emotion","_i18n","_Progress","_SplitView","_Icon","_Typography","_Tabs","_roundAssignment24px","_FieldsSidebar","_FieldEditor","_PreviewTab","_Header","_DragPreview","_useModelEditor2","_templateObject","t","i18n","ns","prompt","_taggedTemplateLiteral2","default","ContentContainer","styled","target","label","paddingTop","EditContainer","padding","position","exports","LeftBarTitle","borderBottom","display","alignItems","color","titleIcon","css","height","marginRight","LeftBarFieldList","overflow","formTabs","backgroundColor","Editor","_useModelEditor","useModelEditor","data","setData","isPristine","tabsRef","useRef","_useState","useState","_useState2","_slicedToArray2","activeTabIndex","setActiveTabIndex","onChange","_ref","fields","layout","_objectSpread2","createElement","CircularProgress","className","Prompt","when","message","SplitView","LeftPanel","span","Icon","icon","ReactComponent","Typography","use","FieldsSidebar","onFieldDragStart","current","switchTab","RightPanel","Tabs","ref","onActivate","e","Tab","FieldEditor","PreviewTab","activeTab"],"sources":["Editor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Prompt } from \"@webiny/react-router\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tab, Tabs, TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ReactComponent as FormIcon } from \"./icons/round-assignment-24px.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar\";\nimport { FieldEditor } from \"../FieldEditor\";\nimport { PreviewTab } from \"./PreviewTab\";\nimport Header from \"./Header\";\nimport DragPreview from \"../DragPreview\";\nimport { useModelEditor } from \"./useModelEditor\";\nimport { CmsModelField, CmsEditorFieldsLayout } from \"~/types\";\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\nconst ContentContainer = styled(\"div\")({\n    paddingTop: 65\n});\n\nexport const EditContainer = styled(\"div\")({\n    padding: 40,\n    position: \"relative\"\n});\n\nconst LeftBarTitle = styled(\"div\")({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 25,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst titleIcon = css({\n    height: 24,\n    marginRight: 15,\n    color: \"var(--mdc-theme-primary)\"\n});\n\nconst LeftBarFieldList = styled(\"div\")({\n    padding: 40,\n    overflow: \"auto\",\n    height: \"calc(100vh - 250px)\"\n});\n\nconst formTabs = css({\n    \"&.webiny-ui-tabs\": {\n        \".webiny-ui-tabs__tab-bar\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const Editor = () => {\n    const { data, setData, isPristine } = useModelEditor();\n\n    const tabsRef = useRef<TabsImperativeApi>();\n    const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <CircularProgress label={\"Loading content model...\"} />;\n    }\n\n    return (\n        <div className={\"content-model-editor\"}>\n            <Prompt when={!isPristine} message={prompt} />\n            <Header />\n            <ContentContainer>\n                <SplitView>\n                    <LeftPanel span={4}>\n                        <LeftBarTitle>\n                            <Icon className={titleIcon} icon={<FormIcon />} />\n                            <Typography use={\"headline6\"}>Fields</Typography>\n                        </LeftBarTitle>\n                        <LeftBarFieldList>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    if (!tabsRef.current) {\n                                        return;\n                                    }\n                                    tabsRef.current.switchTab(0);\n                                }}\n                            />\n                        </LeftBarFieldList>\n                    </LeftPanel>\n                    <RightPanel span={8}>\n                        <Tabs\n                            className={formTabs}\n                            ref={tabsRef}\n                            onActivate={e => setActiveTabIndex(e)}\n                        >\n                            <Tab label={\"Edit\"} data-testid={\"cms.editor.tab.edit\"}>\n                                <EditContainer>\n                                    <FieldEditor\n                                        fields={data.fields}\n                                        layout={data.layout || []}\n                                        onChange={onChange}\n                                    />\n                                </EditContainer>\n                            </Tab>\n                            <Tab label={\"Preview\"} data-testid={\"cms.editor.tab.preview\"}>\n                                <PreviewTab activeTab={activeTabIndex === 1} />\n                            </Tab>\n                        </Tabs>\n                    </RightPanel>\n                </SplitView>\n            </ContentContainer>\n            <DragPreview />\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactRouter","_styled","_interopRequireDefault","_emotion","_i18n","_Progress","_SplitView","_Icon","_Typography","_Tabs","_roundAssignment24px","_FieldsSidebar","_FieldEditor","_PreviewTab","_Header","_DragPreview","_useModelEditor2","_templateObject","t","i18n","ns","prompt","_taggedTemplateLiteral2","default","ContentContainer","styled","target","label","paddingTop","EditContainer","padding","position","exports","LeftBarTitle","borderBottom","display","alignItems","color","titleIcon","css","height","marginRight","LeftBarFieldList","overflow","formTabs","backgroundColor","Editor","_useModelEditor","useModelEditor","data","setData","isPristine","_useState","useState","_useState2","_slicedToArray2","activeTabIndex","setActiveTabIndex","onChange","_ref","fields","layout","_objectSpread2","createElement","CircularProgress","className","Prompt","when","message","SplitView","LeftPanel","span","Icon","icon","ReactComponent","Typography","use","FieldsSidebar","onFieldDragStart","RightPanel","Tabs","value","onActivate","e","Tab","FieldEditor","PreviewTab","activeTab"],"sources":["Editor.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Prompt } from \"@webiny/react-router\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin/components/SplitView\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Tab, Tabs } from \"@webiny/ui/Tabs\";\nimport { ReactComponent as FormIcon } from \"./icons/round-assignment-24px.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar\";\nimport { FieldEditor } from \"../FieldEditor\";\nimport { PreviewTab } from \"./PreviewTab\";\nimport Header from \"./Header\";\nimport DragPreview from \"../DragPreview\";\nimport { useModelEditor } from \"./useModelEditor\";\nimport { CmsModelField, CmsEditorFieldsLayout } from \"~/types\";\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\nconst ContentContainer = styled(\"div\")({\n    paddingTop: 65\n});\n\nexport const EditContainer = styled(\"div\")({\n    padding: 40,\n    position: \"relative\"\n});\n\nconst LeftBarTitle = styled(\"div\")({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 25,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst titleIcon = css({\n    height: 24,\n    marginRight: 15,\n    color: \"var(--mdc-theme-primary)\"\n});\n\nconst LeftBarFieldList = styled(\"div\")({\n    padding: 40,\n    overflow: \"auto\",\n    height: \"calc(100vh - 250px)\"\n});\n\nconst formTabs = css({\n    \"&.webiny-ui-tabs\": {\n        \".webiny-ui-tabs__tab-bar\": {\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\n\ninterface OnChangeParams {\n    fields: CmsModelField[];\n    layout: CmsEditorFieldsLayout;\n}\n\nexport const Editor = () => {\n    const { data, setData, isPristine } = useModelEditor();\n\n    const [activeTabIndex, setActiveTabIndex] = useState(0);\n\n    const onChange = ({ fields, layout }: OnChangeParams) => {\n        setData(data => ({ ...data, fields, layout }));\n    };\n\n    if (!data) {\n        return <CircularProgress label={\"Loading content model...\"} />;\n    }\n\n    return (\n        <div className={\"content-model-editor\"}>\n            <Prompt when={!isPristine} message={prompt} />\n            <Header />\n            <ContentContainer>\n                <SplitView>\n                    <LeftPanel span={4}>\n                        <LeftBarTitle>\n                            <Icon className={titleIcon} icon={<FormIcon />} />\n                            <Typography use={\"headline6\"}>Fields</Typography>\n                        </LeftBarTitle>\n                        <LeftBarFieldList>\n                            <FieldsSidebar\n                                onFieldDragStart={() => {\n                                    setActiveTabIndex(0);\n                                }}\n                            />\n                        </LeftBarFieldList>\n                    </LeftPanel>\n                    <RightPanel span={8}>\n                        <Tabs\n                            value={activeTabIndex}\n                            className={formTabs}\n                            onActivate={e => setActiveTabIndex(e)}\n                        >\n                            <Tab label={\"Edit\"} data-testid={\"cms.editor.tab.edit\"}>\n                                <EditContainer>\n                                    <FieldEditor\n                                        fields={data.fields}\n                                        layout={data.layout || []}\n                                        onChange={onChange}\n                                    />\n                                </EditContainer>\n                            </Tab>\n                            <Tab label={\"Preview\"} data-testid={\"cms.editor.tab.preview\"}>\n                                <PreviewTab activeTab={activeTabIndex === 1} />\n                            </Tab>\n                        </Tabs>\n                    </RightPanel>\n                </SplitView>\n            </ContentContainer>\n            <DragPreview />\n        </div>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.d.ts

@@ -1,11 +1,42 @@
-/// <reference types="react" />
-import { BindComponentRenderProp, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+import React from "react";
+import { BindComponent, BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
 declare type GetBind = CmsModelFieldRendererProps["getBind"];
+export interface MultiValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+    onClone: () => void;
+    title: React.ReactNode;
+    description: string;
+    icon: JSX.Element;
+    actions: JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+export declare const MultiValueItemContainer: import("@webiny/react-composition").DecoratableComponent<(args_0: MultiValueItemContainerProps) => JSX.Element | null>;
+export interface MultiValueItemItemProps {
+    template: CmsDynamicZoneTemplate;
+    contentModel: CmsModel;
+    Bind: BindComponent;
+}
+export declare const MultiValueItem: import("@webiny/react-composition").DecoratableComponent<(props: MultiValueItemItemProps) => JSX.Element | null>;
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+export interface MultiValueContainerProps extends MultiValueDynamicZoneProps {
+    children: React.ReactNode;
+}
+export declare const MultiValueContainer: import("@webiny/react-composition").DecoratableComponent<(props: React.PropsWithChildren<MultiValueContainerProps>, context?: any) => React.ReactElement<any, any> | null>;
 interface MultiValueDynamicZoneProps {
     field: CmsModelField;
     bind: BindComponentRenderProp;
     contentModel: CmsModel;
     getBind: GetBind;
 }
-export declare const MultiValueDynamicZone: ({ bind, getBind, contentModel }: MultiValueDynamicZoneProps) => JSX.Element;
+export declare const MultiValueDynamicZone: (props: MultiValueDynamicZoneProps) => JSX.Element;
 export {};

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MultiValueDynamicZone = void 0;
+exports.MultiValueItemContainer = exports.MultiValueItem = exports.MultiValueDynamicZone = exports.MultiValueContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
@@ -17,20 +17,47 @@ var _AddTemplate = require("./AddTemplate");
 var _TemplateIcon = require("./TemplateIcon");
 var _hooks = require("../../../hooks");
 var _Fields = require("../../../components/ContentEntryForm/Fields");
+var _reactComposition = require("@webiny/react-composition");
 var BottomMargin = /*#__PURE__*/(0, _styled.default)("div", {
   label: "BottomMargin",
   target: "e1mhu37c0"
 })("margin-bottom:20px;");
-var TemplateValueForm = function TemplateValueForm(_ref) {
-  var value = _ref.value,
-    contentModel = _ref.contentModel,
-    Bind = _ref.Bind,
-    isLast = _ref.isLast,
-    isFirst = _ref.isFirst,
-    onMoveUp = _ref.onMoveUp,
-    onMoveDown = _ref.onMoveDown,
-    onDelete = _ref.onDelete,
-    onClone = _ref.onClone;
+var MultiValueItemContainer = (0, _reactComposition.makeDecoratable)("MultiValueItemContainer", function (_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    icon = _ref.icon,
+    actions = _ref.actions,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: title,
+    description: description,
+    icon: icon,
+    actions: actions
+  }, children);
+});
+exports.MultiValueItemContainer = MultiValueItemContainer;
+var MultiValueItem = (0, _reactComposition.makeDecoratable)("MultiValueItem", function (props) {
+  var template = props.template,
+    Bind = props.Bind,
+    contentModel = props.contentModel;
+  return /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  });
+});
+exports.MultiValueItem = MultiValueItem;
+var TemplateValueForm = function TemplateValueForm(_ref2) {
+  var value = _ref2.value,
+    contentModel = _ref2.contentModel,
+    Bind = _ref2.Bind,
+    isLast = _ref2.isLast,
+    isFirst = _ref2.isFirst,
+    onMoveUp = _ref2.onMoveUp,
+    onMoveDown = _ref2.onMoveDown,
+    onDelete = _ref2.onDelete,
+    onClone = _ref2.onClone;
   var _useModelField = (0, _hooks.useModelField)(),
     field = _useModelField.field;
   var templates = field.settings?.templates || [];
@@ -40,12 +67,21 @@ var TemplateValueForm = function TemplateValueForm(_ref) {
   if (!template) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+  return /*#__PURE__*/_react.default.createElement(MultiValueItemContainer, {
+    value: value,
+    contentModel: contentModel,
+    onClone: onClone,
+    isFirst: isFirst,
+    isLast: isLast,
+    onDelete: onDelete,
+    onMoveUp: onMoveUp,
+    onMoveDown: onMoveDown,
     title: template.name,
     description: template.description,
     icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
       icon: template.icon
     }),
+    template: template,
     actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
       icon: /*#__PURE__*/_react.default.createElement(_expand_less.ReactComponent, null),
       onClick: onMoveUp,
@@ -61,17 +97,21 @@ var TemplateValueForm = function TemplateValueForm(_ref) {
       icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
       onClick: onDelete
     }))
-  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
-    fields: template.fields,
-    layout: template.layout || [],
+  }, /*#__PURE__*/_react.default.createElement(MultiValueItem, {
+    template: template,
     contentModel: contentModel,
     Bind: Bind
   }));
 };
-var MultiValueDynamicZone = function MultiValueDynamicZone(_ref2) {
-  var bind = _ref2.bind,
-    getBind = _ref2.getBind,
-    contentModel = _ref2.contentModel;
+var MultiValueContainer = (0, _reactComposition.makeDecoratable)("MultiValueContainer", function (_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));
+});
+exports.MultiValueContainer = MultiValueContainer;
+var MultiValueDynamicZone = function MultiValueDynamicZone(props) {
+  var bind = props.bind,
+    getBind = props.getBind,
+    contentModel = props.contentModel;
   var onTemplate = function onTemplate(template) {
     bind.appendValue({
       _templateId: template.id
@@ -83,7 +123,7 @@ var MultiValueDynamicZone = function MultiValueDynamicZone(_ref2) {
   };
   var values = bind.value || [];
   var hasValues = values.length > 0;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasValues ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, values.map(function (value, index) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasValues ? /*#__PURE__*/_react.default.createElement(MultiValueContainer, props, values.map(function (value, index) {
     return /*#__PURE__*/_react.default.createElement(TemplateValueForm, {
       key: index,
       value: value,

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_cloneDeep","_Accordion","_delete_outline","_library_add","_expand_less","_expand_more","_AddTemplate","_TemplateIcon","_hooks","_Fields","BottomMargin","styled","label","target","TemplateValueForm","_ref","value","contentModel","Bind","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","_useModelField","useModelField","field","templates","settings","template","find","tpl","id","_templateId","default","createElement","AccordionItem","title","name","description","icon","TemplateIcon","actions","Actions","Action","ReactComponent","onClick","disabled","Divider","Fields","fields","layout","MultiValueDynamicZone","_ref2","bind","getBind","onTemplate","appendValue","cloneValue","index","newValue","cloneDeep","values","hasValues","length","Fragment","Accordion","map","key","moveValueUp","moveValueDown","removeValue","AddTemplateIcon","AddTemplateButton","exports"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@material-design-icons/svg/outlined/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@material-design-icons/svg/round/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@material-design-icons/svg/round/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\nconst BottomMargin = styled.div`\n    margin-bottom: 20px;\n`;\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: () => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={onMoveUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={onMoveDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<CloneIcon />} onClick={onClone} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={onDelete} />\n                </AccordionItem.Actions>\n            }\n        >\n            <Fields\n                fields={template.fields}\n                layout={template.layout || []}\n                contentModel={contentModel}\n                Bind={Bind}\n            />\n        </AccordionItem>\n    );\n};\n\ninterface MultiValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = ({\n    bind,\n    getBind,\n    contentModel\n}: MultiValueDynamicZoneProps) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.appendValue({ _templateId: template.id });\n    };\n\n    const cloneValue = (index: number) => {\n        const newValue = cloneDeep(bind.value[index]);\n        bind.appendValue(newValue, index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    return (\n        <>\n            {hasValues ? (\n                <Accordion>\n                    {values.map((value, index) => (\n                        <TemplateValueForm\n                            key={index}\n                            value={value}\n                            contentModel={contentModel}\n                            Bind={getBind(index)}\n                            isFirst={index === 0}\n                            isLast={index === values.length - 1}\n                            onMoveUp={() => bind.moveValueUp(index)}\n                            onMoveDown={() => bind.moveValueDown(index)}\n                            onDelete={() => bind.removeValue(index)}\n                            onClone={() => cloneValue(index)}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <BottomMargin>\n                    <AddTemplateButton onTemplate={onTemplate} />\n                </BottomMargin>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_cloneDeep","_Accordion","_delete_outline","_library_add","_expand_less","_expand_more","_AddTemplate","_TemplateIcon","_hooks","_Fields","_reactComposition","BottomMargin","styled","label","target","MultiValueItemContainer","makeDecoratable","_ref","title","description","icon","actions","children","default","createElement","AccordionItem","exports","MultiValueItem","props","template","Bind","contentModel","Fields","fields","layout","TemplateValueForm","_ref2","value","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","_useModelField","useModelField","field","templates","settings","find","tpl","id","_templateId","name","TemplateIcon","Actions","Action","ReactComponent","onClick","disabled","Divider","MultiValueContainer","_ref3","Accordion","Fragment","MultiValueDynamicZone","bind","getBind","onTemplate","appendValue","cloneValue","index","newValue","cloneDeep","values","hasValues","length","map","key","moveValueUp","moveValueDown","removeValue","AddTemplateIcon","AddTemplateButton"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@material-design-icons/svg/outlined/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@material-design-icons/svg/round/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@material-design-icons/svg/round/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst BottomMargin = styled.div`\n    margin-bottom: 20px;\n`;\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: () => void;\n    title: React.ReactNode;\n    description: string;\n    icon: JSX.Element;\n    actions: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ title, description, icon, actions, children }: MultiValueItemContainerProps) => {\n        return (\n            <AccordionItem title={title} description={description} icon={icon} actions={actions}>\n                {children}\n            </AccordionItem>\n        );\n    }\n);\n\nexport interface MultiValueItemItemProps {\n    template: CmsDynamicZoneTemplate;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n}\n\nexport const MultiValueItem = makeDecoratable(\n    \"MultiValueItem\",\n    (props: MultiValueItemItemProps) => {\n        const { template, Bind, contentModel } = props;\n\n        return (\n            <Fields\n                fields={template.fields}\n                layout={template.layout || []}\n                contentModel={contentModel}\n                Bind={Bind}\n            />\n        );\n    }\n);\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: () => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <MultiValueItemContainer\n            value={value}\n            contentModel={contentModel}\n            onClone={onClone}\n            isFirst={isFirst}\n            isLast={isLast}\n            onDelete={onDelete}\n            onMoveUp={onMoveUp}\n            onMoveDown={onMoveDown}\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            template={template}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={onMoveUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={onMoveDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<CloneIcon />} onClick={onClone} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={onDelete} />\n                </AccordionItem.Actions>\n            }\n        >\n            <MultiValueItem template={template} contentModel={contentModel} Bind={Bind} />\n        </MultiValueItemContainer>\n    );\n};\n\nexport interface MultiValueContainerProps extends MultiValueDynamicZoneProps {\n    children: React.ReactNode;\n}\n\nexport const MultiValueContainer = makeDecoratable<\n    React.FunctionComponent<MultiValueContainerProps>\n>(\"MultiValueContainer\", ({ children }) => {\n    return (\n        <Accordion>\n            <>{children}</>\n        </Accordion>\n    );\n});\n\ninterface MultiValueDynamicZoneProps {\n    // TODO: this prop might be useless, because we now have a `useModelField` hook.\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {\n    const { bind, getBind, contentModel } = props;\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.appendValue({ _templateId: template.id });\n    };\n\n    const cloneValue = (index: number) => {\n        const newValue = cloneDeep(bind.value[index]);\n        bind.appendValue(newValue, index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    return (\n        <>\n            {hasValues ? (\n                <MultiValueContainer {...props}>\n                    {values.map((value, index) => (\n                        <TemplateValueForm\n                            key={index}\n                            value={value}\n                            contentModel={contentModel}\n                            Bind={getBind(index)}\n                            isFirst={index === 0}\n                            isLast={index === values.length - 1}\n                            onMoveUp={() => bind.moveValueUp(index)}\n                            onMoveDown={() => bind.moveValueDown(index)}\n                            onDelete={() => bind.removeValue(index)}\n                            onClone={() => cloneValue(index)}\n                        />\n                    ))}\n                </MultiValueContainer>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <BottomMargin>\n                    <AddTemplateButton onTemplate={onTemplate} />\n                </BottomMargin>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.d.ts

@@ -1,2 +1,14 @@
-import { CmsModelFieldRendererPlugin } from "../../../../types";
+import React from "react";
+import { BindComponent, BindComponentRenderProp, CmsModel, CmsModelField, CmsModelFieldRendererPlugin } from "../../../../types";
+export declare type DynamicZoneContainerProps = {
+    field: CmsModelField;
+    getBind: (index?: number, key?: string) => BindComponent;
+    contentModel: CmsModel;
+    bind: BindComponentRenderProp;
+    children: React.ReactNode;
+    title?: string;
+    description?: string;
+    className?: string;
+};
+export declare const DynamicZoneContainer: import("@webiny/react-composition").DecoratableComponent<(props: React.PropsWithChildren<DynamicZoneContainerProps>, context?: any) => React.ReactElement<any, any> | null>;
 export declare const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin;

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js

@@ -4,14 +4,36 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dynamicZoneFieldRenderer = void 0;
+exports.dynamicZoneFieldRenderer = exports.DynamicZoneContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _emotion = require("emotion");
 var _Accordion = require("@webiny/ui/Accordion");
 var _SingleValueDynamicZone = require("./SingleValueDynamicZone");
 var _MultiValueDynamicZone = require("./MultiValueDynamicZone");
 var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+var _reactComposition = require("@webiny/react-composition");
 var noBottomPadding = /*#__PURE__*/(0, _emotion.css)("> .webiny-ui-accordion-item__content{padding-bottom:0 !important;}label:noBottomPadding;");
+var DynamicZoneContainer = (0, _reactComposition.makeDecoratable)("DynamicZoneContainer", function (props) {
+  var field = props.field,
+    _props$bind$validatio = props.bind.validation,
+    isValid = _props$bind$validatio.isValid,
+    message = _props$bind$validatio.message,
+    _props$title = props.title,
+    title = _props$title === void 0 ? field.label : _props$title,
+    _props$description = props.description,
+    description = _props$description === void 0 ? field.helpText : _props$description,
+    className = props.className,
+    children = props.children;
+  var defaultClassName = field.multipleValues ? noBottomPadding : undefined;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: title,
+    description: description,
+    className: className || defaultClassName
+  }, children)), isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, message));
+});
+exports.DynamicZoneContainer = DynamicZoneContainer;
 var DynamicZoneContent = function DynamicZoneContent(_ref) {
   var field = _ref.field,
     getBind = _ref.getBind,
@@ -21,25 +43,20 @@ var DynamicZoneContent = function DynamicZoneContent(_ref) {
     console.info("Skipping \"".concat(field.fieldId, "\" field. There are no templates defined for this dynamic zone."));
     return null;
   }
-  var isMultipleValues = field.multipleValues === true;
   var Bind = getBind();
-  var Component = isMultipleValues ? _MultiValueDynamicZone.MultiValueDynamicZone : _SingleValueDynamicZone.SingleValueDynamicZone;
+  var Component = field.multipleValues ? _MultiValueDynamicZone.MultiValueDynamicZone : _SingleValueDynamicZone.SingleValueDynamicZone;
   return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
-    var _bind$validation = bind.validation,
-      isValid = _bind$validation.isValid,
-      message = _bind$validation.message;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
-      title: field.label,
-      description: field.helpText,
-      className: isMultipleValues ? noBottomPadding : undefined
+    return /*#__PURE__*/_react.default.createElement(DynamicZoneContainer, {
+      field: field,
+      bind: bind,
+      getBind: getBind,
+      contentModel: contentModel
     }, /*#__PURE__*/_react.default.createElement(Component, {
       bind: bind,
       field: field,
       getBind: getBind,
       contentModel: contentModel
-    }))), isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-      error: true
-    }, message));
+    }));
   });
 };
 var dynamicZoneFieldRenderer = {