@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

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

@@ -1,137 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { FormikProvider, useFormik, Form } from 'formik';
-import { useIntl } from 'react-intl';
-import { useSelector, useDispatch } from 'react-redux';
-
-import { CheckPagePermissions, ConfirmDialog, SettingsPageTitle } 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 { formatMessage } = useIntl();
-  const dispatch = useDispatch();
-  const { workflows: workflowsData, updateWorkflowStages, refetchWorkflow } = useReviewWorkflows();
-  const {
-    status,
-    clientState: {
-      currentWorkflow: {
-        data: currentWorkflow,
-        isDirty: currentWorkflowIsDirty,
-        hasDeletedServerStages: currentWorkflowHasDeletedServerStages,
-      },
-    },
-  } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
-  const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = useState(false);
-
-  const submitForm = async () => {
-    setIsConfirmDeleteDialogOpen(false);
-
-    await updateWorkflowStages(currentWorkflow.id, currentWorkflow.stages);
-    refetchWorkflow();
-  };
-
-  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]);
-
-  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}
-                  >
-                    {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?',
-            }}
-            isOpen={isConfirmDeleteDialogOpen}
-            onToggleDialog={toggleConfirmDeleteDialog}
-            onConfirm={handleConfirmDeleteDialog}
-          />
-        </Main>
-      </Layout>
-    </CheckPagePermissions>
-  );
-}

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

@@ -1,42 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

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

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

@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useField } from 'formik';
-import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import {
-  Accordion,
-  AccordionToggle,
-  AccordionContent,
-  Box,
-  Grid,
-  GridItem,
-  IconButton,
-  TextInput,
-} from '@strapi/design-system';
-
-import { Trash } from '@strapi/icons';
-
-import { deleteStage, updateStage } from '../../../actions';
-
-// TODO: Delete once https://github.com/strapi/design-system/pull/858
-// is merged and released.
-const StyledAccordion = styled(Box)`
-  > div:first-child {
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-  }
-`;
-
-// TODO: Keep an eye on https://github.com/strapi/design-system/pull/878
-const DeleteButton = styled(IconButton)`
-  background-color: transparent;
-`;
-
-function Stage({ id, name, index, canDelete, isOpen: isOpenDefault = false }) {
-  const { formatMessage } = useIntl();
-  const [isOpen, setIsOpen] = useState(isOpenDefault);
-  const fieldIdentifier = `stages.${index}.name`;
-  const [field, meta] = useField(fieldIdentifier);
-  const dispatch = useDispatch();
-
-  return (
-    <StyledAccordion>
-      <Accordion size="S" variant="primary" onToggle={() => setIsOpen(!isOpen)} expanded={isOpen}>
-        <AccordionToggle
-          title={name}
-          togglePosition="left"
-          action={
-            canDelete ? (
-              <DeleteButton
-                noBorder
-                onClick={() => dispatch(deleteStage(id))}
-                label={formatMessage({
-                  id: 'Settings.review-workflows.stage.delete',
-                  defaultMessage: 'Delete stage',
-                })}
-                icon={<Trash />}
-              />
-            ) : null
-          }
-        />
-        <AccordionContent padding={6} background="neutral0">
-          <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}
-                onBlur={(event) => dispatch(updateStage(id, { name: event.target.value }))}
-              />
-            </GridItem>
-          </Grid>
-        </AccordionContent>
-      </Accordion>
-    </StyledAccordion>
-  );
-}
-
-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

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

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

@@ -1,77 +0,0 @@
-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, Stack } from '@strapi/design-system';
-
-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();
-
-  return (
-    <Flex direction="column" gap={6} width="100%">
-      <StagesContainer spacing={4} width="100%">
-        <Background background="neutral200" height="100%" width={2} zIndex={1} />
-
-        <Stack spacing={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>
-            );
-          })}
-        </Stack>
-      </StagesContainer>
-
-      <Flex spacing={6}>
-        <AddStage type="button" onClick={() => dispatch(addStage({ name: '' }))}>
-          {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

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,63 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
-
-const QUERY_BASE_KEY = 'review-workflows';
-const API_BASE_URL = '/admin/review-workflows';
-
-export function useReviewWorkflows(workflowId) {
-  const { get, put } = useFetchClient();
-  const toggleNotification = useNotification();
-  const client = useQueryClient();
-  const workflowQueryKey = [QUERY_BASE_KEY, workflowId ?? 'default'];
-
-  async function fetchWorkflows({ params = { populate: 'stages' } }) {
-    const {
-      data: { data },
-    } = await get(`${API_BASE_URL}/workflows/${workflowId ?? ''}`, { params });
-
-    return data;
-  }
-
-  async function updateRemoteWorkflowStages({ workflowId, stages }) {
-    const {
-      data: { data },
-    } = await put(`${API_BASE_URL}/workflows/${workflowId}/stages`, {
-      data: stages,
-    });
-
-    return data;
-  }
-
-  function updateWorkflowStages(workflowId, stages) {
-    return workflowUpdateMutation.mutateAsync({ workflowId, stages });
-  }
-
-  function refetchWorkflow() {
-    client.refetchQueries(workflowQueryKey);
-  }
-
-  const workflows = useQuery(workflowQueryKey, fetchWorkflows);
-
-  const workflowUpdateMutation = useMutation(updateRemoteWorkflowStages, {
-    async onError() {
-      // TODO: this should return the proper error thrown by the API
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-    },
-
-    async onSuccess() {
-      toggleNotification({
-        type: 'success',
-        message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
-      });
-    },
-  });
-
-  return {
-    workflows,
-    updateWorkflowStages,
-    refetchWorkflow,
-  };
-}

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

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

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

@@ -1,102 +0,0 @@
-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;
-        }
-        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: [],
-          };
-        }
-
-        draft.clientState.currentWorkflow.data.stages.push({
-          ...payload,
-          __temp_key__: (currentWorkflow.data?.stages?.length ?? 0) + 1,
-        });
-
-        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,
-        state.serverState.currentWorkflow
-      );
-    }
-  });
-}

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

@@ -1,25 +0,0 @@
-import * as yup from 'yup';
-
-export function getWorkflowValidationSchema({ formatMessage }) {
-  return yup.object({
-    stages: yup.array().of(
-      yup.object().shape({
-        name: yup
-          .string()
-          .required(
-            formatMessage({
-              id: 'Settings.review-workflows.validation.stage.name',
-              defaultMessage: 'Name is required',
-            })
-          )
-          .max(
-            255,
-            formatMessage({
-              id: 'Settings.review-workflows.validation.stage.max-length',
-              defaultMessage: 'Name can not be longer than 255 characters',
-            })
-          ),
-      })
-    ),
-  });
-}