@strapi/admin 4.13.6 → 4.14.0-beta.0

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

@@ -9,25 +9,91 @@ import {
   Grid,
   GridItem,
   IconButton,
+  MultiSelect,
+  MultiSelectGroup,
+  MultiSelectOption,
   SingleSelect,
   SingleSelectOption,
   TextInput,
+  Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { useTracking } from '@strapi/helper-plugin';
-import { Drag, Trash } from '@strapi/icons';
+import { Menu, MenuItem } from '@strapi/design-system/v2';
+import {
+  ConfirmDialog,
+  useNotification,
+  NotAllowedInput,
+  useTracking,
+} from '@strapi/helper-plugin';
+import { Duplicate, Drag, More } from '@strapi/icons';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 import { useDragAndDrop } from '../../../../../../../../../admin/src/content-manager/hooks';
 import { composeRefs } from '../../../../../../../../../admin/src/content-manager/utils';
-import { deleteStage, updateStage, updateStagePosition } from '../../../actions';
+import {
+  cloneStage,
+  deleteStage,
+  updateStage,
+  updateStagePosition,
+  updateStages,
+} from '../../../actions';
 import { DRAG_DROP_TYPES } from '../../../constants';
+import { selectRoles } from '../../../selectors';
 import { getAvailableStageColors, getStageColorByHex } from '../../../utils/colors';
 
+const NestedOption = styled(MultiSelectOption)`
+  padding-left: ${({ theme }) => theme.spaces[7]};
+`;
+
+// Grow the size of the permission Select
+const PermissionWrapper = styled(Flex)`
+  > * {
+    flex-grow: 1;
+  }
+`;
+
+const DeleteMenuItem = styled(MenuItem)`
+  color: ${({ theme }) => theme.colors.danger600};
+`;
+
+// Removing the font-size from the child-span aligns the
+// more icon vertically
+const ContextMenuTrigger = styled(Menu.Trigger)`
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  > span {
+    font-size: 0;
+  }
+`;
+
+// As soon as either `as` or `forwardedAs` is set, the component
+// resets some styles and e.g. the `hasBorder` prop no longer works,
+// which is why this bit of CSS has been added manually ¯\_(ツ)_/¯
+const DragIconButton = styled(IconButton)`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  display: flex;
+  justify-content: center;
+
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  svg {
+    height: auto;
+    width: ${({ theme }) => theme.spaces[3]}};
+  }
+`;
+
 const AVAILABLE_COLORS = getAvailableStageColors();
 
 function StageDropPreview() {
@@ -137,13 +203,23 @@ export function Stage({
     dispatch(updateStagePosition(oldIndex, newIndex));
   };
 
+  const handleApplyPermissionsToAllStages = () => {
+    setIsApplyAllConfirmationOpen(true);
+  };
+
   const [liveText, setLiveText] = React.useState(null);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const dispatch = useDispatch();
+  const toggleNotification = useNotification();
   const [isOpen, setIsOpen] = React.useState(isOpenDefault);
+  const [isApplyAllConfirmationOpen, setIsApplyAllConfirmationOpen] = React.useState(false);
   const [nameField, nameMeta, nameHelper] = useField(`stages.${index}.name`);
   const [colorField, colorMeta, colorHelper] = useField(`stages.${index}.color`);
+  const [permissionsField, permissionsMeta, permissionsHelper] = useField(
+    `stages.${index}.permissions`
+  );
+  const roles = useSelector(selectRoles);
   const [{ handlerId, isDragging, handleKeyDown }, stageRef, dropRef, dragRef, dragPreviewRef] =
     useDragAndDrop(canReorder, {
       index,
@@ -171,12 +247,17 @@ export function Stage({
     color: hex,
   }));
 
+  const { themeColorName } = getStageColorByHex(colorField.value) ?? {};
+
+  const filteredRoles = roles
+    // Super admins always have permissions to do everything and therefore
+    // there is no point for this role to show up in the role combobox
+    .filter((role) => role.code !== 'strapi-super-admin');
+
   React.useEffect(() => {
     dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index]);
 
-  const { themeColorName } = getStageColorByHex(colorField.value) ?? {};
-
   return (
     <Box ref={composedRef}>
       {liveText && <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>}
@@ -196,7 +277,7 @@ export function Stage({
           }}
           expanded={isOpen}
           shadow="tableShadow"
-          error={nameMeta.error ?? colorMeta?.error ?? false}
+          error={nameMeta.error ?? colorMeta?.error ?? permissionsMeta?.error ?? false}
           hasErrorMessage={false}
         >
           <AccordionToggle
@@ -205,23 +286,47 @@ export function Stage({
             action={
               (canDelete || canUpdate) && (
                 <Flex>
-                  {canDelete && (
-                    <IconButton
-                      background="transparent"
-                      icon={<Trash />}
-                      label={formatMessage({
-                        id: 'Settings.review-workflows.stage.delete',
-                        defaultMessage: 'Delete stage',
-                      })}
-                      noBorder
-                      onClick={() => dispatch(deleteStage(id))}
-                    />
-                  )}
+                  <Menu.Root>
+                    <ContextMenuTrigger size="S" endIcon={null} paddingLeft={2} paddingRight={2}>
+                      <More aria-hidden focusable={false} />
+                      <VisuallyHidden as="span">
+                        {formatMessage({
+                          id: '[tbdb].components.DynamicZone.more-actions',
+                          defaultMessage: 'More actions',
+                        })}
+                      </VisuallyHidden>
+                    </ContextMenuTrigger>
+                    {/* z-index needs to be as big as the one defined for the wrapper in Stages, otherwise the menu
+                     * disappears behind the accordion
+                     */}
+                    <Menu.Content popoverPlacement="bottom-end" zIndex={2}>
+                      <Menu.SubRoot>
+                        {canUpdate && (
+                          <MenuItem onClick={() => dispatch(cloneStage(id))}>
+                            {formatMessage({
+                              id: 'Settings.review-workflows.stage.delete',
+                              defaultMessage: 'Duplicate stage',
+                            })}
+                          </MenuItem>
+                        )}
+
+                        {canDelete && (
+                          <DeleteMenuItem onClick={() => dispatch(deleteStage(id))}>
+                            {formatMessage({
+                              id: 'Settings.review-workflows.stage.delete',
+                              defaultMessage: 'Delete',
+                            })}
+                          </DeleteMenuItem>
+                        )}
+                      </Menu.SubRoot>
+                    </Menu.Content>
+                  </Menu.Root>
 
                   {canUpdate && (
-                    <IconButton
+                    <DragIconButton
                       background="transparent"
                       forwardedAs="div"
+                      hasRadius
                       role="button"
                       noBorder
                       tabIndex={0}
@@ -235,7 +340,7 @@ export function Stage({
                       onKeyDown={handleKeyDown}
                     >
                       <Drag />
-                    </IconButton>
+                    </DragIconButton>
                   )}
                 </Flex>
               )
@@ -315,10 +420,141 @@ export function Stage({
                   })}
                 </SingleSelect>
               </GridItem>
+
+              <GridItem col={6}>
+                {filteredRoles.length === 0 ? (
+                  <NotAllowedInput
+                    description={{
+                      id: 'Settings.review-workflows.stage.permissions.noPermissions.description',
+                      defaultMessage: 'You don’t have the permission to see roles',
+                    }}
+                    intlLabel={{
+                      id: 'Settings.review-workflows.stage.permissions.label',
+                      defaultMessage: 'Roles that can change this stage',
+                    }}
+                    name={permissionsField.name}
+                  />
+                ) : (
+                  <Flex alignItems="flex-end" gap={3}>
+                    <PermissionWrapper grow={1}>
+                      <MultiSelect
+                        {...permissionsField}
+                        disabled={!canUpdate}
+                        error={permissionsMeta.error ?? false}
+                        id={permissionsField.name}
+                        label={formatMessage({
+                          id: 'Settings.review-workflows.stage.permissions.label',
+                          defaultMessage: 'Roles that can change this stage',
+                        })}
+                        onChange={(values) => {
+                          // Because the select components expects strings for values, but
+                          // the yup schema validates we are sending full permission objects to the API,
+                          // we must coerce the string value back to an object
+                          const permissions = values.map((value) => ({
+                            role: parseInt(value, 10),
+                            action: 'admin::review-workflows.stage.transition',
+                          }));
+
+                          permissionsHelper.setValue(permissions);
+                          dispatch(updateStage(id, { permissions }));
+                        }}
+                        placeholder={formatMessage({
+                          id: 'Settings.review-workflows.stage.permissions.placeholder',
+                          defaultMessage: 'Select a role',
+                        })}
+                        required
+                        // The Select component expects strings for values
+                        value={(permissionsField.value ?? []).map(
+                          (permission) => `${permission.role}`
+                        )}
+                        withTags
+                      >
+                        {[
+                          {
+                            label: formatMessage({
+                              id: 'Settings.review-workflows.stage.permissions.allRoles.label',
+                              defaultMessage: 'All roles',
+                            }),
+
+                            children: filteredRoles.map((role) => ({
+                              value: `${role.id}`,
+                              label: role.name,
+                            })),
+                          },
+                        ].map((role) => {
+                          if ('children' in role) {
+                            return (
+                              <MultiSelectGroup
+                                key={role.label}
+                                label={role.label}
+                                values={role.children.map((child) => child.value)}
+                              >
+                                {role.children.map((role) => {
+                                  return (
+                                    <NestedOption key={role.value} value={role.value}>
+                                      {role.label}
+                                    </NestedOption>
+                                  );
+                                })}
+                              </MultiSelectGroup>
+                            );
+                          }
+
+                          return (
+                            <MultiSelectOption key={role.value} value={role.value}>
+                              {role.label}
+                            </MultiSelectOption>
+                          );
+                        })}
+                      </MultiSelect>
+                    </PermissionWrapper>
+
+                    <IconButton
+                      disabled={!canUpdate}
+                      icon={<Duplicate />}
+                      label={formatMessage({
+                        id: 'Settings.review-workflows.stage.permissions.apply.label',
+                        defaultMessage: 'Apply to all stages',
+                      })}
+                      size="L"
+                      variant="secondary"
+                      onClick={() => handleApplyPermissionsToAllStages(permissionsField.value)}
+                    />
+                  </Flex>
+                )}
+              </GridItem>
             </Grid>
           </AccordionContent>
         </Accordion>
       )}
+
+      <ConfirmDialog.Root
+        iconRightButton={null}
+        isOpen={isApplyAllConfirmationOpen}
+        onToggleDialog={() => setIsApplyAllConfirmationOpen(false)}
+        onConfirm={() => {
+          dispatch(updateStages({ permissions: permissionsField.value }));
+          setIsApplyAllConfirmationOpen(false);
+          toggleNotification({
+            type: 'success',
+            message: formatMessage({
+              id: 'Settings.review-workflows.page.edit.confirm.stages.permissions.copy.success',
+              defaultMessage: 'Applied roles to all other stages of the workflow',
+            }),
+          });
+        }}
+        variantRightButton="primary"
+      >
+        <ConfirmDialog.Body>
+          <Typography textAlign="center" variant="omega">
+            {formatMessage({
+              id: 'Settings.review-workflows.page.edit.confirm.stages.permissions.copy',
+              defaultMessage:
+                'Roles that can change that stage will be applied to all the other stages.',
+            })}
+          </Typography>
+        </ConfirmDialog.Body>
+      </ConfirmDialog.Root>
     </Box>
   );
 }

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

@@ -13,10 +13,11 @@ import { useCollator } from '@strapi/helper-plugin';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { updateWorkflow } from '../../actions';
+import { selectContentTypes, selectCurrentWorkflow, selectWorkflows } from '../../selectors';
 
 const NestedOption = styled(MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
@@ -26,14 +27,12 @@ const ContentTypeTakeNotice = styled(Typography)`
   font-style: italic;
 `;
 
-export function WorkflowAttributes({
-  canUpdate,
-  contentTypes: { collectionTypes, singleTypes },
-  currentWorkflow,
-  workflows,
-}) {
+export function WorkflowAttributes({ canUpdate }) {
   const { formatMessage, locale } = useIntl();
   const dispatch = useDispatch();
+  const { collectionTypes, singleTypes } = useSelector(selectContentTypes);
+  const currentWorkflow = useSelector(selectCurrentWorkflow);
+  const workflows = useSelector(selectWorkflows);
   const [nameField, nameMeta, nameHelper] = useField('name');
   const [contentTypesField, contentTypesMeta, contentTypesHelper] = useField('contentTypes');
   const formatter = useCollator(locale, {
@@ -97,7 +96,7 @@ export function WorkflowAttributes({
                       id: 'Settings.review-workflows.workflow.contentTypes.collectionTypes.label',
                       defaultMessage: 'Collection Types',
                     }),
-                    children: collectionTypes
+                    children: [...collectionTypes]
                       .sort((a, b) => formatter.compare(a.info.displayName, b.info.displayName))
                       .map((contentType) => ({
                         label: contentType.info.displayName,
@@ -114,7 +113,7 @@ export function WorkflowAttributes({
                       id: 'Settings.review-workflows.workflow.contentTypes.singleTypes.label',
                       defaultMessage: 'Single Types',
                     }),
-                    children: singleTypes.map((contentType) => ({
+                    children: [...singleTypes].map((contentType) => ({
                       label: contentType.info.displayName,
                       value: contentType.uid,
                     })),
@@ -178,24 +177,10 @@ export function WorkflowAttributes({
   );
 }
 
-const ContentTypeType = PropTypes.shape({
-  uid: PropTypes.string.isRequired,
-  info: PropTypes.shape({
-    displayName: PropTypes.string.isRequired,
-  }).isRequired,
-});
-
 WorkflowAttributes.defaultProps = {
   canUpdate: true,
-  currentWorkflow: undefined,
 };
 
 WorkflowAttributes.propTypes = {
   canUpdate: PropTypes.bool,
-  contentTypes: PropTypes.shape({
-    collectionTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
-    singleTypes: PropTypes.arrayOf(ContentTypeType).isRequired,
-  }).isRequired,
-  currentWorkflow: PropTypes.object,
-  workflows: PropTypes.array.isRequired,
 };

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

@@ -3,10 +3,16 @@ import { lightTheme } from '@strapi/design-system';
 export const REDUX_NAMESPACE = 'settings_review-workflows';
 
 export const ACTION_RESET_WORKFLOW = `Settings/Review_Workflows/RESET_WORKFLOW`;
+export const ACTION_SET_CONTENT_TYPES = `Settings/Review_Workflows/SET_CONTENT_TYPES`;
+export const ACTION_SET_IS_LOADING = `Settings/Review_Workflows/SET_IS_LOADING`;
+export const ACTION_SET_ROLES = `Settings/Review_Workflows/SET_ROLES`;
 export const ACTION_SET_WORKFLOW = `Settings/Review_Workflows/SET_WORKFLOW`;
+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_CLONE_STAGE = `Settings/Review_Workflows/WORKFLOW_CLONE_STAGE`;
 export const ACTION_UPDATE_STAGE = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE`;
+export const ACTION_UPDATE_STAGES = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGES`;
 export const ACTION_UPDATE_STAGE_POSITION = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE_POSITION`;
 export const ACTION_UPDATE_WORKFLOW = `Settings/Review_Workflows/WORKFLOW_UPDATE`;
 

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

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { useFetchClient } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 
@@ -20,18 +22,26 @@ export function useReviewWorkflows(params = {}) {
     }
   );
 
-  let workflows = [];
+  // the return value needs to be memoized, because intantiating
+  // an empty array as default value would lead to an unstable return
+  // value, which later on triggers infinite loops if used in the
+  // dependency arrays of other hooks
+
+  const workflows = React.useMemo(() => {
+    if (id && data?.data) {
+      return [data.data];
+    }
+    if (Array.isArray(data?.data)) {
+      return data.data;
+    }
 
-  if (id && data?.data) {
-    workflows = [data.data];
-  } else if (Array.isArray(data?.data)) {
-    workflows = data.data;
-  }
+    return [];
+  }, [data?.data, id]);
 
   return {
     // meta contains e.g. the total of all workflows. we can not use
     // the pagination object here, because the list is not paginated.
-    meta: data?.meta ?? {},
+    meta: React.useMemo(() => data?.meta ?? {}, [data?.meta]),
     workflows,
     isLoading,
     status,

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+
+export function useReviewWorkflowsStages({ id, layout } = {}, queryOptions = {}) {
+  const { kind, uid } = layout;
+  const slug = kind === 'collectionType' ? 'collection-types' : 'single-types';
+
+  const { get } = useFetchClient();
+
+  const { data, isLoading, refetch } = useQuery(
+    ['content-manager', slug, layout.uid, id, 'stages'],
+    async () => {
+      const { data } = await get(`/admin/content-manager/${slug}/${uid}/${id}/stages`);
+
+      return data;
+    },
+    queryOptions
+  );
+
+  // these return values need to be memoized, because the default value
+  // would lead to infinite rendering loops when used in a dependency array
+  // on an effect
+  const meta = React.useMemo(() => data?.meta ?? {}, [data?.meta]);
+  const stages = React.useMemo(() => data?.data ?? [], [data?.data]);
+
+  return {
+    // meta contains e.g. the total of all workflows. we can not use
+    // the pagination object here, because the list is not paginated.
+    meta,
+    stages,
+    isLoading,
+    refetch,
+  };
+}