@strapi/admin 4.13.2 → 4.14.0-alpha.0

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

@@ -16,11 +16,19 @@ import { useMutation } from 'react-query';
 import { useSelector, useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
+import { useAdminRoles } from '../../../../../../../../admin/src/hooks/useAdminRoles';
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
 import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
 import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
-import { resetWorkflow, setWorkflow } from '../../actions';
+import {
+  resetWorkflow,
+  setIsLoading,
+  setWorkflow,
+  setContentTypes,
+  setRoles,
+  setWorkflows,
+} from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
 import { Stages } from '../../components/Stages';
@@ -31,7 +39,15 @@ import {
   REDUX_NAMESPACE,
 } from '../../constants';
 import { useReviewWorkflows } from '../../hooks/useReviewWorkflows';
-import { reducer, initialState } from '../../reducer';
+import { reducer } from '../../reducer';
+import {
+  selectIsWorkflowDirty,
+  selectCurrentWorkflow,
+  selectHasDeletedServerStages,
+  selectIsLoading,
+  selectRoles,
+  selectServerState,
+} from '../../selectors';
 import { validateWorkflow } from '../../utils/validateWorkflow';
 
 export function ReviewWorkflowsEditView() {
@@ -42,29 +58,22 @@ export function ReviewWorkflowsEditView() {
   const { put } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const toggleNotification = useNotification();
-  const {
-    isLoading: isWorkflowLoading,
-    meta,
-    workflows,
-    status: workflowStatus,
-    refetch,
-  } = useReviewWorkflows();
-  const { collectionTypes, singleTypes, isLoading: isLoadingModels } = useContentTypes();
-  const {
-    status,
-    clientState: {
-      currentWorkflow: {
-        data: currentWorkflow,
-        isDirty: currentWorkflowIsDirty,
-        hasDeletedServerStages,
-      },
-    },
-  } = useSelector((state) => state?.[REDUX_NAMESPACE] ?? initialState);
+  const { isLoading: isLoadingWorkflow, meta, workflows, refetch } = useReviewWorkflows();
+  const { collectionTypes, singleTypes, isLoading: isLoadingContentTypes } = useContentTypes();
+  const serverState = useSelector(selectServerState);
+  const currentWorkflowIsDirty = useSelector(selectIsWorkflowDirty);
+  const currentWorkflow = useSelector(selectCurrentWorkflow);
+  const hasDeletedServerStages = useSelector(selectHasDeletedServerStages);
+  const roles = useSelector(selectRoles);
+  const isLoading = useSelector(selectIsLoading);
   const {
     allowedActions: { canDelete, canUpdate },
   } = useRBAC(permissions.settings['review-workflows']);
   const [savePrompts, setSavePrompts] = React.useState({});
   const { getFeature, isLoading: isLicenseLoading } = useLicenseLimits();
+  const { isLoading: isLoadingRoles, roles: serverRoles } = useAdminRoles(undefined, {
+    retry: false,
+  });
   const [showLimitModal, setShowLimitModal] = React.useState(false);
   const [initialErrors, setInitialErrors] = React.useState(null);
 
@@ -73,7 +82,7 @@ export function ReviewWorkflowsEditView() {
     .filter((workflow) => workflow.id !== parseInt(workflowId, 10))
     .flatMap((workflow) => workflow.contentTypes);
 
-  const { mutateAsync, isLoading } = useMutation(
+  const { mutateAsync, isLoading: isLoadingMutation } = useMutation(
     async ({ workflow }) => {
       const {
         data: { data },
@@ -98,7 +107,37 @@ export function ReviewWorkflowsEditView() {
     setInitialErrors(null);
 
     try {
-      const res = await mutateAsync({ workflow });
+      const res = await mutateAsync({
+        workflow: {
+          ...workflow,
+
+          // compare permissions of stages and only submit them if at least one has
+          // changed; this enables partial updates e.g. for users who don't have
+          // permissions to see roles
+          stages: workflow.stages.map((stage) => {
+            let hasUpdatedPermissions = true;
+            const serverStage = serverState.workflow.stages.find(
+              (serverStage) => serverStage.id === stage?.id
+            );
+
+            if (serverStage) {
+              hasUpdatedPermissions =
+                serverStage.permissions?.length !== stage.permission?.length ||
+                !serverStage.permissions.every(
+                  (serverPermission) =>
+                    !!stage.permissions.find(
+                      (permission) => permission.role === serverPermission.role
+                    )
+                );
+            }
+
+            return {
+              ...stage,
+              permissions: hasUpdatedPermissions ? stage.permissions : undefined,
+            };
+          }),
+        },
+      });
 
       return res;
     } catch (error) {
@@ -194,14 +233,37 @@ export function ReviewWorkflowsEditView() {
   const limits = getFeature('review-workflows');
 
   React.useEffect(() => {
-    dispatch(setWorkflow({ status: workflowStatus, data: workflow }));
+    if (!isLoadingWorkflow) {
+      dispatch(setWorkflow({ workflow }));
+      dispatch(setWorkflows({ workflows }));
+    }
+
+    if (!isLoadingContentTypes) {
+      dispatch(setContentTypes({ collectionTypes, singleTypes }));
+    }
+
+    if (!isLoadingRoles) {
+      dispatch(setRoles(serverRoles));
+    }
+
+    dispatch(setIsLoading(isLoadingWorkflow || isLoadingContentTypes || isLoadingRoles));
 
     // reset the state to the initial state to avoid flashes if a user
     // navigates from an edit-view to a create-view
     return () => {
       dispatch(resetWorkflow());
     };
-  }, [workflowStatus, workflow, dispatch]);
+  }, [
+    collectionTypes,
+    dispatch,
+    isLoadingContentTypes,
+    isLoadingWorkflow,
+    isLoadingRoles,
+    serverRoles,
+    singleTypes,
+    workflow,
+    workflows,
+  ]);
 
   /**
    * If the current license has a limit:
@@ -217,7 +279,7 @@ export function ReviewWorkflowsEditView() {
    */
 
   React.useEffect(() => {
-    if (!isWorkflowLoading && !isLicenseLoading) {
+    if (!isLoadingWorkflow && !isLicenseLoading) {
       if (
         limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
         meta?.workflowCount > parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10)
@@ -234,12 +296,25 @@ export function ReviewWorkflowsEditView() {
   }, [
     currentWorkflow.stages.length,
     isLicenseLoading,
-    isWorkflowLoading,
+    isLoadingWorkflow,
     limits,
     meta?.workflowCount,
     meta.workflowsTotal,
   ]);
 
+  React.useEffect(() => {
+    if (!isLoading && roles.length === 0) {
+      toggleNotification({
+        blockTransition: true,
+        type: 'warning',
+        message: formatMessage({
+          id: 'Settings.review-workflows.stage.permissions.noPermissions.description',
+          defaultMessage: 'You don’t have the permission to see roles',
+        }),
+      });
+    }
+  }, [formatMessage, isLoading, roles, toggleNotification]);
+
   // TODO: redirect back to list-view if workflow is not found?
 
   return (
@@ -259,7 +334,7 @@ export function ReviewWorkflowsEditView() {
                   disabled={!currentWorkflowIsDirty}
                   // if the confirm dialog is open the loading state is on
                   // the confirm button already
-                  loading={!Object.keys(savePrompts).length > 0 && isLoading}
+                  loading={!Object.keys(savePrompts).length > 0 && isLoadingMutation}
                 >
                   {formatMessage({
                     id: 'global.save',
@@ -269,7 +344,7 @@ export function ReviewWorkflowsEditView() {
               )
             }
             subtitle={
-              currentWorkflow.stages.length > 0 &&
+              !isLoading &&
               formatMessage(
                 {
                   id: 'Settings.review-workflows.page.subtitle',
@@ -282,7 +357,7 @@ export function ReviewWorkflowsEditView() {
           />
 
           <Layout.Root>
-            {isLoadingModels || status === 'loading' ? (
+            {isLoading ? (
               <Flex justifyContent="center">
                 <Loader>
                   {formatMessage({
@@ -293,12 +368,7 @@ export function ReviewWorkflowsEditView() {
               </Flex>
             ) : (
               <Flex alignItems="stretch" direction="column" gap={7}>
-                <WorkflowAttributes
-                  canUpdate={canUpdate}
-                  contentTypes={{ collectionTypes, singleTypes }}
-                  currentWorkflow={currentWorkflow}
-                  workflows={workflows}
-                />
+                <WorkflowAttributes canUpdate={canUpdate} />
                 <Stages
                   canDelete={canDelete}
                   canUpdate={canUpdate}

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

@@ -1,21 +1,31 @@
-import { current, produce } from 'immer';
-import isEqual from 'lodash/isEqual';
+import { produce } from 'immer';
 
 import {
   ACTION_ADD_STAGE,
+  ACTION_CLONE_STAGE,
   ACTION_DELETE_STAGE,
   ACTION_RESET_WORKFLOW,
+  ACTION_SET_CONTENT_TYPES,
+  ACTION_SET_IS_LOADING,
+  ACTION_SET_ROLES,
   ACTION_SET_WORKFLOW,
+  ACTION_SET_WORKFLOWS,
   ACTION_UPDATE_STAGE,
+  ACTION_UPDATE_STAGES,
   ACTION_UPDATE_STAGE_POSITION,
   ACTION_UPDATE_WORKFLOW,
   STAGE_COLOR_DEFAULT,
 } from '../constants';
 
 export const initialState = {
-  status: 'loading',
   serverState: {
+    contentTypes: {
+      collectionTypes: [],
+      singleTypes: [],
+    },
+    roles: [],
     workflow: null,
+    workflows: [],
   },
   clientState: {
     currentWorkflow: {
@@ -23,10 +33,10 @@ export const initialState = {
         name: '',
         contentTypes: [],
         stages: [],
+        permissions: undefined,
       },
-      isDirty: false,
-      hasDeletedServerStages: false,
     },
+    isLoading: true,
   },
 };
 
@@ -35,10 +45,23 @@ export function reducer(state = initialState, action) {
     const { payload } = action;
 
     switch (action.type) {
-      case ACTION_SET_WORKFLOW: {
-        const { status, workflow } = payload;
+      case ACTION_SET_CONTENT_TYPES: {
+        draft.serverState.contentTypes = payload;
+        break;
+      }
 
-        draft.status = status;
+      case ACTION_SET_IS_LOADING: {
+        draft.clientState.isLoading = payload;
+        break;
+      }
+
+      case ACTION_SET_ROLES: {
+        draft.serverState.roles = payload;
+        break;
+      }
+
+      case ACTION_SET_WORKFLOW: {
+        const workflow = payload;
 
         if (workflow) {
           draft.serverState.workflow = workflow;
@@ -47,18 +70,21 @@ export function reducer(state = initialState, action) {
             stages: workflow.stages.map((stage) => ({
               ...stage,
               // A safety net in case a stage does not have a color assigned;
-              // this normallly should not happen
+              // this should not happen
               color: stage?.color ?? STAGE_COLOR_DEFAULT,
             })),
           };
         }
+        break;
+      }
 
-        draft.clientState.currentWorkflow.hasDeletedServerStages = false;
+      case ACTION_SET_WORKFLOWS: {
+        draft.serverState.workflows = payload;
         break;
       }
 
       case ACTION_RESET_WORKFLOW: {
-        draft.clientState.currentWorkflow.data = initialState.clientState.currentWorkflow.data;
+        draft.clientState = initialState.clientState;
         draft.serverState = initialState.serverState;
         break;
       }
@@ -71,12 +97,6 @@ export function reducer(state = initialState, action) {
           (stage) => (stage?.id ?? stage.__temp_key__) !== stageId
         );
 
-        if (!currentWorkflow.hasDeletedServerStages) {
-          draft.clientState.currentWorkflow.hasDeletedServerStages = !!(
-            state.serverState.workflow?.stages ?? []
-          ).find((stage) => stage.id === stageId);
-        }
-
         break;
       }
 
@@ -100,6 +120,24 @@ export function reducer(state = initialState, action) {
         break;
       }
 
+      case ACTION_CLONE_STAGE: {
+        const { currentWorkflow } = state.clientState;
+        const { id } = payload;
+
+        const sourceStageIndex = currentWorkflow.data.stages.findIndex(
+          (stage) => (stage?.id ?? stage?.__temp_key__) === id
+        );
+        const sourceStage = currentWorkflow.data.stages[sourceStageIndex];
+
+        draft.clientState.currentWorkflow.data.stages.splice(sourceStageIndex + 1, 0, {
+          ...sourceStage,
+          id: undefined,
+          __temp_key__: getMaxTempKey(draft.clientState.currentWorkflow.data.stages),
+        });
+
+        break;
+      }
+
       case ACTION_UPDATE_STAGE: {
         const { currentWorkflow } = state.clientState;
         const { stageId, ...modified } = payload;
@@ -116,6 +154,19 @@ export function reducer(state = initialState, action) {
         break;
       }
 
+      case ACTION_UPDATE_STAGES: {
+        const { currentWorkflow } = state.clientState;
+
+        draft.clientState.currentWorkflow.data.stages = currentWorkflow.data.stages.map(
+          (stage) => ({
+            ...stage,
+            ...payload,
+          })
+        );
+
+        break;
+      }
+
       case ACTION_UPDATE_STAGE_POSITION: {
         const {
           currentWorkflow: {
@@ -149,16 +200,6 @@ export function reducer(state = initialState, action) {
       default:
         break;
     }
-
-    if (state.clientState.currentWorkflow.data && draft.serverState.workflow) {
-      draft.clientState.currentWorkflow.isDirty = !isEqual(
-        current(draft.clientState.currentWorkflow).data,
-        draft.serverState.workflow
-      );
-    } else {
-      // if there is no workflow on the server, the workflow is awalys considered dirty
-      draft.clientState.currentWorkflow.isDirty = true;
-    }
   });
 }
 

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

@@ -0,0 +1,45 @@
+import isEqual from 'lodash/isEqual';
+import { createSelector } from 'reselect';
+
+import { REDUX_NAMESPACE } from './constants';
+import { initialState } from './reducer';
+
+export const selectNamespace = (state) => state[REDUX_NAMESPACE] ?? initialState;
+
+export const selectContentTypes = createSelector(
+  selectNamespace,
+  ({ serverState: { contentTypes } }) => contentTypes
+);
+
+export const selectRoles = createSelector(selectNamespace, ({ serverState: { roles } }) => roles);
+
+export const selectCurrentWorkflow = createSelector(
+  selectNamespace,
+  ({ clientState: { currentWorkflow } }) => currentWorkflow.data
+);
+
+export const selectWorkflows = createSelector(
+  selectNamespace,
+  ({ serverState: { workflows } }) => workflows
+);
+
+export const selectIsWorkflowDirty = createSelector(
+  selectNamespace,
+  ({ serverState, clientState: { currentWorkflow } }) =>
+    !isEqual(serverState.workflow, currentWorkflow.data)
+);
+
+export const selectHasDeletedServerStages = createSelector(
+  selectNamespace,
+  ({ serverState, clientState: { currentWorkflow } }) =>
+    !(serverState.workflow?.stages ?? []).every(
+      (stage) => !!currentWorkflow.data.stages.find(({ id }) => id === stage.id)
+    )
+);
+
+export const selectIsLoading = createSelector(
+  selectNamespace,
+  ({ clientState: { isLoading } }) => isLoading
+);
+
+export const selectServerState = createSelector(selectNamespace, ({ serverState }) => serverState);

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

@@ -57,6 +57,26 @@ export async function validateWorkflow({ values, formatMessage }) {
               })
             )
             .matches(/^#(?:[0-9a-fA-F]{3}){1,2}$/i),
+
+          permissions: yup
+            .array(
+              yup.object({
+                role: yup
+                  .number()
+                  .strict()
+                  .typeError(
+                    formatMessage({
+                      id: 'Settings.review-workflows.validation.stage.permissions.role.number',
+                      defaultMessage: 'Role must be of type number',
+                    })
+                  ).required,
+                action: yup.string().required({
+                  id: 'Settings.review-workflows.validation.stage.permissions.action.required',
+                  defaultMessage: 'Action is a required argument',
+                }),
+              })
+            )
+            .strict(),
         })
       )
       .min(1),

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

@@ -62,5 +62,11 @@ module.exports = {
       category: 'review workflows',
       subCategory: 'options',
     },
+    {
+      uid: 'review-workflows.stage.transition',
+      displayName: 'Change stage',
+      pluginName: 'admin',
+      section: 'internal',
+    },
   ],
 };

package/ee/server/constants/workflows.js

@@ -4,6 +4,7 @@
 module.exports = {
   WORKFLOW_MODEL_UID: 'admin::workflow',
   STAGE_MODEL_UID: 'admin::workflow-stage',
+  STAGE_TRANSITION_UID: 'admin::review-workflows.stage.transition',
   STAGE_DEFAULT_COLOR: '#4945FF',
   ENTITY_STAGE_ATTRIBUTE: 'strapi_stage',
   ENTITY_ASSIGNEE_ATTRIBUTE: 'strapi_assignee',
@@ -17,4 +18,16 @@ module.exports = {
       'You’ve reached the limit of stages for this workflow in your plan. Try deleting some stages or contact Sales to enable more stages.',
     DUPLICATED_STAGE_NAME: 'Stage names must be unique.',
   },
+  WORKFLOW_POPULATE: {
+    stages: {
+      populate: {
+        permissions: {
+          fields: ['action', 'actionParameters'],
+          populate: {
+            role: { fields: ['id', 'name'] },
+          },
+        },
+      },
+    },
+  },
 };

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

@@ -40,6 +40,12 @@ module.exports = {
         inversedBy: 'stages',
         configurable: false,
       },
+      permissions: {
+        type: 'relation',
+        target: 'admin::permission',
+        relation: 'manyToMany',
+        configurable: false,
+      }
     },
   },
 };

package/ee/server/controllers/workflows/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const { update, map, property } = require('lodash/fp');
 const { mapAsync } = require('@strapi/utils');
 const { getService } = require('../../utils');
 
@@ -7,7 +8,7 @@ const {
   validateWorkflowCreate,
   validateWorkflowUpdate,
 } = require('../../validation/review-workflows');
-const { WORKFLOW_MODEL_UID } = require('../../constants/workflows');
+const { WORKFLOW_MODEL_UID, WORKFLOW_POPULATE } = require('../../constants/workflows');
 
 /**
  *
@@ -22,6 +23,21 @@ function getWorkflowsPermissionChecker({ strapi }, userAbility) {
     .create({ userAbility, model: WORKFLOW_MODEL_UID });
 }
 
+/**
+ * Transforms workflow to an admin UI format.
+ * Some attributes (like permissions) are presented in a different format in the admin UI.
+ * @param {Workflow} workflow
+ */
+function formatWorkflowToAdmin(workflow) {
+  if (!workflow) return;
+  if (!workflow.stages) return workflow;
+
+  // Transform permissions roles to be the id string instead of an object
+  const transformPermissions = map(update('role', property('id')));
+  const transformStages = map(update('permissions', transformPermissions));
+  return update('stages', transformStages, workflow);
+}
+
 module.exports = {
   /**
    * Create a new workflow
@@ -38,10 +54,12 @@ module.exports = {
     const workflowBody = await validateWorkflowCreate(body.data);
 
     const workflowService = getService('workflows');
-    const createdWorkflow = await workflowService.create({
-      data: await sanitizeCreateInput(workflowBody),
-      populate,
-    });
+    const createdWorkflow = await workflowService
+      .create({
+        data: await sanitizeCreateInput(workflowBody),
+        populate,
+      })
+      .then(formatWorkflowToAdmin);
 
     ctx.body = {
       data: await sanitizeOutput(createdWorkflow),
@@ -61,22 +79,27 @@ module.exports = {
       ctx.state.userAbility
     );
     const { populate } = await sanitizedQuery.update(query);
-
     const workflowBody = await validateWorkflowUpdate(body.data);
 
-    const workflow = await workflowService.findById(id, { populate: ['stages'] });
+    // Find if workflow exists
+    const workflow = await workflowService.findById(id, { populate: WORKFLOW_POPULATE });
     if (!workflow) {
       return ctx.notFound();
     }
-    const getPermittedFieldToUpdate = sanitizeUpdateInput(workflow);
 
+    // Sanitize input data
+    const getPermittedFieldToUpdate = sanitizeUpdateInput(workflow);
     const dataToUpdate = await getPermittedFieldToUpdate(workflowBody);
 
-    const updatedWorkflow = await workflowService.update(workflow, {
-      data: dataToUpdate,
-      populate,
-    });
+    // Update workflow
+    const updatedWorkflow = await workflowService
+      .update(workflow, {
+        data: dataToUpdate,
+        populate,
+      })
+      .then(formatWorkflowToAdmin);
 
+    // Send sanitized response
     ctx.body = {
       data: await sanitizeOutput(updatedWorkflow),
     };
@@ -96,12 +119,14 @@ module.exports = {
     );
     const { populate } = await sanitizedQuery.delete(query);
 
-    const workflow = await workflowService.findById(id, { populate: ['stages'] });
+    const workflow = await workflowService.findById(id, { populate: WORKFLOW_POPULATE });
     if (!workflow) {
       return ctx.notFound("Workflow doesn't exist");
     }
 
-    const deletedWorkflow = await workflowService.delete(workflow, { populate });
+    const deletedWorkflow = await workflowService
+      .delete(workflow, { populate })
+      .then(formatWorkflowToAdmin);
 
     ctx.body = {
       data: await sanitizeOutput(deletedWorkflow),
@@ -122,7 +147,7 @@ module.exports = {
     const { populate, filters, sort } = await sanitizedQuery.read(query);
 
     const [workflows, workflowCount] = await Promise.all([
-      workflowService.find({ populate, filters, sort }),
+      workflowService.find({ populate, filters, sort }).then(map(formatWorkflowToAdmin)),
       workflowService.count(),
     ]);
 
@@ -151,7 +176,7 @@ module.exports = {
     const workflowService = getService('workflows');
 
     const [workflow, workflowCount] = await Promise.all([
-      workflowService.findById(id, { populate }),
+      workflowService.findById(id, { populate }).then(formatWorkflowToAdmin),
       workflowService.count(),
     ]);