@strapi/content-type-builder 5.55.1 → 5.57.0

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

@@ -54,6 +54,7 @@ var canEditContentType = require('./utils/canEditContentType.js');
 var createUid = require('./utils/createUid.js');
 var getAttributesToDisplay = require('./utils/getAttributesToDisplay.js');
 var getFormInputNames = require('./utils/getFormInputNames.js');
+var getRenameStorageChange = require('./utils/getRenameStorageChange.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -116,11 +117,20 @@ const FormModal = ()=>{
     const ctbFormsAPI = ctbPlugin?.apis.forms;
     const inputsFromPlugins = ctbFormsAPI.components.inputs;
     const dispatchGuidedTour = strapiAdmin.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.useDataManager();
+    const { addAttribute, editAttribute, addCustomFieldAttribute, addCreatedComponentToDynamicZone, changeDynamicZoneComponents, contentTypes, components, createSchema, createComponentSchema, deleteComponent, deleteContentType, editCustomFieldAttribute, updateSchema, nestedComponents, sortedContentTypesList, updateComponentSchema, updateComponentUid, reservedNames, confirmAttributeRenameMigration, attributeRenameMigrationMode } = useDataManager.useDataManager();
     const { componentToCreate, formErrors, initialData, isCreatingComponentWhileAddingAField, modifiedData } = reducerState;
     const type = forTarget === 'component' ? components[targetUid] : contentTypes[targetUid];
     const [showWarningDialog, setShowWarningDialog] = React.useState(false);
     const [pendingSubmit, setPendingSubmit] = React.useState(null);
+    // 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] = React.useState(null);
+    const checkRenameStorageChange = ()=>{
+        if (actionType !== 'edit' || modalType !== 'attribute' && modalType !== 'customField') {
+            return null;
+        }
+        return getRenameStorageChange.getRenameStorageChange(initialData, modifiedData, attributeRenameMigrationMode);
+    };
     const checkFieldNameChanges = ()=>{
         // Only check when editing an attribute
         if (actionType !== 'edit' || modalType !== 'attribute') {
@@ -156,7 +166,7 @@ const FormModal = ()=>{
         return false;
     };
     React__namespace.useEffect(()=>{
-        if (isOpen) {
+        if (isOpen && modalType) {
             const collectionTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations.isAllowedContentTypesForRelations);
             if (actionType === 'edit' && modalType === 'attribute' && forTarget === 'contentType') {
                 trackUsage('willEditFieldOfContentType');
@@ -412,9 +422,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(reducer.actions.setErrors({
                 errors: {}
             }));
@@ -533,7 +582,9 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    name: toStringValue(initialData.name)
+                    name: toStringValue(initialData.name),
+                    recordRename,
+                    declineRename
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -564,7 +615,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
@@ -594,7 +647,11 @@ const FormModal = ()=>{
                             attributeToSet: modifiedData,
                             forTarget,
                             targetUid,
-                            name: toStringValue(initialData.name)
+                            name: toStringValue(initialData.name),
+                            recordRename,
+                            declineRename,
+                            recordTargetRename,
+                            declineTargetRename
                         });
                     }
                     if (shouldContinue) {
@@ -650,7 +707,9 @@ const FormModal = ()=>{
                         attributeToSet: attributeData,
                         forTarget,
                         targetUid,
-                        name: toStringValue(initialData.name)
+                        name: toStringValue(initialData.name),
+                        recordRename,
+                        declineRename
                     });
                 }
                 if (shouldContinue) {
@@ -771,6 +830,34 @@ 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
@@ -783,7 +870,7 @@ const FormModal = ()=>{
             setShowWarningDialog(true);
             return;
         }
-        await submitForm(e, shouldContinue);
+        await continueSubmit(e, shouldContinue);
     };
     const handleConfirmClose = ()=>{
         // eslint-disable-next-line no-alert
@@ -947,7 +1034,7 @@ const FormModal = ()=>{
                                     const { e, shouldContinue } = pendingSubmit;
                                     setShowWarningDialog(false);
                                     setPendingSubmit(null);
-                                    submitForm(e, shouldContinue);
+                                    continueSubmit(e, shouldContinue);
                                 }
                             },
                             onCancel: ()=>{
@@ -1012,6 +1099,53 @@ const FormModal = ()=>{
                         })
                     ]
                 }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+                    open: storageChangeWarning !== null,
+                    onOpenChange: (open)=>!open && cancelStorageChange(),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
+                        title: formatMessage({
+                            id: getTrad.getTrad('form.attribute.rename-type-change-warning.title'),
+                            defaultMessage: 'Existing data will be lost'
+                        }),
+                        onCancel: cancelStorageChange,
+                        endAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Action, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                fullWidth: true,
+                                variant: "danger",
+                                onClick: confirmStorageChange,
+                                children: formatMessage({
+                                    id: getTrad.getTrad('form.attribute.rename-type-change-warning.confirm'),
+                                    defaultMessage: 'Continue'
+                                })
+                            })
+                        }),
+                        children: storageChangeWarning && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                children: formatMessage({
+                                    id: getTrad.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__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.oldName
+                                    }),
+                                    newName: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.newName
+                                    }),
+                                    oldType: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.oldType
+                                    }),
+                                    newType: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                        fontWeight: "bold",
+                                        children: storageChangeWarning.newType
+                                    })
+                                })
+                            })
+                        })
+                    })
+                }),
                 /*#__PURE__*/ jsxRuntime.jsx(FormModalHeader.FormModalHeader, {
                     actionType: actionType,
                     attributeName: attributeName,