@strapi/content-type-builder 5.50.0 → 5.50.1

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

@@ -6,7 +6,6 @@ import { Modal, Dialog, Box, Typography, Tabs, Flex, Divider, Button } from '@st
 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 { useIntl } from 'react-intl';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -16,6 +15,7 @@ import * as yup from 'yup';
 import { pluginId } from '../../pluginId.mjs';
 import { getTrad } from '../../utils/getTrad.mjs';
 import { isAllowedContentTypesForRelations } from '../../utils/isAllowedContentTypesForRelations.mjs';
+import { getFirstVisibleConditionEntry } from '../../utils/conditions.mjs';
 import { findAttribute } from '../../utils/findAttribute.mjs';
 import { getYupInnerErrors } from '../../utils/getYupInnerErrors.mjs';
 import { AllowedTypesSelect } from '../AllowedTypesSelect.mjs';
@@ -56,6 +56,21 @@ const FormComponent = styled.form`
   overflow: auto;
 `;
 const selectState = (state)=>state['content-type-builder_formModal'] || initialState;
+const toStringValue = (value)=>typeof value === 'string' ? value : '';
+const toOptionalStringValue = (value)=>{
+    if (typeof value !== 'string' || value === '') {
+        return undefined;
+    }
+    return value;
+};
+const toBooleanValue = (value)=>typeof value === 'boolean' ? value : false;
+const toContentTypeKind = (value)=>value === 'singleType' ? 'singleType' : 'collectionType';
+const toRecordValue = (value)=>typeof value === 'object' && value !== null ? value : {};
+const toComponentDraft = (value)=>({
+        category: toStringValue(value?.category),
+        displayName: toStringValue(value?.displayName),
+        icon: toOptionalStringValue(value?.icon)
+    });
 const FormModal = ()=>{
     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);
@@ -85,20 +100,22 @@ const FormModal = ()=>{
         const oldEnum = initialData.enum;
         const newEnum = modifiedData.enum;
         // Get all attributes from the content type schema
-        const contentTypeAttributes = type?.attributes || [];
+        const contentTypeAttributes = type?.attributes ?? [];
         // Find all fields that reference this field in their conditions
         const referencedFields = contentTypeAttributes.filter((attr)=>{
-            if (!attr.conditions) return false;
-            const condition = attr.conditions.visible;
-            if (!condition) return false;
-            const [[, conditions]] = Object.entries(condition);
-            const [fieldVar, value] = conditions;
+            const conditionEntry = getFirstVisibleConditionEntry(attr.conditions);
+            if (conditionEntry === null) {
+                return false;
+            }
+            const { fieldVar, value } = conditionEntry;
             // Check if this condition references our field
-            if (fieldVar.var !== oldName) return false;
+            if (fieldVar.var !== oldName) {
+                return false;
+            }
             // If it's an enum field, also check if the value is being deleted/changed
-            if (oldEnum && newEnum) {
+            if (oldEnum !== undefined && newEnum !== undefined) {
                 const deletedOrChangedValues = oldEnum.filter((oldValue)=>!newEnum.includes(oldValue));
-                return deletedOrChangedValues.includes(value);
+                return typeof value === 'string' && deletedOrChangedValues.includes(value);
             }
             return true;
         });
@@ -134,10 +151,10 @@ const FormModal = ()=>{
                     data: {
                         displayName: type.info.displayName,
                         draftAndPublish: type.options?.draftAndPublish,
-                        kind: 'kind' in type && type.kind,
+                        kind: type.modelType === 'contentType' ? type.kind : 'collectionType',
                         pluginOptions: type.pluginOptions,
-                        pluralName: 'pluralName' in type.info && type.info.pluralName,
-                        singularName: 'singularName' in type.info && type.info.singularName
+                        pluralName: type.modelType === 'contentType' ? type.info.pluralName : '',
+                        singularName: type.modelType === 'contentType' ? type.info.singularName : ''
                     }
                 }));
             }
@@ -146,7 +163,7 @@ const FormModal = ()=>{
                 dispatch(actions.setDataToEdit({
                     data: {
                         displayName: type.info.displayName,
-                        category: 'category' in type && type.category,
+                        category: type.modelType === 'component' ? type.category : '',
                         icon: type.info.icon
                     }
                 }));
@@ -193,10 +210,10 @@ const FormModal = ()=>{
                         }));
                     } else {
                         dispatch(actions.setCustomFieldDataSchema({
-                            customField: pick(customField, [
-                                'type',
-                                'options'
-                            ]),
+                            customField: {
+                                type: customField?.type ?? '',
+                                options: customField?.options
+                            },
                             isEditing: false,
                             modifiedDataToSetForEditing: attributeToEdit,
                             uid: type.uid
@@ -256,7 +273,7 @@ const FormModal = ()=>{
         // 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), toStringValue(modifiedData.category), reservedNames, actionType === 'edit', components, toStringValue(modifiedData.displayName), type?.uid ?? null);
         } else if (isCreatingCustomFieldAttribute) {
             schema = forms.customField.schema({
                 schemaAttributes: get(type, [
@@ -276,16 +293,16 @@ const FormModal = ()=>{
         // Since we temporarily store the component info in another object
         // The data is set in the componentToCreate key
         } else if (isComponentAttribute && isCreatingComponentFromAView && isInFirstComponentStep) {
-            schema = forms.component.schema(Object.keys(components), get(modifiedData, 'componentToCreate.category', ''), reservedNames, actionType === 'edit', components, modifiedData.componentToCreate.displayName || '');
+            schema = forms.component.schema(Object.keys(components), toStringValue(get(modifiedData, 'componentToCreate.category', '')), reservedNames, actionType === 'edit', components, toStringValue(modifiedData.componentToCreate?.displayName));
         // 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 computedAttributeType = attributeType === 'relation' ? 'relation' : modifiedData.type;
             let alreadyTakenTargetContentTypeAttributes = [];
-            if (computedAttrbiuteType === 'relation') {
-                const targetContentTypeUID = get(modifiedData, [
+            if (computedAttributeType === 'relation') {
+                const targetContentTypeUID = toStringValue(get(modifiedData, [
                     'target'
-                ], null);
+                ], ''));
                 const targetContentTypeAttributes = get(contentTypes, [
                     targetContentTypeUID,
                     'attributes'
@@ -302,7 +319,7 @@ const FormModal = ()=>{
                     return attrName !== initialData.targetAttribute;
                 });
             }
-            schema = forms.attribute.schema(type, computedAttrbiuteType, reservedNames, alreadyTakenTargetContentTypeAttributes, {
+            schema = forms.attribute.schema(type, computedAttributeType ?? 'string', reservedNames, alreadyTakenTargetContentTypeAttributes, {
                 modifiedData,
                 initialData
             }, ctbFormsAPI);
@@ -311,7 +328,7 @@ const FormModal = ()=>{
             // in step 1 of the add component (modalType=attribute&attributeType=component) but not creating a component
             // eslint-disable-next-line no-lonely-if
             if (isInFirstComponentStep && isCreatingComponentFromAView) {
-                schema = forms.component.schema(Object.keys(components), get(modifiedData, 'componentToCreate.category', ''), reservedNames, actionType === 'edit', components, modifiedData.componentToCreate.displayName || '');
+                schema = forms.component.schema(Object.keys(components), toStringValue(get(modifiedData, 'componentToCreate.category', '')), reservedNames, actionType === 'edit', components, toStringValue(modifiedData.componentToCreate?.displayName));
             } else {
                 // The form is valid
                 // The case here is being in the addComponentToDynamicZone modal and not creating a component
@@ -322,7 +339,7 @@ const FormModal = ()=>{
             abortEarly: false
         });
     };
-    const handleChange = React.useCallback(({ target: { name, value, type, ...rest } })=>{
+    const handleChange = React.useCallback(({ target: { name, value } })=>{
         const namesThatCanResetToNullValue = [
             'enumName',
             'max',
@@ -337,9 +354,9 @@ const FormModal = ()=>{
             val = null;
         } else if (name === 'enum') {
             // For enum values, ensure we're working with an array
-            val = Array.isArray(value) ? value : [
+            val = Array.isArray(value) ? value : typeof value === 'string' ? [
                 value
-            ];
+            ] : [];
         } else {
             val = value;
         }
@@ -379,11 +396,11 @@ const FormModal = ()=>{
                     createSchema({
                         data: {
                             kind,
-                            displayName: modifiedData.displayName,
-                            draftAndPublish: modifiedData.draftAndPublish,
-                            pluginOptions: modifiedData.pluginOptions,
-                            singularName: modifiedData.singularName,
-                            pluralName: modifiedData.pluralName
+                            displayName: toStringValue(modifiedData.displayName),
+                            draftAndPublish: toBooleanValue(modifiedData.draftAndPublish),
+                            pluginOptions: toRecordValue(modifiedData.pluginOptions),
+                            singularName: toStringValue(modifiedData.singularName),
+                            pluralName: toStringValue(modifiedData.pluralName)
                         },
                         uid
                     });
@@ -401,10 +418,10 @@ const FormModal = ()=>{
                         await updateSchema({
                             uid: contentType.uid,
                             data: {
-                                displayName: modifiedData.displayName,
-                                kind: modifiedData.kind,
-                                draftAndPublish: modifiedData.draftAndPublish,
-                                pluginOptions: modifiedData.pluginOptions
+                                displayName: toStringValue(modifiedData.displayName),
+                                kind: toContentTypeKind(modifiedData.kind),
+                                draftAndPublish: toBooleanValue(modifiedData.draftAndPublish),
+                                pluginOptions: toRecordValue(modifiedData.pluginOptions)
                             }
                         });
                     } else {
@@ -421,38 +438,39 @@ const FormModal = ()=>{
             } else if (modalType === 'component') {
                 if (isCreating) {
                     // Create the component schema
-                    const componentUid = createComponentUid(modifiedData.displayName, modifiedData.category);
-                    const { category, ...rest } = modifiedData;
+                    const componentCategory = toStringValue(modifiedData.category);
+                    const componentDisplayName = toStringValue(modifiedData.displayName);
+                    const componentUid = createComponentUid(componentDisplayName, componentCategory);
                     createComponentSchema({
                         data: {
-                            displayName: rest.displayName,
-                            icon: rest.icon
+                            displayName: componentDisplayName,
+                            icon: toOptionalStringValue(modifiedData.icon)
                         },
                         uid: componentUid,
-                        componentCategory: category
+                        componentCategory
                     });
                     // Redirect the user to the created component
                     navigate({
-                        pathname: `/plugins/${pluginId}/component-categories/${category}/${componentUid}`
+                        pathname: `/plugins/${pluginId}/component-categories/${componentCategory}/${componentUid}`
                     });
                     onCloseModal();
                     return;
                 } else {
                     updateComponentSchema({
                         data: {
-                            icon: modifiedData.icon,
-                            displayName: modifiedData.displayName
+                            icon: toOptionalStringValue(modifiedData.icon),
+                            displayName: toStringValue(modifiedData.displayName)
                         },
                         componentUID: targetUid
                     });
                     if (type.status === 'NEW') {
-                        const componentUid = createComponentUid(modifiedData.displayName, modifiedData.category);
+                        const componentUid = createComponentUid(toStringValue(modifiedData.displayName), toStringValue(modifiedData.category));
                         updateComponentUid({
                             componentUID: targetUid,
                             newComponentUID: componentUid
                         });
                         navigate({
-                            pathname: `/plugins/${pluginId}/component-categories/${modifiedData.category}/${componentUid}`
+                            pathname: `/plugins/${pluginId}/component-categories/${toStringValue(modifiedData.category)}/${componentUid}`
                         });
                     }
                     // Close the modal
@@ -467,7 +485,7 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    name: initialData.name
+                    name: toStringValue(initialData.name)
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -498,7 +516,7 @@ const FormModal = ()=>{
                             attributeToSet: modifiedData,
                             forTarget,
                             targetUid,
-                            name: initialData.name
+                            name: toStringValue(initialData.name)
                         });
                     }
                     // Adding a component to a dynamiczone is not the same logic as creating a simple field
@@ -508,7 +526,7 @@ const FormModal = ()=>{
                         dispatch(actions.resetPropsAndSetTheFormForAddingACompoToADz());
                         setActiveTab('basic');
                         onNavigateToAddCompoToDZModal({
-                            dynamicZoneTarget: modifiedData.name
+                            dynamicZoneTarget: toStringValue(modifiedData.name)
                         });
                     } else {
                         onCloseModal();
@@ -528,7 +546,7 @@ const FormModal = ()=>{
                             attributeToSet: modifiedData,
                             forTarget,
                             targetUid,
-                            name: initialData.name
+                            name: toStringValue(initialData.name)
                         });
                     }
                     if (shouldContinue) {
@@ -584,7 +602,7 @@ const FormModal = ()=>{
                         attributeToSet: attributeData,
                         forTarget,
                         targetUid,
-                        name: initialData.name
+                        name: toStringValue(initialData.name)
                     });
                 }
                 if (shouldContinue) {
@@ -618,19 +636,19 @@ const FormModal = ()=>{
                 // 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 draftComponent = toComponentDraft(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);
+                const componentUid = createComponentUid(draftComponent.displayName, draftComponent.category);
                 // Create the component first and add it to the components data
                 createComponentSchema({
                     // Component data
                     data: {
-                        icon: rest.icon,
-                        displayName: rest.displayName
+                        icon: draftComponent.icon,
+                        displayName: draftComponent.displayName
                     },
                     uid: componentUid,
-                    componentCategory: category
+                    componentCategory: draftComponent.category
                 });
                 // Add the field to the schema
                 addAttribute({
@@ -653,13 +671,16 @@ const FormModal = ()=>{
                 // The modal is addComponentToDynamicZone
                 if (isInFirstComponentStep) {
                     if (isCreatingComponentFromAView) {
-                        const { category, type, ...rest } = modifiedData.componentToCreate;
-                        const componentUid = createComponentUid(modifiedData.componentToCreate.displayName, category);
+                        const draftComponent = toComponentDraft(modifiedData.componentToCreate);
+                        const componentUid = createComponentUid(draftComponent.displayName, draftComponent.category);
                         // Create the component first and add it to the components data
                         createComponentSchema({
-                            data: rest,
+                            data: {
+                                displayName: draftComponent.displayName,
+                                icon: draftComponent.icon
+                            },
                             uid: componentUid,
-                            componentCategory: category
+                            componentCategory: draftComponent.category
                         });
                         // Add the created component to the DZ
                         // We don't want to remove the old ones
@@ -683,7 +704,7 @@ const FormModal = ()=>{
                             forTarget,
                             targetUid,
                             dynamicZoneTarget,
-                            newComponents: modifiedData.components
+                            newComponents: modifiedData.components ?? []
                         });
                         onCloseModal();
                     }
@@ -873,7 +894,7 @@ const FormModal = ()=>{
                         /*#__PURE__*/ jsx(Dialog.Trigger, {}),
                         /*#__PURE__*/ jsx(ConfirmDialog, {
                             onConfirm: ()=>{
-                                if (pendingSubmit) {
+                                if (pendingSubmit !== null) {
                                     const { e, shouldContinue } = pendingSubmit;
                                     setShowWarningDialog(false);
                                     setPendingSubmit(null);
@@ -886,12 +907,12 @@ const FormModal = ()=>{
                             },
                             children: (()=>{
                                 const referencedFields = checkFieldNameChanges();
-                                if (!referencedFields) return null;
+                                if (referencedFields === false) return null;
                                 const fieldNames = referencedFields.map((field)=>field.name).join(', ');
-                                const isEnum = initialData.enum && modifiedData.enum;
-                                if (isEnum) {
-                                    const oldEnum = initialData.enum;
-                                    const newEnum = modifiedData.enum;
+                                const oldEnum = initialData.enum;
+                                const newEnum = modifiedData.enum;
+                                const isEnum = Array.isArray(oldEnum) && Array.isArray(newEnum);
+                                if (isEnum === true) {
                                     const deletedOrChangedValues = oldEnum.filter((value)=>!newEnum.includes(value));
                                     return /*#__PURE__*/ jsx(Box, {
                                         children: /*#__PURE__*/ jsxs(Typography, {
@@ -979,7 +1000,7 @@ const FormModal = ()=>{
                                                 actionType: actionType,
                                                 forTarget: forTarget,
                                                 kind: kind,
-                                                step: step,
+                                                step: step ?? undefined,
                                                 modalType: modalType,
                                                 attributeType: attributeType,
                                                 attributeName: attributeName,