@strapi/content-manager 0.0.0-next.990615b2ed4dd2f0589b4fda91418246d7b9450e → 0.0.0-next.9b24f8f26a4217f9f2873c24ebbdfdcb25de62d3

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

@@ -1,7 +1,7 @@
 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, Button, VisuallyHidden, Dialog, Modal, Typography, Radio } from '@strapi/design-system';
+import { tours, useNotification, useAPIErrorHandler, useQueryParams, useForm, useGuidedTour, GUIDED_TOUR_REQUIRED_ACTIONS } from '@strapi/admin/strapi-admin';
+import { Flex, Button, Menu, VisuallyHidden, Dialog, Modal, Typography, Radio, Tooltip } from '@strapi/design-system';
 import { More, Cross, WarningCircle } from '@strapi/icons';
 import mapValues from 'lodash/fp/mapValues';
 import get from 'lodash/get';
@@ -9,7 +9,6 @@ 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 { useDocumentRBAC } from '../../../features/DocumentRBAC.mjs';
@@ -19,8 +18,9 @@ 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, useUpdateDocumentMutation } from '../../../services/documents.mjs';
-import { isBaseQueryError, buildValidParams } from '../../../utils/api.mjs';
+import { buildValidParams, isBaseQueryError } from '../../../utils/api.mjs';
 import { getTranslation } from '../../../utils/translations.mjs';
+import { handleInvisibleAttributes } from '../utils/data.mjs';
 import { useRelationModal } from './FormInputs/Relations/RelationModal.mjs';
 
 const connectRelationToParent = (parentDataToUpdate, fieldToConnect, data, fieldToConnectUID)=>{
@@ -69,36 +69,62 @@ const DocumentActions = ({ actions })=>{
     if (!primaryAction) {
         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
+            }),
+            children: /*#__PURE__*/ jsx(Flex, {
+                width: "100%",
+                children: children
+            })
+        }) : children;
+    };
     return /*#__PURE__*/ jsxs(Flex, {
         direction: "column",
         gap: 2,
         alignItems: "stretch",
         width: "100%",
         children: [
-            /*#__PURE__*/ jsxs(Flex, {
-                gap: 2,
-                children: [
-                    /*#__PURE__*/ jsx(DocumentActionButton, {
-                        ...primaryAction,
-                        variant: primaryAction.variant || 'default'
-                    }),
-                    restActions.length > 0 ? /*#__PURE__*/ jsx(DocumentActionsMenu, {
-                        actions: restActions,
-                        label: formatMessage({
-                            id: 'content-manager.containers.edit.panels.default.more-actions',
-                            defaultMessage: 'More document actions'
-                        })
-                    }) : null
-                ]
+            /*#__PURE__*/ jsx(tours.contentManager.Publish, {
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    gap: 2,
+                    children: [
+                        primaryAction.label === 'Publish' ? addHintTooltip(primaryAction, /*#__PURE__*/ jsx(DocumentActionButton, {
+                            ...primaryAction,
+                            variant: primaryAction.variant || 'default'
+                        })) : addHintTooltip(primaryAction, /*#__PURE__*/ jsx(DocumentActionButton, {
+                            ...primaryAction,
+                            variant: primaryAction.variant || 'default',
+                            buttonType: "submit"
+                        })),
+                        restActions.length > 0 ? /*#__PURE__*/ jsx(DocumentActionsMenu, {
+                            actions: restActions,
+                            label: formatMessage({
+                                id: 'content-manager.containers.edit.panels.default.more-actions',
+                                defaultMessage: 'More document actions'
+                            })
+                        }) : null
+                    ]
+                })
             }),
-            secondaryAction ? /*#__PURE__*/ jsx(DocumentActionButton, {
+            secondaryAction ? secondaryAction.label === 'Publish' ? /*#__PURE__*/ jsx(tours.contentManager.Publish, {
+                children: /*#__PURE__*/ jsx(DocumentActionButton, {
+                    ...secondaryAction,
+                    variant: secondaryAction.variant || 'secondary'
+                })
+            }) : /*#__PURE__*/ jsx(DocumentActionButton, {
                 ...secondaryAction,
-                variant: secondaryAction.variant || 'secondary'
+                variant: secondaryAction.variant || 'secondary',
+                buttonType: "submit"
             }) : null
         ]
     });
 };
-const DocumentActionButton = (action)=>{
+const DocumentActionButton = ({ buttonType = 'button', ...action })=>{
     const [dialogId, setDialogId] = React.useState(null);
     const { toggleNotification } = useNotification();
     const handleClick = (action)=>async (e)=>{
@@ -137,6 +163,7 @@ const DocumentActionButton = (action)=>{
                 paddingTop: "7px",
                 paddingBottom: "7px",
                 loading: action.loading,
+                type: buttonType,
                 children: action.label
             }),
             action.dialog?.type === 'dialog' ? /*#__PURE__*/ jsx(DocumentActionConfirmDialog, {
@@ -153,11 +180,6 @@ const DocumentActionButton = (action)=>{
         ]
     });
 };
-const MenuItem = styled(Menu.Item)`
-  &:hover {
-    background: ${({ theme, isVariantDanger, isDisabled })=>isVariantDanger && !isDisabled ? theme.colors.danger100 : 'neutral'};
-  }
-`;
 const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })=>{
     const [isOpen, setIsOpen] = React.useState(false);
     const [dialogId, setDialogId] = React.useState(null);
@@ -219,27 +241,19 @@ const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })
                 popoverPlacement: "bottom-end",
                 children: [
                     actions.map((action)=>{
-                        return /*#__PURE__*/ jsx(MenuItem, {
+                        return /*#__PURE__*/ jsx(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__*/ jsx(Flex, {
                                 justifyContent: "space-between",
                                 gap: 4,
-                                children: /*#__PURE__*/ jsxs(Flex, {
-                                    color: !action.disabled ? convertActionVariantToColor(action.variant) : 'inherit',
+                                children: /*#__PURE__*/ jsx(Flex, {
                                     gap: 2,
                                     tag: "span",
-                                    children: [
-                                        /*#__PURE__*/ jsx(Flex, {
-                                            tag: "span",
-                                            color: !action.disabled ? convertActionVariantToIconColor(action.variant) : 'inherit',
-                                            children: action.icon
-                                        }),
-                                        action.label
-                                    ]
+                                    children: action.label
                                 })
                             })
                         }, action.id);
@@ -267,30 +281,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 } = useIntl();
     const handleClose = async ()=>{
@@ -396,7 +386,10 @@ const transformData = (data)=>{
     const isCloning = useMatch(CLONE_PATH) !== null;
     const { id } = useParams();
     const { formatMessage } = useIntl();
-    const canPublish = useDocumentRBAC('PublishAction', ({ canPublish })=>canPublish);
+    const { canPublish, canReadFields } = useDocumentRBAC('PublishAction', ({ canPublish, canReadFields })=>({
+            canPublish,
+            canReadFields
+        }));
     const { publish, isLoading } = useDocumentActions();
     const onPreview = usePreviewContext('UpdateAction', (state)=>state.onPreview, false);
     const [countDraftRelations, { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }] = useLazyGetDraftRelationCountQuery();
@@ -409,7 +402,9 @@ const transformData = (data)=>{
     const validate = useForm('PublishAction', (state)=>state.validate);
     const setErrors = useForm('PublishAction', (state)=>state.setErrors);
     const formValues = useForm('PublishAction', ({ values })=>values);
+    const initialValues = useForm('PublishAction', ({ initialValues })=>initialValues);
     const resetForm = useForm('PublishAction', ({ resetForm })=>resetForm);
+    const { currentDocument: { components } } = useDocumentContext('PublishAction');
     // 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;
@@ -418,6 +413,7 @@ const transformData = (data)=>{
     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 dispatchGuidedTour = useGuidedTour('PublishAction', (s)=>s.dispatch);
     const { currentDocumentMeta } = useDocumentContext('PublishAction');
     const [updateDocumentMutation] = useUpdateDocumentMutation();
     const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
@@ -515,9 +511,7 @@ const transformData = (data)=>{
     });
     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;
-    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const performPublish = async ()=>{
         setSubmitting(true);
         try {
@@ -525,24 +519,55 @@ 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 = schema && Object.keys(schema.attributes).some((fieldName)=>{
+                    const attribute = schema.attributes[fieldName];
+                    // For components, check if any of the component fields are readable
+                    if (attribute.type === 'component') {
+                        const componentFields = (canReadFields ?? []).filter((field)=>field.startsWith(`${fieldName}.`));
+                        return componentFields.length === 0;
+                    }
+                    // For regular fields, check if the field itself is readable
+                    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 } = handleInvisibleAttributes(transformData(formValues), {
+                schema,
+                initialValues,
+                components
+            });
             const res = await publish({
                 collectionType,
                 model,
                 documentId,
                 params: currentDocumentMeta.params
-            }, transformData(formValues));
-            // Reset form if successful
+            }, data);
+            // Reset form with current values as new initial values (clears errors/submitting and sets modified to false)
             if ('data' in res) {
-                resetForm();
+                resetForm(formValues);
+                dispatchGuidedTour({
+                    type: 'set_completed_actions',
+                    payload: [
+                        GUIDED_TOUR_REQUIRED_ACTIONS.contentManager.createContent
+                    ]
+                });
             }
             if ('data' in res && collectionType !== SINGLE_TYPES) {
                 /**
@@ -616,6 +641,31 @@ const transformData = (data)=>{
     // 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
+    React.useEffect(()=>{
+        if (!schema?.options?.draftAndPublish) {
+            return;
+        }
+        const handleKeyDown = (e)=>{
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                {
+                    performPublish();
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        hasDraftRelations,
+        performPublish,
+        schema?.options?.draftAndPublish
+    ]);
+    if (!schema?.options?.draftAndPublish) {
+        return null;
+    }
     return {
         loading: isLoading,
         position: [
@@ -666,6 +716,7 @@ PublishAction.position = [
     'relation-modal'
 ];
 const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
+    const dispatchGuidedTour = useGuidedTour('UpdateAction', (s)=>s.dispatch);
     const navigate = useNavigate();
     const { toggleNotification } = useNotification();
     const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
@@ -673,12 +724,14 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     const isCloning = cloneMatch !== null;
     const { formatMessage } = useIntl();
     const { create, update, clone, isLoading } = useDocumentActions();
+    const { currentDocument: { components } } = useDocumentContext('UpdateAction');
     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 initialValues = useForm('UpdateAction', ({ initialValues })=>initialValues);
     const document = useForm('UpdateAction', ({ values })=>values);
     const validate = useForm('UpdateAction', (state)=>state.validate);
     const setErrors = useForm('UpdateAction', (state)=>state.setErrors);
@@ -686,6 +739,7 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     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 relationalModalSchema = useRelationModal('UpdateAction', (state)=>state.currentDocument.schema, 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);
@@ -703,7 +757,8 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     }, {
         skip: !parentDocumentMetaToUpdate
     });
-    const handleUpdate = React.useCallback(async ()=>{
+    const { schema } = useDoc();
+    const handleUpdate = async ()=>{
         setSubmitting(true);
         try {
             if (!modified) {
@@ -739,22 +794,32 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
                     setErrors(formatValidationErrors(res.error));
                 }
             } else if (documentId || collectionType === SINGLE_TYPES) {
+                const { data } = handleInvisibleAttributes(transformData(document), {
+                    schema: fromRelationModal ? relationalModalSchema : schema,
+                    initialValues,
+                    components
+                });
                 const res = await update({
                     collectionType,
                     model,
                     documentId,
                     params: currentDocumentMeta.params
-                }, transformData(document));
+                }, data);
                 if ('error' in res && isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                     setErrors(formatValidationErrors(res.error));
                 } else {
-                    resetForm();
+                    resetForm(document);
                 }
             } else {
+                const { data } = handleInvisibleAttributes(transformData(document), {
+                    schema: fromRelationModal ? relationalModalSchema : schema,
+                    initialValues,
+                    components
+                });
                 const res = await create({
                     model,
                     params: currentDocumentMeta.params
-                }, transformData(document));
+                }, data);
                 if ('data' in res && collectionType !== SINGLE_TYPES) {
                     if (fromRelationModal) {
                         const createdRelation = {
@@ -819,59 +884,18 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
                 }
             }
         } finally{
+            dispatchGuidedTour({
+                type: 'set_completed_actions',
+                payload: [
+                    GUIDED_TOUR_REQUIRED_ACTIONS.contentManager.createContent
+                ]
+            });
             setSubmitting(false);
             if (onPreview) {
                 onPreview();
             }
         }
-    }, [
-        setSubmitting,
-        modified,
-        validate,
-        isCloning,
-        documentId,
-        collectionType,
-        toggleNotification,
-        formatMessage,
-        clone,
-        model,
-        cloneMatch?.params.origin,
-        currentDocumentMeta.params,
-        document,
-        navigate,
-        rawQuery,
-        setErrors,
-        formatValidationErrors,
-        update,
-        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(()=>{
-        const handleKeyDown = (e)=>{
-            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault();
-                handleUpdate();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return ()=>{
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [
-        handleUpdate
-    ]);
+    };
     return {
         loading: isLoading,
         /**