@strapi/content-type-builder 5.56.0 → 5.58.0

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState } from 'react';
 import { useStrapiApp, useNotification, useGuidedTour, ConfirmDialog, GUIDED_TOUR_REQUIRED_ACTIONS } from '@strapi/admin/strapi-admin';
-import { Modal, Dialog, Box, Typography, Tabs, Flex, Divider, Button } from '@strapi/design-system';
+import { Modal, Dialog, Box, Typography, Button, Tabs, Flex, Divider } from '@strapi/design-system';
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isEqual from 'lodash/isEqual';
@@ -53,6 +53,7 @@ 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';
+import { getRenameStorageChange } from './utils/getRenameStorageChange.mjs';
 
 const FormComponent = styled.form`
   overflow: auto;
@@ -88,44 +89,48 @@ const FormModal = ()=>{
     const ctbFormsAPI = ctbPlugin?.apis.forms;
     const inputsFromPlugins = ctbFormsAPI.components.inputs;
     const dispatchGuidedTour = useGuidedTour('FormModal', (s)=>s.dispatch);
-    const { addAttribute, editAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, changeDynamicZoneComponents, contentTypes, components, createSchema, createComponentSchema, deleteComponent, deleteContentType, editCustomFieldAttribute, updateSchema, nestedComponents, sortedContentTypesList, updateComponentSchema, updateComponentUid, reservedNames } = useDataManager();
+    const { addAttribute, editAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, changeDynamicZoneComponents, contentTypes, components, createSchema, createComponentSchema, deleteComponent, deleteContentType, editCustomFieldAttribute, updateSchema, nestedComponents, sortedContentTypesList, updateComponentSchema, updateComponentUid, reservedNames, confirmAttributeRenameMigration, attributeRenameMigrationMode } = useDataManager();
     const { componentToCreate, formErrors, initialData, isCreatingComponentWhileAddingAField, modifiedData } = reducerState;
     const type = forTarget === 'component' ? components[targetUid] : contentTypes[targetUid];
     const [showWarningDialog, setShowWarningDialog] = useState(false);
     const [pendingSubmit, setPendingSubmit] = useState(null);
-    const checkFieldNameChanges = ()=>{
-        // Only check when editing an attribute
+    // Set when the edit renames an existing field *and* changes its storage: the
+    // data cannot be preserved, so the user confirms before the field is recreated.
+    const [storageChangeWarning, setStorageChangeWarning] = useState(null);
+    const checkRenameStorageChange = ()=>{
+        if (actionType !== 'edit' || modalType !== 'attribute' && modalType !== 'customField') {
+            return null;
+        }
+        return getRenameStorageChange(initialData, modifiedData, attributeRenameMigrationMode);
+    };
+    /**
+   * Fields whose visibility condition depends on this field and references an
+   * enum value that this edit removes or changes. Renames are followed
+   * automatically, so only an enum value change can break a condition.
+   */ const getConditionsBrokenByEnumChange = ()=>{
         if (actionType !== 'edit' || modalType !== 'attribute') {
             return false;
         }
-        const oldName = initialData.name;
         const oldEnum = initialData.enum;
         const newEnum = modifiedData.enum;
-        // Get all attributes from the content type schema
+        if (!Array.isArray(oldEnum) || !Array.isArray(newEnum)) {
+            return false;
+        }
+        const removedValues = oldEnum.filter((value)=>!newEnum.includes(value));
+        if (removedValues.length === 0) {
+            return false;
+        }
+        const fieldName = initialData.name;
         const contentTypeAttributes = type?.attributes ?? [];
-        // Find all fields that reference this field in their conditions
-        const referencedFields = contentTypeAttributes.filter((attr)=>{
+        const brokenFields = contentTypeAttributes.filter((attr)=>{
             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 it's an enum field, also check if the value is being deleted/changed
-            if (oldEnum !== undefined && newEnum !== undefined) {
-                const deletedOrChangedValues = oldEnum.filter((oldValue)=>!newEnum.includes(oldValue));
-                return typeof value === 'string' && deletedOrChangedValues.includes(value);
-            }
-            return true;
+            return fieldVar.var === fieldName && typeof value === 'string' && removedValues.includes(value);
         });
-        // If any fields reference this field, return them
-        if (referencedFields.length > 0) {
-            return referencedFields;
-        }
-        return false;
+        return brokenFields.length > 0 ? brokenFields : false;
     };
     React.useEffect(()=>{
         if (isOpen && modalType) {
@@ -384,9 +389,48 @@ const FormModal = ()=>{
         dispatch,
         formErrors
     ]);
-    const submitForm = async (e, shouldContinue = isCreating)=>{
+    const submitForm = async (e, shouldContinue = isCreating, // The user already confirmed the field will be recreated empty (rename +
+    // storage change): there is no data to preserve, so don't ask about it.
+    { skipRenameMigration = false } = {})=>{
         try {
             await checkFormValidity();
+            let recordRename = !skipRenameMigration;
+            let declineRename = false;
+            if (!skipRenameMigration && actionType === 'edit' && (isCreatingAttribute || isCreatingCustomFieldAttribute) && // A field that was never saved has no data to preserve (and
+            // `recordRename` skips it), so there is nothing to ask about.
+            initialData.status !== 'NEW' && toStringValue(initialData.name) !== toStringValue(modifiedData.name)) {
+                const decision = await confirmAttributeRenameMigration({
+                    forTarget,
+                    uid: targetUid,
+                    oldName: toStringValue(initialData.name),
+                    newName: toStringValue(modifiedData.name)
+                });
+                if (decision === null) {
+                    return;
+                }
+                recordRename = decision;
+                declineRename = !decision;
+            }
+            // Renaming the other side of a relation from this form renames a field
+            // of the target type, which may own the join table: ask for that one
+            // too, after the field's own prompt.
+            const oldTargetAttribute = toStringValue(initialData.targetAttribute);
+            const newTargetAttribute = toStringValue(modifiedData.targetAttribute);
+            let recordTargetRename = !skipRenameMigration;
+            let declineTargetRename = false;
+            if (!skipRenameMigration && actionType === 'edit' && isCreatingAttribute && attributeType === 'relation' && oldTargetAttribute !== '' && newTargetAttribute !== '' && oldTargetAttribute !== newTargetAttribute && toStringValue(initialData.target) === toStringValue(modifiedData.target)) {
+                const decision = await confirmAttributeRenameMigration({
+                    forTarget: 'contentType',
+                    uid: toStringValue(modifiedData.target),
+                    oldName: oldTargetAttribute,
+                    newName: newTargetAttribute
+                });
+                if (decision === null) {
+                    return;
+                }
+                recordTargetRename = decision;
+                declineTargetRename = !decision;
+            }
             dispatch(actions.setErrors({
                 errors: {}
             }));
@@ -505,7 +549,9 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    name: toStringValue(initialData.name)
+                    name: toStringValue(initialData.name),
+                    recordRename,
+                    declineRename
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -536,7 +582,9 @@ const FormModal = ()=>{
                             attributeToSet: modifiedData,
                             forTarget,
                             targetUid,
-                            name: toStringValue(initialData.name)
+                            name: toStringValue(initialData.name),
+                            recordRename,
+                            declineRename
                         });
                     }
                     // Adding a component to a dynamiczone is not the same logic as creating a simple field
@@ -566,7 +614,11 @@ const FormModal = ()=>{
                             attributeToSet: modifiedData,
                             forTarget,
                             targetUid,
-                            name: toStringValue(initialData.name)
+                            name: toStringValue(initialData.name),
+                            recordRename,
+                            declineRename,
+                            recordTargetRename,
+                            declineTargetRename
                         });
                     }
                     if (shouldContinue) {
@@ -622,7 +674,9 @@ const FormModal = ()=>{
                         attributeToSet: attributeData,
                         forTarget,
                         targetUid,
-                        name: toStringValue(initialData.name)
+                        name: toStringValue(initialData.name),
+                        recordRename,
+                        declineRename
                     });
                 }
                 if (shouldContinue) {
@@ -743,11 +797,39 @@ const FormModal = ()=>{
             }
         }
     };
+    // Runs after the condition warning (if any): warn when the rename also
+    // changes the field's storage, otherwise submit.
+    const continueSubmit = async (e, shouldContinue)=>{
+        const storageChange = checkRenameStorageChange();
+        if (storageChange) {
+            setPendingSubmit({
+                e,
+                shouldContinue
+            });
+            setStorageChangeWarning(storageChange);
+            return;
+        }
+        await submitForm(e, shouldContinue);
+    };
+    const cancelStorageChange = ()=>{
+        setStorageChangeWarning(null);
+        setPendingSubmit(null);
+    };
+    const confirmStorageChange = ()=>{
+        if (pendingSubmit === null) {
+            return;
+        }
+        const { e, shouldContinue } = pendingSubmit;
+        cancelStorageChange();
+        submitForm(e, shouldContinue, {
+            skipRenameMigration: true
+        });
+    };
     const handleSubmit = async (e, shouldContinue = isCreating)=>{
         e.preventDefault();
-        // Check for field name changes when clicking Finish
-        const referencedFields = checkFieldNameChanges();
-        if (referencedFields) {
+        // Check for conditions broken by an enum value change when clicking Finish
+        const brokenFields = getConditionsBrokenByEnumChange();
+        if (brokenFields) {
             setPendingSubmit({
                 e,
                 shouldContinue
@@ -755,7 +837,7 @@ const FormModal = ()=>{
             setShowWarningDialog(true);
             return;
         }
-        await submitForm(e, shouldContinue);
+        await continueSubmit(e, shouldContinue);
     };
     const handleConfirmClose = ()=>{
         // eslint-disable-next-line no-alert
@@ -919,7 +1001,7 @@ const FormModal = ()=>{
                                     const { e, shouldContinue } = pendingSubmit;
                                     setShowWarningDialog(false);
                                     setPendingSubmit(null);
-                                    submitForm(e, shouldContinue);
+                                    continueSubmit(e, shouldContinue);
                                 }
                             },
                             onCancel: ()=>{
@@ -927,46 +1009,17 @@ const FormModal = ()=>{
                                 setPendingSubmit(null);
                             },
                             children: (()=>{
-                                const referencedFields = checkFieldNameChanges();
-                                if (referencedFields === false) return null;
-                                const fieldNames = referencedFields.map((field)=>field.name).join(', ');
-                                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, {
-                                            children: [
-                                                formatMessage({
-                                                    id: 'form.attribute.condition.enum-change-warning',
-                                                    defaultMessage: 'The following fields have conditions that depend on this field: '
-                                                }),
-                                                /*#__PURE__*/ jsx(Typography, {
-                                                    fontWeight: "bold",
-                                                    children: fieldNames
-                                                }),
-                                                formatMessage({
-                                                    id: 'form.attribute.condition.enum-change-warning-values',
-                                                    defaultMessage: '. Changing or removing the enum values '
-                                                }),
-                                                /*#__PURE__*/ jsx(Typography, {
-                                                    fontWeight: "bold",
-                                                    children: deletedOrChangedValues.join(', ')
-                                                }),
-                                                formatMessage({
-                                                    id: 'form.attribute.condition.enum-change-warning-end',
-                                                    defaultMessage: ' will break these conditions. Do you want to proceed?'
-                                                })
-                                            ]
-                                        })
-                                    });
-                                }
+                                const brokenFields = getConditionsBrokenByEnumChange();
+                                if (brokenFields === false) return null;
+                                const fieldNames = brokenFields.map((field)=>field.name).join(', ');
+                                const oldEnum = initialData.enum ?? [];
+                                const newEnum = modifiedData.enum ?? [];
+                                const deletedOrChangedValues = oldEnum.filter((value)=>!newEnum.includes(value));
                                 return /*#__PURE__*/ jsx(Box, {
                                     children: /*#__PURE__*/ jsxs(Typography, {
                                         children: [
                                             formatMessage({
-                                                id: 'form.attribute.condition.field-change-warning',
+                                                id: 'form.attribute.condition.enum-change-warning',
                                                 defaultMessage: 'The following fields have conditions that depend on this field: '
                                             }),
                                             /*#__PURE__*/ jsx(Typography, {
@@ -974,8 +1027,16 @@ const FormModal = ()=>{
                                                 children: fieldNames
                                             }),
                                             formatMessage({
-                                                id: 'form.attribute.condition.field-change-warning-end',
-                                                defaultMessage: '. Renaming it will break these conditions. Do you want to proceed?'
+                                                id: 'form.attribute.condition.enum-change-warning-values',
+                                                defaultMessage: '. Changing or removing the enum values '
+                                            }),
+                                            /*#__PURE__*/ jsx(Typography, {
+                                                fontWeight: "bold",
+                                                children: deletedOrChangedValues.join(', ')
+                                            }),
+                                            formatMessage({
+                                                id: 'form.attribute.condition.enum-change-warning-end',
+                                                defaultMessage: ' will break these conditions. Do you want to proceed?'
                                             })
                                         ]
                                     })
@@ -984,6 +1045,53 @@ const FormModal = ()=>{
                         })
                     ]
                 }),
+                /*#__PURE__*/ jsx(Dialog.Root, {
+                    open: storageChangeWarning !== null,
+                    onOpenChange: (open)=>!open && cancelStorageChange(),
+                    children: /*#__PURE__*/ jsx(ConfirmDialog, {
+                        title: formatMessage({
+                            id: getTrad('form.attribute.rename-type-change-warning.title'),
+                            defaultMessage: 'Existing data will be lost'
+                        }),
+                        onCancel: cancelStorageChange,
+                        endAction: /*#__PURE__*/ jsx(Dialog.Action, {
+                            children: /*#__PURE__*/ jsx(Button, {
+                                fullWidth: true,
+                                variant: "danger",
+                                onClick: confirmStorageChange,
+                                children: formatMessage({
+                                    id: getTrad('form.attribute.rename-type-change-warning.confirm'),
+                                    defaultMessage: 'Continue'
+                                })
+                            })
+                        }),
+                        children: storageChangeWarning && /*#__PURE__*/ jsx(Box, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                children: formatMessage({
+                                    id: getTrad('form.attribute.rename-type-change-warning.body'),
+                                    defaultMessage: 'You are renaming {oldName} to {newName} and changing it from {oldType} to {newType}. Strapi cannot preserve the existing data of this field when both change at once. The field will be recreated empty when you save.'
+                                }, {
+                                    oldName: /*#__PURE__*/ jsx(Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.oldName
+                                    }),
+                                    newName: /*#__PURE__*/ jsx(Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.newName
+                                    }),
+                                    oldType: /*#__PURE__*/ jsx(Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.oldType
+                                    }),
+                                    newType: /*#__PURE__*/ jsx(Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.newType
+                                    })
+                                })
+                            })
+                        })
+                    })
+                }),
                 /*#__PURE__*/ jsx(FormModalHeader, {
                     actionType: actionType,
                     attributeName: attributeName,