@strapi/admin 4.11.4 → 4.12.0-beta.1

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

@@ -0,0 +1,287 @@
+import * as React from 'react';
+
+import { Button, Flex, Loader } from '@strapi/design-system';
+import {
+  ConfirmDialog,
+  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 { useSelector, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
+import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
+import { useLicenseLimits } from '../../../../../../hooks';
+import { 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 { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
+import { reducer, initialState } from '../../reducer';
+import { getWorkflowValidationSchema } from '../../utils/getWorkflowValidationSchema';
+
+export function ReviewWorkflowsEditView() {
+  const { workflowId } = useParams();
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+  const { put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const {
+    isLoading: isWorkflowLoading,
+    meta,
+    workflows: [workflow],
+    status: workflowStatus,
+    refetch,
+  } = useReviewWorkflows({ id: workflowId });
+  const { collectionTypes, singleTypes, isLoading: isLoadingModels } = useContentTypes();
+  const {
+    status,
+    clientState: {
+      currentWorkflow: {
+        data: currentWorkflow,
+        isDirty: currentWorkflowIsDirty,
+        hasDeletedServerStages: currentWorkflowHasDeletedServerStages,
+      },
+    },
+  } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = React.useState(false);
+  const { getFeature, isLoading: isLicenseLoading } = useLicenseLimits();
+  const [showLimitModal, setShowLimitModal] = React.useState(false);
+
+  const { mutateAsync, isLoading } = useMutation(
+    async ({ workflow }) => {
+      const {
+        data: { data },
+      } = await put(`/admin/review-workflows/workflows/${workflow.id}`, {
+        data: workflow,
+      });
+
+      return data;
+    },
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+        });
+      },
+    }
+  );
+
+  const updateWorkflow = async (workflow) => {
+    try {
+      const res = await mutateAsync({ workflow });
+
+      return res;
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
+      return null;
+    }
+  };
+
+  const submitForm = async () => {
+    await updateWorkflow(currentWorkflow);
+    await refetch();
+
+    setIsConfirmDeleteDialogOpen(false);
+  };
+
+  const handleConfirmDeleteDialog = async () => {
+    await submitForm();
+  };
+
+  const toggleConfirmDeleteDialog = () => {
+    setIsConfirmDeleteDialogOpen((prev) => !prev);
+  };
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: currentWorkflow,
+    async onSubmit() {
+      if (currentWorkflowHasDeletedServerStages) {
+        setIsConfirmDeleteDialogOpen(true);
+      } else if (limits?.workflows && meta?.workflowCount > parseInt(limits.workflows, 10)) {
+      /**
+       * If the current license has a limit, check if the total count of workflows
+       * exceeds that limit and display the limits modal instead of sending the
+       * update, because it would throw an API error.
+       */
+        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);
+
+  const limits = getFeature('review-workflows');
+
+  React.useEffect(() => {
+    dispatch(setWorkflow({ status: workflowStatus, data: workflow }));
+  }, [workflowStatus, workflow, 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?.workflowCount > parseInt(limits.workflows, 10)) {
+        setShowLimitModal('workflow');
+      } else if (
+        limits?.stagesPerWorkflow &&
+        currentWorkflow.stages.length > parseInt(limits.stagesPerWorkflow, 10)
+      ) {
+        setShowLimitModal('stage');
+      }
+    }
+  }, [
+    currentWorkflow.stages.length,
+    isLicenseLoading,
+    isWorkflowLoading,
+    limits.stagesPerWorkflow,
+    limits.workflows,
+    meta?.workflowCount,
+    meta.workflowsTotal,
+  ]);
+
+  // TODO: redirect back to list-view if workflow is not found?
+
+  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}
+                // if the confirm dialog is open the loading state is on
+                // the confirm button already
+                loading={!isConfirmDeleteDialogOpen && isLoading}
+              >
+                {formatMessage({
+                  id: 'global.save',
+                  defaultMessage: 'Save',
+                })}
+              </Button>
+            }
+            subtitle={formatMessage(
+              {
+                id: 'Settings.review-workflows.page.subtitle',
+                defaultMessage: '{count, plural, one {# stage} other {# stages}}',
+              },
+              { count: currentWorkflow?.stages?.length ?? 0 }
+            )}
+            title={currentWorkflow.name}
+          />
+
+          <Layout.Root>
+            {isLoadingModels || status === 'loading' ? (
+              <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>
+            )}
+          </Layout.Root>
+        </Form>
+      </FormikProvider>
+
+      <ConfirmDialog
+        bodyText={{
+          id: 'Settings.review-workflows.page.delete.confirm.body',
+          defaultMessage:
+            'All entries assigned to deleted stages will be moved to the previous stage. Are you sure you want to save?',
+        }}
+        isConfirmButtonLoading={isLoading}
+        isOpen={isConfirmDeleteDialogOpen}
+        onToggleDialog={toggleConfirmDeleteDialog}
+        onConfirm={handleConfirmDeleteDialog}
+      />
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'workflow'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'Settings.review-workflows.edit.page.workflows.limit.title',
+            defaultMessage: 'You’ve reached the limit of workflows in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'Settings.review-workflows.edit.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.edit.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.edit.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/EditView/index.js

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

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

@@ -0,0 +1,382 @@
+import React from 'react';
+
+import {
+  Flex,
+  IconButton,
+  Loader,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  TFooter,
+  Th,
+  Typography,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import {
+  ConfirmDialog,
+  Link,
+  LinkButton,
+  onRowClick,
+  pxToRem,
+  useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
+  useTracking,
+} from '@strapi/helper-plugin';
+import { Pencil, Plus, Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useMutation } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
+import { useLicenseLimits } from '../../../../../../hooks';
+import * as Layout from '../../components/Layout';
+import * as LimitsModal from '../../components/LimitsModal';
+import { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
+
+const ActionLink = styled(Link)`
+  align-items: center;
+  height: ${pxToRem(32)};
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => `${theme.spaces[2]}}`};
+  width: ${pxToRem(32)};
+
+  svg {
+    height: ${pxToRem(12)};
+    width: ${pxToRem(12)};
+
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+
+export function ReviewWorkflowsListView() {
+  const { formatMessage } = useIntl();
+  const { push } = useHistory();
+  const { collectionTypes, singleTypes, isLoading: isLoadingModels } = useContentTypes();
+  const { meta, workflows, isLoading, refetch } = useReviewWorkflows();
+  const [workflowToDelete, setWorkflowToDelete] = React.useState(null);
+  const [showLimitModal, setShowLimitModal] = React.useState(false);
+  const { del } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const { getFeature, isLoading: isLicenseLoading } = useLicenseLimits();
+  const { trackUsage } = useTracking();
+
+  const limits = getFeature('review-workflows');
+
+  const { mutateAsync, isLoading: isLoadingMutation } = useMutation(
+    async ({ workflowId, stages }) => {
+      const {
+        data: { data },
+      } = await del(`/admin/review-workflows/workflows/${workflowId}`, {
+        data: stages,
+      });
+
+      return data;
+    },
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: { id: 'notification.success.deleted', defaultMessage: 'Deleted' },
+        });
+      },
+    }
+  );
+
+  const getContentTypeDisplayName = (uid) => {
+    const contentType = [...collectionTypes, ...singleTypes].find(
+      (contentType) => contentType.uid === uid
+    );
+
+    return contentType.info.displayName;
+  };
+
+  const handleDeleteWorkflow = (workflowId) => {
+    setWorkflowToDelete(workflowId);
+  };
+
+  const toggleConfirmDeleteDialog = () => {
+    setWorkflowToDelete(null);
+  };
+
+  const handleConfirmDeleteDialog = async () => {
+    try {
+      const res = await mutateAsync({ workflowId: workflowToDelete });
+
+      await refetch();
+      setWorkflowToDelete(null);
+
+      return res;
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
+      return null;
+    }
+  };
+
+  /**
+   * 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 (!isLoading && !isLicenseLoading) {
+      if (limits?.workflows && meta?.workflowCount >= parseInt(limits.workflows, 10)) {
+        setShowLimitModal(true);
+      }
+    }
+  }, [
+    isLicenseLoading,
+    isLoading,
+    limits.stagesPerWorkflow,
+    limits.workflows,
+    meta?.workflowCount,
+    meta.workflowsTotal,
+  ]);
+
+  return (
+    <>
+      <Layout.Header
+        primaryAction={
+          <LinkButton
+            startIcon={<Plus />}
+            size="S"
+            to="/settings/review-workflows/create"
+            onClick={(event) => {
+              /**
+               * If the current license has a workflow limit:
+               * check if the total count of workflows exceeds that limit. If so,
+               * prevent the navigation and show the limits overlay.
+               *
+               * 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)) {
+                event.preventDefault();
+                setShowLimitModal(true);
+              } else {
+                trackUsage('willCreateWorkflow');
+              }
+            }}
+          >
+            {formatMessage({
+              id: 'Settings.review-workflows.list.page.create',
+              defaultMessage: 'Create new workflow',
+            })}
+          </LinkButton>
+        }
+        subtitle={formatMessage({
+          id: 'Settings.review-workflows.list.page.subtitle',
+          defaultMessage:
+            'Manage content review stages and collaborate during content creation from draft to publication',
+        })}
+        title={formatMessage({
+          id: 'Settings.review-workflows.list.page.title',
+          defaultMessage: 'Review Workflows',
+        })}
+      />
+
+      <Layout.Root>
+        {isLoading || isLoadingModels ? (
+          <Loader>
+            {formatMessage({
+              id: 'Settings.review-workflows.page.list.isLoading',
+              defaultMessage: 'Workflows are loading',
+            })}
+          </Loader>
+        ) : (
+          <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.
+                   */
+
+                  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>
+            }
+            rowCount={1}
+          >
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({
+                      id: 'Settings.review-workflows.list.page.list.column.name.title',
+                      defaultMessage: 'Name',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({
+                      id: 'Settings.review-workflows.list.page.list.column.stages.title',
+                      defaultMessage: 'Stages',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({
+                      id: 'Settings.review-workflows.list.page.list.column.contentTypes.title',
+                      defaultMessage: 'Content Types',
+                    })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <VisuallyHidden>
+                    {formatMessage({
+                      id: 'Settings.review-workflows.list.page.list.column.actions.title',
+                      defaultMessage: 'Actions',
+                    })}
+                  </VisuallyHidden>
+                </Th>
+              </Tr>
+            </Thead>
+
+            <Tbody>
+              {workflows.map((workflow) => (
+                <Tr
+                  {...onRowClick({
+                    fn(event) {
+                      // Abort row onClick event when the user click on the delete button
+                      if (event.target.nodeName === 'BUTTON') {
+                        return;
+                      }
+
+                      push(`/settings/review-workflows/${workflow.id}`);
+                    },
+                  })}
+                  key={`workflow-${workflow.id}`}
+                >
+                  <Td width={pxToRem(250)}>
+                    <Typography textColor="neutral800" fontWeight="bold" ellipsis>
+                      {workflow.name}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{workflow.stages.length}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">
+                      {(workflow?.contentTypes ?? []).map(getContentTypeDisplayName).join(', ')}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Flex alignItems="center" justifyContent="end">
+                      <ActionLink
+                        to={`/settings/review-workflows/${workflow.id}`}
+                        aria-label={formatMessage(
+                          {
+                            id: 'Settings.review-workflows.list.page.list.column.actions.edit.label',
+                            defaultMessage: 'Edit {name}',
+                          },
+                          { name: workflow.name }
+                        )}
+                      >
+                        <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);
+                        }}
+                      />
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        )}
+
+        <ConfirmDialog
+          bodyText={{
+            id: 'Settings.review-workflows.list.page.delete.confirm.body',
+            defaultMessage:
+              'If you remove this worfklow, all stage-related information will be removed for this content-type. Are you sure you want to remove it?',
+          }}
+          isConfirmButtonLoading={isLoadingMutation}
+          isOpen={!!workflowToDelete}
+          onToggleDialog={toggleConfirmDeleteDialog}
+          onConfirm={handleConfirmDeleteDialog}
+        />
+
+        <LimitsModal.Root isOpen={showLimitModal} onClose={() => setShowLimitModal(false)}>
+          <LimitsModal.Title>
+            {formatMessage({
+              id: 'Settings.review-workflows.list.page.workflows.limit.title',
+              defaultMessage: 'You’ve reached the limit of workflows in your plan',
+            })}
+          </LimitsModal.Title>
+
+          <LimitsModal.Body>
+            {formatMessage({
+              id: 'Settings.review-workflows.list.page.workflows.limit.body',
+              defaultMessage: 'Delete a workflow or contact Sales to enable more workflows.',
+            })}
+          </LimitsModal.Body>
+        </LimitsModal.Root>
+      </Layout.Root>
+    </>
+  );
+}

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

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