@strapi/content-type-builder 5.13.0-beta.1 → 5.13.0

package/dist/admin/components/FormModal/FormModal.mjs

@@ -5,13 +5,14 @@ import { Modal, Tabs, Flex, Divider, Button } from '@strapi/design-system';
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
 import set from 'lodash/set';
+import toLower from 'lodash/toLower';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
-import * as yup from 'yup';
+import { useDataManager } from '../../hooks/useDataManager.mjs';
+import { useFormModalNavigation } from '../../hooks/useFormModalNavigation.mjs';
 import { pluginId } from '../../pluginId.mjs';
 import { getTrad } from '../../utils/getTrad.mjs';
 import { isAllowedContentTypesForRelations } from '../../utils/isAllowedContentTypesForRelations.mjs';
@@ -24,11 +25,9 @@ import { BooleanRadioGroup } from '../BooleanRadioGroup.mjs';
 import { CheckboxWithNumberField } from '../CheckboxWithNumberField.mjs';
 import { ContentTypeRadioGroup } from '../ContentTypeRadioGroup.mjs';
 import { CustomRadioGroup } from '../CustomRadioGroup/CustomRadioGroup.mjs';
-import { useDataManager } from '../DataManager/useDataManager.mjs';
 import { DraftAndPublishToggle } from '../DraftAndPublishToggle.mjs';
 import { FormModalEndActions } from '../FormModalEndActions.mjs';
 import { FormModalHeader } from '../FormModalHeader.mjs';
-import { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation.mjs';
 import { FormModalSubHeader } from '../FormModalSubHeader.mjs';
 import { IconPicker } from '../IconPicker/IconPicker.mjs';
 import { PluralName } from '../PluralName.mjs';
@@ -42,45 +41,68 @@ import { SingularName } from '../SingularName.mjs';
 import { TabForm } from '../TabForm.mjs';
 import { TextareaEnum } from '../TextareaEnum.mjs';
 import { forms } from './forms/forms.mjs';
-import { actions, initialState } from './reducer.mjs';
+import { actions } from './reducer.mjs';
+import { makeSelectFormModal } from './selectors.mjs';
 import { canEditContentType } from './utils/canEditContentType.mjs';
 import { createUid, createComponentUid } from './utils/createUid.mjs';
 import { getAttributesToDisplay } from './utils/getAttributesToDisplay.mjs';
 import { getFormInputNames } from './utils/getFormInputNames.mjs';
 
-const FormComponent = styled.form`
+/* eslint-disable indent */ /* eslint-disable react/no-array-index-key */ const FormComponent = styled.form`
   overflow: auto;
 `;
-const selectState = (state)=>state['content-type-builder_formModal'] || initialState;
 const FormModal = ()=>{
-    const { onCloseModal, onNavigateToChooseAttributeModal, onNavigateToAddCompoToDZModal, onNavigateToCreateComponentStep2, actionType, attributeName, attributeType, customFieldUid, dynamicZoneTarget, forTarget, modalType, isOpen, kind, step, targetUid, showBackLink, activeTab, setActiveTab } = useFormModalNavigation();
+    const { onCloseModal, onNavigateToChooseAttributeModal, onNavigateToAddCompoToDZModal, onNavigateToCreateComponentStep2, actionType, attributeName, attributeType, customFieldUid, categoryName, dynamicZoneTarget, forTarget, modalType, isOpen, kind, step, targetUid, showBackLink, activeTab, setActiveTab } = useFormModalNavigation();
     const getPlugin = useStrapiApp('FormModal', (state)=>state.getPlugin);
     const getCustomField = useStrapiApp('FormModal', (state)=>state.customFields.get);
     const customField = getCustomField(customFieldUid);
+    const formModalSelector = React.useMemo(makeSelectFormModal, []);
     const dispatch = useDispatch();
     const { toggleNotification } = useNotification();
-    const reducerState = useSelector(selectState, shallowEqual);
+    const reducerState = useSelector((state)=>formModalSelector(state), shallowEqual);
     const navigate = useNavigate();
     const { trackUsage } = useTracking();
     const { formatMessage } = useIntl();
     const ctbPlugin = getPlugin(pluginId);
     const ctbFormsAPI = ctbPlugin?.apis.forms;
     const inputsFromPlugins = ctbFormsAPI.components.inputs;
-    const { addAttribute, editAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, changeDynamicZoneComponents, contentTypes, components, createSchema, createComponentSchema, deleteComponent, deleteContentType, editCustomFieldAttribute, updateSchema, nestedComponents, sortedContentTypesList, updateComponentSchema, updateComponentUid, reservedNames } = useDataManager();
+    const { addAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, allComponentsCategories, changeDynamicZoneComponents, contentTypes, components, createSchema, deleteCategory, deleteData, editCategory, editCustomFieldAttribute, submitData, modifiedData: allDataSchema, nestedComponents, setModifiedData, sortedContentTypesList, updateSchema, reservedNames } = useDataManager();
     const { componentToCreate, formErrors, initialData, isCreatingComponentWhileAddingAField, modifiedData } = reducerState;
-    const type = forTarget === 'component' ? components[targetUid] : contentTypes[targetUid];
+    const pathToSchema = forTarget === 'contentType' || forTarget === 'component' ? [
+        forTarget
+    ] : [
+        forTarget,
+        targetUid
+    ];
     React.useEffect(()=>{
         if (isOpen) {
             const collectionTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations);
+            // Reset all the modification when opening the edit category modal
+            if (modalType === 'editCategory') {
+                setModifiedData();
+            }
             if (actionType === 'edit' && modalType === 'attribute' && forTarget === 'contentType') {
                 trackUsage('willEditFieldOfContentType');
             }
+            const pathToAttributes = [
+                ...pathToSchema,
+                'schema',
+                'attributes'
+            ];
             // Case:
             // the user opens the modal chooseAttributes
             // selects dynamic zone => set the field name
             // then goes to step 1 (the modal is addComponentToDynamicZone) and finally reloads the app.
             // In this particular if the user tries to add components to the zone it will pop an error since the dz is unknown
-            const foundDynamicZoneTarget = findAttribute(get(type, 'schema.attributes', []), dynamicZoneTarget) || null;
+            const foundDynamicZoneTarget = findAttribute(get(allDataSchema, pathToAttributes, []), dynamicZoneTarget) || null;
+            // Edit category
+            if (modalType === 'editCategory' && actionType === 'edit') {
+                dispatch(actions.setDataToEdit({
+                    data: {
+                        name: categoryName
+                    }
+                }));
+            }
             // Create content type we need to add the default option draftAndPublish
             if (modalType === 'contentType' && actionType === 'create') {
                 dispatch(actions.setDataToEdit({
@@ -91,24 +113,34 @@ const FormModal = ()=>{
             }
             // Edit content type
             if (modalType === 'contentType' && actionType === 'edit') {
+                const { displayName, draftAndPublish, kind, pluginOptions, pluralName, singularName } = get(allDataSchema, [
+                    ...pathToSchema,
+                    'schema'
+                ], {
+                    displayName: null,
+                    pluginOptions: {},
+                    singularName: null,
+                    pluralName: null
+                });
                 dispatch(actions.setDataToEdit({
                     data: {
-                        displayName: type.info.displayName,
-                        draftAndPublish: type.options?.draftAndPublish,
-                        kind: 'kind' in type && type.kind,
-                        pluginOptions: type.pluginOptions,
-                        pluralName: 'pluralName' in type.info && type.info.pluralName,
-                        singularName: 'singularName' in type.info && type.info.singularName
+                        displayName,
+                        draftAndPublish,
+                        kind,
+                        pluginOptions,
+                        pluralName,
+                        singularName
                     }
                 }));
             }
             // Edit component
             if (modalType === 'component' && actionType === 'edit') {
+                const data = get(allDataSchema, pathToSchema, {});
                 dispatch(actions.setDataToEdit({
                     data: {
-                        displayName: type.info.displayName,
-                        category: 'category' in type && type.category,
-                        icon: type.info.icon
+                        displayName: data.schema.displayName,
+                        category: data.category,
+                        icon: data.schema.icon
                     }
                 }));
             }
@@ -131,9 +163,7 @@ const FormModal = ()=>{
             }
             // Set the predefined data structure to create an attribute
             if (attributeType) {
-                const attributeToEditNotFormatted = findAttribute(get(type, [
-                    'attributes'
-                ], []), attributeName);
+                const attributeToEditNotFormatted = findAttribute(get(allDataSchema, pathToAttributes, []), attributeName);
                 const attributeToEdit = {
                     ...attributeToEditNotFormatted,
                     name: attributeName
@@ -141,7 +171,7 @@ const FormModal = ()=>{
                 // We need to set the repeatable key to false when editing a component
                 // The API doesn't send this info
                 if (attributeType === 'component' && actionType === 'edit') {
-                    if (!('repeatable' in attributeToEdit) || !attributeToEdit.repeatable) {
+                    if (!attributeToEdit.repeatable) {
                         set(attributeToEdit, 'repeatable', false);
                     }
                 }
@@ -149,18 +179,13 @@ const FormModal = ()=>{
                     if (actionType === 'edit') {
                         dispatch(actions.setCustomFieldDataSchema({
                             isEditing: true,
-                            modifiedDataToSetForEditing: attributeToEdit,
-                            uid: type.uid
+                            modifiedDataToSetForEditing: attributeToEdit
                         }));
                     } else {
                         dispatch(actions.setCustomFieldDataSchema({
-                            customField: pick(customField, [
-                                'type',
-                                'options'
-                            ]),
+                            customField: customField,
                             isEditing: false,
-                            modifiedDataToSetForEditing: attributeToEdit,
-                            uid: type.uid
+                            modifiedDataToSetForEditing: attributeToEdit
                         }));
                     }
                 } else {
@@ -176,8 +201,7 @@ const FormModal = ()=>{
                         ], 'error'),
                         isEditing: actionType === 'edit',
                         modifiedDataToSetForEditing: attributeToEdit,
-                        step,
-                        uid: type.uid
+                        step
                     }));
                 }
             }
@@ -189,6 +213,7 @@ const FormModal = ()=>{
         actionType,
         attributeName,
         attributeType,
+        categoryName,
         dynamicZoneTarget,
         forTarget,
         isOpen,
@@ -202,9 +227,12 @@ const FormModal = ()=>{
     const isCreating = actionType === 'create';
     const isCreatingComponentFromAView = get(modifiedData, 'createComponent', false) || isCreatingComponentWhileAddingAField;
     const isInFirstComponentStep = step === '1';
+    const isEditingCategory = modalType === 'editCategory';
     const isPickingAttribute = modalType === 'chooseAttribute';
     const uid = createUid(modifiedData.displayName || '');
-    const attributes = get(type, [
+    const attributes = get(allDataSchema, [
+        ...pathToSchema,
+        'schema',
         'attributes'
     ], null);
     const checkFormValidity = async ()=>{
@@ -213,14 +241,22 @@ const FormModal = ()=>{
         // Check form validity for content type
         if (isCreatingContentType) {
             schema = forms.contentType.schema(Object.keys(contentTypes), actionType === 'edit', // currentUID
-            type?.uid ?? null, reservedNames, ctbFormsAPI, contentTypes);
+            get(allDataSchema, [
+                ...pathToSchema,
+                'uid'
+            ], null), reservedNames, ctbFormsAPI, contentTypes);
         // Check form validity for component
         // This is happening when the user click on the link from the left menu
         } else if (isCreatingComponent) {
-            schema = forms.component.schema(Object.keys(components), modifiedData.category || '', reservedNames, actionType === 'edit', components, modifiedData.displayName || '', type?.uid ?? null);
+            schema = forms.component.schema(Object.keys(components), modifiedData.category || '', reservedNames, actionType === 'edit', components, modifiedData.displayName || '', get(allDataSchema, [
+                ...pathToSchema,
+                'uid'
+            ], null));
         } else if (isCreatingCustomFieldAttribute) {
             schema = forms.customField.schema({
-                schemaAttributes: get(type, [
+                schemaAttributes: get(allDataSchema, [
+                    ...pathToSchema,
+                    'schema',
                     'attributes'
                 ], []),
                 attributeType: customField.type,
@@ -241,14 +277,15 @@ const FormModal = ()=>{
         // Check form validity for creating a 'common attribute'
         // We need to make sure that it is independent from the step
         } else if (isCreatingAttribute && !isInFirstComponentStep) {
-            const computedAttrbiuteType = attributeType === 'relation' ? 'relation' : modifiedData.type;
+            const type = attributeType === 'relation' ? 'relation' : modifiedData.type;
             let alreadyTakenTargetContentTypeAttributes = [];
-            if (computedAttrbiuteType === 'relation') {
+            if (type === 'relation') {
                 const targetContentTypeUID = get(modifiedData, [
                     'target'
                 ], null);
                 const targetContentTypeAttributes = get(contentTypes, [
                     targetContentTypeUID,
+                    'schema',
                     'attributes'
                 ], []);
                 // Create an array with all the targetContentType attributes name
@@ -263,10 +300,12 @@ const FormModal = ()=>{
                     return attrName !== initialData.targetAttribute;
                 });
             }
-            schema = forms.attribute.schema(type, computedAttrbiuteType, reservedNames, alreadyTakenTargetContentTypeAttributes, {
+            schema = forms.attribute.schema(get(allDataSchema, pathToSchema, {}), type, reservedNames, alreadyTakenTargetContentTypeAttributes, {
                 modifiedData,
                 initialData
             }, ctbFormsAPI);
+        } else if (isEditingCategory) {
+            schema = forms.editCategory.schema(allComponentsCategories, initialData);
         } else {
             // The user is either in the addComponentToDynamicZone modal or
             // in step 1 of the add component (modalType=attribute&attributeType=component) but not creating a component
@@ -325,45 +364,29 @@ const FormModal = ()=>{
         e.preventDefault();
         try {
             await checkFormValidity();
-            dispatch(actions.setErrors({
-                errors: {}
-            }));
             sendButtonAddMoreFieldEvent(shouldContinue);
-            const ctTargetUid = targetUid;
+            const ctTargetUid = forTarget === 'components' ? targetUid : uid;
             if (isCreatingContentType) {
                 // Create the content type schema
                 if (isCreating) {
                     createSchema({
-                        data: {
-                            kind,
-                            displayName: modifiedData.displayName,
-                            draftAndPublish: modifiedData.draftAndPublish,
-                            pluginOptions: modifiedData.pluginOptions,
-                            singularName: modifiedData.singularName,
-                            pluralName: modifiedData.pluralName
-                        },
-                        uid
-                    });
+                        ...modifiedData,
+                        kind
+                    }, modalType, uid);
                     // Redirect the user to the created content type
                     navigate({
                         pathname: `/plugins/${pluginId}/content-types/${uid}`
                     });
-                    onCloseModal();
+                    // Navigate to the choose attribute modal
+                    onNavigateToChooseAttributeModal({
+                        forTarget,
+                        targetUid: ctTargetUid
+                    });
                 } else {
-                    // NOTE: we have to assume we have a CT here until we refactor more
-                    const contentType = type;
                     // We cannot switch from collection type to single when the modal is making relations other than oneWay or manyWay
-                    if (canEditContentType(contentType, modifiedData)) {
+                    if (canEditContentType(allDataSchema, modifiedData)) {
                         onCloseModal();
-                        await updateSchema({
-                            uid: contentType.uid,
-                            data: {
-                                displayName: modifiedData.displayName,
-                                kind: modifiedData.kind,
-                                draftAndPublish: modifiedData.draftAndPublish,
-                                pluginOptions: modifiedData.pluginOptions
-                            }
-                        });
+                        await submitData(modifiedData);
                     } else {
                         toggleNotification({
                             type: 'danger',
@@ -380,42 +403,32 @@ const FormModal = ()=>{
                     // Create the component schema
                     const componentUid = createComponentUid(modifiedData.displayName, modifiedData.category);
                     const { category, ...rest } = modifiedData;
-                    createComponentSchema({
-                        data: {
-                            displayName: rest.displayName,
-                            icon: rest.icon
-                        },
-                        uid: componentUid,
-                        componentCategory: category
-                    });
+                    createSchema(rest, 'component', componentUid, category);
                     // Redirect the user to the created component
                     navigate({
                         pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`
                     });
+                    // Navigate to the choose attribute modal
+                    onNavigateToChooseAttributeModal({
+                        forTarget,
+                        targetUid: componentUid
+                    });
+                } else {
+                    updateSchema(modifiedData, modalType, targetUid);
+                    // Close the modal
                     onCloseModal();
                     return;
-                } else {
-                    updateComponentSchema({
-                        data: {
-                            icon: modifiedData.icon,
-                            displayName: modifiedData.displayName
-                        },
-                        componentUID: targetUid
-                    });
-                    if (type.status === 'NEW') {
-                        const componentUid = createComponentUid(modifiedData.displayName, modifiedData.category);
-                        updateComponentUid({
-                            componentUID: targetUid,
-                            newComponentUID: componentUid
-                        });
-                        navigate({
-                            pathname: `/plugins/${pluginId}/component-categories/${modifiedData.category}/${componentUid}`
-                        });
-                    }
+                }
+            } else if (isEditingCategory) {
+                if (toLower(initialData.name) === toLower(modifiedData.name)) {
                     // Close the modal
                     onCloseModal();
                     return;
                 }
+                editCategory(initialData.name, modifiedData);
+                return;
+            // Add/edit a field to a content type
+            // Add/edit a field to a created component (the end modal is not step 2)
             } else if (isCreatingCustomFieldAttribute) {
                 const customFieldAttributeUpdate = {
                     attributeToSet: {
@@ -424,7 +437,7 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    name: initialData.name
+                    initialAttribute: initialData
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -444,20 +457,7 @@ const FormModal = ()=>{
                 const isDynamicZoneAttribute = attributeType === 'dynamiczone';
                 // The user is creating a DZ (he had entered the name of the dz)
                 if (isDynamicZoneAttribute) {
-                    if (actionType === 'create') {
-                        addAttribute({
-                            attributeToSet: modifiedData,
-                            forTarget,
-                            targetUid
-                        });
-                    } else {
-                        editAttribute({
-                            attributeToSet: modifiedData,
-                            forTarget,
-                            targetUid,
-                            name: initialData.name
-                        });
-                    }
+                    addAttribute(modifiedData, forTarget, targetUid, actionType === 'edit', initialData);
                     // Adding a component to a dynamiczone is not the same logic as creating a simple field
                     // so the search is different
                     if (isCreating) {
@@ -474,20 +474,7 @@ const FormModal = ()=>{
                 }
                 // Normal fields like boolean relations or dynamic zone
                 if (!isComponentAttribute) {
-                    if (actionType === 'create') {
-                        addAttribute({
-                            attributeToSet: modifiedData,
-                            forTarget,
-                            targetUid
-                        });
-                    } else {
-                        editAttribute({
-                            attributeToSet: modifiedData,
-                            forTarget,
-                            targetUid,
-                            name: initialData.name
-                        });
-                    }
+                    addAttribute(modifiedData, forTarget, targetUid, actionType === 'edit', initialData);
                     if (shouldContinue) {
                         onNavigateToChooseAttributeModal({
                             forTarget,
@@ -507,28 +494,18 @@ const FormModal = ()=>{
                     // This way we don't have to add some logic to re-run the useEffect
                     // The first step is either needed to create a component or just to navigate
                     // To the modal for adding a "common field"
-                    dispatch(actions.resetPropsAndSetFormForAddingAnExistingCompo({
-                        uid: type.uid
-                    }));
+                    dispatch(actions.resetPropsAndSetFormForAddingAnExistingCompo({}));
                     // We don't want all the props to be reset
                     return;
                 // Here we are in step 2
                 // The step 2 is also use to edit an attribute that is a component
                 }
-                if (actionType === 'create') {
-                    addAttribute({
-                        attributeToSet: modifiedData,
-                        forTarget,
-                        targetUid
-                    });
-                } else {
-                    editAttribute({
-                        attributeToSet: modifiedData,
-                        forTarget,
-                        targetUid,
-                        name: initialData.name
-                    });
-                }
+                addAttribute(modifiedData, forTarget, targetUid, // This change the dispatched type
+                // either 'editAttribute' or 'addAttribute' in the DataManagerProvider
+                actionType === 'edit', // This is for the edit part
+                initialData, // Passing true will add the component to the components object
+                // This way we can add fields to the added component (if it wasn't there already)
+                true);
                 if (shouldContinue) {
                     onNavigateToChooseAttributeModal({
                         forTarget,
@@ -551,40 +528,33 @@ const FormModal = ()=>{
                     trackUsage('willCreateComponentFromAttributesModal');
                     // Here we clear the reducer state but we also keep the created component
                     // If we were to create the component before
-                    dispatch(actions.resetPropsAndSaveCurrentData({
-                        uid: type.uid
-                    }));
+                    dispatch(actions.resetPropsAndSaveCurrentData({}));
                     onNavigateToCreateComponentStep2();
                     // Terminate because we don't want the reducer to be entirely reset
                     return;
                 // Step 2 of creating a component (which is setting the attribute name in the parent's schema)
                 }
                 // We are destructuring because the modifiedData object doesn't have the appropriate format to create a field
-                const { category, ...rest } = componentToCreate;
+                const { category, type, ...rest } = componentToCreate;
                 // Create a the component temp UID
                 // This could be refactored but I think it's more understandable to separate the logic
                 const componentUid = createComponentUid(componentToCreate.displayName, category);
                 // Create the component first and add it to the components data
-                createComponentSchema({
-                    // Component data
-                    data: {
-                        icon: rest.icon,
-                        displayName: rest.displayName
-                    },
-                    uid: componentUid,
-                    componentCategory: category
-                });
+                createSchema(// Component data
+                rest, // Type will always be component
+                // It will dispatch the CREATE_COMPONENT_SCHEMA action
+                // So the component will be added in the main components object
+                // This might not be needed if we don't allow navigation between entries while editing
+                type, componentUid, category, // This will add the created component in the datamanager modifiedData components key
+                // Like explained above we will be able to modify the created component structure
+                isCreatingComponentFromAView);
                 // Add the field to the schema
-                addAttribute({
-                    attributeToSet: modifiedData,
-                    forTarget,
-                    targetUid
-                });
+                addAttribute(modifiedData, forTarget, targetUid, false);
                 dispatch(actions.resetProps());
                 // Open modal attribute for adding attr to component
                 if (shouldContinue) {
                     onNavigateToChooseAttributeModal({
-                        forTarget: 'component',
+                        forTarget: 'components',
                         targetUid: componentUid
                     });
                 } else {
@@ -598,35 +568,28 @@ const FormModal = ()=>{
                         const { category, type, ...rest } = modifiedData.componentToCreate;
                         const componentUid = createComponentUid(modifiedData.componentToCreate.displayName, category);
                         // Create the component first and add it to the components data
-                        createComponentSchema({
-                            data: rest,
-                            uid: componentUid,
-                            componentCategory: category
-                        });
+                        createSchema(// Component data
+                        rest, // Type will always be component
+                        // It will dispatch the CREATE_COMPONENT_SCHEMA action
+                        // So the component will be added in the main components object
+                        // This might not be needed if we don't allow navigation between entries while editing
+                        type, componentUid, category, // This will add the created component in the datamanager modifiedData components key
+                        // Like explained above we will be able to modify the created component structure
+                        isCreatingComponentFromAView);
                         // Add the created component to the DZ
                         // We don't want to remove the old ones
-                        addCreatedComponentToDynamicZone({
-                            forTarget,
-                            targetUid,
-                            dynamicZoneTarget,
-                            componentsToAdd: [
-                                componentUid
-                            ]
-                        });
+                        addCreatedComponentToDynamicZone(dynamicZoneTarget, [
+                            componentUid
+                        ]);
                         // The Dynamic Zone and the component is created
                         // Open the modal to add fields to the created component
                         onNavigateToChooseAttributeModal({
-                            forTarget: 'component',
+                            forTarget: 'components',
                             targetUid: componentUid
                         });
                     } else {
                         // Add the components to the DZ
-                        changeDynamicZoneComponents({
-                            forTarget,
-                            targetUid,
-                            dynamicZoneTarget,
-                            newComponents: modifiedData.components
-                        });
+                        changeDynamicZoneComponents(dynamicZoneTarget, modifiedData.components);
                         onCloseModal();
                     }
                 } else {
@@ -636,12 +599,10 @@ const FormModal = ()=>{
             }
             dispatch(actions.resetProps());
         } catch (err) {
-            if (yup.ValidationError.isError(err)) {
-                const errors = getYupInnerErrors(err);
-                dispatch(actions.setErrors({
-                    errors
-                }));
-            }
+            const errors = getYupInnerErrors(err);
+            dispatch(actions.setErrors({
+                errors
+            }));
         }
     };
     const handleConfirmClose = ()=>{
@@ -683,6 +644,9 @@ const FormModal = ()=>{
         }
     };
     const shouldDisableAdvancedTab = ()=>{
+        if (modalType === 'editCategory') {
+            return true;
+        }
         if (modalType === 'component') {
             return true;
         }
@@ -708,7 +672,7 @@ const FormModal = ()=>{
                 sections: []
             })
     });
-    const isAddingAComponentToAnotherComponent = forTarget === 'component';
+    const isAddingAComponentToAnotherComponent = forTarget === 'components' || forTarget === 'component';
     const genericInputProps = {
         customInputs: {
             'allowed-types-select': AllowedTypesSelect,
@@ -735,8 +699,9 @@ const FormModal = ()=>{
         formErrors,
         isAddingAComponentToAnotherComponent,
         isCreatingComponentWhileAddingAField,
-        mainBoxHeader: get(type, [
-            'info',
+        mainBoxHeader: get(allDataSchema, [
+            ...pathToSchema,
+            'schema',
             'displayName'
         ], ''),
         modifiedData,
@@ -753,7 +718,7 @@ const FormModal = ()=>{
         attributes,
         extensions: ctbFormsAPI,
         forTarget,
-        contentTypeSchema: type || {},
+        contentTypeSchema: allDataSchema.contentType || {},
         customField
     }).sections;
     const baseForm = formToDisplay.base({
@@ -764,7 +729,7 @@ const FormModal = ()=>{
         attributes,
         extensions: ctbFormsAPI,
         forTarget,
-        contentTypeSchema: type || {},
+        contentTypeSchema: allDataSchema.contentType || {},
         customField
     }).sections;
     const baseFormInputNames = getFormInputNames(baseForm);
@@ -773,6 +738,7 @@ const FormModal = ()=>{
     const doesAdvancedFormHasError = Object.keys(formErrors).some((key)=>advancedFormInputNames.includes(key));
     const schemaKind = get(contentTypes, [
         targetUid,
+        'schema',
         'kind'
     ]);
     const checkIsEditingFieldName = ()=>actionType === 'edit' && attributes.every(({ name })=>name !== modifiedData?.name);
@@ -789,6 +755,7 @@ const FormModal = ()=>{
                 /*#__PURE__*/ jsx(FormModalHeader, {
                     actionType: actionType,
                     attributeName: attributeName,
+                    categoryName: categoryName,
                     contentTypeKind: kind,
                     dynamicZoneTarget: dynamicZoneTarget,
                     modalType: modalType,
@@ -889,20 +856,18 @@ const FormModal = ()=>{
                         /*#__PURE__*/ jsxs(Modal.Footer, {
                             children: [
                                 /*#__PURE__*/ jsx(Button, {
-                                    type: "button",
                                     variant: "tertiary",
-                                    onClick: (e)=>{
-                                        e.preventDefault();
-                                        handleClosed();
-                                    },
+                                    onClick: handleClosed,
                                     children: formatMessage({
                                         id: 'app.components.Button.cancel',
                                         defaultMessage: 'Cancel'
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(FormModalEndActions, {
-                                    deleteContentType: ()=>deleteContentType(targetUid),
-                                    deleteComponent: ()=>deleteComponent(targetUid),
+                                    deleteCategory: deleteCategory,
+                                    deleteContentType: deleteData,
+                                    deleteComponent: deleteData,
+                                    categoryName: initialData.name,
                                     isAttributeModal: modalType === 'attribute',
                                     isCustomFieldModal: modalType === 'customField',
                                     isComponentToDzModal: modalType === 'addComponentToDynamicZone',
@@ -917,6 +882,7 @@ const FormModal = ()=>{
                                     isCreatingContentType: actionType === 'create',
                                     isEditingAttribute: actionType === 'edit',
                                     isDzAttribute: attributeType === 'dynamiczone',
+                                    isEditingCategory: modalType === 'editCategory',
                                     isInFirstComponentStep: step === '1',
                                     onSubmitAddComponentAttribute: handleSubmit,
                                     onSubmitAddComponentToDz: handleSubmit,
@@ -924,6 +890,7 @@ const FormModal = ()=>{
                                     onSubmitCreateContentType: handleSubmit,
                                     onSubmitCreateDz: handleSubmit,
                                     onSubmitEditAttribute: handleSubmit,
+                                    onSubmitEditCategory: handleSubmit,
                                     onSubmitEditComponent: handleSubmit,
                                     onSubmitEditContentType: handleSubmit,
                                     onSubmitEditCustomFieldAttribute: handleSubmit,