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

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

@@ -1,15 +1,37 @@
 import * as React from 'react';
 
-import { Grid, GridItem, MultiSelectNested, TextInput } from '@strapi/design-system';
+import {
+  Grid,
+  GridItem,
+  MultiSelect,
+  MultiSelectGroup,
+  MultiSelectOption,
+  TextInput,
+  Typography,
+} from '@strapi/design-system';
 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 styled from 'styled-components';
 
 import { updateWorkflow } from '../../actions';
 
-export function WorkflowAttributes({ contentTypes: { collectionTypes, singleTypes } }) {
+const NestedOption = styled(MultiSelectOption)`
+  padding-left: ${({ theme }) => theme.spaces[7]};
+`;
+
+const ContentTypeTakeNotice = styled(Typography)`
+  font-style: italic;
+`;
+
+export function WorkflowAttributes({
+  canUpdate,
+  contentTypes: { collectionTypes, singleTypes },
+  currentWorkflow,
+  workflows,
+}) {
   const { formatMessage, locale } = useIntl();
   const dispatch = useDispatch();
   const [nameField, nameMeta, nameHelper] = useField('name');
@@ -24,6 +46,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',
@@ -38,7 +61,7 @@ export function WorkflowAttributes({ contentTypes: { collectionTypes, singleType
       </GridItem>
 
       <GridItem col={6}>
-        <MultiSelectNested
+        <MultiSelect
           {...contentTypesField}
           customizeContent={(value) =>
             formatMessage(
@@ -50,6 +73,7 @@ export function WorkflowAttributes({ contentTypes: { collectionTypes, singleType
               { count: value.length }
             )
           }
+          disabled={!canUpdate}
           error={contentTypesMeta.error ?? false}
           id={contentTypesField.name}
           label={formatMessage({
@@ -60,36 +84,95 @@ export function WorkflowAttributes({ contentTypes: { collectionTypes, singleType
             dispatch(updateWorkflow({ contentTypes: values }));
             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,
-                })),
-            },
-
-            {
-              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',
             defaultMessage: 'Select',
           })}
-        />
+        >
+          {[
+            ...(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,
+                      })),
+                  },
+                ]
+              : []),
+
+            ...(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,
+                    })),
+                  },
+                ]
+              : []),
+          ].map((opt) => {
+            if ('children' in opt) {
+              return (
+                <MultiSelectGroup
+                  key={opt.label}
+                  label={opt.label}
+                  values={opt.children.map((child) => child.value.toString())}
+                >
+                  {opt.children.map((child) => {
+                    const { name: assignedWorkflowName } =
+                      workflows.find(
+                        (workflow) =>
+                          ((currentWorkflow && workflow.id !== currentWorkflow.id) ||
+                            !currentWorkflow) &&
+                          workflow.contentTypes.includes(child.value)
+                      ) ?? {};
+
+                    return (
+                      <NestedOption key={child.value} value={child.value}>
+                        {formatMessage(
+                          {
+                            id: 'Settings.review-workflows.workflow.contentTypes.assigned.notice',
+                            defaultMessage:
+                              '{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}',
+                          },
+                          {
+                            label: child.label,
+                            name: assignedWorkflowName,
+                            em: (...children) => (
+                              <Typography as="em" fontWeight="bold">
+                                {children}
+                              </Typography>
+                            ),
+                            i: (...children) => (
+                              <ContentTypeTakeNotice>{children}</ContentTypeTakeNotice>
+                            ),
+                          }
+                        )}
+                      </NestedOption>
+                    );
+                  })}
+                </MultiSelectGroup>
+              );
+            }
+
+            return (
+              <MultiSelectOption key={opt.value} value={opt.value}>
+                {opt.label}
+              </MultiSelectOption>
+            );
+          })}
+        </MultiSelect>
       </GridItem>
     </Grid>
   );
@@ -102,9 +185,17 @@ const ContentTypeType = PropTypes.shape({
   }).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

@@ -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,7 +1,13 @@
 import * as React from 'react';
 
-import { Button, Flex, Loader } from '@strapi/design-system';
-import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { Button, Flex, Loader, Typography } from '@strapi/design-system';
+import {
+  ConfirmDialog,
+  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 +18,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,17 +40,25 @@ 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 { isLoading: isWorkflowLoading, meta, workflows } = useReviewWorkflows();
   const {
     clientState: {
       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 [savePrompts, setSavePrompts] = React.useState({});
+
+  const limits = getFeature('review-workflows');
+  const contentTypesFromOtherWorkflows = workflows.flatMap((workflow) => workflow.contentTypes);
 
   const { mutateAsync, isLoading } = useMutation(
     async ({ workflow }) => {
@@ -65,6 +84,8 @@ export function ReviewWorkflowsCreateView() {
   );
 
   const submitForm = async () => {
+    setSavePrompts({});
+
     try {
       const workflow = await mutateAsync({ workflow: currentWorkflow });
 
@@ -72,20 +93,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,31 +106,44 @@ export function ReviewWorkflowsCreateView() {
             return acc;
           }, {})
         );
-      } else {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
       }
 
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
       return null;
     }
   };
 
-  const limits = getFeature('review-workflows');
+  const handleConfirmDeleteDialog = async () => {
+    await submitForm();
+  };
+
+  const handleConfirmClose = () => {
+    setSavePrompts({});
+  };
 
   const formik = useFormik({
     enableReinitialize: true,
     initialErrors,
     initialValues: currentWorkflow,
     async onSubmit() {
+      const isContentTypeReassignment = currentWorkflow.contentTypes.some((contentType) =>
+        contentTypesFromOtherWorkflows.includes(contentType)
+      );
+
       /**
        * 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.
        */
 
-      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,10 +152,13 @@ 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 if (isContentTypeReassignment) {
+        setSavePrompts((prev) => ({ ...prev, hasReassignedContentTypes: true }));
       } else {
         submitForm();
       }
@@ -143,6 +172,13 @@ export function ReviewWorkflowsCreateView() {
 
   React.useEffect(() => {
     dispatch(resetWorkflow());
+
+    // Create an empty default stage
+    dispatch(
+      addStage({
+        name: '',
+      })
+    );
   }, [dispatch]);
 
   /**
@@ -160,11 +196,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 +212,7 @@ export function ReviewWorkflowsCreateView() {
   }, [
     isLicenseLoading,
     isWorkflowLoading,
-    limits.stagesPerWorkflow,
-    limits?.workflows,
+    limits,
     meta?.workflowsTotal,
     currentWorkflow.stages.length,
   ]);
@@ -191,7 +230,7 @@ export function ReviewWorkflowsCreateView() {
                 startIcon={<Check />}
                 type="submit"
                 size="M"
-                disabled={!currentWorkflowIsDirty}
+                disabled={!currentWorkflowIsDirty || !canCreate}
                 isLoading={isLoading}
               >
                 {formatMessage({
@@ -223,7 +262,10 @@ export function ReviewWorkflowsCreateView() {
                 </Loader>
               ) : (
                 <Flex alignItems="stretch" direction="column" gap={7}>
-                  <WorkflowAttributes contentTypes={{ collectionTypes, singleTypes }} />
+                  <WorkflowAttributes
+                    contentTypes={{ collectionTypes, singleTypes }}
+                    workflows={workflows}
+                  />
                   <Stages stages={formik.values?.stages} />
                 </Flex>
               )}
@@ -232,6 +274,41 @@ export function ReviewWorkflowsCreateView() {
         </Form>
       </FormikProvider>
 
+      <ConfirmDialog.Root
+        isConfirmButtonLoading={isLoading}
+        isOpen={Object.keys(savePrompts).length > 0}
+        onToggleDialog={handleConfirmClose}
+        onConfirm={handleConfirmDeleteDialog}
+      >
+        <ConfirmDialog.Body>
+          <Flex direction="column" gap={5}>
+            {savePrompts.hasReassignedContentTypes && (
+              <Typography textAlign="center" variant="omega">
+                {formatMessage(
+                  {
+                    id: 'Settings.review-workflows.page.delete.confirm.contentType.body',
+                    defaultMessage:
+                      '{count} {count, plural, one {content-type} other {content-types}} {count, plural, one {is} other {are}} already mapped to {count, plural, one {another workflow} other {other workflows}}. If you save changes, {count, plural, one {this} other {these}} {count, plural, one {content-type} other {{count} content-types}} will no more be mapped to the {count, plural, one {another workflow} other {other workflows}} and all corresponding information will be removed.',
+                  },
+                  {
+                    count: contentTypesFromOtherWorkflows.filter((contentType) =>
+                      currentWorkflow.contentTypes.includes(contentType)
+                    ).length,
+                  }
+                )}
+              </Typography>
+            )}
+
+            <Typography textAlign="center" variant="omega">
+              {formatMessage({
+                id: 'Settings.review-workflows.page.delete.confirm.confirm',
+                defaultMessage: 'Are you sure you want to save?',
+              })}
+            </Typography>
+          </Flex>
+        </ConfirmDialog.Body>
+      </ConfirmDialog.Root>
+
       <LimitsModal.Root
         isOpen={showLimitModal === 'workflow'}
         onClose={() => setShowLimitModal(false)}

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>
   );
 }