@strapi/admin 4.10.2-alpha.0 → 4.10.4

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { Flex, Typography } from '@strapi/design-system';
+
+import { getStageColorByHex } from '../../../../../utils/colors';
+
+export function OptionColor({ children, ...props }) {
+  const { color } = props.data;
+  const { themeColorName } = getStageColorByHex(color);
+
+  return (
+    <components.Option {...props}>
+      <Flex alignItems="center" gap={2}>
+        <Flex
+          height={2}
+          background={color}
+          borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+          hasRadius
+          shrink={0}
+          width={2}
+        />
+
+        <Typography textColor="neutral800" ellipsis>
+          {children}
+        </Typography>
+      </Flex>
+    </components.Option>
+  );
+}
+
+OptionColor.propTypes = {
+  children: PropTypes.node.isRequired,
+  data: PropTypes.shape({
+    color: PropTypes.string,
+  }).isRequired,
+};

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

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

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { Flex, Typography } from '@strapi/design-system';
+
+import { getStageColorByHex } from '../../../../../utils/colors';
+
+export function SingleValueColor({ children, ...props }) {
+  const { color } = props.data;
+  // in case an entity was not assigned to a stage (which displays an error)
+  // there is no color to display and we have to make sure the component does
+  // not crash
+  const { themeColorName } = color ? getStageColorByHex(color) : {};
+
+  return (
+    <components.SingleValue {...props}>
+      <Flex alignItems="center" gap={2}>
+        <Flex
+          height={2}
+          background={color}
+          borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+          hasRadius
+          shrink={0}
+          width={2}
+        />
+
+        <Typography textColor="neutral800" ellipsis>
+          {children}
+        </Typography>
+      </Flex>
+    </components.SingleValue>
+  );
+}
+
+SingleValueColor.defaultProps = {
+  children: null,
+};
+
+SingleValueColor.propTypes = {
+  children: PropTypes.node,
+  data: PropTypes.shape({
+    color: PropTypes.string,
+  }).isRequired,
+};

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

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

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

@@ -45,11 +45,12 @@ function Stages({ stages }) {
             return (
               <Box key={`stage-${id}`} as="li">
                 <Stage
-                  {...stage}
                   id={id}
                   index={index}
                   canDelete={stages.length > 1}
                   isOpen={!stage.id}
+                  canReorder={stages.length > 1}
+                  stagesCount={stages.length}
                 />
               </Box>
             );

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

@@ -1,6 +1,32 @@
+import { lightTheme } from '@strapi/design-system';
+
 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`;
+export const ACTION_UPDATE_STAGE_POSITION = `Settings/Review_Workflows/WORKFLOW_UPDATE_STAGE_POSITION`;
+
+export const STAGE_COLORS = {
+  primary600: 'Blue',
+  primary200: 'Lilac',
+  alternative600: 'Violet',
+  alternative200: 'Lavender',
+  success600: 'Green',
+  success200: 'Pale Green',
+  danger500: 'Cherry',
+  danger200: 'Pink',
+  warning600: 'Orange',
+  warning200: 'Yellow',
+  secondary600: 'Teal',
+  secondary200: 'Baby Blue',
+  neutral400: 'Gray',
+  neutral0: 'White',
+};
+
+export const STAGE_COLOR_DEFAULT = lightTheme.colors.primary600;
+
+export const DRAG_DROP_TYPES = {
+  STAGE: 'stage',
+};

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

@@ -6,6 +6,8 @@ import {
   ACTION_DELETE_STAGE,
   ACTION_ADD_STAGE,
   ACTION_UPDATE_STAGE,
+  ACTION_UPDATE_STAGE_POSITION,
+  STAGE_COLOR_DEFAULT,
 } from '../constants';
 
 export const initialState = {
@@ -29,8 +31,18 @@ export function reducer(state = initialState, action) {
 
         draft.status = status;
 
-        if (workflows) {
-          const defaultWorkflow = workflows[0];
+        if (workflows?.length > 0) {
+          let defaultWorkflow = workflows[0];
+
+          // A safety net in case a stage does not have a color assigned;
+          // this normallly should not happen
+          defaultWorkflow = {
+            ...defaultWorkflow,
+            stages: defaultWorkflow.stages.map((stage) => ({
+              ...stage,
+              color: stage?.color ?? STAGE_COLOR_DEFAULT,
+            })),
+          };
 
           draft.serverState.workflows = workflows;
           draft.serverState.currentWorkflow = defaultWorkflow;
@@ -69,6 +81,7 @@ export function reducer(state = initialState, action) {
 
         draft.clientState.currentWorkflow.data.stages.push({
           ...payload,
+          color: payload?.color ?? STAGE_COLOR_DEFAULT,
           __temp_key__: newTempKey,
         });
 
@@ -91,6 +104,27 @@ export function reducer(state = initialState, action) {
         break;
       }
 
+      case ACTION_UPDATE_STAGE_POSITION: {
+        const {
+          currentWorkflow: {
+            data: { stages },
+          },
+        } = state.clientState;
+        const { newIndex, oldIndex } = payload;
+
+        if (newIndex >= 0 && newIndex < stages.length) {
+          const stage = stages[oldIndex];
+          let newStages = [...stages];
+
+          newStages.splice(oldIndex, 1);
+          newStages.splice(newIndex, 0, stage);
+
+          draft.clientState.currentWorkflow.data.stages = newStages;
+        }
+
+        break;
+      }
+
       default:
         break;
     }

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

@@ -0,0 +1,39 @@
+import { lightTheme } from '@strapi/design-system';
+
+import { STAGE_COLORS } from '../constants';
+
+export function getStageColorByHex(hex) {
+  if (!hex) {
+    return null;
+  }
+
+  // there are multiple colors with the same hex code in the design tokens. In order to find
+  // the correct one we have to find all matching colors and then check, which ones are usable
+  // for stages.
+  const themeColors = Object.entries(lightTheme.colors).filter(
+    ([, value]) => value.toUpperCase() === hex.toUpperCase()
+  );
+  const themeColorName = themeColors.reduce((acc, [name]) => {
+    if (STAGE_COLORS?.[name]) {
+      acc = name;
+    }
+
+    return acc;
+  }, null);
+
+  if (!themeColorName) {
+    return null;
+  }
+
+  return {
+    themeColorName,
+    name: STAGE_COLORS[themeColorName],
+  };
+}
+
+export function getAvailableStageColors() {
+  return Object.entries(STAGE_COLORS).map(([themeColorName, name]) => ({
+    hex: lightTheme.colors[themeColorName].toUpperCase(),
+    name,
+  }));
+}

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

@@ -19,6 +19,15 @@ export function getWorkflowValidationSchema({ formatMessage }) {
               defaultMessage: 'Name can not be longer than 255 characters',
             })
           ),
+        color: yup
+          .string()
+          .required(
+            formatMessage({
+              id: 'Settings.review-workflows.validation.stage.color',
+              defaultMessage: 'Color is required',
+            })
+          )
+          .matches(/^#(?:[0-9a-fA-F]{3}){1,2}$/i),
       })
     ),
   });

package/ee/server/constants/workflows.js

@@ -4,5 +4,6 @@
 module.exports = {
   WORKFLOW_MODEL_UID: 'admin::workflow',
   STAGE_MODEL_UID: 'admin::workflow-stage',
+  STAGE_DEFAULT_COLOR: '#4945FF',
   ENTITY_STAGE_ATTRIBUTE: 'strapi_reviewWorkflows_stage',
 };

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

@@ -1,5 +1,7 @@
 'use strict';
 
+const { STAGE_DEFAULT_COLOR } = require('../../constants/workflows');
+
 module.exports = {
   schema: {
     collectionName: 'strapi_workflows_stages',
@@ -24,6 +26,11 @@ module.exports = {
         type: 'string',
         configurable: false,
       },
+      color: {
+        type: 'string',
+        configurable: false,
+        default: STAGE_DEFAULT_COLOR,
+      },
       workflow: {
         type: 'relation',
         target: 'admin::workflow',

package/ee/server/controllers/authentication/middlewares.js

@@ -95,7 +95,7 @@ const redirectWithAuth = (ctx) => {
     params: { provider },
   } = ctx;
   const redirectUrls = utils.getPrefixedRedirectUrls();
-  const domain = strapi.config.get('server.admin.auth.domain');
+  const domain = strapi.config.get('admin.auth.domain');
   const { user } = ctx.state;
 
   const jwt = getService('token').createJwtToken(user);

package/ee/server/migrations/review-workflows-stages-color.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const { STAGE_DEFAULT_COLOR } = require('../constants/workflows');
+
+async function migrateReviewWorkflowStagesColor({ oldContentTypes, contentTypes }) {
+  // Look for CT's color attribute
+  const hadColor = !!oldContentTypes?.['admin::workflow-stage']?.attributes?.color;
+  const hasColor = !!contentTypes['admin::workflow-stage']?.attributes?.color;
+
+  // Add the default stage color if color attribute was added
+  if (!hadColor || hasColor) {
+    await strapi.query('admin::workflow-stage').updateMany({
+      data: {
+        color: STAGE_DEFAULT_COLOR,
+      },
+    });
+  }
+}
+
+module.exports = migrateReviewWorkflowStagesColor;

package/ee/server/register.js

@@ -3,6 +3,7 @@
 const { features } = require('@strapi/strapi/lib/utils/ee');
 const executeCERegister = require('../../server/register');
 const migrateAuditLogsTable = require('./migrations/audit-logs-table');
+const migrateReviewWorkflowStagesColor = require('./migrations/review-workflows-stages-color');
 const createAuditLogsService = require('./services/audit-logs');
 const reviewWorkflowsMiddlewares = require('./middlewares/review-workflows');
 const { getService } = require('./utils');
@@ -17,6 +18,7 @@ module.exports = async ({ strapi }) => {
     await auditLogsService.register();
   }
   if (features.isEnabled('review-workflows')) {
+    strapi.hook('strapi::content-types.afterSync').register(migrateReviewWorkflowStagesColor);
     const reviewWorkflowService = getService('review-workflows');
 
     reviewWorkflowsMiddlewares.contentTypeMiddleware(strapi);

package/ee/server/routes/audit-logs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const { enableFeatureMiddleware } = require('./utils');
+
+module.exports = {
+  type: 'admin',
+  routes: [
+    {
+      method: 'GET',
+      path: '/audit-logs',
+      handler: 'auditLogs.findMany',
+      config: {
+        middlewares: [enableFeatureMiddleware('audit-logs')],
+        policies: [
+          'admin::isAuthenticatedAdmin',
+          {
+            name: 'admin::hasPermissions',
+            config: {
+              actions: ['admin::audit-logs.read'],
+            },
+          },
+        ],
+      },
+    },
+    {
+      method: 'GET',
+      path: '/audit-logs/:id',
+      handler: 'auditLogs.findOne',
+      config: {
+        middlewares: [enableFeatureMiddleware('audit-logs')],
+        policies: [
+          'admin::isAuthenticatedAdmin',
+          {
+            name: 'admin::hasPermissions',
+            config: {
+              actions: ['admin::audit-logs.read'],
+            },
+          },
+        ],
+      },
+    },
+  ],
+};

package/ee/server/routes/index.js

@@ -1,229 +1,8 @@
 'use strict';
 
-const { features } = require('@strapi/strapi/lib/utils/ee');
-
-const enableFeatureMiddleware = (featureName) => (ctx, next) => {
-  if (features.isEnabled(featureName)) {
-    return next();
-  }
-
-  ctx.status = 404;
+module.exports = {
+  sso: require('./sso'),
+  'license-limit': require('./license-limit'),
+  'audit-logs': require('./audit-logs'),
+  'review-workflows': require('./review-workflows'),
 };
-
-module.exports = [
-  // SSO
-  {
-    method: 'GET',
-    path: '/providers',
-    handler: 'authentication.getProviders',
-    config: {
-      middlewares: [enableFeatureMiddleware('sso')],
-      auth: false,
-    },
-  },
-  {
-    method: 'GET',
-    path: '/connect/:provider',
-    handler: 'authentication.providerLogin',
-    config: {
-      middlewares: [enableFeatureMiddleware('sso')],
-      auth: false,
-    },
-  },
-  {
-    method: 'POST',
-    path: '/connect/:provider',
-    handler: 'authentication.providerLogin',
-    config: {
-      middlewares: [enableFeatureMiddleware('sso')],
-      auth: false,
-    },
-  },
-  {
-    method: 'GET',
-    path: '/providers/options',
-    handler: 'authentication.getProviderLoginOptions',
-    config: {
-      middlewares: [enableFeatureMiddleware('sso')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        { name: 'admin::hasPermissions', config: { actions: ['admin::provider-login.read'] } },
-      ],
-    },
-  },
-  {
-    method: 'PUT',
-    path: '/providers/options',
-    handler: 'authentication.updateProviderLoginOptions',
-    config: {
-      middlewares: [enableFeatureMiddleware('sso')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        { name: 'admin::hasPermissions', config: { actions: ['admin::provider-login.update'] } },
-      ],
-    },
-  },
-
-  // Audit logs
-  {
-    method: 'GET',
-    path: '/audit-logs',
-    handler: 'auditLogs.findMany',
-    config: {
-      middlewares: [enableFeatureMiddleware('audit-logs')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::audit-logs.read'],
-          },
-        },
-      ],
-    },
-  },
-  {
-    method: 'GET',
-    path: '/audit-logs/:id',
-    handler: 'auditLogs.findOne',
-    config: {
-      middlewares: [enableFeatureMiddleware('audit-logs')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::audit-logs.read'],
-          },
-        },
-      ],
-    },
-  },
-
-  // License limit infos
-  {
-    method: 'GET',
-    path: '/license-limit-information',
-    handler: 'admin.licenseLimitInformation',
-    config: {
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: [
-              'admin::users.create',
-              'admin::users.read',
-              'admin::users.update',
-              'admin::users.delete',
-            ],
-          },
-        },
-      ],
-    },
-  },
-
-  // Review workflow
-  {
-    method: 'GET',
-    path: '/review-workflows/workflows',
-    handler: 'workflows.find',
-    config: {
-      middlewares: [enableFeatureMiddleware('review-workflows')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::review-workflows.read'],
-          },
-        },
-      ],
-    },
-  },
-  {
-    method: 'GET',
-    path: '/review-workflows/workflows/:id',
-    handler: 'workflows.findById',
-    config: {
-      middlewares: [enableFeatureMiddleware('review-workflows')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::review-workflows.read'],
-          },
-        },
-      ],
-    },
-  },
-  {
-    method: 'GET',
-    path: '/review-workflows/workflows/:workflow_id/stages',
-    handler: 'stages.find',
-    config: {
-      middlewares: [enableFeatureMiddleware('review-workflows')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::review-workflows.read'],
-          },
-        },
-      ],
-    },
-  },
-  {
-    method: 'PUT',
-    path: '/review-workflows/workflows/:workflow_id/stages',
-    handler: 'stages.replace',
-    config: {
-      middlewares: [enableFeatureMiddleware('review-workflows')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::review-workflows.read'],
-          },
-        },
-      ],
-    },
-  },
-  {
-    method: 'GET',
-    path: '/review-workflows/workflows/:workflow_id/stages/:id',
-    handler: 'stages.findById',
-    config: {
-      middlewares: [enableFeatureMiddleware('review-workflows')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::review-workflows.read'],
-          },
-        },
-      ],
-    },
-  },
-  {
-    method: 'PUT',
-    path: '/content-manager/(collection|single)-types/:model_uid/:id/stage',
-    handler: 'stages.updateEntity',
-    config: {
-      middlewares: [enableFeatureMiddleware('review-workflows')],
-      policies: [
-        'admin::isAuthenticatedAdmin',
-        {
-          name: 'admin::hasPermissions',
-          config: {
-            actions: ['admin::review-workflows.read'],
-          },
-        },
-      ],
-    },
-  },
-];

package/ee/server/routes/license-limit.js

@@ -0,0 +1,29 @@
+'use strict';
+
+module.exports = {
+  type: 'admin',
+  routes: [
+    // License limit infos
+    {
+      method: 'GET',
+      path: '/license-limit-information',
+      handler: 'admin.licenseLimitInformation',
+      config: {
+        policies: [
+          'admin::isAuthenticatedAdmin',
+          {
+            name: 'admin::hasPermissions',
+            config: {
+              actions: [
+                'admin::users.create',
+                'admin::users.read',
+                'admin::users.update',
+                'admin::users.delete',
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+};