@strapi/content-manager 0.0.0-experimental.c23f51fc41b3ef5de081f427d07e87af93cdcb2c → 0.0.0-experimental.c2b08ee20b017fc174cccf35c56c39438b0237b0

package/dist/admin/pages/EditView/components/DocumentActions.js

@@ -6,18 +6,24 @@ var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var mapValues = require('lodash/fp/mapValues');
+var get = require('lodash/get');
+var merge = require('lodash/merge');
+var set = require('lodash/set');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
-var styledComponents = require('styled-components');
 var attributes = require('../../../constants/attributes.js');
 var collections = require('../../../constants/collections.js');
 var DocumentRBAC = require('../../../features/DocumentRBAC.js');
 var useDocument = require('../../../hooks/useDocument.js');
 var useDocumentActions = require('../../../hooks/useDocumentActions.js');
+var useDocumentContext = require('../../../hooks/useDocumentContext.js');
+var Preview = require('../../../preview/pages/Preview.js');
 var router = require('../../../router.js');
 var documents = require('../../../services/documents.js');
 var api = require('../../../utils/api.js');
 var translations = require('../../../utils/translations.js');
+var data = require('../utils/data.js');
+var RelationModal = require('./FormInputs/Relations/RelationModal.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -38,6 +44,38 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
+const connectRelationToParent = (parentDataToUpdate, fieldToConnect, data, fieldToConnectUID)=>{
+    /*
+   * Check if the fieldToConnect is already present in the parentDataToUpdate.
+   * This happens in particular when in the parentDocument you have created
+   * a new component without saving.
+   */ const isFieldPresent = !!get(parentDataToUpdate, fieldToConnect);
+    const fieldToConnectPath = isFieldPresent ? fieldToConnect : fieldToConnect.split('.').slice(0, -1).join('.');
+    const fieldToConnectValue = isFieldPresent ? {
+        connect: [
+            {
+                id: data.documentId,
+                documentId: data.documentId,
+                locale: data.locale
+            }
+        ]
+    } : {
+        [fieldToConnect.split('.').pop()]: {
+            connect: [
+                {
+                    id: data.documentId,
+                    documentId: data.documentId,
+                    locale: data.locale
+                }
+            ],
+            disconnect: []
+        },
+        // In case the object was not present you need to pass the componentUID of the parent document
+        __component: fieldToConnectUID
+    };
+    const objectToConnect = set({}, fieldToConnectPath, fieldToConnectValue);
+    return merge(parentDataToUpdate, objectToConnect);
+};
 const DocumentActions = ({ actions })=>{
     const { formatMessage } = reactIntl.useIntl();
     const [primaryAction, secondaryAction, ...restActions] = actions.filter((action)=>{
@@ -58,23 +96,33 @@ const DocumentActions = ({ actions })=>{
         alignItems: "stretch",
         width: "100%",
         children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                gap: 2,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
-                        ...primaryAction,
-                        variant: primaryAction.variant || 'default'
-                    }),
-                    restActions.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(DocumentActionsMenu, {
-                        actions: restActions,
-                        label: formatMessage({
-                            id: 'content-manager.containers.edit.panels.default.more-actions',
-                            defaultMessage: 'More document actions'
-                        })
-                    }) : null
-                ]
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.unstable_tours.contentManager.Publish, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    gap: 2,
+                    children: [
+                        primaryAction.label === 'Publish' ? /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
+                            ...primaryAction,
+                            variant: primaryAction.variant || 'default'
+                        }) : /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
+                            ...primaryAction,
+                            variant: primaryAction.variant || 'default'
+                        }),
+                        restActions.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(DocumentActionsMenu, {
+                            actions: restActions,
+                            label: formatMessage({
+                                id: 'content-manager.containers.edit.panels.default.more-actions',
+                                defaultMessage: 'More document actions'
+                            })
+                        }) : null
+                    ]
+                })
             }),
-            secondaryAction ? /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
+            secondaryAction ? secondaryAction.label === 'Publish' ? /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.unstable_tours.contentManager.Publish, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
+                    ...secondaryAction,
+                    variant: secondaryAction.variant || 'secondary'
+                })
+            }) : /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
                 ...secondaryAction,
                 variant: secondaryAction.variant || 'secondary'
             }) : null
@@ -136,11 +184,6 @@ const DocumentActionButton = (action)=>{
         ]
     });
 };
-const MenuItem = styledComponents.styled(designSystem.Menu.Item)`
-  &:hover {
-    background: ${({ theme, isVariantDanger, isDisabled })=>isVariantDanger && !isDisabled ? theme.colors.danger100 : 'neutral'};
-  }
-`;
 const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })=>{
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [dialogId, setDialogId] = React__namespace.useState(null);
@@ -202,27 +245,19 @@ const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })
                 popoverPlacement: "bottom-end",
                 children: [
                     actions.map((action)=>{
-                        return /*#__PURE__*/ jsxRuntime.jsx(MenuItem, {
+                        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
                             disabled: action.disabled,
                             /* @ts-expect-error – TODO: this is an error in the DS where it is most likely a synthetic event, not regular. */ onSelect: handleClick(action),
                             display: "block",
-                            isVariantDanger: action.variant === 'danger',
-                            isDisabled: action.disabled,
+                            variant: action.variant === 'danger' ? action.variant : 'default',
+                            startIcon: action.icon,
                             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                                 justifyContent: "space-between",
                                 gap: 4,
-                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                    color: !action.disabled ? convertActionVariantToColor(action.variant) : 'inherit',
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                                     gap: 2,
                                     tag: "span",
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                            tag: "span",
-                                            color: !action.disabled ? convertActionVariantToIconColor(action.variant) : 'inherit',
-                                            children: action.icon
-                                        }),
-                                        action.label
-                                    ]
+                                    children: action.label
                                 })
                             })
                         }, action.id);
@@ -250,30 +285,6 @@ const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })
         ]
     });
 };
-const convertActionVariantToColor = (variant = 'secondary')=>{
-    switch(variant){
-        case 'danger':
-            return 'danger600';
-        case 'secondary':
-            return undefined;
-        case 'success':
-            return 'success600';
-        default:
-            return 'primary600';
-    }
-};
-const convertActionVariantToIconColor = (variant = 'secondary')=>{
-    switch(variant){
-        case 'danger':
-            return 'danger600';
-        case 'secondary':
-            return 'neutral500';
-        case 'success':
-            return 'success600';
-        default:
-            return 'primary600';
-    }
-};
 const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, isOpen, variant = 'secondary', loading })=>{
     const { formatMessage } = reactIntl.useIntl();
     const handleClose = async ()=>{
@@ -370,8 +381,8 @@ const transformData = (data)=>{
 };
 /* -------------------------------------------------------------------------------------------------
  * DocumentActionComponents
- * -----------------------------------------------------------------------------------------------*/ const PublishAction = ({ activeTab, documentId, model, collectionType, meta, document, onPreview })=>{
-    const { schema } = useDocument.useDoc();
+ * -----------------------------------------------------------------------------------------------*/ const PublishAction = ({ activeTab, documentId, model, collectionType, meta, document })=>{
+    const { currentDocument: { schema } } = useDocumentContext.useDocumentContext('PublishAction');
     const navigate = reactRouterDom.useNavigate();
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatValidationErrors: formatValidationErrors } = strapiAdmin.useAPIErrorHandler();
@@ -379,21 +390,36 @@ const transformData = (data)=>{
     const isCloning = reactRouterDom.useMatch(router.CLONE_PATH) !== null;
     const { id } = reactRouterDom.useParams();
     const { formatMessage } = reactIntl.useIntl();
-    const canPublish = DocumentRBAC.useDocumentRBAC('PublishAction', ({ canPublish })=>canPublish);
+    const { canPublish, canReadFields } = DocumentRBAC.useDocumentRBAC('PublishAction', ({ canPublish, canReadFields })=>({
+            canPublish,
+            canReadFields
+        }));
     const { publish, isLoading } = useDocumentActions.useDocumentActions();
+    const onPreview = Preview.usePreviewContext('UpdateAction', (state)=>state.onPreview, false);
     const [countDraftRelations, { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }] = documents.useGetDraftRelationCountQuery();
     const [localCountOfDraftRelations, setLocalCountOfDraftRelations] = React__namespace.useState(0);
     const [serverCountOfDraftRelations, setServerCountOfDraftRelations] = React__namespace.useState(0);
-    const [{ query, rawQuery }] = strapiAdmin.useQueryParams();
-    const params = React__namespace.useMemo(()=>api.buildValidParams(query), [
-        query
-    ]);
+    const [{ rawQuery }] = strapiAdmin.useQueryParams();
     const modified = strapiAdmin.useForm('PublishAction', ({ modified })=>modified);
     const setSubmitting = strapiAdmin.useForm('PublishAction', ({ setSubmitting })=>setSubmitting);
     const isSubmitting = strapiAdmin.useForm('PublishAction', ({ isSubmitting })=>isSubmitting);
     const validate = strapiAdmin.useForm('PublishAction', (state)=>state.validate);
     const setErrors = strapiAdmin.useForm('PublishAction', (state)=>state.setErrors);
     const formValues = strapiAdmin.useForm('PublishAction', ({ values })=>values);
+    const resetForm = strapiAdmin.useForm('PublishAction', ({ resetForm })=>resetForm);
+    const { currentDocument: { components } } = useDocumentContext.useDocumentContext('PublishAction');
+    // need to discriminate if the publish is coming from a relation modal or in the edit view
+    const relationContext = RelationModal.useRelationModal('PublishAction', ()=>true, false);
+    const fromRelationModal = relationContext != undefined;
+    const dispatch = RelationModal.useRelationModal('PublishAction', (state)=>state.dispatch);
+    const fieldToConnect = RelationModal.useRelationModal('PublishAction', (state)=>state.state.fieldToConnect, false);
+    const fieldToConnectUID = RelationModal.useRelationModal('PublishAction', (state)=>state.state.fieldToConnectUID, false);
+    const documentHistory = RelationModal.useRelationModal('PublishAction', (state)=>state.state.documentHistory, false);
+    const rootDocumentMeta = RelationModal.useRelationModal('PublishAction', (state)=>state.rootDocumentMeta);
+    const { currentDocumentMeta } = useDocumentContext.useDocumentContext('PublishAction');
+    const [updateDocumentMutation] = documents.useUpdateDocumentMutation();
+    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+    const idToPublish = currentDocumentMeta.documentId || id;
     React__namespace.useEffect(()=>{
         if (isErrorDraftRelations) {
             toggleNotification({
@@ -457,7 +483,7 @@ const transformData = (data)=>{
                 collectionType,
                 model,
                 documentId,
-                params
+                params: currentDocumentMeta.params
             });
             if (error) {
                 throw error;
@@ -474,8 +500,18 @@ const transformData = (data)=>{
         countDraftRelations,
         collectionType,
         model,
-        params
+        currentDocumentMeta.params
     ]);
+    const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
+    const parentDocumentData = useDocument.useDocument({
+        documentId: parentDocumentMetaToUpdate?.documentId,
+        model: parentDocumentMetaToUpdate?.model,
+        collectionType: parentDocumentMetaToUpdate?.collectionType,
+        params: parentDocumentMetaToUpdate?.params
+    }, {
+        skip: !parentDocumentMetaToUpdate
+    });
+    const { getInitialFormValues } = useDocument.useDoc();
     const isDocumentPublished = (document?.[attributes.PUBLISHED_AT_ATTRIBUTE_NAME] || meta?.availableStatus.some((doc)=>doc[attributes.PUBLISHED_AT_ATTRIBUTE_NAME] !== null)) && document?.status !== 'modified';
     if (!schema?.options?.draftAndPublish) {
         return null;
@@ -487,29 +523,99 @@ const transformData = (data)=>{
                 status: 'published'
             });
             if (errors) {
-                toggleNotification({
-                    type: 'danger',
-                    message: formatMessage({
-                        id: 'content-manager.validation.error',
-                        defaultMessage: 'There are validation errors in your document. Please fix them before saving.'
-                    })
+                const hasUnreadableRequiredField = Object.keys(schema.attributes).some((fieldName)=>{
+                    const attribute = schema.attributes[fieldName];
+                    return attribute?.required && !(canReadFields ?? []).includes(fieldName);
                 });
+                if (hasUnreadableRequiredField) {
+                    toggleNotification({
+                        type: 'danger',
+                        message: formatMessage({
+                            id: 'content-manager.validation.error.unreadable-required-field',
+                            defaultMessage: 'Your current permissions prevent access to certain required fields. Please request access from an administrator to proceed.'
+                        })
+                    });
+                } else {
+                    toggleNotification({
+                        type: 'danger',
+                        message: formatMessage({
+                            id: 'content-manager.validation.error',
+                            defaultMessage: 'There are validation errors in your document. Please fix them before saving.'
+                        })
+                    });
+                }
                 return;
             }
+            const { data: data$1 } = data.handleInvisibleAttributes(transformData(formValues), {
+                schema,
+                components
+            });
             const res = await publish({
                 collectionType,
                 model,
                 documentId,
-                params
-            }, transformData(formValues));
+                params: currentDocumentMeta.params
+            }, data$1);
+            // Reset form if successful
+            if ('data' in res) {
+                resetForm();
+            }
             if ('data' in res && collectionType !== collections.SINGLE_TYPES) {
                 /**
          * TODO: refactor the router so we can just do `../${res.data.documentId}` instead of this.
-         */ if (id === 'create') {
+         */ if (idToPublish === 'create' && !fromRelationModal) {
                     navigate({
                         pathname: `../${collectionType}/${model}/${res.data.documentId}`,
                         search: rawQuery
                     });
+                } else if (fromRelationModal) {
+                    const newRelation = {
+                        documentId: res.data.documentId,
+                        collectionType,
+                        model,
+                        params: currentDocumentMeta.params
+                    };
+                    /*
+           * Update, if needed, the parent relation with the newly published document.
+           * Check if in history we have the parent relation otherwise use the
+           * rootDocument
+           */ if (fieldToConnect && documentHistory && (parentDocumentMetaToUpdate.documentId || parentDocumentMetaToUpdate.collectionType === collections.SINGLE_TYPES)) {
+                        const parentDataToUpdate = parentDocumentMetaToUpdate.collectionType === collections.SINGLE_TYPES ? getInitialFormValues() : parentDocumentData.getInitialFormValues();
+                        const metaDocumentToUpdate = documentHistory.at(-2) ?? rootDocumentMeta;
+                        const dataToUpdate = connectRelationToParent(parentDataToUpdate, fieldToConnect, res.data, fieldToConnectUID);
+                        try {
+                            const updateRes = await updateDocumentMutation({
+                                collectionType: metaDocumentToUpdate.collectionType,
+                                model: metaDocumentToUpdate.model,
+                                documentId: metaDocumentToUpdate.collectionType !== collections.SINGLE_TYPES ? metaDocumentToUpdate.documentId : undefined,
+                                params: metaDocumentToUpdate.params,
+                                data: dataToUpdate
+                            });
+                            if ('error' in updateRes) {
+                                toggleNotification({
+                                    type: 'danger',
+                                    message: formatAPIError(updateRes.error)
+                                });
+                                return;
+                            }
+                        } catch (err) {
+                            toggleNotification({
+                                type: 'danger',
+                                message: formatMessage({
+                                    id: 'notification.error',
+                                    defaultMessage: 'An error occurred'
+                                })
+                            });
+                            throw err;
+                        }
+                    }
+                    dispatch({
+                        type: 'GO_TO_CREATED_RELATION',
+                        payload: {
+                            document: newRelation,
+                            shouldBypassConfirmation: true
+                        }
+                    });
                 }
             } else if ('error' in res && api.isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                 setErrors(formatValidationErrors(res.error));
@@ -530,7 +636,8 @@ const transformData = (data)=>{
         loading: isLoading,
         position: [
             'panel',
-            'preview'
+            'preview',
+            'relation-modal'
         ],
         /**
      * Disabled when:
@@ -571,9 +678,10 @@ const transformData = (data)=>{
 PublishAction.type = 'publish';
 PublishAction.position = [
     'panel',
-    'preview'
+    'preview',
+    'relation-modal'
 ];
-const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview })=>{
+const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     const navigate = reactRouterDom.useNavigate();
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatValidationErrors: formatValidationErrors } = strapiAdmin.useAPIErrorHandler();
@@ -581,17 +689,40 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview
     const isCloning = cloneMatch !== null;
     const { formatMessage } = reactIntl.useIntl();
     const { create, update, clone, isLoading } = useDocumentActions.useDocumentActions();
-    const [{ query, rawQuery }] = strapiAdmin.useQueryParams();
-    const params = React__namespace.useMemo(()=>api.buildValidParams(query), [
-        query
-    ]);
+    const { currentDocument: { components } } = useDocumentContext.useDocumentContext('UpdateAction');
+    const [{ rawQuery }] = strapiAdmin.useQueryParams();
+    const onPreview = Preview.usePreviewContext('UpdateAction', (state)=>state.onPreview, false);
+    const { getInitialFormValues } = useDocument.useDoc();
     const isSubmitting = strapiAdmin.useForm('UpdateAction', ({ isSubmitting })=>isSubmitting);
     const modified = strapiAdmin.useForm('UpdateAction', ({ modified })=>modified);
     const setSubmitting = strapiAdmin.useForm('UpdateAction', ({ setSubmitting })=>setSubmitting);
+    const initialValues = strapiAdmin.useForm('UpdateAction', ({ initialValues })=>initialValues);
     const document = strapiAdmin.useForm('UpdateAction', ({ values })=>values);
     const validate = strapiAdmin.useForm('UpdateAction', (state)=>state.validate);
     const setErrors = strapiAdmin.useForm('UpdateAction', (state)=>state.setErrors);
-    const resetForm = strapiAdmin.useForm('PublishAction', ({ resetForm })=>resetForm);
+    const resetForm = strapiAdmin.useForm('UpdateAction', ({ resetForm })=>resetForm);
+    const dispatch = RelationModal.useRelationModal('UpdateAction', (state)=>state.dispatch);
+    // need to discriminate if the update is coming from a relation modal or in the edit view
+    const relationContext = RelationModal.useRelationModal('UpdateAction', ()=>true, false);
+    const relationalModalSchema = RelationModal.useRelationModal('UpdateAction', (state)=>state.currentDocument.schema, false);
+    const fieldToConnect = RelationModal.useRelationModal('UpdateAction', (state)=>state.state.fieldToConnect, false);
+    const fieldToConnectUID = RelationModal.useRelationModal('PublishAction', (state)=>state.state.fieldToConnectUID, false);
+    const documentHistory = RelationModal.useRelationModal('UpdateAction', (state)=>state.state.documentHistory, false);
+    const rootDocumentMeta = RelationModal.useRelationModal('UpdateAction', (state)=>state.rootDocumentMeta);
+    const fromRelationModal = relationContext != undefined;
+    const { currentDocumentMeta } = useDocumentContext.useDocumentContext('UpdateAction');
+    const [updateDocumentMutation] = documents.useUpdateDocumentMutation();
+    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+    const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
+    const parentDocumentData = useDocument.useDocument({
+        documentId: parentDocumentMetaToUpdate?.documentId,
+        model: parentDocumentMetaToUpdate?.model,
+        collectionType: parentDocumentMetaToUpdate?.collectionType,
+        params: parentDocumentMetaToUpdate?.params
+    }, {
+        skip: !parentDocumentMetaToUpdate
+    });
+    const { schema } = useDocument.useDoc();
     const handleUpdate = React__namespace.useCallback(async ()=>{
         setSubmitting(true);
         try {
@@ -615,7 +746,7 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview
                 const res = await clone({
                     model,
                     documentId: cloneMatch.params.origin,
-                    params
+                    params: currentDocumentMeta.params
                 }, transformData(document));
                 if ('data' in res) {
                     navigate({
@@ -628,30 +759,91 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview
                     setErrors(formatValidationErrors(res.error));
                 }
             } else if (documentId || collectionType === collections.SINGLE_TYPES) {
+                const { data: data$1 } = data.handleInvisibleAttributes(transformData(document), {
+                    schema: fromRelationModal ? relationalModalSchema : schema,
+                    initialValues,
+                    components
+                });
                 const res = await update({
                     collectionType,
                     model,
                     documentId,
-                    params
-                }, transformData(document));
+                    params: currentDocumentMeta.params
+                }, data$1);
                 if ('error' in res && api.isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                     setErrors(formatValidationErrors(res.error));
                 } else {
                     resetForm();
                 }
             } else {
+                const { data: data$1 } = data.handleInvisibleAttributes(transformData(document), {
+                    schema: fromRelationModal ? relationalModalSchema : schema,
+                    initialValues,
+                    components
+                });
                 const res = await create({
                     model,
-                    params
-                }, transformData(document));
+                    params: currentDocumentMeta.params
+                }, data$1);
                 if ('data' in res && collectionType !== collections.SINGLE_TYPES) {
-                    navigate({
-                        pathname: `../${res.data.documentId}`,
-                        search: rawQuery
-                    }, {
-                        replace: true,
-                        relative: 'path'
-                    });
+                    if (fromRelationModal) {
+                        const createdRelation = {
+                            documentId: res.data.documentId,
+                            collectionType,
+                            model,
+                            params: currentDocumentMeta.params
+                        };
+                        /*
+             * Update, if needed, the parent relation with the newly published document.
+             * Check if in history we have the parent relation otherwise use the
+             * rootDocument
+             */ if (fieldToConnect && documentHistory && (parentDocumentMetaToUpdate.documentId || parentDocumentMetaToUpdate.collectionType === collections.SINGLE_TYPES)) {
+                            const parentDataToUpdate = parentDocumentMetaToUpdate.collectionType === collections.SINGLE_TYPES ? getInitialFormValues() : parentDocumentData.getInitialFormValues();
+                            const dataToUpdate = connectRelationToParent(parentDataToUpdate, fieldToConnect, res.data, fieldToConnectUID);
+                            try {
+                                const updateRes = await updateDocumentMutation({
+                                    collectionType: parentDocumentMetaToUpdate.collectionType,
+                                    model: parentDocumentMetaToUpdate.model,
+                                    documentId: parentDocumentMetaToUpdate.collectionType !== collections.SINGLE_TYPES ? parentDocumentMetaToUpdate.documentId : undefined,
+                                    params: parentDocumentMetaToUpdate.params,
+                                    data: {
+                                        ...dataToUpdate
+                                    }
+                                });
+                                if ('error' in updateRes) {
+                                    toggleNotification({
+                                        type: 'danger',
+                                        message: formatAPIError(updateRes.error)
+                                    });
+                                    return;
+                                }
+                            } catch (err) {
+                                toggleNotification({
+                                    type: 'danger',
+                                    message: formatMessage({
+                                        id: 'notification.error',
+                                        defaultMessage: 'An error occurred'
+                                    })
+                                });
+                                throw err;
+                            }
+                        }
+                        dispatch({
+                            type: 'GO_TO_CREATED_RELATION',
+                            payload: {
+                                document: createdRelation,
+                                shouldBypassConfirmation: true
+                            }
+                        });
+                    } else {
+                        navigate({
+                            pathname: `../${res.data.documentId}`,
+                            search: rawQuery
+                        }, {
+                            replace: true,
+                            relative: 'path'
+                        });
+                    }
                 } else if ('error' in res && api.isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                     setErrors(formatValidationErrors(res.error));
                 }
@@ -663,26 +855,41 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview
             }
         }
     }, [
-        clone,
-        cloneMatch?.params.origin,
-        collectionType,
-        create,
-        document,
+        setSubmitting,
+        modified,
+        validate,
+        isCloning,
         documentId,
+        collectionType,
+        toggleNotification,
         formatMessage,
-        formatValidationErrors,
-        isCloning,
+        clone,
         model,
-        modified,
+        cloneMatch?.params.origin,
+        currentDocumentMeta.params,
+        document,
         navigate,
-        params,
         rawQuery,
-        resetForm,
         setErrors,
-        setSubmitting,
-        toggleNotification,
+        formatValidationErrors,
         update,
-        validate
+        resetForm,
+        create,
+        fromRelationModal,
+        fieldToConnect,
+        documentHistory,
+        parentDocumentMetaToUpdate,
+        dispatch,
+        getInitialFormValues,
+        parentDocumentData,
+        fieldToConnectUID,
+        updateDocumentMutation,
+        formatAPIError,
+        onPreview,
+        initialValues,
+        schema,
+        components,
+        relationalModalSchema
     ]);
     // Auto-save on CMD+S or CMD+Enter on macOS, and CTRL+S or CTRL+Enter on Windows/Linux
     React__namespace.useEffect(()=>{
@@ -714,14 +921,16 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview
         onClick: handleUpdate,
         position: [
             'panel',
-            'preview'
+            'preview',
+            'relation-modal'
         ]
     };
 };
 UpdateAction.type = 'update';
 UpdateAction.position = [
     'panel',
-    'preview'
+    'preview',
+    'relation-modal'
 ];
 const UNPUBLISH_DRAFT_OPTIONS = {
     KEEP: 'keep',