@strapi/review-workflows 0.0.0-next.23a591758a1d192f794079bbe4821ef8d26e1555 → 0.0.0-next.24165c9d5cbc756c03fe23bc491569c77973f5ac

package/dist/admin/chunks/{index-C5IeISWp.js → index-C-Z_kiBH.js}

@@ -3,10 +3,10 @@
 var designSystem = require('@strapi/design-system');
 var jsxRuntime = require('react/jsx-runtime');
 var strapiAdmin$1 = require('@strapi/content-manager/strapi-admin');
-var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
+var reactIntl = require('react-intl');
 var reactRedux = require('react-redux');
 var ee = require('@strapi/admin/strapi-admin/ee');
 var icons = require('@strapi/icons');
@@ -175,7 +175,7 @@ const isBaseQueryError = (error)=>{
 const STAGE_ATTRIBUTE_NAME = 'strapi_stage';
 const ASSIGNEE_ATTRIBUTE_NAME = 'strapi_assignee';
 
-const AssigneeSelect = ()=>{
+const AssigneeSelect = ({ isCompact })=>{
     const { collectionType = '', id, slug: model = '' } = reactRouterDom.useParams();
     const permissions = useTypedSelector((state)=>state.admin_app.permissions);
     const { formatMessage } = reactIntl.useIntl();
@@ -186,7 +186,7 @@ const AssigneeSelect = ()=>{
     const params = React__namespace.useMemo(()=>buildValidParams(query), [
         query
     ]);
-    const { data, isLoading, isError } = strapiAdmin.useAdminUsers(undefined, {
+    const { data, isLoading: isLoadingUsers, isError } = strapiAdmin.useAdminUsers(undefined, {
         skip: isLoadingPermissions || !canRead
     });
     const { document } = strapiAdmin$1.unstable_useDocument({
@@ -225,7 +225,57 @@ const AssigneeSelect = ()=>{
                 })
             });
         }
+        if (isCompact && 'error' in res) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(res.error)
+            });
+        }
     };
+    const isDisabled = !isLoadingPermissions && !isLoadingUsers && users.length === 0 || !document.documentId;
+    const isLoading = isLoadingUsers || isLoadingPermissions || isMutating;
+    const assigneeLabel = formatMessage({
+        id: 'content-manager.reviewWorkflows.assignee.label',
+        defaultMessage: 'Assignee'
+    });
+    const assigneeClearLabel = formatMessage({
+        id: 'content-manager.reviewWorkflows.assignee.clear',
+        defaultMessage: 'Clear assignee'
+    });
+    const assigneePlaceholder = formatMessage({
+        id: 'content-manager.reviewWorkflows.assignee.placeholder',
+        defaultMessage: 'Select…'
+    });
+    if (isCompact) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+            name: ASSIGNEE_ATTRIBUTE_NAME,
+            id: ASSIGNEE_ATTRIBUTE_NAME,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                        children: assigneeLabel
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                    clearLabel: assigneeClearLabel,
+                    disabled: isDisabled,
+                    value: currentAssignee ? currentAssignee.id.toString() : null,
+                    onChange: handleChange,
+                    onClear: ()=>handleChange(null),
+                    placeholder: assigneePlaceholder,
+                    loading: isLoading || isLoadingPermissions || isMutating,
+                    size: "S",
+                    children: users.map((user)=>{
+                        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                            value: user.id.toString(),
+                            textValue: getDisplayName(user),
+                            children: getDisplayName(user)
+                        }, user.id);
+                    })
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
         name: ASSIGNEE_ATTRIBUTE_NAME,
         id: ASSIGNEE_ATTRIBUTE_NAME,
@@ -235,24 +285,15 @@ const AssigneeSelect = ()=>{
         }) || error && formatAPIError(error)) ?? undefined,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
-                children: formatMessage({
-                    id: 'content-manager.reviewWorkflows.assignee.label',
-                    defaultMessage: 'Assignee'
-                })
+                children: assigneeLabel
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
-                clearLabel: formatMessage({
-                    id: 'content-manager.reviewWorkflows.assignee.clear',
-                    defaultMessage: 'Clear assignee'
-                }),
+                clearLabel: assigneeClearLabel,
                 disabled: !isLoadingPermissions && !isLoading && users.length === 0 || !document.documentId,
                 value: currentAssignee ? currentAssignee.id.toString() : null,
                 onChange: handleChange,
                 onClear: ()=>handleChange(null),
-                placeholder: formatMessage({
-                    id: 'content-manager.reviewWorkflows.assignee.placeholder',
-                    defaultMessage: 'Select…'
-                }),
+                placeholder: assigneePlaceholder,
                 loading: isLoading || isLoadingPermissions || isMutating,
                 children: users.map((user)=>{
                     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
@@ -422,7 +463,115 @@ const AVAILABLE_COLORS = Object.entries(STAGE_COLORS).map(([themeColorName, name
         name
     }));
 
-const StageSelect = ()=>{
+/* -------------------------------------------------------------------------------------------------
+ * LimitModals
+ * -----------------------------------------------------------------------------------------------*/ const WorkflowLimitModal = ({ open, onOpenChange })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(LimitsModal.Root, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Title, {
+                children: formatMessage({
+                    id: 'content-manager.reviewWorkflows.workflows.limit.title',
+                    defaultMessage: 'You’ve reached the limit of workflows in your plan'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Body, {
+                children: formatMessage({
+                    id: 'content-manager.reviewWorkflows.workflows.limit.body',
+                    defaultMessage: 'Delete a workflow or contact Sales to enable more workflows.'
+                })
+            })
+        ]
+    });
+};
+const StageLimitModal = ({ open, onOpenChange })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(LimitsModal.Root, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Title, {
+                children: formatMessage({
+                    id: 'content-manager.reviewWorkflows.stages.limit.title',
+                    defaultMessage: 'You have reached the limit of stages for this workflow in your plan'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Body, {
+                children: formatMessage({
+                    id: 'content-manager.reviewWorkflows.stages.limit.body',
+                    defaultMessage: 'Try deleting some stages or contact Sales to enable more stages.'
+                })
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * StageSelect
+ * -----------------------------------------------------------------------------------------------*/ const Select = ({ stages, activeWorkflowStage, isLoading, ...props })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { themeColorName } = getStageColorByHex(activeWorkflowStage?.color) ?? {};
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+        disabled: stages.length === 0,
+        placeholder: formatMessage({
+            id: 'content-manager.reviewWorkflows.assignee.placeholder',
+            defaultMessage: 'Select…'
+        }),
+        startIcon: activeWorkflowStage && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            tag: "span",
+            height: 2,
+            background: activeWorkflowStage?.color,
+            borderColor: themeColorName === 'neutral0' ? 'neutral150' : undefined,
+            hasRadius: true,
+            shrink: 0,
+            width: 2,
+            marginRight: "-3px"
+        }),
+        // @ts-expect-error – `customizeContent` is not correctly typed in the DS.
+        customizeContent: ()=>{
+            return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                tag: "span",
+                justifyContent: "space-between",
+                alignItems: "center",
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral800",
+                        ellipsis: true,
+                        lineHeight: "inherit",
+                        children: activeWorkflowStage?.name ?? ''
+                    }),
+                    isLoading ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+                        small: true,
+                        style: {
+                            display: 'flex'
+                        },
+                        "data-testid": "loader"
+                    }) : null
+                ]
+            });
+        },
+        ...props,
+        children: stages.map(({ id, color, name })=>{
+            const { themeColorName } = getStageColorByHex(color) ?? {};
+            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                startIcon: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    height: 2,
+                    background: color,
+                    borderColor: themeColorName === 'neutral0' ? 'neutral150' : undefined,
+                    hasRadius: true,
+                    shrink: 0,
+                    width: 2
+                }),
+                value: id,
+                textValue: name,
+                children: name
+            }, id);
+        })
+    });
+};
+const StageSelect = ({ isCompact })=>{
     const { collectionType = '', slug: model = '', id = '' } = reactRouterDom.useParams();
     const { formatMessage } = reactIntl.useIntl();
     const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
@@ -495,6 +644,12 @@ const StageSelect = ()=>{
                             })
                         });
                     }
+                    if (isCompact && 'error' in res) {
+                        toggleNotification({
+                            type: 'danger',
+                            message: formatAPIError(res.error)
+                        });
+                    }
                 }
             }
         } catch (error) {
@@ -507,127 +662,118 @@ const StageSelect = ()=>{
             });
         }
     };
-    const { themeColorName } = getStageColorByHex(activeWorkflowStage?.color) ?? {};
     const isLoading = isLoadingStages || isLoadingDocument;
+    const reviewStageLabel = formatMessage({
+        id: 'content-manager.reviewWorkflows.stage.label',
+        defaultMessage: 'Review stage'
+    });
+    const reviewStageHint = !isLoading && stages.length === 0 && // TODO: Handle errors and hints
+    formatMessage({
+        id: 'content-manager.reviewWorkflows.stages.no-transition',
+        defaultMessage: 'You don’t have the permission to update this stage.'
+    });
+    if (isCompact) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                    label: reviewStageHint,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                        name: STAGE_ATTRIBUTE_NAME,
+                        id: STAGE_ATTRIBUTE_NAME,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                                        children: reviewStageLabel
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(Select, {
+                                    stages: stages,
+                                    activeWorkflowStage: activeWorkflowStage,
+                                    isLoading: isLoading,
+                                    size: "S",
+                                    disabled: stages.length === 0,
+                                    value: activeWorkflowStage?.id,
+                                    onChange: handleChange,
+                                    placeholder: formatMessage({
+                                        id: 'content-manager.reviewWorkflows.assignee.placeholder',
+                                        defaultMessage: 'Select…'
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(WorkflowLimitModal, {
+                    open: showLimitModal === 'workflow',
+                    onOpenChange: ()=>setShowLimitModal(null)
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(StageLimitModal, {
+                    open: showLimitModal === 'stage',
+                    onOpenChange: ()=>setShowLimitModal(null)
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
-                hint: !isLoading && stages.length === 0 && formatMessage({
-                    id: 'content-manager.reviewWorkflows.stages.no-transition',
-                    defaultMessage: 'You don’t have the permission to update this stage.'
-                }),
+                hint: reviewStageHint,
                 error: error && formatAPIError(error) || undefined,
                 name: STAGE_ATTRIBUTE_NAME,
                 id: STAGE_ATTRIBUTE_NAME,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
-                        children: formatMessage({
-                            id: 'content-manager.reviewWorkflows.stage.label',
-                            defaultMessage: 'Review stage'
-                        })
+                        children: reviewStageLabel
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+                    /*#__PURE__*/ jsxRuntime.jsx(Select, {
+                        stages: stages,
+                        activeWorkflowStage: activeWorkflowStage,
+                        isLoading: isLoading,
                         disabled: stages.length === 0,
                         value: activeWorkflowStage?.id,
                         onChange: handleChange,
                         placeholder: formatMessage({
                             id: 'content-manager.reviewWorkflows.assignee.placeholder',
                             defaultMessage: 'Select…'
-                        }),
-                        startIcon: activeWorkflowStage && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                            tag: "span",
-                            height: 2,
-                            background: activeWorkflowStage?.color,
-                            borderColor: themeColorName === 'neutral0' ? 'neutral150' : undefined,
-                            hasRadius: true,
-                            shrink: 0,
-                            width: 2,
-                            marginRight: "-3px"
-                        }),
-                        // @ts-expect-error – `customizeContent` is not correctly typed in the DS.
-                        customizeContent: ()=>{
-                            return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                tag: "span",
-                                justifyContent: "space-between",
-                                alignItems: "center",
-                                width: "100%",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                        textColor: "neutral800",
-                                        ellipsis: true,
-                                        children: activeWorkflowStage?.name ?? ''
-                                    }),
-                                    isLoading ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
-                                        small: true,
-                                        style: {
-                                            display: 'flex'
-                                        },
-                                        "data-testid": "loader"
-                                    }) : null
-                                ]
-                            });
-                        },
-                        children: stages.map(({ id, color, name })=>{
-                            const { themeColorName } = getStageColorByHex(color) ?? {};
-                            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                startIcon: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                    height: 2,
-                                    background: color,
-                                    borderColor: themeColorName === 'neutral0' ? 'neutral150' : undefined,
-                                    hasRadius: true,
-                                    shrink: 0,
-                                    width: 2
-                                }),
-                                value: id,
-                                textValue: name,
-                                children: name
-                            }, id);
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs(LimitsModal.Root, {
+            /*#__PURE__*/ jsxRuntime.jsx(WorkflowLimitModal, {
                 open: showLimitModal === 'workflow',
-                onOpenChange: ()=>setShowLimitModal(null),
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Title, {
-                        children: formatMessage({
-                            id: 'content-manager.reviewWorkflows.workflows.limit.title',
-                            defaultMessage: 'You’ve reached the limit of workflows in your plan'
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Body, {
-                        children: formatMessage({
-                            id: 'content-manager.reviewWorkflows.workflows.limit.body',
-                            defaultMessage: 'Delete a workflow or contact Sales to enable more workflows.'
-                        })
-                    })
-                ]
+                onOpenChange: ()=>setShowLimitModal(null)
             }),
-            /*#__PURE__*/ jsxRuntime.jsxs(LimitsModal.Root, {
+            /*#__PURE__*/ jsxRuntime.jsx(StageLimitModal, {
                 open: showLimitModal === 'stage',
-                onOpenChange: ()=>setShowLimitModal(null),
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Title, {
-                        children: formatMessage({
-                            id: 'content-manager.reviewWorkflows.stages.limit.title',
-                            defaultMessage: 'You have reached the limit of stages for this workflow in your plan'
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(LimitsModal.Body, {
-                        children: formatMessage({
-                            id: 'content-manager.reviewWorkflows.stages.limit.body',
-                            defaultMessage: 'Try deleting some stages or contact Sales to enable more stages.'
-                        })
-                    })
-                ]
+                onOpenChange: ()=>setShowLimitModal(null)
             })
         ]
     });
 };
 
+const Header = ()=>{
+    const { slug = '', id, collectionType } = reactRouterDom.useParams();
+    const { edit: { options } } = strapiAdmin$1.unstable_useDocumentLayout(slug);
+    if (!window.strapi.isEE || !options?.reviewWorkflows || collectionType !== 'single-types' && !id || id === 'create') {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(AssigneeSelect, {
+                isCompact: true
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(StageSelect, {
+                isCompact: true
+            })
+        ]
+    });
+};
+Header.type = 'preview';
+
 const Panel = ()=>{
     const { slug = '', id, collectionType } = reactRouterDom.useParams();
     const { edit: { options } } = strapiAdmin$1.unstable_useDocumentLayout(slug);
@@ -900,7 +1046,7 @@ const admin = {
                 },
                 permissions: [],
                 async Component () {
-                    const { Router } = await Promise.resolve().then(function () { return require('./router-CrN8UbpP.js'); });
+                    const { Router } = await Promise.resolve().then(function () { return require('./router-B23K7ac8.js'); });
                     return {
                         default: Router
                     };
@@ -925,6 +1071,14 @@ const admin = {
             });
         }
     },
+    bootstrap (app) {
+        if (window.strapi.features.isEnabled(FEATURE_ID)) {
+            app.getPlugin('content-manager').injectComponent('preview', 'actions', {
+                name: 'review-workflows-assignee',
+                Component: Header
+            });
+        }
+    },
     async registerTrads ({ locales }) {
         const importedTrads = await Promise.all(locales.map((locale)=>{
             return __variableDynamicImportRuntime2__(`./translations/${locale}.json`).then(({ default: data })=>{
@@ -957,4 +1111,4 @@ exports.useGetContentTypesQuery = useGetContentTypesQuery;
 exports.useGetWorkflowsQuery = useGetWorkflowsQuery;
 exports.useTypedSelector = useTypedSelector;
 exports.useUpdateWorkflowMutation = useUpdateWorkflowMutation;
-//# sourceMappingURL=index-C5IeISWp.js.map
+//# sourceMappingURL=index-C-Z_kiBH.js.map