@strapi/content-manager 0.0.0-experimental.7b750d18de359d0a42233cb8707e3c31c5983345 → 0.0.0-experimental.7bd770909ce799cf6fc76b7ebccd6d3ce2e377b5

package/dist/_chunks/{index-CPCHQ3X_.mjs → index-DLIkNVnQ.mjs}

@@ -1,25 +1,33 @@
 import { More, Cross, WarningCircle, ListPlus, Pencil, Trash, Check, CrossCircle, CheckCircle, ArrowsCounterClockwise, ChevronRight, Duplicate, ClockCounterClockwise, Feather } from "@strapi/icons";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useStrapiApp, createContext, useAuth, useRBAC, Page, adminApi, translatedErrors, useNotification, useAPIErrorHandler, useQueryParams, getYupValidationErrors, useForm, useTracking, useGuidedTour, BackButton, DescriptionComponentRenderer, useTable, Table } from "@strapi/admin/strapi-admin";
+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, Loader, 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 { stringify } from "qs";
 import pipe from "lodash/fp/pipe";
 import { intervalToDuration, isPast } from "date-fns";
-import { styled } from "styled-components";
-import { stringify } from "qs";
 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";
@@ -100,6 +108,7 @@ const DocumentRBAC = ({ children, permissions }) => {
   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 contentTypePermissions2 = userPermissions.filter(
@@ -110,7 +119,14 @@ const DocumentRBAC = ({ children, permissions }) => {
       return { ...acc, [action]: [permission] };
     }, {});
   }, [slug, userPermissions]);
-  const { isLoading, allowedActions } = useRBAC(contentTypePermissions, permissions ?? void 0);
+  const { isLoading, allowedActions } = useRBAC(
+    contentTypePermissions,
+    permissions ?? void 0,
+    // 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) : [];
@@ -265,7 +281,7 @@ const documentApi = contentManagerApi.injectEndpoints({
         url: `/content-manager/collection-types/${model}`,
         method: "GET",
         config: {
-          params
+          params: stringify(params, { encode: true })
         }
       }),
       providesTags: (result, _error, arg) => {
@@ -444,8 +460,7 @@ const {
   useUnpublishManyDocumentsMutation
 } = documentApi;
 const buildValidParams = (query) => {
-  if (!query)
-    return query;
+  if (!query) return query;
   const { plugins: _, ...validQueryParams } = {
     ...query,
     ...Object.values(query?.plugins ?? {}).reduce(
@@ -453,14 +468,29 @@ const buildValidParams = (query) => {
       {}
     )
   };
-  if ("_q" in validQueryParams) {
-    validQueryParams._q = encodeURIComponent(validQueryParams._q);
-  }
   return validQueryParams;
 };
 const isBaseQueryError = (error) => {
   return error.name !== void 0;
 };
+const arrayValidator = (attribute, options) => ({
+  message: translatedErrors.required,
+  test(value) {
+    if (options.status === "draft") {
+      return true;
+    }
+    if (!attribute.required) {
+      return true;
+    }
+    if (!value) {
+      return false;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return false;
+    }
+    return true;
+  }
+});
 const createYupSchema = (attributes = {}, components = {}, options = { status: null }) => {
   const createModelSchema = (attributes2) => yup.object().shape(
     Object.entries(attributes2).reduce((acc, [name, attribute]) => {
@@ -468,6 +498,7 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
         return acc;
       }
       const validations = [
+        addNullableValidation,
         addRequiredValidation,
         addMinLengthValidation,
         addMaxLengthValidation,
@@ -484,12 +515,12 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
               ...acc,
               [name]: transformSchema(
                 yup.array().of(createModelSchema(attributes3).nullable(false))
-              )
+              ).test(arrayValidator(attribute, options))
             };
           } else {
             return {
               ...acc,
-              [name]: transformSchema(createModelSchema(attributes3))
+              [name]: transformSchema(createModelSchema(attributes3).nullable())
             };
           }
         }
@@ -511,7 +542,7 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
                   }
                 )
               )
-            )
+            ).test(arrayValidator(attribute, options))
           };
         case "relation":
           return {
@@ -523,7 +554,7 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
                 } else if (Array.isArray(value)) {
                   return yup.array().of(
                     yup.object().shape({
-                      id: yup.string().required()
+                      id: yup.number().required()
                     })
                   );
                 } else if (typeof value === "object") {
@@ -609,17 +640,17 @@ const nullableSchema = (schema) => {
     schema
   );
 };
+const addNullableValidation = () => (schema) => {
+  return nullableSchema(schema);
+};
 const addRequiredValidation = (attribute, options) => (schema) => {
-  if (options.status === "draft") {
-    return nullableSchema(schema);
-  }
-  if ((attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone") && attribute.required && "min" in schema) {
-    return schema.min(1, translatedErrors.required);
+  if (options.status === "draft" || !attribute.required) {
+    return schema;
   }
-  if (attribute.required && attribute.type !== "relation") {
+  if (attribute.required && "required" in schema) {
     return schema.required(translatedErrors.required);
   }
-  return nullableSchema(schema);
+  return schema;
 };
 const addMinLengthValidation = (attribute, options) => (schema) => {
   if (options.status === "draft") {
@@ -647,31 +678,12 @@ const addMaxLengthValidation = (attribute) => (schema) => {
   return schema;
 };
 const addMinValidation = (attribute, options) => (schema) => {
-  if ("min" in attribute) {
+  if (options.status === "draft") {
+    return schema;
+  }
+  if ("min" in attribute && "min" in schema) {
     const min = toInteger(attribute.min);
-    if (attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone") {
-      if (options.status !== "draft" && !attribute.required && "test" in schema && min) {
-        return schema.test(
-          "custom-min",
-          {
-            ...translatedErrors.min,
-            values: {
-              min: attribute.min
-            }
-          },
-          (value) => {
-            if (!value) {
-              return true;
-            }
-            if (Array.isArray(value) && value.length === 0) {
-              return true;
-            }
-            return value.length >= min;
-          }
-        );
-      }
-    }
-    if ("min" in schema && min) {
+    if (min) {
       return schema.min(min, {
         ...translatedErrors.min,
         values: {
@@ -960,9 +972,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;
   }, []);
@@ -1144,11 +1157,13 @@ const useDocument = (args, opts) => {
     [validationSchema]
   );
   const isLoading = isLoadingDocument || isFetchingDocument || isLoadingSchema;
+  const hasError = !!error;
   return {
     components,
     document: data?.data,
     meta: data?.meta,
     isLoading,
+    hasError,
     schema,
     schemas,
     validate
@@ -1164,16 +1179,18 @@ const useDoc = () => {
   if (!slug) {
     throw new Error("Could not find model in url params");
   }
+  const document = useDocument(
+    { documentId: origin || id, model: slug, collectionType, params },
+    {
+      skip: id === "create" || !origin && !id && collectionType !== SINGLE_TYPES
+    }
+  );
+  const returnId = origin || id === "create" ? void 0 : id;
   return {
     collectionType,
     model: slug,
-    id: origin || id === "create" ? void 0 : id,
-    ...useDocument(
-      { documentId: origin || id, model: slug, collectionType, params },
-      {
-        skip: id === "create" || !origin && !id && collectionType !== SINGLE_TYPES
-      }
-    )
+    id: returnId,
+    ...document
   };
 };
 const useContentManagerContext = () => {
@@ -1216,9 +1233,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;
@@ -1652,10 +1666,10 @@ const useDocumentActions = () => {
     update
   };
 };
-const ProtectedHistoryPage = lazy(
-  () => import("./History-BqO2G3MV.mjs").then((mod) => ({ default: mod.ProtectedHistoryPage }))
+const ProtectedHistoryPage = React.lazy(
+  () => import("./History-CIQHyi4T.mjs").then((mod) => ({ default: mod.ProtectedHistoryPage }))
 );
-const routes$1 = [
+const routes$2 = [
   {
     path: ":collectionType/:slug/:id/history",
     Component: ProtectedHistoryPage
@@ -1665,32 +1679,45 @@ const routes$1 = [
     Component: ProtectedHistoryPage
   }
 ];
+const ProtectedPreviewPage = React.lazy(
+  () => import("./Preview-BVFFm7uB.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-BU1ugeVi.mjs").then((mod) => ({ default: mod.ProtectedEditViewPage }))
+  () => import("./EditViewPage-CD_hqc1J.mjs").then((mod) => ({ default: mod.ProtectedEditViewPage }))
 );
 const ProtectedListViewPage = lazy(
-  () => import("./ListViewPage-yE_zYhcI.mjs").then((mod) => ({ default: mod.ProtectedListViewPage }))
+  () => import("./ListViewPage-C10McTK1.mjs").then((mod) => ({ default: mod.ProtectedListViewPage }))
 );
 const ProtectedListConfiguration = lazy(
-  () => import("./ListConfigurationPage-C6rsFlme.mjs").then((mod) => ({
+  () => import("./ListConfigurationPage-DcZsfyEL.mjs").then((mod) => ({
     default: mod.ProtectedListConfiguration
   }))
 );
 const ProtectedEditConfigurationPage = lazy(
-  () => import("./EditConfigurationPage-Dh6sq-G4.mjs").then((mod) => ({
+  () => import("./EditConfigurationPage-BNjOAHNS.mjs").then((mod) => ({
     default: mod.ProtectedEditConfigurationPage
   }))
 );
 const ProtectedComponentConfigurationPage = lazy(
-  () => import("./ComponentConfigurationPage-hLMNf7KI.mjs").then((mod) => ({
+  () => import("./ComponentConfigurationPage-BgCLcjXO.mjs").then((mod) => ({
     default: mod.ProtectedComponentConfigurationPage
   }))
 );
 const NoPermissions = lazy(
-  () => import("./NoPermissionsPage-h0I3ImsX.mjs").then((mod) => ({ default: mod.NoPermissions }))
+  () => import("./NoPermissionsPage-wfPBh2_0.mjs").then((mod) => ({ default: mod.NoPermissions }))
 );
 const NoContentType = lazy(
-  () => import("./NoContentTypePage-NW_FSVdY.mjs").then((mod) => ({ default: mod.NoContentType }))
+  () => import("./NoContentTypePage-CPc0Cd3S.mjs").then((mod) => ({ default: mod.NoContentType }))
 );
 const CollectionTypePages = () => {
   const { collectionType } = useParams();
@@ -1702,7 +1729,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,
@@ -1736,6 +1763,7 @@ const routes = [
     path: "no-content-types",
     Component: NoContentType
   },
+  ...routes$2,
   ...routes$1
 ];
 const DocumentActions = ({ actions: actions2 }) => {
@@ -1834,6 +1862,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,
@@ -1892,48 +1925,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
         );
@@ -2044,6 +2061,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,
@@ -2058,6 +2087,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();
@@ -2137,7 +2167,9 @@ const PublishAction$1 = ({
   const performPublish = async () => {
     setSubmitting(true);
     try {
-      const { errors } = await validate();
+      const { errors } = await validate(true, {
+        status: "published"
+      });
       if (errors) {
         toggleNotification({
           type: "danger",
@@ -2155,13 +2187,15 @@ const PublishAction$1 = ({
           documentId,
           params
         },
-        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));
       }
@@ -2245,24 +2279,24 @@ const UpdateAction = ({
      */
     disabled: isSubmitting || !modified && !isCloning || activeTab === "published",
     label: formatMessage({
-      id: "content-manager.containers.Edit.save",
+      id: "global.save",
       defaultMessage: "Save"
     }),
     onClick: async () => {
       setSubmitting(true);
       try {
-        if (activeTab !== "draft") {
-          const { errors } = await validate();
-          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;
-          }
+        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."
+            })
+          });
+          return;
         }
         if (isCloning) {
           const res = await clone(
@@ -2271,7 +2305,7 @@ const UpdateAction = ({
               documentId: cloneMatch.params.origin,
               params
             },
-            document
+            transformData(document)
           );
           if ("data" in res) {
             navigate(
@@ -2292,7 +2326,7 @@ const UpdateAction = ({
               documentId,
               params
             },
-            document
+            transformData(document)
           );
           if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
             setErrors(formatValidationErrors(res.error));
@@ -2305,7 +2339,7 @@ const UpdateAction = ({
               model,
               params
             },
-            document
+            transformData(document)
           );
           if ("data" in res && collectionType !== SINGLE_TYPES) {
             navigate(
@@ -2510,7 +2544,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
@@ -2544,19 +2578,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, {})
@@ -2644,12 +2688,12 @@ const Information = ({ activeTab }) => {
       isDisplayed: !!publishDocument?.[PUBLISHED_AT_ATTRIBUTE_NAME],
       label: formatMessage({
         id: "content-manager.containers.edit.information.last-published.label",
-        defaultMessage: "Last published"
+        defaultMessage: "Published"
       }),
       value: formatMessage(
         {
           id: "content-manager.containers.edit.information.last-published.value",
-          defaultMessage: `Published {time}{isAnonymous, select, true {} other { by {author}}}`
+          defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
         },
         {
           time: /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(publishDocument?.[PUBLISHED_AT_ATTRIBUTE_NAME]) }),
@@ -2662,12 +2706,12 @@ const Information = ({ activeTab }) => {
       isDisplayed: !!createAndUpdateDocument?.[UPDATED_AT_ATTRIBUTE_NAME],
       label: formatMessage({
         id: "content-manager.containers.edit.information.last-draft.label",
-        defaultMessage: "Last draft"
+        defaultMessage: "Updated"
       }),
       value: formatMessage(
         {
           id: "content-manager.containers.edit.information.last-draft.value",
-          defaultMessage: `Modified {time}{isAnonymous, select, true {} other { by {author}}}`
+          defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
         },
         {
           time: /* @__PURE__ */ jsx(
@@ -2685,12 +2729,12 @@ const Information = ({ activeTab }) => {
       isDisplayed: !!createAndUpdateDocument?.[CREATED_AT_ATTRIBUTE_NAME],
       label: formatMessage({
         id: "content-manager.containers.edit.information.document.label",
-        defaultMessage: "Document"
+        defaultMessage: "Created"
       }),
       value: formatMessage(
         {
           id: "content-manager.containers.edit.information.document.value",
-          defaultMessage: `Created {time}{isAnonymous, select, true {} other { by {author}}}`
+          defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
         },
         {
           time: /* @__PURE__ */ jsx(
@@ -2748,10 +2792,9 @@ const HeaderActions = ({ actions: actions2 }) => {
         SingleSelect,
         {
           size: "S",
-          disabled: action.disabled,
-          "aria-label": action.label,
           onChange: action.onSelect,
-          value: action.value,
+          "aria-label": action.label,
+          ...action,
           children: action.options.map(({ label, ...option }) => /* @__PURE__ */ jsx(SingleSelectOption, { ...option, children: label }, option.value))
         },
         action.id
@@ -2994,7 +3037,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
       ]
     }
@@ -3244,18 +3287,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",
@@ -3429,8 +3464,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",
@@ -3498,8 +3532,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" }),
@@ -3548,8 +3581,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" }),
@@ -3885,10 +3917,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;
     }
@@ -3899,17 +3929,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.
@@ -3977,6 +4017,90 @@ 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(Flex, { gap: 2, width: "100%", children: /* @__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(
+          Button,
+          {
+            variant: "tertiary",
+            tag: Link,
+            to: { pathname: "preview", search: stringify(query, { encode: false }) },
+            onClick: trackNavigation,
+            flex: "auto",
+            disabled: isModified,
+            children: formatMessage({
+              id: "content-manager.preview.panel.button",
+              defaultMessage: "Open preview"
+            })
+          }
+        )
+      }
+    ) })
+  };
+};
+const FEATURE_ID = "preview";
+const previewAdmin = {
+  bootstrap(app) {
+    if (!window.strapi.future.isEnabled(FEATURE_ID)) {
+      return;
+    }
+    const contentManagerPluginApis = app.getPlugin("content-manager").apis;
+    contentManagerPluginApis.addEditViewSidePanel([PreviewSidePanel]);
+  }
+};
 const index = {
   register(app) {
     const cm = new ContentManagerPlugin();
@@ -3996,7 +4120,7 @@ const index = {
     app.router.addRoute({
       path: "content-manager/*",
       lazy: async () => {
-        const { Layout } = await import("./layout-B4UhJ8MJ.mjs");
+        const { Layout } = await import("./layout-qE8qkNH_.mjs");
         return {
           Component: Layout
         };
@@ -4009,11 +4133,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-C8YBvRrK.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-Dtk_ot79.mjs"), "./translations/es.json": () => import("./es-D34tqjMw.mjs"), "./translations/eu.json": () => import("./eu-CdALomew.mjs"), "./translations/fr.json": () => import("./fr--pg5jUbt.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
@@ -4040,9 +4167,10 @@ export {
   HOOKS as H,
   InjectionZone as I,
   useDocument as J,
-  index as K,
-  useContentManagerContext as L,
-  useDocumentActions as M,
+  useGetPreviewUrlQuery as K,
+  index as L,
+  useContentManagerContext as M,
+  useDocumentActions as N,
   Panels as P,
   RelativeTime as R,
   SINGLE_TYPES as S,
@@ -4074,4 +4202,4 @@ export {
   capitalise as y,
   useUpdateContentTypeConfigurationMutation as z
 };
-//# sourceMappingURL=index-CPCHQ3X_.mjs.map
+//# sourceMappingURL=index-DLIkNVnQ.mjs.map