@strapi/content-manager 5.48.1 → 5.50.0

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

@@ -21,8 +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.
@@ -71,18 +77,23 @@ const DocumentActions = ({ actions })=>{
         return null;
     }
     const addHintTooltip = (action, children)=>{
-        return !action.disabled ? /*#__PURE__*/ jsx(Tooltip, {
-            label: formatMessage({
-                id: 'content-manager.containers.EditView.saveHint',
-                defaultMessage: 'Ctrl / Cmd + Enter to {action}'
-            }, {
-                action: action.label
-            }),
+        if (action.disabled) {
+            return children;
+        }
+        const hint = action.type === 'publish' ? formatMessage({
+            id: 'content-manager.containers.EditView.publishHint',
+            defaultMessage: 'Ctrl / Cmd + Shift + Enter to publish'
+        }) : formatMessage({
+            id: 'content-manager.containers.EditView.saveHint',
+            defaultMessage: 'Ctrl / Cmd + Enter to save'
+        });
+        return /*#__PURE__*/ jsx(Tooltip, {
+            label: hint,
             children: /*#__PURE__*/ jsx(Flex, {
                 width: "100%",
                 children: children
             })
-        }) : children;
+        });
     };
     const primaryActionContent = /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -129,15 +140,15 @@ const DocumentActions = ({ actions })=>{
                 alignItems: "stretch",
                 direction: "column",
                 children: secondaryAction.type === 'publish' ? /*#__PURE__*/ jsx(tours.contentManager.Publish, {
-                    children: /*#__PURE__*/ jsx(DocumentActionButton, {
+                    children: addHintTooltip(secondaryAction, /*#__PURE__*/ jsx(DocumentActionButton, {
                         ...secondaryAction,
                         variant: secondaryAction.variant || 'secondary'
-                    })
-                }) : /*#__PURE__*/ jsx(DocumentActionButton, {
+                    }))
+                }) : addHintTooltip(secondaryAction, /*#__PURE__*/ jsx(DocumentActionButton, {
                     ...secondaryAction,
                     variant: secondaryAction.variant || 'secondary',
                     buttonType: "submit"
-                })
+                }))
             }) : null
         ]
     });
@@ -145,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);
@@ -295,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) {
@@ -309,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,
@@ -318,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: [
@@ -337,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'
                             })
@@ -405,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);
@@ -422,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);
@@ -448,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,
@@ -501,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({
@@ -654,31 +696,61 @@ 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;
-    // Auto-publish on CMD+Enter on macOS, and CTRL+Enter on Windows/Linux
+    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.
+   *  - the form is submitting
+   *  - the active tab is the published tab
+   *  - 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 || 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(()=>{
         if (!schema?.options?.draftAndPublish) {
             return;
         }
         const handleKeyDown = (e)=>{
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault();
-                {
-                    performPublish();
-                }
+            if (getEditViewShortcut(e) !== 'publish') {
+                return;
+            }
+            e.preventDefault();
+            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) {
@@ -692,35 +764,61 @@ const transformData = (data)=>{
             'preview',
             'relation-modal'
         ],
-        /**
-     * Disabled when:
-     *  - currently if you're cloning a document we don't support publish & clone at the same time.
-     *  - the form is submitting
-     *  - the active tab is the published tab
-     *  - the document is already published & not modified
-     *  - the document is being created & not modified
-     *  - the user doesn't have the permission to publish
-     */ disabled: isCloning || isSubmitting || isLoadingDraftRelations || activeTab === 'published' || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish,
+        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();
@@ -779,6 +877,12 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     const { schema } = useDoc();
     const suitableSchema = fromRelationModal ? relationalModalSchema : schema;
     const hasDraftAndPublished = suitableSchema?.options?.draftAndPublish ?? false;
+    /**
+   * Disabled when:
+   * - the form is submitting
+   * - the document is not modified & we're not cloning (you can save a clone entity straight away)
+   * - the active tab is the published tab
+   */ const isDisabled = isSubmitting || !modified && !isCloning || activeTab === 'published';
     const handleUpdate = async ()=>{
         setSubmitting(true);
         try {
@@ -928,14 +1032,32 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
             }
         }
     };
+    // Save a draft on CMD+Enter (macOS) / CTRL+Enter (Windows/Linux), with CMD/CTRL+S as an alias.
+    // Publishing (CMD/CTRL+Shift+Enter) is handled by the PublishAction.
+    // `handleUpdate` is recreated on every render, so we read the latest version (and the latest
+    // disabled state) through refs and register the listener only once.
+    const handleUpdateRef = React.useRef(handleUpdate);
+    handleUpdateRef.current = handleUpdate;
+    const isDisabledRef = React.useRef(isDisabled);
+    isDisabledRef.current = isDisabled;
+    React.useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if (getEditViewShortcut(e) !== 'save') {
+                return;
+            }
+            e.preventDefault();
+            if (!isDisabledRef.current) {
+                handleUpdateRef.current();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
     return {
         loading: isLoading,
-        /**
-     * Disabled when:
-     * - the form is submitting
-     * - the document is not modified & we're not cloning (you can save a clone entity straight away)
-     * - the active tab is the published tab
-     */ disabled: isSubmitting || !modified && !isCloning || activeTab === 'published',
+        disabled: isDisabled,
         label: formatMessage({
             id: 'global.save',
             defaultMessage: 'Save'
@@ -1170,5 +1292,5 @@ const DEFAULT_ACTIONS = [
     DiscardAction
 ];
 
-export { DEFAULT_ACTIONS, DocumentActionButton, DocumentActions, DocumentActionsMenu };
+export { DEFAULT_ACTIONS, DocumentActionButton, DocumentActions, DocumentActionsMenu, openPublishConfirmDialog };
 //# sourceMappingURL=DocumentActions.mjs.map