@webiny/app-headless-cms 5.32.0 → 5.33.0-beta.0

package/admin/components/ContentEntryForm/useContentEntryForm.js

@@ -114,6 +114,10 @@ function useContentEntryForm(params) {
 
 
   var setInvalidFieldValues = function setInvalidFieldValues(errors) {
+    if (Array.isArray(errors) === false || !errors) {
+      return;
+    }
+
     var values = (errors || []).reduce(function (acc, er) {
       acc[er.fieldId] = er.error;
       return acc;
@@ -382,7 +386,7 @@ function useContentEntryForm(params) {
                 return item.fieldId;
               });
               formData = (0, _pick.default)(data, (0, _toConsumableArray2.default)(fieldsIds));
-              gqlData = (0, _prepareFormData.prepareFormData)(formData, contentModel);
+              gqlData = (0, _prepareFormData.prepareFormData)(formData, contentModel.fields);
 
               if (entry.id) {
                 _context4.next = 5;

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

@@ -1 +1 @@
-{"version":3,"names":["convertDefaultValue","field","value","type","Boolean","Number","useContentEntryForm","params","useContentEntry","listQueryVariables","contentModel","entry","useRouter","history","useSnackbar","showSnackbar","useState","invalidFields","setInvalidFields","loading","setLoading","renderPlugins","useMemo","plugins","byType","goToRevision","useCallback","id","push","modelId","encodeURIComponent","CREATE_CONTENT","createCreateMutation","UPDATE_CONTENT","createUpdateMutation","CREATE_CONTENT_FROM","createCreateFromMutation","useMutation","createMutation","updateMutation","createFromMutation","setInvalidFieldValues","errors","values","reduce","acc","er","fieldId","error","resetInvalidFieldValues","createContent","data","variables","update","cache","response","content","message","addEntryToListCache","GQLCache","name","onSubmit","updateContent","revision","createContentFrom","formData","newRevision","updateLatestRevisionInListCache","addRevisionToRevisionsCache","onChange","form","fieldsIds","fields","map","item","pick","gqlData","prepareFormData","meta","isLocked","locked","defaultValues","settings","multipleValues","defaultValue","undefined","predefinedValues","enabled","Array","isArray","selectedValue","find","selected","filter"],"sources":["useContentEntryForm.ts"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useMemo, useState } from \"react\";\nimport pick from \"lodash/pick\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport {\n    createCreateFromMutation,\n    createCreateMutation,\n    createUpdateMutation,\n    CmsEntryCreateMutationResponse,\n    CmsEntryCreateMutationVariables,\n    CmsEntryUpdateMutationResponse,\n    CmsEntryUpdateMutationVariables,\n    CmsEntryCreateFromMutationResponse,\n    CmsEntryCreateFromMutationVariables\n} from \"~/admin/graphql/contentEntries\";\nimport { useMutation } from \"~/admin/hooks\";\nimport * as GQLCache from \"~/admin/views/contentEntries/ContentEntry/cache\";\nimport { prepareFormData } from \"~/admin/views/contentEntries/ContentEntry/prepareFormData\";\nimport {\n    CmsEditorContentEntry,\n    CmsEditorContentModel,\n    CmsEditorField,\n    CmsEditorFieldRendererPlugin\n} from \"~/types\";\nimport { useContentEntry } from \"~/admin/views/contentEntries/hooks/useContentEntry\";\nimport { plugins } from \"@webiny/plugins\";\n\n/**\n * Used for some fields to convert their values.\n */\nconst convertDefaultValue = (field: CmsEditorField, value: any): string | number | boolean => {\n    switch (field.type) {\n        case \"boolean\":\n            return Boolean(value);\n        case \"number\":\n            return Number(value);\n        default:\n            return value;\n    }\n};\n\ninterface InvalidFieldError {\n    fieldId: string;\n    error: string;\n}\n\ninterface UseContentEntryForm {\n    data: Record<string, any>;\n    loading: boolean;\n    setLoading: Dispatch<SetStateAction<boolean>>;\n    onChange: FormOnSubmit;\n    onSubmit: FormOnSubmit;\n    invalidFields: Record<string, string>;\n    renderPlugins: CmsEditorFieldRendererPlugin[];\n}\n\nexport interface UseContentEntryFormParams {\n    contentModel: CmsEditorContentModel;\n    entry: Partial<CmsEditorContentEntry>;\n    onChange?: FormOnSubmit;\n    onSubmit?: FormOnSubmit;\n    addEntryToListCache: boolean;\n}\n\nexport function useContentEntryForm(params: UseContentEntryFormParams): UseContentEntryForm {\n    const { listQueryVariables } = useContentEntry();\n    const { contentModel, entry } = params;\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const [invalidFields, setInvalidFields] = useState<Record<string, string>>({});\n    const [loading, setLoading] = useState(false);\n\n    const renderPlugins = useMemo(\n        () => plugins.byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\"),\n        []\n    );\n\n    const goToRevision = useCallback(id => {\n        history.push(`/cms/content-entries/${contentModel.modelId}?id=${encodeURIComponent(id)}`);\n    }, []);\n\n    const { CREATE_CONTENT, UPDATE_CONTENT, CREATE_CONTENT_FROM } = useMemo(() => {\n        return {\n            // LIST_CONTENT: createListQuery(contentModel),\n            CREATE_CONTENT: createCreateMutation(contentModel),\n            UPDATE_CONTENT: createUpdateMutation(contentModel),\n            CREATE_CONTENT_FROM: createCreateFromMutation(contentModel)\n        };\n    }, [contentModel.modelId]);\n\n    const [createMutation] = useMutation<\n        CmsEntryCreateMutationResponse,\n        CmsEntryCreateMutationVariables\n    >(CREATE_CONTENT);\n    const [updateMutation] = useMutation<\n        CmsEntryUpdateMutationResponse,\n        CmsEntryUpdateMutationVariables\n    >(UPDATE_CONTENT);\n    const [createFromMutation] = useMutation<\n        CmsEntryCreateFromMutationResponse,\n        CmsEntryCreateFromMutationVariables\n    >(CREATE_CONTENT_FROM);\n\n    /**\n     * Note that when passing error.data variable we cast as InvalidFieldError[] because we know it is so.\n     */\n    const setInvalidFieldValues = (errors?: InvalidFieldError[]): void => {\n        const values = (errors || []).reduce((acc, er) => {\n            acc[er.fieldId] = er.error;\n            return acc;\n        }, {} as Record<string, string>);\n        setInvalidFields(() => values);\n    };\n\n    const resetInvalidFieldValues = (): void => {\n        setInvalidFields(() => ({}));\n    };\n\n    const createContent = useCallback(\n        async data => {\n            setLoading(true);\n            const response = await createMutation({\n                variables: { data },\n                update(cache, response) {\n                    if (!response.data) {\n                        showSnackbar(\"Missing response data in Create Entry.\");\n                        return;\n                    }\n                    const { data } = response;\n                    const { data: entry, error } = data.content || {};\n                    if (error) {\n                        showSnackbar(error.message);\n                        setInvalidFieldValues(error.data as InvalidFieldError[]);\n                        return;\n                    } else if (!entry) {\n                        showSnackbar(\n                            \"Missing entry data in update callback on Create Entry Response.\"\n                        );\n                        return;\n                    }\n                    resetInvalidFieldValues();\n                    if (params.addEntryToListCache) {\n                        GQLCache.addEntryToListCache(\n                            contentModel,\n                            cache,\n                            entry,\n                            listQueryVariables\n                        );\n                    }\n                }\n            });\n            setLoading(false);\n\n            const { error, data: entry } = response.data?.content || {};\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            } else if (!entry) {\n                showSnackbar(\"Missing entry data in Create Entry Response.\");\n                return null;\n            }\n            resetInvalidFieldValues();\n            showSnackbar(`${contentModel.name} entry created successfully!`);\n            if (typeof params.onSubmit === \"function\") {\n                params.onSubmit(entry);\n            } else {\n                goToRevision(entry.id);\n            }\n            return entry;\n        },\n        [contentModel.modelId, listQueryVariables, params.onSubmit, params.addEntryToListCache]\n    );\n\n    const updateContent = useCallback(\n        async (revision, data) => {\n            setLoading(true);\n            const response = await updateMutation({\n                variables: { revision, data }\n            });\n            setLoading(false);\n            if (!response.data) {\n                showSnackbar(\"Missing response data on Update Entry Response.\");\n                return;\n            }\n\n            const { error } = response.data.content;\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            }\n\n            resetInvalidFieldValues();\n            showSnackbar(\"Content saved successfully.\");\n            const { data: entry } = response.data.content;\n            return entry;\n        },\n        [contentModel.modelId]\n    );\n\n    const createContentFrom = useCallback(\n        async (revision: string, formData: Record<string, any>) => {\n            setLoading(true);\n            const response = await createFromMutation({\n                variables: { revision, data: formData },\n                update(cache, response) {\n                    if (!response.data) {\n                        showSnackbar(\n                            \"Missing data in update callback on Create From Entry Response.\"\n                        );\n                        return;\n                    }\n                    const { data: newRevision, error } = response.data.content;\n                    if (error) {\n                        showSnackbar(error.message);\n                        setInvalidFieldValues(error.data as InvalidFieldError[]);\n                        return;\n                    } else if (!newRevision) {\n                        showSnackbar(\"Missing entry data in update callback on Create From Entry.\");\n                        return;\n                    }\n                    resetInvalidFieldValues();\n                    GQLCache.updateLatestRevisionInListCache(\n                        contentModel,\n                        cache,\n                        newRevision,\n                        listQueryVariables\n                    );\n                    GQLCache.addRevisionToRevisionsCache(contentModel, cache, newRevision);\n\n                    showSnackbar(\"A new revision was created!\");\n                    goToRevision(newRevision.id);\n                }\n            });\n            setLoading(false);\n\n            if (!response.data) {\n                showSnackbar(\"Missing response data on Create From Entry Mutation.\");\n                return;\n            }\n\n            const { data, error } = response.data.content;\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            }\n            resetInvalidFieldValues();\n\n            return data;\n        },\n        [contentModel.modelId, listQueryVariables]\n    );\n\n    const onChange: FormOnSubmit = (data, form) => {\n        if (!params.onChange) {\n            return;\n        }\n        return params.onChange(data, form);\n    };\n\n    const onSubmit = async (data: Record<string, any>) => {\n        const fieldsIds = contentModel.fields.map(item => item.fieldId);\n        const formData = pick(data, [...fieldsIds]);\n\n        const gqlData = prepareFormData(formData, contentModel);\n        if (!entry.id) {\n            return createContent(gqlData);\n        }\n\n        const { meta } = entry;\n        const { locked: isLocked } = meta || {};\n\n        if (!isLocked) {\n            return updateContent(entry.id, gqlData);\n        }\n        return createContentFrom(entry.id, gqlData);\n    };\n\n    const defaultValues = useMemo((): Record<string, any> => {\n        const values: Record<string, any> = {};\n        /**\n         * Assign the default values:\n         * * check the settings.defaultValue\n         * * check the predefinedValues for selected value\n         */\n        for (const field of contentModel.fields) {\n            /**\n             * When checking if defaultValue is set in settings, we do the undefined check because it can be null, 0, empty string, false, etc...\n             */\n            const { settings, multipleValues = false } = field;\n            if (settings && settings.defaultValue !== undefined) {\n                /**\n                 * Special type of field is the boolean one.\n                 * We MUST set true/false for default value.\n                 */\n                values[field.fieldId] = convertDefaultValue(field, settings.defaultValue);\n                continue;\n            }\n            /**\n             * No point in going further if predefined values are not enabled.\n             */\n            const { predefinedValues } = field;\n            if (\n                !predefinedValues ||\n                !predefinedValues.enabled ||\n                Array.isArray(predefinedValues.values) === false\n            ) {\n                continue;\n            }\n            /**\n             * When field is not a multiple values one, we find the first possible default selected value and set it as field value.\n             */\n            if (!multipleValues) {\n                const selectedValue = predefinedValues.values.find(({ selected }) => {\n                    return !!selected;\n                });\n                if (selectedValue) {\n                    values[field.fieldId] = convertDefaultValue(field, selectedValue.value);\n                }\n                continue;\n            }\n            /**\n             *\n             */\n            values[field.fieldId] = predefinedValues.values\n                .filter(({ selected }) => !!selected)\n                .map(({ value }) => {\n                    return convertDefaultValue(field, value);\n                });\n        }\n        return values;\n    }, [contentModel.modelId]);\n\n    return {\n        /**\n         * If entry is not set or entry.id does not exist, it means that form is for the new entry, so fetch default values.\n         */\n        data: entry && entry.id ? entry : defaultValues,\n        loading,\n        setLoading,\n        onChange,\n        onSubmit,\n        invalidFields,\n        renderPlugins\n    };\n}\n"],"mappings":"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"}
+{"version":3,"names":["convertDefaultValue","field","value","type","Boolean","Number","useContentEntryForm","params","useContentEntry","listQueryVariables","contentModel","entry","useRouter","history","useSnackbar","showSnackbar","useState","invalidFields","setInvalidFields","loading","setLoading","renderPlugins","useMemo","plugins","byType","goToRevision","useCallback","id","push","modelId","encodeURIComponent","CREATE_CONTENT","createCreateMutation","UPDATE_CONTENT","createUpdateMutation","CREATE_CONTENT_FROM","createCreateFromMutation","useMutation","createMutation","updateMutation","createFromMutation","setInvalidFieldValues","errors","Array","isArray","values","reduce","acc","er","fieldId","error","resetInvalidFieldValues","createContent","data","variables","update","cache","response","content","message","addEntryToListCache","GQLCache","name","onSubmit","updateContent","revision","createContentFrom","formData","newRevision","updateLatestRevisionInListCache","addRevisionToRevisionsCache","onChange","form","fieldsIds","fields","map","item","pick","gqlData","prepareFormData","meta","isLocked","locked","defaultValues","settings","multipleValues","defaultValue","undefined","predefinedValues","enabled","selectedValue","find","selected","filter"],"sources":["useContentEntryForm.ts"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useMemo, useState } from \"react\";\nimport pick from \"lodash/pick\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport {\n    createCreateFromMutation,\n    createCreateMutation,\n    createUpdateMutation,\n    CmsEntryCreateMutationResponse,\n    CmsEntryCreateMutationVariables,\n    CmsEntryUpdateMutationResponse,\n    CmsEntryUpdateMutationVariables,\n    CmsEntryCreateFromMutationResponse,\n    CmsEntryCreateFromMutationVariables\n} from \"~/admin/graphql/contentEntries\";\nimport { useMutation } from \"~/admin/hooks\";\nimport * as GQLCache from \"~/admin/views/contentEntries/ContentEntry/cache\";\nimport { prepareFormData } from \"~/admin/views/contentEntries/ContentEntry/prepareFormData\";\nimport {\n    CmsEditorContentEntry,\n    CmsEditorContentModel,\n    CmsEditorField,\n    CmsEditorFieldRendererPlugin\n} from \"~/types\";\nimport { useContentEntry } from \"~/admin/views/contentEntries/hooks/useContentEntry\";\nimport { plugins } from \"@webiny/plugins\";\n\n/**\n * Used for some fields to convert their values.\n */\nconst convertDefaultValue = (field: CmsEditorField, value: any): string | number | boolean => {\n    switch (field.type) {\n        case \"boolean\":\n            return Boolean(value);\n        case \"number\":\n            return Number(value);\n        default:\n            return value;\n    }\n};\n\ninterface InvalidFieldError {\n    fieldId: string;\n    error: string;\n}\n\ninterface UseContentEntryForm {\n    data: Record<string, any>;\n    loading: boolean;\n    setLoading: Dispatch<SetStateAction<boolean>>;\n    onChange: FormOnSubmit;\n    onSubmit: FormOnSubmit;\n    invalidFields: Record<string, string>;\n    renderPlugins: CmsEditorFieldRendererPlugin[];\n}\n\nexport interface UseContentEntryFormParams {\n    contentModel: CmsEditorContentModel;\n    entry: Partial<CmsEditorContentEntry>;\n    onChange?: FormOnSubmit;\n    onSubmit?: FormOnSubmit;\n    addEntryToListCache: boolean;\n}\n\nexport function useContentEntryForm(params: UseContentEntryFormParams): UseContentEntryForm {\n    const { listQueryVariables } = useContentEntry();\n    const { contentModel, entry } = params;\n    const { history } = useRouter();\n    const { showSnackbar } = useSnackbar();\n    const [invalidFields, setInvalidFields] = useState<Record<string, string>>({});\n    const [loading, setLoading] = useState(false);\n\n    const renderPlugins = useMemo(\n        () => plugins.byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\"),\n        []\n    );\n\n    const goToRevision = useCallback(id => {\n        history.push(`/cms/content-entries/${contentModel.modelId}?id=${encodeURIComponent(id)}`);\n    }, []);\n\n    const { CREATE_CONTENT, UPDATE_CONTENT, CREATE_CONTENT_FROM } = useMemo(() => {\n        return {\n            // LIST_CONTENT: createListQuery(contentModel),\n            CREATE_CONTENT: createCreateMutation(contentModel),\n            UPDATE_CONTENT: createUpdateMutation(contentModel),\n            CREATE_CONTENT_FROM: createCreateFromMutation(contentModel)\n        };\n    }, [contentModel.modelId]);\n\n    const [createMutation] = useMutation<\n        CmsEntryCreateMutationResponse,\n        CmsEntryCreateMutationVariables\n    >(CREATE_CONTENT);\n    const [updateMutation] = useMutation<\n        CmsEntryUpdateMutationResponse,\n        CmsEntryUpdateMutationVariables\n    >(UPDATE_CONTENT);\n    const [createFromMutation] = useMutation<\n        CmsEntryCreateFromMutationResponse,\n        CmsEntryCreateFromMutationVariables\n    >(CREATE_CONTENT_FROM);\n\n    /**\n     * Note that when passing error.data variable we cast as InvalidFieldError[] because we know it is so.\n     */\n    const setInvalidFieldValues = (errors?: InvalidFieldError[]): void => {\n        if (Array.isArray(errors) === false || !errors) {\n            return;\n        }\n        const values = (errors || []).reduce((acc, er) => {\n            acc[er.fieldId] = er.error;\n            return acc;\n        }, {} as Record<string, string>);\n        setInvalidFields(() => values);\n    };\n\n    const resetInvalidFieldValues = (): void => {\n        setInvalidFields(() => ({}));\n    };\n\n    const createContent = useCallback(\n        async data => {\n            setLoading(true);\n            const response = await createMutation({\n                variables: { data },\n                update(cache, response) {\n                    if (!response.data) {\n                        showSnackbar(\"Missing response data in Create Entry.\");\n                        return;\n                    }\n                    const { data } = response;\n                    const { data: entry, error } = data.content || {};\n                    if (error) {\n                        showSnackbar(error.message);\n                        setInvalidFieldValues(error.data as InvalidFieldError[]);\n                        return;\n                    } else if (!entry) {\n                        showSnackbar(\n                            \"Missing entry data in update callback on Create Entry Response.\"\n                        );\n                        return;\n                    }\n                    resetInvalidFieldValues();\n                    if (params.addEntryToListCache) {\n                        GQLCache.addEntryToListCache(\n                            contentModel,\n                            cache,\n                            entry,\n                            listQueryVariables\n                        );\n                    }\n                }\n            });\n            setLoading(false);\n\n            const { error, data: entry } = response.data?.content || {};\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            } else if (!entry) {\n                showSnackbar(\"Missing entry data in Create Entry Response.\");\n                return null;\n            }\n            resetInvalidFieldValues();\n            showSnackbar(`${contentModel.name} entry created successfully!`);\n            if (typeof params.onSubmit === \"function\") {\n                params.onSubmit(entry);\n            } else {\n                goToRevision(entry.id);\n            }\n            return entry;\n        },\n        [contentModel.modelId, listQueryVariables, params.onSubmit, params.addEntryToListCache]\n    );\n\n    const updateContent = useCallback(\n        async (revision, data) => {\n            setLoading(true);\n            const response = await updateMutation({\n                variables: { revision, data }\n            });\n            setLoading(false);\n            if (!response.data) {\n                showSnackbar(\"Missing response data on Update Entry Response.\");\n                return;\n            }\n\n            const { error } = response.data.content;\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            }\n\n            resetInvalidFieldValues();\n            showSnackbar(\"Content saved successfully.\");\n            const { data: entry } = response.data.content;\n            return entry;\n        },\n        [contentModel.modelId]\n    );\n\n    const createContentFrom = useCallback(\n        async (revision: string, formData: Record<string, any>) => {\n            setLoading(true);\n            const response = await createFromMutation({\n                variables: { revision, data: formData },\n                update(cache, response) {\n                    if (!response.data) {\n                        showSnackbar(\n                            \"Missing data in update callback on Create From Entry Response.\"\n                        );\n                        return;\n                    }\n                    const { data: newRevision, error } = response.data.content;\n                    if (error) {\n                        showSnackbar(error.message);\n                        setInvalidFieldValues(error.data as InvalidFieldError[]);\n                        return;\n                    } else if (!newRevision) {\n                        showSnackbar(\"Missing entry data in update callback on Create From Entry.\");\n                        return;\n                    }\n                    resetInvalidFieldValues();\n                    GQLCache.updateLatestRevisionInListCache(\n                        contentModel,\n                        cache,\n                        newRevision,\n                        listQueryVariables\n                    );\n                    GQLCache.addRevisionToRevisionsCache(contentModel, cache, newRevision);\n\n                    showSnackbar(\"A new revision was created!\");\n                    goToRevision(newRevision.id);\n                }\n            });\n            setLoading(false);\n\n            if (!response.data) {\n                showSnackbar(\"Missing response data on Create From Entry Mutation.\");\n                return;\n            }\n\n            const { data, error } = response.data.content;\n            if (error) {\n                showSnackbar(error.message);\n                setInvalidFieldValues(error.data as InvalidFieldError[]);\n                return null;\n            }\n            resetInvalidFieldValues();\n\n            return data;\n        },\n        [contentModel.modelId, listQueryVariables]\n    );\n\n    const onChange: FormOnSubmit = (data, form) => {\n        if (!params.onChange) {\n            return;\n        }\n        return params.onChange(data, form);\n    };\n\n    const onSubmit = async (data: Record<string, any>) => {\n        const fieldsIds = contentModel.fields.map(item => item.fieldId);\n        const formData = pick(data, [...fieldsIds]);\n\n        const gqlData = prepareFormData(formData, contentModel.fields);\n        if (!entry.id) {\n            return createContent(gqlData);\n        }\n\n        const { meta } = entry;\n        const { locked: isLocked } = meta || {};\n\n        if (!isLocked) {\n            return updateContent(entry.id, gqlData);\n        }\n        return createContentFrom(entry.id, gqlData);\n    };\n\n    const defaultValues = useMemo((): Record<string, any> => {\n        const values: Record<string, any> = {};\n        /**\n         * Assign the default values:\n         * * check the settings.defaultValue\n         * * check the predefinedValues for selected value\n         */\n        for (const field of contentModel.fields) {\n            /**\n             * When checking if defaultValue is set in settings, we do the undefined check because it can be null, 0, empty string, false, etc...\n             */\n            const { settings, multipleValues = false } = field;\n            if (settings && settings.defaultValue !== undefined) {\n                /**\n                 * Special type of field is the boolean one.\n                 * We MUST set true/false for default value.\n                 */\n                values[field.fieldId] = convertDefaultValue(field, settings.defaultValue);\n                continue;\n            }\n            /**\n             * No point in going further if predefined values are not enabled.\n             */\n            const { predefinedValues } = field;\n            if (\n                !predefinedValues ||\n                !predefinedValues.enabled ||\n                Array.isArray(predefinedValues.values) === false\n            ) {\n                continue;\n            }\n            /**\n             * When field is not a multiple values one, we find the first possible default selected value and set it as field value.\n             */\n            if (!multipleValues) {\n                const selectedValue = predefinedValues.values.find(({ selected }) => {\n                    return !!selected;\n                });\n                if (selectedValue) {\n                    values[field.fieldId] = convertDefaultValue(field, selectedValue.value);\n                }\n                continue;\n            }\n            /**\n             *\n             */\n            values[field.fieldId] = predefinedValues.values\n                .filter(({ selected }) => !!selected)\n                .map(({ value }) => {\n                    return convertDefaultValue(field, value);\n                });\n        }\n        return values;\n    }, [contentModel.modelId]);\n\n    return {\n        /**\n         * If entry is not set or entry.id does not exist, it means that form is for the new entry, so fetch default values.\n         */\n        data: entry && entry.id ? entry : defaultValues,\n        loading,\n        setLoading,\n        onChange,\n        onSubmit,\n        invalidFields,\n        renderPlugins\n    };\n}\n"],"mappings":"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"}

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js

@@ -34,7 +34,7 @@ var GeneralTab = function GeneralTab(_ref) {
   var inputRef = (0, _react.useRef)(null);
 
   var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
-      data = _useContentModelEdito.data;
+      contentModel = _useContentModelEdito.data;
 
   var _useFieldEditor = (0, _.useFieldEditor)(),
       getField = _useFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
@@ -90,7 +90,7 @@ var GeneralTab = function GeneralTab(_ref) {
       form: form,
       afterChangeLabel: afterChangeLabel,
       uniqueFieldIdValidator: uniqueFieldIdValidator,
-      contentModel: data
+      contentModel: contentModel
     });
   }
 
@@ -121,7 +121,6 @@ var GeneralTab = function GeneralTab(_ref) {
     beforeChange: beforeChangeFieldId
   }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
     label: "Field ID",
-    disabled: !!field.id,
     "data-testid": "cms.editor.field.settings.general.label-".concat(field.id)
   }))), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js.map

@@ -1 +1 @@
-{"version":3,"names":["GeneralTab","field","form","fieldPlugin","Bind","setValue","inputRef","useRef","useContentModelEditor","data","useFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","beforeChangeFieldId","baseOnChange","newValue","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","contentModel","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { CmsEditorField, CmsEditorFieldTypePlugin } from \"~/types\";\nimport { FormRenderPropParams } from \"@webiny/form/types\";\n\nimport { useFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\n\ninterface GeneralTabProps {\n    field: CmsEditorField;\n    form: FormRenderPropParams;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n}\n\nconst GeneralTab: React.FC<GeneralTabProps> = ({ field, form, fieldPlugin }) => {\n    const { Bind, setValue } = form;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data } = useContentModelEditor();\n    const { getField } = useFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, 200);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            const newValue = value.trim();\n\n            baseOnChange(newValue);\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            form,\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel: data\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            fieldPlugin.field.allowPredefinedValues &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            disabled={!!field.id}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}
+{"version":3,"names":["GeneralTab","field","form","fieldPlugin","Bind","setValue","inputRef","useRef","useContentModelEditor","contentModel","data","useFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","beforeChangeFieldId","baseOnChange","newValue","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { CmsEditorField, CmsEditorFieldTypePlugin } from \"~/types\";\nimport { FormRenderPropParams } from \"@webiny/form/types\";\n\nimport { useFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\n\ninterface GeneralTabProps {\n    field: CmsEditorField;\n    form: FormRenderPropParams;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n}\n\nconst GeneralTab: React.FC<GeneralTabProps> = ({ field, form, fieldPlugin }) => {\n    const { Bind, setValue } = form;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useContentModelEditor();\n    const { getField } = useFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, 200);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            const newValue = value.trim();\n\n            baseOnChange(newValue);\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            form,\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            fieldPlugin.field.allowPredefinedValues &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -51,6 +53,8 @@ var _invariant = _interopRequireDefault(require("invariant"));
 
 var _Button = require("@webiny/ui/Button");
 
+var _useContentModelEditor = require("../ContentModelEditor/useContentModelEditor");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var _excluded = ["field", "onSubmit"];
@@ -141,9 +145,19 @@ var EditFieldDialog = function EditFieldDialog(_ref2) {
   var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
       getFieldPlugin = _useFieldEditor.getFieldPlugin;
 
+  var _useContentModelEdito = (0, _useContentModelEditor.useContentModelEditor)(),
+      contentModel = _useContentModelEdito.data,
+      setContentModelData = _useContentModelEdito.setData;
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isTitleField = _useState4[0],
+      setIsTitleField = _useState4[1];
+
   (0, _react.useEffect)(function () {
     if (!field) {
       setCurrent(field);
+      setIsTitleField(false);
       return;
     }
 
@@ -165,6 +179,12 @@ var EditFieldDialog = function EditFieldDialog(_ref2) {
       }
     }
 
+    if (contentModel.titleFieldId === field.fieldId) {
+      setIsTitleField(true);
+    } else if (isTitleField === true) {
+      setIsTitleField(false);
+    }
+
     setCurrent(clonedField);
   }, [field]);
   var onClose = (0, _react.useCallback)(function () {
@@ -266,6 +286,26 @@ var EditFieldDialog = function EditFieldDialog(_ref2) {
       }, t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Cancel"])))), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
         "data-testid": "cms.editor.field.settings.save",
         onClick: function onClick(ev) {
+          /**
+           * In case title field fieldID changed, we need to change it in the model data as well.
+           */
+          if (isTitleField && contentModel.titleFieldId !== form.data.fieldId) {
+            setContentModelData(function (prev) {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+                titleFieldId: form.data.fieldId
+              });
+            }).then(function () {
+              form.submit(ev);
+            }).catch(function (ex) {
+              console.error(ex.message);
+            });
+            return;
+          }
+          /**
+           * Or just continue as usually
+           */
+
+
           form.submit(ev);
         }
       }, t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Save Field"]))))));

package/admin/components/FieldEditor/EditFieldDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","dialogBody","css","width","height","getValidators","fieldPlugin","key","defaultValidators","mappedValidators","plugins","byType","map","validator","allowedValidators","field","includes","name","optional","filteredValidators","filter","Boolean","sort","a","b","getListValidators","getFieldValidators","fieldEditorDialog","maxWidth","maxHeight","paddingTop","EditFieldDialog","onSubmit","props","useState","current","setCurrent","useFieldEditor","getFieldPlugin","useEffect","clonedField","renderer","item","canUse","renderPlugin","rendererName","onClose","useCallback","render","headerTitle","type","invariant","fieldTypeLabel","label","data","form","hasValidators","Array","isArray","validators","length","showValidatorsTab","multipleValues","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","ev","submit"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { cloneDeep } from \"lodash\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"@webiny/ui/Dialog\";\nimport { Form } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin,\n    CmsEditorFieldValidatorPlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport ValidatorsTab from \"./EditFieldDialog/ValidatorsTab\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport invariant from \"invariant\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst dialogBody = css({\n    \"&.webiny-ui-dialog__content\": {\n        width: 875,\n        height: 450\n    }\n});\n\ninterface EditFieldDialogProps {\n    field: CmsEditorField | null;\n    onClose: () => void;\n    onSubmit: (data: CmsEditorField) => void;\n}\n\ninterface Validator {\n    optional: boolean;\n    validator: CmsEditorFieldValidatorPlugin[\"validator\"];\n}\nconst getValidators = (\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    /**\n     * We only have validators and listValidators, thats why the strict string types\n     */\n    key: \"validators\" | \"listValidators\",\n    defaultValidators: string[] = []\n): Validator[] => {\n    const mappedValidators = plugins\n        .byType<CmsEditorFieldValidatorPlugin>(\"cms-editor-field-validator\")\n        .map(({ validator }) => {\n            const allowedValidators = fieldPlugin.field[key] || defaultValidators;\n            if (allowedValidators.includes(validator.name)) {\n                return {\n                    optional: true,\n                    validator\n                };\n            } else if (allowedValidators.includes(`!${validator.name}`)) {\n                return {\n                    optional: false,\n                    validator\n                };\n            }\n\n            return null;\n        });\n\n    const filteredValidators = mappedValidators.filter(Boolean) as Validator[];\n\n    return (\n        filteredValidators\n            /**\n             * We can safely cast because we are filtering in previous step.\n             */\n            .sort((a: Validator, b: Validator) => {\n                if (!a.optional && b.optional) {\n                    return -1;\n                }\n\n                if (a.optional && !b.optional) {\n                    return 1;\n                }\n\n                return 0;\n            }) as Validator[]\n    );\n};\n\nconst getListValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"listValidators\", [\"minLength\", \"maxLength\"]);\n};\n\nconst getFieldValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"validators\");\n};\n\nconst fieldEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"calc(100vh - 155px)\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nconst EditFieldDialog: React.FC<EditFieldDialogProps> = ({ field, onSubmit, ...props }) => {\n    const [current, setCurrent] = useState<CmsEditorField | null>(null);\n\n    const { getFieldPlugin } = useFieldEditor();\n\n    useEffect((): void => {\n        if (!field) {\n            setCurrent(field);\n            return;\n        }\n\n        const clonedField = cloneDeep(field);\n\n        if (!clonedField.renderer || !clonedField.renderer.name) {\n            const [renderPlugin] = plugins\n                .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n                .filter(item => item.renderer.canUse({ field }));\n\n            if (renderPlugin) {\n                clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n            }\n        }\n\n        setCurrent(clonedField);\n    }, [field]);\n\n    const onClose = useCallback((): void => {\n        setCurrent(null);\n        props.onClose();\n    }, []);\n\n    let render = null;\n    let headerTitle = t`Field Settings`;\n\n    if (current) {\n        /**\n         * Something must be very wrong for field plugin to be missing.\n         */\n        const fieldPlugin = getFieldPlugin(current.type) as CmsEditorFieldTypePlugin;\n        /**\n         * We will throw error because of that.\n         */\n        invariant(fieldPlugin, `Missing field plugin for type \"${current.type}\".`);\n\n        headerTitle = t`Field Settings - {fieldTypeLabel}`({\n            fieldTypeLabel: fieldPlugin.field.label\n        });\n\n        render = (\n            <Form\n                data={current}\n                onSubmit={data => {\n                    /**\n                     * We know that data is CmsEditorField.\n                     */\n                    return onSubmit(data as unknown as CmsEditorField);\n                }}\n            >\n                {form => {\n                    const hasValidators =\n                        Array.isArray(fieldPlugin.field.validators) &&\n                        fieldPlugin.field.validators.length > 0;\n\n                    const showValidatorsTab =\n                        form.data.multipleValues ||\n                        (Array.isArray(fieldPlugin.field.validators) &&\n                            fieldPlugin.field.validators.length > 0);\n\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        form.data.predefinedValues &&\n                        form.data.predefinedValues.enabled;\n\n                    return (\n                        <>\n                            <DialogContent className={dialogBody}>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && (\n                                            <PredefinedValues\n                                                form={form}\n                                                field={form.data as CmsEditorField}\n                                                fieldPlugin={fieldPlugin}\n                                            />\n                                        )}\n                                    </Tab>\n\n                                    {showValidatorsTab ? (\n                                        <Tab\n                                            label={\"Validators\"}\n                                            data-testid={\"cms.editor.field.tabs.validators\"}\n                                        >\n                                            {form.data.multipleValues ? (\n                                                <>\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Typography use={\"headline5\"}>\n                                                                List validators\n                                                            </Typography>\n                                                            <br />\n                                                            <Typography use={\"body2\"}>\n                                                                These validators are applied to the\n                                                                entire list of values.\n                                                            </Typography>\n                                                        </Cell>\n                                                        <Cell span={12}>\n                                                            <Elevation z={2}>\n                                                                <ValidatorsTab\n                                                                    field={current}\n                                                                    name={\"listValidation\"}\n                                                                    validators={getListValidators(\n                                                                        fieldPlugin\n                                                                    )}\n                                                                    form={form}\n                                                                />\n                                                            </Elevation>\n                                                        </Cell>\n                                                    </Grid>\n\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Typography use={\"headline5\"}>\n                                                                Individual value validators\n                                                            </Typography>\n                                                            <br />\n                                                            <Typography use={\"body2\"}>\n                                                                These validators are applied to each\n                                                                value in the list.\n                                                            </Typography>\n                                                        </Cell>\n                                                        <Cell span={12}>\n                                                            <Elevation z={2}>\n                                                                <ValidatorsTab\n                                                                    field={current}\n                                                                    form={form}\n                                                                    name={\"validation\"}\n                                                                    validators={getFieldValidators(\n                                                                        fieldPlugin\n                                                                    )}\n                                                                />\n                                                            </Elevation>\n                                                        </Cell>\n                                                    </Grid>\n                                                </>\n                                            ) : null}\n\n                                            {!form.data.multipleValues && hasValidators ? (\n                                                <ValidatorsTab\n                                                    field={current}\n                                                    form={form}\n                                                    name={\"validation\"}\n                                                    validators={getFieldValidators(fieldPlugin)}\n                                                />\n                                            ) : null}\n                                        </Tab>\n                                    ) : null}\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            // TODO @ts-refactor verify that this actually worked? There was no fieldPlugin in AppearanceTab props\n                                            // @ts-ignore\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                    onClick={onClose}\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                    onClick={ev => {\n                                        form.submit(ev);\n                                    }}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </>\n                    );\n                }}\n            </Form>\n        );\n    }\n\n    return (\n        <Dialog\n            preventOutsideDismiss\n            open={!!current}\n            onClose={onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n            className={fieldEditorDialog}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            {render}\n        </Dialog>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","namespace","dialogBody","css","width","height","getValidators","fieldPlugin","key","defaultValidators","mappedValidators","plugins","byType","map","validator","allowedValidators","field","includes","name","optional","filteredValidators","filter","Boolean","sort","a","b","getListValidators","getFieldValidators","fieldEditorDialog","maxWidth","maxHeight","paddingTop","EditFieldDialog","onSubmit","props","useState","current","setCurrent","useFieldEditor","getFieldPlugin","useContentModelEditor","contentModel","data","setContentModelData","setData","isTitleField","setIsTitleField","useEffect","clonedField","renderer","item","canUse","renderPlugin","rendererName","titleFieldId","fieldId","onClose","useCallback","render","headerTitle","type","invariant","fieldTypeLabel","label","form","hasValidators","Array","isArray","validators","length","showValidatorsTab","multipleValues","predefinedValuesTabEnabled","allowPredefinedValues","predefinedValues","enabled","ev","prev","then","submit","catch","ex","console","error","message"],"sources":["EditFieldDialog.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { cloneDeep } from \"lodash\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogContent, DialogTitle, DialogActions } from \"@webiny/ui/Dialog\";\nimport { Form } from \"@webiny/form\";\nimport { Tabs, Tab } from \"@webiny/ui/Tabs\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldTypePlugin,\n    CmsEditorFieldValidatorPlugin\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport GeneralTab from \"./EditFieldDialog/GeneralTab\";\nimport AppearanceTab from \"./EditFieldDialog/AppearanceTab\";\nimport PredefinedValues from \"./EditFieldDialog/PredefinedValues\";\nimport ValidatorsTab from \"./EditFieldDialog/ValidatorsTab\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport invariant from \"invariant\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst dialogBody = css({\n    \"&.webiny-ui-dialog__content\": {\n        width: 875,\n        height: 450\n    }\n});\n\ninterface EditFieldDialogProps {\n    field: CmsEditorField | null;\n    onClose: () => void;\n    onSubmit: (data: CmsEditorField) => void;\n}\n\ninterface Validator {\n    optional: boolean;\n    validator: CmsEditorFieldValidatorPlugin[\"validator\"];\n}\nconst getValidators = (\n    fieldPlugin: CmsEditorFieldTypePlugin,\n    /**\n     * We only have validators and listValidators, thats why the strict string types\n     */\n    key: \"validators\" | \"listValidators\",\n    defaultValidators: string[] = []\n): Validator[] => {\n    const mappedValidators = plugins\n        .byType<CmsEditorFieldValidatorPlugin>(\"cms-editor-field-validator\")\n        .map(({ validator }) => {\n            const allowedValidators = fieldPlugin.field[key] || defaultValidators;\n            if (allowedValidators.includes(validator.name)) {\n                return {\n                    optional: true,\n                    validator\n                };\n            } else if (allowedValidators.includes(`!${validator.name}`)) {\n                return {\n                    optional: false,\n                    validator\n                };\n            }\n\n            return null;\n        });\n\n    const filteredValidators = mappedValidators.filter(Boolean) as Validator[];\n\n    return (\n        filteredValidators\n            /**\n             * We can safely cast because we are filtering in previous step.\n             */\n            .sort((a: Validator, b: Validator) => {\n                if (!a.optional && b.optional) {\n                    return -1;\n                }\n\n                if (a.optional && !b.optional) {\n                    return 1;\n                }\n\n                return 0;\n            }) as Validator[]\n    );\n};\n\nconst getListValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"listValidators\", [\"minLength\", \"maxLength\"]);\n};\n\nconst getFieldValidators = (fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators(fieldPlugin, \"validators\");\n};\n\nconst fieldEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"calc(100vh - 155px)\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nconst EditFieldDialog: React.FC<EditFieldDialogProps> = ({ field, onSubmit, ...props }) => {\n    const [current, setCurrent] = useState<CmsEditorField | null>(null);\n    const { getFieldPlugin } = useFieldEditor();\n    const { data: contentModel, setData: setContentModelData } = useContentModelEditor();\n\n    const [isTitleField, setIsTitleField] = useState<boolean>(false);\n\n    useEffect((): void => {\n        if (!field) {\n            setCurrent(field);\n            setIsTitleField(false);\n            return;\n        }\n\n        const clonedField = cloneDeep(field);\n\n        if (!clonedField.renderer || !clonedField.renderer.name) {\n            const [renderPlugin] = plugins\n                .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n                .filter(item => item.renderer.canUse({ field }));\n\n            if (renderPlugin) {\n                clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n            }\n        }\n        if (contentModel.titleFieldId === field.fieldId) {\n            setIsTitleField(true);\n        } else if (isTitleField === true) {\n            setIsTitleField(false);\n        }\n        setCurrent(clonedField);\n    }, [field]);\n\n    const onClose = useCallback((): void => {\n        setCurrent(null);\n        props.onClose();\n    }, []);\n\n    let render = null;\n    let headerTitle = t`Field Settings`;\n\n    if (current) {\n        /**\n         * Something must be very wrong for field plugin to be missing.\n         */\n        const fieldPlugin = getFieldPlugin(current.type) as CmsEditorFieldTypePlugin;\n        /**\n         * We will throw error because of that.\n         */\n        invariant(fieldPlugin, `Missing field plugin for type \"${current.type}\".`);\n\n        headerTitle = t`Field Settings - {fieldTypeLabel}`({\n            fieldTypeLabel: fieldPlugin.field.label\n        });\n\n        render = (\n            <Form\n                data={current}\n                onSubmit={data => {\n                    /**\n                     * We know that data is CmsEditorField.\n                     */\n                    return onSubmit(data as unknown as CmsEditorField);\n                }}\n            >\n                {form => {\n                    const hasValidators =\n                        Array.isArray(fieldPlugin.field.validators) &&\n                        fieldPlugin.field.validators.length > 0;\n\n                    const showValidatorsTab =\n                        form.data.multipleValues ||\n                        (Array.isArray(fieldPlugin.field.validators) &&\n                            fieldPlugin.field.validators.length > 0);\n\n                    const predefinedValuesTabEnabled =\n                        fieldPlugin.field.allowPredefinedValues &&\n                        form.data.predefinedValues &&\n                        form.data.predefinedValues.enabled;\n\n                    return (\n                        <>\n                            <DialogContent className={dialogBody}>\n                                <Tabs>\n                                    <Tab label={t`General`}>\n                                        <GeneralTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                    <Tab\n                                        label={t`Predefined Values`}\n                                        disabled={!predefinedValuesTabEnabled}\n                                    >\n                                        {predefinedValuesTabEnabled && (\n                                            <PredefinedValues\n                                                form={form}\n                                                field={form.data as CmsEditorField}\n                                                fieldPlugin={fieldPlugin}\n                                            />\n                                        )}\n                                    </Tab>\n\n                                    {showValidatorsTab ? (\n                                        <Tab\n                                            label={\"Validators\"}\n                                            data-testid={\"cms.editor.field.tabs.validators\"}\n                                        >\n                                            {form.data.multipleValues ? (\n                                                <>\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Typography use={\"headline5\"}>\n                                                                List validators\n                                                            </Typography>\n                                                            <br />\n                                                            <Typography use={\"body2\"}>\n                                                                These validators are applied to the\n                                                                entire list of values.\n                                                            </Typography>\n                                                        </Cell>\n                                                        <Cell span={12}>\n                                                            <Elevation z={2}>\n                                                                <ValidatorsTab\n                                                                    field={current}\n                                                                    name={\"listValidation\"}\n                                                                    validators={getListValidators(\n                                                                        fieldPlugin\n                                                                    )}\n                                                                    form={form}\n                                                                />\n                                                            </Elevation>\n                                                        </Cell>\n                                                    </Grid>\n\n                                                    <Grid>\n                                                        <Cell span={12}>\n                                                            <Typography use={\"headline5\"}>\n                                                                Individual value validators\n                                                            </Typography>\n                                                            <br />\n                                                            <Typography use={\"body2\"}>\n                                                                These validators are applied to each\n                                                                value in the list.\n                                                            </Typography>\n                                                        </Cell>\n                                                        <Cell span={12}>\n                                                            <Elevation z={2}>\n                                                                <ValidatorsTab\n                                                                    field={current}\n                                                                    form={form}\n                                                                    name={\"validation\"}\n                                                                    validators={getFieldValidators(\n                                                                        fieldPlugin\n                                                                    )}\n                                                                />\n                                                            </Elevation>\n                                                        </Cell>\n                                                    </Grid>\n                                                </>\n                                            ) : null}\n\n                                            {!form.data.multipleValues && hasValidators ? (\n                                                <ValidatorsTab\n                                                    field={current}\n                                                    form={form}\n                                                    name={\"validation\"}\n                                                    validators={getFieldValidators(fieldPlugin)}\n                                                />\n                                            ) : null}\n                                        </Tab>\n                                    ) : null}\n                                    <Tab label={t`Appearance`}>\n                                        <AppearanceTab\n                                            form={form}\n                                            field={form.data as CmsEditorField}\n                                            // TODO @ts-refactor verify that this actually worked? There was no fieldPlugin in AppearanceTab props\n                                            // @ts-ignore\n                                            fieldPlugin={fieldPlugin}\n                                        />\n                                    </Tab>\n                                </Tabs>\n                            </DialogContent>\n                            <DialogActions>\n                                <ButtonDefault\n                                    data-testid=\"cms.editor.field.settings.cancel\"\n                                    onClick={onClose}\n                                >{t`Cancel`}</ButtonDefault>\n                                <ButtonPrimary\n                                    data-testid=\"cms.editor.field.settings.save\"\n                                    onClick={ev => {\n                                        /**\n                                         * In case title field fieldID changed, we need to change it in the model data as well.\n                                         */\n                                        if (\n                                            isTitleField &&\n                                            contentModel.titleFieldId !== form.data.fieldId\n                                        ) {\n                                            setContentModelData(prev => {\n                                                return {\n                                                    ...prev,\n                                                    titleFieldId: form.data.fieldId\n                                                };\n                                            })\n                                                .then(() => {\n                                                    form.submit(ev);\n                                                })\n                                                .catch(ex => {\n                                                    console.error(ex.message);\n                                                });\n                                            return;\n                                        }\n                                        /**\n                                         * Or just continue as usually\n                                         */\n                                        form.submit(ev);\n                                    }}\n                                >{t`Save Field`}</ButtonPrimary>\n                            </DialogActions>\n                        </>\n                    );\n                }}\n            </Form>\n        );\n    }\n\n    return (\n        <Dialog\n            preventOutsideDismiss\n            open={!!current}\n            onClose={onClose}\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n            className={fieldEditorDialog}\n        >\n            <DialogTitle>{headerTitle}</DialogTitle>\n            {render}\n        </Dialog>\n    );\n};\n\nexport default EditFieldDialog;\n"],"mappings":"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"}

package/admin/components/FieldEditor/Field.js

@@ -11,12 +11,12 @@ exports.default = void 0;
 
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _emotion = require("emotion");
@@ -51,7 +51,9 @@ var _useContentModelEditor = require("../ContentModelEditor/useContentModelEdito
 
 var _useFieldEditor2 = require("./useFieldEditor");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _appAdmin = require("@webiny/app-admin");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/field");
 
@@ -122,9 +124,26 @@ var Field = function Field(props) {
   var _useFieldEditor = (0, _useFieldEditor2.useFieldEditor)(),
       getFieldPlugin = _useFieldEditor.getFieldPlugin;
 
+  var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
+    title: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Warning - You are trying to delete a locked field!"]))),
+    message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["You are about to delete a field which is used in the data storage"])))), /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["All data in that field will be lost and there is no going back!"])))), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Are you sure you want to continue?"])))))
+  }),
+      showConfirmation = _useConfirmationDialo.showConfirmation;
+
+  var lockedFields = data ? data.lockedFields || [] : [];
+  var isLocked = lockedFields.some(function (lockedField) {
+    return lockedField.fieldId === field.storageId;
+  });
   var onDelete = (0, _react.useCallback)(function () {
-    props.onDelete(field);
-  }, [field.fieldId]);
+    if (!isLocked) {
+      props.onDelete(field);
+      return;
+    }
+
+    showConfirmation(function () {
+      props.onDelete(field);
+    });
+  }, [field.fieldId, lockedFields]);
   var setAsTitle = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
     var response;
     return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
@@ -149,7 +168,7 @@ var Field = function Field(props) {
             return _context.abrupt("return", showSnackbar(response.error.message));
 
           case 5:
-            showSnackbar(t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Title field set successfully."]))));
+            showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Title field set successfully."]))));
 
           case 6:
           case "end":
@@ -167,12 +186,11 @@ var Field = function Field(props) {
   }
 
   var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
-  var lockedFields = data ? data.lockedFields || [] : [];
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
   }, field.label), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["multiple values"]))), ")"), isTitleField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["entry title"]))), ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["multiple values"]))), ")"), isTitleField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "(", t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["entry title"]))), ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": "cms.editor.edit-field",
     icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
     onClick: function onClick() {
@@ -192,16 +210,11 @@ var Field = function Field(props) {
     onClick: setAsTitle
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
-  })), t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
-    disabled: lockedFields.some(function (lockedField) {
-      return lockedField.fieldId === field.fieldId;
-    }),
+  })), t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     onClick: onDelete
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
-  })), lockedFields.find(function (lockedField) {
-    return lockedField.fieldId === field.fieldId;
-  }) ? t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Cannot delete"]))) : t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
+  })), t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "field-extra"
   }, fieldPlugin.field.render && fieldPlugin.field.render({
     field: field,

package/admin/components/FieldEditor/Field.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","Info","flex","lineHeight","Actions","menuStyles","css","width","right","left","opacity","pointerEvents","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","useSnackbar","showSnackbar","useContentModelEditor","setData","data","useFieldEditor","getFieldPlugin","onDelete","useCallback","fieldId","setAsTitle","titleFieldId","response","error","message","fieldPlugin","editorFieldOptionPlugins","plugins","byType","isTitleField","lockedFields","label","map","pl","React","cloneElement","render","key","name","some","lockedField","find","memo"],"sources":["Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as EditIcon } from \"~/admin/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"~/admin/icons/title-24px.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"~/admin/icons/more_vert.svg\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CmsEditorField, CmsEditorFieldOptionPlugin } from \"~/types\";\nimport { ListItemGraphic } from \"@webiny/ui/List\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst FieldContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\"\n});\n\nconst Info = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    \"> *\": {\n        flex: \"1 100%\",\n        lineHeight: \"150%\"\n    }\n});\n\nconst Actions = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"right\",\n    \"> *\": {\n        flex: \"1 100%\"\n    }\n});\n\nconst menuStyles = css({\n    width: 220,\n    right: -105,\n    left: \"auto !important\",\n    \".disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (field: CmsEditorField, parent?: CmsEditorField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    }\n    return true;\n};\n\nexport interface FieldProps {\n    field: CmsEditorField;\n    onDelete: (field: CmsEditorField) => void;\n    onEdit: (field: CmsEditorField) => void;\n    parent?: CmsEditorField;\n}\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData, data } = useContentModelEditor();\n    const { getFieldPlugin } = useFieldEditor();\n\n    const onDelete = useCallback(() => {\n        props.onDelete(field);\n    }, [field.fieldId]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setData(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setData]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\n    const lockedFields = data ? data.lockedFields || [] : [];\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label}{\" \"}\n                        {field.multipleValues && <>({t`multiple values`})</>}\n                        {isTitleField && <>({t`entry title`})</>}\n                    </Typography>\n                </Info>\n                <Actions>\n                    <IconButton\n                        data-testid={\"cms.editor.edit-field\"}\n                        icon={<EditIcon />}\n                        onClick={() => onEdit(field)}\n                    />\n                    <Menu\n                        className={menuStyles}\n                        handle={<IconButton icon={<MoreVerticalIcon />} />}\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeTitle(field, parent)}\n                            onClick={setAsTitle}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as title`}\n                        </MenuItem>\n                        <MenuItem\n                            disabled={lockedFields.some(\n                                lockedField => lockedField.fieldId === field.fieldId\n                            )}\n                            onClick={onDelete}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {lockedFields.find(lockedField => lockedField.fieldId === field.fieldId)\n                                ? t`Cannot delete`\n                                : t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <div className={\"field-extra\"}>\n                {fieldPlugin.field.render && fieldPlugin.field.render({ field, data, setData })}\n            </div>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","Info","flex","lineHeight","Actions","menuStyles","css","width","right","left","opacity","pointerEvents","allowedTitleFieldTypes","isFieldAllowedToBeTitle","field","parent","multipleValues","includes","type","Field","props","onEdit","useSnackbar","showSnackbar","useContentModelEditor","setData","data","useFieldEditor","getFieldPlugin","useConfirmationDialog","title","message","showConfirmation","lockedFields","isLocked","some","lockedField","fieldId","storageId","onDelete","useCallback","setAsTitle","titleFieldId","response","error","fieldPlugin","editorFieldOptionPlugins","plugins","byType","isTitleField","label","map","pl","React","cloneElement","render","key","name","memo"],"sources":["Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback } from \"react\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as EditIcon } from \"~/admin/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"~/admin/icons/title-24px.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"~/admin/icons/more_vert.svg\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CmsEditorField, CmsEditorFieldOptionPlugin } from \"~/types\";\nimport { ListItemGraphic } from \"@webiny/ui/List\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst FieldContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\"\n});\n\nconst Info = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    \"> *\": {\n        flex: \"1 100%\",\n        lineHeight: \"150%\"\n    }\n});\n\nconst Actions = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"right\",\n    \"> *\": {\n        flex: \"1 100%\"\n    }\n});\n\nconst menuStyles = css({\n    width: 220,\n    right: -105,\n    left: \"auto !important\",\n    \".disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (field: CmsEditorField, parent?: CmsEditorField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    }\n    return true;\n};\n\nexport interface FieldProps {\n    field: CmsEditorField;\n    onDelete: (field: CmsEditorField) => void;\n    onEdit: (field: CmsEditorField) => void;\n    parent?: CmsEditorField;\n}\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData, data } = useContentModelEditor();\n    const { getFieldPlugin } = useFieldEditor();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: t`Warning - You are trying to delete a locked field!`,\n        message: (\n            <>\n                <p>{t`You are about to delete a field which is used in the data storage`}</p>\n                <p>{t`All data in that field will be lost and there is no going back!`}</p>\n                <p>&nbsp;</p>\n                <p>{t`Are you sure you want to continue?`}</p>\n            </>\n        )\n    });\n    const lockedFields = data ? data.lockedFields || [] : [];\n    const isLocked = lockedFields.some(lockedField => lockedField.fieldId === field.storageId);\n\n    const onDelete = useCallback(() => {\n        if (!isLocked) {\n            props.onDelete(field);\n            return;\n        }\n        showConfirmation(() => {\n            props.onDelete(field);\n        });\n    }, [field.fieldId, lockedFields]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setData(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setData]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const isTitleField = data && field.fieldId === data.titleFieldId && !parent;\n\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label}{\" \"}\n                        {field.multipleValues && <>({t`multiple values`})</>}\n                        {isTitleField && <>({t`entry title`})</>}\n                    </Typography>\n                </Info>\n                <Actions>\n                    <IconButton\n                        data-testid={\"cms.editor.edit-field\"}\n                        icon={<EditIcon />}\n                        onClick={() => onEdit(field)}\n                    />\n                    <Menu\n                        className={menuStyles}\n                        handle={<IconButton icon={<MoreVerticalIcon />} />}\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeTitle(field, parent)}\n                            onClick={setAsTitle}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as title`}\n                        </MenuItem>\n                        <MenuItem onClick={onDelete}>\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <div className={\"field-extra\"}>\n                {fieldPlugin.field.render && fieldPlugin.field.render({ field, data, setData })}\n            </div>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"mappings":"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"}