@strapi/content-type-builder 5.13.1 → 5.14.0

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

@@ -5,14 +5,13 @@ 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 { useDataManager } from '../../hooks/useDataManager.mjs';
-import { useFormModalNavigation } from '../../hooks/useFormModalNavigation.mjs';
+import * as yup from 'yup';
 import { pluginId } from '../../pluginId.mjs';
 import { getTrad } from '../../utils/getTrad.mjs';
 import { isAllowedContentTypesForRelations } from '../../utils/isAllowedContentTypesForRelations.mjs';
@@ -25,9 +24,11 @@ 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';
@@ -41,68 +42,45 @@ import { SingularName } from '../SingularName.mjs';
 import { TabForm } from '../TabForm.mjs';
 import { TextareaEnum } from '../TextareaEnum.mjs';
 import { forms } from './forms/forms.mjs';
-import { actions } from './reducer.mjs';
-import { makeSelectFormModal } from './selectors.mjs';
+import { actions, initialState } from './reducer.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';
 
-/* eslint-disable indent */ /* eslint-disable react/no-array-index-key */ const FormComponent = styled.form`
+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, categoryName, dynamicZoneTarget, forTarget, modalType, isOpen, kind, step, targetUid, showBackLink, activeTab, setActiveTab } = useFormModalNavigation();
+    const { onCloseModal, onNavigateToChooseAttributeModal, onNavigateToAddCompoToDZModal, onNavigateToCreateComponentStep2, actionType, attributeName, attributeType, customFieldUid, 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((state)=>formModalSelector(state), shallowEqual);
+    const reducerState = useSelector(selectState, 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, addCustomFieldAttribute, addCreatedComponentToDynamicZone, allComponentsCategories, changeDynamicZoneComponents, contentTypes, components, createSchema, deleteCategory, deleteData, editCategory, editCustomFieldAttribute, submitData, modifiedData: allDataSchema, nestedComponents, setModifiedData, sortedContentTypesList, updateSchema, reservedNames } = useDataManager();
+    const { addAttribute, editAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, changeDynamicZoneComponents, contentTypes, components, createSchema, createComponentSchema, deleteComponent, deleteContentType, editCustomFieldAttribute, updateSchema, nestedComponents, sortedContentTypesList, updateComponentSchema, updateComponentUid, reservedNames } = useDataManager();
     const { componentToCreate, formErrors, initialData, isCreatingComponentWhileAddingAField, modifiedData } = reducerState;
-    const pathToSchema = forTarget === 'contentType' || forTarget === 'component' ? [
-        forTarget
-    ] : [
-        forTarget,
-        targetUid
-    ];
+    const type = forTarget === 'component' ? components[targetUid] : contentTypes[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(allDataSchema, pathToAttributes, []), dynamicZoneTarget) || null;
-            // Edit category
-            if (modalType === 'editCategory' && actionType === 'edit') {
-                dispatch(actions.setDataToEdit({
-                    data: {
-                        name: categoryName
-                    }
-                }));
-            }
+            const foundDynamicZoneTarget = findAttribute(get(type, 'schema.attributes', []), dynamicZoneTarget) || null;
             // Create content type we need to add the default option draftAndPublish
             if (modalType === 'contentType' && actionType === 'create') {
                 dispatch(actions.setDataToEdit({
@@ -113,34 +91,24 @@ 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,
-                        draftAndPublish,
-                        kind,
-                        pluginOptions,
-                        pluralName,
-                        singularName
+                        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
                     }
                 }));
             }
             // Edit component
             if (modalType === 'component' && actionType === 'edit') {
-                const data = get(allDataSchema, pathToSchema, {});
                 dispatch(actions.setDataToEdit({
                     data: {
-                        displayName: data.schema.displayName,
-                        category: data.category,
-                        icon: data.schema.icon
+                        displayName: type.info.displayName,
+                        category: 'category' in type && type.category,
+                        icon: type.info.icon
                     }
                 }));
             }
@@ -163,7 +131,9 @@ const FormModal = ()=>{
             }
             // Set the predefined data structure to create an attribute
             if (attributeType) {
-                const attributeToEditNotFormatted = findAttribute(get(allDataSchema, pathToAttributes, []), attributeName);
+                const attributeToEditNotFormatted = findAttribute(get(type, [
+                    'attributes'
+                ], []), attributeName);
                 const attributeToEdit = {
                     ...attributeToEditNotFormatted,
                     name: attributeName
@@ -171,7 +141,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 (!attributeToEdit.repeatable) {
+                    if (!('repeatable' in attributeToEdit) || !attributeToEdit.repeatable) {
                         set(attributeToEdit, 'repeatable', false);
                     }
                 }
@@ -179,13 +149,18 @@ const FormModal = ()=>{
                     if (actionType === 'edit') {
                         dispatch(actions.setCustomFieldDataSchema({
                             isEditing: true,
-                            modifiedDataToSetForEditing: attributeToEdit
+                            modifiedDataToSetForEditing: attributeToEdit,
+                            uid: type.uid
                         }));
                     } else {
                         dispatch(actions.setCustomFieldDataSchema({
-                            customField: customField,
+                            customField: pick(customField, [
+                                'type',
+                                'options'
+                            ]),
                             isEditing: false,
-                            modifiedDataToSetForEditing: attributeToEdit
+                            modifiedDataToSetForEditing: attributeToEdit,
+                            uid: type.uid
                         }));
                     }
                 } else {
@@ -201,7 +176,8 @@ const FormModal = ()=>{
                         ], 'error'),
                         isEditing: actionType === 'edit',
                         modifiedDataToSetForEditing: attributeToEdit,
-                        step
+                        step,
+                        uid: type.uid
                     }));
                 }
             }
@@ -213,7 +189,6 @@ const FormModal = ()=>{
         actionType,
         attributeName,
         attributeType,
-        categoryName,
         dynamicZoneTarget,
         forTarget,
         isOpen,
@@ -227,12 +202,9 @@ 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(allDataSchema, [
-        ...pathToSchema,
-        'schema',
+    const attributes = get(type, [
         'attributes'
     ], null);
     const checkFormValidity = async ()=>{
@@ -241,22 +213,14 @@ const FormModal = ()=>{
         // Check form validity for content type
         if (isCreatingContentType) {
             schema = forms.contentType.schema(Object.keys(contentTypes), actionType === 'edit', // currentUID
-            get(allDataSchema, [
-                ...pathToSchema,
-                'uid'
-            ], null), reservedNames, ctbFormsAPI, contentTypes);
+            type?.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 || '', get(allDataSchema, [
-                ...pathToSchema,
-                'uid'
-            ], null));
+            schema = forms.component.schema(Object.keys(components), modifiedData.category || '', reservedNames, actionType === 'edit', components, modifiedData.displayName || '', type?.uid ?? null);
         } else if (isCreatingCustomFieldAttribute) {
             schema = forms.customField.schema({
-                schemaAttributes: get(allDataSchema, [
-                    ...pathToSchema,
-                    'schema',
+                schemaAttributes: get(type, [
                     'attributes'
                 ], []),
                 attributeType: customField.type,
@@ -277,15 +241,14 @@ 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 type = attributeType === 'relation' ? 'relation' : modifiedData.type;
+            const computedAttrbiuteType = attributeType === 'relation' ? 'relation' : modifiedData.type;
             let alreadyTakenTargetContentTypeAttributes = [];
-            if (type === 'relation') {
+            if (computedAttrbiuteType === 'relation') {
                 const targetContentTypeUID = get(modifiedData, [
                     'target'
                 ], null);
                 const targetContentTypeAttributes = get(contentTypes, [
                     targetContentTypeUID,
-                    'schema',
                     'attributes'
                 ], []);
                 // Create an array with all the targetContentType attributes name
@@ -300,12 +263,10 @@ const FormModal = ()=>{
                     return attrName !== initialData.targetAttribute;
                 });
             }
-            schema = forms.attribute.schema(get(allDataSchema, pathToSchema, {}), type, reservedNames, alreadyTakenTargetContentTypeAttributes, {
+            schema = forms.attribute.schema(type, computedAttrbiuteType, 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
@@ -364,29 +325,45 @@ const FormModal = ()=>{
         e.preventDefault();
         try {
             await checkFormValidity();
+            dispatch(actions.setErrors({
+                errors: {}
+            }));
             sendButtonAddMoreFieldEvent(shouldContinue);
-            const ctTargetUid = forTarget === 'components' ? targetUid : uid;
+            const ctTargetUid = targetUid;
             if (isCreatingContentType) {
                 // Create the content type schema
                 if (isCreating) {
                     createSchema({
-                        ...modifiedData,
-                        kind
-                    }, modalType, uid);
+                        data: {
+                            kind,
+                            displayName: modifiedData.displayName,
+                            draftAndPublish: modifiedData.draftAndPublish,
+                            pluginOptions: modifiedData.pluginOptions,
+                            singularName: modifiedData.singularName,
+                            pluralName: modifiedData.pluralName
+                        },
+                        uid
+                    });
                     // Redirect the user to the created content type
                     navigate({
                         pathname: `/plugins/${pluginId}/content-types/${uid}`
                     });
-                    // Navigate to the choose attribute modal
-                    onNavigateToChooseAttributeModal({
-                        forTarget,
-                        targetUid: ctTargetUid
-                    });
+                    onCloseModal();
                 } 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(allDataSchema, modifiedData)) {
+                    if (canEditContentType(contentType, modifiedData)) {
                         onCloseModal();
-                        await submitData(modifiedData);
+                        await updateSchema({
+                            uid: contentType.uid,
+                            data: {
+                                displayName: modifiedData.displayName,
+                                kind: modifiedData.kind,
+                                draftAndPublish: modifiedData.draftAndPublish,
+                                pluginOptions: modifiedData.pluginOptions
+                            }
+                        });
                     } else {
                         toggleNotification({
                             type: 'danger',
@@ -403,32 +380,42 @@ const FormModal = ()=>{
                     // Create the component schema
                     const componentUid = createComponentUid(modifiedData.displayName, modifiedData.category);
                     const { category, ...rest } = modifiedData;
-                    createSchema(rest, 'component', componentUid, category);
+                    createComponentSchema({
+                        data: {
+                            displayName: rest.displayName,
+                            icon: rest.icon
+                        },
+                        uid: componentUid,
+                        componentCategory: 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 if (isEditingCategory) {
-                if (toLower(initialData.name) === toLower(modifiedData.name)) {
+                } 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}`
+                        });
+                    }
                     // 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: {
@@ -437,7 +424,7 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    initialAttribute: initialData
+                    name: initialData.name
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -457,7 +444,20 @@ const FormModal = ()=>{
                 const isDynamicZoneAttribute = attributeType === 'dynamiczone';
                 // The user is creating a DZ (he had entered the name of the dz)
                 if (isDynamicZoneAttribute) {
-                    addAttribute(modifiedData, forTarget, targetUid, actionType === 'edit', initialData);
+                    if (actionType === 'create') {
+                        addAttribute({
+                            attributeToSet: modifiedData,
+                            forTarget,
+                            targetUid
+                        });
+                    } else {
+                        editAttribute({
+                            attributeToSet: modifiedData,
+                            forTarget,
+                            targetUid,
+                            name: initialData.name
+                        });
+                    }
                     // Adding a component to a dynamiczone is not the same logic as creating a simple field
                     // so the search is different
                     if (isCreating) {
@@ -474,7 +474,20 @@ const FormModal = ()=>{
                 }
                 // Normal fields like boolean relations or dynamic zone
                 if (!isComponentAttribute) {
-                    addAttribute(modifiedData, forTarget, targetUid, actionType === 'edit', initialData);
+                    if (actionType === 'create') {
+                        addAttribute({
+                            attributeToSet: modifiedData,
+                            forTarget,
+                            targetUid
+                        });
+                    } else {
+                        editAttribute({
+                            attributeToSet: modifiedData,
+                            forTarget,
+                            targetUid,
+                            name: initialData.name
+                        });
+                    }
                     if (shouldContinue) {
                         onNavigateToChooseAttributeModal({
                             forTarget,
@@ -494,18 +507,28 @@ 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({}));
+                    dispatch(actions.resetPropsAndSetFormForAddingAnExistingCompo({
+                        uid: type.uid
+                    }));
                     // 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
                 }
-                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 (actionType === 'create') {
+                    addAttribute({
+                        attributeToSet: modifiedData,
+                        forTarget,
+                        targetUid
+                    });
+                } else {
+                    editAttribute({
+                        attributeToSet: modifiedData,
+                        forTarget,
+                        targetUid,
+                        name: initialData.name
+                    });
+                }
                 if (shouldContinue) {
                     onNavigateToChooseAttributeModal({
                         forTarget,
@@ -528,33 +551,40 @@ 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({}));
+                    dispatch(actions.resetPropsAndSaveCurrentData({
+                        uid: type.uid
+                    }));
                     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, type, ...rest } = componentToCreate;
+                const { category, ...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
-                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);
+                createComponentSchema({
+                    // Component data
+                    data: {
+                        icon: rest.icon,
+                        displayName: rest.displayName
+                    },
+                    uid: componentUid,
+                    componentCategory: category
+                });
                 // Add the field to the schema
-                addAttribute(modifiedData, forTarget, targetUid, false);
+                addAttribute({
+                    attributeToSet: modifiedData,
+                    forTarget,
+                    targetUid
+                });
                 dispatch(actions.resetProps());
                 // Open modal attribute for adding attr to component
                 if (shouldContinue) {
                     onNavigateToChooseAttributeModal({
-                        forTarget: 'components',
+                        forTarget: 'component',
                         targetUid: componentUid
                     });
                 } else {
@@ -568,28 +598,35 @@ 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
-                        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);
+                        createComponentSchema({
+                            data: rest,
+                            uid: componentUid,
+                            componentCategory: category
+                        });
                         // Add the created component to the DZ
                         // We don't want to remove the old ones
-                        addCreatedComponentToDynamicZone(dynamicZoneTarget, [
-                            componentUid
-                        ]);
+                        addCreatedComponentToDynamicZone({
+                            forTarget,
+                            targetUid,
+                            dynamicZoneTarget,
+                            componentsToAdd: [
+                                componentUid
+                            ]
+                        });
                         // The Dynamic Zone and the component is created
                         // Open the modal to add fields to the created component
                         onNavigateToChooseAttributeModal({
-                            forTarget: 'components',
+                            forTarget: 'component',
                             targetUid: componentUid
                         });
                     } else {
                         // Add the components to the DZ
-                        changeDynamicZoneComponents(dynamicZoneTarget, modifiedData.components);
+                        changeDynamicZoneComponents({
+                            forTarget,
+                            targetUid,
+                            dynamicZoneTarget,
+                            newComponents: modifiedData.components
+                        });
                         onCloseModal();
                     }
                 } else {
@@ -599,10 +636,12 @@ const FormModal = ()=>{
             }
             dispatch(actions.resetProps());
         } catch (err) {
-            const errors = getYupInnerErrors(err);
-            dispatch(actions.setErrors({
-                errors
-            }));
+            if (yup.ValidationError.isError(err)) {
+                const errors = getYupInnerErrors(err);
+                dispatch(actions.setErrors({
+                    errors
+                }));
+            }
         }
     };
     const handleConfirmClose = ()=>{
@@ -644,9 +683,6 @@ const FormModal = ()=>{
         }
     };
     const shouldDisableAdvancedTab = ()=>{
-        if (modalType === 'editCategory') {
-            return true;
-        }
         if (modalType === 'component') {
             return true;
         }
@@ -672,7 +708,7 @@ const FormModal = ()=>{
                 sections: []
             })
     });
-    const isAddingAComponentToAnotherComponent = forTarget === 'components' || forTarget === 'component';
+    const isAddingAComponentToAnotherComponent = forTarget === 'component';
     const genericInputProps = {
         customInputs: {
             'allowed-types-select': AllowedTypesSelect,
@@ -699,9 +735,8 @@ const FormModal = ()=>{
         formErrors,
         isAddingAComponentToAnotherComponent,
         isCreatingComponentWhileAddingAField,
-        mainBoxHeader: get(allDataSchema, [
-            ...pathToSchema,
-            'schema',
+        mainBoxHeader: get(type, [
+            'info',
             'displayName'
         ], ''),
         modifiedData,
@@ -718,7 +753,7 @@ const FormModal = ()=>{
         attributes,
         extensions: ctbFormsAPI,
         forTarget,
-        contentTypeSchema: allDataSchema.contentType || {},
+        contentTypeSchema: type || {},
         customField
     }).sections;
     const baseForm = formToDisplay.base({
@@ -729,7 +764,7 @@ const FormModal = ()=>{
         attributes,
         extensions: ctbFormsAPI,
         forTarget,
-        contentTypeSchema: allDataSchema.contentType || {},
+        contentTypeSchema: type || {},
         customField
     }).sections;
     const baseFormInputNames = getFormInputNames(baseForm);
@@ -738,7 +773,6 @@ 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);
@@ -755,7 +789,6 @@ const FormModal = ()=>{
                 /*#__PURE__*/ jsx(FormModalHeader, {
                     actionType: actionType,
                     attributeName: attributeName,
-                    categoryName: categoryName,
                     contentTypeKind: kind,
                     dynamicZoneTarget: dynamicZoneTarget,
                     modalType: modalType,
@@ -856,18 +889,20 @@ const FormModal = ()=>{
                         /*#__PURE__*/ jsxs(Modal.Footer, {
                             children: [
                                 /*#__PURE__*/ jsx(Button, {
+                                    type: "button",
                                     variant: "tertiary",
-                                    onClick: handleClosed,
+                                    onClick: (e)=>{
+                                        e.preventDefault();
+                                        handleClosed();
+                                    },
                                     children: formatMessage({
                                         id: 'app.components.Button.cancel',
                                         defaultMessage: 'Cancel'
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(FormModalEndActions, {
-                                    deleteCategory: deleteCategory,
-                                    deleteContentType: deleteData,
-                                    deleteComponent: deleteData,
-                                    categoryName: initialData.name,
+                                    deleteContentType: ()=>deleteContentType(targetUid),
+                                    deleteComponent: ()=>deleteComponent(targetUid),
                                     isAttributeModal: modalType === 'attribute',
                                     isCustomFieldModal: modalType === 'customField',
                                     isComponentToDzModal: modalType === 'addComponentToDynamicZone',
@@ -882,7 +917,6 @@ const FormModal = ()=>{
                                     isCreatingContentType: actionType === 'create',
                                     isEditingAttribute: actionType === 'edit',
                                     isDzAttribute: attributeType === 'dynamiczone',
-                                    isEditingCategory: modalType === 'editCategory',
                                     isInFirstComponentStep: step === '1',
                                     onSubmitAddComponentAttribute: handleSubmit,
                                     onSubmitAddComponentToDz: handleSubmit,
@@ -890,7 +924,6 @@ const FormModal = ()=>{
                                     onSubmitCreateContentType: handleSubmit,
                                     onSubmitCreateDz: handleSubmit,
                                     onSubmitEditAttribute: handleSubmit,
-                                    onSubmitEditCategory: handleSubmit,
                                     onSubmitEditComponent: handleSubmit,
                                     onSubmitEditContentType: handleSubmit,
                                     onSubmitEditCustomFieldAttribute: handleSubmit,