@strapi/content-manager 0.0.0-experimental.17b4116f461a49b8ce5386f7c8d79c511d40fb3b → 0.0.0-experimental.19d775295eb622de3e659110caf22fcd2cd5d10d

package/dist/_chunks/{History-DKhZAPcK.mjs → History-CzQbTOwa.mjs}

@@ -1,19 +1,19 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useForm, useStrapiApp, InputRenderer, useField, Form, Layouts, useNotification, useQueryParams, useRBAC, ConfirmDialog, createContext, Page } from "@strapi/admin/strapi-admin";
-import { Alert, Link, Flex, FieldLabel, Box, Tooltip, Divider, Typography, Grid, GridItem, Button, Portal, FocusTrap, Main } from "@strapi/design-system";
+import { useForm, useStrapiApp, InputRenderer, useField, Form, Layouts, useTracking, useNotification, useQueryParams, useRBAC, ConfirmDialog, createContext, Page } from "@strapi/admin/strapi-admin";
+import { Alert, Link, Flex, Field, Box, Tooltip, Typography, Divider, Grid, Dialog, Button, Portal, FocusTrap, Main } from "@strapi/design-system";
 import { stringify } from "qs";
 import { useIntl } from "react-intl";
 import { NavLink, useNavigate, useParams, Link as Link$1, Navigate } from "react-router-dom";
-import { b as useDoc, e as useDocumentRBAC, m as useDocLayout, C as COLLECTION_TYPES, D as DocumentStatus, d as contentManagerApi, j as PERMISSIONS, t as getDisplayName, R as RelativeTime, k as DocumentRBAC, G as useDocument, f as useDocumentLayout, o as useGetContentTypeConfigurationQuery, c as buildValidParams } from "./index-CAc9yTnx.mjs";
+import { c as useDoc, f as useDocumentRBAC, m as useDocLayout, C as COLLECTION_TYPES, D as DocumentStatus, K as removeFieldsThatDontExistOnSchema, L as prepareTempKeys, e as contentManagerApi, k as PERMISSIONS, v as getDisplayName, R as RelativeTime, l as DocumentRBAC, M as useDocument, h as useDocumentLayout, p as useGetContentTypeConfigurationQuery, d as buildValidParams } from "./index-BH2JnYpF.mjs";
 import pipe from "lodash/fp/pipe";
 import { u as useTypedSelector } from "./hooks-E5u1mcgM.mjs";
-import { a as useDynamicZone, u as useLazyComponents, b as useFieldHint, N as NotAllowedInput, U as UIDInput, W as Wysiwyg, D as DynamicZone, C as ComponentInput, B as BlocksInput, r as removeFieldsThatDontExistOnSchema, p as prepareTempKeys } from "./Field-kVFO4ZKB.mjs";
 import { ArrowLeft, WarningCircle } from "@strapi/icons";
-import styled from "styled-components";
-import { g as getRelationLabel } from "./relations-mMFEcZRq.mjs";
+import { styled } from "styled-components";
+import { a as useDynamicZone, u as useLazyComponents, b as useFieldHint, N as NotAllowedInput, M as MemoizedUIDInput, c as MemoizedWysiwyg, D as DynamicZone, d as MemoizedComponentInput, e as MemoizedBlocksInput } from "./Input-ww3KFYZr.mjs";
+import { g as getRelationLabel } from "./relations-HsflnFpO.mjs";
 const StyledAlert = styled(Alert).attrs({ closeLabel: "Close", onClose: () => {
-} })`
+}, shadow: "none" })`
   button {
     display: none;
   }
@@ -31,13 +31,13 @@ const LinkEllipsis = styled(Link)`
 const CustomRelationInput = (props) => {
   const { formatMessage } = useIntl();
   const field = useField(props.name);
-  const formattedFieldValue = Array.isArray(field.value) ? {
-    results: field.value,
-    meta: { missingCount: 0 }
-  } : field.value;
+  let formattedFieldValue;
+  if (field) {
+    formattedFieldValue = Array.isArray(field.value) ? { results: field.value, meta: { missingCount: 0 } } : field.value;
+  }
   if (!formattedFieldValue || formattedFieldValue.results.length === 0 && formattedFieldValue.meta.missingCount === 0) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(FieldLabel, { children: props.label }),
+      /* @__PURE__ */ jsx(Field.Label, { action: props.labelAction, children: props.label }),
       /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(StyledAlert, { variant: "default", children: formatMessage({
         id: "content-manager.history.content.no-relations",
         defaultMessage: "No relations."
@@ -46,10 +46,12 @@ const CustomRelationInput = (props) => {
   }
   const { results, meta } = formattedFieldValue;
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(FieldLabel, { children: props.label }),
+    /* @__PURE__ */ jsx(Field.Label, { children: props.label }),
     results.length > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, marginTop: 1, alignItems: "stretch", children: results.map((relationData) => {
-      const href = `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relationData.documentId}`;
+      const { targetModel } = props.attribute;
+      const href = `../${COLLECTION_TYPES}/${targetModel}/${relationData.documentId}`;
       const label = getRelationLabel(relationData, props.mainField);
+      const isAdminUserRelation = targetModel === "admin::user";
       return /* @__PURE__ */ jsxs(
         Flex,
         {
@@ -62,14 +64,15 @@ const CustomRelationInput = (props) => {
           background: "neutral150",
           justifyContent: "space-between",
           children: [
-            /* @__PURE__ */ jsx(Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsx(Tooltip, { description: label, children: /* @__PURE__ */ jsx(LinkEllipsis, { forwardedAs: NavLink, to: href, children: label }) }) }),
+            /* @__PURE__ */ jsx(Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsx(Tooltip, { label, children: isAdminUserRelation ? /* @__PURE__ */ jsx(Typography, { children: label }) : /* @__PURE__ */ jsx(LinkEllipsis, { tag: NavLink, to: href, children: label }) }) }),
             /* @__PURE__ */ jsx(DocumentStatus, { status: relationData.status })
           ]
         },
-        relationData.documentId
+        relationData.documentId ?? relationData.id
       );
     }) }),
-    meta.missingCount > 0 && /* @__PURE__ */ jsx(
+    meta.missingCount > 0 && /* @ts-expect-error – we dont need closeLabel */
+    /* @__PURE__ */ jsx(
       StyledAlert,
       {
         marginTop: 1,
@@ -92,15 +95,38 @@ const CustomRelationInput = (props) => {
     )
   ] });
 };
+const createInitialValuesForPath = (keyPath, value) => {
+  const keys = keyPath.split(".");
+  const root = {};
+  let node = root;
+  keys.forEach((key, index) => {
+    if (key === "__proto__" || key === "constructor") return;
+    if (index === keys.length - 1) {
+      node[key] = value;
+    } else {
+      node[key] = node[key] || {};
+    }
+    node = node[key];
+  });
+  return root;
+};
 const CustomMediaInput = (props) => {
-  const {
-    value: { results, meta }
-  } = useField(props.name);
+  const { value } = useField(props.name);
+  const results = value?.results ?? [];
+  const meta = value?.meta ?? { missingCount: 0 };
   const { formatMessage } = useIntl();
   const fields = useStrapiApp("CustomMediaInput", (state) => state.fields);
   const MediaLibrary = fields.media;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "stretch", children: [
-    /* @__PURE__ */ jsx(Form, { method: "PUT", disabled: true, initialValues: { [props.name]: results }, children: /* @__PURE__ */ jsx(MediaLibrary, { ...props, disabled: true, multiple: results.length > 1 }) }),
+    /* @__PURE__ */ jsx(
+      Form,
+      {
+        method: "PUT",
+        disabled: true,
+        initialValues: createInitialValuesForPath(props.name, results),
+        children: /* @__PURE__ */ jsx(MediaLibrary, { ...props, disabled: true, multiple: results.length > 1 })
+      }
+    ),
     meta.missingCount > 0 && /* @__PURE__ */ jsx(
       StyledAlert,
       {
@@ -126,12 +152,39 @@ const CustomMediaInput = (props) => {
     )
   ] });
 };
+const getLabelAction = (labelAction) => {
+  if (!React.isValidElement(labelAction)) {
+    return labelAction;
+  }
+  const labelActionTitleId = labelAction.props.title.id;
+  if (labelActionTitleId === "i18n.Field.localized") {
+    return React.cloneElement(labelAction, {
+      ...labelAction.props,
+      title: {
+        id: "history.content.localized",
+        defaultMessage: "This value is specific to this locale. If you restore this version, the content will not be replaced for other locales."
+      }
+    });
+  }
+  if (labelActionTitleId === "i18n.Field.not-localized") {
+    return React.cloneElement(labelAction, {
+      ...labelAction.props,
+      title: {
+        id: "history.content.not-localized",
+        defaultMessage: "This value is common to all locales. If you restore this version and save the changes, the content will be replaced for all locales."
+      }
+    });
+  }
+  return labelAction;
+};
 const VersionInputRenderer = ({
   visible,
   hint: providedHint,
   shouldIgnoreRBAC = false,
+  labelAction,
   ...props
 }) => {
+  const customLabelAction = getLabelAction(labelAction);
   const { formatMessage } = useIntl();
   const version = useHistoryContext("VersionContent", (state) => state.selectedVersion);
   const configuration = useHistoryContext("VersionContent", (state) => state.configuration);
@@ -165,7 +218,7 @@ const VersionInputRenderer = ({
   const addedAttributes = version.meta.unknownAttributes.added;
   if (Object.keys(addedAttributes).includes(props.name)) {
     return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { children: props.label }),
+      /* @__PURE__ */ jsx(Field.Label, { children: props.label }),
       /* @__PURE__ */ jsx(
         StyledAlert,
         {
@@ -189,29 +242,46 @@ const VersionInputRenderer = ({
   if (attributeHasCustomFieldProperty(props.attribute)) {
     const CustomInput = lazyComponentStore[props.attribute.customField];
     if (CustomInput) {
-      return /* @__PURE__ */ jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(
+        CustomInput,
+        {
+          ...props,
+          hint,
+          labelAction: customLabelAction,
+          disabled: fieldIsDisabled
+        }
+      );
     }
     return /* @__PURE__ */ jsx(
       InputRenderer,
       {
         ...props,
         hint,
+        labelAction: customLabelAction,
         type: props.attribute.customField,
         disabled: fieldIsDisabled
       }
     );
   }
   if (props.type === "media") {
-    return /* @__PURE__ */ jsx(CustomMediaInput, { ...props, disabled: fieldIsDisabled });
+    return /* @__PURE__ */ jsx(CustomMediaInput, { ...props, labelAction: customLabelAction, disabled: fieldIsDisabled });
   }
   const addedInputTypes = Object.keys(fields);
   if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
     const CustomInput = fields[props.type];
-    return /* @__PURE__ */ jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
+    return /* @__PURE__ */ jsx(
+      CustomInput,
+      {
+        ...props,
+        hint,
+        labelAction: customLabelAction,
+        disabled: fieldIsDisabled
+      }
+    );
   }
   switch (props.type) {
     case "blocks":
-      return /* @__PURE__ */ jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
     case "component":
       const { layout } = componentsLayout[props.attribute.component];
       const [remainingFieldsLayout] = getRemaingFieldsLayout({
@@ -221,29 +291,66 @@ const VersionInputRenderer = ({
         schemaAttributes: components[props.attribute.component].attributes
       });
       return /* @__PURE__ */ jsx(
-        ComponentInput,
+        MemoizedComponentInput,
         {
           ...props,
           layout: [...layout, ...remainingFieldsLayout || []],
           hint,
+          labelAction: customLabelAction,
           disabled: fieldIsDisabled,
           children: (inputProps) => /* @__PURE__ */ jsx(VersionInputRenderer, { ...inputProps, shouldIgnoreRBAC: true })
         }
       );
     case "dynamiczone":
-      return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(
+        DynamicZone,
+        {
+          ...props,
+          hint,
+          labelAction: customLabelAction,
+          disabled: fieldIsDisabled,
+          children: (inputProps) => /* @__PURE__ */ jsx(VersionInputRenderer, { ...inputProps, shouldIgnoreRBAC: true })
+        }
+      );
     case "relation":
-      return /* @__PURE__ */ jsx(CustomRelationInput, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(
+        CustomRelationInput,
+        {
+          ...props,
+          hint,
+          labelAction: customLabelAction,
+          disabled: fieldIsDisabled
+        }
+      );
     case "richtext":
-      return /* @__PURE__ */ jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(
+        MemoizedWysiwyg,
+        {
+          ...props,
+          hint,
+          type: props.type,
+          labelAction: customLabelAction,
+          disabled: fieldIsDisabled
+        }
+      );
     case "uid":
-      return /* @__PURE__ */ jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(
+        MemoizedUIDInput,
+        {
+          ...props,
+          hint,
+          type: props.type,
+          labelAction: customLabelAction,
+          disabled: fieldIsDisabled
+        }
+      );
     case "enumeration":
       return /* @__PURE__ */ jsx(
         InputRenderer,
         {
           ...props,
           hint,
+          labelAction: customLabelAction,
           options: props.attribute.enum.map((value) => ({ value })),
           type: props.customField ? "custom-field" : props.type,
           disabled: fieldIsDisabled
@@ -256,6 +363,7 @@ const VersionInputRenderer = ({
         {
           ...restProps,
           hint,
+          labelAction: customLabelAction,
           type: props.customField ? "custom-field" : props.type,
           disabled: fieldIsDisabled
         }
@@ -309,7 +417,7 @@ const FormPanel = ({ panel }) => {
   if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
     const [row] = panel;
     const [field] = row;
-    return /* @__PURE__ */ jsx(Grid, { gap: 4, children: /* @__PURE__ */ jsx(GridItem, { col: 12, s: 12, xs: 12, children: /* @__PURE__ */ jsx(VersionInputRenderer, { ...field }) }) }, field.name);
+    return /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(VersionInputRenderer, { ...field }) }) }, field.name);
   }
   return /* @__PURE__ */ jsx(
     Box,
@@ -322,8 +430,19 @@ const FormPanel = ({ panel }) => {
       paddingTop: 6,
       paddingBottom: 6,
       borderColor: "neutral150",
-      children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsx(Grid, { gap: 4, children: row.map(({ size, ...field }) => {
-        return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(VersionInputRenderer, { ...field }) }, field.name);
+      children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
+        return /* @__PURE__ */ jsx(
+          Grid.Item,
+          {
+            col: size,
+            s: 12,
+            xs: 12,
+            direction: "column",
+            alignItems: "stretch",
+            children: /* @__PURE__ */ jsx(VersionInputRenderer, { ...field })
+          },
+          field.name
+        );
       }) }, gridRowIndex)) })
     }
   );
@@ -438,6 +557,7 @@ const VersionHeader = ({ headerId }) => {
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] = React.useState(false);
   const navigate = useNavigate();
   const { formatMessage, formatDate } = useIntl();
+  const { trackUsage } = useTracking();
   const { toggleNotification } = useNotification();
   const [{ query }] = useQueryParams();
   const { collectionType, slug } = useParams();
@@ -453,14 +573,8 @@ const VersionHeader = ({ headerId }) => {
   const mainFieldValue = version.data[mainField];
   const getNextNavigation = () => {
     const pluginsQueryParams = stringify({ plugins: query.plugins }, { encode: false });
-    if (collectionType === COLLECTION_TYPES) {
-      return {
-        pathname: `/content-manager/${collectionType}/${version.contentType}/${version.relatedDocumentId}`,
-        search: pluginsQueryParams
-      };
-    }
     return {
-      pathname: `/content-manager/${collectionType}/${version.contentType}`,
+      pathname: "..",
       search: pluginsQueryParams
     };
   };
@@ -476,7 +590,7 @@ const VersionHeader = ({ headerId }) => {
         body: { contentType: version.contentType }
       });
       if ("data" in response) {
-        navigate(getNextNavigation());
+        navigate(getNextNavigation(), { relative: "path" });
         toggleNotification({
           type: "success",
           title: formatMessage({
@@ -485,9 +599,10 @@ const VersionHeader = ({ headerId }) => {
           }),
           message: formatMessage({
             id: "content-manager.restore.success.message",
-            defaultMessage: "The content of the restored version is not published yet."
+            defaultMessage: "A past version of the content was restored."
           })
         });
+        trackUsage("didRestoreHistoryVersion");
       }
       if ("error" in response) {
         toggleNotification({
@@ -505,7 +620,7 @@ const VersionHeader = ({ headerId }) => {
       });
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open: isConfirmDialogOpen, onOpenChange: setIsConfirmDialogOpen, children: [
     /* @__PURE__ */ jsx(
       Layouts.BaseHeader,
       {
@@ -517,7 +632,7 @@ const VersionHeader = ({ headerId }) => {
           hour: "numeric",
           minute: "numeric"
         }),
-        subtitle: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage(
+        subtitle: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
           {
             id: "content-manager.history.version.subtitle",
             defaultMessage: "{hasLocale, select, true {{subtitle}, in {locale}} other {{subtitle}}}"
@@ -532,8 +647,10 @@ const VersionHeader = ({ headerId }) => {
           Link,
           {
             startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
-            as: NavLink,
+            tag: NavLink,
             to: getNextNavigation(),
+            relative: "path",
+            isExternal: false,
             children: formatMessage({
               id: "global.back",
               defaultMessage: "Back"
@@ -541,7 +658,7 @@ const VersionHeader = ({ headerId }) => {
           }
         ),
         sticky: false,
-        primaryAction: /* @__PURE__ */ jsx(
+        primaryAction: /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
           Button,
           {
             disabled: !allowedActions.canUpdate || isCurrentVersion,
@@ -553,16 +670,13 @@ const VersionHeader = ({ headerId }) => {
               defaultMessage: "Restore"
             })
           }
-        )
+        ) })
       }
     ),
     /* @__PURE__ */ jsx(
       ConfirmDialog,
       {
-        isOpen: isConfirmDialogOpen,
-        onClose: () => setIsConfirmDialogOpen(false),
         onConfirm: handleRestore,
-        icon: /* @__PURE__ */ jsx(WarningCircle, {}),
         endAction: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleRestore, loading: isLoading, children: formatMessage({
           id: "content-manager.history.restore.confirm.button",
           defaultMessage: "Restore"
@@ -576,6 +690,7 @@ const VersionHeader = ({ headerId }) => {
             gap: 2,
             textAlign: "center",
             children: [
+              /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }) }),
               /* @__PURE__ */ jsx(Typography, { children: formatMessage({
                 id: "content-manager.history.restore.confirm.title",
                 defaultMessage: "Are you sure you want to restore this version?"
@@ -596,46 +711,10 @@ const VersionHeader = ({ headerId }) => {
     )
   ] });
 };
-const BlueText = (children) => /* @__PURE__ */ jsx(Typography, { textColor: "primary600", children });
+const BlueText = (children) => /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children });
 const VersionCard = ({ version, isCurrent }) => {
   const { formatDate, formatMessage } = useIntl();
   const [{ query }] = useQueryParams();
-  const statusData = (() => {
-    switch (version.status) {
-      case "draft":
-        return {
-          background: "secondary100",
-          border: "secondary200",
-          text: "secondary700",
-          message: {
-            id: "content-manager.containers.List.draft",
-            defaultMessage: "Draft"
-          }
-        };
-      case "modified":
-        return {
-          background: "alternative100",
-          border: "alternative200",
-          text: "alternative700",
-          message: {
-            // TODO: check the translation key once D&P v5 is done
-            id: "content-manager.containers.List.modified",
-            defaultMessage: "Modified"
-          }
-        };
-      case "published":
-      default:
-        return {
-          background: "success100",
-          border: "success200",
-          text: "success700",
-          message: {
-            id: "content-manager.containers.List.published",
-            defaultMessage: "Published"
-          }
-        };
-    }
-  })();
   const isActive = query.id === version.id.toString();
   const author = version.createdBy && getDisplayName(version.createdBy);
   return /* @__PURE__ */ jsxs(
@@ -648,23 +727,21 @@ const VersionCard = ({ version, isCurrent }) => {
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: isActive ? "primary600" : "neutral200",
-      paddingTop: 4,
-      paddingBottom: 4,
-      paddingLeft: 5,
-      paddingRight: 5,
-      as: Link$1,
+      color: "neutral800",
+      padding: 5,
+      tag: Link$1,
       to: `?${stringify({ ...query, id: version.id })}`,
       style: { textDecoration: "none" },
       children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
-          /* @__PURE__ */ jsx(Typography, { as: "h3", fontWeight: "semiBold", children: formatDate(version.createdAt, {
+          /* @__PURE__ */ jsx(Typography, { tag: "h3", fontWeight: "semiBold", children: formatDate(version.createdAt, {
             day: "numeric",
             month: "numeric",
             year: "numeric",
             hour: "2-digit",
             minute: "2-digit"
           }) }),
-          /* @__PURE__ */ jsx(Typography, { as: "p", variant: "pi", textColor: "neutral600", children: formatMessage(
+          /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "pi", textColor: "neutral600", children: formatMessage(
             {
               id: "content-manager.history.sidebar.versionDescription",
               defaultMessage: "{distanceToNow}{isAnonymous, select, true {} other { by {author}}}{isCurrent, select, true { <b>(current)</b>} other {}}"
@@ -678,21 +755,7 @@ const VersionCard = ({ version, isCurrent }) => {
             }
           ) })
         ] }),
-        version.status && /* @__PURE__ */ jsx(
-          Box,
-          {
-            background: statusData.background,
-            borderStyle: "solid",
-            borderWidth: "1px",
-            borderColor: statusData.border,
-            hasRadius: true,
-            paddingLeft: "6px",
-            paddingRight: "6px",
-            paddingTop: "2px",
-            paddingBottom: "2px",
-            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: statusData.text, children: formatMessage(statusData.message) })
-          }
-        )
+        version.status && /* @__PURE__ */ jsx(DocumentStatus, { status: version.status, size: "XS" })
       ]
     }
   );
@@ -720,7 +783,7 @@ const VersionsList = () => {
       borderColor: "neutral200",
       borderWidth: "0 0 0 1px",
       borderStyle: "solid",
-      as: "aside",
+      tag: "aside",
       children: [
         /* @__PURE__ */ jsxs(
           Flex,
@@ -731,9 +794,9 @@ const VersionsList = () => {
             borderColor: "neutral200",
             borderWidth: "0 0 1px",
             borderStyle: "solid",
-            as: "header",
+            tag: "header",
             children: [
-              /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "omega", fontWeight: "semiBold", children: formatMessage({
+              /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "omega", fontWeight: "semiBold", children: formatMessage({
                 id: "content-manager.history.sidebar.title",
                 defaultMessage: "Versions"
               }) }),
@@ -746,31 +809,18 @@ const VersionsList = () => {
             id: "content-manager.history.sidebar.show-newer",
             defaultMessage: "Show newer versions"
           }) }) }),
-          /* @__PURE__ */ jsx(
-            Flex,
+          /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 3, padding: 4, tag: "ul", alignItems: "stretch", children: versions.data.map((version, index) => /* @__PURE__ */ jsx(
+            "li",
             {
-              direction: "column",
-              gap: 3,
-              paddingTop: 5,
-              paddingBottom: 5,
-              paddingLeft: 4,
-              paddingRight: 4,
-              as: "ul",
-              alignItems: "stretch",
-              children: versions.data.map((version, index) => /* @__PURE__ */ jsx(
-                "li",
-                {
-                  "aria-label": formatMessage({
-                    id: "content-manager.history.sidebar.title.version-card.aria-label",
-                    defaultMessage: "Version card"
-                  }),
-                  children: /* @__PURE__ */ jsx(VersionCard, { version, isCurrent: page === 1 && index === 0 })
-                },
-                version.id
-              ))
-            }
-          ),
-          versions.meta.pagination.page < versions.meta.pagination.pageCount && /* @__PURE__ */ jsx(Box, { paddingBottom: 5, textAlign: "center", children: /* @__PURE__ */ jsx(PaginationButton, { page: page + 1, children: formatMessage({
+              "aria-label": formatMessage({
+                id: "content-manager.history.sidebar.title.version-card.aria-label",
+                defaultMessage: "Version card"
+              }),
+              children: /* @__PURE__ */ jsx(VersionCard, { version, isCurrent: page === 1 && index === 0 })
+            },
+            version.id
+          )) }),
+          versions.meta.pagination.page < versions.meta.pagination.pageCount && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, textAlign: "center", children: /* @__PURE__ */ jsx(PaginationButton, { page: page + 1, children: formatMessage({
             id: "content-manager.history.sidebar.show-older",
             defaultMessage: "Show older versions"
           }) }) })
@@ -822,7 +872,22 @@ const HistoryPage = () => {
     return /* @__PURE__ */ jsx(Page.Loading, {});
   }
   if (!versionsResponse.isError && !versionsResponse.data?.data?.length) {
-    return /* @__PURE__ */ jsx(Page.NoData, {});
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      Page.NoData,
+      {
+        action: /* @__PURE__ */ jsx(
+          Link,
+          {
+            tag: NavLink,
+            to: `/content-manager/${collectionType}/${slug}${documentId ? `/${documentId}` : ""}`,
+            children: formatMessage({
+              id: "global.back",
+              defaultMessage: "Back"
+            })
+          }
+        )
+      }
+    ) });
   }
   if (versionsResponse.data?.data?.length && !selectedVersionId) {
     return /* @__PURE__ */ jsx(
@@ -931,4 +996,4 @@ export {
   ProtectedHistoryPage,
   useHistoryContext
 };
-//# sourceMappingURL=History-DKhZAPcK.mjs.map
+//# sourceMappingURL=History-CzQbTOwa.mjs.map