@strapi/content-manager 0.0.0-experimental.fed75ee8e64c57dbed0b670b25ef026b69baab10 → 0.0.0-next.008421e40e4f0fb98aab7504cea5a2b8ef7099d5

package/dist/_chunks/{index-TaRzG09p.mjs → index-ZKrsjv-2.mjs}

@@ -1,25 +1,34 @@
-import { More, Cross, WarningCircle, ListPlus, Pencil, Trash, Check, CrossCircle, CheckCircle, ArrowsCounterClockwise, ChevronRight, Duplicate, ClockCounterClockwise, Feather } from "@strapi/icons";
+import { More, Cross, WarningCircle, 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 * as React from "react";
 import { lazy } from "react";
-import { Button, Menu, VisuallyHidden, Flex, Typography, Dialog, Modal, Radio, Status, Box, SingleSelect, SingleSelectOption, IconButton, Loader, Tooltip, LinkButton } from "@strapi/design-system";
+import { Menu, Button, VisuallyHidden, Flex, Dialog, Modal, Typography, Radio, Status, Box, SingleSelect, SingleSelectOption, IconButton, RawTable, Loader, Tbody, Tr, Td, Tooltip, LinkButton } from "@strapi/design-system";
+import mapValues from "lodash/fp/mapValues";
 import { useIntl } from "react-intl";
 import { useParams, useNavigate, Navigate, useMatch, useLocation, Link, NavLink } from "react-router-dom";
+import { styled } from "styled-components";
 import * as yup from "yup";
 import { ValidationError } from "yup";
+import { generateNKeysBetween } from "fractional-indexing";
 import pipe from "lodash/fp/pipe";
-import { intervalToDuration, isPast } from "date-fns";
-import { styled } from "styled-components";
 import { stringify } from "qs";
+import { intervalToDuration, isPast } from "date-fns";
 import { createSlice, combineReducers } from "@reduxjs/toolkit";
-const __variableDynamicImportRuntimeHelper = (glob, path) => {
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
   const v = glob[path];
   if (v) {
     return typeof v === "function" ? v() : Promise.resolve(v);
   }
   return new Promise((_, reject) => {
-    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
   });
 };
 const PLUGIN_ID = "content-manager";
@@ -158,6 +167,113 @@ const extractAndDedupeFields = (permissions = []) => permissions.flatMap((permis
   (field, index2, arr) => arr.indexOf(field) === index2 && typeof field === "string"
 );
 const removeNumericalStrings = (arr) => arr.filter((item) => isNaN(Number(item)));
+const BLOCK_LIST_ATTRIBUTE_KEYS = ["__component", "__temp_key__"];
+const traverseData = (predicate, transform) => (schema, components = {}) => (data = {}) => {
+  const traverse = (datum, attributes) => {
+    return Object.entries(datum).reduce((acc, [key, value]) => {
+      const attribute = attributes[key];
+      if (BLOCK_LIST_ATTRIBUTE_KEYS.includes(key) || value === null || value === void 0) {
+        acc[key] = value;
+        return acc;
+      }
+      if (attribute.type === "component") {
+        if (attribute.repeatable) {
+          const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
+          acc[key] = componentValue.map(
+            (componentData) => traverse(componentData, components[attribute.component]?.attributes ?? {})
+          );
+        } else {
+          const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
+          acc[key] = traverse(componentValue, components[attribute.component]?.attributes ?? {});
+        }
+      } else if (attribute.type === "dynamiczone") {
+        const dynamicZoneValue = predicate(attribute, value) ? transform(value, attribute) : value;
+        acc[key] = dynamicZoneValue.map(
+          (componentData) => traverse(componentData, components[componentData.__component]?.attributes ?? {})
+        );
+      } else if (predicate(attribute, value)) {
+        acc[key] = transform(value, attribute);
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+  };
+  return traverse(data, schema.attributes);
+};
+const removeProhibitedFields = (prohibitedFields) => traverseData(
+  (attribute) => prohibitedFields.includes(attribute.type),
+  () => ""
+);
+const prepareRelations = traverseData(
+  (attribute) => attribute.type === "relation",
+  () => ({
+    connect: [],
+    disconnect: []
+  })
+);
+const prepareTempKeys = traverseData(
+  (attribute) => attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone",
+  (data) => {
+    if (Array.isArray(data) && data.length > 0) {
+      const keys = generateNKeysBetween(void 0, void 0, data.length);
+      return data.map((datum, index2) => ({
+        ...datum,
+        __temp_key__: keys[index2]
+      }));
+    }
+    return data;
+  }
+);
+const removeFieldsThatDontExistOnSchema = (schema) => (data) => {
+  const schemaKeys = Object.keys(schema.attributes);
+  const dataKeys = Object.keys(data);
+  const keysToRemove = dataKeys.filter((key) => !schemaKeys.includes(key));
+  const revisedData = [...keysToRemove, ...DOCUMENT_META_FIELDS].reduce((acc, key) => {
+    delete acc[key];
+    return acc;
+  }, structuredClone(data));
+  return revisedData;
+};
+const removeNullValues = (data) => {
+  return Object.entries(data).reduce((acc, [key, value]) => {
+    if (value === null) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+};
+const transformDocument = (schema, components = {}) => (document) => {
+  const transformations = pipe(
+    removeFieldsThatDontExistOnSchema(schema),
+    removeProhibitedFields(["password"])(schema, components),
+    removeNullValues,
+    prepareRelations(schema, components),
+    prepareTempKeys(schema, components)
+  );
+  return transformations(document);
+};
+const createDefaultForm = (contentType, components = {}) => {
+  const traverseSchema = (attributes) => {
+    return Object.entries(attributes).reduce((acc, [key, attribute]) => {
+      if ("default" in attribute) {
+        acc[key] = attribute.default;
+      } else if (attribute.type === "component" && attribute.required) {
+        const defaultComponentForm = traverseSchema(components[attribute.component].attributes);
+        if (attribute.repeatable) {
+          acc[key] = attribute.min ? [...Array(attribute.min).fill(defaultComponentForm)] : [];
+        } else {
+          acc[key] = defaultComponentForm;
+        }
+      } else if (attribute.type === "dynamiczone" && attribute.required) {
+        acc[key] = [];
+      }
+      return acc;
+    }, {});
+  };
+  return traverseSchema(contentType.attributes);
+};
 const contentManagerApi = adminApi.enhanceEndpoints({
   addTagTypes: [
     "ComponentConfiguration",
@@ -167,7 +283,8 @@ const contentManagerApi = adminApi.enhanceEndpoints({
     "InitialData",
     "HistoryVersion",
     "Relations",
-    "UidAvailability"
+    "UidAvailability",
+    "RecentDocumentList"
   ]
 });
 const documentApi = contentManagerApi.injectEndpoints({
@@ -185,7 +302,7 @@ const documentApi = contentManagerApi.injectEndpoints({
         if (error) {
           return [];
         }
-        return [{ type: "Document", id: `${model}_LIST` }];
+        return [{ type: "Document", id: `${model}_LIST` }, "RecentDocumentList"];
       }
     }),
     cloneDocument: builder.mutation({
@@ -199,7 +316,8 @@ const documentApi = contentManagerApi.injectEndpoints({
       }),
       invalidatesTags: (_result, _error, { model }) => [
         { type: "Document", id: `${model}_LIST` },
-        { type: "UidAvailability", id: model }
+        { type: "UidAvailability", id: model },
+        "RecentDocumentList"
       ]
     }),
     /**
@@ -218,8 +336,21 @@ const documentApi = contentManagerApi.injectEndpoints({
       invalidatesTags: (result, _error, { model }) => [
         { type: "Document", id: `${model}_LIST` },
         "Relations",
-        { type: "UidAvailability", id: model }
-      ]
+        { type: "UidAvailability", id: model },
+        "RecentDocumentList"
+      ],
+      transformResponse: (response, meta, arg) => {
+        if (!("data" in response) && arg.model === "plugin::users-permissions.user") {
+          return {
+            data: response,
+            meta: {
+              availableStatus: [],
+              availableLocales: []
+            }
+          };
+        }
+        return response;
+      }
     }),
     deleteDocument: builder.mutation({
       query: ({ collectionType, model, documentId, params }) => ({
@@ -230,7 +361,8 @@ const documentApi = contentManagerApi.injectEndpoints({
         }
       }),
       invalidatesTags: (_result, _error, { collectionType, model }) => [
-        { type: "Document", id: collectionType !== SINGLE_TYPES ? `${model}_LIST` : model }
+        { type: "Document", id: collectionType !== SINGLE_TYPES ? `${model}_LIST` : model },
+        "RecentDocumentList"
       ]
     }),
     deleteManyDocuments: builder.mutation({
@@ -242,7 +374,10 @@ const documentApi = contentManagerApi.injectEndpoints({
           params
         }
       }),
-      invalidatesTags: (_res, _error, { model }) => [{ type: "Document", id: `${model}_LIST` }]
+      invalidatesTags: (_res, _error, { model }) => [
+        { type: "Document", id: `${model}_LIST` },
+        "RecentDocumentList"
+      ]
     }),
     discardDocument: builder.mutation({
       query: ({ collectionType, model, documentId, params }) => ({
@@ -260,7 +395,8 @@ const documentApi = contentManagerApi.injectEndpoints({
           },
           { type: "Document", id: `${model}_LIST` },
           "Relations",
-          { type: "UidAvailability", id: model }
+          { type: "UidAvailability", id: model },
+          "RecentDocumentList"
         ];
       }
     }),
@@ -273,7 +409,7 @@ const documentApi = contentManagerApi.injectEndpoints({
         url: `/content-manager/collection-types/${model}`,
         method: "GET",
         config: {
-          params
+          params: stringify(params, { encode: true })
         }
       }),
       providesTags: (result, _error, arg) => {
@@ -355,7 +491,8 @@ const documentApi = contentManagerApi.injectEndpoints({
             id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
           },
           { type: "Document", id: `${model}_LIST` },
-          "Relations"
+          "Relations",
+          "RecentDocumentList"
         ];
       }
     }),
@@ -386,7 +523,9 @@ const documentApi = contentManagerApi.injectEndpoints({
             id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
           },
           "Relations",
-          { type: "UidAvailability", id: model }
+          { type: "UidAvailability", id: model },
+          "RecentDocumentList",
+          "RecentDocumentList"
         ];
       },
       async onQueryStarted({ data, ...patch }, { dispatch, queryFulfilled }) {
@@ -416,7 +555,8 @@ const documentApi = contentManagerApi.injectEndpoints({
           {
             type: "Document",
             id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
-          }
+          },
+          "RecentDocumentList"
         ];
       }
     }),
@@ -429,7 +569,10 @@ const documentApi = contentManagerApi.injectEndpoints({
           params
         }
       }),
-      invalidatesTags: (_res, _error, { model, documentIds }) => documentIds.map((id) => ({ type: "Document", id: `${model}_${id}` }))
+      invalidatesTags: (_res, _error, { model, documentIds }) => [
+        ...documentIds.map((id) => ({ type: "Document", id: `${model}_${id}` })),
+        "RecentDocumentList"
+      ]
     })
   })
 });
@@ -452,8 +595,7 @@ const {
   useUnpublishManyDocumentsMutation
 } = documentApi;
 const buildValidParams = (query) => {
-  if (!query)
-    return query;
+  if (!query) return query;
   const { plugins: _, ...validQueryParams } = {
     ...query,
     ...Object.values(query?.plugins ?? {}).reduce(
@@ -461,9 +603,6 @@ const buildValidParams = (query) => {
       {}
     )
   };
-  if ("_q" in validQueryParams) {
-    validQueryParams._q = encodeURIComponent(validQueryParams._q);
-  }
   return validQueryParams;
 };
 const isBaseQueryError = (error) => {
@@ -968,9 +1107,10 @@ const formatEditLayout = (data, {
       currentPanelIndex += 2;
     } else {
       if (!panels[currentPanelIndex]) {
-        panels.push([]);
+        panels.push([row]);
+      } else {
+        panels[currentPanelIndex].push(row);
       }
-      panels[currentPanelIndex].push(row);
     }
     return panels;
   }, []);
@@ -1103,6 +1243,7 @@ const convertListLayoutToFieldLayouts = (columns, attributes = {}, metadatas, co
 const useDocument = (args, opts) => {
   const { toggleNotification } = useNotification();
   const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const { formatMessage } = useIntl();
   const {
     currentData: data,
     isLoading: isLoadingDocument,
@@ -1112,12 +1253,27 @@ const useDocument = (args, opts) => {
     ...opts,
     skip: !args.documentId && args.collectionType !== SINGLE_TYPES || opts?.skip
   });
+  const document = data?.data;
+  const meta = data?.meta;
   const {
     components,
     schema,
     schemas,
     isLoading: isLoadingSchema
   } = useContentTypeSchema(args.model);
+  const isSingleType = schema?.kind === "singleType";
+  const getTitle = (mainField) => {
+    if (mainField !== "id" && document?.[mainField]) {
+      return document[mainField];
+    }
+    if (isSingleType && schema?.info.displayName) {
+      return schema.info.displayName;
+    }
+    return formatMessage({
+      id: "content-manager.containers.untitled",
+      defaultMessage: "Untitled"
+    });
+  };
   React.useEffect(() => {
     if (error) {
       toggleNotification({
@@ -1133,14 +1289,14 @@ const useDocument = (args, opts) => {
     return createYupSchema(schema.attributes, components);
   }, [schema, components]);
   const validate = React.useCallback(
-    (document) => {
+    (document2) => {
       if (!validationSchema) {
         throw new Error(
           "There is no validation schema generated, this is likely due to the schema not being loaded yet."
         );
       }
       try {
-        validationSchema.validateSync(document, { abortEarly: false, strict: true });
+        validationSchema.validateSync(document2, { abortEarly: false, strict: true });
         return null;
       } catch (error2) {
         if (error2 instanceof ValidationError) {
@@ -1151,17 +1307,29 @@ const useDocument = (args, opts) => {
     },
     [validationSchema]
   );
+  const getInitialFormValues = React.useCallback(
+    (isCreatingDocument = false) => {
+      if (!document && !isCreatingDocument && !isSingleType || !schema) {
+        return void 0;
+      }
+      const form = document?.id ? document : createDefaultForm(schema, components);
+      return transformDocument(schema, components)(form);
+    },
+    [document, isSingleType, schema, components]
+  );
   const isLoading = isLoadingDocument || isFetchingDocument || isLoadingSchema;
   const hasError = !!error;
   return {
     components,
-    document: data?.data,
-    meta: data?.meta,
+    document,
+    meta,
     isLoading,
     hasError,
     schema,
     schemas,
-    validate
+    validate,
+    getTitle,
+    getInitialFormValues
   };
 };
 const useDoc = () => {
@@ -1228,9 +1396,6 @@ const useContentManagerContext = () => {
   };
 };
 const prefixPluginTranslations = (trad, pluginId) => {
-  if (!pluginId) {
-    throw new TypeError("pluginId can't be empty");
-  }
   return Object.keys(trad).reduce((acc, current) => {
     acc[`${pluginId}.${current}`] = trad[current];
     return acc;
@@ -1664,10 +1829,10 @@ const useDocumentActions = () => {
     update
   };
 };
-const ProtectedHistoryPage = lazy(
-  () => import("./History-Bmu6tx6s.mjs").then((mod) => ({ default: mod.ProtectedHistoryPage }))
+const ProtectedHistoryPage = React.lazy(
+  () => import("./History-D1PreDSY.mjs").then((mod) => ({ default: mod.ProtectedHistoryPage }))
 );
-const routes$1 = [
+const routes$2 = [
   {
     path: ":collectionType/:slug/:id/history",
     Component: ProtectedHistoryPage
@@ -1677,32 +1842,45 @@ const routes$1 = [
     Component: ProtectedHistoryPage
   }
 ];
+const ProtectedPreviewPage = React.lazy(
+  () => import("./Preview-BNuU0SuQ.mjs").then((mod) => ({ default: mod.ProtectedPreviewPage }))
+);
+const routes$1 = [
+  {
+    path: ":collectionType/:slug/:id/preview",
+    Component: ProtectedPreviewPage
+  },
+  {
+    path: ":collectionType/:slug/preview",
+    Component: ProtectedPreviewPage
+  }
+];
 const ProtectedEditViewPage = lazy(
-  () => import("./EditViewPage-Dx0QnTxn.mjs").then((mod) => ({ default: mod.ProtectedEditViewPage }))
+  () => import("./EditViewPage-DrmVmYN0.mjs").then((mod) => ({ default: mod.ProtectedEditViewPage }))
 );
 const ProtectedListViewPage = lazy(
-  () => import("./ListViewPage-DzhuS3CW.mjs").then((mod) => ({ default: mod.ProtectedListViewPage }))
+  () => import("./ListViewPage-Bud_jBDQ.mjs").then((mod) => ({ default: mod.ProtectedListViewPage }))
 );
 const ProtectedListConfiguration = lazy(
-  () => import("./ListConfigurationPage-DwijcJ17.mjs").then((mod) => ({
+  () => import("./ListConfigurationPage-Bbi32isk.mjs").then((mod) => ({
     default: mod.ProtectedListConfiguration
   }))
 );
 const ProtectedEditConfigurationPage = lazy(
-  () => import("./EditConfigurationPage-BWq-9Zhk.mjs").then((mod) => ({
+  () => import("./EditConfigurationPage-COe6hjPC.mjs").then((mod) => ({
     default: mod.ProtectedEditConfigurationPage
   }))
 );
 const ProtectedComponentConfigurationPage = lazy(
-  () => import("./ComponentConfigurationPage-BVM7LScS.mjs").then((mod) => ({
+  () => import("./ComponentConfigurationPage-9_4yUE9L.mjs").then((mod) => ({
     default: mod.ProtectedComponentConfigurationPage
   }))
 );
 const NoPermissions = lazy(
-  () => import("./NoPermissionsPage-DBbGJqL9.mjs").then((mod) => ({ default: mod.NoPermissions }))
+  () => import("./NoPermissionsPage-CMdM-dCo.mjs").then((mod) => ({ default: mod.NoPermissions }))
 );
 const NoContentType = lazy(
-  () => import("./NoContentTypePage-BKMgOyd3.mjs").then((mod) => ({ default: mod.NoContentType }))
+  () => import("./NoContentTypePage-DVhkugsf.mjs").then((mod) => ({ default: mod.NoContentType }))
 );
 const CollectionTypePages = () => {
   const { collectionType } = useParams();
@@ -1714,7 +1892,7 @@ const CollectionTypePages = () => {
 const CLONE_RELATIVE_PATH = ":collectionType/:slug/clone/:origin";
 const CLONE_PATH = `/content-manager/${CLONE_RELATIVE_PATH}`;
 const LIST_RELATIVE_PATH = ":collectionType/:slug";
-const LIST_PATH = `/content-manager/${LIST_RELATIVE_PATH}`;
+const LIST_PATH = `/content-manager/collection-types/:slug`;
 const routes = [
   {
     path: LIST_RELATIVE_PATH,
@@ -1748,6 +1926,7 @@ const routes = [
     path: "no-content-types",
     Component: NoContentType
   },
+  ...routes$2,
   ...routes$1
 ];
 const DocumentActions = ({ actions: actions2 }) => {
@@ -1846,6 +2025,11 @@ const DocumentActionButton = (action) => {
     ) : null
   ] });
 };
+const MenuItem = styled(Menu.Item)`
+  &:hover {
+    background: ${({ theme, isVariantDanger, isDisabled }) => isVariantDanger && !isDisabled ? theme.colors.danger100 : "neutral"};
+  }
+`;
 const DocumentActionsMenu = ({
   actions: actions2,
   children,
@@ -1904,48 +2088,32 @@ const DocumentActionsMenu = ({
     /* @__PURE__ */ jsxs(Menu.Content, { maxHeight: void 0, popoverPlacement: "bottom-end", children: [
       actions2.map((action) => {
         return /* @__PURE__ */ jsx(
-          Menu.Item,
+          MenuItem,
           {
             disabled: action.disabled,
             onSelect: handleClick(action),
             display: "block",
-            children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 4, children: [
-              /* @__PURE__ */ jsxs(
-                Flex,
-                {
-                  color: !action.disabled ? convertActionVariantToColor(action.variant) : "inherit",
-                  gap: 2,
-                  tag: "span",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Flex,
-                      {
-                        tag: "span",
-                        color: !action.disabled ? convertActionVariantToIconColor(action.variant) : "inherit",
-                        children: action.icon
-                      }
-                    ),
-                    action.label
-                  ]
-                }
-              ),
-              action.id.startsWith("HistoryAction") && /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  alignItems: "center",
-                  background: "alternative100",
-                  borderStyle: "solid",
-                  borderColor: "alternative200",
-                  borderWidth: "1px",
-                  height: 5,
-                  paddingLeft: 2,
-                  paddingRight: 2,
-                  hasRadius: true,
-                  color: "alternative600",
-                  children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", lineHeight: 1, children: formatMessage({ id: "global.new", defaultMessage: "New" }) })
-                }
-              )
-            ] })
+            isVariantDanger: action.variant === "danger",
+            isDisabled: action.disabled,
+            children: /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", gap: 4, children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                color: !action.disabled ? convertActionVariantToColor(action.variant) : "inherit",
+                gap: 2,
+                tag: "span",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Flex,
+                    {
+                      tag: "span",
+                      color: !action.disabled ? convertActionVariantToIconColor(action.variant) : "inherit",
+                      children: action.icon
+                    }
+                  ),
+                  action.label
+                ]
+              }
+            ) })
           },
           action.id
         );
@@ -2056,6 +2224,18 @@ const DocumentActionModal = ({
     typeof Footer === "function" ? /* @__PURE__ */ jsx(Footer, { onClose: handleClose }) : Footer
   ] }) });
 };
+const transformData = (data) => {
+  if (Array.isArray(data)) {
+    return data.map(transformData);
+  }
+  if (typeof data === "object" && data !== null) {
+    if ("apiData" in data) {
+      return data.apiData;
+    }
+    return mapValues(transformData)(data);
+  }
+  return data;
+};
 const PublishAction$1 = ({
   activeTab,
   documentId,
@@ -2070,6 +2250,7 @@ const PublishAction$1 = ({
   const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
   const isListView = useMatch(LIST_PATH) !== null;
   const isCloning = useMatch(CLONE_PATH) !== null;
+  const { id } = useParams();
   const { formatMessage } = useIntl();
   const canPublish = useDocumentRBAC("PublishAction", ({ canPublish: canPublish2 }) => canPublish2);
   const { publish } = useDocumentActions();
@@ -2169,13 +2350,15 @@ const PublishAction$1 = ({
           documentId,
           params
         },
-        formDocumentToData(formValues)
+        transformData(formValues)
       );
       if ("data" in res && collectionType !== SINGLE_TYPES) {
-        navigate({
-          pathname: `../${collectionType}/${model}/${res.data.documentId}`,
-          search: rawQuery
-        });
+        if (id === "create") {
+          navigate({
+            pathname: `../${collectionType}/${model}/${res.data.documentId}`,
+            search: rawQuery
+          });
+        }
       } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
         setErrors(formatValidationErrors(res.error));
       }
@@ -2228,36 +2411,7 @@ const PublishAction$1 = ({
   };
 };
 PublishAction$1.type = "publish";
-const formDocumentToData = (document) => {
-  return Object.keys(document).reduce((acc, key) => {
-    if (document[key] !== void 0) {
-      acc[key] = document[key];
-    }
-    if (typeof document[key] === "object" && document[key] !== null) {
-      if ("connect" in document[key] && document[key].connect !== null) {
-        acc[key] = {
-          ...acc[key],
-          connect: document[key].connect.map((item) => {
-            return {
-              documentId: item.documentId
-            };
-          })
-        };
-      }
-      if ("disconnect" in document[key] && document[key].disconnect !== null) {
-        acc[key] = {
-          ...acc[key],
-          disconnect: document[key].disconnect.map((item) => {
-            return {
-              documentId: item.documentId
-            };
-          })
-        };
-      }
-    }
-    return acc;
-  }, {});
-};
+PublishAction$1.position = "panel";
 const UpdateAction = ({
   activeTab,
   documentId,
@@ -2280,96 +2434,134 @@ const UpdateAction = ({
   const validate = useForm("UpdateAction", (state) => state.validate);
   const setErrors = useForm("UpdateAction", (state) => state.setErrors);
   const resetForm = useForm("PublishAction", ({ resetForm: resetForm2 }) => resetForm2);
-  return {
-    /**
-     * 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",
-    label: formatMessage({
-      id: "content-manager.containers.Edit.save",
-      defaultMessage: "Save"
-    }),
-    onClick: async () => {
-      setSubmitting(true);
-      try {
-        const { errors } = await validate(true, {
-          status: "draft"
+  const handleUpdate = React.useCallback(async () => {
+    setSubmitting(true);
+    try {
+      if (!modified) {
+        return;
+      }
+      const { errors } = await validate(true, {
+        status: "draft"
+      });
+      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."
+          })
         });
-        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."
-            })
-          });
-          return;
-        }
-        if (isCloning) {
-          const res = await clone(
-            {
-              model,
-              documentId: cloneMatch.params.origin,
-              params
-            },
-            formDocumentToData(document)
-          );
-          if ("data" in res) {
-            navigate(
-              {
-                pathname: `../${res.data.documentId}`,
-                search: rawQuery
-              },
-              { relative: "path" }
-            );
-          } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            setErrors(formatValidationErrors(res.error));
-          }
-        } else if (documentId || collectionType === SINGLE_TYPES) {
-          const res = await update(
+        return;
+      }
+      if (isCloning) {
+        const res = await clone(
+          {
+            model,
+            documentId: cloneMatch.params.origin,
+            params
+          },
+          transformData(document)
+        );
+        if ("data" in res) {
+          navigate(
             {
-              collectionType,
-              model,
-              documentId,
-              params
+              pathname: `../${res.data.documentId}`,
+              search: rawQuery
             },
-            formDocumentToData(document)
+            { relative: "path" }
           );
-          if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            setErrors(formatValidationErrors(res.error));
-          } else {
-            resetForm();
-          }
+        } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+          setErrors(formatValidationErrors(res.error));
+        }
+      } else if (documentId || collectionType === SINGLE_TYPES) {
+        const res = await update(
+          {
+            collectionType,
+            model,
+            documentId,
+            params
+          },
+          transformData(document)
+        );
+        if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+          setErrors(formatValidationErrors(res.error));
         } else {
-          const res = await create(
+          resetForm();
+        }
+      } else {
+        const res = await create(
+          {
+            model,
+            params
+          },
+          transformData(document)
+        );
+        if ("data" in res && collectionType !== SINGLE_TYPES) {
+          navigate(
             {
-              model,
-              params
+              pathname: `../${res.data.documentId}`,
+              search: rawQuery
             },
-            formDocumentToData(document)
+            { replace: true, relative: "path" }
           );
-          if ("data" in res && collectionType !== SINGLE_TYPES) {
-            navigate(
-              {
-                pathname: `../${res.data.documentId}`,
-                search: rawQuery
-              },
-              { replace: true, relative: "path" }
-            );
-          } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            setErrors(formatValidationErrors(res.error));
-          }
+        } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+          setErrors(formatValidationErrors(res.error));
         }
-      } finally {
-        setSubmitting(false);
       }
+    } finally {
+      setSubmitting(false);
     }
+  }, [
+    clone,
+    cloneMatch?.params.origin,
+    collectionType,
+    create,
+    document,
+    documentId,
+    formatMessage,
+    formatValidationErrors,
+    isCloning,
+    model,
+    modified,
+    navigate,
+    params,
+    rawQuery,
+    resetForm,
+    setErrors,
+    setSubmitting,
+    toggleNotification,
+    update,
+    validate
+  ]);
+  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 {
+    /**
+     * 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",
+    label: formatMessage({
+      id: "global.save",
+      defaultMessage: "Save"
+    }),
+    onClick: handleUpdate
   };
 };
 UpdateAction.type = "update";
+UpdateAction.position = "panel";
 const UNPUBLISH_DRAFT_OPTIONS = {
   KEEP: "keep",
   DISCARD: "discard"
@@ -2492,6 +2684,7 @@ const UnpublishAction$1 = ({
   };
 };
 UnpublishAction$1.type = "unpublish";
+UnpublishAction$1.position = "panel";
 const DiscardAction = ({
   activeTab,
   documentId,
@@ -2542,6 +2735,7 @@ const DiscardAction = ({
   };
 };
 DiscardAction.type = "discard";
+DiscardAction.position = "panel";
 const DEFAULT_ACTIONS = [PublishAction$1, UpdateAction, UnpublishAction$1, DiscardAction];
 const intervals = ["years", "months", "days", "hours", "minutes", "seconds"];
 const RelativeTime = React.forwardRef(
@@ -2554,7 +2748,7 @@ const RelativeTime = React.forwardRef(
     });
     const unit = intervals.find((intervalUnit) => {
       return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
-    });
+    }) ?? "seconds";
     const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
     const customInterval = customIntervals.find(
       (custom) => interval[custom.unit] < custom.threshold
@@ -2588,19 +2782,29 @@ const getDisplayName = ({
   return email ?? "";
 };
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-const DocumentStatus = ({ status = "draft", ...restProps }) => {
+const DocumentStatus = ({ status = "draft", size = "S", ...restProps }) => {
   const statusVariant = status === "draft" ? "secondary" : status === "published" ? "success" : "alternative";
-  return /* @__PURE__ */ jsx(Status, { ...restProps, showBullet: false, size: "S", variant: statusVariant, children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: capitalise(status) }) });
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(Status, { ...restProps, size, variant: statusVariant, children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: formatMessage({
+    id: `content-manager.containers.List.${status}`,
+    defaultMessage: capitalise(status)
+  }) }) });
 };
 const Header = ({ isCreating, status, title: documentTitle = "Untitled" }) => {
   const { formatMessage } = useIntl();
   const isCloning = useMatch(CLONE_PATH) !== null;
+  const params = useParams();
   const title = isCreating ? formatMessage({
     id: "content-manager.containers.edit.title.new",
     defaultMessage: "Create an entry"
   }) : documentTitle;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", paddingTop: 6, paddingBottom: 4, gap: 2, children: [
-    /* @__PURE__ */ jsx(BackButton, {}),
+    /* @__PURE__ */ jsx(
+      BackButton,
+      {
+        fallback: params.collectionType === SINGLE_TYPES ? void 0 : `../${COLLECTION_TYPES}/${params.slug}`
+      }
+    ),
     /* @__PURE__ */ jsxs(Flex, { width: "100%", justifyContent: "space-between", gap: "80px", alignItems: "flex-start", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: title }),
       /* @__PURE__ */ jsx(HeaderToolbar, {})
@@ -2651,7 +2855,7 @@ const HeaderToolbar = () => {
           meta: isCloning ? void 0 : meta,
           collectionType
         },
-        descriptions: plugins["content-manager"].apis.getDocumentActions(),
+        descriptions: plugins["content-manager"].apis.getDocumentActions("header"),
         children: (actions2) => {
           const headerActions = actions2.filter((action) => {
             const positions = Array.isArray(action.position) ? action.position : [action.position];
@@ -2859,6 +3063,7 @@ const ConfigureTheViewAction = ({ collectionType, model }) => {
   };
 };
 ConfigureTheViewAction.type = "configure-the-view";
+ConfigureTheViewAction.position = "header";
 const EditTheModelAction = ({ model }) => {
   const navigate = useNavigate();
   const { formatMessage } = useIntl();
@@ -2875,6 +3080,7 @@ const EditTheModelAction = ({ model }) => {
   };
 };
 EditTheModelAction.type = "edit-the-model";
+EditTheModelAction.position = "header";
 const DeleteAction$1 = ({ documentId, model, collectionType, document }) => {
   const navigate = useNavigate();
   const { formatMessage } = useIntl();
@@ -2948,6 +3154,7 @@ const DeleteAction$1 = ({ documentId, model, collectionType, document }) => {
   };
 };
 DeleteAction$1.type = "delete";
+DeleteAction$1.position = ["header", "table-row"];
 const DEFAULT_HEADER_ACTIONS = [EditTheModelAction, ConfigureTheViewAction, DeleteAction$1];
 const Panels = () => {
   const isCloning = useMatch(CLONE_PATH) !== null;
@@ -3010,7 +3217,7 @@ const ActionsPanelContent = () => {
       DescriptionComponentRenderer,
       {
         props,
-        descriptions: plugins["content-manager"].apis.getDocumentActions(),
+        descriptions: plugins["content-manager"].apis.getDocumentActions("panel"),
         children: (actions2) => /* @__PURE__ */ jsx(DocumentActions, { actions: actions2 })
       }
     ),
@@ -3037,7 +3244,7 @@ const Panel = React.forwardRef(({ children, title }, ref) => {
       justifyContent: "stretch",
       alignItems: "flex-start",
       children: [
-        /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "sigma", textTransform: "uppercase", children: title }),
+        /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "sigma", textTransform: "uppercase", textColor: "neutral600", children: title }),
         children
       ]
     }
@@ -3068,7 +3275,7 @@ const ConfirmBulkActionDialog = ({
     ] })
   ] }) });
 };
-const BoldChunk$1 = (chunks) => /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: chunks });
+const BoldChunk = (chunks) => /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: chunks });
 const ConfirmDialogPublishAll = ({
   isOpen,
   onToggleDialog,
@@ -3117,7 +3324,7 @@ const ConfirmDialogPublishAll = ({
               defaultMessage: "<b>{count} {count, plural, one { relation } other { relations } } out of {entities} { entities, plural, one { entry } other { entries } } {count, plural, one { is } other { are } }</b> not published yet and might lead to unexpected behavior. "
             },
             {
-              b: BoldChunk$1,
+              b: BoldChunk,
               count: countDraftRelations,
               entities: selectedEntries.length
             }
@@ -3156,6 +3363,16 @@ const ConfirmDialogPublishAll = ({
 const TypographyMaxWidth = styled(Typography)`
   max-width: 300px;
 `;
+const TableComponent = styled(RawTable)`
+  width: 100%;
+  table-layout: fixed;
+  td:first-child {
+    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+  }
+  td:first-of-type {
+    padding: ${({ theme }) => theme.spaces[4]};
+  }
+`;
 const formatErrorMessages = (errors, parentKey, formatMessage) => {
   const messages = [];
   Object.entries(errors).forEach(([key, value]) => {
@@ -3260,7 +3477,7 @@ const SelectedEntriesTableContent = ({
       )
     ] }),
     /* @__PURE__ */ jsx(Table.Loading, {}),
-    /* @__PURE__ */ jsx(Table.Body, { children: rowsToDisplay.map((row, index2) => /* @__PURE__ */ jsxs(Table.Row, { children: [
+    /* @__PURE__ */ jsx(Table.Body, { children: rowsToDisplay.map((row) => /* @__PURE__ */ jsxs(Table.Row, { children: [
       /* @__PURE__ */ jsx(Table.CheckboxCell, { id: row.id }),
       /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Typography, { children: row.id }) }),
       shouldDisplayMainField && /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Typography, { children: row[mainField] }) }),
@@ -3287,18 +3504,10 @@ const SelectedEntriesTableContent = ({
             search: row.locale && `?plugins[i18n][locale]=${row.locale}`
           },
           state: { from: pathname },
-          label: formatMessage(
-            { id: "app.component.HelperPluginTable.edit", defaultMessage: "Edit {target}" },
-            {
-              target: formatMessage(
-                {
-                  id: "content-manager.components.ListViewHelperPluginTable.row-line",
-                  defaultMessage: "item line {number}"
-                },
-                { number: index2 + 1 }
-              )
-            }
-          ),
+          label: formatMessage({
+            id: "content-manager.bulk-publish.edit",
+            defaultMessage: "Edit"
+          }),
           target: "_blank",
           marginLeft: "auto",
           variant: "ghost",
@@ -3308,7 +3517,73 @@ const SelectedEntriesTableContent = ({
     ] }, row.id)) })
   ] });
 };
-const BoldChunk = (chunks) => /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: chunks });
+const PublicationStatusSummary = ({ count, icon, message }) => {
+  return /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", flex: 1, gap: 3, children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      icon,
+      /* @__PURE__ */ jsx(Typography, { children: message })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: count })
+  ] });
+};
+const PublicationStatusGrid = ({
+  entriesReadyToPublishCount,
+  entriesPublishedCount,
+  entriesModifiedCount,
+  entriesWithErrorsCount
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(Box, { hasRadius: true, borderColor: "neutral150", children: /* @__PURE__ */ jsx(TableComponent, { colCount: 2, rowCount: 2, children: /* @__PURE__ */ jsxs(Tbody, { children: [
+    /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+        PublicationStatusSummary,
+        {
+          count: entriesReadyToPublishCount,
+          icon: /* @__PURE__ */ jsx(CheckCircle, { fill: "success600" }),
+          message: formatMessage({
+            id: "app.utils.ready-to-publish",
+            defaultMessage: "Ready to publish"
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+        PublicationStatusSummary,
+        {
+          count: entriesPublishedCount,
+          icon: /* @__PURE__ */ jsx(CheckCircle, { fill: "success600" }),
+          message: formatMessage({
+            id: "app.utils.already-published",
+            defaultMessage: "Already published"
+          })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+        PublicationStatusSummary,
+        {
+          count: entriesModifiedCount,
+          icon: /* @__PURE__ */ jsx(ArrowsCounterClockwise, { fill: "alternative600" }),
+          message: formatMessage({
+            id: "content-manager.bulk-publish.modified",
+            defaultMessage: "Ready to publish changes"
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+        PublicationStatusSummary,
+        {
+          count: entriesWithErrorsCount,
+          icon: /* @__PURE__ */ jsx(CrossCircle, { fill: "danger600" }),
+          message: formatMessage({
+            id: "content-manager.bulk-publish.waiting-for-action",
+            defaultMessage: "Waiting for action"
+          })
+        }
+      ) })
+    ] })
+  ] }) }) });
+};
 const SelectedEntriesModalContent = ({
   listViewSelectedEntries,
   toggleModal,
@@ -3367,7 +3642,6 @@ const SelectedEntriesModalContent = ({
       validationErrors: {}
     };
   }, [components, data, schema]);
-  const [publishedCount, setPublishedCount] = React.useState(0);
   const [isDialogOpen, setIsDialogOpen] = React.useState(false);
   const { publishMany: bulkPublishAction } = useDocumentActions();
   const [, { isLoading: isSubmittingForm }] = usePublishManyDocumentsMutation();
@@ -3379,53 +3653,36 @@ const SelectedEntriesModalContent = ({
   const selectedEntriesWithErrorsCount = selectedEntries.filter(
     ({ documentId }) => validationErrors[documentId]
   ).length;
-  const selectedEntriesPublished = selectedEntries.filter(
+  const selectedEntriesPublishedCount = selectedEntries.filter(
     ({ status }) => status === "published"
   ).length;
-  const selectedEntriesWithNoErrorsCount = selectedEntries.length - selectedEntriesWithErrorsCount - selectedEntriesPublished;
+  const selectedEntriesModifiedCount = selectedEntries.filter(
+    ({ status, documentId }) => status === "modified" && !validationErrors[documentId]
+  ).length;
+  const selectedEntriesWithNoErrorsCount = selectedEntries.length - selectedEntriesWithErrorsCount - selectedEntriesPublishedCount;
   const toggleDialog = () => setIsDialogOpen((prev) => !prev);
   const handleConfirmBulkPublish = async () => {
     toggleDialog();
     const res = await bulkPublishAction({ model, documentIds: entriesToPublish, params });
     if (!("error" in res)) {
-      setPublishedCount(res.count);
       const unpublishedEntries = rows.filter((row) => {
         return !entriesToPublish.includes(row.documentId);
       });
       setListViewSelectedDocuments(unpublishedEntries);
     }
   };
-  const getFormattedCountMessage = () => {
-    if (publishedCount) {
-      return formatMessage(
-        {
-          id: getTranslation("containers.list.selectedEntriesModal.publishedCount"),
-          defaultMessage: "<b>{publishedCount}</b> {publishedCount, plural, =0 {entries} one {entry} other {entries}} published. <b>{withErrorsCount}</b> {withErrorsCount, plural, =0 {entries} one {entry} other {entries}} waiting for action."
-        },
-        {
-          publishedCount,
-          withErrorsCount: selectedEntriesWithErrorsCount,
-          b: BoldChunk
-        }
-      );
-    }
-    return formatMessage(
-      {
-        id: getTranslation("containers.list.selectedEntriesModal.selectedCount"),
-        defaultMessage: "<b>{alreadyPublishedCount}</b> {alreadyPublishedCount, plural, =0 {entries} one {entry} other {entries}} already published. <b>{readyToPublishCount}</b> {readyToPublishCount, plural, =0 {entries} one {entry} other {entries}} ready to publish. <b>{withErrorsCount}</b> {withErrorsCount, plural, =0 {entries} one {entry} other {entries}} waiting for action."
-      },
-      {
-        readyToPublishCount: selectedEntriesWithNoErrorsCount,
-        withErrorsCount: selectedEntriesWithErrorsCount,
-        alreadyPublishedCount: selectedEntriesPublished,
-        b: BoldChunk
-      }
-    );
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Modal.Body, { children: [
-      /* @__PURE__ */ jsx(Typography, { children: getFormattedCountMessage() }),
-      /* @__PURE__ */ jsx(Box, { marginTop: 5, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
+        PublicationStatusGrid,
+        {
+          entriesReadyToPublishCount: selectedEntriesWithNoErrorsCount - selectedEntriesModifiedCount,
+          entriesPublishedCount: selectedEntriesPublishedCount,
+          entriesModifiedCount: selectedEntriesModifiedCount,
+          entriesWithErrorsCount: selectedEntriesWithErrorsCount
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { marginTop: 7, children: /* @__PURE__ */ jsx(
         SelectedEntriesTableContent,
         {
           isPublishing: isSubmittingForm,
@@ -3446,7 +3703,7 @@ const SelectedEntriesModalContent = ({
           Button,
           {
             onClick: toggleDialog,
-            disabled: selectedEntries.length === 0 || selectedEntries.length === selectedEntriesWithErrorsCount || selectedEntriesPublished === selectedEntries.length || isLoading,
+            disabled: selectedEntries.length === 0 || selectedEntries.length === selectedEntriesWithErrorsCount || selectedEntriesPublishedCount === selectedEntries.length || isLoading,
             loading: isSubmittingForm,
             children: formatMessage({ id: "app.utils.publish", defaultMessage: "Publish" })
           }
@@ -3472,8 +3729,7 @@ const PublishAction = ({ documents, model }) => {
   const refetchList = () => {
     contentManagerApi.util.invalidateTags([{ type: "Document", id: `${model}_LIST` }]);
   };
-  if (!showPublishButton)
-    return null;
+  if (!showPublishButton) return null;
   return {
     actionType: "publish",
     variant: "tertiary",
@@ -3541,8 +3797,7 @@ const DeleteAction = ({ documents, model }) => {
       selectRow([]);
     }
   };
-  if (!hasDeletePermission)
-    return null;
+  if (!hasDeletePermission) return null;
   return {
     variant: "danger-light",
     label: formatMessage({ id: "global.delete", defaultMessage: "Delete" }),
@@ -3591,8 +3846,7 @@ const UnpublishAction = ({ documents, model }) => {
     }
   };
   const showUnpublishButton = hasDraftAndPublishEnabled && hasPublishPermission && documents.some((entry) => entry.status === "published" || entry.status === "modified");
-  if (!showUnpublishButton)
-    return null;
+  if (!showUnpublishButton) return null;
   return {
     variant: "tertiary",
     label: formatMessage({ id: "app.utils.unpublish", defaultMessage: "Unpublish" }),
@@ -3697,7 +3951,7 @@ const TableActions = ({ document }) => {
     DescriptionComponentRenderer,
     {
       props,
-      descriptions: plugins["content-manager"].apis.getDocumentActions().filter((action) => action.name !== "PublishAction"),
+      descriptions: plugins["content-manager"].apis.getDocumentActions("table-row").filter((action) => action.name !== "PublishAction"),
       children: (actions2) => {
         const tableRowActions = actions2.filter((action) => {
           const positions = Array.isArray(action.position) ? action.position : [action.position];
@@ -3756,6 +4010,7 @@ const EditAction = ({ documentId }) => {
   };
 };
 EditAction.type = "edit";
+EditAction.position = "table-row";
 const StyledPencil = styled(Pencil)`
   path {
     fill: currentColor;
@@ -3832,6 +4087,7 @@ const CloneAction = ({ model, documentId }) => {
   };
 };
 CloneAction.type = "clone";
+CloneAction.position = "table-row";
 const StyledDuplicate = styled(Duplicate)`
   path {
     fill: currentColor;
@@ -3918,7 +4174,14 @@ class ContentManagerPlugin {
         addDocumentHeaderAction: this.addDocumentHeaderAction.bind(this),
         addEditViewSidePanel: this.addEditViewSidePanel.bind(this),
         getBulkActions: () => this.bulkActions,
-        getDocumentActions: () => this.documentActions,
+        getDocumentActions: (position) => {
+          if (position) {
+            return this.documentActions.filter(
+              (action) => action.position == void 0 || [action.position].flat().includes(position)
+            );
+          }
+          return this.documentActions;
+        },
         getEditViewSidePanels: () => this.editViewSidePanels,
         getHeaderActions: () => this.headerActions
       }
@@ -3928,10 +4191,8 @@ class ContentManagerPlugin {
 const getPrintableType = (value) => {
   const nativeType = typeof value;
   if (nativeType === "object") {
-    if (value === null)
-      return "null";
-    if (Array.isArray(value))
-      return "array";
+    if (value === null) return "null";
+    if (Array.isArray(value)) return "array";
     if (value instanceof Object && value.constructor.name !== "Object") {
       return value.constructor.name;
     }
@@ -3942,17 +4203,27 @@ const HistoryAction = ({ model, document }) => {
   const { formatMessage } = useIntl();
   const [{ query }] = useQueryParams();
   const navigate = useNavigate();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
   const pluginsQueryParams = stringify({ plugins: query.plugins }, { encode: false });
   if (!window.strapi.features.isEnabled("cms-content-history")) {
     return null;
   }
+  const handleOnClick = () => {
+    const destination = { pathname: "history", search: pluginsQueryParams };
+    trackUsage("willNavigate", {
+      from: pathname,
+      to: `${pathname}/${destination.pathname}`
+    });
+    navigate(destination);
+  };
   return {
     icon: /* @__PURE__ */ jsx(ClockCounterClockwise, {}),
     label: formatMessage({
       id: "content-manager.history.document-action",
       defaultMessage: "Content History"
     }),
-    onClick: () => navigate({ pathname: "history", search: pluginsQueryParams }),
+    onClick: handleOnClick,
     disabled: (
       /**
        * The user is creating a new document.
@@ -3974,6 +4245,7 @@ const HistoryAction = ({ model, document }) => {
   };
 };
 HistoryAction.type = "history";
+HistoryAction.position = "header";
 const historyAdmin = {
   bootstrap(app) {
     const { addDocumentAction } = app.getPlugin("content-manager").apis;
@@ -4020,6 +4292,88 @@ const { setInitialData } = actions;
 const reducer = combineReducers({
   app: reducer$1
 });
+const previewApi = contentManagerApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getPreviewUrl: builder.query({
+      query({ query, params }) {
+        return {
+          url: `/content-manager/preview/url/${params.contentType}`,
+          method: "GET",
+          config: {
+            params: query
+          }
+        };
+      }
+    })
+  })
+});
+const { useGetPreviewUrlQuery } = previewApi;
+const ConditionalTooltip = ({ isShown, label, children }) => {
+  if (isShown) {
+    return /* @__PURE__ */ jsx(Tooltip, { label, children });
+  }
+  return children;
+};
+const PreviewSidePanel = ({ model, documentId, document }) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
+  const [{ query }] = useQueryParams();
+  const isModified = useForm("PreviewSidePanel", (state) => state.modified);
+  const { data, error } = useGetPreviewUrlQuery({
+    params: {
+      contentType: model
+    },
+    query: {
+      documentId,
+      locale: document?.locale,
+      status: document?.status
+    }
+  });
+  if (!data?.data?.url || error) {
+    return null;
+  }
+  const trackNavigation = () => {
+    const destinationPathname = pathname.replace(/\/$/, "") + "/preview";
+    trackUsage("willNavigate", { from: pathname, to: destinationPathname });
+  };
+  return {
+    title: formatMessage({ id: "content-manager.preview.panel.title", defaultMessage: "Preview" }),
+    content: /* @__PURE__ */ jsx(
+      ConditionalTooltip,
+      {
+        label: formatMessage({
+          id: "content-manager.preview.panel.button-disabled-tooltip",
+          defaultMessage: "Please save to open the preview"
+        }),
+        isShown: isModified,
+        children: /* @__PURE__ */ jsx(Box, { cursor: "not-allowed", width: "100%", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            tag: Link,
+            to: { pathname: "preview", search: stringify(query, { encode: false }) },
+            onClick: trackNavigation,
+            width: "100%",
+            disabled: isModified,
+            pointerEvents: isModified ? "none" : void 0,
+            tabIndex: isModified ? -1 : void 0,
+            children: formatMessage({
+              id: "content-manager.preview.panel.button",
+              defaultMessage: "Open preview"
+            })
+          }
+        ) })
+      }
+    )
+  };
+};
+const previewAdmin = {
+  bootstrap(app) {
+    const contentManagerPluginApis = app.getPlugin("content-manager").apis;
+    contentManagerPluginApis.addEditViewSidePanel([PreviewSidePanel]);
+  }
+};
 const index = {
   register(app) {
     const cm = new ContentManagerPlugin();
@@ -4039,7 +4393,7 @@ const index = {
     app.router.addRoute({
       path: "content-manager/*",
       lazy: async () => {
-        const { Layout } = await import("./layout-aX-RJhd5.mjs");
+        const { Layout } = await import("./layout-fQk1rMk9.mjs");
         return {
           Component: Layout
         };
@@ -4052,11 +4406,14 @@ const index = {
     if (typeof historyAdmin.bootstrap === "function") {
       historyAdmin.bootstrap(app);
     }
+    if (typeof previewAdmin.bootstrap === "function") {
+      previewAdmin.bootstrap(app);
+    }
   },
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
-        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/ar.json": () => import("./ar-CCEVvqGG.mjs"), "./translations/ca.json": () => import("./ca-5U32ON2v.mjs"), "./translations/cs.json": () => import("./cs-CM2aBUar.mjs"), "./translations/de.json": () => import("./de-C72KDNOl.mjs"), "./translations/en.json": () => import("./en-DKV44jRb.mjs"), "./translations/es.json": () => import("./es-CeXiYflN.mjs"), "./translations/eu.json": () => import("./eu-CdALomew.mjs"), "./translations/fr.json": () => import("./fr-CD9VFbPM.mjs"), "./translations/gu.json": () => import("./gu-CNpaMDpH.mjs"), "./translations/hi.json": () => import("./hi-Dwvd04m3.mjs"), "./translations/hu.json": () => import("./hu-CeYvaaO0.mjs"), "./translations/id.json": () => import("./id-BtwA9WJT.mjs"), "./translations/it.json": () => import("./it-BrVPqaf1.mjs"), "./translations/ja.json": () => import("./ja-CtsUxOvk.mjs"), "./translations/ko.json": () => import("./ko-HVQRlfUI.mjs"), "./translations/ml.json": () => import("./ml-BihZwQit.mjs"), "./translations/ms.json": () => import("./ms-m_WjyWx7.mjs"), "./translations/nl.json": () => import("./nl-D4R9gHx5.mjs"), "./translations/pl.json": () => import("./pl-sbx9mSt_.mjs"), "./translations/pt-BR.json": () => import("./pt-BR-C71iDxnh.mjs"), "./translations/pt.json": () => import("./pt-BsaFvS8-.mjs"), "./translations/ru.json": () => import("./ru-BE6A4Exp.mjs"), "./translations/sa.json": () => import("./sa-Dag0k-Z8.mjs"), "./translations/sk.json": () => import("./sk-BFg-R8qJ.mjs"), "./translations/sv.json": () => import("./sv-CUnfWGsh.mjs"), "./translations/th.json": () => import("./th-BqbI8lIT.mjs"), "./translations/tr.json": () => import("./tr-CgeK3wJM.mjs"), "./translations/uk.json": () => import("./uk-CR-zDhAY.mjs"), "./translations/vi.json": () => import("./vi-DUXIk_fw.mjs"), "./translations/zh-Hans.json": () => import("./zh-Hans-BPQcRIyH.mjs"), "./translations/zh.json": () => import("./zh-BWZspA60.mjs") }), `./translations/${locale}.json`).then(({ default: data }) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/ar.json": () => import("./ar-CCEVvqGG.mjs"), "./translations/ca.json": () => import("./ca-5U32ON2v.mjs"), "./translations/cs.json": () => import("./cs-CM2aBUar.mjs"), "./translations/de.json": () => import("./de-C72KDNOl.mjs"), "./translations/en.json": () => import("./en-D65uIF6Y.mjs"), "./translations/es.json": () => import("./es-D34tqjMw.mjs"), "./translations/eu.json": () => import("./eu-CdALomew.mjs"), "./translations/fr.json": () => import("./fr-DBseuRuB.mjs"), "./translations/gu.json": () => import("./gu-CNpaMDpH.mjs"), "./translations/hi.json": () => import("./hi-Dwvd04m3.mjs"), "./translations/hu.json": () => import("./hu-CeYvaaO0.mjs"), "./translations/id.json": () => import("./id-BtwA9WJT.mjs"), "./translations/it.json": () => import("./it-BrVPqaf1.mjs"), "./translations/ja.json": () => import("./ja-BHqhDq4V.mjs"), "./translations/ko.json": () => import("./ko-HVQRlfUI.mjs"), "./translations/ml.json": () => import("./ml-BihZwQit.mjs"), "./translations/ms.json": () => import("./ms-m_WjyWx7.mjs"), "./translations/nl.json": () => import("./nl-D4R9gHx5.mjs"), "./translations/pl.json": () => import("./pl-sbx9mSt_.mjs"), "./translations/pt-BR.json": () => import("./pt-BR-C71iDxnh.mjs"), "./translations/pt.json": () => import("./pt-BsaFvS8-.mjs"), "./translations/ru.json": () => import("./ru-BE6A4Exp.mjs"), "./translations/sa.json": () => import("./sa-Dag0k-Z8.mjs"), "./translations/sk.json": () => import("./sk-BFg-R8qJ.mjs"), "./translations/sv.json": () => import("./sv-CUnfWGsh.mjs"), "./translations/th.json": () => import("./th-BqbI8lIT.mjs"), "./translations/tr.json": () => import("./tr-CgeK3wJM.mjs"), "./translations/uk.json": () => import("./uk-CR-zDhAY.mjs"), "./translations/vi.json": () => import("./vi-DUXIk_fw.mjs"), "./translations/zh-Hans.json": () => import("./zh-Hans-BPQcRIyH.mjs"), "./translations/zh.json": () => import("./zh-BWZspA60.mjs") }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
           return {
             data: prefixPluginTranslations(data, PLUGIN_ID),
             locale
@@ -4073,23 +4430,27 @@ const index = {
   }
 };
 export {
-  ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD as A,
+  useUpdateContentTypeConfigurationMutation as A,
   BulkActionsRenderer as B,
   COLLECTION_TYPES as C,
   DocumentStatus as D,
-  extractContentTypeComponents as E,
-  DEFAULT_SETTINGS as F,
-  convertEditLayoutToFieldLayouts as G,
+  ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD as E,
+  extractContentTypeComponents as F,
+  DEFAULT_SETTINGS as G,
   HOOKS as H,
   InjectionZone as I,
-  useDocument as J,
-  index as K,
-  useContentManagerContext as L,
-  useDocumentActions as M,
+  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,
@@ -4102,19 +4463,19 @@ export {
   Header as j,
   PERMISSIONS as k,
   DocumentRBAC as l,
-  DOCUMENT_META_FIELDS as m,
-  CLONE_PATH as n,
-  useDocLayout as o,
+  useDocLayout as m,
+  createDefaultForm as n,
+  CLONE_PATH as o,
   useGetContentTypeConfigurationQuery as p,
   CREATOR_FIELDS as q,
   getMainField as r,
   setInitialData as s,
-  getDisplayName as t,
+  transformDocument as t,
   useContentTypeSchema as u,
-  checkIfAttributeIsDisplayable as v,
-  useGetAllDocumentsQuery as w,
-  convertListLayoutToFieldLayouts as x,
-  capitalise as y,
-  useUpdateContentTypeConfigurationMutation as z
+  getDisplayName as v,
+  checkIfAttributeIsDisplayable as w,
+  useGetAllDocumentsQuery as x,
+  convertListLayoutToFieldLayouts as y,
+  capitalise as z
 };
-//# sourceMappingURL=index-TaRzG09p.mjs.map
+//# sourceMappingURL=index-ZKrsjv-2.mjs.map