@strapi/content-manager 5.48.1 → 5.50.0

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

@@ -23,9 +23,14 @@ 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 draftRelationCounts = require('../utils/draftRelationCounts.js');
+var keyboardShortcuts = require('../utils/keyboardShortcuts.js');
 var RelationModal = require('./FormInputs/Relations/RelationModal.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -42,14 +47,22 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var mapValues__default = /*#__PURE__*/_interopDefault(mapValues);
+var get__default = /*#__PURE__*/_interopDefault(get);
+var merge__default = /*#__PURE__*/_interopDefault(merge);
+var set__default = /*#__PURE__*/_interopDefault(set);
 
+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.
    * This happens in particular when in the parentDocument you have created
    * a new component without saving.
-   */ const isFieldPresent = !!get(parentDataToUpdate, fieldToConnect);
+   */ const isFieldPresent = !!get__default.default(parentDataToUpdate, fieldToConnect);
     const fieldToConnectPath = isFieldPresent ? fieldToConnect : fieldToConnect.split('.').slice(0, -1).join('.');
     const fieldToConnectValue = isFieldPresent ? {
         connect: [
@@ -73,8 +86,8 @@ const connectRelationToParent = (parentDataToUpdate, fieldToConnect, data, field
         // 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 objectToConnect = set__default.default({}, fieldToConnectPath, fieldToConnectValue);
+    return merge__default.default(parentDataToUpdate, objectToConnect);
 };
 const DocumentActions = ({ actions })=>{
     const { formatMessage } = reactIntl.useIntl();
@@ -92,18 +105,23 @@ const DocumentActions = ({ actions })=>{
         return null;
     }
     const addHintTooltip = (action, children)=>{
-        return !action.disabled ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.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__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+            label: hint,
             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                 width: "100%",
                 children: children
             })
-        }) : children;
+        });
     };
     const primaryActionContent = /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
@@ -150,15 +168,15 @@ const DocumentActions = ({ actions })=>{
                 alignItems: "stretch",
                 direction: "column",
                 children: secondaryAction.type === 'publish' ? /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.tours.contentManager.Publish, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
+                    children: addHintTooltip(secondaryAction, /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
                         ...secondaryAction,
                         variant: secondaryAction.variant || 'secondary'
-                    })
-                }) : /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
+                    }))
+                }) : addHintTooltip(secondaryAction, /*#__PURE__*/ jsxRuntime.jsx(DocumentActionButton, {
                     ...secondaryAction,
                     variant: secondaryAction.variant || 'secondary',
                     buttonType: "submit"
-                })
+                }))
             }) : null
         ]
     });
@@ -166,6 +184,24 @@ const DocumentActions = ({ actions })=>{
 const DocumentActionButton = ({ buttonType = 'button', ...action })=>{
     const [dialogId, setDialogId] = React__namespace.useState(null);
     const { toggleNotification } = strapiAdmin.useNotification();
+    React__namespace.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);
@@ -316,7 +352,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 } = reactIntl.useIntl();
     const handleClose = async ()=>{
         if (onCancel) {
@@ -330,6 +366,28 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
         }
         onClose();
     };
+    const dialogBody = bodyIcon ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.WarningCircle, {
+                    width: "24px",
+                    height: "24px",
+                    fill: bodyIcon === 'danger' ? 'danger600' : 'primary600'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                id: "confirm-description",
+                tag: "p",
+                variant: "omega",
+                textAlign: "center",
+                children: content
+            })
+        ]
+    }) : content;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
         open: isOpen,
         onOpenChange: handleClose,
@@ -339,7 +397,7 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
                     children: title
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Body, {
-                    children: content
+                    children: dialogBody
                 }),
                 /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Footer, {
                     children: [
@@ -358,7 +416,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'
                             })
@@ -406,7 +464,7 @@ const transformData = (data)=>{
         if ('apiData' in data) {
             return data.apiData;
         }
-        return mapValues(transformData)(data);
+        return mapValues__default.default(transformData)(data);
     }
     return data;
 };
@@ -426,10 +484,11 @@ const transformData = (data)=>{
             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 onPreview = Preview.usePreviewContext('PublishAction', (state)=>state.onPreview, false);
+    const [countDraftRelations, { isError: isErrorDraftRelations }] = documents.useGetDraftRelationCountQuery();
+    const [localDraftRelationCounts, setLocalDraftRelationCounts] = React__namespace.useState(draftRelationCounts.EMPTY_DRAFT_RELATION_COUNTS);
+    const [serverDraftRelationCounts, setServerDraftRelationCounts] = React__namespace.useState(draftRelationCounts.EMPTY_DRAFT_RELATION_COUNTS);
+    const [isFetchingDraftRelations, setIsFetchingDraftRelations] = React__namespace.useState(false);
     const [{ rawQuery }] = strapiAdmin.useQueryParams();
     const modified = strapiAdmin.useForm('PublishAction', ({ modified })=>modified);
     const setSubmitting = strapiAdmin.useForm('PublishAction', ({ setSubmitting })=>setSubmitting);
@@ -443,6 +502,8 @@ const transformData = (data)=>{
     // 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 isRelationModalOpen = RelationModal.useRelationModal('PublishAction', (state)=>state.state.isModalOpen, false);
+    const publishConfirmScope = fromRelationModal ? 'relation-modal' : onPreview ? 'preview' : 'panel';
     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);
@@ -469,49 +530,19 @@ const transformData = (data)=>{
         formatMessage
     ]);
     React__namespace.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(draftRelationCounts.countLocalDraftRelations(formValues, schema, components, model));
     }, [
-        documentId,
-        modified,
+        components,
         formValues,
-        setLocalCountOfDraftRelations
+        model,
+        schema
     ]);
-    React__namespace.useEffect(()=>{
-        if (!document || !document.documentId || isListView) {
+    const fetchDraftRelationsCount = React__namespace.useCallback(async ()=>{
+        if (!document?.documentId || isListView) {
             return;
         }
-        const fetchDraftRelationsCount = async ()=>{
+        setIsFetchingDraftRelations(true);
+        try {
             const { data, error } = await countDraftRelations({
                 collectionType,
                 model,
@@ -522,18 +553,36 @@ const transformData = (data)=>{
                 throw error;
             }
             if (data) {
-                setServerCountOfDraftRelations(data.data);
+                setServerDraftRelationCounts(draftRelationCounts.normalizeDraftRelationCounts(data));
             }
-        };
-        fetchDraftRelationsCount();
+        } finally{
+            setIsFetchingDraftRelations(false);
+        }
     }, [
-        isListView,
-        document,
-        documentId,
-        countDraftRelations,
         collectionType,
-        model,
-        currentDocumentMeta.params
+        countDraftRelations,
+        currentDocumentMeta.params,
+        document?.documentId,
+        documentId,
+        isListView,
+        model
+    ]);
+    React__namespace.useEffect(()=>{
+        fetchDraftRelationsCount();
+    }, [
+        fetchDraftRelationsCount,
+        document?.updatedAt
+    ]);
+    React__namespace.useEffect(()=>{
+        const handleWindowFocus = ()=>{
+            fetchDraftRelationsCount();
+        };
+        window.addEventListener('focus', handleWindowFocus);
+        return ()=>{
+            window.removeEventListener('focus', handleWindowFocus);
+        };
+    }, [
+        fetchDraftRelationsCount
     ]);
     const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
     const parentDocumentData = useDocument.useDocument({
@@ -675,31 +724,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__namespace.useCallback(()=>draftRelationCounts.resolveDraftRelationCounts(documentId, modified, draftRelationCounts.countLocalDraftRelations(getValues(), schema, components, model), serverDraftRelationCounts), [
+        components,
+        documentId,
+        getValues,
+        model,
+        modified,
+        schema,
+        serverDraftRelationCounts
+    ]);
+    const draftRelationCounts$1 = draftRelationCounts.resolveDraftRelationCounts(documentId, modified, localDraftRelationCounts, serverDraftRelationCounts);
+    const { hasUnpublishedRelations, hasDraftM2mLinks, dialogVariant, bodyIcon, confirmLabel } = draftRelationCounts.getDraftRelationsPublishState(draftRelationCounts$1);
+    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__namespace.useEffect(()=>{
         if (!schema?.options?.draftAndPublish) {
             return;
         }
         const handleKeyDown = (e)=>{
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault();
-                {
-                    performPublish();
-                }
+            if (keyboardShortcuts.getEditViewShortcut(e) !== 'publish') {
+                return;
+            }
+            e.preventDefault();
+            if (!fromRelationModal && isRelationModalOpen) {
+                return;
+            }
+            if (isDisabled) {
+                return;
             }
+            if (draftRelationCounts.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) {
@@ -713,35 +792,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 (draftRelationCounts.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: translations.getTranslation(`popUpwarning.warning.bulk-has-draft-relations.title`),
+                id: translations.getTranslation('popUpWarning.warning.has-draft-relations.title'),
                 defaultMessage: 'Confirmation'
             }),
-            content: formatMessage({
-                id: translations.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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    hasUnpublishedRelations ? formatMessage({
+                        id: translations.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$1.unpublishedRelations
+                    }) : formatMessage({
+                        id: translations.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$1.draftM2mLinks
+                    }),
+                    hasUnpublishedRelations && hasDraftM2mLinks ? ` ${formatMessage({
+                        id: translations.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$1.draftM2mLinks
+                    })}` : null,
+                    ' ',
+                    formatMessage({
+                        id: translations.getTranslation('popUpWarning.warning.publish-question'),
+                        defaultMessage: 'Do you still want to publish?'
+                    })
+                ]
+            }),
+            confirmLabel: confirmLabel === 'publish' ? formatMessage({
+                id: 'app.utils.publish',
+                defaultMessage: 'Publish'
+            }) : formatMessage({
+                id: translations.getTranslation('popUpwarning.warning.has-draft-relations.button-confirm'),
+                defaultMessage: 'Publish without relations'
             }),
             onConfirm: async ()=>{
                 await performPublish();
@@ -800,6 +905,12 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     const { schema } = useDocument.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 {
@@ -949,14 +1060,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__namespace.useRef(handleUpdate);
+    handleUpdateRef.current = handleUpdate;
+    const isDisabledRef = React__namespace.useRef(isDisabled);
+    isDisabledRef.current = isDisabled;
+    React__namespace.useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if (keyboardShortcuts.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'
@@ -1195,4 +1324,5 @@ exports.DEFAULT_ACTIONS = DEFAULT_ACTIONS;
 exports.DocumentActionButton = DocumentActionButton;
 exports.DocumentActions = DocumentActions;
 exports.DocumentActionsMenu = DocumentActionsMenu;
+exports.openPublishConfirmDialog = openPublishConfirmDialog;
 //# sourceMappingURL=DocumentActions.js.map