@strapi/admin 4.11.3 → 4.12.0-beta.0

package/ee/admin/content-manager/pages/EditView/InformationBox/InformationBoxEE.js

@@ -11,16 +11,18 @@ import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 
 import Information from '../../../../../../admin/src/content-manager/pages/EditView/Information';
+import useLicenseLimits from '../../../../hooks/useLicenseLimits';
+import * as LimitsModal from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/LimitsModal';
 import { useReviewWorkflows } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
 import { getStageColorByHex } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
 
-const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
+const ATTRIBUTE_NAME = 'strapi_stage';
 
 export function InformationBoxEE() {
   const {
     initialData,
     isCreatingEntry,
-    layout: { uid },
+    layout: { uid, options },
     isSingleType,
     onChange,
   } = useCMEditViewDataManager();
@@ -29,17 +31,18 @@ export function InformationBoxEE() {
   // be updated at the same time when modifiedData is updated, otherwise
   // the entity is flagged as modified
   const activeWorkflowStage = initialData?.[ATTRIBUTE_NAME] ?? null;
-  const hasReviewWorkflowsEnabled = Object.prototype.hasOwnProperty.call(
-    initialData,
-    ATTRIBUTE_NAME
-  );
+  const hasReviewWorkflowsEnabled = options?.reviewWorkflows ?? false;
   const { formatMessage } = useIntl();
   const { formatAPIError } = useAPIErrorHandler();
   const toggleNotification = useNotification();
+  const { getFeature } = useLicenseLimits();
+  const [showLimitModal, setShowLimitModal] = React.useState(false);
 
-  const { workflows, isLoading: workflowIsLoading } = useReviewWorkflows();
-  // TODO: this works only as long as we support one workflow
-  const workflow = workflows?.[0] ?? null;
+  const {
+    meta,
+    workflows: [workflow],
+    isLoading: isWorkflowLoading,
+  } = useReviewWorkflows({ filters: { contentTypes: uid } });
 
   const { error, isLoading, mutateAsync } = useMutation(
     async ({ entityId, stageId, uid }) => {
@@ -70,29 +73,42 @@ export function InformationBoxEE() {
     }
   );
 
-  // if entities are created e.g. through lifecycle methods
-  // they may not have a stage assigned. Updating the entity won't
-  // set the default stage either which may lead to entities that
-  // do not have a stage assigned for a while. By displaying an
-  // error by default we are trying to nudge users into assigning a stage.
-  const initialStageNullError =
-    activeWorkflowStage === null &&
-    !workflowIsLoading &&
-    !isCreatingEntry &&
-    formatMessage({
-      id: 'content-manager.reviewWorkflows.stage.select.placeholder',
-      defaultMessage: 'Select a stage',
-    });
-  const formattedMutationError = error && formatAPIError(error);
-  const formattedError = formattedMutationError || initialStageNullError || null;
+  const limits = getFeature('review-workflows');
+  const formattedError = (error && formatAPIError(error)) || null;
 
   const handleStageChange = async ({ value: stageId }) => {
     try {
-      await mutateAsync({
-        entityId: initialData.id,
-        stageId,
-        uid,
-      });
+      /**
+       * If the current license has a limit:
+       * check if the total count of workflows exceeds that limit and display
+       * the limits modal.
+       *
+       * If the current license does not have a limit (e.g. offline license):
+       * do nothing (for now).
+       *
+       */
+
+      if (limits?.workflows && limits.workflows > meta.workflowCount) {
+        setShowLimitModal('workflow');
+
+        /**
+         * If the current license has a limit:
+         * check if the total count of stages exceeds that limit and display
+         * the limits modal.
+         *
+         * If the current license does not have a limit (e.g. offline license):
+         * do nothing (for now).
+         *
+         */
+      } else if (limits?.stagesPerWorkflow && limits.stagesPerWorkflow > workflow.stages.length) {
+        setShowLimitModal('stage');
+      } else {
+        await mutateAsync({
+          entityId: initialData.id,
+          stageId,
+          uid,
+        });
+      }
     } catch (error) {
       // react-query@v3: the error doesn't have to be handled here
       // see: https://github.com/TanStack/query/issues/121
@@ -136,7 +152,7 @@ export function InformationBoxEE() {
               <Typography textColor="neutral800" ellipsis>
                 {activeWorkflowStage?.name}
               </Typography>
-              {isLoading ? <Loader small style={{ display: 'flex' }} /> : null}
+              {isWorkflowLoading || isLoading ? <Loader small style={{ display: 'flex' }} /> : null}
             </Flex>
           )}
         >
@@ -168,6 +184,44 @@ export function InformationBoxEE() {
       )}
 
       <Information.Body />
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'workflow'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.workflows.limit.title',
+            defaultMessage: 'You’ve reached the limit of workflows in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.workflows.limit.body',
+            defaultMessage: 'Delete a workflow or contact Sales to enable more workflows.',
+          })}
+        </LimitsModal.Body>
+      </LimitsModal.Root>
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'stage'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.stages.limit.title',
+            defaultMessage: 'You have reached the limit of stages for this workflow in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.stages.limit.body',
+            defaultMessage: 'Try deleting some stages or contact Sales to enable more stages.',
+          })}
+        </LimitsModal.Body>
+      </LimitsModal.Root>
     </Information.Root>
   );
 }

package/ee/admin/content-manager/{components/DynamicTable/CellContent/ReviewWorkflowsStage → pages/ListView/ReviewWorkflowsColumn}/ReviewWorkflowsStageEE.js

@@ -4,7 +4,8 @@ import { Box, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 
-import { getStageColorByHex } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
+import { STAGE_COLOR_DEFAULT } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
+import { getStageColorByHex } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
 
 export function ReviewWorkflowsStageEE({ color, name }) {
   const { themeColorName } = getStageColorByHex(color);
@@ -27,7 +28,11 @@ export function ReviewWorkflowsStageEE({ color, name }) {
   );
 }
 
+ReviewWorkflowsStageEE.defaultProps = {
+  color: STAGE_COLOR_DEFAULT,
+};
+
 ReviewWorkflowsStageEE.propTypes = {
-  color: PropTypes.string.isRequired,
+  color: PropTypes.string,
   name: PropTypes.string.isRequired,
 };

package/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/constants.js

@@ -0,0 +1,24 @@
+import getTrad from '../../../../../../admin/src/content-manager/utils/getTrad';
+
+export const REVIEW_WORKFLOW_COLUMNS_EE = {
+  key: '__strapi_reviewWorkflows_stage_temp_key__',
+  name: 'strapi_reviewWorkflows_stage',
+  fieldSchema: {
+    type: 'relation',
+  },
+  metadatas: {
+    // formatMessage() will be applied when the column is rendered
+    label: {
+      id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.stage`),
+      defaultMessage: 'Review stage',
+    },
+    searchable: false,
+    sortable: true,
+    mainField: {
+      name: 'name',
+      schema: {
+        type: 'string',
+      },
+    },
+  },
+};

package/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/index.js

@@ -0,0 +1 @@
+export * from './ReviewWorkflowsStageEE';

package/ee/admin/hooks/useLicenseLimitNotification/index.js

@@ -19,18 +19,18 @@ const BILLING_SELF_HOSTED_URL = 'https://strapi.io/billing/request-seats';
 
 const useLicenseLimitNotification = () => {
   const { formatMessage } = useIntl();
-  let { license } = useLicenseLimits();
+  let { license, isError, isLoading } = useLicenseLimits();
   const toggleNotification = useNotification();
   const { pathname } = useLocation();
 
+  const { enforcementUserCount, permittedSeats, licenseLimitStatus, isHostedOnStrapiCloud } =
+    license;
+
   useEffect(() => {
-    if (!license?.data) {
+    if (isError || isLoading) {
       return;
     }
 
-    const { enforcementUserCount, permittedSeats, licenseLimitStatus, isHostedOnStrapiCloud } =
-      license?.data ?? {};
-
     const shouldDisplayNotification =
       !isNil(permittedSeats) &&
       !window.sessionStorage.getItem(`${STORAGE_KEY_PREFIX}-${pathname}`) &&
@@ -84,7 +84,18 @@ const useLicenseLimitNotification = () => {
         },
       });
     }
-  }, [toggleNotification, license.data, pathname, formatMessage]);
+  }, [
+    toggleNotification,
+    license,
+    pathname,
+    formatMessage,
+    isLoading,
+    permittedSeats,
+    licenseLimitStatus,
+    enforcementUserCount,
+    isHostedOnStrapiCloud,
+    isError,
+  ]);
 };
 
 export default useLicenseLimitNotification;

package/ee/admin/hooks/useLicenseLimits/index.js

@@ -1,34 +1,3 @@
-import { useFetchClient, useRBAC } from '@strapi/helper-plugin';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-
-import { selectAdminPermissions } from '../../../../admin/src/pages/App/selectors';
-
-const useLicenseLimits = () => {
-  const permissions = useSelector(selectAdminPermissions);
-  const rbac = useRBAC(permissions.settings.users);
-
-  const {
-    isLoading: isRBACLoading,
-    allowedActions: { canRead, canCreate, canUpdate, canDelete },
-  } = rbac;
-
-  const isRBACAllowed = canRead && canCreate && canUpdate && canDelete;
-
-  const { get } = useFetchClient();
-  const fetchLicenseLimitInfo = async () => {
-    const {
-      data: { data },
-    } = await get('/admin/license-limit-information');
-
-    return data;
-  };
-
-  const license = useQuery(['ee', 'license-limit-info'], fetchLicenseLimitInfo, {
-    enabled: !isRBACLoading && isRBACAllowed,
-  });
-
-  return { license };
-};
+import { useLicenseLimits } from './useLicenseLimits';
 
 export default useLicenseLimits;

package/ee/admin/hooks/useLicenseLimits/useLicenseLimits.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { useFetchClient, useRBAC } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+
+import { selectAdminPermissions } from '../../../../admin/src/pages/App/selectors';
+
+export function useLicenseLimits() {
+  const permissions = useSelector(selectAdminPermissions);
+  const { get } = useFetchClient();
+  const {
+    isLoading: isRBACLoading,
+    allowedActions: { canRead, canCreate, canUpdate, canDelete },
+  } = useRBAC(permissions.settings.users);
+  const hasPermissions = canRead && canCreate && canUpdate && canDelete;
+
+  const { data, isError, isLoading } = useQuery(
+    ['ee', 'license-limit-info'],
+    async () => {
+      const {
+        data: { data },
+      } = await get('/admin/license-limit-information');
+
+      return data;
+    },
+    {
+      enabled: !isRBACLoading && hasPermissions,
+    }
+  );
+
+  const license = data ?? {};
+
+  const getFeature = React.useCallback(
+    (name) => {
+      const feature = (license?.features ?? []).find((feature) => feature.name === name);
+
+      return feature?.options ?? {};
+    },
+    [license?.features]
+  );
+
+  return { license, getFeature, isError, isLoading };
+}

package/ee/admin/pages/SettingsPage/constants.js

@@ -20,7 +20,7 @@ export const ROUTES_EE = [
         {
           async Component() {
             const component = await import(
-              /* webpackChunkName: "review-workflows-settings" */ './pages/ReviewWorkflows'
+              /* webpackChunkName: "review-workflows-settings-list-view" */ './pages/ReviewWorkflows/pages/ListView'
             );
 
             return component;
@@ -28,6 +28,30 @@ export const ROUTES_EE = [
           to: '/settings/review-workflows',
           exact: true,
         },
+
+        {
+          async Component() {
+            const component = await import(
+              /* webpackChunkName: "review-workflows-settings-create-view" */ './pages/ReviewWorkflows/pages/CreateView'
+            );
+
+            return component;
+          },
+          to: '/settings/review-workflows/create',
+          exact: true,
+        },
+
+        {
+          async Component() {
+            const component = await import(
+              /* webpackChunkName: "review-workflows-settings-edit-view" */ './pages/ReviewWorkflows/pages/EditView'
+            );
+
+            return component;
+          },
+          to: '/settings/review-workflows/:workflowId',
+          exact: true,
+        },
       ]
     : []),
 

package/ee/admin/pages/SettingsPage/pages/ApplicationInfosPage/components/AdminSeatInfo/index.js

@@ -13,11 +13,13 @@ const BILLING_SELF_HOSTED_URL = 'https://strapi.io/billing/request-seats';
 
 const AdminSeatInfo = () => {
   const { formatMessage } = useIntl();
-  const { license } = useLicenseLimits();
-  const { licenseLimitStatus, enforcementUserCount, permittedSeats, isHostedOnStrapiCloud } =
-    license?.data ?? {};
+  const {
+    license: { licenseLimitStatus, enforcementUserCount, permittedSeats, isHostedOnStrapiCloud },
+    isError,
+    isLoading,
+  } = useLicenseLimits();
 
-  if (!permittedSeats) {
+  if (isError || isLoading || !permittedSeats) {
     return null;
   }
 

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/hooks/useAuditLogsData.js

@@ -1,4 +1,4 @@
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useQueryParams } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 
@@ -8,6 +8,7 @@ const useAuditLogsData = ({ canReadAuditLogs, canReadUsers }) => {
   const { get } = useFetchClient();
   const { search } = useLocation();
   const toggleNotification = useNotification();
+  const [{ query }] = useQueryParams();
 
   const queryOptions = {
     keepPreviousData: true,
@@ -35,9 +36,10 @@ const useAuditLogsData = ({ canReadAuditLogs, canReadUsers }) => {
     isError: isAuditLogsError,
   } = useQuery(
     ['auditLogs', search],
-    async ({ queryKey }) => {
-      const search = queryKey[1];
-      const { data } = await get(`/admin/audit-logs${search}`);
+    async () => {
+      const { data } = await get(`/admin/audit-logs`, {
+        params: query,
+      });
 
       return data;
     },

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/index.js

@@ -33,17 +33,12 @@ const ListView = () => {
   const { formatMessage } = useIntl();
   const permissions = useSelector(selectAdminPermissions);
 
-  // TODO: this is necessary because otherwise we run into an
-  // infinite rendering loop
-  const permissionsMemoized = React.useMemo(() => {
-    return {
-      ...permissions.settings.auditLogs,
-      readUsers: permissions.settings.users.read,
-    };
-  }, [permissions.settings.auditLogs, permissions.settings.users.read]);
   const {
     allowedActions: { canRead: canReadAuditLogs, canReadUsers },
-  } = useRBAC(permissionsMemoized);
+  } = useRBAC({
+    ...permissions.settings.auditLogs,
+    readUsers: permissions.settings.users.read,
+  });
 
   const [{ query }, setQuery] = useQueryParams();
   const { auditLogs, users, isLoading, hasError } = useAuditLogsData({

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/actions/index.js

@@ -1,17 +1,19 @@
 import {
   ACTION_ADD_STAGE,
   ACTION_DELETE_STAGE,
-  ACTION_SET_WORKFLOWS,
+  ACTION_RESET_WORKFLOW,
+  ACTION_SET_WORKFLOW,
   ACTION_UPDATE_STAGE,
   ACTION_UPDATE_STAGE_POSITION,
+  ACTION_UPDATE_WORKFLOW,
 } from '../constants';
 
-export function setWorkflows({ status, data }) {
+export function setWorkflow({ status, data }) {
   return {
-    type: ACTION_SET_WORKFLOWS,
+    type: ACTION_SET_WORKFLOW,
     payload: {
       status,
-      workflows: data,
+      workflow: data,
     },
   };
 }
@@ -51,3 +53,16 @@ export function updateStagePosition(oldIndex, newIndex) {
     },
   };
 }
+
+export function updateWorkflow(payload) {
+  return {
+    type: ACTION_UPDATE_WORKFLOW,
+    payload,
+  };
+}
+
+export function resetWorkflow() {
+  return {
+    type: ACTION_RESET_WORKFLOW,
+  };
+}

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Layout/Layout.js

@@ -0,0 +1,65 @@
+/* eslint-disable react/prop-types */
+
+import * as React from 'react';
+
+import { ContentLayout, HeaderLayout, Layout, Main } from '@strapi/design-system';
+import { Link, SettingsPageTitle } from '@strapi/helper-plugin';
+import { ArrowLeft } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+import { DragLayer } from '../../../../../../../../admin/src/components/DragLayer';
+import { DRAG_DROP_TYPES } from '../../constants';
+import { StageDragPreview } from '../StageDragPreview';
+
+function renderDragLayerItem({ type, item }) {
+  switch (type) {
+    case DRAG_DROP_TYPES.STAGE:
+      return <StageDragPreview {...item} />;
+
+    default:
+      return null;
+  }
+}
+
+function DragLayerRendered() {
+  return <DragLayer renderItem={renderDragLayerItem} />;
+}
+
+function Root({ children }) {
+  return (
+    <Layout>
+      <Main tabIndex={-1}>
+        <ContentLayout>{children}</ContentLayout>
+      </Main>
+    </Layout>
+  );
+}
+
+function Back({ href }) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Link startIcon={<ArrowLeft />} to={href}>
+      {formatMessage({
+        id: 'global.back',
+        defaultMessage: 'Back',
+      })}
+    </Link>
+  );
+}
+
+function Header({ title, subtitle, navigationAction, primaryAction }) {
+  return (
+    <>
+      <SettingsPageTitle name={title} />
+      <HeaderLayout
+        navigationAction={navigationAction}
+        primaryAction={primaryAction}
+        title={title}
+        subtitle={subtitle}
+      />
+    </>
+  );
+}
+
+export { Back, DragLayerRendered, Header, Root };

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Layout/index.js

@@ -0,0 +1 @@
+export * from './Layout';

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/LimitsModal/LimitsModal.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+import { Box, Flex, IconButton, ModalLayout, ModalBody, Typography } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { Cross } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+import balloonImageSrc from './assets/balloon.png';
+
+const TITLE_ID = 'limits-title';
+
+const CTA_LEARN_MORE_HREF = 'https://strapi.io/pricing-cloud';
+const CTA_SALES_HREF = 'https://strapi.io/contact-sales';
+
+export function Title({ children }) {
+  return (
+    <Typography variant="alpha" id={TITLE_ID}>
+      {children}
+    </Typography>
+  );
+}
+
+Title.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export function Body({ children }) {
+  return <Typography variant="omega">{children}</Typography>;
+}
+
+Body.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+function CallToActions() {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Flex gap={2} paddingTop={4}>
+      <LinkButton variant="default" isExternal href={CTA_LEARN_MORE_HREF}>
+        {formatMessage({
+          id: 'Settings.review-workflows.limit.cta.learn',
+          defaultMessage: 'Learn more',
+        })}
+      </LinkButton>
+
+      <LinkButton variant="tertiary" isExternal href={CTA_SALES_HREF}>
+        {formatMessage({
+          id: 'Settings.review-workflows.limit.cta.sales',
+          defaultMessage: 'Contact Sales',
+        })}
+      </LinkButton>
+    </Flex>
+  );
+}
+
+const BalloonImage = styled.img`
+  // Margin top|right reverse the padding of ModalBody
+  margin-right: ${({ theme }) => `-${theme.spaces[7]}`};
+  margin-top: ${({ theme }) => `-${theme.spaces[7]}`};
+  width: 360px;
+`;
+
+export function LimitsModal({ children, isOpen, onClose }) {
+  const { formatMessage } = useIntl();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <ModalLayout labelledBy={TITLE_ID}>
+      <ModalBody>
+        <Flex gap={2} paddingLeft={7} position="relative">
+          <Flex alignItems="start" direction="column" gap={2} width="60%">
+            {children}
+
+            <CallToActions />
+          </Flex>
+
+          <Flex justifyContent="end" height="100%" width="40%">
+            <BalloonImage src={balloonImageSrc} aria-hidden alt="" loading="lazy" />
+
+            <Box display="flex" position="absolute" right={0} top={0}>
+              <IconButton
+                icon={<Cross />}
+                aria-label={formatMessage({
+                  id: 'global.close',
+                  defaultMessage: 'Close',
+                })}
+                onClick={onClose}
+              />
+            </Box>
+          </Flex>
+        </Flex>
+      </ModalBody>
+    </ModalLayout>
+  );
+}
+
+LimitsModal.defaultProps = {
+  isOpen: false,
+};
+
+LimitsModal.propTypes = {
+  children: PropTypes.node.isRequired,
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+};

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/LimitsModal/index.js

@@ -0,0 +1,3 @@
+import { Title, Body, LimitsModal as Root } from './LimitsModal';
+
+export { Title, Body, Root };