@strapi/admin 4.6.1 → 4.9.0-alpha.0

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 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

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

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

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

@@ -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,63 @@
+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

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

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

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

@@ -0,0 +1,25 @@
+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',
+            })
+          ),
+      })
+    ),
+  });
+}

package/ee/admin/pages/SettingsPage/utils/customRoutes.js

@@ -1,6 +1,6 @@
 const routes = [];
 
-if (strapi.features.isEnabled(strapi.features.SSO)) {
+if (window.strapi.features.isEnabled(window.strapi.features.SSO)) {
   routes.push({
     async Component() {
       const component = await import(
@@ -14,7 +14,21 @@ if (strapi.features.isEnabled(strapi.features.SSO)) {
   });
 }
 
-if (strapi.features.isEnabled(strapi.features.AUDIT_LOGS)) {
+if (window.strapi.isEE) {
+  routes.push({
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "review-workflows-settings" */ '../pages/ReviewWorkflows'
+      );
+
+      return component;
+    },
+    to: '/settings/review-workflows',
+    exact: true,
+  });
+}
+
+if (window.strapi.features.isEnabled(strapi.features.AUDIT_LOGS)) {
   routes.push({
     async Component() {
       const component = await import(

package/ee/admin/permissions/customPermissions.js

@@ -1,5 +1,12 @@
 const customPermissions = {
   settings: {
+    auditLogs: {
+      main: [{ action: 'admin::audit-logs.read', subject: null }],
+      read: [{ action: 'admin::audit-logs.read', subject: null }],
+    },
+    'review-workflows': {
+      main: [{ action: 'admin::review-workflows.read', subject: null }],
+    },
     sso: {
       main: [{ action: 'admin::provider-login.read', subject: null }],
       read: [{ action: 'admin::provider-login.read', subject: null }],

package/ee/server/bootstrap.js

@@ -17,7 +17,13 @@ module.exports = async () => {
     await actionProvider.registerMany(actions.auditLogs);
   }
 
-  // TODO: check admin seats
+  if (features.isEnabled('review-workflows')) {
+    const { bootstrap: rwBootstrap } = getService('review-workflows');
+
+    await rwBootstrap();
+    await actionProvider.registerMany(actions.reviewWorkflows);
+  }
 
+  // TODO: check admin seats
   await executeCEBootstrap();
 };

package/ee/server/config/admin-actions.js

@@ -29,4 +29,14 @@ module.exports = {
       subCategory: 'options',
     },
   ],
+  reviewWorkflows: [
+    {
+      uid: 'review-workflows.read',
+      displayName: 'Read',
+      pluginName: 'admin',
+      section: 'settings',
+      category: 'review workflows',
+      subCategory: 'options',
+    },
+  ],
 };

package/ee/server/constants/default-stages.json

@@ -0,0 +1,14 @@
+[
+  {
+    "name": "To do"
+  },
+  {
+    "name": "Ready to review"
+  },
+  {
+    "name": "In progress"
+  },
+  {
+    "name": "Reviewed"
+  }
+]

package/ee/server/constants/default-workflow.json

@@ -0,0 +1 @@
+{}

package/ee/server/constants/workflows.js

@@ -0,0 +1,7 @@
+'use strict';
+
+// TODO concatenate admin + content type singular name
+module.exports = {
+  WORKFLOW_MODEL_UID: 'admin::workflow',
+  STAGE_MODEL_UID: 'admin::workflow-stage',
+};

package/ee/server/content-types/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const workflow = require('./workflow');
+const workflowStage = require('./workflow-stage');
+
+module.exports = {
+  workflow,
+  'workflow-stage': workflowStage,
+};

package/ee/server/content-types/workflow/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = {
+  schema: {
+    collectionName: 'strapi_workflows',
+    info: {
+      name: 'Workflow',
+      description: '',
+      singularName: 'workflow',
+      pluralName: 'workflows',
+      displayName: 'Workflow',
+    },
+    options: {},
+    pluginOptions: {
+      'content-manager': {
+        visible: false,
+      },
+      'content-type-builder': {
+        visible: false,
+      },
+    },
+    attributes: {
+      uid: {
+        type: 'string',
+      },
+      stages: {
+        type: 'relation',
+        target: 'admin::workflow-stage',
+        relation: 'oneToMany',
+        mappedBy: 'workflow',
+      },
+    },
+  },
+};