@strapi/content-releases 0.0.0-experimental.950b677f6614f483cde77801d941607d6847a6e3 → 0.0.0-experimental.cae3a5a17d131a6f59673b62d01cfac869ea9cc2

package/dist/_chunks/{App-3f94ba77.mjs → App-_Jj3tWts.mjs}

@@ -1,11 +1,12 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useParams, useHistory, Redirect, Link as Link$1, useLocation, Switch, Route } from "react-router-dom";
-import { P as PERMISSIONS, u as useGetReleaseQuery, a as useUpdateReleaseMutation, b as useDeleteReleaseMutation, c as usePublishReleaseMutation, d as useGetReleaseActionsQuery, e as useUpdateReleaseActionMutation, R as ReleaseActionOptions, f as ReleaseActionMenu, i as isAxiosError, g as useGetReleasesQuery, h as useCreateReleaseMutation, p as pluginId } from "./index-6ddf4a38.mjs";
+import { useNotification, useAPIErrorHandler, LoadingIndicatorPage, ConfirmDialog, useRBAC, RelativeTime, CheckPermissions, useQueryParams, AnErrorOccurred, NoContent, Table, PageSizeURLQuery, PaginationURLQuery, CheckPagePermissions } from "@strapi/helper-plugin";
+import { useLocation, useParams, useHistory, Redirect, Link as Link$1, Switch, Route } from "react-router-dom";
+import { p as pluginId, u as useGetReleaseQuery, a as useUpdateReleaseMutation, b as useDeleteReleaseMutation, c as usePublishReleaseMutation, P as PERMISSIONS, d as useTypedDispatch, e as useGetReleaseActionsQuery, f as useUpdateReleaseActionMutation, R as ReleaseActionOptions, g as ReleaseActionMenu, i as isAxiosError, r as releaseApi, h as useGetReleasesQuery, j as useCreateReleaseMutation } from "./index-bsuc8ZwZ.mjs";
 import * as React from "react";
-import { ModalLayout, ModalHeader, Typography, ModalBody, TextInput, ModalFooter, Button, Flex, ContentLayout, Main, HeaderLayout, Link, IconButton, Popover, Tr, Td, TabGroup, Box, Tabs, Tab, Divider, TabPanels, TabPanel, EmptyStateLayout, Grid, GridItem } from "@strapi/design-system";
+import { unstable_useDocument, useLicenseLimits } from "@strapi/admin/strapi-admin";
+import { ModalLayout, ModalHeader, Typography, ModalBody, TextInput, ModalFooter, Button, Flex, ContentLayout, Main, HeaderLayout, Link, IconButton, Popover, SingleSelect, SingleSelectOption, Badge, Tr, Td, Icon, Tooltip, Alert, TabGroup, Box, Tabs, Tab, Divider, TabPanels, TabPanel, EmptyStateLayout, Grid, GridItem } from "@strapi/design-system";
 import { LinkButton, Link as Link$2 } from "@strapi/design-system/v2";
-import { CheckPermissions, useNotification, useAPIErrorHandler, LoadingIndicatorPage, ConfirmDialog, useRBAC, RelativeTime, useQueryParams, NoContent, Table, PageSizeURLQuery, PaginationURLQuery, AnErrorOccurred } from "@strapi/helper-plugin";
-import { Pencil, Trash, ArrowLeft, More, Plus, EmptyDocuments } from "@strapi/icons";
+import { Pencil, Trash, ArrowLeft, More, CrossCircle, CheckCircle, Plus, EmptyDocuments } from "@strapi/icons";
 import { useIntl } from "react-intl";
 import styled from "styled-components";
 import { Formik, Form } from "formik";
@@ -13,6 +14,7 @@ import * as yup from "yup";
 import "@reduxjs/toolkit/query";
 import "axios";
 import "@reduxjs/toolkit/query/react";
+import "react-redux";
 const RELEASE_SCHEMA = yup.object().shape({
   name: yup.string().trim().required()
 }).required().noUnknown();
@@ -23,11 +25,16 @@ const ReleaseModal = ({
   isLoading = false
 }) => {
   const { formatMessage } = useIntl();
+  const { pathname } = useLocation();
+  const isCreatingRelease = pathname === `/plugins/${pluginId}`;
   return /* @__PURE__ */ jsxs(ModalLayout, { onClose: handleClose, labelledBy: "title", children: [
-    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { id: "title", fontWeight: "bold", textColor: "neutral800", children: formatMessage({
-      id: "content-releases.modal.add-release-title",
-      defaultMessage: "New release"
-    }) }) }),
+    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Typography, { id: "title", fontWeight: "bold", textColor: "neutral800", children: formatMessage(
+      {
+        id: "content-releases.modal.title",
+        defaultMessage: "{isCreatingRelease, select, true {New release} other {Edit release}}"
+      },
+      { isCreatingRelease }
+    ) }) }),
     /* @__PURE__ */ jsx(
       Formik,
       {
@@ -54,10 +61,22 @@ const ReleaseModal = ({
             ModalFooter,
             {
               startActions: /* @__PURE__ */ jsx(Button, { onClick: handleClose, variant: "tertiary", name: "cancel", children: formatMessage({ id: "cancel", defaultMessage: "Cancel" }) }),
-              endActions: /* @__PURE__ */ jsx(Button, { name: "submit", loading: isLoading, disabled: !values.name, type: "submit", children: formatMessage({
-                id: "content-releases.modal.form.button.submit",
-                defaultMessage: "Continue"
-              }) })
+              endActions: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  name: "submit",
+                  loading: isLoading,
+                  disabled: !values.name || values.name === initialValues.name,
+                  type: "submit",
+                  children: formatMessage(
+                    {
+                      id: "content-releases.modal.form.button.submit",
+                      defaultMessage: "{isCreatingRelease, select, true {Continue} other {Save}}"
+                    },
+                    { isCreatingRelease }
+                  )
+                }
+              )
             }
           )
         ] })
@@ -96,6 +115,9 @@ const TrashIcon = styled(Trash)`
     fill: ${({ theme }) => theme.colors.danger600};
   }
 `;
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 300px;
+`;
 const PopoverButton = ({ onClick, disabled, children }) => {
   return /* @__PURE__ */ jsx(
     StyledFlex,
@@ -114,6 +136,49 @@ const PopoverButton = ({ onClick, disabled, children }) => {
     }
   );
 };
+const EntryValidationText = ({ action, schema, components, entry }) => {
+  const { formatMessage } = useIntl();
+  const { validate } = unstable_useDocument();
+  const { errors } = validate(entry, {
+    contentType: schema,
+    components,
+    isCreatingEntry: false
+  });
+  if (Object.keys(errors).length > 0) {
+    const validationErrorsMessages = Object.entries(errors).map(
+      ([key, value]) => formatMessage(
+        { id: `${value.id}.withField`, defaultMessage: value.defaultMessage },
+        { field: key }
+      )
+    ).join(" ");
+    return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Icon, { color: "danger600", as: CrossCircle }),
+      /* @__PURE__ */ jsx(Tooltip, { description: validationErrorsMessages, children: /* @__PURE__ */ jsx(TypographyMaxWidth, { textColor: "danger600", variant: "omega", fontWeight: "semiBold", ellipsis: true, children: validationErrorsMessages }) })
+    ] });
+  }
+  if (action == "publish") {
+    return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Icon, { color: "success600", as: CheckCircle }),
+      entry.publishedAt ? /* @__PURE__ */ jsx(Typography, { textColor: "success600", fontWeight: "bold", children: formatMessage({
+        id: "content-releases.pages.ReleaseDetails.entry-validation.already-published",
+        defaultMessage: "Already published"
+      }) }) : /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+        id: "content-releases.pages.ReleaseDetails.entry-validation.ready-to-publish",
+        defaultMessage: "Ready to publish"
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsx(Icon, { color: "success600", as: CheckCircle }),
+    !entry.publishedAt ? /* @__PURE__ */ jsx(Typography, { textColor: "success600", fontWeight: "bold", children: formatMessage({
+      id: "content-releases.pages.ReleaseDetails.entry-validation.already-unpublished",
+      defaultMessage: "Already unpublished"
+    }) }) : /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+      id: "content-releases.pages.ReleaseDetails.entry-validation.ready-to-unpublish",
+      defaultMessage: "Ready to unpublish"
+    }) })
+  ] });
+};
 const ReleaseDetailsLayout = ({
   toggleEditReleaseModal,
   toggleWarningSubmit,
@@ -135,6 +200,7 @@ const ReleaseDetailsLayout = ({
   const {
     allowedActions: { canUpdate, canDelete }
   } = useRBAC(PERMISSIONS);
+  const dispatch = useTypedDispatch();
   const release = data?.data;
   const handleTogglePopover = () => {
     setIsPopoverVisible((prev) => !prev);
@@ -169,6 +235,9 @@ const ReleaseDetailsLayout = ({
     toggleWarningSubmit();
     handleTogglePopover();
   };
+  const handleRefresh = () => {
+    dispatch(releaseApi.util.invalidateTags([{ type: "ReleaseAction", id: "LIST" }]));
+  };
   if (isLoadingDetails) {
     return /* @__PURE__ */ jsx(Main, { "aria-busy": isLoadingDetails, children: /* @__PURE__ */ jsx(LoadingIndicatorPage, {}) });
   }
@@ -190,7 +259,7 @@ const ReleaseDetailsLayout = ({
     );
   }
   const totalEntries = release.actions.meta.count || 0;
-  const createdBy = `${release.createdBy.firstname} ${release.createdBy.lastname}`;
+  const createdBy = release.createdBy.lastname ? `${release.createdBy.firstname} ${release.createdBy.lastname}` : `${release.createdBy.firstname}`;
   return /* @__PURE__ */ jsxs(Main, { "aria-busy": isLoadingDetails, children: [
     /* @__PURE__ */ jsx(
       HeaderLayout,
@@ -274,6 +343,10 @@ const ReleaseDetailsLayout = ({
               ]
             }
           ),
+          /* @__PURE__ */ jsx(Button, { size: "S", variant: "tertiary", onClick: handleRefresh, children: formatMessage({
+            id: "content-releases.header.actions.refresh",
+            defaultMessage: "Refresh"
+          }) }),
           /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.publish, children: /* @__PURE__ */ jsx(
             Button,
             {
@@ -294,10 +367,29 @@ const ReleaseDetailsLayout = ({
     children
   ] });
 };
+const GROUP_BY_OPTIONS = ["contentType", "locale", "action"];
+const getGroupByOptionLabel = (value) => {
+  if (value === "locale") {
+    return {
+      id: "content-releases.pages.ReleaseDetails.groupBy.option.locales",
+      defaultMessage: "Locales"
+    };
+  }
+  if (value === "action") {
+    return {
+      id: "content-releases.pages.ReleaseDetails.groupBy.option.actions",
+      defaultMessage: "Actions"
+    };
+  }
+  return {
+    id: "content-releases.pages.ReleaseDetails.groupBy.option.content-type",
+    defaultMessage: "Content-Types"
+  };
+};
 const ReleaseDetailsBody = () => {
   const { formatMessage } = useIntl();
   const { releaseId } = useParams();
-  const [{ query }] = useQueryParams();
+  const [{ query }, setQuery] = useQueryParams();
   const toggleNotification = useNotification();
   const { formatAPIError } = useAPIErrorHandler();
   const {
@@ -307,6 +399,7 @@ const ReleaseDetailsBody = () => {
     error: releaseError
   } = useGetReleaseQuery({ id: releaseId });
   const release = releaseData?.data;
+  const selectedGroupBy = query?.groupBy || "contentType";
   const {
     isLoading,
     isFetching,
@@ -318,7 +411,7 @@ const ReleaseDetailsBody = () => {
     releaseId
   });
   const [updateReleaseAction] = useUpdateReleaseActionMutation();
-  const handleChangeType = async (e, actionId) => {
+  const handleChangeType = async (e, actionId, actionPath) => {
     const response = await updateReleaseAction({
       params: {
         releaseId,
@@ -326,7 +419,11 @@ const ReleaseDetailsBody = () => {
       },
       body: {
         type: e.target.value
-      }
+      },
+      query,
+      // We are passing the query params to make optimistic updates
+      actionPath
+      // We are passing the action path to found the position in the cache of the action for optimistic updates
     });
     if ("error" in response) {
       if (isAxiosError(response.error)) {
@@ -345,7 +442,11 @@ const ReleaseDetailsBody = () => {
   if (isLoading || isReleaseLoading) {
     return /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsx(LoadingIndicatorPage, {}) });
   }
-  if (isError || isReleaseError || !release) {
+  const releaseActions = data?.data;
+  const releaseMeta = data?.meta;
+  const contentTypes = releaseMeta?.contentTypes || {};
+  const components = releaseMeta?.components || {};
+  if (isReleaseError || !release) {
     const errorsArray = [];
     if (releaseError) {
       errorsArray.push({
@@ -369,9 +470,10 @@ const ReleaseDetailsBody = () => {
       }
     );
   }
-  const releaseActions = data?.data;
-  const releaseMeta = data?.meta;
-  if (!releaseActions || !releaseActions.length) {
+  if (isError || !releaseActions) {
+    return /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsx(AnErrorOccurred, {}) });
+  }
+  if (Object.keys(releaseActions).length === 0) {
     return /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsx(
       NoContent,
       {
@@ -397,92 +499,155 @@ const ReleaseDetailsBody = () => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ jsx(
-      Table.Root,
+  return /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Flex, { gap: 8, direction: "column", alignItems: "stretch", children: [
+    /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+      SingleSelect,
       {
-        rows: releaseActions.map((action) => ({
-          ...action,
-          id: Number(action.entry.id)
-        })),
-        colCount: releaseActions.length,
-        isLoading,
-        isFetching,
-        children: /* @__PURE__ */ jsxs(Table.Content, { children: [
-          /* @__PURE__ */ jsxs(Table.Head, { children: [
-            /* @__PURE__ */ jsx(
-              Table.HeaderCell,
-              {
-                fieldSchemaType: "string",
-                label: formatMessage({
-                  id: "content-releases.page.ReleaseDetails.table.header.label.name",
-                  defaultMessage: "name"
-                }),
-                name: "name"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Table.HeaderCell,
-              {
-                fieldSchemaType: "string",
-                label: formatMessage({
-                  id: "content-releases.page.ReleaseDetails.table.header.label.locale",
-                  defaultMessage: "locale"
-                }),
-                name: "locale"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Table.HeaderCell,
-              {
-                fieldSchemaType: "string",
-                label: formatMessage({
-                  id: "content-releases.page.ReleaseDetails.table.header.label.content-type",
-                  defaultMessage: "content-type"
-                }),
-                name: "content-type"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Table.HeaderCell,
-              {
-                fieldSchemaType: "string",
-                label: formatMessage({
-                  id: "content-releases.page.ReleaseDetails.table.header.label.action",
-                  defaultMessage: "action"
-                }),
-                name: "action"
-              }
-            ),
-            /* @__PURE__ */ jsx(Table.HeaderHiddenActionsCell, {})
-          ] }),
-          /* @__PURE__ */ jsx(Table.LoadingBody, {}),
-          /* @__PURE__ */ jsx(Table.Body, { children: releaseActions.map(({ id, type, entry }) => /* @__PURE__ */ jsxs(Tr, { children: [
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: `${entry.contentType.mainFieldValue || entry.id}` }) }),
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: `${entry?.locale?.name ? entry.locale.name : "-"}` }) }),
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: entry.contentType.displayName || "" }) }),
-            /* @__PURE__ */ jsx(Td, { children: release.releasedAt ? /* @__PURE__ */ jsx(Typography, { children: formatMessage(
-              {
-                id: "content-releases.page.ReleaseDetails.table.action-published",
-                defaultMessage: "This entry was <b>{isPublish, select, true {published} other {unpublished}}</b>."
-              },
-              {
-                isPublish: type === "publish",
-                b: (children) => /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children })
-              }
-            ) }) : /* @__PURE__ */ jsx(
-              ReleaseActionOptions,
-              {
-                selected: type,
-                handleChange: (e) => handleChangeType(e, id),
-                name: `release-action-${id}-type`
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(ReleaseActionMenu, { releaseId, actionId: id }) }) })
-          ] }, id)) })
-        ] })
+        "aria-label": formatMessage({
+          id: "content-releases.pages.ReleaseDetails.groupBy.label",
+          defaultMessage: "Group by"
+        }),
+        customizeContent: (value) => formatMessage(
+          {
+            id: `content-releases.pages.ReleaseDetails.groupBy.label`,
+            defaultMessage: `Group by {groupBy}`
+          },
+          {
+            groupBy: value
+          }
+        ),
+        value: formatMessage(getGroupByOptionLabel(selectedGroupBy)),
+        onChange: (value) => setQuery({ groupBy: value }),
+        children: GROUP_BY_OPTIONS.map((option) => /* @__PURE__ */ jsx(SingleSelectOption, { value: option, children: formatMessage(getGroupByOptionLabel(option)) }, option))
       }
-    ),
+    ) }),
+    Object.keys(releaseActions).map((key) => /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", alignItems: "stretch", children: [
+      /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Badge, { children: key }) }),
+      /* @__PURE__ */ jsx(
+        Table.Root,
+        {
+          rows: releaseActions[key].map((item) => ({
+            ...item,
+            id: Number(item.entry.id)
+          })),
+          colCount: releaseActions[key].length,
+          isLoading,
+          isFetching,
+          children: /* @__PURE__ */ jsxs(Table.Content, { children: [
+            /* @__PURE__ */ jsxs(Table.Head, { children: [
+              /* @__PURE__ */ jsx(
+                Table.HeaderCell,
+                {
+                  fieldSchemaType: "string",
+                  label: formatMessage({
+                    id: "content-releases.page.ReleaseDetails.table.header.label.name",
+                    defaultMessage: "name"
+                  }),
+                  name: "name"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Table.HeaderCell,
+                {
+                  fieldSchemaType: "string",
+                  label: formatMessage({
+                    id: "content-releases.page.ReleaseDetails.table.header.label.locale",
+                    defaultMessage: "locale"
+                  }),
+                  name: "locale"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Table.HeaderCell,
+                {
+                  fieldSchemaType: "string",
+                  label: formatMessage({
+                    id: "content-releases.page.ReleaseDetails.table.header.label.content-type",
+                    defaultMessage: "content-type"
+                  }),
+                  name: "content-type"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Table.HeaderCell,
+                {
+                  fieldSchemaType: "string",
+                  label: formatMessage({
+                    id: "content-releases.page.ReleaseDetails.table.header.label.action",
+                    defaultMessage: "action"
+                  }),
+                  name: "action"
+                }
+              ),
+              !release.releasedAt && /* @__PURE__ */ jsx(
+                Table.HeaderCell,
+                {
+                  fieldSchemaType: "string",
+                  label: formatMessage({
+                    id: "content-releases.page.ReleaseDetails.table.header.label.status",
+                    defaultMessage: "status"
+                  }),
+                  name: "status"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Table.LoadingBody, {}),
+            /* @__PURE__ */ jsx(Table.Body, { children: releaseActions[key].map(
+              ({ id, contentType, locale, type, entry }, actionIndex) => /* @__PURE__ */ jsxs(Tr, { children: [
+                /* @__PURE__ */ jsx(Td, { width: "25%", maxWidth: "200px", children: /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: `${contentType.mainFieldValue || entry.id}` }) }),
+                /* @__PURE__ */ jsx(Td, { width: "10%", children: /* @__PURE__ */ jsx(Typography, { children: `${locale?.name ? locale.name : "-"}` }) }),
+                /* @__PURE__ */ jsx(Td, { width: "10%", children: /* @__PURE__ */ jsx(Typography, { children: contentType.displayName || "" }) }),
+                /* @__PURE__ */ jsx(Td, { width: "20%", children: release.releasedAt ? /* @__PURE__ */ jsx(Typography, { children: formatMessage(
+                  {
+                    id: "content-releases.page.ReleaseDetails.table.action-published",
+                    defaultMessage: "This entry was <b>{isPublish, select, true {published} other {unpublished}}</b>."
+                  },
+                  {
+                    isPublish: type === "publish",
+                    b: (children) => /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children })
+                  }
+                ) }) : /* @__PURE__ */ jsx(
+                  ReleaseActionOptions,
+                  {
+                    selected: type,
+                    handleChange: (e) => handleChangeType(e, id, [key, actionIndex]),
+                    name: `release-action-${id}-type`
+                  }
+                ) }),
+                !release.releasedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Td, { width: "20%", minWidth: "200px", children: /* @__PURE__ */ jsx(
+                    EntryValidationText,
+                    {
+                      action: type,
+                      schema: contentTypes?.[contentType.uid],
+                      components,
+                      entry
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(ReleaseActionMenu.Root, { children: [
+                    /* @__PURE__ */ jsx(
+                      ReleaseActionMenu.ReleaseActionEntryLinkItem,
+                      {
+                        contentTypeUid: contentType.uid,
+                        entryId: entry.id,
+                        locale: locale?.code
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ReleaseActionMenu.DeleteReleaseActionItem,
+                      {
+                        releaseId: release.id,
+                        actionId: id
+                      }
+                    )
+                  ] }) }) })
+                ] })
+              ] }, id)
+            ) })
+          ] })
+        }
+      )
+    ] }, `releases-group-${key}`)),
     /* @__PURE__ */ jsxs(Flex, { paddingTop: 4, alignItems: "flex-end", justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx(PageSizeURLQuery, { defaultValue: releaseMeta?.pagination?.pageSize.toString() }),
       /* @__PURE__ */ jsx(
@@ -603,38 +768,6 @@ const ReleaseDetailsPage = () => {
     }
   );
 };
-const ProtectedReleaseDetailsPage = () => /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.main, children: /* @__PURE__ */ jsx(ReleaseDetailsPage, {}) });
-const ReleasesLayout = ({
-  isLoading,
-  totalReleases,
-  onClickAddRelease,
-  children
-}) => {
-  const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsxs(Main, { "aria-busy": isLoading, children: [
-    /* @__PURE__ */ jsx(
-      HeaderLayout,
-      {
-        title: formatMessage({
-          id: "content-releases.pages.Releases.title",
-          defaultMessage: "Releases"
-        }),
-        subtitle: !isLoading && formatMessage(
-          {
-            id: "content-releases.pages.Releases.header-subtitle",
-            defaultMessage: "{number, plural, =0 {No releases} one {# release} other {# releases}}"
-          },
-          { number: totalReleases }
-        ),
-        primaryAction: /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.create, children: /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: onClickAddRelease, children: formatMessage({
-          id: "content-releases.header.actions.add-release",
-          defaultMessage: "New release"
-        }) }) })
-      }
-    ),
-    children
-  ] });
-};
 const LinkCard = styled(Link$2)`
   display: block;
 `;
@@ -686,10 +819,19 @@ const ReleasesGrid = ({ sectionTitle, releases = [], isError = false }) => {
     }
   ) }) }, id)) });
 };
+const StyledAlert = styled(Alert)`
+  button {
+    display: none;
+  }
+  p + div {
+    margin-left: auto;
+  }
+`;
 const INITIAL_FORM_VALUES = {
   name: ""
 };
 const ReleasesPage = () => {
+  const tabRef = React.useRef(null);
   const location = useLocation();
   const [releaseModalShown, setReleaseModalShown] = React.useState(false);
   const toggleNotification = useNotification();
@@ -699,7 +841,11 @@ const ReleasesPage = () => {
   const [{ query }, setQuery] = useQueryParams();
   const response = useGetReleasesQuery(query);
   const [createRelease, { isLoading: isSubmittingForm }] = useCreateReleaseMutation();
+  const { getFeature } = useLicenseLimits();
+  const { maximumNumberOfPendingReleases = 3 } = getFeature("cms-content-releases");
   const { isLoading, isSuccess, isError } = response;
+  const activeTab = response?.currentData?.meta?.activeTab || "pending";
+  const activeTabIndex = ["pending", "done"].indexOf(activeTab);
   React.useEffect(() => {
     if (location?.state?.errors) {
       toggleNotification({
@@ -716,13 +862,19 @@ const ReleasesPage = () => {
       replace({ state: null });
     }
   }, [formatMessage, location?.state?.errors, replace, toggleNotification]);
+  React.useEffect(() => {
+    if (tabRef.current) {
+      tabRef.current._handlers.setSelectedTabIndex(activeTabIndex);
+    }
+  }, [activeTabIndex]);
   const toggleAddReleaseModal = () => {
     setReleaseModalShown((prev) => !prev);
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsx(ReleasesLayout, { onClickAddRelease: toggleAddReleaseModal, isLoading: true, children: /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsx(LoadingIndicatorPage, {}) }) });
+    return /* @__PURE__ */ jsx(Main, { "aria-busy": isLoading, children: /* @__PURE__ */ jsx(LoadingIndicatorPage, {}) });
   }
   const totalReleases = isSuccess && response.currentData?.meta?.pagination?.total || 0;
+  const hasReachedMaximumPendingReleases = totalReleases >= maximumNumberOfPendingReleases;
   const handleTabChange = (index) => {
     setQuery({
       ...query,
@@ -735,7 +887,6 @@ const ReleasesPage = () => {
       }
     });
   };
-  const activeTab = response?.currentData?.meta?.activeTab || "pending";
   const handleAddRelease = async (values) => {
     const response2 = await createRelease({
       name: values.name
@@ -761,8 +912,60 @@ const ReleasesPage = () => {
       });
     }
   };
-  return /* @__PURE__ */ jsxs(ReleasesLayout, { onClickAddRelease: toggleAddReleaseModal, totalReleases, children: [
+  return /* @__PURE__ */ jsxs(Main, { "aria-busy": isLoading, children: [
+    /* @__PURE__ */ jsx(
+      HeaderLayout,
+      {
+        title: formatMessage({
+          id: "content-releases.pages.Releases.title",
+          defaultMessage: "Releases"
+        }),
+        subtitle: formatMessage(
+          {
+            id: "content-releases.pages.Releases.header-subtitle",
+            defaultMessage: "{number, plural, =0 {No releases} one {# release} other {# releases}}"
+          },
+          { number: totalReleases }
+        ),
+        primaryAction: /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.create, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            onClick: toggleAddReleaseModal,
+            disabled: hasReachedMaximumPendingReleases,
+            children: formatMessage({
+              id: "content-releases.header.actions.add-release",
+              defaultMessage: "New release"
+            })
+          }
+        ) })
+      }
+    ),
     /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      activeTab === "pending" && hasReachedMaximumPendingReleases && /* @__PURE__ */ jsx(
+        StyledAlert,
+        {
+          marginBottom: 6,
+          action: /* @__PURE__ */ jsx(Link$2, { href: "https://strapi.io/pricing-cloud", isExternal: true, children: formatMessage({
+            id: "content-releases.pages.Releases.max-limit-reached.action",
+            defaultMessage: "Explore plans"
+          }) }),
+          title: formatMessage(
+            {
+              id: "content-releases.pages.Releases.max-limit-reached.title",
+              defaultMessage: "You have reached the {number} pending {number, plural, one {release} other {releases}} limit."
+            },
+            { number: maximumNumberOfPendingReleases }
+          ),
+          onClose: () => {
+          },
+          closeLabel: "",
+          children: formatMessage({
+            id: "content-releases.pages.Releases.max-limit-reached.message",
+            defaultMessage: "Upgrade to manage an unlimited number of releases."
+          })
+        }
+      ),
       /* @__PURE__ */ jsxs(
         TabGroup,
         {
@@ -771,8 +974,9 @@ const ReleasesPage = () => {
             defaultMessage: "Releases list"
           }),
           variant: "simple",
-          initialSelectedTabIndex: ["pending", "done"].indexOf(activeTab),
+          initialSelectedTabIndex: activeTabIndex,
           onTabChange: handleTabChange,
+          ref: tabRef,
           children: [
             /* @__PURE__ */ jsxs(Box, { paddingBottom: 8, children: [
               /* @__PURE__ */ jsxs(Tabs, { children: [
@@ -837,21 +1041,13 @@ const ReleasesPage = () => {
     )
   ] });
 };
-const ProtectedReleasesPage = () => /* @__PURE__ */ jsx(CheckPermissions, { permissions: PERMISSIONS.main, children: /* @__PURE__ */ jsx(ReleasesPage, {}) });
 const App = () => {
-  return /* @__PURE__ */ jsxs(Switch, { children: [
-    /* @__PURE__ */ jsx(Route, { exact: true, path: `/plugins/${pluginId}`, component: ProtectedReleasesPage }),
-    /* @__PURE__ */ jsx(
-      Route,
-      {
-        exact: true,
-        path: `/plugins/${pluginId}/:releaseId`,
-        component: ProtectedReleaseDetailsPage
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(CheckPagePermissions, { permissions: PERMISSIONS.main, children: /* @__PURE__ */ jsxs(Switch, { children: [
+    /* @__PURE__ */ jsx(Route, { exact: true, path: `/plugins/${pluginId}`, component: ReleasesPage }),
+    /* @__PURE__ */ jsx(Route, { exact: true, path: `/plugins/${pluginId}/:releaseId`, component: ReleaseDetailsPage })
+  ] }) });
 };
 export {
   App
 };
-//# sourceMappingURL=App-3f94ba77.mjs.map
+//# sourceMappingURL=App-_Jj3tWts.mjs.map