@strapi/admin 4.13.3 → 4.14.0-alpha.0

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

@@ -5,29 +5,69 @@ import {
   AccordionContent,
   AccordionToggle,
   Box,
+  Button,
   Flex,
   Grid,
   GridItem,
   IconButton,
+  MultiSelect,
+  MultiSelectGroup,
+  MultiSelectOption,
   SingleSelect,
   SingleSelectOption,
   TextInput,
+  Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { useTracking } from '@strapi/helper-plugin';
-import { Drag, Trash } from '@strapi/icons';
+import { Menu, MenuItem } from '@strapi/design-system/v2';
+import {
+  ConfirmDialog,
+  useNotification,
+  NotAllowedInput,
+  useTracking,
+} from '@strapi/helper-plugin';
+import { Drag, More } from '@strapi/icons';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 import { useDragAndDrop } from '../../../../../../../../../admin/src/content-manager/hooks';
 import { composeRefs } from '../../../../../../../../../admin/src/content-manager/utils';
-import { deleteStage, updateStage, updateStagePosition } from '../../../actions';
+import {
+  cloneStage,
+  deleteStage,
+  updateStage,
+  updateStagePosition,
+  updateStages,
+} from '../../../actions';
 import { DRAG_DROP_TYPES } from '../../../constants';
+import { selectRoles } from '../../../selectors';
 import { getAvailableStageColors, getStageColorByHex } from '../../../utils/colors';
 
+const NestedOption = styled(MultiSelectOption)`
+  padding-left: ${({ theme }) => theme.spaces[7]};
+`;
+
+// Grow the size of the permission Select
+const PermissionWrapper = styled(Flex)`
+  > * {
+    flex-grow: 1;
+  }
+`;
+
+// Make sure the apply to all stages button doesn't collapse, when the Select
+// contains more tags than it can fit into one line
+const ApplyToAllStages = styled(Button)`
+  flex-shrink: 0;
+`;
+
+const DeleteMenuItem = styled(MenuItem)`
+  color: ${({ theme }) => theme.colors.danger600};
+`;
+
 const AVAILABLE_COLORS = getAvailableStageColors();
 
 function StageDropPreview() {
@@ -137,13 +177,23 @@ export function Stage({
     dispatch(updateStagePosition(oldIndex, newIndex));
   };
 
+  const handleApplyPermissionsToAllStages = () => {
+    setIsApplyAllConfirmationOpen(true);
+  };
+
   const [liveText, setLiveText] = React.useState(null);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();
+  const toggleNotification = useNotification();
   const [isOpen, setIsOpen] = React.useState(isOpenDefault);
+  const [isApplyAllConfirmationOpen, setIsApplyAllConfirmationOpen] = React.useState(false);
   const [nameField, nameMeta, nameHelper] = useField(`stages.${index}.name`);
   const [colorField, colorMeta, colorHelper] = useField(`stages.${index}.color`);
+  const [permissionsField, permissionsMeta, permissionsHelper] = useField(
+    `stages.${index}.permissions`
+  );
+  const roles = useSelector(selectRoles);
   const [{ handlerId, isDragging, handleKeyDown }, stageRef, dropRef, dragRef, dragPreviewRef] =
     useDragAndDrop(canReorder, {
       index,
@@ -171,12 +221,17 @@ export function Stage({
     color: hex,
   }));
 
+  const { themeColorName } = getStageColorByHex(colorField.value) ?? {};
+
+  const filteredRoles = roles
+    // Super admins always have permissions to do everything and therefore
+    // there is no point for this role to show up in the role combobox
+    .filter((role) => role.code !== 'strapi-super-admin');
+
   React.useEffect(() => {
     dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index]);
 
-  const { themeColorName } = getStageColorByHex(colorField.value) ?? {};
-
   return (
     <Box ref={composedRef}>
       {liveText && <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>}
@@ -196,7 +251,7 @@ export function Stage({
           }}
           expanded={isOpen}
           shadow="tableShadow"
-          error={nameMeta.error ?? colorMeta?.error ?? false}
+          error={nameMeta.error ?? colorMeta?.error ?? permissionsMeta?.error ?? false}
           hasErrorMessage={false}
         >
           <AccordionToggle
@@ -205,18 +260,41 @@ export function Stage({
             action={
               (canDelete || canUpdate) && (
                 <Flex>
-                  {canDelete && (
-                    <IconButton
-                      background="transparent"
-                      icon={<Trash />}
-                      label={formatMessage({
-                        id: 'Settings.review-workflows.stage.delete',
-                        defaultMessage: 'Delete stage',
-                      })}
-                      noBorder
-                      onClick={() => dispatch(deleteStage(id))}
-                    />
-                  )}
+                  <Menu.Root>
+                    <Menu.Trigger size="S" endIcon={null} paddingLeft={2} paddingRight={2}>
+                      <More aria-hidden focusable={false} />
+                      <VisuallyHidden as="span">
+                        {formatMessage({
+                          id: '[tbdb].components.DynamicZone.more-actions',
+                          defaultMessage: 'More actions',
+                        })}
+                      </VisuallyHidden>
+                    </Menu.Trigger>
+                    {/* z-index needs to be as big as the one defined for the wrapper in Stages, otherwise the menu
+                     * disappears behind the accordion
+                     */}
+                    <Menu.Content popoverPlacement="bottom-end" zIndex={2}>
+                      <Menu.SubRoot>
+                        {canUpdate && (
+                          <MenuItem onClick={() => dispatch(cloneStage(id))}>
+                            {formatMessage({
+                              id: 'Settings.review-workflows.stage.delete',
+                              defaultMessage: 'Duplicate stage',
+                            })}
+                          </MenuItem>
+                        )}
+
+                        {canDelete && (
+                          <DeleteMenuItem onClick={() => dispatch(deleteStage(id))}>
+                            {formatMessage({
+                              id: 'Settings.review-workflows.stage.delete',
+                              defaultMessage: 'Delete',
+                            })}
+                          </DeleteMenuItem>
+                        )}
+                      </Menu.SubRoot>
+                    </Menu.Content>
+                  </Menu.Root>
 
                   {canUpdate && (
                     <IconButton
@@ -315,10 +393,140 @@ export function Stage({
                   })}
                 </SingleSelect>
               </GridItem>
+
+              <GridItem col={6}>
+                {filteredRoles.length === 0 ? (
+                  <NotAllowedInput
+                    description={{
+                      id: 'Settings.review-workflows.stage.permissions.noPermissions.description',
+                      defaultMessage: 'You don’t have the permission to see roles',
+                    }}
+                    intlLabel={{
+                      id: 'Settings.review-workflows.stage.permissions.label',
+                      defaultMessage: 'Roles that can change this stage',
+                    }}
+                    name={permissionsField.name}
+                  />
+                ) : (
+                  <Flex alignItems="flex-end" gap={3}>
+                    <PermissionWrapper grow={1}>
+                      <MultiSelect
+                        {...permissionsField}
+                        disabled={!canUpdate}
+                        error={permissionsMeta.error ?? false}
+                        id={permissionsField.name}
+                        label={formatMessage({
+                          id: 'Settings.review-workflows.stage.permissions.label',
+                          defaultMessage: 'Roles that can change this stage',
+                        })}
+                        onChange={(values) => {
+                          // Because the select components expects strings for values, but
+                          // the yup schema validates we are sending full permission objects to the API,
+                          // we must coerce the string value back to an object
+                          const permissions = values.map((value) => ({
+                            role: parseInt(value, 10),
+                            action: 'admin::review-workflows.stage.transition',
+                          }));
+
+                          permissionsHelper.setValue(permissions);
+                          dispatch(updateStage(id, { permissions }));
+                        }}
+                        placeholder={formatMessage({
+                          id: 'Settings.review-workflows.stage.permissions.placeholder',
+                          defaultMessage: 'Select a role',
+                        })}
+                        required
+                        // The Select component expects strings for values
+                        value={(permissionsField.value ?? []).map(
+                          (permission) => `${permission.role}`
+                        )}
+                        withTags
+                      >
+                        {[
+                          {
+                            label: formatMessage({
+                              id: 'Settings.review-workflows.stage.permissions.allRoles.label',
+                              defaultMessage: 'All roles',
+                            }),
+
+                            children: filteredRoles.map((role) => ({
+                              value: `${role.id}`,
+                              label: role.name,
+                            })),
+                          },
+                        ].map((role) => {
+                          if ('children' in role) {
+                            return (
+                              <MultiSelectGroup
+                                key={role.label}
+                                label={role.label}
+                                values={role.children.map((child) => child.value)}
+                              >
+                                {role.children.map((role) => {
+                                  return (
+                                    <NestedOption key={role.value} value={role.value}>
+                                      {role.label}
+                                    </NestedOption>
+                                  );
+                                })}
+                              </MultiSelectGroup>
+                            );
+                          }
+
+                          return (
+                            <MultiSelectOption key={role.value} value={role.value}>
+                              {role.label}
+                            </MultiSelectOption>
+                          );
+                        })}
+                      </MultiSelect>
+                    </PermissionWrapper>
+
+                    <ApplyToAllStages
+                      disabled={!canUpdate}
+                      size="L"
+                      type="button"
+                      variant="secondary"
+                      onClick={() => handleApplyPermissionsToAllStages(permissionsField.value)}
+                    >
+                      {formatMessage({
+                        id: 'Settings.review-workflows.stage.permissions.apply.label',
+                        defaultMessage: 'Apply to all stages',
+                      })}
+                    </ApplyToAllStages>
+                  </Flex>
+                )}
+              </GridItem>
             </Grid>
           </AccordionContent>
         </Accordion>
       )}
+
+      <ConfirmDialog.Root
+        isOpen={isApplyAllConfirmationOpen}
+        onToggleDialog={() => setIsApplyAllConfirmationOpen(false)}
+        onConfirm={() => {
+          dispatch(updateStages({ permissions: permissionsField.value }));
+          setIsApplyAllConfirmationOpen(false);
+          toggleNotification({
+            type: 'success',
+            message: formatMessage({
+              id: 'Settings.review-workflows.page.edit.confirm.stages.permissions.copy.success',
+              defaultMessage: 'Applied roles to all other stages of the workflow',
+            }),
+          });
+        }}
+      >
+        <ConfirmDialog.Body>
+          <Typography textAlign="center" variant="omega">
+            {formatMessage({
+              id: 'Settings.review-workflows.page.edit.confirm.stages.permissions.copy',
+              defaultMessage:
+                'Roles that can change that stage will be applied to all the other stages.',
+            })}
+          </Typography>
+        </ConfirmDialog.Body>
+      </ConfirmDialog.Root>
     </Box>
   );
 }

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

@@ -13,10 +13,11 @@ import { useCollator } from '@strapi/helper-plugin';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { updateWorkflow } from '../../actions';
+import { selectContentTypes, selectCurrentWorkflow, selectWorkflows } from '../../selectors';
 
 const NestedOption = styled(MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
@@ -26,14 +27,12 @@ const ContentTypeTakeNotice = styled(Typography)`
   font-style: italic;
 `;
 
-export function WorkflowAttributes({
-  canUpdate,
-  contentTypes: { collectionTypes, singleTypes },
-  currentWorkflow,
-  workflows,
-}) {
+export function WorkflowAttributes({ canUpdate }) {
   const { formatMessage, locale } = useIntl();
   const dispatch = useDispatch();
+  const { collectionTypes, singleTypes } = useSelector(selectContentTypes);
+  const currentWorkflow = useSelector(selectCurrentWorkflow);
+  const workflows = useSelector(selectWorkflows);
   const [nameField, nameMeta, nameHelper] = useField('name');
   const [contentTypesField, contentTypesMeta, contentTypesHelper] = useField('contentTypes');
   const formatter = useCollator(locale, {
@@ -97,7 +96,7 @@ export function WorkflowAttributes({
                       id: 'Settings.review-workflows.workflow.contentTypes.collectionTypes.label',
                       defaultMessage: 'Collection Types',
                     }),
-                    children: collectionTypes
+                    children: [...collectionTypes]
                       .sort((a, b) => formatter.compare(a.info.displayName, b.info.displayName))
                       .map((contentType) => ({
                         label: contentType.info.displayName,
@@ -114,7 +113,7 @@ export function WorkflowAttributes({
                       id: 'Settings.review-workflows.workflow.contentTypes.singleTypes.label',
                       defaultMessage: 'Single Types',
                     }),
-                    children: singleTypes.map((contentType) => ({
+                    children: [...singleTypes].map((contentType) => ({
                       label: contentType.info.displayName,
                       value: contentType.uid,
                     })),
@@ -178,24 +177,10 @@ export function WorkflowAttributes({
   );
 }
 
-const ContentTypeType = PropTypes.shape({
-  uid: PropTypes.string.isRequired,
-  info: PropTypes.shape({
-    displayName: PropTypes.string.isRequired,
-  }).isRequired,
-});
-
 WorkflowAttributes.defaultProps = {
   canUpdate: true,
-  currentWorkflow: undefined,
 };
 
 WorkflowAttributes.propTypes = {
   canUpdate: PropTypes.bool,
-  contentTypes: PropTypes.shape({
-    collectionTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
-    singleTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
-  }).isRequired,
-  currentWorkflow: PropTypes.object,
-  workflows: PropTypes.array.isRequired,
 };

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

@@ -3,10 +3,16 @@ import { lightTheme } from '@strapi/design-system';
 export const REDUX_NAMESPACE = 'settings_review-workflows';
 
 export const ACTION_RESET_WORKFLOW = `Settings/Review_Workflows/RESET_WORKFLOW`;
+export const ACTION_SET_CONTENT_TYPES = `Settings/Review_Workflows/SET_CONTENT_TYPES`;
+export const ACTION_SET_IS_LOADING = `Settings/Review_Workflows/SET_IS_LOADING`;
+export const ACTION_SET_ROLES = `Settings/Review_Workflows/SET_ROLES`;
 export const ACTION_SET_WORKFLOW = `Settings/Review_Workflows/SET_WORKFLOW`;
+export const ACTION_SET_WORKFLOWS = `Settings/Review_Workflows/SET_WORKFLOWS`;
 export const ACTION_DELETE_STAGE = `Settings/Review_Workflows/WORKFLOW_DELETE_STAGE`;
 export const ACTION_ADD_STAGE = `Settings/Review_Workflows/WORKFLOW_ADD_STAGE`;
+export const ACTION_CLONE_STAGE = `Settings/Review_Workflows/WORKFLOW_CLONE_STAGE`;
 export const ACTION_UPDATE_STAGE = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE`;
+export const ACTION_UPDATE_STAGES = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGES`;
 export const ACTION_UPDATE_STAGE_POSITION = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE_POSITION`;
 export const ACTION_UPDATE_WORKFLOW = `Settings/Review_Workflows/WORKFLOW_UPDATE`;
 

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows.js

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { useFetchClient } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 
@@ -20,18 +22,26 @@ export function useReviewWorkflows(params = {}) {
     }
   );
 
-  let workflows = [];
+  // the return value needs to be memoized, because intantiating
+  // an empty array as default value would lead to an unstable return
+  // value, which later on triggers infinite loops if used in the
+  // dependency arrays of other hooks
+
+  const workflows = React.useMemo(() => {
+    if (id && data?.data) {
+      return [data.data];
+    }
+    if (Array.isArray(data?.data)) {
+      return data.data;
+    }
 
-  if (id && data?.data) {
-    workflows = [data.data];
-  } else if (Array.isArray(data?.data)) {
-    workflows = data.data;
-  }
+    return [];
+  }, [data?.data, id]);
 
   return {
     // meta contains e.g. the total of all workflows. we can not use
     // the pagination object here, because the list is not paginated.
-    meta: data?.meta ?? {},
+    meta: React.useMemo(() => data?.meta ?? {}, [data?.meta]),
     workflows,
     isLoading,
     status,

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflowsStages.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+
+export function useReviewWorkflowsStages({ id, layout } = {}, queryOptions = {}) {
+  const { kind, uid } = layout;
+  const slug = kind === 'collectionType' ? 'collection-types' : 'single-types';
+
+  const { get } = useFetchClient();
+
+  const { data, isLoading, refetch } = useQuery(
+    ['content-manager', slug, layout.uid, id, 'stages'],
+    async () => {
+      const { data } = await get(`/admin/content-manager/${slug}/${uid}/${id}/stages`);
+
+      return data;
+    },
+    queryOptions
+  );
+
+  // these return values need to be memoized, because the default value
+  // would lead to infinite rendering loops when used in a dependency array
+  // on an effect
+  const meta = React.useMemo(() => data?.meta ?? {}, [data?.meta]);
+  const stages = React.useMemo(() => data?.data ?? [], [data?.data]);
+
+  return {
+    // meta contains e.g. the total of all workflows. we can not use
+    // the pagination object here, because the list is not paginated.
+    meta,
+    stages,
+    isLoading,
+    refetch,
+  };
+}

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

@@ -15,10 +15,18 @@ import { useMutation } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
+import { useAdminRoles } from '../../../../../../../../admin/src/hooks/useAdminRoles';
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
 import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
-import { addStage, resetWorkflow } from '../../actions';
+import {
+  addStage,
+  resetWorkflow,
+  setContentTypes,
+  setIsLoading,
+  setRoles,
+  setWorkflows,
+} from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
 import { Stages } from '../../components/Stages';
@@ -29,7 +37,13 @@ import {
   REDUX_NAMESPACE,
 } from '../../constants';
 import { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
-import { reducer, initialState } from '../../reducer';
+import { reducer } from '../../reducer';
+import {
+  selectIsLoading,
+  selectIsWorkflowDirty,
+  selectCurrentWorkflow,
+  selectRoles,
+} from '../../selectors';
 import { validateWorkflow } from '../../utils/validateWorkflow';
 
 export function ReviewWorkflowsCreateView() {
@@ -39,13 +53,15 @@ export function ReviewWorkflowsCreateView() {
   const { formatAPIError } = useAPIErrorHandler();
   const dispatch = useDispatch();
   const toggleNotification = useNotification();
-  const { collectionTypes, singleTypes, isLoading: isLoadingModels } = useContentTypes();
-  const { isLoading: isWorkflowLoading, meta, workflows } = useReviewWorkflows();
-  const {
-    clientState: {
-      currentWorkflow: { data: currentWorkflow, isDirty: currentWorkflowIsDirty },
-    },
-  } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const { collectionTypes, singleTypes, isLoading: isLoadingContentTypes } = useContentTypes();
+  const { isLoading: isLoadingWorkflow, meta, workflows } = useReviewWorkflows();
+  const { isLoading: isLoadingRoles, roles: serverRoles } = useAdminRoles(undefined, {
+    retry: false,
+  });
+  const isLoading = useSelector(selectIsLoading);
+  const currentWorkflowIsDirty = useSelector(selectIsWorkflowDirty);
+  const currentWorkflow = useSelector(selectCurrentWorkflow);
+  const roles = useSelector(selectRoles);
   const [showLimitModal, setShowLimitModal] = React.useState(false);
   const { isLoading: isLicenseLoading, getFeature } = useLicenseLimits();
   const [initialErrors, setInitialErrors] = React.useState(null);
@@ -54,7 +70,7 @@ export function ReviewWorkflowsCreateView() {
   const limits = getFeature('review-workflows');
   const contentTypesFromOtherWorkflows = workflows.flatMap((workflow) => workflow.contentTypes);
 
-  const { mutateAsync, isLoading } = useMutation(
+  const { mutateAsync, isLoading: isLoadingMutation } = useMutation(
     async ({ workflow }) => {
       const {
         data: { data },
@@ -167,13 +183,36 @@ export function ReviewWorkflowsCreateView() {
   React.useEffect(() => {
     dispatch(resetWorkflow());
 
+    if (!isLoadingWorkflow) {
+      dispatch(setWorkflows({ workflows }));
+    }
+
+    if (!isLoadingContentTypes) {
+      dispatch(setContentTypes({ collectionTypes, singleTypes }));
+    }
+
+    if (!isLoadingRoles) {
+      dispatch(setRoles(serverRoles));
+    }
+
+    dispatch(setIsLoading(isLoadingContentTypes || isLoadingRoles));
+
     // Create an empty default stage
     dispatch(
       addStage({
         name: '',
       })
     );
-  }, [dispatch]);
+  }, [
+    collectionTypes,
+    dispatch,
+    isLoadingContentTypes,
+    isLoadingRoles,
+    isLoadingWorkflow,
+    serverRoles,
+    singleTypes,
+    workflows,
+  ]);
 
   /**
    * If the current license has a limit:
@@ -189,7 +228,7 @@ export function ReviewWorkflowsCreateView() {
    */
 
   React.useEffect(() => {
-    if (!isWorkflowLoading && !isLicenseLoading) {
+    if (!isLoadingWorkflow && !isLicenseLoading) {
       if (
         limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
         meta?.workflowsTotal >= parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
@@ -205,12 +244,25 @@ export function ReviewWorkflowsCreateView() {
     }
   }, [
     isLicenseLoading,
-    isWorkflowLoading,
+    isLoadingWorkflow,
     limits,
     meta?.workflowsTotal,
     currentWorkflow.stages.length,
   ]);
 
+  React.useEffect(() => {
+    if (!isLoading && roles.length === 0) {
+      toggleNotification({
+        blockTransition: true,
+        type: 'warning',
+        message: formatMessage({
+          id: 'Settings.review-workflows.stage.permissions.noPermissions.description',
+          defaultMessage: 'You don’t have the permission to see roles',
+        }),
+      });
+    }
+  }, [formatMessage, isLoading, roles, toggleNotification]);
+
   return (
     <>
       <Layout.DragLayerRendered />
@@ -225,7 +277,7 @@ export function ReviewWorkflowsCreateView() {
                 type="submit"
                 size="M"
                 disabled={!currentWorkflowIsDirty}
-                isLoading={isLoading}
+                isLoading={isLoadingMutation}
               >
                 {formatMessage({
                   id: 'global.save',
@@ -247,7 +299,7 @@ export function ReviewWorkflowsCreateView() {
           />
           <Layout.Root>
             <Flex alignItems="stretch" direction="column" gap={7}>
-              {isLoadingModels ? (
+              {isLoading ? (
                 <Loader>
                   {formatMessage({
                     id: 'Settings.review-workflows.page.isLoading',
@@ -256,10 +308,7 @@ export function ReviewWorkflowsCreateView() {
                 </Loader>
               ) : (
                 <Flex alignItems="stretch" direction="column" gap={7}>
-                  <WorkflowAttributes
-                    contentTypes={{ collectionTypes, singleTypes }}
-                    workflows={workflows}
-                  />
+                  <WorkflowAttributes />
                   <Stages stages={formik.values?.stages} />
                 </Flex>
               )}