@strapi/admin 4.10.2-alpha.0 → 4.10.4

package/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js

@@ -1,15 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
+
+import { getStageColorByHex } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
+
+export function ReviewWorkflowsStageEE({ color, name }) {
+  const { themeColorName } = getStageColorByHex(color);
 
-export function ReviewWorkflowsStageEE({ name }) {
   return (
-    <Typography fontWeight="regular" textColor="neutral700">
-      {name}
-    </Typography>
+    <Flex alignItems="center" gap={2} maxWidth={pxToRem(300)}>
+      <Box
+        height={2}
+        background={color}
+        borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+        hasRadius
+        shrink={0}
+        width={2}
+      />
+
+      <Typography fontWeight="regular" textColor="neutral700" ellipsis>
+        {name}
+      </Typography>
+    </Flex>
   );
 }
 
 ReviewWorkflowsStageEE.propTypes = {
+  color: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
 };

package/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumn.js

@@ -4,6 +4,7 @@ import { Typography } from '@strapi/design-system';
 
 import ReviewWorkflowsStage from '.';
 import getTrad from '../../../../../../../admin/src/content-manager/utils/getTrad';
+import { STAGE_COLOR_DEFAULT } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
 
 export default (layout) => {
   const { formatMessage } = useIntl();
@@ -24,7 +25,7 @@ export default (layout) => {
     key: '__strapi_reviewWorkflows_stage_temp_key__',
     name: 'strapi_reviewWorkflows_stage',
     fieldSchema: {
-      type: 'custom',
+      type: 'relation',
     },
     metadatas: {
       label: formatMessage({
@@ -32,7 +33,8 @@ export default (layout) => {
         defaultMessage: 'Review stage',
       }),
       searchable: false,
-      sortable: false,
+      sortable: true,
+      mainField: 'name',
     },
     cellFormatter({ strapi_reviewWorkflows_stage }) {
       // if entities are created e.g. through lifecycle methods
@@ -41,7 +43,9 @@ export default (layout) => {
         return <Typography textColor="neutral800">-</Typography>;
       }
 
-      return <ReviewWorkflowsStage name={strapi_reviewWorkflows_stage.name} />;
+      const { color, name } = strapi_reviewWorkflows_stage;
+
+      return <ReviewWorkflowsStage color={color ?? STAGE_COLOR_DEFAULT} name={name} />;
     },
   };
 };

package/ee/admin/content-manager/pages/EditView/InformationBox/InformationBoxEE.js

@@ -11,6 +11,8 @@ import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 
 import { useReviewWorkflows } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
+import { OptionColor } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor';
+import { SingleValueColor } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor';
 import Information from '../../../../../../admin/src/content-manager/pages/EditView/Information';
 
 const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
@@ -61,7 +63,10 @@ export function InformationBoxEE() {
       onSuccess() {
         toggleNotification({
           type: 'success',
-          message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+          message: {
+            id: 'content-manager.reviewWorkflows.stage.notification.saved',
+            defaultMessage: 'Success: Review stage updated',
+          },
         });
       },
     }
@@ -113,6 +118,8 @@ export function InformationBoxEE() {
             <ReactSelect
               components={{
                 LoadingIndicator: () => <Loader small />,
+                Option: OptionColor,
+                SingleValue: SingleValueColor,
               }}
               error={formattedError}
               inputId={ATTRIBUTE_NAME}
@@ -122,9 +129,19 @@ export function InformationBoxEE() {
               name={ATTRIBUTE_NAME}
               onChange={handleStageChange}
               options={
-                workflow ? workflow.stages.map(({ id, name }) => ({ value: id, label: name })) : []
+                workflow
+                  ? workflow.stages.map(({ id, color, name }) => ({
+                      value: id,
+                      label: name,
+                      color,
+                    }))
+                  : []
               }
-              value={{ value: activeWorkflowStage?.id, label: activeWorkflowStage?.name }}
+              value={{
+                value: activeWorkflowStage?.id,
+                label: activeWorkflowStage?.name,
+                color: activeWorkflowStage?.color,
+              }}
             />
 
             <FieldError />

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

@@ -18,12 +18,24 @@ import { Check } from '@strapi/icons';
 
 import { Stages } from './components/Stages';
 import { reducer, initialState } from './reducer';
-import { REDUX_NAMESPACE } from './constants';
+import { REDUX_NAMESPACE, DRAG_DROP_TYPES } 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';
+import { StageDragPreview } from './components/StageDragPreview';
+import { DragLayer } from '../../../../../../admin/src/components/DragLayer';
+
+function renderDragLayerItem({ type, item }) {
+  switch (type) {
+    case DRAG_DROP_TYPES.STAGE:
+      return <StageDragPreview {...item} />;
+
+    default:
+      return null;
+  }
+}
 
 export function ReviewWorkflowsPage() {
   const { trackUsage } = useTracking();
@@ -47,31 +59,15 @@ export function ReviewWorkflowsPage() {
 
   const { mutateAsync, isLoading } = useMutation(
     async ({ workflowId, stages }) => {
-      try {
-        const {
-          data: { data },
-        } = await put(`/admin/review-workflows/workflows/${workflowId}/stages`, {
-          data: stages,
-        });
+      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;
+      return data;
     },
     {
-      onError(error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      },
-
       onSuccess() {
         toggleNotification({
           type: 'success',
@@ -81,8 +77,19 @@ export function ReviewWorkflowsPage() {
     }
   );
 
-  const updateWorkflowStages = (workflowId, stages) => {
-    return mutateAsync({ workflowId, stages });
+  const updateWorkflowStages = async (workflowId, stages) => {
+    try {
+      const res = await mutateAsync({ workflowId, stages });
+
+      return res;
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
+      return null;
+    }
   };
 
   const submitForm = async () => {
@@ -135,6 +142,8 @@ export function ReviewWorkflowsPage() {
           })}
         />
         <Main tabIndex={-1}>
+          <DragLayer renderItem={renderDragLayerItem} />
+
           <FormikProvider value={formik}>
             <Form onSubmit={formik.handleSubmit}>
               <HeaderLayout

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

@@ -3,6 +3,7 @@ import {
   ACTION_DELETE_STAGE,
   ACTION_ADD_STAGE,
   ACTION_UPDATE_STAGE,
+  ACTION_UPDATE_STAGE_POSITION,
 } from '../constants';
 
 export function setWorkflows({ status, data }) {
@@ -40,3 +41,13 @@ export function updateStage(stageId, payload) {
     },
   };
 }
+
+export function updateStagePosition(oldIndex, newIndex) {
+  return {
+    type: ACTION_UPDATE_STAGE_POSITION,
+    payload: {
+      newIndex,
+      oldIndex,
+    },
+  };
+}

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Flex, Typography } from '@strapi/design-system';
+import { CarretDown } from '@strapi/icons';
+import { pxToRem } from '@strapi/helper-plugin';
+
+const Toggle = styled(Flex)`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+export function StageDragPreview({ name }) {
+  return (
+    <Flex
+      background="primary100"
+      borderStyle="dashed"
+      borderColor="primary600"
+      borderWidth="1px"
+      gap={3}
+      hasRadius
+      padding={3}
+      shadow="tableShadow"
+      width={pxToRem(300)}
+    >
+      <Toggle
+        alignItems="center"
+        background="neutral200"
+        borderRadius="50%"
+        height={6}
+        justifyContent="center"
+        width={6}
+      >
+        <CarretDown width={`${8 / 16}rem`} />
+      </Toggle>
+
+      <Typography fontWeight="bold">{name}</Typography>
+    </Flex>
+  );
+}
+
+StageDragPreview.propTypes = {
+  name: PropTypes.string.isRequired,
+};

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

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useField } from 'formik';
 import { useIntl } from 'react-intl';
@@ -7,84 +7,311 @@ import {
   Accordion,
   AccordionToggle,
   AccordionContent,
+  Box,
+  Field,
+  FieldLabel,
+  FieldError,
+  Flex,
   Grid,
   GridItem,
   IconButton,
   TextInput,
+  VisuallyHidden,
 } from '@strapi/design-system';
-import { useTracking } from '@strapi/helper-plugin';
-import { Trash } from '@strapi/icons';
+import { ReactSelect, useTracking } from '@strapi/helper-plugin';
+import { Drag, Trash } from '@strapi/icons';
+import { getEmptyImage } from 'react-dnd-html5-backend';
 
-import { deleteStage, updateStage } from '../../../actions';
+import { deleteStage, updateStagePosition, updateStage } from '../../../actions';
+import { getAvailableStageColors } from '../../../utils/colors';
+import { OptionColor } from './components/OptionColor';
+import { SingleValueColor } from './components/SingleValueColor';
+import { useDragAndDrop } from '../../../../../../../../../admin/src/content-manager/hooks';
+import { composeRefs } from '../../../../../../../../../admin/src/content-manager/utils';
+import { DRAG_DROP_TYPES } from '../../../constants';
 
-function Stage({ id, name, index, canDelete, isOpen: isOpenDefault = false }) {
+const AVAILABLE_COLORS = getAvailableStageColors();
+
+function StageDropPreview() {
+  return (
+    <Box
+      background="primary100"
+      borderStyle="dashed"
+      borderColor="primary600"
+      borderWidth="1px"
+      display="block"
+      hasRadius
+      padding={6}
+      shadow="tableShadow"
+    />
+  );
+}
+
+export function Stage({
+  id,
+  index,
+  canDelete,
+  canReorder,
+  isOpen: isOpenDefault = false,
+  stagesCount,
+}) {
+  /**
+   *
+   * @param {number} index
+   * @returns {string}
+   */
+  const getItemPos = (index) => `${index + 1} of ${stagesCount}`;
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleGrabStage = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: 'dnd.grab-item',
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,
+        },
+        {
+          item: nameField.value,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleDropStage = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: 'dnd.drop-item',
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`,
+        },
+        {
+          item: nameField.value,
+          position: getItemPos(index),
+        }
+      )
+    );
+  };
+
+  /**
+   *
+   * @param {number} index
+   * @returns {void}
+   */
+  const handleCancelDragStage = () => {
+    setLiveText(
+      formatMessage(
+        {
+          id: 'dnd.cancel-item',
+          defaultMessage: '{item}, dropped. Re-order cancelled.',
+        },
+        {
+          item: nameField.value,
+        }
+      )
+    );
+  };
+
+  const handleMoveStage = (newIndex, oldIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: 'dnd.reorder',
+          defaultMessage: '{item}, moved. New position in list: {position}.',
+        },
+        {
+          item: nameField.value,
+          position: getItemPos(newIndex),
+        }
+      )
+    );
+
+    dispatch(updateStagePosition(oldIndex, newIndex));
+  };
+
+  const [liveText, setLiveText] = React.useState(null);
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
-  const [isOpen, setIsOpen] = useState(isOpenDefault);
-  const fieldIdentifier = `stages.${index}.name`;
-  const [field, meta] = useField(fieldIdentifier);
   const dispatch = useDispatch();
+  const [isOpen, setIsOpen] = React.useState(isOpenDefault);
+  const [nameField, nameMeta] = useField(`stages.${index}.name`);
+  const [colorField, colorMeta] = useField(`stages.${index}.color`);
+  const [{ handlerId, isDragging, handleKeyDown }, stageRef, dropRef, dragRef, dragPreviewRef] =
+    useDragAndDrop(canReorder, {
+      index,
+      item: {
+        name: nameField.value,
+      },
+      onGrabItem: handleGrabStage,
+      onDropItem: handleDropStage,
+      onMoveItem: handleMoveStage,
+      onCancel: handleCancelDragStage,
+      type: DRAG_DROP_TYPES.STAGE,
+    });
+
+  const composedRef = composeRefs(stageRef, dropRef);
+
+  const colorOptions = AVAILABLE_COLORS.map(({ hex, name }) => ({
+    value: hex,
+    label: formatMessage(
+      {
+        id: 'Settings.review-workflows.stage.color.name',
+        defaultMessage: '{name}',
+      },
+      { name }
+    ),
+    color: hex,
+  }));
+  // TODO: the .toUpperCase() conversion can be removed once the hex code is normalized in
+  // the admin API
+  const colorValue = colorOptions.find(({ value }) => value === colorField.value.toUpperCase());
+
+  React.useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
 
   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>
+    <Box ref={composedRef}>
+      {liveText && <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>}
+
+      {isDragging ? (
+        <StageDropPreview />
+      ) : (
+        <Accordion
+          size="S"
+          variant="primary"
+          onToggle={() => {
+            setIsOpen(!isOpen);
+
+            if (!isOpen) {
+              trackUsage('willEditStage');
+            }
+          }}
+          expanded={isOpen}
+          shadow="tableShadow"
+        >
+          <AccordionToggle
+            title={nameField.value}
+            togglePosition="left"
+            action={
+              <Flex>
+                {canDelete && (
+                  <IconButton
+                    background="transparent"
+                    icon={<Trash />}
+                    label={formatMessage({
+                      id: 'Settings.review-workflows.stage.delete',
+                      defaultMessage: 'Delete stage',
+                    })}
+                    noBorder
+                    onClick={() => dispatch(deleteStage(id))}
+                  />
+                )}
+
+                <IconButton
+                  background="transparent"
+                  forwardedAs="div"
+                  role="button"
+                  noBorder
+                  tabIndex={0}
+                  data-handler-id={handlerId}
+                  ref={dragRef}
+                  label={formatMessage({
+                    id: 'Settings.review-workflows.stage.drag',
+                    defaultMessage: 'Drag',
+                  })}
+                  onClick={(e) => e.stopPropagation()}
+                  onKeyDown={handleKeyDown}
+                >
+                  <Drag />
+                </IconButton>
+              </Flex>
+            }
+          />
+          <AccordionContent padding={6} background="neutral0" hasRadius>
+            <Grid gap={4}>
+              <GridItem col={6}>
+                <TextInput
+                  {...nameField}
+                  id={nameField.name}
+                  label={formatMessage({
+                    id: 'Settings.review-workflows.stage.name.label',
+                    defaultMessage: 'Stage name',
+                  })}
+                  error={nameMeta.error ?? false}
+                  onChange={(event) => {
+                    nameField.onChange(event);
+                    dispatch(updateStage(id, { name: event.target.value }));
+                  }}
+                  required
+                />
+              </GridItem>
+
+              <GridItem col={6}>
+                <Field
+                  error={colorMeta?.error ?? false}
+                  name={colorField.name}
+                  id={colorField.name}
+                  required
+                >
+                  <Flex direction="column" gap={1} alignItems="stretch">
+                    <FieldLabel>
+                      {formatMessage({
+                        id: 'content-manager.reviewWorkflows.stage.color',
+                        defaultMessage: 'Color',
+                      })}
+                    </FieldLabel>
+
+                    <ReactSelect
+                      components={{ Option: OptionColor, SingleValue: SingleValueColor }}
+                      error={colorMeta?.error}
+                      inputId={colorField.name}
+                      name={colorField.name}
+                      options={colorOptions}
+                      onChange={({ value }) => {
+                        colorField.onChange({ target: { value } });
+                        dispatch(updateStage(id, { color: value }));
+                      }}
+                      // If no color was found in all the valid theme colors it means a user
+                      // has set a custom value e.g. through the content API. In that case we
+                      // display the custom color and a "Custom" label.
+                      value={
+                        colorValue ?? {
+                          value: colorField.value,
+                          label: formatMessage({
+                            id: 'Settings.review-workflows.stage.color.name.custom',
+                            defaultMessage: 'Custom',
+                          }),
+                          color: colorField.value,
+                        }
+                      }
+                    />
+
+                    <FieldError />
+                  </Flex>
+                </Field>
+              </GridItem>
+            </Grid>
+          </AccordionContent>
+        </Accordion>
+      )}
+    </Box>
   );
 }
 
-export { Stage };
-
 Stage.propTypes = PropTypes.shape({
   id: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
   canDelete: PropTypes.bool.isRequired,
+  canReorder: PropTypes.bool.isRequired,
+  stagesCount: PropTypes.number.isRequired,
 }).isRequired;