@strapi/content-type-builder 5.55.1 → 5.57.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,11 +89,20 @@ 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);
+    // 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);
+    };
     const checkFieldNameChanges = ()=>{
         // Only check when editing an attribute
         if (actionType !== 'edit' || modalType !== 'attribute') {
@@ -128,7 +138,7 @@ const FormModal = ()=>{
         return false;
     };
     React.useEffect(()=>{
-        if (isOpen) {
+        if (isOpen && modalType) {
             const collectionTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations);
             if (actionType === 'edit' && modalType === 'attribute' && forTarget === 'contentType') {
                 trackUsage('willEditFieldOfContentType');
@@ -384,9 +394,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 +554,9 @@ const FormModal = ()=>{
                     },
                     forTarget,
                     targetUid,
-                    name: toStringValue(initialData.name)
+                    name: toStringValue(initialData.name),
+                    recordRename,
+                    declineRename
                 };
                 if (actionType === 'edit') {
                     editCustomFieldAttribute(customFieldAttributeUpdate);
@@ -536,7 +587,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 +619,11 @@ const FormModal = ()=>{
                             attributeToSet: modifiedData,
                             forTarget,
                             targetUid,
-                            name: toStringValue(initialData.name)
+                            name: toStringValue(initialData.name),
+                            recordRename,
+                            declineRename,
+                            recordTargetRename,
+                            declineTargetRename
                         });
                     }
                     if (shouldContinue) {
@@ -622,7 +679,9 @@ const FormModal = ()=>{
                         attributeToSet: attributeData,
                         forTarget,
                         targetUid,
-                        name: toStringValue(initialData.name)
+                        name: toStringValue(initialData.name),
+                        recordRename,
+                        declineRename
                     });
                 }
                 if (shouldContinue) {
@@ -743,6 +802,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
@@ -755,7 +842,7 @@ const FormModal = ()=>{
             setShowWarningDialog(true);
             return;
         }
-        await submitForm(e, shouldContinue);
+        await continueSubmit(e, shouldContinue);
     };
     const handleConfirmClose = ()=>{
         // eslint-disable-next-line no-alert
@@ -919,7 +1006,7 @@ const FormModal = ()=>{
                                     const { e, shouldContinue } = pendingSubmit;
                                     setShowWarningDialog(false);
                                     setPendingSubmit(null);
-                                    submitForm(e, shouldContinue);
+                                    continueSubmit(e, shouldContinue);
                                 }
                             },
                             onCancel: ()=>{
@@ -984,6 +1071,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,