@strapi/admin 4.12.0-beta.1 → 4.12.0-beta.4

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

@@ -12,26 +12,27 @@ import { AddStage } from '../AddStage';
 
 import { Stage } from './Stage';
 
-const StagesContainer = styled(Box)`
-  position: relative;
-`;
-
 const Background = styled(Box)`
-  left: 50%;
-  position: absolute;
-  top: 0;
   transform: translateX(-50%);
 `;
 
-function Stages({ stages }) {
+export function Stages({ canDelete, canUpdate, stages }) {
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const { trackUsage } = useTracking();
 
   return (
     <Flex direction="column" gap={6} width="100%">
-      <StagesContainer spacing={4} width="100%">
-        <Background background="neutral200" height="100%" width={2} zIndex={1} />
+      <Box position="relative" spacing={4} width="100%">
+        <Background
+          background="neutral200"
+          height="100%"
+          left="50%"
+          position="absolute"
+          top="0"
+          width={2}
+          zIndex={1}
+        />
 
         <Flex
           direction="column"
@@ -49,18 +50,19 @@ function Stages({ stages }) {
                 <Stage
                   id={id}
                   index={index}
-                  canDelete={stages.length > 1}
                   isOpen={!stage.id}
+                  canDelete={stages.length > 1 && canDelete}
                   canReorder={stages.length > 1}
+                  canUpdate={canUpdate}
                   stagesCount={stages.length}
                 />
               </Box>
             );
           })}
         </Flex>
-      </StagesContainer>
+      </Box>
 
-      <Flex direction="column" gap={6}>
+      {canUpdate && (
         <AddStage
           type="button"
           onClick={() => {
@@ -73,18 +75,20 @@ function Stages({ stages }) {
             defaultMessage: 'Add new stage',
           })}
         </AddStage>
-      </Flex>
+      )}
     </Flex>
   );
 }
 
-export { Stages };
-
 Stages.defaultProps = {
+  canDelete: true,
+  canUpdate: true,
   stages: [],
 };
 
 Stages.propTypes = {
+  canDelete: PropTypes.bool,
+  canUpdate: PropTypes.bool,
   stages: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number,

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

@@ -9,7 +9,7 @@ import { useDispatch } from 'react-redux';
 
 import { updateWorkflow } from '../../actions';
 
-export function WorkflowAttributes({ contentTypes: { collectionTypes, singleTypes } }) {
+export function WorkflowAttributes({ canUpdate, contentTypes: { collectionTypes, singleTypes } }) {
   const { formatMessage, locale } = useIntl();
   const dispatch = useDispatch();
   const [nameField, nameMeta, nameHelper] = useField('name');
@@ -24,6 +24,7 @@ export function WorkflowAttributes({ contentTypes: { collectionTypes, singleType
         <TextInput
           {...nameField}
           id={nameField.name}
+          disabled={!canUpdate}
           label={formatMessage({
             id: 'Settings.review-workflows.workflow.name.label',
             defaultMessage: 'Workflow Name',
@@ -50,6 +51,7 @@ export function WorkflowAttributes({ contentTypes: { collectionTypes, singleType
               { count: value.length }
             )
           }
+          disabled={!canUpdate}
           error={contentTypesMeta.error ?? false}
           id={contentTypesField.name}
           label={formatMessage({
@@ -61,29 +63,37 @@ export function WorkflowAttributes({ contentTypes: { collectionTypes, singleType
             contentTypesHelper.setValue(values);
           }}
           options={[
-            {
-              label: formatMessage({
-                id: 'Settings.review-workflows.workflow.contentTypes.collectionTypes.label',
-                defaultMessage: 'Collection Types',
-              }),
-              children: collectionTypes
-                .sort((a, b) => formatter.compare(a.info.displayName, b.info.displayName))
-                .map((contentType) => ({
-                  label: contentType.info.displayName,
-                  value: contentType.uid,
-                })),
-            },
+            ...(collectionTypes.length > 0
+              ? [
+                  {
+                    label: formatMessage({
+                      id: 'Settings.review-workflows.workflow.contentTypes.collectionTypes.label',
+                      defaultMessage: 'Collection Types',
+                    }),
+                    children: collectionTypes
+                      .sort((a, b) => formatter.compare(a.info.displayName, b.info.displayName))
+                      .map((contentType) => ({
+                        label: contentType.info.displayName,
+                        value: contentType.uid,
+                      })),
+                  },
+                ]
+              : []),
 
-            {
-              label: formatMessage({
-                id: 'Settings.review-workflows.workflow.contentTypes.singleTypes.label',
-                defaultMessage: 'Single Types',
-              }),
-              children: singleTypes.map((contentType) => ({
-                label: contentType.info.displayName,
-                value: contentType.uid,
-              })),
-            },
+            ...(singleTypes.length > 0
+              ? [
+                  {
+                    label: formatMessage({
+                      id: 'Settings.review-workflows.workflow.contentTypes.singleTypes.label',
+                      defaultMessage: 'Single Types',
+                    }),
+                    children: singleTypes.map((contentType) => ({
+                      label: contentType.info.displayName,
+                      value: contentType.uid,
+                    })),
+                  },
+                ]
+              : []),
           ]}
           placeholder={formatMessage({
             id: 'Settings.review-workflows.workflow.contentTypes.placeholder',
@@ -102,7 +112,12 @@ const ContentTypeType = PropTypes.shape({
   }).isRequired,
 });
 
+WorkflowAttributes.defaultProps = {
+  canUpdate: true,
+};
+
 WorkflowAttributes.propTypes = {
+  canUpdate: PropTypes.bool,
   contentTypes: PropTypes.shape({
     collectionTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
     singleTypes: PropTypes.arrayOf(ContentTypeType).isRequired,

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

@@ -32,3 +32,6 @@ export const STAGE_COLOR_DEFAULT = lightTheme.colors.primary600;
 export const DRAG_DROP_TYPES = {
   STAGE: 'stage',
 };
+
+export const CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME = 'numberOfWorkflows';
+export const CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME = 'stagesPerWorkflow';

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/CreateView/CreateView.js

@@ -1,9 +1,15 @@
 import * as React from 'react';
 
 import { Button, Flex, Loader } from '@strapi/design-system';
-import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import {
+  useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
+  useRBAC,
+} from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
 import { useFormik, Form, FormikProvider } from 'formik';
+import set from 'lodash/set';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,16 +17,21 @@ import { useHistory } from 'react-router-dom';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
 import { useLicenseLimits } from '../../../../../../hooks';
-import { resetWorkflow } from '../../actions';
+import { addStage, resetWorkflow } from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
 import { Stages } from '../../components/Stages';
 import { WorkflowAttributes } from '../../components/WorkflowAttributes';
-import { REDUX_NAMESPACE } from '../../constants';
+import {
+  CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME,
+  CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME,
+  REDUX_NAMESPACE,
+} from '../../constants';
 import { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
 import { reducer, initialState } from '../../reducer';
-import { getWorkflowValidationSchema } from '../../utils/getWorkflowValidationSchema';
+import { validateWorkflow } from '../../utils/validateWorkflow';
 
 export function ReviewWorkflowsCreateView() {
   const { formatMessage } = useIntl();
@@ -28,6 +39,7 @@ export function ReviewWorkflowsCreateView() {
   const { push } = useHistory();
   const { formatAPIError } = useAPIErrorHandler();
   const dispatch = useDispatch();
+  const permissions = useSelector(selectAdminPermissions);
   const toggleNotification = useNotification();
   const { collectionTypes, singleTypes, isLoading: isLoadingModels } = useContentTypes();
   const {
@@ -35,9 +47,13 @@ export function ReviewWorkflowsCreateView() {
       currentWorkflow: { data: currentWorkflow, isDirty: currentWorkflowIsDirty },
     },
   } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const {
+    allowedActions: { canCreate },
+  } = useRBAC(permissions.settings['review-workflows']);
   const [showLimitModal, setShowLimitModal] = React.useState(false);
   const { isLoading: isLicenseLoading, getFeature } = useLicenseLimits();
   const { meta, isLoading: isWorkflowLoading } = useReviewWorkflows();
+  const [initialErrors, setInitialErrors] = React.useState(null);
 
   const { mutateAsync, isLoading } = useMutation(
     async ({ workflow }) => {
@@ -70,6 +86,21 @@ export function ReviewWorkflowsCreateView() {
 
       return workflow;
     } catch (error) {
+      // TODO: this would benefit from a utility to get a formik error
+      // representation from an API error
+      if (
+        error.response.data?.error?.name === 'ValidationError' &&
+        error.response.data?.error?.details?.errors?.length > 0
+      ) {
+        setInitialErrors(
+          error.response.data?.error?.details?.errors.reduce((acc, error) => {
+            set(acc, error.path, error.message);
+
+            return acc;
+          }, {})
+        );
+      }
+
       toggleNotification({
         type: 'warning',
         message: formatAPIError(error),
@@ -83,6 +114,7 @@ export function ReviewWorkflowsCreateView() {
 
   const formik = useFormik({
     enableReinitialize: true,
+    initialErrors,
     initialValues: currentWorkflow,
     async onSubmit() {
       /**
@@ -91,7 +123,10 @@ export function ReviewWorkflowsCreateView() {
        * update, because it would throw an API error.
        */
 
-      if (limits?.workflows && meta?.workflowCount >= parseInt(limits.workflows, 10)) {
+      if (
+        limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+        meta?.workflowCount >= parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
+      ) {
         setShowLimitModal('workflow');
 
         /**
@@ -100,21 +135,31 @@ export function ReviewWorkflowsCreateView() {
          * update, because it would throw an API error.
          */
       } else if (
-        limits?.stagesPerWorkflow &&
-        currentWorkflow.stages.length >= parseInt(limits.stagesPerWorkflow, 10)
+        limits?.[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME] &&
+        currentWorkflow.stages.length >=
+          parseInt(limits[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME], 10)
       ) {
         setShowLimitModal('stage');
       } else {
         submitForm();
       }
     },
-    validationSchema: getWorkflowValidationSchema({ formatMessage }),
+    validate(values) {
+      return validateWorkflow({ values, formatMessage });
+    },
   });
 
   useInjectReducer(REDUX_NAMESPACE, reducer);
 
   React.useEffect(() => {
     dispatch(resetWorkflow());
+
+    // Create an empty default stage
+    dispatch(
+      addStage({
+        name: '',
+      })
+    );
   }, [dispatch]);
 
   /**
@@ -132,11 +177,15 @@ export function ReviewWorkflowsCreateView() {
 
   React.useEffect(() => {
     if (!isWorkflowLoading && !isLicenseLoading) {
-      if (limits.workflows && meta?.workflowsTotal >= parseInt(limits.workflows, 10)) {
+      if (
+        limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+        meta?.workflowsTotal >= parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
+      ) {
         setShowLimitModal('workflow');
       } else if (
-        limits.stagesPerWorkflow &&
-        currentWorkflow.stages.length >= parseInt(limits.stagesPerWorkflow, 10)
+        limits?.[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME] &&
+        currentWorkflow.stages.length >=
+          parseInt(limits[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME], 10)
       ) {
         setShowLimitModal('stage');
       }
@@ -144,8 +193,7 @@ export function ReviewWorkflowsCreateView() {
   }, [
     isLicenseLoading,
     isWorkflowLoading,
-    limits.stagesPerWorkflow,
-    limits?.workflows,
+    limits,
     meta?.workflowsTotal,
     currentWorkflow.stages.length,
   ]);
@@ -163,7 +211,7 @@ export function ReviewWorkflowsCreateView() {
                 startIcon={<Check />}
                 type="submit"
                 size="M"
-                disabled={!currentWorkflowIsDirty}
+                disabled={!currentWorkflowIsDirty || !canCreate}
                 isLoading={isLoading}
               >
                 {formatMessage({

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

@@ -1,13 +1,18 @@
 import React from 'react';
 
-import { ProtectedPage } from '../../components/ProtectedPage';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
 
 import { ReviewWorkflowsCreateView } from './CreateView';
 
 export default function () {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <ProtectedPage>
+    <CheckPagePermissions permissions={permissions.settings['review-workflows'].create}>
       <ReviewWorkflowsCreateView />
-    </ProtectedPage>
+    </CheckPagePermissions>
   );
 }

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/EditView/EditView.js

@@ -6,9 +6,11 @@ import {
   useAPIErrorHandler,
   useFetchClient,
   useNotification,
+  useRBAC,
 } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
 import { useFormik, Form, FormikProvider } from 'formik';
+import set from 'lodash/set';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 import { useSelector, useDispatch } from 'react-redux';
@@ -16,19 +18,25 @@ import { useParams } from 'react-router-dom';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
 import { useLicenseLimits } from '../../../../../../hooks';
-import { setWorkflow } from '../../actions';
+import { resetWorkflow, setWorkflow } from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
 import { Stages } from '../../components/Stages';
 import { WorkflowAttributes } from '../../components/WorkflowAttributes';
-import { REDUX_NAMESPACE } from '../../constants';
+import {
+  CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME,
+  CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME,
+  REDUX_NAMESPACE,
+} from '../../constants';
 import { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
 import { reducer, initialState } from '../../reducer';
-import { getWorkflowValidationSchema } from '../../utils/getWorkflowValidationSchema';
+import { validateWorkflow } from '../../utils/validateWorkflow';
 
 export function ReviewWorkflowsEditView() {
   const { workflowId } = useParams();
+  const permissions = useSelector(selectAdminPermissions);
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const { put } = useFetchClient();
@@ -52,9 +60,13 @@ export function ReviewWorkflowsEditView() {
       },
     },
   } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const {
+    allowedActions: { canDelete, canUpdate },
+  } = useRBAC(permissions.settings['review-workflows']);
   const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = React.useState(false);
   const { getFeature, isLoading: isLicenseLoading } = useLicenseLimits();
   const [showLimitModal, setShowLimitModal] = React.useState(false);
+  const [initialErrors, setInitialErrors] = React.useState(null);
 
   const { mutateAsync, isLoading } = useMutation(
     async ({ workflow }) => {
@@ -77,11 +89,29 @@ export function ReviewWorkflowsEditView() {
   );
 
   const updateWorkflow = async (workflow) => {
+    // reset the error messages
+    setInitialErrors(null);
+
     try {
       const res = await mutateAsync({ workflow });
 
       return res;
     } catch (error) {
+      // TODO: this would benefit from a utility to get a formik error
+      // representation from an API error
+      if (
+        error.response.data?.error?.name === 'ValidationError' &&
+        error.response.data?.error?.details?.errors?.length > 0
+      ) {
+        setInitialErrors(
+          error.response.data?.error?.details?.errors.reduce((acc, error) => {
+            set(acc, error.path, error.message);
+
+            return acc;
+          }, {})
+        );
+      }
+
       toggleNotification({
         type: 'warning',
         message: formatAPIError(error),
@@ -108,16 +138,20 @@ export function ReviewWorkflowsEditView() {
 
   const formik = useFormik({
     enableReinitialize: true,
+    initialErrors,
     initialValues: currentWorkflow,
     async onSubmit() {
       if (currentWorkflowHasDeletedServerStages) {
         setIsConfirmDeleteDialogOpen(true);
-      } else if (limits?.workflows && meta?.workflowCount > parseInt(limits.workflows, 10)) {
-      /**
-       * If the current license has a limit, check if the total count of workflows
-       * exceeds that limit and display the limits modal instead of sending the
-       * update, because it would throw an API error.
-       */
+      } else if (
+        limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+        meta?.workflowCount > parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
+      ) {
+        /**
+         * If the current license has a limit, check if the total count of workflows
+         * exceeds that limit and display the limits modal instead of sending the
+         * update, because it would throw an API error.
+         */
         setShowLimitModal('workflow');
 
         /**
@@ -126,15 +160,18 @@ export function ReviewWorkflowsEditView() {
          * update, because it would throw an API error.
          */
       } else if (
-        limits?.stagesPerWorkflow &&
-        currentWorkflow.stages.length > parseInt(limits.stagesPerWorkflow, 10)
+        limits?.[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME] &&
+        currentWorkflow.stages.length >
+          parseInt(limits[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME], 10)
       ) {
         setShowLimitModal('stage');
       } else {
         submitForm();
       }
     },
-    validationSchema: getWorkflowValidationSchema({ formatMessage }),
+    validate(values) {
+      return validateWorkflow({ values, formatMessage });
+    },
   });
 
   useInjectReducer(REDUX_NAMESPACE, reducer);
@@ -143,6 +180,12 @@ export function ReviewWorkflowsEditView() {
 
   React.useEffect(() => {
     dispatch(setWorkflow({ status: workflowStatus, data: workflow }));
+
+    // reset the state to the initial state to avoid flashes if a user
+    // navigates from an edit-view to a create-view
+    return () => {
+      dispatch(resetWorkflow());
+    };
   }, [workflowStatus, workflow, dispatch]);
 
   /**
@@ -160,11 +203,15 @@ export function ReviewWorkflowsEditView() {
 
   React.useEffect(() => {
     if (!isWorkflowLoading && !isLicenseLoading) {
-      if (limits?.workflows && meta?.workflowCount > parseInt(limits.workflows, 10)) {
+      if (
+        limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+        meta?.workflowCount > parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
+      ) {
         setShowLimitModal('workflow');
       } else if (
-        limits?.stagesPerWorkflow &&
-        currentWorkflow.stages.length > parseInt(limits.stagesPerWorkflow, 10)
+        limits?.[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME] &&
+        currentWorkflow.stages.length >
+          parseInt(limits[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME], 10)
       ) {
         setShowLimitModal('stage');
       }
@@ -173,8 +220,7 @@ export function ReviewWorkflowsEditView() {
     currentWorkflow.stages.length,
     isLicenseLoading,
     isWorkflowLoading,
-    limits.stagesPerWorkflow,
-    limits.workflows,
+    limits,
     meta?.workflowCount,
     meta.workflowsTotal,
   ]);
@@ -194,7 +240,7 @@ export function ReviewWorkflowsEditView() {
                 startIcon={<Check />}
                 type="submit"
                 size="M"
-                disabled={!currentWorkflowIsDirty}
+                disabled={!currentWorkflowIsDirty || !canUpdate}
                 // if the confirm dialog is open the loading state is on
                 // the confirm button already
                 loading={!isConfirmDeleteDialogOpen && isLoading}
@@ -205,28 +251,40 @@ export function ReviewWorkflowsEditView() {
                 })}
               </Button>
             }
-            subtitle={formatMessage(
-              {
-                id: 'Settings.review-workflows.page.subtitle',
-                defaultMessage: '{count, plural, one {# stage} other {# stages}}',
-              },
-              { count: currentWorkflow?.stages?.length ?? 0 }
-            )}
+            subtitle={
+              currentWorkflow.stages.length > 0 &&
+              formatMessage(
+                {
+                  id: 'Settings.review-workflows.page.subtitle',
+                  defaultMessage: '{count, plural, one {# stage} other {# stages}}',
+                },
+                { count: currentWorkflow.stages.length }
+              )
+            }
             title={currentWorkflow.name}
           />
 
           <Layout.Root>
             {isLoadingModels || status === 'loading' ? (
-              <Loader>
-                {formatMessage({
-                  id: 'Settings.review-workflows.page.isLoading',
-                  defaultMessage: 'Workflow is loading',
-                })}
-              </Loader>
+              <Flex justifyContent="center">
+                <Loader>
+                  {formatMessage({
+                    id: 'Settings.review-workflows.page.isLoading',
+                    defaultMessage: 'Workflow is loading',
+                  })}
+                </Loader>
+              </Flex>
             ) : (
               <Flex alignItems="stretch" direction="column" gap={7}>
-                <WorkflowAttributes contentTypes={{ collectionTypes, singleTypes }} />
-                <Stages stages={formik.values?.stages} />
+                <WorkflowAttributes
+                  canUpdate={canUpdate}
+                  contentTypes={{ collectionTypes, singleTypes }}
+                />
+                <Stages
+                  canDelete={canDelete}
+                  canUpdate={canUpdate}
+                  stages={formik.values?.stages}
+                />
               </Flex>
             )}
           </Layout.Root>

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

@@ -1,13 +1,18 @@
 import React from 'react';
 
-import { ProtectedPage } from '../../components/ProtectedPage';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
+
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
 
 import { ReviewWorkflowsEditView } from './EditView';
 
 export default function () {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <ProtectedPage>
+    <CheckPagePermissions permissions={permissions.settings['review-workflows'].main}>
       <ReviewWorkflowsEditView />
-    </ProtectedPage>
+    </CheckPagePermissions>
   );
 }