@strapi/content-manager 0.0.0-next.4119cc523a8fec549bb2f1869c6e789650f7f4de → 0.0.0-next.4afb25b82502b04f05bbc122b43e1e3a806e7600

package/dist/_chunks/{index-DUjGm1xz.js → index-BlX-OdHL.js}

@@ -7,16 +7,15 @@ const designSystem = require("@strapi/design-system");
 const mapValues = require("lodash/fp/mapValues");
 const reactIntl = require("react-intl");
 const reactRouterDom = require("react-router-dom");
+const styledComponents = require("styled-components");
 const yup = require("yup");
+const qs = require("qs");
 const pipe = require("lodash/fp/pipe");
 const dateFns = require("date-fns");
-const styledComponents = require("styled-components");
-const qs = require("qs");
 const toolkit = require("@reduxjs/toolkit");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
+  if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
     for (const k in e) {
@@ -36,13 +35,20 @@ const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const mapValues__default = /* @__PURE__ */ _interopDefault(mapValues);
 const yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
 const pipe__default = /* @__PURE__ */ _interopDefault(pipe);
-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";
@@ -296,7 +302,7 @@ const documentApi = contentManagerApi.injectEndpoints({
         url: `/content-manager/collection-types/${model}`,
         method: "GET",
         config: {
-          params
+          params: qs.stringify(params, { encode: true })
         }
       }),
       providesTags: (result, _error, arg) => {
@@ -475,8 +481,7 @@ const {
   useUnpublishManyDocumentsMutation
 } = documentApi;
 const buildValidParams = (query) => {
-  if (!query)
-    return query;
+  if (!query) return query;
   const { plugins: _, ...validQueryParams } = {
     ...query,
     ...Object.values(query?.plugins ?? {}).reduce(
@@ -484,9 +489,6 @@ const buildValidParams = (query) => {
       {}
     )
   };
-  if ("_q" in validQueryParams) {
-    validQueryParams._q = encodeURIComponent(validQueryParams._q);
-  }
   return validQueryParams;
 };
 const isBaseQueryError = (error) => {
@@ -1686,7 +1688,7 @@ const useDocumentActions = () => {
   };
 };
 const ProtectedHistoryPage = React__namespace.lazy(
-  () => Promise.resolve().then(() => require("./History-BHH0axCz.js")).then((mod) => ({ default: mod.ProtectedHistoryPage }))
+  () => Promise.resolve().then(() => require("./History-AwrK0-SA.js")).then((mod) => ({ default: mod.ProtectedHistoryPage }))
 );
 const routes$2 = [
   {
@@ -1699,7 +1701,7 @@ const routes$2 = [
   }
 ];
 const ProtectedPreviewPage = React__namespace.lazy(
-  () => Promise.resolve().then(() => require("./Preview-D9FlX2H8.js")).then((mod) => ({ default: mod.ProtectedPreviewPage }))
+  () => Promise.resolve().then(() => require("./Preview-DOqm5jcJ.js")).then((mod) => ({ default: mod.ProtectedPreviewPage }))
 );
 const routes$1 = [
   {
@@ -1712,31 +1714,31 @@ const routes$1 = [
   }
 ];
 const ProtectedEditViewPage = React.lazy(
-  () => Promise.resolve().then(() => require("./EditViewPage-C3qKSunQ.js")).then((mod) => ({ default: mod.ProtectedEditViewPage }))
+  () => Promise.resolve().then(() => require("./EditViewPage-Ch-uBvbv.js")).then((mod) => ({ default: mod.ProtectedEditViewPage }))
 );
 const ProtectedListViewPage = React.lazy(
-  () => Promise.resolve().then(() => require("./ListViewPage-C4UCZKeD.js")).then((mod) => ({ default: mod.ProtectedListViewPage }))
+  () => Promise.resolve().then(() => require("./ListViewPage-Be_UEBar.js")).then((mod) => ({ default: mod.ProtectedListViewPage }))
 );
 const ProtectedListConfiguration = React.lazy(
-  () => Promise.resolve().then(() => require("./ListConfigurationPage-B7VtZkjG.js")).then((mod) => ({
+  () => Promise.resolve().then(() => require("./ListConfigurationPage-CNTJ0DBm.js")).then((mod) => ({
     default: mod.ProtectedListConfiguration
   }))
 );
 const ProtectedEditConfigurationPage = React.lazy(
-  () => Promise.resolve().then(() => require("./EditConfigurationPage-DaK5-ltL.js")).then((mod) => ({
+  () => Promise.resolve().then(() => require("./EditConfigurationPage-C9IATpr0.js")).then((mod) => ({
     default: mod.ProtectedEditConfigurationPage
   }))
 );
 const ProtectedComponentConfigurationPage = React.lazy(
-  () => Promise.resolve().then(() => require("./ComponentConfigurationPage-_EzKh4uq.js")).then((mod) => ({
+  () => Promise.resolve().then(() => require("./ComponentConfigurationPage-DYq8aqos.js")).then((mod) => ({
     default: mod.ProtectedComponentConfigurationPage
   }))
 );
 const NoPermissions = React.lazy(
-  () => Promise.resolve().then(() => require("./NoPermissionsPage-CERDW9_P.js")).then((mod) => ({ default: mod.NoPermissions }))
+  () => Promise.resolve().then(() => require("./NoPermissionsPage-CN34TlEE.js")).then((mod) => ({ default: mod.NoPermissions }))
 );
 const NoContentType = React.lazy(
-  () => Promise.resolve().then(() => require("./NoContentTypePage-YNlmMHbx.js")).then((mod) => ({ default: mod.NoContentType }))
+  () => Promise.resolve().then(() => require("./NoContentTypePage-B1J0KUCO.js")).then((mod) => ({ default: mod.NoContentType }))
 );
 const CollectionTypePages = () => {
   const { collectionType } = reactRouterDom.useParams();
@@ -1881,6 +1883,11 @@ const DocumentActionButton = (action) => {
     ) : null
   ] });
 };
+const MenuItem = styledComponents.styled(designSystem.Menu.Item)`
+  &:hover {
+    background: ${({ theme, isVariantDanger, isDisabled }) => isVariantDanger && !isDisabled ? theme.colors.danger100 : "neutral"};
+  }
+`;
 const DocumentActionsMenu = ({
   actions: actions2,
   children,
@@ -1939,11 +1946,13 @@ const DocumentActionsMenu = ({
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { maxHeight: void 0, popoverPlacement: "bottom-end", children: [
       actions2.map((action) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Menu.Item,
+          MenuItem,
           {
             disabled: action.disabled,
             onSelect: handleClick(action),
             display: "block",
+            isVariantDanger: action.variant === "danger",
+            isDisabled: action.disabled,
             children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "space-between", gap: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(
               designSystem.Flex,
               {
@@ -2099,6 +2108,7 @@ const PublishAction$1 = ({
   const { _unstableFormatValidationErrors: formatValidationErrors } = strapiAdmin.useAPIErrorHandler();
   const isListView = reactRouterDom.useMatch(LIST_PATH) !== null;
   const isCloning = reactRouterDom.useMatch(CLONE_PATH) !== null;
+  const { id } = reactRouterDom.useParams();
   const { formatMessage } = reactIntl.useIntl();
   const canPublish = useDocumentRBAC("PublishAction", ({ canPublish: canPublish2 }) => canPublish2);
   const { publish } = useDocumentActions();
@@ -2201,10 +2211,12 @@ const PublishAction$1 = ({
         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));
       }
@@ -2257,6 +2269,7 @@ const PublishAction$1 = ({
   };
 };
 PublishAction$1.type = "publish";
+PublishAction$1.position = "panel";
 const UpdateAction = ({
   activeTab,
   documentId,
@@ -2279,96 +2292,134 @@ const UpdateAction = ({
   const validate = strapiAdmin.useForm("UpdateAction", (state) => state.validate);
   const setErrors = strapiAdmin.useForm("UpdateAction", (state) => state.setErrors);
   const resetForm = strapiAdmin.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__namespace.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
-            },
-            transformData(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
             },
-            transformData(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
             },
-            transformData(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__namespace.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"
@@ -2491,6 +2542,7 @@ const UnpublishAction$1 = ({
   };
 };
 UnpublishAction$1.type = "unpublish";
+UnpublishAction$1.position = "panel";
 const DiscardAction = ({
   activeTab,
   documentId,
@@ -2541,6 +2593,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__namespace.forwardRef(
@@ -2660,7 +2713,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];
@@ -2868,6 +2921,7 @@ const ConfigureTheViewAction = ({ collectionType, model }) => {
   };
 };
 ConfigureTheViewAction.type = "configure-the-view";
+ConfigureTheViewAction.position = "header";
 const EditTheModelAction = ({ model }) => {
   const navigate = reactRouterDom.useNavigate();
   const { formatMessage } = reactIntl.useIntl();
@@ -2884,6 +2938,7 @@ const EditTheModelAction = ({ model }) => {
   };
 };
 EditTheModelAction.type = "edit-the-model";
+EditTheModelAction.position = "header";
 const DeleteAction$1 = ({ documentId, model, collectionType, document }) => {
   const navigate = reactRouterDom.useNavigate();
   const { formatMessage } = reactIntl.useIntl();
@@ -2957,6 +3012,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 = reactRouterDom.useMatch(CLONE_PATH) !== null;
@@ -3019,7 +3075,7 @@ const ActionsPanelContent = () => {
       strapiAdmin.DescriptionComponentRenderer,
       {
         props,
-        descriptions: plugins["content-manager"].apis.getDocumentActions(),
+        descriptions: plugins["content-manager"].apis.getDocumentActions("panel"),
         children: (actions2) => /* @__PURE__ */ jsxRuntime.jsx(DocumentActions, { actions: actions2 })
       }
     ),
@@ -3473,8 +3529,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",
@@ -3542,8 +3597,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" }),
@@ -3592,8 +3646,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" }),
@@ -3698,7 +3751,7 @@ const TableActions = ({ document }) => {
     strapiAdmin.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];
@@ -3757,6 +3810,7 @@ const EditAction = ({ documentId }) => {
   };
 };
 EditAction.type = "edit";
+EditAction.position = "table-row";
 const StyledPencil = styledComponents.styled(Icons.Pencil)`
   path {
     fill: currentColor;
@@ -3833,6 +3887,7 @@ const CloneAction = ({ model, documentId }) => {
   };
 };
 CloneAction.type = "clone";
+CloneAction.position = "table-row";
 const StyledDuplicate = styledComponents.styled(Icons.Duplicate)`
   path {
     fill: currentColor;
@@ -3919,7 +3974,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
       }
@@ -3929,10 +3991,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;
     }
@@ -3943,17 +4003,27 @@ const HistoryAction = ({ model, document }) => {
   const { formatMessage } = reactIntl.useIntl();
   const [{ query }] = strapiAdmin.useQueryParams();
   const navigate = reactRouterDom.useNavigate();
+  const { trackUsage } = strapiAdmin.useTracking();
+  const { pathname } = reactRouterDom.useLocation();
   const pluginsQueryParams = qs.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__ */ jsxRuntime.jsx(Icons.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.
@@ -3975,6 +4045,7 @@ const HistoryAction = ({ model, document }) => {
   };
 };
 HistoryAction.type = "history";
+HistoryAction.position = "header";
 const historyAdmin = {
   bootstrap(app) {
     const { addDocumentAction } = app.getPlugin("content-manager").apis;
@@ -4037,10 +4108,18 @@ const previewApi = contentManagerApi.injectEndpoints({
   })
 });
 const { useGetPreviewUrlQuery } = previewApi;
+const ConditionalTooltip = ({ isShown, label, children }) => {
+  if (isShown) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label, children });
+  }
+  return children;
+};
 const PreviewSidePanel = ({ model, documentId, document }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { trackUsage } = strapiAdmin.useTracking();
+  const { pathname } = reactRouterDom.useLocation();
   const [{ query }] = strapiAdmin.useQueryParams();
+  const isModified = strapiAdmin.useForm("PreviewSidePanel", (state) => state.modified);
   const { data, error } = useGetPreviewUrlQuery({
     params: {
       contentType: model
@@ -4054,25 +4133,39 @@ const PreviewSidePanel = ({ model, documentId, document }) => {
   if (!data?.data?.url || error) {
     return null;
   }
-  const handleClick = () => {
-    trackUsage("willOpenPreview");
+  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__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Button,
+    content: /* @__PURE__ */ jsxRuntime.jsx(
+      ConditionalTooltip,
       {
-        variant: "tertiary",
-        tag: reactRouterDom.Link,
-        to: { pathname: "preview", search: qs.stringify(query, { encode: false }) },
-        onClick: handleClick,
-        flex: "auto",
-        children: formatMessage({
-          id: "content-manager.preview.panel.button",
-          defaultMessage: "Open preview"
-        })
+        label: formatMessage({
+          id: "content-manager.preview.panel.button-disabled-tooltip",
+          defaultMessage: "Please save to open the preview"
+        }),
+        isShown: isModified,
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { cursor: "not-allowed", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "tertiary",
+            tag: reactRouterDom.Link,
+            to: { pathname: "preview", search: qs.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 FEATURE_ID = "preview";
@@ -4104,7 +4197,7 @@ const index = {
     app.router.addRoute({
       path: "content-manager/*",
       lazy: async () => {
-        const { Layout } = await Promise.resolve().then(() => require("./layout-zHc8BsKI.js"));
+        const { Layout } = await Promise.resolve().then(() => require("./layout-D8Sz3KxF.js"));
         return {
           Component: Layout
         };
@@ -4124,7 +4217,7 @@ const index = {
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
-        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/ar.json": () => Promise.resolve().then(() => require("./ar-BUUWXIYu.js")), "./translations/ca.json": () => Promise.resolve().then(() => require("./ca-Cmk45QO6.js")), "./translations/cs.json": () => Promise.resolve().then(() => require("./cs-CkJy6B2v.js")), "./translations/de.json": () => Promise.resolve().then(() => require("./de-CCEmbAah.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-DTWPCdTS.js")), "./translations/es.json": () => Promise.resolve().then(() => require("./es-9K52xZIr.js")), "./translations/eu.json": () => Promise.resolve().then(() => require("./eu-VDH-3ovk.js")), "./translations/fr.json": () => Promise.resolve().then(() => require("./fr-B2Kyv8Z9.js")), "./translations/gu.json": () => Promise.resolve().then(() => require("./gu-BRmF601H.js")), "./translations/hi.json": () => Promise.resolve().then(() => require("./hi-CCJBptSq.js")), "./translations/hu.json": () => Promise.resolve().then(() => require("./hu-sNV_yLYy.js")), "./translations/id.json": () => Promise.resolve().then(() => require("./id-B5Ser98A.js")), "./translations/it.json": () => Promise.resolve().then(() => require("./it-DkBIs7vD.js")), "./translations/ja.json": () => Promise.resolve().then(() => require("./ja-7sfIbjxE.js")), "./translations/ko.json": () => Promise.resolve().then(() => require("./ko-woFZPmLk.js")), "./translations/ml.json": () => Promise.resolve().then(() => require("./ml-C2W8N8k1.js")), "./translations/ms.json": () => Promise.resolve().then(() => require("./ms-BuFotyP_.js")), "./translations/nl.json": () => Promise.resolve().then(() => require("./nl-bbEOHChV.js")), "./translations/pl.json": () => Promise.resolve().then(() => require("./pl-uzwG-hk7.js")), "./translations/pt-BR.json": () => Promise.resolve().then(() => require("./pt-BR-BiOz37D9.js")), "./translations/pt.json": () => Promise.resolve().then(() => require("./pt-CeXQuq50.js")), "./translations/ru.json": () => Promise.resolve().then(() => require("./ru-BT3ybNny.js")), "./translations/sa.json": () => Promise.resolve().then(() => require("./sa-CcvkYInH.js")), "./translations/sk.json": () => Promise.resolve().then(() => require("./sk-CvY09Xjv.js")), "./translations/sv.json": () => Promise.resolve().then(() => require("./sv-MYDuzgvT.js")), "./translations/th.json": () => Promise.resolve().then(() => require("./th-D9_GfAjc.js")), "./translations/tr.json": () => Promise.resolve().then(() => require("./tr-D9UH-O_R.js")), "./translations/uk.json": () => Promise.resolve().then(() => require("./uk-C8EiqJY7.js")), "./translations/vi.json": () => Promise.resolve().then(() => require("./vi-CJlYDheJ.js")), "./translations/zh-Hans.json": () => Promise.resolve().then(() => require("./zh-Hans-9kOncHGw.js")), "./translations/zh.json": () => Promise.resolve().then(() => require("./zh-CQQfszqR.js")) }), `./translations/${locale}.json`).then(({ default: data }) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/ar.json": () => Promise.resolve().then(() => require("./ar-BUUWXIYu.js")), "./translations/ca.json": () => Promise.resolve().then(() => require("./ca-Cmk45QO6.js")), "./translations/cs.json": () => Promise.resolve().then(() => require("./cs-CkJy6B2v.js")), "./translations/de.json": () => Promise.resolve().then(() => require("./de-CCEmbAah.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-BK8Xyl5I.js")), "./translations/es.json": () => Promise.resolve().then(() => require("./es-9K52xZIr.js")), "./translations/eu.json": () => Promise.resolve().then(() => require("./eu-VDH-3ovk.js")), "./translations/fr.json": () => Promise.resolve().then(() => require("./fr-B2Kyv8Z9.js")), "./translations/gu.json": () => Promise.resolve().then(() => require("./gu-BRmF601H.js")), "./translations/hi.json": () => Promise.resolve().then(() => require("./hi-CCJBptSq.js")), "./translations/hu.json": () => Promise.resolve().then(() => require("./hu-sNV_yLYy.js")), "./translations/id.json": () => Promise.resolve().then(() => require("./id-B5Ser98A.js")), "./translations/it.json": () => Promise.resolve().then(() => require("./it-DkBIs7vD.js")), "./translations/ja.json": () => Promise.resolve().then(() => require("./ja-7sfIbjxE.js")), "./translations/ko.json": () => Promise.resolve().then(() => require("./ko-woFZPmLk.js")), "./translations/ml.json": () => Promise.resolve().then(() => require("./ml-C2W8N8k1.js")), "./translations/ms.json": () => Promise.resolve().then(() => require("./ms-BuFotyP_.js")), "./translations/nl.json": () => Promise.resolve().then(() => require("./nl-bbEOHChV.js")), "./translations/pl.json": () => Promise.resolve().then(() => require("./pl-uzwG-hk7.js")), "./translations/pt-BR.json": () => Promise.resolve().then(() => require("./pt-BR-BiOz37D9.js")), "./translations/pt.json": () => Promise.resolve().then(() => require("./pt-CeXQuq50.js")), "./translations/ru.json": () => Promise.resolve().then(() => require("./ru-BT3ybNny.js")), "./translations/sa.json": () => Promise.resolve().then(() => require("./sa-CcvkYInH.js")), "./translations/sk.json": () => Promise.resolve().then(() => require("./sk-CvY09Xjv.js")), "./translations/sv.json": () => Promise.resolve().then(() => require("./sv-MYDuzgvT.js")), "./translations/th.json": () => Promise.resolve().then(() => require("./th-D9_GfAjc.js")), "./translations/tr.json": () => Promise.resolve().then(() => require("./tr-D9UH-O_R.js")), "./translations/uk.json": () => Promise.resolve().then(() => require("./uk-C8EiqJY7.js")), "./translations/vi.json": () => Promise.resolve().then(() => require("./vi-CJlYDheJ.js")), "./translations/zh-Hans.json": () => Promise.resolve().then(() => require("./zh-Hans-9kOncHGw.js")), "./translations/zh.json": () => Promise.resolve().then(() => require("./zh-CQQfszqR.js")) }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
           return {
             data: prefixPluginTranslations(data, PLUGIN_ID),
             locale
@@ -4184,4 +4277,4 @@ exports.useGetContentTypeConfigurationQuery = useGetContentTypeConfigurationQuer
 exports.useGetInitialDataQuery = useGetInitialDataQuery;
 exports.useGetPreviewUrlQuery = useGetPreviewUrlQuery;
 exports.useUpdateContentTypeConfigurationMutation = useUpdateContentTypeConfigurationMutation;
-//# sourceMappingURL=index-DUjGm1xz.js.map
+//# sourceMappingURL=index-BlX-OdHL.js.map