@strapi/content-manager 0.0.0-experimental.d1602f22dc638a4c3c5084965fd6126fff5e9d4f → 0.0.0-experimental.d2a56e52af31fcf0f0c582a5a2e58e310966e96b

package/dist/admin/chunks/{index-BRlRBRLb.js → index-BE7PI9Wp.mjs}

@@ -1,6 +1,6 @@
 import { Cross, WarningCircle, More, ListPlus, Pencil, Trash, Check, CheckCircle, ArrowsCounterClockwise, CrossCircle, ChevronRight, Duplicate, ClockCounterClockwise, Feather } from '@strapi/icons';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useStrapiApp, createContext, useQueryParams, useAuth, useRBAC, Page, adminApi, translatedErrors, useNotification, useAPIErrorHandler, getYupValidationErrors, useForm, useTracking, useGuidedTour, BackButton, DescriptionComponentRenderer, useTable, Table } from '@strapi/admin/strapi-admin';
+import { useStrapiApp, adminApi, translatedErrors, useNotification, useAPIErrorHandler, useQueryParams, getYupValidationErrors, useForm, createContext, useAuth, useRBAC, Page, useTracking, useGuidedTour, BackButton, DescriptionComponentRenderer, useTable, Table } from '@strapi/admin/strapi-admin';
 import * as React from 'react';
 import { lazy } from 'react';
 import { Menu, Flex, Typography, Radio, Button, VisuallyHidden, Dialog, Modal, Status, Box, SingleSelect, SingleSelectOption, IconButton, RawTable, Loader, Tbody, Tr, Td, Tooltip, LinkButton } from '@strapi/design-system';
@@ -15,6 +15,7 @@ import pipe from 'lodash/fp/pipe';
 import { stringify } from 'qs';
 import { intervalToDuration, isPast } from 'date-fns';
 import { createSlice, combineReducers } from '@reduxjs/toolkit';
+import 'prismjs';
 
 const PLUGIN_ID = 'content-manager';
 const PERMISSIONS = [
@@ -35,6 +36,9 @@ const INJECTION_ZONES = {
         deleteModalAdditionalInfos: [],
         publishModalAdditionalInfos: [],
         unpublishModalAdditionalInfos: []
+    },
+    preview: {
+        actions: []
     }
 };
 /**
@@ -95,102 +99,6 @@ const DOCUMENT_META_FIELDS = [
 const SINGLE_TYPES = 'single-types';
 const COLLECTION_TYPES = 'collection-types';
 
-const [DocumentRBACProvider, useDocumentRBAC] = createContext('DocumentRBAC', {
-    canCreate: false,
-    canCreateFields: [],
-    canDelete: false,
-    canPublish: false,
-    canRead: false,
-    canReadFields: [],
-    canUpdate: false,
-    canUpdateFields: [],
-    canUserAction: ()=>false,
-    isLoading: false
-});
-/**
- * @internal This component is not meant to be used outside of the Content Manager plugin.
- * It depends on knowing the slug/model of the content-type using the params of the URL.
- * If you do use the hook outside of the context, we default to `false` for all actions.
- *
- * It then creates an list of `can{Action}` that are passed to the context for consumption
- * within the app to enforce RBAC.
- */ const DocumentRBAC = ({ children, permissions })=>{
-    const { slug } = useParams();
-    if (!slug) {
-        throw new Error('Cannot find the slug param in the URL');
-    }
-    const [{ rawQuery }] = useQueryParams();
-    const userPermissions = useAuth('DocumentRBAC', (state)=>state.permissions);
-    const contentTypePermissions = React.useMemo(()=>{
-        const contentTypePermissions = userPermissions.filter((permission)=>permission.subject === slug);
-        return contentTypePermissions.reduce((acc, permission)=>{
-            const [action] = permission.action.split('.').slice(-1);
-            return {
-                ...acc,
-                [action]: [
-                    permission
-                ]
-            };
-        }, {});
-    }, [
-        slug,
-        userPermissions
-    ]);
-    const { isLoading, allowedActions } = useRBAC(contentTypePermissions, permissions ?? undefined, // TODO: useRBAC context should be typed and built differently
-    // We are passing raw query as context to the hook so that it can
-    // rely on the locale provided from DocumentRBAC for its permission calculations.
-    rawQuery);
-    const canCreateFields = !isLoading && allowedActions.canCreate ? extractAndDedupeFields(contentTypePermissions.create) : [];
-    const canReadFields = !isLoading && allowedActions.canRead ? extractAndDedupeFields(contentTypePermissions.read) : [];
-    const canUpdateFields = !isLoading && allowedActions.canUpdate ? extractAndDedupeFields(contentTypePermissions.update) : [];
-    /**
-   * @description Checks if the user can perform an action on a field based on the field names
-   * provided as the second argument.
-   */ const canUserAction = React.useCallback((fieldName, fieldsUserCanAction, fieldType)=>{
-        const name = removeNumericalStrings(fieldName.split('.'));
-        const componentFieldNames = fieldsUserCanAction// filter out fields that aren't components (components are dot separated)
-        .filter((field)=>field.split('.').length > 1);
-        if (fieldType === 'component') {
-            // check if the field name is within any of those arrays
-            return componentFieldNames.some((field)=>{
-                return field.includes(name.join('.'));
-            });
-        }
-        /**
-       * The field is within a component.
-       */ if (name.length > 1) {
-            return componentFieldNames.includes(name.join('.'));
-        }
-        /**
-       * just a regular field
-       */ return fieldsUserCanAction.includes(fieldName);
-    }, []);
-    if (isLoading) {
-        return /*#__PURE__*/ jsx(Page.Loading, {});
-    }
-    return /*#__PURE__*/ jsx(DocumentRBACProvider, {
-        isLoading: isLoading,
-        canCreateFields: canCreateFields,
-        canReadFields: canReadFields,
-        canUpdateFields: canUpdateFields,
-        canUserAction: canUserAction,
-        ...allowedActions,
-        children: children
-    });
-};
-/**
- * @internal it's really small, but it's used three times in a row and DRY for something this straight forward.
- */ const extractAndDedupeFields = (permissions = [])=>permissions.flatMap((permission)=>permission.properties?.fields).filter((field, index, arr)=>arr.indexOf(field) === index && typeof field === 'string');
-/**
- * @internal removes numerical strings from arrays.
- * @example
- * ```ts
- * const name = 'a.0.b';
- * const res = removeNumericalStrings(name.split('.'));
- * console.log(res); // ['a', 'b']
- * ```
- */ const removeNumericalStrings = (arr)=>arr.filter((item)=>isNaN(Number(item)));
-
 const BLOCK_LIST_ATTRIBUTE_KEYS = [
     '__component',
     '__temp_key__'
@@ -1501,7 +1409,7 @@ const checkIfAttributeIsDisplayable = (attribute)=>{
     const { toggleNotification } = useNotification();
     const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
     const { formatMessage } = useIntl();
-    const { currentData: data, isLoading: isLoadingDocument, isFetching: isFetchingDocument, error } = useGetDocumentQuery(args, {
+    const { currentData: data, isLoading: isLoadingDocument, isFetching: isFetchingDocument, error, refetch } = useGetDocumentQuery(args, {
         ...opts,
         skip: !args.documentId && args.collectionType !== SINGLE_TYPES || opts?.skip
     });
@@ -1600,7 +1508,8 @@ const checkIfAttributeIsDisplayable = (attribute)=>{
         schemas,
         validate,
         getTitle,
-        getInitialFormValues
+        getInitialFormValues,
+        refetch
     };
 };
 /* -------------------------------------------------------------------------------------------------
@@ -1673,6 +1582,144 @@ const checkIfAttributeIsDisplayable = (attribute)=>{
     };
 };
 
+const [DocumentProvider, useDocumentContext] = createContext('DocumentContext');
+/**
+ * TODO: Document in contributor docs, Add unit test
+ *
+ * This context provider and its associated hook are used to access a document at its root level
+ * and expose a function to change the current document being viewed to one of the root level docuemnt's relations.
+ *
+ * The useDocumentContext hook exposes:
+ * - meta: information about the currentDocument,
+ * - document: the actual document,
+ * - changeDocument: a function to change the current document to one of its relations.
+ * - rootDocumentMeta: information about the root level document (current page)
+ */ const DocumentContextProvider = ({ children, initialDocument, onPreview })=>{
+    /**
+   * Initialize with the "root" document and expose a setter method to change to
+   * one of the root level document's relations.
+   */ const [currentDocumentMeta, changeDocument] = React.useState(initialDocument);
+    const params = React.useMemo(()=>buildValidParams(currentDocumentMeta.params ?? {}), [
+        currentDocumentMeta.params
+    ]);
+    const document = useDocument({
+        ...currentDocumentMeta,
+        params
+    });
+    const [documentHistory, setDocumentHistory] = React.useState([]);
+    return /*#__PURE__*/ jsx(DocumentProvider, {
+        changeDocument: changeDocument,
+        document: document,
+        rootDocumentMeta: {
+            documentId: initialDocument.documentId,
+            model: initialDocument.model,
+            collectionType: initialDocument.collectionType
+        },
+        meta: currentDocumentMeta,
+        documentHistory: documentHistory,
+        setDocumentHistory: setDocumentHistory,
+        onPreview: onPreview,
+        children: children
+    });
+};
+
+const [DocumentRBACProvider, useDocumentRBAC] = createContext('DocumentRBAC', {
+    canCreate: false,
+    canCreateFields: [],
+    canDelete: false,
+    canPublish: false,
+    canRead: false,
+    canReadFields: [],
+    canUpdate: false,
+    canUpdateFields: [],
+    canUserAction: ()=>false,
+    isLoading: false
+});
+/**
+ * @internal This component is not meant to be used outside of the Content Manager plugin.
+ * It depends on knowing the slug/model of the content-type using the params of the URL or the model if it is passed as arg.
+ * If you do use the hook outside of the context, we default to `false` for all actions.
+ *
+ * It then creates an list of `can{Action}` that are passed to the context for consumption
+ * within the app to enforce RBAC.
+ */ const DocumentRBAC = ({ children, permissions, model })=>{
+    const { slug } = useParams();
+    if (!slug && !model) {
+        throw new Error('Cannot find the slug param in the URL or the model prop is not provided.');
+    }
+    const contentTypeUid = model ?? slug;
+    const [{ rawQuery }] = useQueryParams();
+    const userPermissions = useAuth('DocumentRBAC', (state)=>state.permissions);
+    const contentTypePermissions = React.useMemo(()=>{
+        const contentTypePermissions = userPermissions.filter((permission)=>permission.subject === contentTypeUid);
+        return contentTypePermissions.reduce((acc, permission)=>{
+            const [action] = permission.action.split('.').slice(-1);
+            return {
+                ...acc,
+                [action]: [
+                    permission
+                ]
+            };
+        }, {});
+    }, [
+        contentTypeUid,
+        userPermissions
+    ]);
+    const { isLoading, allowedActions } = useRBAC(contentTypePermissions, permissions ?? undefined, // TODO: useRBAC context should be typed and built differently
+    // We are passing raw query as context to the hook so that it can
+    // rely on the locale provided from DocumentRBAC for its permission calculations.
+    rawQuery);
+    const canCreateFields = !isLoading && allowedActions.canCreate ? extractAndDedupeFields(contentTypePermissions.create) : [];
+    const canReadFields = !isLoading && allowedActions.canRead ? extractAndDedupeFields(contentTypePermissions.read) : [];
+    const canUpdateFields = !isLoading && allowedActions.canUpdate ? extractAndDedupeFields(contentTypePermissions.update) : [];
+    /**
+   * @description Checks if the user can perform an action on a field based on the field names
+   * provided as the second argument.
+   */ const canUserAction = React.useCallback((fieldName, fieldsUserCanAction, fieldType)=>{
+        const name = removeNumericalStrings(fieldName.split('.'));
+        const componentFieldNames = fieldsUserCanAction// filter out fields that aren't components (components are dot separated)
+        .filter((field)=>field.split('.').length > 1);
+        if (fieldType === 'component') {
+            // check if the field name is within any of those arrays
+            return componentFieldNames.some((field)=>{
+                return field.includes(name.join('.'));
+            });
+        }
+        /**
+       * The field is within a component.
+       */ if (name.length > 1) {
+            return componentFieldNames.includes(name.join('.'));
+        }
+        /**
+       * just a regular field
+       */ return fieldsUserCanAction.includes(fieldName);
+    }, []);
+    if (isLoading) {
+        return /*#__PURE__*/ jsx(Page.Loading, {});
+    }
+    return /*#__PURE__*/ jsx(DocumentRBACProvider, {
+        isLoading: isLoading,
+        canCreateFields: canCreateFields,
+        canReadFields: canReadFields,
+        canUpdateFields: canUpdateFields,
+        canUserAction: canUserAction,
+        ...allowedActions,
+        children: children
+    });
+};
+/**
+ * @internal it's really small, but it's used three times in a row and DRY for something this straight forward.
+ */ const extractAndDedupeFields = (permissions = [])=>permissions.flatMap((permission)=>permission.properties?.fields).filter((field, index, arr)=>arr.indexOf(field) === index && typeof field === 'string');
+/**
+ * @internal removes numerical strings from arrays.
+ * @example
+ * ```ts
+ * const name = 'a.0.b';
+ * const res = removeNumericalStrings(name.split('.'));
+ * console.log(res); // ['a', 'b']
+ * ```
+ */ const removeNumericalStrings = (arr)=>arr.filter((item)=>isNaN(Number(item)));
+
 const prefixPluginTranslations = (trad, pluginId)=>{
     return Object.keys(trad).reduce((acc, current)=>{
         acc[`${pluginId}.${current}`] = trad[current];
@@ -1714,7 +1761,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
     const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
     const navigate = useNavigate();
     const setCurrentStep = useGuidedTour('useDocumentActions', (state)=>state.setCurrentStep);
-    const [deleteDocument] = useDeleteDocumentMutation();
+    const [deleteDocument, { isLoading: isDeleting }] = useDeleteDocumentMutation();
     const _delete = React.useCallback(async ({ collectionType, model, documentId, params }, trackerProperty)=>{
         try {
             trackUsage('willDeleteEntry', trackerProperty);
@@ -1760,7 +1807,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         formatMessage,
         formatAPIError
     ]);
-    const [deleteManyDocuments] = useDeleteManyDocumentsMutation();
+    const [deleteManyDocuments, { isLoading: isDeletingMany }] = useDeleteManyDocumentsMutation();
     const deleteMany = React.useCallback(async ({ model, documentIds, params })=>{
         try {
             trackUsage('willBulkDeleteEntries');
@@ -1803,7 +1850,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         formatMessage,
         formatAPIError
     ]);
-    const [discardDocument] = useDiscardDocumentMutation();
+    const [discardDocument, { isLoading: isDiscardingDocument }] = useDiscardDocumentMutation();
     const discard = React.useCallback(async ({ collectionType, model, documentId, params })=>{
         try {
             const res = await discardDocument({
@@ -1842,10 +1889,12 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         formatMessage,
         toggleNotification
     ]);
-    const [publishDocument] = usePublishDocumentMutation();
+    const [publishDocument, { isLoading: isPublishing }] = usePublishDocumentMutation();
     const publish = React.useCallback(async ({ collectionType, model, documentId, params }, data)=>{
         try {
-            trackUsage('willPublishEntry');
+            trackUsage('willPublishEntry', {
+                documentId
+            });
             const res = await publishDocument({
                 collectionType,
                 model,
@@ -1862,7 +1911,9 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
                     error: res.error
                 };
             }
-            trackUsage('didPublishEntry');
+            trackUsage('didPublishEntry', {
+                documentId
+            });
             toggleNotification({
                 type: 'success',
                 message: formatMessage({
@@ -1885,7 +1936,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         formatMessage,
         formatAPIError
     ]);
-    const [publishManyDocuments] = usePublishManyDocumentsMutation();
+    const [publishManyDocuments, { isLoading: isPublishingMany }] = usePublishManyDocumentsMutation();
     const publishMany = React.useCallback(async ({ model, documentIds, params })=>{
         try {
             // TODO Confirm tracking events for bulk publish?
@@ -1925,7 +1976,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         formatMessage,
         formatAPIError
     ]);
-    const [updateDocument] = useUpdateDocumentMutation();
+    const [updateDocument, { isLoading: isUpdating }] = useUpdateDocumentMutation();
     const update = React.useCallback(async ({ collectionType, model, documentId, params }, data, trackerProperty)=>{
         try {
             trackUsage('willEditEntry', trackerProperty);
@@ -1949,7 +2000,10 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
                     error: res.error
                 };
             }
-            trackUsage('didEditEntry', trackerProperty);
+            trackUsage('didEditEntry', {
+                ...trackerProperty,
+                documentId: res.data.data.documentId
+            });
             toggleNotification({
                 type: 'success',
                 message: formatMessage({
@@ -2021,7 +2075,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         formatMessage,
         formatAPIError
     ]);
-    const [unpublishManyDocuments] = useUnpublishManyDocumentsMutation();
+    const [unpublishManyDocuments, { isLoading: isUnpublishingMany }] = useUnpublishManyDocumentsMutation();
     const unpublishMany = React.useCallback(async ({ model, documentIds, params })=>{
         try {
             trackUsage('willBulkUnpublishEntries');
@@ -2085,7 +2139,10 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
                     error: res.error
                 };
             }
-            trackUsage('didCreateEntry', trackerProperty);
+            trackUsage('didCreateEntry', {
+                ...trackerProperty,
+                documentId: res.data.data.documentId
+            });
             toggleNotification({
                 type: 'success',
                 message: formatMessage({
@@ -2212,6 +2269,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
         getDoc
     ]);
     return {
+        isLoading: isPublishing || isUpdating || isDiscardingDocument || isDeleting || isDeletingMany || isUnpublishingMany || isPublishingMany,
         autoClone,
         clone,
         create,
@@ -2227,7 +2285,7 @@ const DEFAULT_UNEXPECTED_ERROR_MSG = {
     };
 };
 
-const ProtectedHistoryPage = /*#__PURE__*/ React.lazy(()=>import('./History-CPYXgxkS.js').then((mod)=>({
+const ProtectedHistoryPage = /*#__PURE__*/ React.lazy(()=>import('./History-B7dGNfmx.mjs').then((mod)=>({
             default: mod.ProtectedHistoryPage
         })));
 /**
@@ -2243,7 +2301,7 @@ const ProtectedHistoryPage = /*#__PURE__*/ React.lazy(()=>import('./History-CPYX
     }
 ];
 
-const ProtectedPreviewPage = /*#__PURE__*/ React.lazy(()=>import('./Preview-DEuQgQg2.js').then((mod)=>({
+const ProtectedPreviewPage = /*#__PURE__*/ React.lazy(()=>import('./Preview-BH9l1QXk.mjs').then((mod)=>({
             default: mod.ProtectedPreviewPage
         })));
 const routes$1 = [
@@ -2257,25 +2315,25 @@ const routes$1 = [
     }
 ];
 
-const ProtectedEditViewPage = /*#__PURE__*/ lazy(()=>import('./EditViewPage-jCZnUuCR.js').then((mod)=>({
+const ProtectedEditViewPage = /*#__PURE__*/ lazy(()=>import('./EditViewPage-CVRJBOEv.mjs').then((mod)=>({
             default: mod.ProtectedEditViewPage
         })));
-const ProtectedListViewPage = /*#__PURE__*/ lazy(()=>import('./ListViewPage-MJNfQTp-.js').then((mod)=>({
+const ProtectedListViewPage = /*#__PURE__*/ lazy(()=>import('./ListViewPage-Cg3zbT7Y.mjs').then((mod)=>({
             default: mod.ProtectedListViewPage
         })));
-const ProtectedListConfiguration = /*#__PURE__*/ lazy(()=>import('./ListConfigurationPage-CNvotSqe.js').then((mod)=>({
+const ProtectedListConfiguration = /*#__PURE__*/ lazy(()=>import('./ListConfigurationPage-VtFQ5mOK.mjs').then((mod)=>({
             default: mod.ProtectedListConfiguration
         })));
-const ProtectedEditConfigurationPage = /*#__PURE__*/ lazy(()=>import('./EditConfigurationPage-DDuPch5d.js').then((mod)=>({
+const ProtectedEditConfigurationPage = /*#__PURE__*/ lazy(()=>import('./EditConfigurationPage-C05SwwH-.mjs').then((mod)=>({
             default: mod.ProtectedEditConfigurationPage
         })));
-const ProtectedComponentConfigurationPage = /*#__PURE__*/ lazy(()=>import('./ComponentConfigurationPage-DhYZp4nN.js').then((mod)=>({
+const ProtectedComponentConfigurationPage = /*#__PURE__*/ lazy(()=>import('./ComponentConfigurationPage-DgYK4xW6.mjs').then((mod)=>({
             default: mod.ProtectedComponentConfigurationPage
         })));
-const NoPermissions = /*#__PURE__*/ lazy(()=>import('./NoPermissionsPage-BulvG4hB.js').then((mod)=>({
+const NoPermissions = /*#__PURE__*/ lazy(()=>import('./NoPermissionsPage-OVr9KG6L.mjs').then((mod)=>({
             default: mod.NoPermissions
         })));
-const NoContentType = /*#__PURE__*/ lazy(()=>import('./NoContentTypePage-BJrZvYPY.js').then((mod)=>({
+const NoContentType = /*#__PURE__*/ lazy(()=>import('./NoContentTypePage-NOf7Aq_E.mjs').then((mod)=>({
             default: mod.NoContentType
         })));
 const CollectionTypePages = ()=>{
@@ -2411,6 +2469,7 @@ const DocumentActionButton = (action)=>{
                 variant: action.variant || 'default',
                 paddingTop: "7px",
                 paddingBottom: "7px",
+                loading: action.loading,
                 children: action.label
             }),
             action.dialog?.type === 'dialog' ? /*#__PURE__*/ jsx(DocumentActionConfirmDialog, {
@@ -2565,7 +2624,7 @@ const convertActionVariantToIconColor = (variant = 'secondary')=>{
             return 'primary600';
     }
 };
-const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, isOpen, variant = 'secondary' })=>{
+const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, isOpen, variant = 'secondary', loading })=>{
     const { formatMessage } = useIntl();
     const handleClose = async ()=>{
         if (onCancel) {
@@ -2606,6 +2665,7 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
                             onClick: handleConfirm,
                             variant: variant,
                             fullWidth: true,
+                            loading: loading,
                             children: formatMessage({
                                 id: 'app.components.Button.confirm',
                                 defaultMessage: 'Confirm'
@@ -2660,8 +2720,8 @@ const transformData = (data)=>{
 };
 /* -------------------------------------------------------------------------------------------------
  * DocumentActionComponents
- * -----------------------------------------------------------------------------------------------*/ const PublishAction$1 = ({ activeTab, documentId, model, collectionType, meta, document })=>{
-    const { schema } = useDoc();
+ * -----------------------------------------------------------------------------------------------*/ const PublishAction$1 = ({ activeTab, documentId, model, collectionType, meta, document, onPreview })=>{
+    const schema = useDocumentContext('PublishAction', (state)=>state.document.schema);
     const navigate = useNavigate();
     const { toggleNotification } = useNotification();
     const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
@@ -2670,7 +2730,7 @@ const transformData = (data)=>{
     const { id } = useParams();
     const { formatMessage } = useIntl();
     const canPublish = useDocumentRBAC('PublishAction', ({ canPublish })=>canPublish);
-    const { publish } = useDocumentActions();
+    const { publish, isLoading } = useDocumentActions();
     const [countDraftRelations, { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }] = useLazyGetDraftRelationCountQuery();
     const [localCountOfDraftRelations, setLocalCountOfDraftRelations] = React.useState(0);
     const [serverCountOfDraftRelations, setServerCountOfDraftRelations] = React.useState(0);
@@ -2684,6 +2744,8 @@ const transformData = (data)=>{
     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);
     React.useEffect(()=>{
         if (isErrorDraftRelations) {
             toggleNotification({
@@ -2786,11 +2848,12 @@ const transformData = (data)=>{
                 });
                 return;
             }
+            const isPublishingRelation = rootDocumentMeta.documentId !== currentDocumentMeta.documentId;
             const res = await publish({
                 collectionType,
                 model,
                 documentId,
-                params
+                params: isPublishingRelation ? currentDocumentMeta.params : params
             }, transformData(formValues));
             if ('data' in res && collectionType !== SINGLE_TYPES) {
                 /**
@@ -2806,6 +2869,9 @@ const transformData = (data)=>{
             }
         } finally{
             setSubmitting(false);
+            if (onPreview) {
+                onPreview();
+            }
         }
     };
     const totalDraftRelations = localCountOfDraftRelations + serverCountOfDraftRelations;
@@ -2814,6 +2880,12 @@ const transformData = (data)=>{
     const enableDraftRelationsCount = false;
     const hasDraftRelations = enableDraftRelationsCount;
     return {
+        loading: isLoading,
+        position: [
+            'panel',
+            'preview',
+            'relation-modal'
+        ],
         /**
      * Disabled when:
      *  - currently if you're cloning a document we don't support publish & clone at the same time.
@@ -2851,15 +2923,19 @@ const transformData = (data)=>{
     };
 };
 PublishAction$1.type = 'publish';
-PublishAction$1.position = 'panel';
-const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
+PublishAction$1.position = [
+    'panel',
+    'preview',
+    'relation-modal'
+];
+const UpdateAction = ({ activeTab, documentId, model, collectionType, onPreview })=>{
     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 } = useDocumentActions();
+    const { create, update, clone, isLoading } = useDocumentActions();
     const [{ query, rawQuery }] = useQueryParams();
     const params = React.useMemo(()=>buildValidParams(query), [
         query
@@ -2871,6 +2947,8 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
     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 handleUpdate = React.useCallback(async ()=>{
         setSubmitting(true);
         try {
@@ -2907,11 +2985,12 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
                     setErrors(formatValidationErrors(res.error));
                 }
             } else if (documentId || collectionType === SINGLE_TYPES) {
+                const isEditingRelation = rootDocumentMeta.documentId !== currentDocumentMeta.documentId;
                 const res = await update({
                     collectionType,
                     model,
                     documentId,
-                    params
+                    params: isEditingRelation ? currentDocumentMeta.params : params
                 }, transformData(document));
                 if ('error' in res && isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
                     setErrors(formatValidationErrors(res.error));
@@ -2937,6 +3016,9 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
             }
         } finally{
             setSubmitting(false);
+            if (onPreview) {
+                onPreview();
+            }
         }
     }, [
         clone,
@@ -2976,6 +3058,7 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
         handleUpdate
     ]);
     return {
+        loading: isLoading,
         /**
      * Disabled when:
      * - the form is submitting
@@ -2986,11 +3069,20 @@ const UpdateAction = ({ activeTab, documentId, model, collectionType })=>{
             id: 'global.save',
             defaultMessage: 'Save'
         }),
-        onClick: handleUpdate
+        onClick: handleUpdate,
+        position: [
+            'panel',
+            'preview',
+            'relation-modal'
+        ]
     };
 };
 UpdateAction.type = 'update';
-UpdateAction.position = 'panel';
+UpdateAction.position = [
+    'panel',
+    'preview',
+    'relation-modal'
+];
 const UNPUBLISH_DRAFT_OPTIONS = {
     KEEP: 'keep',
     DISCARD: 'discard'
@@ -3140,7 +3232,7 @@ const DiscardAction = ({ activeTab, documentId, model, collectionType, document
     const { formatMessage } = useIntl();
     const { schema } = useDoc();
     const canUpdate = useDocumentRBAC('DiscardAction', ({ canUpdate })=>canUpdate);
-    const { discard } = useDocumentActions();
+    const { discard, isLoading } = useDocumentActions();
     const [{ query }] = useQueryParams();
     const params = React.useMemo(()=>buildValidParams(query), [
         query
@@ -3186,6 +3278,7 @@ const DiscardAction = ({ activeTab, documentId, model, collectionType, document
                     })
                 ]
             }),
+            loading: isLoading,
             onConfirm: async ()=>{
                 await discard({
                     collectionType,
@@ -3280,6 +3373,8 @@ const capitalise = (str)=>str.charAt(0).toUpperCase() + str.slice(1);
         ...restProps,
         size: size,
         variant: statusVariant,
+        role: "status",
+        "aria-label": status,
         children: /*#__PURE__*/ jsx(Typography, {
             tag: "span",
             variant: "omega",
@@ -3622,7 +3717,7 @@ const DeleteAction$1 = ({ documentId, model, collectionType, document })=>{
     const { formatMessage } = useIntl();
     const listViewPathMatch = useMatch(LIST_PATH);
     const canDelete = useDocumentRBAC('DeleteAction', (state)=>state.canDelete);
-    const { delete: deleteAction } = useDocumentActions();
+    const { delete: deleteAction, isLoading } = useDocumentActions();
     const { toggleNotification } = useNotification();
     const setSubmitting = useForm('DeleteAction', (state)=>state.setSubmitting);
     const isLocalized = document?.locale != null;
@@ -3661,6 +3756,7 @@ const DeleteAction$1 = ({ documentId, model, collectionType, document })=>{
                     })
                 ]
             }),
+            loading: isLoading,
             onConfirm: async ()=>{
                 /**
          * If we have a match, we're in the list view
@@ -4342,7 +4438,7 @@ const SelectedEntriesModalContent = ({ listViewSelectedEntries, toggleModal, set
         schema
     ]);
     const [isDialogOpen, setIsDialogOpen] = React.useState(false);
-    const { publishMany: bulkPublishAction } = useDocumentActions();
+    const { publishMany: bulkPublishAction, isLoading: isPublishing } = useDocumentActions();
     const [, { isLoading: isSubmittingForm }] = usePublishManyDocumentsMutation();
     const selectedRows = useTable('publishAction', (state)=>state.selectedRows);
     // Filter selected entries from the updated modal table rows
@@ -4414,7 +4510,7 @@ const SelectedEntriesModalContent = ({ listViewSelectedEntries, toggleModal, set
                             /*#__PURE__*/ jsx(Button, {
                                 onClick: toggleDialog,
                                 disabled: selectedEntries.length === 0 || selectedEntries.length === selectedEntriesWithErrorsCount || selectedEntriesPublishedCount === selectedEntries.length || isLoading,
-                                loading: isSubmittingForm,
+                                loading: isPublishing || isSubmittingForm,
                                 children: formatMessage({
                                     id: 'app.utils.publish',
                                     defaultMessage: 'Publish'
@@ -4427,7 +4523,7 @@ const SelectedEntriesModalContent = ({ listViewSelectedEntries, toggleModal, set
             /*#__PURE__*/ jsx(ConfirmDialogPublishAll, {
                 isOpen: isDialogOpen,
                 onToggleDialog: toggleDialog,
-                isConfirmButtonLoading: isSubmittingForm,
+                isConfirmButtonLoading: isPublishing || isSubmittingForm,
                 onConfirm: handleConfirmBulkPublish
             })
         ]
@@ -4519,7 +4615,7 @@ const SelectedEntriesModalContent = ({ listViewSelectedEntries, toggleModal, set
         query
     ]);
     const hasDeletePermission = useDocumentRBAC('deleteAction', (state)=>state.canDelete);
-    const { deleteMany: bulkDeleteAction } = useDocumentActions();
+    const { deleteMany: bulkDeleteAction, isLoading } = useDocumentActions();
     const documentIds = documents.map(({ documentId })=>documentId);
     const handleConfirmBulkDelete = async ()=>{
         const res = await bulkDeleteAction({
@@ -4544,6 +4640,7 @@ const SelectedEntriesModalContent = ({ listViewSelectedEntries, toggleModal, set
                 id: 'app.components.ConfirmDialog.title',
                 defaultMessage: 'Confirmation'
             }),
+            loading: isLoading,
             content: /*#__PURE__*/ jsxs(Flex, {
                 direction: "column",
                 alignItems: "stretch",
@@ -4592,7 +4689,7 @@ const UnpublishAction = ({ documents, model })=>{
     const hasPublishPermission = useDocumentRBAC('unpublishAction', (state)=>state.canPublish);
     const hasI18nEnabled = Boolean(schema?.pluginOptions?.i18n);
     const hasDraftAndPublishEnabled = Boolean(schema?.options?.draftAndPublish);
-    const { unpublishMany: bulkUnpublishAction } = useDocumentActions();
+    const { unpublishMany: bulkUnpublishAction, isLoading } = useDocumentActions();
     const documentIds = documents.map(({ documentId })=>documentId);
     const [{ query }] = useQueryParams();
     const params = React.useMemo(()=>buildValidParams(query), [
@@ -4622,6 +4719,7 @@ const UnpublishAction = ({ documents, model })=>{
                 id: 'app.components.ConfirmDialog.title',
                 defaultMessage: 'Confirmation'
             }),
+            loading: isLoading,
             content: /*#__PURE__*/ jsxs(Flex, {
                 direction: "column",
                 alignItems: "stretch",
@@ -5003,9 +5101,11 @@ const DEFAULT_TABLE_ROW_ACTIONS = [
            * The response should still be filtered by the position, as the static property is new
            * and not mandatory to avoid a breaking change.
            */ if (position) {
-                        return this.documentActions.filter((action)=>action.position == undefined || [
+                        return this.documentActions.filter((action)=>{
+                            return action.position == undefined || [
                                 action.position
-                            ].flat().includes(position));
+                            ].flat().includes(position);
+                        });
                     }
                     return this.documentActions;
                 },
@@ -5253,37 +5353,37 @@ const previewAdmin = {
 
 function __variableDynamicImportRuntime1__(path) {
   switch (path) {
-    case './translations/ar.json': return import('./ar-DckYq_WK.js');
-    case './translations/ca.json': return import('./ca-DviY7mRj.js');
-    case './translations/cs.json': return import('./cs-C7OSYFQ7.js');
-    case './translations/de.json': return import('./de-5QRlDHyR.js');
-    case './translations/en.json': return import('./en-LfhocNG2.js');
-    case './translations/es.json': return import('./es-DkoWSExG.js');
-    case './translations/eu.json': return import('./eu-BG1xX7HK.js');
-    case './translations/fr.json': return import('./fr-CFdRaRVj.js');
-    case './translations/gu.json': return import('./gu-D5MMMXRs.js');
-    case './translations/hi.json': return import('./hi-lp17SCjr.js');
-    case './translations/hu.json': return import('./hu-CLka1U2C.js');
-    case './translations/id.json': return import('./id-USfY9m1g.js');
-    case './translations/it.json': return import('./it-BAHrwmYS.js');
-    case './translations/ja.json': return import('./ja-BWKmBJFT.js');
-    case './translations/ko.json': return import('./ko-CgADGBNt.js');
-    case './translations/ml.json': return import('./ml-CnhCfOn_.js');
-    case './translations/ms.json': return import('./ms-Bh09NFff.js');
-    case './translations/nl.json': return import('./nl-C8HYflTc.js');
-    case './translations/pl.json': return import('./pl-MFCZJZuZ.js');
-    case './translations/pt-BR.json': return import('./pt-BR-CcotyBGJ.js');
-    case './translations/pt.json': return import('./pt-HbmgeiYO.js');
-    case './translations/ru.json': return import('./ru-CB4BUyQp.js');
-    case './translations/sa.json': return import('./sa-n_aPA-pU.js');
-    case './translations/sk.json': return import('./sk-tn_BDjE2.js');
-    case './translations/sv.json': return import('./sv-cq4ZrQRd.js');
-    case './translations/th.json': return import('./th-mUH7hEtc.js');
-    case './translations/tr.json': return import('./tr-Yt38daxh.js');
-    case './translations/uk.json': return import('./uk-Cpgmm7gE.js');
-    case './translations/vi.json': return import('./vi-CvBGlTjr.js');
-    case './translations/zh-Hans.json': return import('./zh-Hans-CI0HKio3.js');
-    case './translations/zh.json': return import('./zh-BmF-sHaT.js');
+    case './translations/ar.json': return import('./ar-DckYq_WK.mjs');
+    case './translations/ca.json': return import('./ca-DviY7mRj.mjs');
+    case './translations/cs.json': return import('./cs-C7OSYFQ7.mjs');
+    case './translations/de.json': return import('./de-5QRlDHyR.mjs');
+    case './translations/en.json': return import('./en-C2zEwS3-.mjs');
+    case './translations/es.json': return import('./es-DkoWSExG.mjs');
+    case './translations/eu.json': return import('./eu-BG1xX7HK.mjs');
+    case './translations/fr.json': return import('./fr-CFdRaRVj.mjs');
+    case './translations/gu.json': return import('./gu-D5MMMXRs.mjs');
+    case './translations/hi.json': return import('./hi-lp17SCjr.mjs');
+    case './translations/hu.json': return import('./hu-CLka1U2C.mjs');
+    case './translations/id.json': return import('./id-USfY9m1g.mjs');
+    case './translations/it.json': return import('./it-BAHrwmYS.mjs');
+    case './translations/ja.json': return import('./ja-BWKmBJFT.mjs');
+    case './translations/ko.json': return import('./ko-CgADGBNt.mjs');
+    case './translations/ml.json': return import('./ml-CnhCfOn_.mjs');
+    case './translations/ms.json': return import('./ms-Bh09NFff.mjs');
+    case './translations/nl.json': return import('./nl-C8HYflTc.mjs');
+    case './translations/pl.json': return import('./pl-MFCZJZuZ.mjs');
+    case './translations/pt-BR.json': return import('./pt-BR-CcotyBGJ.mjs');
+    case './translations/pt.json': return import('./pt-HbmgeiYO.mjs');
+    case './translations/ru.json': return import('./ru-CB4BUyQp.mjs');
+    case './translations/sa.json': return import('./sa-n_aPA-pU.mjs');
+    case './translations/sk.json': return import('./sk-tn_BDjE2.mjs');
+    case './translations/sv.json': return import('./sv-cq4ZrQRd.mjs');
+    case './translations/th.json': return import('./th-mUH7hEtc.mjs');
+    case './translations/tr.json': return import('./tr-Yt38daxh.mjs');
+    case './translations/uk.json': return import('./uk-BtM6WnaE.mjs');
+    case './translations/vi.json': return import('./vi-CvBGlTjr.mjs');
+    case './translations/zh-Hans.json': return import('./zh-Hans-CI0HKio3.mjs');
+    case './translations/zh.json': return import('./zh-BmF-sHaT.mjs');
     default: return new Promise(function(resolve, reject) {
       (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
         reject.bind(null, new Error("Unknown variable dynamic import: " + path))
@@ -5311,7 +5411,7 @@ var index = {
         app.router.addRoute({
             path: 'content-manager/*',
             lazy: async ()=>{
-                const { Layout } = await import('./layout-B3-guCPG.js');
+                const { Layout } = await import('./layout-9zlUM9V3.mjs');
                 return {
                     Component: Layout
                 };
@@ -5346,5 +5446,5 @@ var index = {
     }
 };
 
-export { useUpdateContentTypeConfigurationMutation as A, BulkActionsRenderer as B, COLLECTION_TYPES as C, DocumentStatus as D, ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD as E, extractContentTypeComponents as F, DEFAULT_SETTINGS as G, HOOKS as H, InjectionZone as I, convertEditLayoutToFieldLayouts as J, removeFieldsThatDontExistOnSchema as K, prepareTempKeys as L, useDocument as M, useGetPreviewUrlQuery as N, index as O, Panels as P, useContentManagerContext as Q, RelativeTime as R, SINGLE_TYPES as S, TableActions as T, useDocumentActions as U, useGetInitialDataQuery as a, useGetAllContentTypeSettingsQuery as b, useDoc as c, buildValidParams as d, contentManagerApi as e, useDocumentRBAC as f, getTranslation as g, useDocumentLayout as h, createYupSchema as i, Header as j, PERMISSIONS as k, DocumentRBAC as l, useDocLayout as m, createDefaultForm as n, CLONE_PATH as o, useGetContentTypeConfigurationQuery as p, CREATOR_FIELDS as q, getMainField as r, setInitialData as s, transformDocument as t, useContentTypeSchema as u, getDisplayName as v, checkIfAttributeIsDisplayable as w, useGetAllDocumentsQuery as x, convertListLayoutToFieldLayouts as y, capitalise as z };
-//# sourceMappingURL=index-BRlRBRLb.js.map
+export { useGetAllDocumentsQuery as A, BulkActionsRenderer as B, COLLECTION_TYPES as C, DocumentStatus as D, convertListLayoutToFieldLayouts as E, capitalise as F, useDocLayout as G, HOOKS as H, InjectionZone as I, useUpdateContentTypeConfigurationMutation as J, ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD as K, extractContentTypeComponents as L, DEFAULT_SETTINGS as M, convertEditLayoutToFieldLayouts as N, removeFieldsThatDontExistOnSchema as O, PERMISSIONS as P, prepareTempKeys as Q, RelativeTime as R, SINGLE_TYPES as S, TableActions as T, useDocument as U, useGetPreviewUrlQuery as V, index as W, useContentManagerContext as X, useDocumentActions as Y, useGetInitialDataQuery as a, useGetAllContentTypeSettingsQuery as b, useDocumentContext as c, useDocumentLayout as d, createDefaultForm as e, useLazyGetDocumentQuery as f, getTranslation as g, createYupSchema as h, DocumentRBAC as i, DocumentActionButton as j, buildValidParams as k, contentManagerApi as l, useDoc as m, CLONE_PATH as n, useDocumentRBAC as o, DocumentContextProvider as p, Header as q, Panels as r, setInitialData as s, transformDocument as t, useContentTypeSchema as u, useGetContentTypeConfigurationQuery as v, CREATOR_FIELDS as w, getMainField as x, getDisplayName as y, checkIfAttributeIsDisplayable as z };
+//# sourceMappingURL=index-BE7PI9Wp.mjs.map