@strapi/admin 4.9.2 → 4.10.0-beta.1

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

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import { FormikProvider, useFormik, Form } from 'formik';
+import { useIntl } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+import { useMutation } from 'react-query';
+
+import {
+  CheckPagePermissions,
+  ConfirmDialog,
+  SettingsPageTitle,
+  useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
+  useTracking,
+} from '@strapi/helper-plugin';
+import { Button, ContentLayout, HeaderLayout, Layout, Loader, Main } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+
+import { Stages } from './components/Stages';
+import { reducer, initialState } from './reducer';
+import { REDUX_NAMESPACE } from './constants';
+import { useInjectReducer } from '../../../../../../admin/src/hooks/useInjectReducer';
+import { useReviewWorkflows } from './hooks/useReviewWorkflows';
+import { setWorkflows } from './actions';
+import { getWorkflowValidationSchema } from './utils/getWorkflowValidationSchema';
+import adminPermissions from '../../../../../../admin/src/permissions';
+
+export function ReviewWorkflowsPage() {
+  const { trackUsage } = useTracking();
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+  const { put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const { workflows: workflowsData, refetchWorkflow } = useReviewWorkflows();
+  const {
+    status,
+    clientState: {
+      currentWorkflow: {
+        data: currentWorkflow,
+        isDirty: currentWorkflowIsDirty,
+        hasDeletedServerStages: currentWorkflowHasDeletedServerStages,
+      },
+    },
+  } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = useState(false);
+
+  const { mutateAsync, isLoading } = useMutation(
+    async ({ workflowId, stages }) => {
+      try {
+        const {
+          data: { data },
+        } = await put(`/admin/review-workflows/workflows/${workflowId}/stages`, {
+          data: stages,
+        });
+
+        return data;
+      } catch (error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      }
+
+      return null;
+    },
+    {
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      },
+
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+        });
+      },
+    }
+  );
+
+  const updateWorkflowStages = (workflowId, stages) => {
+    return mutateAsync({ workflowId, stages });
+  };
+
+  const submitForm = async () => {
+    await updateWorkflowStages(currentWorkflow.id, currentWorkflow.stages);
+    await refetchWorkflow();
+
+    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 {
+        submitForm();
+      }
+    },
+    validationSchema: getWorkflowValidationSchema({ formatMessage }),
+    validateOnChange: false,
+  });
+
+  useInjectReducer(REDUX_NAMESPACE, reducer);
+
+  useEffect(() => {
+    dispatch(setWorkflows({ status: workflowsData.status, data: workflowsData.data }));
+  }, [workflowsData.status, workflowsData.data, dispatch]);
+
+  useEffect(() => {
+    trackUsage('didViewWorkflow');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <CheckPagePermissions permissions={adminPermissions.settings['review-workflows'].main}>
+      <Layout>
+        <SettingsPageTitle
+          name={formatMessage({
+            id: 'Settings.review-workflows.page.title',
+            defaultMessage: 'Review Workflows',
+          })}
+        />
+        <Main tabIndex={-1}>
+          <FormikProvider value={formik}>
+            <Form onSubmit={formik.handleSubmit}>
+              <HeaderLayout
+                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>
+                }
+                title={formatMessage({
+                  id: 'Settings.review-workflows.page.title',
+                  defaultMessage: 'Review Workflows',
+                })}
+                subtitle={formatMessage(
+                  {
+                    id: 'Settings.review-workflows.page.subtitle',
+                    defaultMessage: '{count, plural, one {# stage} other {# stages}}',
+                  },
+                  { count: currentWorkflow?.stages?.length ?? 0 }
+                )}
+              />
+              <ContentLayout>
+                {status === 'loading' && (
+                  <Loader>
+                    {formatMessage({
+                      id: 'Settings.review-workflows.page.isLoading',
+                      defaultMessage: 'Workflow is loading',
+                    })}
+                  </Loader>
+                )}
+
+                <Stages stages={formik.values?.stages} />
+              </ContentLayout>
+            </Form>
+          </FormikProvider>
+
+          <ConfirmDialog
+            bodyText={{
+              id: 'Settings.review-workflows.page.delete.confirm.body',
+              defaultMessage:
+                'All entries assigned to deleted stages will be moved to the first stage. Are you sure you want to save this?',
+            }}
+            isConfirmButtonLoading={isLoading}
+            isOpen={isConfirmDeleteDialogOpen}
+            onToggleDialog={toggleConfirmDeleteDialog}
+            onConfirm={handleConfirmDeleteDialog}
+          />
+        </Main>
+      </Layout>
+    </CheckPagePermissions>
+  );
+}

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

@@ -0,0 +1,42 @@
+import {
+  ACTION_SET_WORKFLOWS,
+  ACTION_DELETE_STAGE,
+  ACTION_ADD_STAGE,
+  ACTION_UPDATE_STAGE,
+} from '../constants';
+
+export function setWorkflows({ status, data }) {
+  return {
+    type: ACTION_SET_WORKFLOWS,
+    payload: {
+      status,
+      workflows: data,
+    },
+  };
+}
+
+export function deleteStage(stageId) {
+  return {
+    type: ACTION_DELETE_STAGE,
+    payload: {
+      stageId,
+    },
+  };
+}
+
+export function addStage(stage = {}) {
+  return {
+    type: ACTION_ADD_STAGE,
+    payload: stage,
+  };
+}
+
+export function updateStage(stageId, payload) {
+  return {
+    type: ACTION_UPDATE_STAGE,
+    payload: {
+      stageId,
+      ...payload,
+    },
+  };
+}

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { PlusCircle } from '@strapi/icons';
+
+const StyledAddIcon = styled(PlusCircle)`
+  > circle {
+    fill: ${({ theme }) => theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+const StyledButton = styled(Box)`
+  border-radius: 26px;
+
+  svg {
+    height: ${({ theme }) => theme.spaces[6]};
+    width: ${({ theme }) => theme.spaces[6]};
+
+    > path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary600} !important;
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600} !important;
+    }
+
+    ${StyledAddIcon} {
+      > circle {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+      > path {
+        fill: ${({ theme }) => theme.colors.neutral100};
+      }
+    }
+  }
+
+  &:active {
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+    }
+
+    ${StyledAddIcon} {
+      > circle {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+      > path {
+        fill: ${({ theme }) => theme.colors.neutral100};
+      }
+    }
+  }
+`;
+
+export function AddStage({ children, ...props }) {
+  return (
+    <StyledButton
+      as="button"
+      background="neutral0"
+      border="neutral150"
+      paddingBottom={3}
+      paddingLeft={4}
+      paddingRight={4}
+      paddingTop={3}
+      shadow="filterShadow"
+      {...props}
+    >
+      <Flex gap={2}>
+        <StyledAddIcon aria-hidden />
+
+        <Typography variant="pi" fontWeight="bold" textColor="neutral500">
+          {children}
+        </Typography>
+      </Flex>
+    </StyledButton>
+  );
+}
+
+AddStage.propTypes = {
+  children: PropTypes.node.isRequired,
+};

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

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

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

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  Grid,
+  GridItem,
+  IconButton,
+  TextInput,
+} from '@strapi/design-system';
+import { useTracking } from '@strapi/helper-plugin';
+import { Trash } from '@strapi/icons';
+
+import { deleteStage, updateStage } from '../../../actions';
+
+function Stage({ id, name, index, canDelete, isOpen: isOpenDefault = false }) {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const [isOpen, setIsOpen] = useState(isOpenDefault);
+  const fieldIdentifier = `stages.${index}.name`;
+  const [field, meta] = useField(fieldIdentifier);
+  const dispatch = useDispatch();
+
+  return (
+    <Accordion
+      size="S"
+      variant="primary"
+      onToggle={() => {
+        setIsOpen(!isOpen);
+
+        if (!isOpen) {
+          trackUsage('willEditStage');
+        }
+      }}
+      expanded={isOpen}
+      shadow="tableShadow"
+    >
+      <AccordionToggle
+        title={name}
+        togglePosition="left"
+        action={
+          canDelete ? (
+            <IconButton
+              background="transparent"
+              noBorder
+              onClick={() => dispatch(deleteStage(id))}
+              label={formatMessage({
+                id: 'Settings.review-workflows.stage.delete',
+                defaultMessage: 'Delete stage',
+              })}
+              icon={<Trash />}
+            />
+          ) : null
+        }
+      />
+      <AccordionContent padding={6} background="neutral0" hasRadius>
+        <Grid gap={4}>
+          <GridItem col={6}>
+            <TextInput
+              {...field}
+              id={fieldIdentifier}
+              value={name}
+              label={formatMessage({
+                id: 'Settings.review-workflows.stage.name.label',
+                defaultMessage: 'Stage name',
+              })}
+              error={meta.error ?? false}
+              onChange={(event) => {
+                field.onChange(event);
+                dispatch(updateStage(id, { name: event.target.value }));
+              }}
+            />
+          </GridItem>
+        </Grid>
+      </AccordionContent>
+    </Accordion>
+  );
+}
+
+export { Stage };
+
+Stage.propTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  canDelete: PropTypes.bool.isRequired,
+}).isRequired;

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

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

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { Box, Flex } from '@strapi/design-system';
+import { useTracking } from '@strapi/helper-plugin';
+
+import { addStage } from '../../actions';
+import { AddStage } from '../AddStage';
+import { Stage } from './Stage';
+
+const StagesContainer = styled(Box)`
+  position: relative;
+`;
+
+const Background = styled(Box)`
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+`;
+
+function Stages({ stages }) {
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+  const { trackUsage } = useTracking();
+
+  return (
+    <Flex direction="column" gap={6} width="100%">
+      <StagesContainer spacing={4} width="100%">
+        <Background background="neutral200" height="100%" width={2} zIndex={1} />
+
+        <Flex
+          direction="column"
+          alignItems="stretch"
+          gap={6}
+          zIndex={2}
+          position="relative"
+          as="ol"
+        >
+          {stages.map((stage, index) => {
+            const id = stage?.id ?? stage.__temp_key__;
+
+            return (
+              <Box key={`stage-${id}`} as="li">
+                <Stage
+                  {...stage}
+                  id={id}
+                  index={index}
+                  canDelete={stages.length > 1}
+                  isOpen={!stage.id}
+                />
+              </Box>
+            );
+          })}
+        </Flex>
+      </StagesContainer>
+
+      <Flex direction="column" gap={6}>
+        <AddStage
+          type="button"
+          onClick={() => {
+            dispatch(addStage({ name: '' }));
+            trackUsage('willCreateStage');
+          }}
+        >
+          {formatMessage({
+            id: 'Settings.review-workflows.stage.add',
+            defaultMessage: 'Add new stage',
+          })}
+        </AddStage>
+      </Flex>
+    </Flex>
+  );
+}
+
+export { Stages };
+
+Stages.defaultProps = {
+  stages: [],
+};
+
+Stages.propTypes = {
+  stages: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      __temp_key__: PropTypes.number,
+      name: PropTypes.string.isRequired,
+    })
+  ),
+};

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

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

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

@@ -0,0 +1,6 @@
+export const REDUX_NAMESPACE = 'settings_review-workflows';
+
+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_UPDATE_STAGE = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE`;

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

@@ -0,0 +1,35 @@
+import { useQuery, useQueryClient } from 'react-query';
+import { useFetchClient } from '@strapi/helper-plugin';
+
+const QUERY_BASE_KEY = 'review-workflows';
+const API_BASE_URL = '/admin/review-workflows';
+
+export function useReviewWorkflows(workflowId) {
+  const { get } = useFetchClient();
+  const client = useQueryClient();
+  const workflowQueryKey = [QUERY_BASE_KEY, workflowId ?? 'default'];
+
+  async function fetchWorkflows({ params = { populate: 'stages' } }) {
+    try {
+      const {
+        data: { data },
+      } = await get(`${API_BASE_URL}/workflows/${workflowId ?? ''}`, { params });
+
+      return data;
+    } catch (err) {
+      // silence
+      return null;
+    }
+  }
+
+  async function refetchWorkflow() {
+    await client.refetchQueries(workflowQueryKey);
+  }
+
+  const workflows = useQuery(workflowQueryKey, fetchWorkflows);
+
+  return {
+    workflows,
+    refetchWorkflow,
+  };
+}

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

@@ -0,0 +1,3 @@
+import { ReviewWorkflowsPage } from './ReviewWorkflows';
+
+export default ReviewWorkflowsPage;

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

@@ -0,0 +1,122 @@
+import { current, produce } from 'immer';
+import isEqual from 'lodash/isEqual';
+
+import {
+  ACTION_SET_WORKFLOWS,
+  ACTION_DELETE_STAGE,
+  ACTION_ADD_STAGE,
+  ACTION_UPDATE_STAGE,
+} from '../constants';
+
+export const initialState = {
+  status: 'loading',
+  serverState: {
+    currentWorkflow: null,
+    workflows: [],
+  },
+  clientState: {
+    currentWorkflow: { data: null, isDirty: false, hasDeletedServerStages: false },
+  },
+};
+
+export function reducer(state = initialState, action) {
+  return produce(state, (draft) => {
+    const { payload } = action;
+
+    switch (action.type) {
+      case ACTION_SET_WORKFLOWS: {
+        const { status, workflows } = payload;
+
+        draft.status = status;
+
+        if (workflows) {
+          const defaultWorkflow = workflows[0];
+
+          draft.serverState.workflows = workflows;
+          draft.serverState.currentWorkflow = defaultWorkflow;
+          draft.clientState.currentWorkflow.data = defaultWorkflow;
+          draft.clientState.currentWorkflow.hasDeletedServerStages = false;
+        }
+        break;
+      }
+
+      case ACTION_DELETE_STAGE: {
+        const { stageId } = payload;
+        const { currentWorkflow } = state.clientState;
+
+        draft.clientState.currentWorkflow.data.stages = currentWorkflow.data.stages.filter(
+          (stage) => (stage?.id ?? stage.__temp_key__) !== stageId
+        );
+
+        if (!currentWorkflow.hasDeletedServerStages) {
+          draft.clientState.currentWorkflow.hasDeletedServerStages =
+            !!state.serverState.currentWorkflow.stages.find((stage) => stage.id === stageId);
+        }
+
+        break;
+      }
+
+      case ACTION_ADD_STAGE: {
+        const { currentWorkflow } = state.clientState;
+
+        if (!currentWorkflow.data) {
+          draft.clientState.currentWorkflow.data = {
+            stages: [],
+          };
+        }
+
+        const newTempKey = getMaxTempKey(draft.clientState.currentWorkflow.data.stages);
+
+        draft.clientState.currentWorkflow.data.stages.push({
+          ...payload,
+          __temp_key__: newTempKey,
+        });
+
+        break;
+      }
+
+      case ACTION_UPDATE_STAGE: {
+        const { currentWorkflow } = state.clientState;
+        const { stageId, ...modified } = payload;
+
+        draft.clientState.currentWorkflow.data.stages = currentWorkflow.data.stages.map((stage) =>
+          (stage.id ?? stage.__temp_key__) === stageId
+            ? {
+                ...stage,
+                ...modified,
+              }
+            : stage
+        );
+
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    if (state.clientState.currentWorkflow.data) {
+      draft.clientState.currentWorkflow.isDirty = !isEqual(
+        current(draft.clientState.currentWorkflow).data,
+        draft.serverState.currentWorkflow
+      );
+    }
+  });
+}
+
+/**
+ * @type {(stages: Array<{id?: number; __temp_key__: number}>) => number}
+ */
+const getMaxTempKey = (stages = []) => {
+  /**
+   * We check if there are ids or __temp_key__ because you may add a stage to a list of stages
+   * already in the DB, alternatively you might add multiple new stages at once.
+   */
+  const ids = stages.map((stage) => stage.id ?? stage.__temp_key__);
+
+  /**
+   * If there are no ids it will return 0 as the max value
+   * because the max value is -1.
+   */
+  return Math.max(...ids, -1) + 1;
+};