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

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

@@ -51,23 +51,37 @@ 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
+                    confirmDialogIntent: action.payload.document,
+                    fieldToConnect: action.payload.fieldToConnect,
+                    fieldToConnectUID: action.payload.fieldToConnectUID
                 };
             }
+            const lastItemDocumentHistory = state.documentHistory.at(-1);
+            const hasToResetDocumentHistory = lastItemDocumentHistory && !lastItemDocumentHistory.documentId;
             return {
                 ...state,
-                documentHistory: [
+                // Reset document history if the last item has documentId undefined
+                documentHistory: hasToResetDocumentHistory ? [
+                    action.payload.document
+                ] : [
                     ...state.documentHistory,
                     action.payload.document
                 ],
                 confirmDialogIntent: null,
-                isModalOpen: true
+                isModalOpen: true,
+                fieldToConnect: hasToResetDocumentHistory ? undefined : action.payload.fieldToConnect,
+                fieldToConnectUID: hasToResetDocumentHistory ? undefined : action.payload.fieldToConnectUID
             };
         case 'GO_BACK':
             if (state.hasUnsavedChanges && !action.payload.shouldBypassConfirmation) {
@@ -95,6 +109,21 @@ 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,
@@ -124,21 +153,17 @@ function reducer(state, action) {
     }
 }
 const [RelationModalProvider, useRelationModal] = strapiAdmin.createContext('RelationModal');
-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();
+function isRenderProp(children) {
+    return typeof children === 'function';
+}
+const RootRelationRenderer = (props)=>{
+    const { children } = props;
     const [state, dispatch] = React__namespace.useReducer(reducer, {
         documentHistory: [],
         confirmDialogIntent: null,
         isModalOpen: false,
-        hasUnsavedChanges: false
+        hasUnsavedChanges: false,
+        fieldToConnect: undefined
     });
     const rootDocument = useDocument.useDoc();
     const [{ query }] = strapiAdmin.useQueryParams();
@@ -153,11 +178,9 @@ const getFullPageUrl = (currentDocumentMeta)=>{
     };
     const currentDocumentMeta = state.documentHistory.at(-1) ?? rootDocumentMeta;
     const currentDocument = useDocument.useDocument(currentDocumentMeta);
-    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;
-    }
+    // TODO: check if we can remove the single type check
+    const isSingleType = currentDocumentMeta.collectionType === collections.SINGLE_TYPES;
+    const isCreating = !currentDocumentMeta.documentId && !isSingleType;
     /**
    * 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.
@@ -167,113 +190,156 @@ const getFullPageUrl = (currentDocumentMeta)=>{
         rootDocumentMeta: rootDocumentMeta,
         currentDocumentMeta: currentDocumentMeta,
         currentDocument: currentDocument,
-        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, {})
+        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'
                                             }),
-                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                tag: "span",
-                                                fontWeight: 600,
-                                                children: formatMessage({
-                                                    id: 'content-manager.components.RelationInputModal.modal-title',
-                                                    defaultMessage: 'Edit a relation'
-                                                })
+                                            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.IconButton, {
-                                        onClick: ()=>{
-                                            dispatch({
-                                                type: 'GO_FULL_PAGE'
-                                            });
-                                            if (!state.hasUnsavedChanges) {
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    onClick: ()=>{
+                                        dispatch({
+                                            type: 'GO_FULL_PAGE'
+                                        });
+                                        if (!state.hasUnsavedChanges) {
+                                            if (isCreating) {
+                                                navigate(generateCreateUrl(currentDocumentMeta));
+                                            } else {
                                                 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: "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
-                            })
+                                        }
+                                    },
+                                    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, {})
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
 /**
  * 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 RelationModalRenderer.
+ * Will be wrapped in a Modal.Body by the RelationModal component.
  * Cannot be moved directly inside RelationModal because it needs access to the context via hooks.
  */ const RelationModalBody = ()=>{
     const navigate = reactRouterDom.useNavigate();
@@ -284,6 +350,7 @@ const getFullPageUrl = (currentDocumentMeta)=>{
     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
@@ -325,7 +392,11 @@ const getFullPageUrl = (currentDocumentMeta)=>{
         if (isRootDocumentUrl) {
             handleCloseModal(true);
         } else {
-            navigate(fullPageUrl);
+            if (isCreating) {
+                navigate(generateCreateUrl(currentDocumentMeta));
+            } else {
+                navigate(fullPageUrl);
+            }
         }
     };
     const handleConfirm = ()=>{
@@ -355,7 +426,7 @@ const getFullPageUrl = (currentDocumentMeta)=>{
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(RelationEditView, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(RelationModalForm, {}),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
                 open: state.confirmDialogIntent != null,
                 children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
@@ -373,7 +444,7 @@ const getFullPageUrl = (currentDocumentMeta)=>{
         ]
     });
 };
-const ModalTrigger = ({ children, relation })=>{
+const RelationModalTrigger = ({ children, relation })=>{
     const dispatch = useRelationModal('ModalTrigger', (state)=>state.dispatch);
     return /*#__PURE__*/ jsxRuntime.jsx(StyledTextButton, {
         onClick: ()=>{
@@ -388,16 +459,6 @@ const ModalTrigger = ({ 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 {
@@ -411,13 +472,14 @@ 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 RelationEditView = ()=>{
+ */ const RelationModalForm = ()=>{
     const { formatMessage } = reactIntl.useIntl();
-    const currentDocumentMeta = useRelationModal('RelationModalBody', (state)=>state.currentDocumentMeta);
-    const currentDocument = useRelationModal('RelationModalBody', (state)=>state.currentDocument);
+    const currentDocumentMeta = useRelationModal('RelationModalForm', (state)=>state.currentDocumentMeta);
+    const isCreating = useRelationModal('RelationModalForm', (state)=>state.isCreating);
+    const currentDocument = useRelationModal('RelationModalForm', (state)=>state.currentDocument);
     const documentLayoutResponse = useDocumentLayout.useDocumentLayout(currentDocumentMeta.model);
-    const plugins = strapiAdmin.useStrapiApp('RelationModalBody', (state)=>state.plugins);
-    const initialValues = currentDocument.getInitialFormValues();
+    const plugins = strapiAdmin.useStrapiApp('RelationModalForm', (state)=>state.plugins);
+    const initialValues = isCreating ? currentDocument.getInitialFormValues(isCreating) : currentDocument.getInitialFormValues();
     const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(plugin.PERMISSIONS.map((action)=>({
             action,
             subject: currentDocumentMeta.model
@@ -432,7 +494,7 @@ const StyledTextButton = styledComponents.styled(designSystem.TextButton)`
             })
         });
     }
-    if (error || !currentDocumentMeta.model || documentLayoutResponse.error || !currentDocument.document || !currentDocument.meta || !currentDocument.schema || !initialValues) {
+    if (error || !currentDocumentMeta.model || documentLayoutResponse.error || !isCreating && !currentDocument.document || !isCreating && !currentDocument.meta || !currentDocument.schema || !initialValues) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
             alignItems: "center",
             height: "100%",
@@ -541,7 +603,7 @@ const StyledTextButton = styledComponents.styled(designSystem.TextButton)`
     });
 };
 
-exports.RelationModal = RelationModal;
+exports.RelationModalRenderer = RelationModalRenderer;
 exports.getCollectionType = getCollectionType;
 exports.reducer = reducer;
 exports.useRelationModal = useRelationModal;