@strapi/content-manager 5.13.0-beta.0 → 5.13.0-beta.1

package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.js

@@ -51,37 +51,23 @@ const StyledModalContent = styledComponents.styled(designSystem.Modal.Content)`
   height: 90%;
   max-height: 100%;
 `;
-const getFullPageUrl = (currentDocumentMeta)=>{
-    const isSingleType = currentDocumentMeta.collectionType === collections.SINGLE_TYPES;
-    const queryParams = currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : '';
-    return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}${isSingleType ? '' : '/' + currentDocumentMeta.documentId}${queryParams}`;
-};
 function reducer(state, action) {
     switch(action.type){
         case 'GO_TO_RELATION':
             if (state.hasUnsavedChanges && !action.payload.shouldBypassConfirmation) {
                 return {
                     ...state,
-                    confirmDialogIntent: action.payload.document,
-                    fieldToConnect: action.payload.fieldToConnect,
-                    fieldToConnectUID: action.payload.fieldToConnectUID
+                    confirmDialogIntent: action.payload.document
                 };
             }
-            const lastItemDocumentHistory = state.documentHistory.at(-1);
-            const hasToResetDocumentHistory = lastItemDocumentHistory && !lastItemDocumentHistory.documentId;
             return {
                 ...state,
-                // Reset document history if the last item has documentId undefined
-                documentHistory: hasToResetDocumentHistory ? [
-                    action.payload.document
-                ] : [
+                documentHistory: [
                     ...state.documentHistory,
                     action.payload.document
                 ],
                 confirmDialogIntent: null,
-                isModalOpen: true,
-                fieldToConnect: hasToResetDocumentHistory ? undefined : action.payload.fieldToConnect,
-                fieldToConnectUID: hasToResetDocumentHistory ? undefined : action.payload.fieldToConnectUID
+                isModalOpen: true
             };
         case 'GO_BACK':
             if (state.hasUnsavedChanges && !action.payload.shouldBypassConfirmation) {
@@ -109,21 +95,6 @@ function reducer(state, action) {
                 isModalOpen: false,
                 confirmDialogIntent: null
             };
-        case 'GO_TO_CREATED_RELATION':
-            return {
-                ...state,
-                // Reset document history if the last item has documentId undefined
-                documentHistory: state.documentHistory ? [
-                    ...state.documentHistory.slice(0, -1),
-                    action.payload.document
-                ] : [
-                    action.payload.document
-                ],
-                confirmDialogIntent: null,
-                isModalOpen: true,
-                fieldToConnect: undefined,
-                fieldToConnectUID: undefined
-            };
         case 'CANCEL_CONFIRM_DIALOG':
             return {
                 ...state,
@@ -153,17 +124,21 @@ function reducer(state, action) {
     }
 }
 const [RelationModalProvider, useRelationModal] = strapiAdmin.createContext('RelationModal');
-function isRenderProp(children) {
-    return typeof children === 'function';
-}
-const RootRelationRenderer = (props)=>{
-    const { children } = props;
+const getFullPageUrl = (currentDocumentMeta)=>{
+    const isSingleType = currentDocumentMeta.collectionType === collections.SINGLE_TYPES;
+    const queryParams = currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : '';
+    return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}${isSingleType ? '' : '/' + currentDocumentMeta.documentId}${queryParams}`;
+};
+/**
+ * Component responsible of rendering its children wrapped in a modal, form and context if needed
+ */ const RelationModalRenderer = ({ children, trigger, relation })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const navigate = reactRouterDom.useNavigate();
     const [state, dispatch] = React__namespace.useReducer(reducer, {
         documentHistory: [],
         confirmDialogIntent: null,
         isModalOpen: false,
-        hasUnsavedChanges: false,
-        fieldToConnect: undefined
+        hasUnsavedChanges: false
     });
     const rootDocument = useDocument.useDoc();
     const [{ query }] = strapiAdmin.useQueryParams();
@@ -178,9 +153,11 @@ const RootRelationRenderer = (props)=>{
     };
     const currentDocumentMeta = state.documentHistory.at(-1) ?? rootDocumentMeta;
     const currentDocument = useDocument.useDocument(currentDocumentMeta);
-    // TODO: check if we can remove the single type check
-    const isSingleType = currentDocumentMeta.collectionType === collections.SINGLE_TYPES;
-    const isCreating = !currentDocumentMeta.documentId && !isSingleType;
+    const parentContextValue = useRelationModal('RelationContextWrapper', (state)=>state, false);
+    // A parent relation is already rendering a modal. In this case simply render the trigger
+    if (parentContextValue) {
+        return trigger;
+    }
     /**
    * There is no parent relation, so the relation modal doesn't exist. Create it and set up all the
    * pieces that will be used by potential child relations: the context, header, form, and footer.
@@ -190,156 +167,113 @@ const RootRelationRenderer = (props)=>{
         rootDocumentMeta: rootDocumentMeta,
         currentDocumentMeta: currentDocumentMeta,
         currentDocument: currentDocument,
-        isCreating: isCreating,
-        children: /*#__PURE__*/ jsxRuntime.jsx(RelationModal, {
-            children: isRenderProp(children) ? children({
-                dispatch
-            }) : props.relation && /*#__PURE__*/ jsxRuntime.jsx(RelationModalTrigger, {
-                relation: props.relation,
-                children: children
-            })
-        })
-    });
-};
-const NestedRelationRenderer = (props)=>{
-    const { children } = props;
-    const dispatch = useRelationModal('NestedRelation', (state)=>state.dispatch);
-    return isRenderProp(children) ? children({
-        dispatch
-    }) : props.relation && /*#__PURE__*/ jsxRuntime.jsx(RelationModalTrigger, {
-        relation: props.relation,
-        children: children
-    }); /* This is the trigger that will be rendered in the parent relation */ 
-};
-/**
- * Component responsible for rendering its children wrapped in a modal, form and context if needed
- */ const RelationModalRenderer = (props)=>{
-    // We're in a nested relation if the relation modal context is not undefined
-    const isNested = useRelationModal('RelationContextWrapper', (state)=>state != undefined, false);
-    return isNested ? /*#__PURE__*/ jsxRuntime.jsx(NestedRelationRenderer, {
-        ...props
-    }) : /*#__PURE__*/ jsxRuntime.jsx(RootRelationRenderer, {
-        ...props
-    });
-};
-/* -------------------------------------------------------------------------------------------------
- * RelationModal
- * -----------------------------------------------------------------------------------------------*/ const generateCreateUrl = (currentDocumentMeta)=>{
-    return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}/create${currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : ''}`;
-};
-const RelationModal = ({ children })=>{
-    const { formatMessage } = reactIntl.useIntl();
-    const navigate = reactRouterDom.useNavigate();
-    const state = useRelationModal('RelationModalForm', (state)=>state.state);
-    const dispatch = useRelationModal('RelationModalForm', (state)=>state.dispatch);
-    const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
-    const currentDocument = useRelationModal('RelationModalForm', (state)=>state.currentDocument);
-    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
-        open: state.isModalOpen,
-        onOpenChange: (open)=>{
-            if (!open) {
-                dispatch({
-                    type: 'CLOSE_MODAL',
-                    payload: {
-                        shouldBypassConfirmation: false
-                    }
-                });
-            }
-        },
-        children: [
-            children,
-            /*#__PURE__*/ jsxRuntime.jsxs(StyledModalContent, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
-                        gap: 2,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            justifyContent: "space-between",
-                            alignItems: "center",
-                            width: "100%",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                    gap: 2,
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                            withTooltip: false,
-                                            label: formatMessage({
-                                                id: 'global.back',
-                                                defaultMessage: 'Back'
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
+            open: state.isModalOpen,
+            onOpenChange: (open)=>{
+                if (open) {
+                    dispatch({
+                        type: 'GO_TO_RELATION',
+                        payload: {
+                            document: relation,
+                            shouldBypassConfirmation: false
+                        }
+                    });
+                } else {
+                    dispatch({
+                        type: 'CLOSE_MODAL',
+                        payload: {
+                            shouldBypassConfirmation: false
+                        }
+                    });
+                }
+            },
+            children: [
+                trigger,
+                /*#__PURE__*/ jsxRuntime.jsxs(StyledModalContent, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
+                            gap: 2,
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                width: "100%",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                        gap: 2,
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                withTooltip: false,
+                                                label: formatMessage({
+                                                    id: 'global.back',
+                                                    defaultMessage: 'Back'
+                                                }),
+                                                variant: "ghost",
+                                                disabled: state.documentHistory.length < 2,
+                                                onClick: ()=>{
+                                                    dispatch({
+                                                        type: 'GO_BACK',
+                                                        payload: {
+                                                            shouldBypassConfirmation: false
+                                                        }
+                                                    });
+                                                },
+                                                marginRight: 1,
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowLeft, {})
                                             }),
-                                            variant: "ghost",
-                                            disabled: state.documentHistory.length < 2,
-                                            onClick: ()=>{
-                                                dispatch({
-                                                    type: 'GO_BACK',
-                                                    payload: {
-                                                        shouldBypassConfirmation: false
-                                                    }
-                                                });
-                                            },
-                                            marginRight: 1,
-                                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowLeft, {})
-                                        }),
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                            tag: "span",
-                                            fontWeight: 600,
-                                            children: isCreating ? formatMessage({
-                                                id: 'content-manager.relation.create',
-                                                defaultMessage: 'Create a relation'
-                                            }) : formatMessage({
-                                                id: 'content-manager.components.RelationInputModal.modal-title',
-                                                defaultMessage: 'Edit a relation'
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                tag: "span",
+                                                fontWeight: 600,
+                                                children: formatMessage({
+                                                    id: 'content-manager.components.RelationInputModal.modal-title',
+                                                    defaultMessage: 'Edit a relation'
+                                                })
                                             })
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                    onClick: ()=>{
-                                        dispatch({
-                                            type: 'GO_FULL_PAGE'
-                                        });
-                                        if (!state.hasUnsavedChanges) {
-                                            if (isCreating) {
-                                                navigate(generateCreateUrl(currentDocumentMeta));
-                                            } else {
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                        onClick: ()=>{
+                                            dispatch({
+                                                type: 'GO_FULL_PAGE'
+                                            });
+                                            if (!state.hasUnsavedChanges) {
                                                 navigate(getFullPageUrl(currentDocumentMeta));
                                             }
-                                        }
-                                    },
-                                    variant: "tertiary",
-                                    label: formatMessage({
-                                        id: 'content-manager.components.RelationInputModal.button-fullpage',
-                                        defaultMessage: 'Go to entry'
-                                    }),
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowsOut, {})
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
-                        children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
-                            method: isCreating ? 'POST' : 'PUT',
-                            initialValues: currentDocument.getInitialFormValues(isCreating),
-                            validate: (values, options)=>{
-                                const yupSchema = validation.createYupSchema(currentDocument.schema?.attributes, currentDocument.components, {
-                                    status: currentDocument.document?.status,
-                                    ...options
-                                });
-                                return yupSchema.validate(values, {
-                                    abortEarly: false
-                                });
-                            },
-                            children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalBody, {})
+                                        },
+                                        variant: "tertiary",
+                                        label: formatMessage({
+                                            id: 'content-manager.components.RelationInputModal.button-fullpage',
+                                            defaultMessage: 'Go to entry'
+                                        }),
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowsOut, {})
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
+                                method: "PUT",
+                                initialValues: currentDocument.getInitialFormValues(),
+                                validate: (values, options)=>{
+                                    const yupSchema = validation.createYupSchema(currentDocument.schema?.attributes, currentDocument.components, {
+                                        status: currentDocument.document?.status,
+                                        ...options
+                                    });
+                                    return yupSchema.validate(values, {
+                                        abortEarly: false
+                                    });
+                                },
+                                children: children
+                            })
                         })
-                    })
-                ]
-            })
-        ]
+                    ]
+                })
+            ]
+        })
     });
 };
 /**
  * All the main content (not header and footer) of the relation modal, plus the confirmation dialog.
- * Will be wrapped in a Modal.Body by the RelationModal component.
+ * Will be wrapped in a Modal.Body by the RelationModalRenderer.
  * Cannot be moved directly inside RelationModal because it needs access to the context via hooks.
  */ const RelationModalBody = ()=>{
     const navigate = reactRouterDom.useNavigate();
@@ -350,7 +284,6 @@ const RelationModal = ({ children })=>{
     const dispatch = useRelationModal('RelationModalForm', (state)=>state.dispatch);
     const rootDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.rootDocumentMeta);
     const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
-    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
     /**
    * One-way sync the modified state from the form to the modal state.
    * It is needed because we need to consume state from the form context in order to lift it up
@@ -392,11 +325,7 @@ const RelationModal = ({ children })=>{
         if (isRootDocumentUrl) {
             handleCloseModal(true);
         } else {
-            if (isCreating) {
-                navigate(generateCreateUrl(currentDocumentMeta));
-            } else {
-                navigate(fullPageUrl);
-            }
+            navigate(fullPageUrl);
         }
     };
     const handleConfirm = ()=>{
@@ -426,7 +355,7 @@ const RelationModal = ({ children })=>{
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(RelationModalForm, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(RelationEditView, {}),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
                 open: state.confirmDialogIntent != null,
                 children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
@@ -444,7 +373,7 @@ const RelationModal = ({ children })=>{
         ]
     });
 };
-const RelationModalTrigger = ({ children, relation })=>{
+const ModalTrigger = ({ children, relation })=>{
     const dispatch = useRelationModal('ModalTrigger', (state)=>state.dispatch);
     return /*#__PURE__*/ jsxRuntime.jsx(StyledTextButton, {
         onClick: ()=>{
@@ -459,6 +388,16 @@ const RelationModalTrigger = ({ children, relation })=>{
         children: children
     });
 };
+const RelationModal = /*#__PURE__*/ React__namespace.memo(({ relation, children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(RelationModalRenderer, {
+        relation: relation,
+        trigger: /*#__PURE__*/ jsxRuntime.jsx(ModalTrigger, {
+            relation: relation,
+            children: children
+        }),
+        children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalBody, {})
+    });
+});
 const StyledTextButton = styledComponents.styled(designSystem.TextButton)`
   max-width: 100%;
   & > span {
@@ -472,14 +411,13 @@ const StyledTextButton = styledComponents.styled(designSystem.TextButton)`
 /**
  * The mini edit view for a relation that is displayed inside a modal.
  * It's complete with its header, document actions and form layout.
- */ const RelationModalForm = ()=>{
+ */ const RelationEditView = ()=>{
     const { formatMessage } = reactIntl.useIntl();
-    const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
-    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
-    const currentDocument = useRelationModal('RelationModalForm', (state)=>state.currentDocument);
+    const currentDocumentMeta = useRelationModal('RelationModalBody', (state)=>state.currentDocumentMeta);
+    const currentDocument = useRelationModal('RelationModalBody', (state)=>state.currentDocument);
     const documentLayoutResponse = useDocumentLayout.useDocumentLayout(currentDocumentMeta.model);
-    const plugins = strapiAdmin.useStrapiApp('RelationModalForm', (state)=>state.plugins);
-    const initialValues = isCreating ? currentDocument.getInitialFormValues(isCreating) : currentDocument.getInitialFormValues();
+    const plugins = strapiAdmin.useStrapiApp('RelationModalBody', (state)=>state.plugins);
+    const initialValues = currentDocument.getInitialFormValues();
     const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(plugin.PERMISSIONS.map((action)=>({
             action,
             subject: currentDocumentMeta.model
@@ -494,7 +432,7 @@ const StyledTextButton = styledComponents.styled(designSystem.TextButton)`
             })
         });
     }
-    if (error || !currentDocumentMeta.model || documentLayoutResponse.error || !isCreating && !currentDocument.document || !isCreating && !currentDocument.meta || !currentDocument.schema || !initialValues) {
+    if (error || !currentDocumentMeta.model || documentLayoutResponse.error || !currentDocument.document || !currentDocument.meta || !currentDocument.schema || !initialValues) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
             alignItems: "center",
             height: "100%",
@@ -603,7 +541,7 @@ const StyledTextButton = styledComponents.styled(designSystem.TextButton)`
     });
 };
 
-exports.RelationModalRenderer = RelationModalRenderer;
+exports.RelationModal = RelationModal;
 exports.getCollectionType = getCollectionType;
 exports.reducer = reducer;
 exports.useRelationModal = useRelationModal;