@strapi/content-manager 5.49.0 → 5.50.0

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

@@ -21,9 +21,14 @@ import { useGetDraftRelationCountQuery as useLazyGetDraftRelationCountQuery, use
 import { buildValidParams, isBaseQueryError } from '../../../utils/api.mjs';
 import { getTranslation } from '../../../utils/translations.mjs';
 import { handleInvisibleAttributes } from '../utils/data.mjs';
+import { EMPTY_DRAFT_RELATION_COUNTS, countLocalDraftRelations, normalizeDraftRelationCounts, resolveDraftRelationCounts, getDraftRelationsPublishState } from '../utils/draftRelationCounts.mjs';
 import { getEditViewShortcut } from '../utils/keyboardShortcuts.mjs';
 import { useRelationModal } from './FormInputs/Relations/RelationModal.mjs';
 
+const publishConfirmDialogOpeners = new Map();
+const openPublishConfirmDialog = (scope)=>{
+    publishConfirmDialogOpeners.get(scope)?.();
+};
 const connectRelationToParent = (parentDataToUpdate, fieldToConnect, data, fieldToConnectUID)=>{
     /*
    * Check if the fieldToConnect is already present in the parentDataToUpdate.
@@ -151,6 +156,24 @@ const DocumentActions = ({ actions })=>{
 const DocumentActionButton = ({ buttonType = 'button', ...action })=>{
     const [dialogId, setDialogId] = React.useState(null);
     const { toggleNotification } = useNotification();
+    React.useEffect(()=>{
+        const scope = action.publishConfirmScope;
+        if (action.type !== 'publish' || !action.dialog || !scope) {
+            return;
+        }
+        const open = ()=>setDialogId(action.id);
+        publishConfirmDialogOpeners.set(scope, open);
+        return ()=>{
+            if (publishConfirmDialogOpeners.get(scope) === open) {
+                publishConfirmDialogOpeners.delete(scope);
+            }
+        };
+    }, [
+        action.type,
+        action.dialog,
+        action.id,
+        action.publishConfirmScope
+    ]);
     const handleClick = (action)=>async (e)=>{
             const { onClick = ()=>false, dialog, id } = action;
             const muteDialog = await onClick(e);
@@ -301,7 +324,7 @@ const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })
         ]
     });
 };
-const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, isOpen, variant = 'secondary', loading })=>{
+const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, bodyIcon, confirmLabel, isOpen, variant = 'secondary', loading })=>{
     const { formatMessage } = useIntl();
     const handleClose = async ()=>{
         if (onCancel) {
@@ -315,6 +338,28 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
         }
         onClose();
     };
+    const dialogBody = bodyIcon ? /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsx(WarningCircle, {
+                    width: "24px",
+                    height: "24px",
+                    fill: bodyIcon === 'danger' ? 'danger600' : 'primary600'
+                })
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                id: "confirm-description",
+                tag: "p",
+                variant: "omega",
+                textAlign: "center",
+                children: content
+            })
+        ]
+    }) : content;
     return /*#__PURE__*/ jsx(Dialog.Root, {
         open: isOpen,
         onOpenChange: handleClose,
@@ -324,7 +369,7 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
                     children: title
                 }),
                 /*#__PURE__*/ jsx(Dialog.Body, {
-                    children: content
+                    children: dialogBody
                 }),
                 /*#__PURE__*/ jsxs(Dialog.Footer, {
                     children: [
@@ -343,7 +388,7 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
                             variant: variant,
                             fullWidth: true,
                             loading: loading,
-                            children: formatMessage({
+                            children: confirmLabel ?? formatMessage({
                                 id: 'app.components.Button.confirm',
                                 defaultMessage: 'Confirm'
                             })
@@ -411,10 +456,11 @@ const transformData = (data)=>{
             canReadFields
         }));
     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 onPreview = usePreviewContext('PublishAction', (state)=>state.onPreview, false);
+    const [countDraftRelations, { isError: isErrorDraftRelations }] = useLazyGetDraftRelationCountQuery();
+    const [localDraftRelationCounts, setLocalDraftRelationCounts] = React.useState(EMPTY_DRAFT_RELATION_COUNTS);
+    const [serverDraftRelationCounts, setServerDraftRelationCounts] = React.useState(EMPTY_DRAFT_RELATION_COUNTS);
+    const [isFetchingDraftRelations, setIsFetchingDraftRelations] = React.useState(false);
     const [{ rawQuery }] = useQueryParams();
     const modified = useForm('PublishAction', ({ modified })=>modified);
     const setSubmitting = useForm('PublishAction', ({ setSubmitting })=>setSubmitting);
@@ -428,6 +474,8 @@ const transformData = (data)=>{
     // 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 isRelationModalOpen = useRelationModal('PublishAction', (state)=>state.state.isModalOpen, false);
+    const publishConfirmScope = fromRelationModal ? 'relation-modal' : onPreview ? 'preview' : 'panel';
     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);
@@ -454,49 +502,19 @@ const transformData = (data)=>{
         formatMessage
     ]);
     React.useEffect(()=>{
-        const localDraftRelations = new Set();
-        /**
-     * Extracts draft relations from the provided data object.
-     * It checks for a connect array of relations.
-     * If a relation has a status of 'draft', its id is added to the localDraftRelations set.
-     */ const extractDraftRelations = (data)=>{
-            const relations = data.connect || [];
-            relations.forEach((relation)=>{
-                if (relation.status === 'draft') {
-                    localDraftRelations.add(relation.id);
-                }
-            });
-        };
-        /**
-     * Recursively traverses the provided data object to extract draft relations from arrays within 'connect' keys.
-     * If the data is an object, it looks for 'connect' keys to pass their array values to extractDraftRelations.
-     * It recursively calls itself for any non-null objects it contains.
-     */ const traverseAndExtract = (data)=>{
-            Object.entries(data).forEach(([key, value])=>{
-                if (key === 'connect' && Array.isArray(value)) {
-                    extractDraftRelations({
-                        connect: value
-                    });
-                } else if (typeof value === 'object' && value !== null) {
-                    traverseAndExtract(value);
-                }
-            });
-        };
-        if (!documentId || modified) {
-            traverseAndExtract(formValues);
-            setLocalCountOfDraftRelations(localDraftRelations.size);
-        }
+        setLocalDraftRelationCounts(countLocalDraftRelations(formValues, schema, components, model));
     }, [
-        documentId,
-        modified,
+        components,
         formValues,
-        setLocalCountOfDraftRelations
+        model,
+        schema
     ]);
-    React.useEffect(()=>{
-        if (!document || !document.documentId || isListView) {
+    const fetchDraftRelationsCount = React.useCallback(async ()=>{
+        if (!document?.documentId || isListView) {
             return;
         }
-        const fetchDraftRelationsCount = async ()=>{
+        setIsFetchingDraftRelations(true);
+        try {
             const { data, error } = await countDraftRelations({
                 collectionType,
                 model,
@@ -507,18 +525,36 @@ const transformData = (data)=>{
                 throw error;
             }
             if (data) {
-                setServerCountOfDraftRelations(data.data);
+                setServerDraftRelationCounts(normalizeDraftRelationCounts(data));
             }
-        };
-        fetchDraftRelationsCount();
+        } finally{
+            setIsFetchingDraftRelations(false);
+        }
     }, [
-        isListView,
-        document,
-        documentId,
-        countDraftRelations,
         collectionType,
-        model,
-        currentDocumentMeta.params
+        countDraftRelations,
+        currentDocumentMeta.params,
+        document?.documentId,
+        documentId,
+        isListView,
+        model
+    ]);
+    React.useEffect(()=>{
+        fetchDraftRelationsCount();
+    }, [
+        fetchDraftRelationsCount,
+        document?.updatedAt
+    ]);
+    React.useEffect(()=>{
+        const handleWindowFocus = ()=>{
+            fetchDraftRelationsCount();
+        };
+        window.addEventListener('focus', handleWindowFocus);
+        return ()=>{
+            window.removeEventListener('focus', handleWindowFocus);
+        };
+    }, [
+        fetchDraftRelationsCount
     ]);
     const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
     const parentDocumentData = useDocument({
@@ -660,11 +696,18 @@ const transformData = (data)=>{
             }
         }
     };
-    const totalDraftRelations = localCountOfDraftRelations + serverCountOfDraftRelations;
-    // TODO skipping this for now as there is a bug with the draft relation count that will be worked on separately
-    // see RFC "Count draft relations" in Notion
-    const enableDraftRelationsCount = false;
-    const hasDraftRelations = enableDraftRelationsCount;
+    const getFreshDraftRelationCounts = React.useCallback(()=>resolveDraftRelationCounts(documentId, modified, countLocalDraftRelations(getValues(), schema, components, model), serverDraftRelationCounts), [
+        components,
+        documentId,
+        getValues,
+        model,
+        modified,
+        schema,
+        serverDraftRelationCounts
+    ]);
+    const draftRelationCounts = resolveDraftRelationCounts(documentId, modified, localDraftRelationCounts, serverDraftRelationCounts);
+    const { hasUnpublishedRelations, hasDraftM2mLinks, dialogVariant, bodyIcon, confirmLabel } = getDraftRelationsPublishState(draftRelationCounts);
+    const supportsDraftRelationWarning = Boolean(schema?.options?.draftAndPublish);
     /**
    * Disabled when:
    *  - currently if you're cloning a document we don't support publish & clone at the same time.
@@ -673,7 +716,7 @@ const transformData = (data)=>{
    *  - the document is already published & not modified
    *  - the document is being created & not modified
    *  - the user doesn't have the permission to publish
-   */ const isDisabled = isCloning || isSubmitting || isLoadingDraftRelations || activeTab === 'published' || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish;
+   */ const isDisabled = isCloning || isSubmitting || isFetchingDraftRelations || activeTab === 'published' || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish;
     // Publish on CMD+Shift+Enter (macOS) / CTRL+Shift+Enter (Windows/Linux).
     // Saving a draft (CMD/CTRL+Enter) is handled by the UpdateAction.
     React.useEffect(()=>{
@@ -685,18 +728,29 @@ const transformData = (data)=>{
                 return;
             }
             e.preventDefault();
-            if (!isDisabled && !hasDraftRelations) {
-                performPublish();
+            if (!fromRelationModal && isRelationModalOpen) {
+                return;
+            }
+            if (isDisabled) {
+                return;
             }
+            if (getDraftRelationsPublishState(getFreshDraftRelationCounts()).hasDraftRelations) {
+                openPublishConfirmDialog(publishConfirmScope);
+                return;
+            }
+            performPublish();
         };
         window.addEventListener('keydown', handleKeyDown);
         return ()=>{
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [
-        hasDraftRelations,
+        fromRelationModal,
+        getFreshDraftRelationCounts,
         isDisabled,
+        isRelationModalOpen,
         performPublish,
+        publishConfirmScope,
         schema?.options?.draftAndPublish
     ]);
     if (!schema?.options?.draftAndPublish) {
@@ -711,26 +765,60 @@ const transformData = (data)=>{
             'relation-modal'
         ],
         disabled: isDisabled,
+        publishConfirmScope: supportsDraftRelationWarning ? publishConfirmScope : undefined,
         label: formatMessage({
             id: 'app.utils.publish',
             defaultMessage: 'Publish'
         }),
         onClick: async ()=>{
+            if (getDraftRelationsPublishState(getFreshDraftRelationCounts()).hasDraftRelations) {
+                // Let DocumentActionButton open the confirmation dialog.
+                return;
+            }
             await performPublish();
+            // Skip the registered dialog when publishing directly.
+            return true;
         },
-        dialog: hasDraftRelations ? {
+        dialog: supportsDraftRelationWarning ? {
             type: 'dialog',
-            variant: 'danger',
-            footer: null,
+            variant: dialogVariant,
+            bodyIcon,
             title: formatMessage({
-                id: getTranslation(`popUpwarning.warning.bulk-has-draft-relations.title`),
+                id: getTranslation('popUpWarning.warning.has-draft-relations.title'),
                 defaultMessage: 'Confirmation'
             }),
-            content: formatMessage({
-                id: getTranslation(`popUpwarning.warning.bulk-has-draft-relations.message`),
-                defaultMessage: 'This entry is related to {count, plural, one {# draft entry} other {# draft entries}}. Publishing it could leave broken links in your app.'
-            }, {
-                count: totalDraftRelations
+            content: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    hasUnpublishedRelations ? formatMessage({
+                        id: getTranslation('popUpWarning.warning.has-draft-relations.message'),
+                        defaultMessage: 'This entry is related to {count, plural, one {# draft entry} other {# draft entries}}. {count, plural, one {That relation will not be included in the published version.} other {Those relations will not be included in the published version.}}'
+                    }, {
+                        count: draftRelationCounts.unpublishedRelations
+                    }) : formatMessage({
+                        id: getTranslation('popUpWarning.warning.has-draft-m2m-relations.message'),
+                        defaultMessage: '{count, plural, one {# linked entry is still in draft. It will appear on the live site once that entry is published.} other {# linked entries are still in draft. They will appear on the live site once those entries are published.}}'
+                    }, {
+                        count: draftRelationCounts.draftM2mLinks
+                    }),
+                    hasUnpublishedRelations && hasDraftM2mLinks ? ` ${formatMessage({
+                        id: getTranslation('popUpWarning.warning.has-draft-m2m-relations.additional'),
+                        defaultMessage: '{count, plural, one {# many-to-many link points} other {# many-to-many links point}} to draft entries that will become visible once published.'
+                    }, {
+                        count: draftRelationCounts.draftM2mLinks
+                    })}` : null,
+                    ' ',
+                    formatMessage({
+                        id: getTranslation('popUpWarning.warning.publish-question'),
+                        defaultMessage: 'Do you still want to publish?'
+                    })
+                ]
+            }),
+            confirmLabel: confirmLabel === 'publish' ? formatMessage({
+                id: 'app.utils.publish',
+                defaultMessage: 'Publish'
+            }) : formatMessage({
+                id: getTranslation('popUpwarning.warning.has-draft-relations.button-confirm'),
+                defaultMessage: 'Publish without relations'
             }),
             onConfirm: async ()=>{
                 await performPublish();
@@ -1204,5 +1292,5 @@ const DEFAULT_ACTIONS = [
     DiscardAction
 ];
 
-export { DEFAULT_ACTIONS, DocumentActionButton, DocumentActions, DocumentActionsMenu };
+export { DEFAULT_ACTIONS, DocumentActionButton, DocumentActions, DocumentActionsMenu, openPublishConfirmDialog };
 //# sourceMappingURL=DocumentActions.mjs.map