@strapi/content-type-builder 5.13.0 → 5.14.0

package/dist/admin/components/FormModal/FormModal.js

@@ -7,14 +7,13 @@ var designSystem = require('@strapi/design-system');
 var get = require('lodash/get');
 var has = require('lodash/has');
 var isEqual = require('lodash/isEqual');
+var pick = require('lodash/pick');
 var set = require('lodash/set');
-var toLower = require('lodash/toLower');
 var reactIntl = require('react-intl');
 var reactRedux = require('react-redux');
 var reactRouterDom = require('react-router-dom');
 var styledComponents = require('styled-components');
-var useDataManager = require('../../hooks/useDataManager.js');
-var useFormModalNavigation = require('../../hooks/useFormModalNavigation.js');
+var yup = require('yup');
 var pluginId = require('../../pluginId.js');
 var getTrad = require('../../utils/getTrad.js');
 var isAllowedContentTypesForRelations = require('../../utils/isAllowedContentTypesForRelations.js');
@@ -27,9 +26,11 @@ var BooleanRadioGroup = require('../BooleanRadioGroup.js');
 var CheckboxWithNumberField = require('../CheckboxWithNumberField.js');
 var ContentTypeRadioGroup = require('../ContentTypeRadioGroup.js');
 var CustomRadioGroup = require('../CustomRadioGroup/CustomRadioGroup.js');
+var useDataManager = require('../DataManager/useDataManager.js');
 var DraftAndPublishToggle = require('../DraftAndPublishToggle.js');
 var FormModalEndActions = require('../FormModalEndActions.js');
 var FormModalHeader = require('../FormModalHeader.js');
+var useFormModalNavigation = require('../FormModalNavigation/useFormModalNavigation.js');
 var FormModalSubHeader = require('../FormModalSubHeader.js');
 var IconPicker = require('../IconPicker/IconPicker.js');
 var PluralName = require('../PluralName.js');
@@ -44,7 +45,6 @@ var TabForm = require('../TabForm.js');
 var TextareaEnum = require('../TextareaEnum.js');
 var forms = require('./forms/forms.js');
 var reducer = require('./reducer.js');
-var selectors = require('./selectors.js');
 var canEditContentType = require('./utils/canEditContentType.js');
 var createUid = require('./utils/createUid.js');
 var getAttributesToDisplay = require('./utils/getAttributesToDisplay.js');
@@ -68,62 +68,41 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
-/* eslint-disable indent */ /* eslint-disable react/no-array-index-key */ const FormComponent = styledComponents.styled.form`
+const FormComponent = styledComponents.styled.form`
   overflow: auto;
 `;
+const selectState = (state)=>state['content-type-builder_formModal'] || reducer.initialState;
 const FormModal = ()=>{
-    const { onCloseModal, onNavigateToChooseAttributeModal, onNavigateToAddCompoToDZModal, onNavigateToCreateComponentStep2, actionType, attributeName, attributeType, customFieldUid, categoryName, dynamicZoneTarget, forTarget, modalType, isOpen, kind, step, targetUid, showBackLink, activeTab, setActiveTab } = useFormModalNavigation.useFormModalNavigation();
+    const { onCloseModal, onNavigateToChooseAttributeModal, onNavigateToAddCompoToDZModal, onNavigateToCreateComponentStep2, actionType, attributeName, attributeType, customFieldUid, dynamicZoneTarget, forTarget, modalType, isOpen, kind, step, targetUid, showBackLink, activeTab, setActiveTab } = useFormModalNavigation.useFormModalNavigation();
     const getPlugin = strapiAdmin.useStrapiApp('FormModal', (state)=>state.getPlugin);
     const getCustomField = strapiAdmin.useStrapiApp('FormModal', (state)=>state.customFields.get);
     const customField = getCustomField(customFieldUid);
-    const formModalSelector = React__namespace.useMemo(selectors.makeSelectFormModal, []);
     const dispatch = reactRedux.useDispatch();
     const { toggleNotification } = strapiAdmin.useNotification();
-    const reducerState = reactRedux.useSelector((state)=>formModalSelector(state), reactRedux.shallowEqual);
+    const reducerState = reactRedux.useSelector(selectState, reactRedux.shallowEqual);
     const navigate = reactRouterDom.useNavigate();
     const { trackUsage } = strapiAdmin.useTracking();
     const { formatMessage } = reactIntl.useIntl();
     const ctbPlugin = getPlugin(pluginId.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.useDataManager();
+    const { addAttribute, editAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, changeDynamicZoneComponents, contentTypes, components, createSchema, createComponentSchema, deleteComponent, deleteContentType, editCustomFieldAttribute, updateSchema, nestedComponents, sortedContentTypesList, updateComponentSchema, updateComponentUid, reservedNames } = useDataManager.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__namespace.useEffect(()=>{
         if (isOpen) {
             const collectionTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations.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.findAttribute(get(allDataSchema, pathToAttributes, []), dynamicZoneTarget) || null;
-            // Edit category
-            if (modalType === 'editCategory' && actionType === 'edit') {
-                dispatch(reducer.actions.setDataToEdit({
-                    data: {
-                        name: categoryName
-                    }
-                }));
-            }
+            const foundDynamicZoneTarget = findAttribute.findAttribute(get(type, 'schema.attributes', []), dynamicZoneTarget) || null;
             // Create content type we need to add the default option draftAndPublish
             if (modalType === 'contentType' && actionType === 'create') {
                 dispatch(reducer.actions.setDataToEdit({
@@ -134,34 +113,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(reducer.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(reducer.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
                     }
                 }));
             }
@@ -184,7 +153,9 @@ const FormModal = ()=>{
             }
             // Set the predefined data structure to create an attribute
             if (attributeType) {
-                const attributeToEditNotFormatted = findAttribute.findAttribute(get(allDataSchema, pathToAttributes, []), attributeName);
+                const attributeToEditNotFormatted = findAttribute.findAttribute(get(type, [
+                    'attributes'
+                ], []), attributeName);
                 const attributeToEdit = {
                     ...attributeToEditNotFormatted,
                     name: attributeName
@@ -192,7 +163,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);
                     }
                 }
@@ -200,13 +171,18 @@ const FormModal = ()=>{
                     if (actionType === 'edit') {
                         dispatch(reducer.actions.setCustomFieldDataSchema({
                             isEditing: true,
-                            modifiedDataToSetForEditing: attributeToEdit
+                            modifiedDataToSetForEditing: attributeToEdit,
+                            uid: type.uid
                         }));
                     } else {
                         dispatch(reducer.actions.setCustomFieldDataSchema({
-                            customField: customField,
+                            customField: pick(customField, [
+                                'type',
+                                'options'
+                            ]),
                             isEditing: false,
-                            modifiedDataToSetForEditing: attributeToEdit
+                            modifiedDataToSetForEditing: attributeToEdit,
+                            uid: type.uid
                         }));
                     }
                 } else {
@@ -222,7 +198,8 @@ const FormModal = ()=>{
                         ], 'error'),
                         isEditing: actionType === 'edit',
                         modifiedDataToSetForEditing: attributeToEdit,
-                        step
+                        step,
+                        uid: type.uid
                     }));
                 }
             }
@@ -234,7 +211,6 @@ const FormModal = ()=>{
         actionType,
         attributeName,
         attributeType,
-        categoryName,
         dynamicZoneTarget,
         forTarget,
         isOpen,
@@ -248,12 +224,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.createUid(modifiedData.displayName || '');
-    const attributes = get(allDataSchema, [
-        ...pathToSchema,
-        'schema',
+    const attributes = get(type, [
         'attributes'
     ], null);
     const checkFormValidity = async ()=>{
@@ -262,22 +235,14 @@ const FormModal = ()=>{
         // Check form validity for content type
         if (isCreatingContentType) {
             schema = forms.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.forms.component.schema(Object.keys(components), modifiedData.category || '', reservedNames, actionType === 'edit', components, modifiedData.displayName || '', get(allDataSchema, [
-                ...pathToSchema,
-                'uid'
-            ], null));
+            schema = forms.forms.component.schema(Object.keys(components), modifiedData.category || '', reservedNames, actionType === 'edit', components, modifiedData.displayName || '', type?.uid ?? null);
         } else if (isCreatingCustomFieldAttribute) {
             schema = forms.forms.customField.schema({
-                schemaAttributes: get(allDataSchema, [
-                    ...pathToSchema,
-                    'schema',
+                schemaAttributes: get(type, [
                     'attributes'
                 ], []),
                 attributeType: customField.type,
@@ -298,15 +263,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
@@ -321,12 +285,10 @@ const FormModal = ()=>{
                     return attrName !== initialData.targetAttribute;
                 });
             }
-            schema = forms.forms.attribute.schema(get(allDataSchema, pathToSchema, {}), type, reservedNames, alreadyTakenTargetContentTypeAttributes, {
+            schema = forms.forms.attribute.schema(type, computedAttrbiuteType, reservedNames, alreadyTakenTargetContentTypeAttributes, {
                 modifiedData,
                 initialData
             }, ctbFormsAPI);
-        } else if (isEditingCategory) {
-            schema = forms.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
@@ -385,29 +347,45 @@ const FormModal = ()=>{
         e.preventDefault();
         try {
             await checkFormValidity();
+            dispatch(reducer.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.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.canEditContentType(allDataSchema, modifiedData)) {
+                    if (canEditContentType.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',
@@ -424,32 +402,42 @@ const FormModal = ()=>{
                     // Create the component schema
                     const componentUid = createUid.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.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 = createUid.createComponentUid(modifiedData.displayName, modifiedData.category);
+                        updateComponentUid({
+                            componentUID: targetUid,
+                            newComponentUID: componentUid
+                        });
+                        navigate({
+                            pathname: `/plugins/${pluginId.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: {
@@ -458,7 +446,7 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    initialAttribute: initialData
+                    name: initialData.name
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -478,7 +466,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) {
@@ -495,7 +496,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,
@@ -515,18 +529,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(reducer.actions.resetPropsAndSetFormForAddingAnExistingCompo({}));
+                    dispatch(reducer.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,
@@ -549,33 +573,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(reducer.actions.resetPropsAndSaveCurrentData({}));
+                    dispatch(reducer.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 = createUid.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(reducer.actions.resetProps());
                 // Open modal attribute for adding attr to component
                 if (shouldContinue) {
                     onNavigateToChooseAttributeModal({
-                        forTarget: 'components',
+                        forTarget: 'component',
                         targetUid: componentUid
                     });
                 } else {
@@ -589,28 +620,35 @@ const FormModal = ()=>{
                         const { category, type, ...rest } = modifiedData.componentToCreate;
                         const componentUid = createUid.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 {
@@ -620,10 +658,12 @@ const FormModal = ()=>{
             }
             dispatch(reducer.actions.resetProps());
         } catch (err) {
-            const errors = getYupInnerErrors.getYupInnerErrors(err);
-            dispatch(reducer.actions.setErrors({
-                errors
-            }));
+            if (yup__namespace.ValidationError.isError(err)) {
+                const errors = getYupInnerErrors.getYupInnerErrors(err);
+                dispatch(reducer.actions.setErrors({
+                    errors
+                }));
+            }
         }
     };
     const handleConfirmClose = ()=>{
@@ -665,9 +705,6 @@ const FormModal = ()=>{
         }
     };
     const shouldDisableAdvancedTab = ()=>{
-        if (modalType === 'editCategory') {
-            return true;
-        }
         if (modalType === 'component') {
             return true;
         }
@@ -693,7 +730,7 @@ const FormModal = ()=>{
                 sections: []
             })
     });
-    const isAddingAComponentToAnotherComponent = forTarget === 'components' || forTarget === 'component';
+    const isAddingAComponentToAnotherComponent = forTarget === 'component';
     const genericInputProps = {
         customInputs: {
             'allowed-types-select': AllowedTypesSelect.AllowedTypesSelect,
@@ -720,9 +757,8 @@ const FormModal = ()=>{
         formErrors,
         isAddingAComponentToAnotherComponent,
         isCreatingComponentWhileAddingAField,
-        mainBoxHeader: get(allDataSchema, [
-            ...pathToSchema,
-            'schema',
+        mainBoxHeader: get(type, [
+            'info',
             'displayName'
         ], ''),
         modifiedData,
@@ -739,7 +775,7 @@ const FormModal = ()=>{
         attributes,
         extensions: ctbFormsAPI,
         forTarget,
-        contentTypeSchema: allDataSchema.contentType || {},
+        contentTypeSchema: type || {},
         customField
     }).sections;
     const baseForm = formToDisplay.base({
@@ -750,7 +786,7 @@ const FormModal = ()=>{
         attributes,
         extensions: ctbFormsAPI,
         forTarget,
-        contentTypeSchema: allDataSchema.contentType || {},
+        contentTypeSchema: type || {},
         customField
     }).sections;
     const baseFormInputNames = getFormInputNames.getFormInputNames(baseForm);
@@ -759,7 +795,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);
@@ -776,7 +811,6 @@ const FormModal = ()=>{
                 /*#__PURE__*/ jsxRuntime.jsx(FormModalHeader.FormModalHeader, {
                     actionType: actionType,
                     attributeName: attributeName,
-                    categoryName: categoryName,
                     contentTypeKind: kind,
                     dynamicZoneTarget: dynamicZoneTarget,
                     modalType: modalType,
@@ -877,18 +911,20 @@ const FormModal = ()=>{
                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                    type: "button",
                                     variant: "tertiary",
-                                    onClick: handleClosed,
+                                    onClick: (e)=>{
+                                        e.preventDefault();
+                                        handleClosed();
+                                    },
                                     children: formatMessage({
                                         id: 'app.components.Button.cancel',
                                         defaultMessage: 'Cancel'
                                     })
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(FormModalEndActions.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',
@@ -903,7 +939,6 @@ const FormModal = ()=>{
                                     isCreatingContentType: actionType === 'create',
                                     isEditingAttribute: actionType === 'edit',
                                     isDzAttribute: attributeType === 'dynamiczone',
-                                    isEditingCategory: modalType === 'editCategory',
                                     isInFirstComponentStep: step === '1',
                                     onSubmitAddComponentAttribute: handleSubmit,
                                     onSubmitAddComponentToDz: handleSubmit,
@@ -911,7 +946,6 @@ const FormModal = ()=>{
                                     onSubmitCreateContentType: handleSubmit,
                                     onSubmitCreateDz: handleSubmit,
                                     onSubmitEditAttribute: handleSubmit,
-                                    onSubmitEditCategory: handleSubmit,
                                     onSubmitEditComponent: handleSubmit,
                                     onSubmitEditContentType: handleSubmit,
                                     onSubmitEditCustomFieldAttribute: handleSubmit,