@strapi/admin 4.11.4 → 4.12.0-beta.1

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

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

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { CheckPagePermissions } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
+
+export function ProtectedPage({ children }) {
+  const permissions = useSelector(selectAdminPermissions);
+
+  return (
+    <CheckPagePermissions permissions={permissions.settings.users.main}>
+      {children}
+    </CheckPagePermissions>
+  );
+}
+
+ProtectedPage.propTypes = {
+  children: PropTypes.node.isRequired,
+};

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

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

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

@@ -141,8 +141,8 @@ export function Stage({
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();
   const [isOpen, setIsOpen] = React.useState(isOpenDefault);
-  const [nameField, nameMeta] = useField(`stages.${index}.name`);
-  const [colorField, colorMeta] = useField(`stages.${index}.color`);
+  const [nameField, nameMeta, nameHelper] = useField(`stages.${index}.name`);
+  const [colorField, colorMeta, colorHelper] = useField(`stages.${index}.color`);
   const [{ handlerId, isDragging, handleKeyDown }, stageRef, dropRef, dragRef, dragPreviewRef] =
     useDragAndDrop(canReorder, {
       index,
@@ -174,7 +174,7 @@ export function Stage({
     dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index]);
 
-  const { themeColorName } = colorField.value ? getStageColorByHex(colorField.value) : {};
+  const { themeColorName } = getStageColorByHex(colorField.value) ?? {};
 
   return (
     <Box ref={composedRef}>
@@ -246,7 +246,7 @@ export function Stage({
                   })}
                   error={nameMeta.error ?? false}
                   onChange={(event) => {
-                    nameField.onChange(event);
+                    nameHelper.setValue(event.target.value);
                     dispatch(updateStage(id, { name: event.target.value }));
                   }}
                   required
@@ -263,7 +263,7 @@ export function Stage({
                     defaultMessage: 'Color',
                   })}
                   onChange={(value) => {
-                    colorField.onChange({ target: { value } });
+                    colorHelper.setValue(value);
                     dispatch(updateStage(id, { color: value }));
                   }}
                   value={colorField.value.toUpperCase()}

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+
+import { Grid, GridItem, MultiSelectNested, TextInput } 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 { updateWorkflow } from '../../actions';
+
+export function WorkflowAttributes({ contentTypes: { collectionTypes, singleTypes } }) {
+  const { formatMessage, locale } = useIntl();
+  const dispatch = useDispatch();
+  const [nameField, nameMeta, nameHelper] = useField('name');
+  const [contentTypesField, contentTypesMeta, contentTypesHelper] = useField('contentTypes');
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+
+  return (
+    <Grid background="neutral0" hasRadius gap={4} padding={6} shadow="tableShadow">
+      <GridItem col={6}>
+        <TextInput
+          {...nameField}
+          id={nameField.name}
+          label={formatMessage({
+            id: 'Settings.review-workflows.workflow.name.label',
+            defaultMessage: 'Workflow Name',
+          })}
+          error={nameMeta.error ?? false}
+          onChange={(event) => {
+            dispatch(updateWorkflow({ name: event.target.value }));
+            nameHelper.setValue(event.target.value);
+          }}
+          required
+        />
+      </GridItem>
+
+      <GridItem col={6}>
+        <MultiSelectNested
+          {...contentTypesField}
+          customizeContent={(value) =>
+            formatMessage(
+              {
+                id: 'Settings.review-workflows.workflow.contentTypes.displayValue',
+                defaultMessage:
+                  '{count} {count, plural, one {content type} other {content types}} selected',
+              },
+              { count: value.length }
+            )
+          }
+          error={contentTypesMeta.error ?? false}
+          id={contentTypesField.name}
+          label={formatMessage({
+            id: 'Settings.review-workflows.workflow.contentTypes.label',
+            defaultMessage: 'Associated to',
+          })}
+          onChange={(values) => {
+            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',
+          })}
+        />
+      </GridItem>
+    </Grid>
+  );
+}
+
+const ContentTypeType = PropTypes.shape({
+  uid: PropTypes.string.isRequired,
+  info: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+  }).isRequired,
+});
+
+WorkflowAttributes.propTypes = {
+  contentTypes: PropTypes.shape({
+    collectionTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
+    singleTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
+  }).isRequired,
+};

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

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

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

@@ -2,11 +2,13 @@ import { lightTheme } from '@strapi/design-system';
 
 export const REDUX_NAMESPACE = 'settings_review-workflows';
 
-export const ACTION_SET_WORKFLOWS = `Settings/Review_Workflows/SET_WORKFLOWS`;
+export const ACTION_RESET_WORKFLOW = `Settings/Review_Workflows/RESET_WORKFLOW`;
+export const ACTION_SET_WORKFLOW = `Settings/Review_Workflows/SET_WORKFLOW`;
 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_UPDATE_STAGE = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE`;
 export const ACTION_UPDATE_STAGE_POSITION = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE_POSITION`;
+export const ACTION_UPDATE_WORKFLOW = `Settings/Review_Workflows/WORKFLOW_UPDATE`;
 
 export const STAGE_COLORS = {
   primary600: 'Blue',

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

@@ -1,43 +1,37 @@
 import { useFetchClient } from '@strapi/helper-plugin';
-import { stringify } from 'qs';
 import { useQuery } from 'react-query';
 
 export function useReviewWorkflows(params = {}) {
+  const { get } = useFetchClient();
+
   const { id = '', ...queryParams } = params;
   const defaultQueryParams = {
     populate: 'stages',
   };
 
-  const { get } = useFetchClient();
-  const queryString = stringify({ ...defaultQueryParams, ...queryParams }, { encode: false });
-
   const { data, isLoading, status, refetch } = useQuery(
     ['review-workflows', 'workflows', id],
     async () => {
-      try {
-        const {
-          data: { data },
-        } = await get(
-          `/admin/review-workflows/workflows/${id}${queryString ? `?${queryString}` : ''}`
-        );
+      const res = await get(`/admin/review-workflows/workflows/${id}`, {
+        params: { ...defaultQueryParams, ...queryParams },
+      });
 
-        return data;
-      } catch (err) {
-        // silence
-        return null;
-      }
+      return res.data;
     }
   );
 
   let workflows = [];
 
-  if (id && data) {
-    workflows = [data];
-  } else if (Array.isArray(data)) {
-    workflows = data;
+  if (id && data?.data) {
+    workflows = [data.data];
+  } else if (Array.isArray(data?.data)) {
+    workflows = 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: data?.meta ?? {},
     workflows,
     isLoading,
     status,

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

@@ -0,0 +1,246 @@
+import * as React from 'react';
+
+import { Button, Flex, Loader } from '@strapi/design-system';
+import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { Check } from '@strapi/icons';
+import { useFormik, Form, FormikProvider } from 'formik';
+import { useIntl } from 'react-intl';
+import { useMutation } from 'react-query';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+
+import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
+import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
+import { useLicenseLimits } from '../../../../../../hooks';
+import { 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 { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
+import { reducer, initialState } from '../../reducer';
+import { getWorkflowValidationSchema } from '../../utils/getWorkflowValidationSchema';
+
+export function ReviewWorkflowsCreateView() {
+  const { formatMessage } = useIntl();
+  const { post } = useFetchClient();
+  const { push } = useHistory();
+  const { formatAPIError } = useAPIErrorHandler();
+  const dispatch = useDispatch();
+  const toggleNotification = useNotification();
+  const { collectionTypes, singleTypes, isLoading: isLoadingModels } = useContentTypes();
+  const {
+    clientState: {
+      currentWorkflow: { data: currentWorkflow, isDirty: currentWorkflowIsDirty },
+    },
+  } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const [showLimitModal, setShowLimitModal] = React.useState(false);
+  const { isLoading: isLicenseLoading, getFeature } = useLicenseLimits();
+  const { meta, isLoading: isWorkflowLoading } = useReviewWorkflows();
+
+  const { mutateAsync, isLoading } = useMutation(
+    async ({ workflow }) => {
+      const {
+        data: { data },
+      } = await post(`/admin/review-workflows/workflows`, {
+        data: workflow,
+      });
+
+      return data;
+    },
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: {
+            id: 'Settings.review-workflows.create.page.notification.success',
+            defaultMessage: 'Workflow successfully created',
+          },
+        });
+      },
+    }
+  );
+
+  const submitForm = async () => {
+    try {
+      const workflow = await mutateAsync({ workflow: currentWorkflow });
+
+      push(`/settings/review-workflows/${workflow.id}`);
+
+      return workflow;
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
+      return null;
+    }
+  };
+
+  const limits = getFeature('review-workflows');
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: currentWorkflow,
+    async onSubmit() {
+      /**
+       * 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)) {
+        setShowLimitModal('workflow');
+
+        /**
+         * If the current license has a limit, check if the total count of stages
+         * exceeds that limit and display the limits modal instead of sending the
+         * update, because it would throw an API error.
+         */
+      } else if (
+        limits?.stagesPerWorkflow &&
+        currentWorkflow.stages.length >= parseInt(limits.stagesPerWorkflow, 10)
+      ) {
+        setShowLimitModal('stage');
+      } else {
+        submitForm();
+      }
+    },
+    validationSchema: getWorkflowValidationSchema({ formatMessage }),
+  });
+
+  useInjectReducer(REDUX_NAMESPACE, reducer);
+
+  React.useEffect(() => {
+    dispatch(resetWorkflow());
+  }, [dispatch]);
+
+  /**
+   * If the current license has a limit:
+   * check if the total count of workflows or stages exceeds that limit and display
+   * the limits modal on page load. It can be closed by the user, but the
+   * API will throw an error in case they try to create a new workflow or update the
+   * stages.
+   *
+   * If the current license does not have a limit (e.g. offline license):
+   * do nothing (for now). In case they are trying to create the 201st workflow/ stage
+   * the API will throw an error.
+   *
+   */
+
+  React.useEffect(() => {
+    if (!isWorkflowLoading && !isLicenseLoading) {
+      if (limits.workflows && meta?.workflowsTotal >= parseInt(limits.workflows, 10)) {
+        setShowLimitModal('workflow');
+      } else if (
+        limits.stagesPerWorkflow &&
+        currentWorkflow.stages.length >= parseInt(limits.stagesPerWorkflow, 10)
+      ) {
+        setShowLimitModal('stage');
+      }
+    }
+  }, [
+    isLicenseLoading,
+    isWorkflowLoading,
+    limits.stagesPerWorkflow,
+    limits?.workflows,
+    meta?.workflowsTotal,
+    currentWorkflow.stages.length,
+  ]);
+
+  return (
+    <>
+      <Layout.DragLayerRendered />
+
+      <FormikProvider value={formik}>
+        <Form onSubmit={formik.handleSubmit}>
+          <Layout.Header
+            navigationAction={<Layout.Back href="/settings/review-workflows" />}
+            primaryAction={
+              <Button
+                startIcon={<Check />}
+                type="submit"
+                size="M"
+                disabled={!currentWorkflowIsDirty}
+                isLoading={isLoading}
+              >
+                {formatMessage({
+                  id: 'global.save',
+                  defaultMessage: 'Save',
+                })}
+              </Button>
+            }
+            title={formatMessage({
+              id: 'Settings.review-workflows.create.page.title',
+              defaultMessage: 'Create Review Workflow',
+            })}
+            subtitle={formatMessage(
+              {
+                id: 'Settings.review-workflows.page.subtitle',
+                defaultMessage: '{count, plural, one {# stage} other {# stages}}',
+              },
+              { count: currentWorkflow?.stages?.length ?? 0 }
+            )}
+          />
+          <Layout.Root>
+            <Flex alignItems="stretch" direction="column" gap={7}>
+              {isLoadingModels ? (
+                <Loader>
+                  {formatMessage({
+                    id: 'Settings.review-workflows.page.isLoading',
+                    defaultMessage: 'Workflow is loading',
+                  })}
+                </Loader>
+              ) : (
+                <Flex alignItems="stretch" direction="column" gap={7}>
+                  <WorkflowAttributes contentTypes={{ collectionTypes, singleTypes }} />
+                  <Stages stages={formik.values?.stages} />
+                </Flex>
+              )}
+            </Flex>
+          </Layout.Root>
+        </Form>
+      </FormikProvider>
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'workflow'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'Settings.review-workflows.create.page.workflows.limit.title',
+            defaultMessage: 'You’ve reached the limit of workflows in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'Settings.review-workflows.create.page.workflows.limit.body',
+            defaultMessage: 'Delete a workflow or contact Sales to enable more workflows.',
+          })}
+        </LimitsModal.Body>
+      </LimitsModal.Root>
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'stage'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'Settings.review-workflows.create.page.stages.limit.title',
+            defaultMessage: 'You have reached the limit of stages for this workflow in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'Settings.review-workflows.create.page.stages.limit.body',
+            defaultMessage: 'Try deleting some stages or contact Sales to enable more stages.',
+          })}
+        </LimitsModal.Body>
+      </LimitsModal.Root>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { ProtectedPage } from '../../components/ProtectedPage';
+
+import { ReviewWorkflowsCreateView } from './CreateView';
+
+export default function () {
+  return (
+    <ProtectedPage>
+      <ReviewWorkflowsCreateView />
+    </ProtectedPage>
+  );
+}