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

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

@@ -1,7 +1,12 @@
 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';
@@ -12,13 +17,18 @@ 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 { validateWorkflow } from '../../utils/validateWorkflow';
@@ -29,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 {
@@ -36,6 +47,9 @@ 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();
@@ -72,20 +86,12 @@ export function ReviewWorkflowsCreateView() {
 
       return workflow;
     } catch (error) {
-      // TODO: the current implementation of `formatAPIError` prints all error messages of all details,
-      // which get's hairy when we have duplicated-name errors, because the same error message is printed
-      // several times. What we want instead in these scenarios is to print only the error summary and
-      // display the individual error messages for each field. This is a workaround, until we change the
-      // implementation of `formatAPIError`.
+      // 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
       ) {
-        toggleNotification({
-          type: 'warning',
-          message: error.response.data.error.message,
-        });
-
         setInitialErrors(
           error.response.data?.error?.details?.errors.reduce((acc, error) => {
             set(acc, error.path, error.message);
@@ -93,13 +99,13 @@ export function ReviewWorkflowsCreateView() {
             return acc;
           }, {})
         );
-      } else {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
       }
 
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
       return null;
     }
   };
@@ -117,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');
 
         /**
@@ -126,8 +135,9 @@ 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 {
@@ -143,6 +153,13 @@ export function ReviewWorkflowsCreateView() {
 
   React.useEffect(() => {
     dispatch(resetWorkflow());
+
+    // Create an empty default stage
+    dispatch(
+      addStage({
+        name: '',
+      })
+    );
   }, [dispatch]);
 
   /**
@@ -160,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');
       }
@@ -172,8 +193,7 @@ export function ReviewWorkflowsCreateView() {
   }, [
     isLicenseLoading,
     isWorkflowLoading,
-    limits.stagesPerWorkflow,
-    limits?.workflows,
+    limits,
     meta?.workflowsTotal,
     currentWorkflow.stages.length,
   ]);
@@ -191,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,6 +6,7 @@ import {
   useAPIErrorHandler,
   useFetchClient,
   useNotification,
+  useRBAC,
 } from '@strapi/helper-plugin';
 import { Check } from '@strapi/icons';
 import { useFormik, Form, FormikProvider } from 'formik';
@@ -17,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 { validateWorkflow } from '../../utils/validateWorkflow';
 
 export function ReviewWorkflowsEditView() {
   const { workflowId } = useParams();
+  const permissions = useSelector(selectAdminPermissions);
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const { put } = useFetchClient();
@@ -53,6 +60,9 @@ 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);
@@ -87,20 +97,12 @@ export function ReviewWorkflowsEditView() {
 
       return res;
     } catch (error) {
-      // TODO: the current implementation of `formatAPIError` prints all error messages of all details,
-      // which get's hairy when we have duplicated-name errors, because the same error message is printed
-      // several times. What we want instead in these scenarios is to print only the error summary and
-      // display the individual error messages for each field. This is a workaround, until we change the
-      // implementation of `formatAPIError`.
+      // 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
       ) {
-        toggleNotification({
-          type: 'warning',
-          message: error.response.data.error.message,
-        });
-
         setInitialErrors(
           error.response.data?.error?.details?.errors.reduce((acc, error) => {
             set(acc, error.path, error.message);
@@ -108,13 +110,13 @@ export function ReviewWorkflowsEditView() {
             return acc;
           }, {})
         );
-      } else {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
       }
 
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
       return null;
     }
   };
@@ -141,7 +143,10 @@ export function ReviewWorkflowsEditView() {
     async onSubmit() {
       if (currentWorkflowHasDeletedServerStages) {
         setIsConfirmDeleteDialogOpen(true);
-      } else if (limits?.workflows && meta?.workflowCount > parseInt(limits.workflows, 10)) {
+      } 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
@@ -155,8 +160,9 @@ 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 {
@@ -174,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]);
 
   /**
@@ -191,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');
       }
@@ -204,8 +220,7 @@ export function ReviewWorkflowsEditView() {
     currentWorkflow.stages.length,
     isLicenseLoading,
     isWorkflowLoading,
-    limits.stagesPerWorkflow,
-    limits.workflows,
+    limits,
     meta?.workflowCount,
     meta.workflowsTotal,
   ]);
@@ -225,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}
@@ -236,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>
   );
 }

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

@@ -23,18 +23,22 @@ import {
   useAPIErrorHandler,
   useFetchClient,
   useNotification,
+  useRBAC,
   useTracking,
 } from '@strapi/helper-plugin';
 import { Pencil, Plus, Trash } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
 import { useLicenseLimits } from '../../../../../../hooks';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
+import { CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME } from '../../constants';
 import { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
 
 const ActionLink = styled(Link)`
@@ -76,6 +80,10 @@ export function ReviewWorkflowsListView() {
   const toggleNotification = useNotification();
   const { getFeature, isLoading: isLicenseLoading } = useLicenseLimits();
   const { trackUsage } = useTracking();
+  const permissions = useSelector(selectAdminPermissions);
+  const {
+    allowedActions: { canCreate, canDelete },
+  } = useRBAC(permissions.settings['review-workflows']);
 
   const limits = getFeature('review-workflows');
 
@@ -148,24 +156,21 @@ export function ReviewWorkflowsListView() {
 
   React.useEffect(() => {
     if (!isLoading && !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(true);
       }
     }
-  }, [
-    isLicenseLoading,
-    isLoading,
-    limits.stagesPerWorkflow,
-    limits.workflows,
-    meta?.workflowCount,
-    meta.workflowsTotal,
-  ]);
+  }, [isLicenseLoading, isLoading, limits, meta?.workflowCount, meta.workflowsTotal]);
 
   return (
     <>
       <Layout.Header
         primaryAction={
           <LinkButton
+            disabled={!canCreate}
             startIcon={<Plus />}
             size="S"
             to="/settings/review-workflows/create"
@@ -180,7 +185,10 @@ export function ReviewWorkflowsListView() {
                * current hard-limit of 200 they will see an error thrown by the API.
                */
 
-              if (limits?.workflows && meta?.workflowCount >= parseInt(limits.workflows, 10)) {
+              if (
+                limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+                meta?.workflowCount >= parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
+              ) {
                 event.preventDefault();
                 setShowLimitModal(true);
               } else {
@@ -207,42 +215,50 @@ export function ReviewWorkflowsListView() {
 
       <Layout.Root>
         {isLoading || isLoadingModels ? (
-          <Loader>
-            {formatMessage({
-              id: 'Settings.review-workflows.page.list.isLoading',
-              defaultMessage: 'Workflows are loading',
-            })}
-          </Loader>
+          <Flex justifyContent="center">
+            <Loader>
+              {formatMessage({
+                id: 'Settings.review-workflows.page.list.isLoading',
+                defaultMessage: 'Workflows are loading',
+              })}
+            </Loader>
+          </Flex>
         ) : (
           <Table
             colCount={3}
             footer={
               // TODO: we should be able to use a link here instead of an (inaccessible onClick) handler
-              <TFooter
-                icon={<Plus />}
-                onClick={() => {
-                  /**
-                   * If the current license has a workflow limit:
-                   * check if the total count of workflows exceeds that limit
-                   *
-                   * If the current license does not have a limit (e.g. offline license):
-                   * allow the user to navigate to the create-view. In case they exceed the
-                   * current hard-limit of 200 they will see an error thrown by the API.
-                   */
+              canCreate && (
+                <TFooter
+                  icon={<Plus />}
+                  onClick={() => {
+                    /**
+                     * If the current license has a workflow limit:
+                     * check if the total count of workflows exceeds that limit
+                     *
+                     * If the current license does not have a limit (e.g. offline license):
+                     * allow the user to navigate to the create-view. In case they exceed the
+                     * current hard-limit of 200 they will see an error thrown by the API.
+                     */
 
-                  if (limits?.workflows && meta?.workflowCount >= parseInt(limits.workflows, 10)) {
-                    setShowLimitModal(true);
-                  } else {
-                    push('/settings/review-workflows/create');
-                    trackUsage('willCreateWorkflow');
-                  }
-                }}
-              >
-                {formatMessage({
-                  id: 'Settings.review-workflows.list.page.create',
-                  defaultMessage: 'Create new workflow',
-                })}
-              </TFooter>
+                    if (
+                      limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+                      meta?.workflowCount >=
+                        parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
+                    ) {
+                      setShowLimitModal(true);
+                    } else {
+                      push('/settings/review-workflows/create');
+                      trackUsage('willCreateWorkflow');
+                    }
+                  }}
+                >
+                  {formatMessage({
+                    id: 'Settings.review-workflows.list.page.create',
+                    defaultMessage: 'Create new workflow',
+                  })}
+                </TFooter>
+              )
             }
             rowCount={1}
           >
@@ -326,21 +342,22 @@ export function ReviewWorkflowsListView() {
                         <Pencil />
                       </ActionLink>
 
-                      <IconButton
-                        aria-label={formatMessage(
-                          {
-                            id: 'Settings.review-workflows.list.page.list.column.actions.delete.label',
-                            defaultMessage: 'Delete {name}',
-                          },
-                          { name: 'Default workflow' }
-                        )}
-                        disabled={workflows.length === 1}
-                        icon={<Trash />}
-                        noBorder
-                        onClick={() => {
-                          handleDeleteWorkflow(workflow.id);
-                        }}
-                      />
+                      {workflows.length > 1 && canDelete && (
+                        <IconButton
+                          aria-label={formatMessage(
+                            {
+                              id: 'Settings.review-workflows.list.page.list.column.actions.delete.label',
+                              defaultMessage: 'Delete {name}',
+                            },
+                            { name: 'Default workflow' }
+                          )}
+                          icon={<Trash />}
+                          noBorder
+                          onClick={() => {
+                            handleDeleteWorkflow(workflow.id);
+                          }}
+                        />
+                      )}
                     </Flex>
                   </Td>
                 </Tr>

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/ListView/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 { ReviewWorkflowsListView } from './ListView';
 
 export default function () {
+  const permissions = useSelector(selectAdminPermissions);
+
   return (
-    <ProtectedPage>
+    <CheckPagePermissions permissions={permissions.settings['review-workflows'].main}>
       <ReviewWorkflowsListView />
-    </ProtectedPage>
+    </CheckPagePermissions>
   );
 }

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

@@ -22,13 +22,7 @@ export const initialState = {
       data: {
         name: '',
         contentTypes: [],
-        stages: [
-          {
-            color: STAGE_COLOR_DEFAULT,
-            name: '',
-            __temp_key__: 1,
-          },
-        ],
+        stages: [],
       },
       isDirty: false,
       hasDeletedServerStages: false,