@strapi/admin 4.12.4 → 4.13.0-beta.0

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

@@ -0,0 +1,241 @@
+import * as React from 'react';
+
+import {
+  SingleSelect,
+  SingleSelectOption,
+  Field,
+  FieldError,
+  Flex,
+  Loader,
+  Typography,
+} from '@strapi/design-system';
+import {
+  useCMEditViewDataManager,
+  useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
+} from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import { useMutation } from 'react-query';
+
+import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
+import * as LimitsModal from '../../../../../../pages/SettingsPage/pages/ReviewWorkflows/components/LimitsModal';
+import {
+  CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME,
+  CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME,
+} from '../../../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
+import { useReviewWorkflows } from '../../../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
+import { getStageColorByHex } from '../../../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
+import { STAGE_ATTRIBUTE_NAME } from '../../constants';
+
+export function StageSelect() {
+  const {
+    initialData,
+    layout: { uid },
+    isSingleType,
+    onChange,
+  } = useCMEditViewDataManager();
+  const { put } = useFetchClient();
+  const { formatMessage } = useIntl();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const {
+    meta,
+    workflows: [workflow],
+    isLoading,
+  } = useReviewWorkflows({ filters: { contentTypes: uid } });
+  const { getFeature } = useLicenseLimits();
+  const [showLimitModal, setShowLimitModal] = React.useState(false);
+
+  const limits = getFeature('review-workflows');
+  // it is possible to rely on initialData here, because it always will
+  // be updated at the same time when modifiedData is updated, otherwise
+  // the entity is flagged as modified
+  const activeWorkflowStage = initialData?.[STAGE_ATTRIBUTE_NAME] ?? null;
+
+  const mutation = useMutation(
+    async ({ entityId, stageId, uid }) => {
+      const typeSlug = isSingleType ? 'single-types' : 'collection-types';
+
+      const {
+        data: { data: createdEntity },
+      } = await put(`/admin/content-manager/${typeSlug}/${uid}/${entityId}/stage`, {
+        data: { id: stageId },
+      });
+
+      // initialData and modifiedData have to stay in sync, otherwise the entity would be flagged
+      // as modified, which is what the boolean flag is for
+      onChange(
+        { target: { name: STAGE_ATTRIBUTE_NAME, value: createdEntity[STAGE_ATTRIBUTE_NAME] } },
+        true
+      );
+
+      return createdEntity;
+    },
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: {
+            id: 'content-manager.reviewWorkflows.stage.notification.saved',
+            defaultMessage: 'Review stage updated',
+          },
+        });
+      },
+    }
+  );
+
+  const handleChange = async ({ value: stageId }) => {
+    try {
+      /**
+       * If the current license has a limit:
+       * check if the total count of workflows exceeds that limit and display
+       * the limits modal.
+       *
+       * If the current license does not have a limit (e.g. offline license):
+       * do nothing (for now).
+       *
+       */
+
+      if (
+        limits?.[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME] &&
+        parseInt(limits[CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME], 10) < meta.workflowCount
+      ) {
+        setShowLimitModal('workflow');
+
+        /**
+         * If the current license has a limit:
+         * check if the total count of stages exceeds that limit and display
+         * the limits modal.
+         *
+         * If the current license does not have a limit (e.g. offline license):
+         * do nothing (for now).
+         *
+         */
+      } else if (
+        limits?.[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME] &&
+        parseInt(limits[CHARGEBEE_STAGES_PER_WORKFLOW_ENTITLEMENT_NAME], 10) < workflow.stages.length
+      ) {
+        setShowLimitModal('stage');
+      } else {
+        mutation.mutateAsync({
+          entityId: initialData.id,
+          stageId,
+          uid,
+        });
+      }
+    } catch (error) {
+      // react-query@v3: the error doesn't have to be handled here
+      // see: https://github.com/TanStack/query/issues/121
+    }
+  };
+
+  const { themeColorName } = activeWorkflowStage?.color
+    ? getStageColorByHex(activeWorkflowStage?.color)
+    : {};
+
+  return (
+    <>
+      <Field name={STAGE_ATTRIBUTE_NAME} id={STAGE_ATTRIBUTE_NAME}>
+        <Flex direction="column" gap={2} alignItems="stretch">
+          <SingleSelect
+            error={(mutation.error && formatAPIError(mutation.error)) || null}
+            name={STAGE_ATTRIBUTE_NAME}
+            id={STAGE_ATTRIBUTE_NAME}
+            value={activeWorkflowStage?.id}
+            onChange={(value) => handleChange({ value })}
+            label={formatMessage({
+              id: 'content-manager.reviewWorkflows.stage.label',
+              defaultMessage: 'Review stage',
+            })}
+            startIcon={
+              <Flex
+                as="span"
+                height={2}
+                background={activeWorkflowStage?.color}
+                borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+                hasRadius
+                shrink={0}
+                width={2}
+                marginRight="-3px"
+              />
+            }
+            // eslint-disable-next-line react/no-unstable-nested-components
+            customizeContent={() => (
+              <Flex as="span" justifyContent="space-between" alignItems="center" width="100%">
+                <Typography textColor="neutral800" ellipsis>
+                  {activeWorkflowStage?.name}
+                </Typography>
+                {isLoading ? <Loader small style={{ display: 'flex' }} /> : null}
+              </Flex>
+            )}
+          >
+            {workflow
+              ? workflow.stages.map(({ id, color, name }) => {
+                  const { themeColorName } = getStageColorByHex(color);
+
+                  return (
+                    <SingleSelectOption
+                      startIcon={
+                        <Flex
+                          height={2}
+                          background={color}
+                          borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+                          hasRadius
+                          shrink={0}
+                          width={2}
+                        />
+                      }
+                      value={id}
+                      textValue={name}
+                    >
+                      {name}
+                    </SingleSelectOption>
+                  );
+                })
+              : []}
+          </SingleSelect>
+          <FieldError />
+        </Flex>
+      </Field>
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'workflow'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.workflows.limit.title',
+            defaultMessage: 'You’ve reached the limit of workflows in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.workflows.limit.body',
+            defaultMessage: 'Delete a workflow or contact Sales to enable more workflows.',
+          })}
+        </LimitsModal.Body>
+      </LimitsModal.Root>
+
+      <LimitsModal.Root
+        isOpen={showLimitModal === 'stage'}
+        onClose={() => setShowLimitModal(false)}
+      >
+        <LimitsModal.Title>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.stages.limit.title',
+            defaultMessage: 'You have reached the limit of stages for this workflow in your plan',
+          })}
+        </LimitsModal.Title>
+
+        <LimitsModal.Body>
+          {formatMessage({
+            id: 'content-manager.reviewWorkflows.stages.limit.body',
+            defaultMessage: 'Try deleting some stages or contact Sales to enable more stages.',
+          })}
+        </LimitsModal.Body>
+      </LimitsModal.Root>
+    </>
+  );
+}

package/ee/admin/content-manager/pages/EditView/InformationBox/components/StageSelect/index.js

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

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

@@ -0,0 +1,2 @@
+export const STAGE_ATTRIBUTE_NAME = 'strapi_stage';
+export const ASSIGNEE_ATTRIBUTE_NAME = 'strapi_assignee';

package/ee/admin/content-manager/pages/ListSettingsView/constants.js

@@ -0,0 +1,7 @@
+export const REVIEW_WORKFLOW_STAGE_SORT_OPTION_NAME = {
+  value: 'strapi_stage[name]',
+  label: {
+    id: 'settings.defaultSortOrder.reviewWorkflows.label',
+    defaultMessage: 'Review Stage',
+  },
+};

package/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/ReviewWorkflowsAssigneeEE.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Typography } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import getTrad from '../../../../../../admin/src/content-manager/utils/getTrad';
+
+export function ReviewWorkflowsAssigneeEE({ firstname, lastname, displayname }) {
+  const { formatMessage } = useIntl();
+
+  // TODO align with changes from this PR, using the getDisplayName util
+  // https://github.com/strapi/strapi/pull/17043/
+  if (displayname) {
+    return (
+      <Typography textColor="neutral800">
+        {formatMessage(
+          {
+            id: getTrad(`containers.ListPage.reviewWorkflows.assignee`),
+            defaultMessage: '{displayname}',
+          },
+          { displayname }
+        )}
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography textColor="neutral800">
+      {formatMessage(
+        {
+          id: getTrad(`containers.ListPage.reviewWorkflows.assignee`),
+          defaultMessage: '{firstname} {lastname}',
+        },
+        { firstname, lastname }
+      )}
+    </Typography>
+  );
+}
+
+ReviewWorkflowsAssigneeEE.defaultProps = {
+  firstname: '',
+  lastname: '',
+  displayname: '',
+};
+
+ReviewWorkflowsAssigneeEE.propTypes = {
+  firstname: PropTypes.string,
+  lastname: PropTypes.string,
+  displayname: PropTypes.string,
+};

package/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/constants.js

@@ -1,24 +1,51 @@
 import getTrad from '../../../../../../admin/src/content-manager/utils/getTrad';
+import {
+  ASSIGNEE_ATTRIBUTE_NAME,
+  STAGE_ATTRIBUTE_NAME,
+} from '../../EditView/InformationBox/constants';
 
-export const REVIEW_WORKFLOW_COLUMNS_EE = {
-  key: '__strapi_stage_temp_key__',
-  name: 'strapi_stage',
-  fieldSchema: {
-    type: 'relation',
+export const REVIEW_WORKFLOW_COLUMNS_EE = [
+  {
+    key: `__${STAGE_ATTRIBUTE_NAME}_temp_key__`,
+    name: STAGE_ATTRIBUTE_NAME,
+    fieldSchema: {
+      type: 'relation',
+    },
+    metadatas: {
+      // formatMessage() will be applied when the column is rendered
+      label: {
+        id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.stage`),
+        defaultMessage: 'Review stage',
+      },
+      searchable: false,
+      sortable: true,
+      mainField: {
+        name: 'name',
+        schema: {
+          type: 'string',
+        },
+      },
+    },
   },
-  metadatas: {
-    // formatMessage() will be applied when the column is rendered
-    label: {
-      id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.stage`),
-      defaultMessage: 'Review stage',
+  {
+    key: `__${ASSIGNEE_ATTRIBUTE_NAME}_temp_key__`,
+    name: ASSIGNEE_ATTRIBUTE_NAME,
+    fieldSchema: {
+      type: 'relation',
     },
-    searchable: false,
-    sortable: true,
-    mainField: {
-      name: 'name',
-      schema: {
-        type: 'string',
+    metadatas: {
+      label: {
+        id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.assignee`),
+        defaultMessage: 'Assignee',
+      },
+      searchable: false,
+      sortable: true,
+      mainField: {
+        name: 'firstname',
+        schema: {
+          type: 'string',
+        },
       },
     },
   },
-};
+];

package/ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/index.js

@@ -1 +1,2 @@
 export * from './ReviewWorkflowsStageEE';
+export * from './ReviewWorkflowsAssigneeEE';

package/ee/server/constants/workflows.js

@@ -6,6 +6,7 @@ module.exports = {
   STAGE_MODEL_UID: 'admin::workflow-stage',
   STAGE_DEFAULT_COLOR: '#4945FF',
   ENTITY_STAGE_ATTRIBUTE: 'strapi_stage',
+  ENTITY_ASSIGNEE_ATTRIBUTE: 'strapi_assignee',
   MAX_WORKFLOWS: 200,
   MAX_STAGES_PER_WORKFLOW: 200,
   ERRORS: {

package/ee/server/controllers/index.js

@@ -8,4 +8,5 @@ module.exports = {
   admin: require('./admin'),
   workflows: require('./workflows'),
   stages: require('./workflows/stages'),
+  assignees: require('./workflows/assignees'),
 };

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

@@ -0,0 +1,44 @@
+'use strict';
+
+const { getService } = require('../../../utils');
+const { validateUpdateAssigneeOnEntity } = require('../../../validation/review-workflows');
+
+module.exports = {
+  /**
+   * Updates an entity's assignee.
+   * @async
+   * @param {Object} ctx - The Koa context object.
+   * @param {Object} ctx.params - An object containing the parameters from the request URL.
+   * @param {string} ctx.params.model_uid - The model UID of the entity.
+   * @param {string} ctx.params.id - The ID of the entity to update.
+   * @param {Object} ctx.request.body.data - Optional data object containing the new assignee ID for the entity.
+   * @param {string} ctx.request.body.data.id - The ID of the new assignee for the entity.
+   * @throws {ApplicationError} If review workflows is not activated on the specified model UID.
+   * @throws {ValidationError} If the `data` object in the request body fails to pass validation.
+   * @returns {Promise<void>} A promise that resolves when the entity's assignee has been updated.
+   */
+  async updateEntity(ctx) {
+    const assigneeService = getService('assignees');
+    const workflowService = getService('workflows');
+
+    const { model_uid: model, id } = ctx.params;
+
+    const { sanitizeOutput } = strapi
+      .plugin('content-manager')
+      .service('permission-checker')
+      .create({ userAbility: ctx.state.userAbility, model });
+
+    // TODO: check if user has update permission on the entity
+
+    const { id: assigneeId } = await validateUpdateAssigneeOnEntity(
+      ctx.request?.body?.data,
+      'You should pass a valid id to the body of the put request.'
+    );
+
+    await workflowService.assertContentTypeBelongsToWorkflow(model);
+
+    const entity = await assigneeService.updateEntityAssignee(id, model, assigneeId);
+
+    ctx.body = { data: await sanitizeOutput(entity) };
+  },
+};

package/ee/server/routes/review-workflows.js

@@ -142,5 +142,22 @@ module.exports = {
         ],
       },
     },
+    {
+      method: 'PUT',
+      path: '/content-manager/(collection|single)-types/:model_uid/:id/assignee',
+      handler: 'assignees.updateEntity',
+      config: {
+        middlewares: [enableFeatureMiddleware('review-workflows')],
+        policies: [
+          'admin::isAuthenticatedAdmin',
+          {
+            name: 'admin::hasPermissions',
+            config: {
+              actions: ['admin::users.read', 'admin::review-workflows.read'],
+            },
+          },
+        ],
+      },
+    },
   ],
 };

package/ee/server/services/index.js

@@ -8,6 +8,7 @@ module.exports = {
   'seat-enforcement': require('./seat-enforcement'),
   workflows: require('./review-workflows/workflows'),
   stages: require('./review-workflows/stages'),
+  assignees: require('./review-workflows/assignees'),
   'review-workflows': require('./review-workflows/review-workflows'),
   'review-workflows-validation': require('./review-workflows/validation'),
   'review-workflows-decorator': require('./review-workflows/entity-service-decorator'),

package/ee/server/services/review-workflows/assignees.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const { ApplicationError } = require('@strapi/utils').errors;
+const { isNil } = require('lodash/fp');
+const { ENTITY_ASSIGNEE_ATTRIBUTE } = require('../../constants/workflows');
+const { getService } = require('../../utils');
+
+module.exports = ({ strapi }) => {
+  const metrics = getService('review-workflows-metrics', { strapi });
+
+  return {
+    async findEntityAssigneeId(id, model) {
+      const entity = await strapi.entityService.findOne(model, id, {
+        populate: [ENTITY_ASSIGNEE_ATTRIBUTE],
+        fields: [],
+      });
+
+      return entity?.[ENTITY_ASSIGNEE_ATTRIBUTE]?.id ?? null;
+    },
+
+    /**
+     * Update the assignee of an entity
+     */
+    async updateEntityAssignee(id, model, assigneeId) {
+      if (isNil(assigneeId)) {
+        return this.deleteEntityAssignee(id, model);
+      }
+
+      const userExists = await getService('user', { strapi }).exists({ id: assigneeId });
+
+      if (!userExists) {
+        throw new ApplicationError(`Selected user does not exist`);
+      }
+
+      metrics.sendDidEditAssignee(await this.findEntityAssigneeId(id, model), assigneeId);
+
+      return strapi.entityService.update(model, id, {
+        data: { [ENTITY_ASSIGNEE_ATTRIBUTE]: assigneeId },
+        populate: [ENTITY_ASSIGNEE_ATTRIBUTE],
+        fields: [],
+      });
+    },
+
+    async deleteEntityAssignee(id, model) {
+      metrics.sendDidEditAssignee(await this.findEntityAssigneeId(id, model), null);
+
+      return strapi.entityService.update(model, id, {
+        data: { [ENTITY_ASSIGNEE_ATTRIBUTE]: null },
+        populate: [ENTITY_ASSIGNEE_ATTRIBUTE],
+        fields: [],
+      });
+    },
+  };
+};

package/ee/server/services/review-workflows/metrics/index.js

@@ -24,6 +24,10 @@ const sendDidEditWorkflow = async () => {
   strapi.telemetry.send('didEditWorkflow', {});
 };
 
+const sendDidEditAssignee = async (fromId, toId) => {
+  strapi.telemetry.send('didEditAssignee', { from: fromId, to: toId });
+};
+
 const sendDidSendReviewWorkflowPropertiesOnceAWeek = async (
   numberOfActiveWorkflows,
   avgStagesCount,
@@ -48,4 +52,5 @@ module.exports = {
   sendDidCreateWorkflow,
   sendDidEditWorkflow,
   sendDidSendReviewWorkflowPropertiesOnceAWeek,
+  sendDidEditAssignee,
 };

package/ee/server/services/review-workflows/review-workflows.js

@@ -8,6 +8,8 @@ const defaultStages = require('../../constants/default-stages.json');
 const defaultWorkflow = require('../../constants/default-workflow.json');
 const {
   ENTITY_STAGE_ATTRIBUTE,
+  ENTITY_ASSIGNEE_ATTRIBUTE,
+  STAGE_MODEL_UID,
   MAX_WORKFLOWS,
   MAX_STAGES_PER_WORKFLOW,
 } = require('../../constants/workflows');
@@ -52,19 +54,26 @@ function extendReviewWorkflowContentTypes({ strapi }) {
       );
       return contentType;
     };
-    const setStageAttribute = set(`attributes.${ENTITY_STAGE_ATTRIBUTE}`, {
-      writable: true,
-      private: false,
-      configurable: false,
-      visible: false,
-      useJoinTable: true, // We want a join table to persist data when downgrading to CE
-      type: 'relation',
-      relation: 'oneToOne',
-      target: 'admin::workflow-stage',
-    });
+
+    const setRelation = (path, target) =>
+      set(path, {
+        writable: true,
+        private: false,
+        configurable: false,
+        visible: false,
+        useJoinTable: true, // We want a join table to persist data when downgrading to CE
+        type: 'relation',
+        relation: 'oneToOne',
+        target,
+      });
+
+    const setReviewWorkflowAttributes = pipe([
+      setRelation(`attributes.${ENTITY_STAGE_ATTRIBUTE}`, STAGE_MODEL_UID),
+      setRelation(`attributes.${ENTITY_ASSIGNEE_ATTRIBUTE}`, 'admin::user'),
+    ]);
 
     const extendContentTypeIfCompatible = cond([
-      [assertContentTypeCompatibility, setStageAttribute],
+      [assertContentTypeCompatibility, setReviewWorkflowAttributes],
       [stubTrue, incompatibleContentTypeAlert],
     ]);
     strapi.container.get('content-types').extend(contentTypeUID, extendContentTypeIfCompatible);

package/ee/server/validation/review-workflows.js

@@ -66,8 +66,16 @@ const validateWorkflowUpdateSchema = yup.object().shape({
   contentTypes: validateContentTypes,
 });
 
+const validateUpdateAssigneeOnEntity = yup
+  .object()
+  .shape({
+    id: yup.number().integer().min(1).nullable(),
+  })
+  .required();
+
 module.exports = {
   validateWorkflowCreate: validateYupSchema(validateWorkflowCreateSchema),
   validateUpdateStageOnEntity: validateYupSchema(validateUpdateStageOnEntity),
+  validateUpdateAssigneeOnEntity: validateYupSchema(validateUpdateAssigneeOnEntity),
   validateWorkflowUpdate: validateYupSchema(validateWorkflowUpdateSchema),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.12.4",
+  "version": "4.13.0-beta.0",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -42,14 +42,14 @@
   "dependencies": {
     "@casl/ability": "^5.4.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@strapi/data-transfer": "4.12.4",
-    "@strapi/design-system": "1.8.2",
-    "@strapi/helper-plugin": "4.12.4",
-    "@strapi/icons": "1.8.2",
-    "@strapi/permissions": "4.12.4",
-    "@strapi/provider-audit-logs-local": "4.12.4",
-    "@strapi/typescript-utils": "4.12.4",
-    "@strapi/utils": "4.12.4",
+    "@strapi/data-transfer": "4.13.0-beta.0",
+    "@strapi/design-system": "1.9.0",
+    "@strapi/helper-plugin": "4.13.0-beta.0",
+    "@strapi/icons": "1.9.0",
+    "@strapi/permissions": "4.13.0-beta.0",
+    "@strapi/provider-audit-logs-local": "4.13.0-beta.0",
+    "@strapi/typescript-utils": "4.13.0-beta.0",
+    "@strapi/utils": "4.13.0-beta.0",
     "axios": "1.4.0",
     "bcryptjs": "2.4.3",
     "browserslist": "^4.17.3",
@@ -154,5 +154,5 @@
       }
     }
   },
-  "gitHead": "fafb3100823ab7773deaf4d4743013517f42f6ec"
+  "gitHead": "f1b8431a6a0b7f9bd9a8444adb56217bba91ec07"
 }