@strapi/content-manager 0.0.0-experimental.8bf99b7c43ed372264c198d347a2ada9dfed174d → 0.0.0-experimental.8c28a74d1219c09f4ee67402fd3a26f182c4990a

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

@@ -1,23 +1,60 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useNotification, useAPIErrorHandler, useQueryParams, useForm } from '@strapi/admin/strapi-admin';
-import { Menu, Flex, Typography, Radio, Button, VisuallyHidden, Dialog, Modal } from '@strapi/design-system';
-import { Cross, WarningCircle, More } from '@strapi/icons';
+import { Menu, Flex, Button, VisuallyHidden, Dialog, Modal, Typography, Radio } from '@strapi/design-system';
+import { More, Cross, WarningCircle } from '@strapi/icons';
 import mapValues from 'lodash/fp/mapValues';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
 import { useIntl } from 'react-intl';
 import { useNavigate, useMatch, useParams } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { PUBLISHED_AT_ATTRIBUTE_NAME } from '../../../constants/attributes.mjs';
 import { SINGLE_TYPES } from '../../../constants/collections.mjs';
-import { useDocumentContext } from '../../../features/DocumentContext.mjs';
 import { useDocumentRBAC } from '../../../features/DocumentRBAC.mjs';
-import { useDoc } from '../../../hooks/useDocument.mjs';
+import { useDocument, useDoc } from '../../../hooks/useDocument.mjs';
 import { useDocumentActions } from '../../../hooks/useDocumentActions.mjs';
+import { useDocumentContext } from '../../../hooks/useDocumentContext.mjs';
+import { usePreviewContext } from '../../../preview/pages/Preview.mjs';
 import { LIST_PATH, CLONE_PATH } from '../../../router.mjs';
-import { useGetDraftRelationCountQuery as useLazyGetDraftRelationCountQuery } from '../../../services/documents.mjs';
-import { buildValidParams, isBaseQueryError } from '../../../utils/api.mjs';
+import { useGetDraftRelationCountQuery as useLazyGetDraftRelationCountQuery, useUpdateDocumentMutation } from '../../../services/documents.mjs';
+import { isBaseQueryError, buildValidParams } from '../../../utils/api.mjs';
 import { getTranslation } from '../../../utils/translations.mjs';
+import { useRelationModal } from './FormInputs/Relations/RelationModal.mjs';
 
+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 } = useIntl();
     const [primaryAction, secondaryAction, ...restActions] = actions.filter((action)=>{
@@ -350,8 +387,8 @@ const transformData = (data)=>{
 };
 /* -------------------------------------------------------------------------------------------------
  * DocumentActionComponents
- * -----------------------------------------------------------------------------------------------*/ const PublishAction = ({ activeTab, documentId, model, collectionType, meta, document, onPreview, fromPreview = false, fromRelationModal = false })=>{
-    const schema = useDocumentContext('PublishAction', (state)=>state.document.schema);
+ * -----------------------------------------------------------------------------------------------*/ const PublishAction = ({ activeTab, documentId, model, collectionType, meta, document })=>{
+    const { currentDocument: { schema } } = useDocumentContext('PublishAction');
     const navigate = useNavigate();
     const { toggleNotification } = useNotification();
     const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
@@ -360,22 +397,31 @@ const transformData = (data)=>{
     const { id } = useParams();
     const { formatMessage } = useIntl();
     const canPublish = useDocumentRBAC('PublishAction', ({ canPublish })=>canPublish);
-    const { publish, isLoading } = useDocumentActions(fromPreview, fromRelationModal);
+    const { publish, isLoading } = useDocumentActions();
+    const onPreview = usePreviewContext('UpdateAction', (state)=>state.onPreview, false);
     const [countDraftRelations, { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }] = useLazyGetDraftRelationCountQuery();
     const [localCountOfDraftRelations, setLocalCountOfDraftRelations] = React.useState(0);
     const [serverCountOfDraftRelations, setServerCountOfDraftRelations] = React.useState(0);
-    const [{ query, rawQuery }] = useQueryParams();
-    const params = React.useMemo(()=>buildValidParams(query), [
-        query
-    ]);
+    const [{ rawQuery }] = useQueryParams();
     const modified = useForm('PublishAction', ({ modified })=>modified);
     const setSubmitting = useForm('PublishAction', ({ setSubmitting })=>setSubmitting);
     const isSubmitting = useForm('PublishAction', ({ isSubmitting })=>isSubmitting);
     const validate = useForm('PublishAction', (state)=>state.validate);
     const setErrors = useForm('PublishAction', (state)=>state.setErrors);
     const formValues = useForm('PublishAction', ({ values })=>values);
-    const rootDocumentMeta = useDocumentContext('PublishAction', (state)=>state.rootDocumentMeta);
-    const currentDocumentMeta = useDocumentContext('PublishAction', (state)=>state.meta);
+    const resetForm = useForm('PublishAction', ({ resetForm })=>resetForm);
+    // need to discriminate if the publish is coming from a relation modal or in the edit view
+    const relationContext = useRelationModal('PublishAction', ()=>true, false);
+    const fromRelationModal = relationContext != undefined;
+    const dispatch = useRelationModal('PublishAction', (state)=>state.dispatch);
+    const fieldToConnect = useRelationModal('PublishAction', (state)=>state.state.fieldToConnect, false);
+    const fieldToConnectUID = useRelationModal('PublishAction', (state)=>state.state.fieldToConnectUID, false);
+    const documentHistory = useRelationModal('PublishAction', (state)=>state.state.documentHistory, false);
+    const rootDocumentMeta = useRelationModal('PublishAction', (state)=>state.rootDocumentMeta);
+    const { currentDocumentMeta } = useDocumentContext('PublishAction');
+    const [updateDocumentMutation] = useUpdateDocumentMutation();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    const idToPublish = currentDocumentMeta.documentId || id;
     React.useEffect(()=>{
         if (isErrorDraftRelations) {
             toggleNotification({
@@ -439,7 +485,7 @@ const transformData = (data)=>{
                 collectionType,
                 model,
                 documentId,
-                params
+                params: currentDocumentMeta.params
             });
             if (error) {
                 throw error;
@@ -456,8 +502,18 @@ const transformData = (data)=>{
         countDraftRelations,
         collectionType,
         model,
-        params
+        currentDocumentMeta.params
     ]);
+    const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
+    const parentDocumentData = useDocument({
+        documentId: parentDocumentMetaToUpdate?.documentId,
+        model: parentDocumentMetaToUpdate?.model,
+        collectionType: parentDocumentMetaToUpdate?.collectionType,
+        params: parentDocumentMetaToUpdate?.params
+    }, {
+        skip: !parentDocumentMetaToUpdate
+    });
+    const { getInitialFormValues } = useDoc();
     const isDocumentPublished = (document?.[PUBLISHED_AT_ATTRIBUTE_NAME] || meta?.availableStatus.some((doc)=>doc[PUBLISHED_AT_ATTRIBUTE_NAME] !== null)) && document?.status !== 'modified';
     if (!schema?.options?.draftAndPublish) {
         return null;
@@ -478,21 +534,72 @@ const transformData = (data)=>{
                 });
                 return;
             }
-            const isPublishingRelation = rootDocumentMeta.documentId !== currentDocumentMeta.documentId;
             const res = await publish({
                 collectionType,
                 model,
                 documentId,
-                params: isPublishingRelation ? currentDocumentMeta.params : params
+                params: currentDocumentMeta.params
             }, transformData(formValues));
+            // Reset form if successful
+            if ('data' in res) {
+                resetForm();
+            }
             if ('data' in res && collectionType !== 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 === SINGLE_TYPES)) {
+                        const parentDataToUpdate = parentDocumentMetaToUpdate.collectionType === 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 !== 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 && isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                 setErrors(formatValidationErrors(res.error));
@@ -558,27 +665,44 @@ PublishAction.position = [
     'preview',
     'relation-modal'
 ];
-const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview, fromPreview = false, fromRelationModal = false })=>{
+const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     const navigate = useNavigate();
     const { toggleNotification } = useNotification();
     const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
     const cloneMatch = useMatch(CLONE_PATH);
     const isCloning = cloneMatch !== null;
     const { formatMessage } = useIntl();
-    const { create, update, clone, isLoading } = useDocumentActions(fromPreview, fromRelationModal);
-    const [{ query, rawQuery }] = useQueryParams();
-    const params = React.useMemo(()=>buildValidParams(query), [
-        query
-    ]);
+    const { create, update, clone, isLoading } = useDocumentActions();
+    const [{ rawQuery }] = useQueryParams();
+    const onPreview = usePreviewContext('UpdateAction', (state)=>state.onPreview, false);
+    const { getInitialFormValues } = useDoc();
     const isSubmitting = useForm('UpdateAction', ({ isSubmitting })=>isSubmitting);
     const modified = useForm('UpdateAction', ({ modified })=>modified);
     const setSubmitting = useForm('UpdateAction', ({ setSubmitting })=>setSubmitting);
     const document = useForm('UpdateAction', ({ values })=>values);
     const validate = useForm('UpdateAction', (state)=>state.validate);
     const setErrors = useForm('UpdateAction', (state)=>state.setErrors);
-    const resetForm = useForm('PublishAction', ({ resetForm })=>resetForm);
-    const rootDocumentMeta = useDocumentContext('UpdateAction', (state)=>state.rootDocumentMeta);
-    const currentDocumentMeta = useDocumentContext('UpdateAction', (state)=>state.meta);
+    const resetForm = useForm('UpdateAction', ({ resetForm })=>resetForm);
+    const dispatch = useRelationModal('UpdateAction', (state)=>state.dispatch);
+    // need to discriminate if the update is coming from a relation modal or in the edit view
+    const relationContext = useRelationModal('UpdateAction', ()=>true, false);
+    const fieldToConnect = useRelationModal('UpdateAction', (state)=>state.state.fieldToConnect, false);
+    const fieldToConnectUID = useRelationModal('PublishAction', (state)=>state.state.fieldToConnectUID, false);
+    const documentHistory = useRelationModal('UpdateAction', (state)=>state.state.documentHistory, false);
+    const rootDocumentMeta = useRelationModal('UpdateAction', (state)=>state.rootDocumentMeta);
+    const fromRelationModal = relationContext != undefined;
+    const { currentDocumentMeta } = useDocumentContext('UpdateAction');
+    const [updateDocumentMutation] = useUpdateDocumentMutation();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
+    const parentDocumentData = useDocument({
+        documentId: parentDocumentMetaToUpdate?.documentId,
+        model: parentDocumentMetaToUpdate?.model,
+        collectionType: parentDocumentMetaToUpdate?.collectionType,
+        params: parentDocumentMetaToUpdate?.params
+    }, {
+        skip: !parentDocumentMetaToUpdate
+    });
     const handleUpdate = React.useCallback(async ()=>{
         setSubmitting(true);
         try {
@@ -602,7 +726,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({
@@ -615,12 +739,11 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview,
                     setErrors(formatValidationErrors(res.error));
                 }
             } else if (documentId || collectionType === SINGLE_TYPES) {
-                const isEditingRelation = rootDocumentMeta.documentId !== currentDocumentMeta.documentId;
                 const res = await update({
                     collectionType,
                     model,
                     documentId,
-                    params: isEditingRelation ? currentDocumentMeta.params : params
+                    params: currentDocumentMeta.params
                 }, transformData(document));
                 if ('error' in res && isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                     setErrors(formatValidationErrors(res.error));
@@ -630,16 +753,67 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview,
             } else {
                 const res = await create({
                     model,
-                    params
+                    params: currentDocumentMeta.params
                 }, transformData(document));
                 if ('data' in res && collectionType !== 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 === SINGLE_TYPES)) {
+                            const parentDataToUpdate = parentDocumentMetaToUpdate.collectionType === 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 !== 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 && isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                     setErrors(formatValidationErrors(res.error));
                 }
@@ -651,30 +825,37 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview,
             }
         }
     }, [
+        setSubmitting,
+        modified,
+        validate,
+        isCloning,
+        documentId,
+        collectionType,
+        toggleNotification,
+        formatMessage,
         clone,
+        model,
         cloneMatch?.params.origin,
-        collectionType,
-        create,
-        currentDocumentMeta.documentId,
         currentDocumentMeta.params,
         document,
-        documentId,
-        formatMessage,
-        formatValidationErrors,
-        isCloning,
-        model,
-        modified,
         navigate,
-        onPreview,
-        params,
         rawQuery,
-        resetForm,
-        rootDocumentMeta.documentId,
         setErrors,
-        setSubmitting,
-        toggleNotification,
+        formatValidationErrors,
         update,
-        validate
+        resetForm,
+        create,
+        fromRelationModal,
+        fieldToConnect,
+        documentHistory,
+        parentDocumentMetaToUpdate,
+        dispatch,
+        getInitialFormValues,
+        parentDocumentData,
+        fieldToConnectUID,
+        updateDocumentMutation,
+        formatAPIError,
+        onPreview
     ]);
     // Auto-save on CMD+S or CMD+Enter on macOS, and CTRL+S or CTRL+Enter on Windows/Linux
     React.useEffect(()=>{