@strapi/admin 4.12.6 → 4.13.0-alpha.0

package/build/webhook-edit-page.de45c635.chunk.js

@@ -0,0 +1,33 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[5162],{36795:function(G,P,t){var e=t(32735),T=t(29397),g=t(87933),b=t(76437),W=t(23866),K=t(31121),U=t(35197),i=t(38837),se=t(3685),re=t(49372),j=t(40801),X=t(8284),S=t(82884),Q=t(92802),ie=t(60216),f=t.n(ie),_=t(67879),D=t(8471),de=t(90769);const u=s=>s.reduce((r,d)=>{const M=d.split(".")[0];return r[M]||(r[M]=[]),r[M].push(d),r},{}),B=(0,D.ZP)(T.w)`
+  tbody tr:nth-child(odd) {
+    background: ${({theme:s})=>s.colors.neutral100};
+  }
+
+  thead th span {
+    color: ${({theme:s})=>s.colors.neutral500};
+  }
+
+  td,
+  th {
+    padding-block-start: ${({theme:s})=>s.spaces[3]};
+    padding-block-end: ${({theme:s})=>s.spaces[3]};
+    width: 10%;
+    vertical-align: middle;
+    text-align: center;
+  }
+
+  tbody tr td:first-child {
+    /**
+     * Add padding to the start of the first column to avoid the checkbox appearing
+     * too close to the edge of the table
+     */
+    padding-inline-start: ${({theme:s})=>s.spaces[2]};
+  }
+`,oe=s=>{const r=[{id:"Settings.webhooks.events.create",defaultMessage:"Create"},{id:"Settings.webhooks.events.update",defaultMessage:"Update"},{id:"app.utils.delete",defaultMessage:"Delete"}];return s&&(r.push({id:"app.utils.publish",defaultMessage:"Publish"}),r.push({id:"app.utils.unpublish",defaultMessage:"Unpublish"})),r},Y=s=>{const r=["entry.create","entry.update","entry.delete"];return s&&r.push("entry.publish","entry.unpublish"),{entry:r,media:["media.create","media.update","media.delete"]}},J=e.createContext(),le=({children:s})=>{const{formatMessage:r}=(0,_.Z)(),{collectionTypes:d,isLoading:M}=(0,de.G)(),y=e.useMemo(()=>d.some(L=>L.options.draftAndPublish===!0),[d]),v=r({id:"Settings.webhooks.form.events",defaultMessage:"Events"});return e.createElement(J.Provider,{value:{isDraftAndPublish:y}},e.createElement(g.k,{direction:"column",alignItems:"stretch",gap:1},e.createElement(b.Q,{"aria-hidden":!0},v),M&&e.createElement(W.a,null,r({id:"Settings.webhooks.events.isLoading",defaultMessage:"Events loading"})),e.createElement(B,{"aria-label":v},s)))};le.propTypes={children:f().oneOfType([f().arrayOf(f().node),f().node]).isRequired};const q=({getHeaders:s=oe})=>{const{isDraftAndPublish:r}=e.useContext(J),{formatMessage:d}=(0,_.Z)(),M=s(r);return e.createElement(K.S,null,e.createElement(U.Z,null,e.createElement(i.g,null,e.createElement(se.T,null,d({id:"Settings.webhooks.event.select",defaultMessage:"Select event"}))),M.map(y=>["app.utils.publish","app.utils.unpublish"].includes(y.id)?e.createElement(i.g,{key:y.id,title:d({id:"Settings.webhooks.event.publish-tooltip",defaultMessage:"This event only exists for content with draft & publish enabled"})},e.createElement(re.Z,{variant:"sigma",textColor:"neutral600"},d(y))):e.createElement(i.g,{key:y.id},e.createElement(re.Z,{variant:"sigma",textColor:"neutral600"},d(y))))))};q.defaultProps={getHeaders:oe},q.propTypes={getHeaders:f().func};const ee=({providedEvents:s})=>{const{isDraftAndPublish:r}=e.useContext(J),d=s||Y(r),{values:M,handleChange:y}=(0,Q.u6)(),v="events",L=M.events,w=[],te=u(L),A=({target:{name:E,value:m}})=>{let C=new Set(L);m?C.add(E):C.delete(E),y({target:{name:v,value:Array.from(C)}})},$=({target:{name:E,value:m}})=>{let C=new Set(L);m?d[E].forEach(N=>{w.includes(N)||C.add(N)}):d[E].forEach(N=>C.delete(N)),y({target:{name:v,value:Array.from(C)}})};return e.createElement(j.X,null,Object.entries(d).map(([E,m])=>e.createElement(F,{disabledEvents:w,key:E,name:E,events:m,inputValue:te[E],handleSelect:A,handleSelectAll:$})))};ee.defaultProps={providedEvents:null},ee.propTypes={providedEvents:f().object};const ce=s=>s.replace(/-/g," ").split(" ").map(r=>r.charAt(0).toUpperCase()+r.slice(1).toLowerCase()).join(" "),F=({disabledEvents:s,name:r,events:d,inputValue:M,handleSelect:y,handleSelectAll:v})=>{const{formatMessage:L}=(0,_.Z)(),w=d.filter(m=>!s.includes(m)),te=M.length>0,A=M.length===w.length,$=({target:{name:m}})=>{v({target:{name:m,value:!A}})},E=5;return e.createElement(U.Z,null,e.createElement(i.f,null,e.createElement(X.X,{indeterminate:te&&!A,"aria-label":L({id:"global.select-all-entries",defaultMessage:"Select all entries"}),name:r,onChange:$,value:A},ce(r))),d.map(m=>e.createElement(i.f,{key:m},e.createElement(S.C,{disabled:s.includes(m),"aria-label":m,name:m,value:M.includes(m),onValueChange:C=>y({target:{name:m,value:C}})}))),d.length<E&&e.createElement(i.f,{colSpan:E-d.length}))};F.defaultProps={disabledEvents:[],events:[],inputValue:[],handleSelect(){},handleSelectAll(){}},F.propTypes={disabledEvents:f().array,events:f().array,inputValue:f().array,handleSelect:f().func,handleSelectAll:f().func,name:f().string.isRequired},P.Z={Root:le,Headers:q,Body:ee,EventRow:F}},77476:function(G,P,t){t.d(P,{Z:function(){return fe}});var e=t(32735),T=t(27649),g=t(45509),b=t(20108),W=t(53038),K=t(90769),U=t(82055),i=t(87933),se=t(41415),re=t(17e3),j=t(72850),X=t(15335),S=t(5803),Q=t(10369),ie=t(2438),f=t(66456),_=t(29439),D=t(92802),de=t(60216),u=t.n(de),B=t(67879),oe=t(9592),Y=t(36795);function J(){return e.createElement(Y.Z.Root,null,e.createElement(Y.Z.Headers,null),e.createElement(Y.Z.Body,null))}var le=t(76437),q=t(7563),ee=t(19406),ce=t(21428),F=t(90333);const s=["A-IM","Accept","Accept-Charset","Accept-Encoding","Accept-Language","Accept-Datetime","Access-Control-Request-Method","Access-Control-Request-Headers","Authorization","Cache-Control","Connection","Content-Length","Content-Type","Cookie","Date","Expect","Forwarded","From","Host","If-Match","If-Modified-Since","If-None-Match","If-Range","If-Unmodified-Since","Max-Forwards","Origin","Pragma","Proxy-Authorization","Range","Referer","TE","User-Agent","Upgrade","Via","Warning"],r=({name:n,onChange:a,value:o,...c})=>{const{values:{headers:h}}=(0,D.u6)(),[O,l]=(0,e.useState)(s);(0,e.useEffect)(()=>{l(s.filter(p=>!h?.some(x=>x.key!==o&&x.key===p)))},[h,o]);const H=p=>{a({target:{name:n,value:p}})},z=p=>{l(x=>[...x,p]),H(p)};return e.createElement(ce.XU,{...c,onClear:()=>H(""),onChange:H,onCreateOption:z,placeholder:"",value:o},O.map(p=>e.createElement(F.O,{value:p,key:p},p)))};r.defaultProps={value:void 0},r.propTypes={name:u().string.isRequired,onChange:u().func.isRequired,value:u().string};var d=r,y=()=>{const{formatMessage:n}=(0,B.Z)(),{values:a,errors:o}=(0,D.u6)();return e.createElement(i.k,{direction:"column",alignItems:"stretch",gap:1},e.createElement(le.Q,null,n({id:"Settings.webhooks.form.headers",defaultMessage:"Headers"})),e.createElement(j.x,{padding:8,background:"neutral100",hasRadius:!0},e.createElement(D.F2,{validateOnChange:!1,name:"headers",render:({push:c,remove:h})=>e.createElement(X.r,{gap:4},a.headers.map((O,l)=>e.createElement(e.Fragment,{key:`${l}.${O.key}`},e.createElement(S.P,{col:6},e.createElement(D.gN,{as:d,name:`headers.${l}.key`,"aria-label":`row ${l+1} key`,label:n({id:"Settings.webhooks.key",defaultMessage:"Key"}),error:o.headers?.[l]?.key&&o.headers[l].key})),e.createElement(S.P,{col:6},e.createElement(i.k,{alignItems:"flex-end"},e.createElement(j.x,{style:{flex:1}},e.createElement(D.gN,{as:Q.o,name:`headers.${l}.value`,"aria-label":`row ${l+1} value`,label:n({id:"Settings.webhooks.value",defaultMessage:"Value"}),error:o.headers?.[l]?.value&&o.headers[l].value})),e.createElement(i.k,{paddingLeft:2,style:{alignSelf:"center"},paddingTop:o.headers?.[l]?.value?0:5},e.createElement(g.fG,{disabled:a.headers.length===1,onClick:()=>h(l),label:n({id:"Settings.webhooks.headers.remove",defaultMessage:"Remove header row {number}"},{number:l+1})})))))),e.createElement(S.P,{col:12},e.createElement(q.A,{type:"button",onClick:()=>{c({key:"",value:""})},startIcon:e.createElement(ee.Z,null)},n({id:"Settings.webhooks.create.header",defaultMessage:"Create new header"}))))})))},v=t(49372),L=t(27169),w=t(35331),te=t(8471);const A=te.ZP.svg(({theme:n,color:a})=>`
+  width: ${12/16}rem;
+  height: ${12/16}rem;
+
+  path {
+    fill: ${n.colors[a]};
+  }
+`),$=({isPending:n,statusCode:a})=>{const{formatMessage:o}=(0,B.Z)();return n?e.createElement(i.k,{gap:2,alignItems:"center"},e.createElement(A,{as:L.Z}),e.createElement(v.Z,null,o({id:"Settings.webhooks.trigger.pending",defaultMessage:"pending"}))):a>=200&&a<300?e.createElement(i.k,{gap:2,alignItems:"center"},e.createElement(A,{as:f.Z,color:"success700"}),e.createElement(v.Z,null,o({id:"Settings.webhooks.trigger.success",defaultMessage:"success"}))):a>=300?e.createElement(i.k,{gap:2,alignItems:"center"},e.createElement(A,{as:w.Z,color:"danger700"}),e.createElement(v.Z,null,o({id:"Settings.error",defaultMessage:"error"})," ",a)):null};$.propTypes={isPending:u().bool.isRequired,statusCode:u().number},$.defaultProps={statusCode:void 0};const E=({statusCode:n,message:a})=>{const{formatMessage:o}=(0,B.Z)();return n>=200&&n<300?e.createElement(i.k,{justifyContent:"flex-end"},e.createElement(v.Z,{textColor:"neutral600",ellipsis:!0},o({id:"Settings.webhooks.trigger.success.label",defaultMessage:"Trigger succeeded"}))):n>=300?e.createElement(i.k,{justifyContent:"flex-end"},e.createElement(i.k,{maxWidth:(0,g.Q1)(250),justifyContent:"flex-end",title:a},e.createElement(v.Z,{ellipsis:!0,textColor:"neutral600"},a))):null};E.propTypes={statusCode:u().number,message:u().string},E.defaultProps={statusCode:void 0,message:void 0};const m=({onCancel:n})=>{const{formatMessage:a}=(0,B.Z)();return e.createElement(i.k,{justifyContent:"flex-end"},e.createElement("button",{onClick:n,type:"button"},e.createElement(i.k,{gap:2,alignItems:"center"},e.createElement(v.Z,{textColor:"neutral400"},a({id:"Settings.webhooks.trigger.cancel",defaultMessage:"cancel"})),e.createElement(A,{as:w.Z,color:"neutral400"}))))};m.propTypes={onCancel:u().func.isRequired};const C=({isPending:n,onCancel:a,response:o})=>{const{statusCode:c,message:h}=o,{formatMessage:O}=(0,B.Z)();return e.createElement(j.x,{background:"neutral0",padding:5,shadow:"filterShadow",hasRadius:!0},e.createElement(X.r,{gap:4,style:{alignItems:"center"}},e.createElement(S.P,{col:3},e.createElement(v.Z,null,O({id:"Settings.webhooks.trigger.test",defaultMessage:"Test-trigger"}))),e.createElement(S.P,{col:3},e.createElement($,{isPending:n,statusCode:c})),e.createElement(S.P,{col:6},n?e.createElement(m,{onCancel:a}):e.createElement(E,{statusCode:c,message:h}))))};C.defaultProps={isPending:!1,onCancel(){},response:{}},C.propTypes={isPending:u().bool,onCancel:u().func,response:u().object};var N=C,k=t(24346);const ge=/(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/,Ee=/(^$)|((https?:\/\/.*)(d*)\/?(.*))/,he=({formatMessage:n})=>k.Ry().shape({name:k.Z_().required(n({id:"Settings.webhooks.validation.name.required",defaultMessage:"Name is required"})).matches(ge,n({id:"Settings.webhooks.validation.name.regex",defaultMessage:"The name must start with a letter and only contain letters, numbers, spaces and underscores"})),url:k.Z_().required(n({id:"Settings.webhooks.validation.url.required",defaultMessage:"Url is required"})).matches(Ee,n({id:"Settings.webhooks.validation.url.regex",defaultMessage:"The value must be a valid Url"})),headers:k.Vo(a=>{let o=k.IX();if(a.length===1){const{key:c,value:h}=a[0];if(!c&&!h)return o}return o.of(k.Ry().shape({key:k.Z_().required(n({id:"Settings.webhooks.validation.key",defaultMessage:"Key is required"})),value:k.Z_().required(n({id:"Settings.webhooks.validation.value",defaultMessage:"Value is required"}))}))}),events:k.IX()}),ue=({handleSubmit:n,triggerWebhook:a,isCreating:o,isTriggering:c,triggerResponse:h,data:O})=>{const{formatMessage:l}=(0,B.Z)(),[H,z]=(0,e.useState)(!1),p=(0,oe.c)(J,async()=>(await t.e(7030).then(t.bind(t,61442))).EventTableEE),x=Z=>Object.keys(Z).length?Object.entries(Z).map(([ne,ae])=>({key:ne,value:ae})):[{key:"",value:""}],R=(0,D.TA)({initialValues:{name:O?.name||"",url:O?.url||"",headers:x(O?.headers||{}),events:O?.events||[]},onSubmit(Z,{resetForm:ne,setSubmitting:ae}){n(Z),ne({values:Z}),ae(!1)},validationSchema:he({formatMessage:l}),validateOnChange:!1,validateOnBlur:!1});return p?e.createElement(D.Hy,{value:R},e.createElement(g.l0,{onSubmit:R.handleSubmit},e.createElement(U.T,{primaryAction:e.createElement(i.k,{gap:2},e.createElement(se.z,{onClick:()=>{a(),z(!0)},variant:"tertiary",startIcon:e.createElement(ie.Z,null),disabled:o||c,size:"L"},l({id:"Settings.webhooks.trigger",defaultMessage:"Trigger"})),e.createElement(se.z,{startIcon:e.createElement(f.Z,null),type:"submit",size:"L",disabled:!R.dirty,loading:R.isSubmitting},l({id:"global.save",defaultMessage:"Save"}))),title:o?l({id:"Settings.webhooks.create",defaultMessage:"Create a webhook"}):O?.name,navigationAction:e.createElement(g.rU,{startIcon:e.createElement(_.Z,null),to:"/settings/webhooks"},l({id:"global.back",defaultMessage:"Back"}))}),e.createElement(re.D,null,e.createElement(i.k,{direction:"column",alignItems:"stretch",gap:4},H&&e.createElement(N,{isPending:c,response:h,onCancel:()=>z(!1)}),e.createElement(j.x,{background:"neutral0",padding:8,shadow:"filterShadow",hasRadius:!0},e.createElement(i.k,{direction:"column",alignItems:"stretch",gap:6},e.createElement(X.r,{gap:6},e.createElement(S.P,{col:6},e.createElement(D.gN,{as:Q.o,name:"name",error:R?.errors?.name&&R.errors.name,label:l({id:"global.name",defaultMessage:"Name"}),required:!0})),e.createElement(S.P,{col:12},e.createElement(D.gN,{as:Q.o,name:"url",error:R?.errors?.url&&R.errors.url,label:l({id:"Settings.roles.form.input.url",defaultMessage:"Url"}),required:!0}))),e.createElement(y,null),e.createElement(p,null))))))):null};ue.propTypes={data:u().object,handleSubmit:u().func.isRequired,triggerWebhook:u().func.isRequired,isCreating:u().bool.isRequired,isTriggering:u().bool.isRequired,triggerResponse:u().object},ue.defaultProps={data:void 0,triggerResponse:void 0};var pe=ue;const me=n=>({...n,headers:n.headers.reduce((a,{key:o,value:c})=>(o!==""&&(a[o]=c),a),{})});var fe=()=>{const{params:{id:n}}=(0,W.$B)("/settings/webhooks/:id"),a=n==="create",{replace:o}=(0,W.k6)(),c=(0,g.lm)(),{formatAPIError:h}=(0,g.So)(),O=(0,b.useQueryClient)(),{isLoading:l}=(0,K.G)(),{put:H,get:z,post:p}=(0,g.kY)(),{isLoading:x,data:R,error:Z}=(0,b.useQuery)(["webhooks",n],async()=>{const{data:{data:I}}=await z(`/admin/webhooks/${n}`);return I},{enabled:!a});e.useEffect(()=>{Z&&c({type:"warning",message:h(Z)})},[Z,c,h]);const{isLoading:ne,data:ae,isIdle:ve,mutate:Me}=(0,b.useMutation)(()=>p(`/admin/webhooks/${n}/trigger`)),ye=()=>Me(null,{onError(I){c({type:"warning",message:h(I)})}}),Ce=(0,b.useMutation)(I=>p("/admin/webhooks",I)),Pe=(0,b.useMutation)(({id:I,body:V})=>H(`/admin/webhooks/${I}`,V)),be=async I=>{if(a){Ce.mutate(me(I),{onSuccess({data:V}){c({type:"success",message:{id:"Settings.webhooks.created"}}),o(`/settings/webhooks/${V.data.id}`)},onError(V){c({type:"warning",message:h(V)})}});return}Pe.mutate({id:n,body:me(I)},{onSuccess(){O.invalidateQueries(["webhooks",n]),c({type:"success",message:{id:"notification.form.success.fields"}})},onError(V){c({type:"warning",message:h(V)})}})};return x||l?e.createElement(g.dO,null):e.createElement(T.o,null,e.createElement(g.SL,{name:"Webhooks"}),e.createElement(pe,{data:R,handleSubmit:be,triggerWebhook:ye,isCreating:a,isTriggering:ne,isTriggerIdle:ve,triggerResponse:ae?.data.data}))}},5722:function(G,P,t){t.r(P);var e=t(32735),T=t(45509),g=t(15062),b=t(30305),W=t(77476);const K=()=>{const U=(0,g.v9)(b._);return e.createElement(T.O4,{permissions:U.settings.webhooks.create},e.createElement(W.Z,null))};P.default=K},63939:function(G,P,t){t.r(P);var e=t(32735),T=t(45509),g=t(15062),b=t(30305),W=t(77476);const K=()=>{const U=(0,g.v9)(b._);return e.createElement(T.O4,{permissions:U.settings.webhooks.update},e.createElement(W.Z,null))};P.default=K},90333:function(G,P,t){t.d(P,{O:function(){return T}});var e=t(21428);const T=e.Wx},29439:function(G,P,t){t.d(P,{Z:function(){return g}});var e=t(74512);const T=b=>(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1rem",height:"1rem",fill:"none",viewBox:"0 0 24 24",...b,children:(0,e.jsx)("path",{fill:"#212134",d:"M24 13.3a.2.2 0 0 1-.2.2H5.74l8.239 8.239a.2.2 0 0 1 0 .282L12.14 23.86a.2.2 0 0 1-.282 0L.14 12.14a.2.2 0 0 1 0-.282L11.86.14a.2.2 0 0 1 .282 0L13.98 1.98a.2.2 0 0 1 0 .282L5.74 10.5H23.8c.11 0 .2.09.2.2v2.6Z"})}),g=T}}]);

package/build/{webhook-list-page.65e1b5bb.chunk.js → webhook-list-page.ca91df8b.chunk.js}

@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[4121],{93826:function(I,h,t){t.r(h),t.d(h,{default:function(){return me}});var e=t(32735),s=t(19565),c=t(15062),m=t(30305),g=t(94638),T=t(96709),D=t(27649),S=t(82055),P=t(99223),l=t(49372),y=t(41415),j=t(17e3),U=t(72850),_=t(56755),ee=t(73269),te=t(33827),K=t(94547),i=t(19786),V=t(82884),ne=t(3685),ae=t(35658),k=t(87933),E=t(74512),F=t(8471);const $=F.ZP.div`
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[4121],{93826:function(I,h,t){t.r(h),t.d(h,{default:function(){return me}});var e=t(32735),s=t(45509),c=t(15062),m=t(30305),g=t(94638),T=t(96709),D=t(27649),S=t(82055),P=t(99223),l=t(49372),y=t(41415),j=t(17e3),U=t(72850),_=t(56755),ee=t(73269),te=t(33827),K=t(94547),i=t(19786),V=t(82884),ne=t(3685),ae=t(35658),k=t(87933),E=t(74512),F=t(8471);const $=F.ZP.div`
   background: ${({theme:o})=>o.colors.danger500};
   border: none;
   border-radius: 16px;

package/ee/admin/content-manager/components/Filter/CustomInputs/ReviewWorkflows/AssigneeFilter.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Combobox, ComboboxOption } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { getDisplayName } from '../../../../../../../admin/src/content-manager/utils/getDisplayName';
+import { useAdminUsers } from '../../../../../../../admin/src/hooks/useAdminUsers';
+
+export const AssigneeFilter = ({ value, onChange }) => {
+  const { formatMessage } = useIntl();
+  const { users, isLoading } = useAdminUsers();
+
+  return (
+    <Combobox
+      value={value}
+      aria-label={formatMessage({
+        id: 'content-manager.components.Filters.usersSelect.label',
+        defaultMessage: 'Search and select an user to filter',
+      })}
+      onChange={onChange}
+      loading={isLoading}
+    >
+      {users.map((user) => {
+        return (
+          <ComboboxOption key={user.id} value={user.id.toString()}>
+            {getDisplayName(user, formatMessage)}
+          </ComboboxOption>
+        );
+      })}
+    </Combobox>
+  );
+};
+
+AssigneeFilter.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+};
+
+AssigneeFilter.defaultProps = {
+  value: '',
+};

package/ee/admin/content-manager/components/Filter/CustomInputs/ReviewWorkflows/StageFilter.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import { Flex, Loader, SingleSelect, SingleSelectOption, Typography } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useReviewWorkflows } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
+import { getStageColorByHex } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
+
+export const StageFilter = ({ value, onChange, uid }) => {
+  const { formatMessage } = useIntl();
+  const {
+    workflows: [workflow],
+    isLoading,
+  } = useReviewWorkflows({ filters: { contentTypes: uid } });
+
+  return (
+    <SingleSelect
+      aria-label={formatMessage({
+        id: 'content-manager.components.Filters.reviewWorkflows.label',
+        defaultMessage: 'Search and select an workflow stage to filter',
+      })}
+      value={value}
+      onChange={onChange}
+      loading={isLoading}
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customizeContent={() => (
+        <Flex as="span" justifyContent="space-between" alignItems="center" width="100%">
+          <Typography textColor="neutral800" ellipsis>
+            {value}
+          </Typography>
+          {isLoading ? <Loader small style={{ display: 'flex' }} /> : null}
+        </Flex>
+      )}
+    >
+      {(workflow?.stages ?? []).map(({ id, color, name }) => {
+        const { themeColorName } = getStageColorByHex(color);
+
+        return (
+          <SingleSelectOption
+            key={id}
+            startIcon={
+              <Flex
+                height={2}
+                background={color}
+                borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
+                hasRadius
+                shrink={0}
+                width={2}
+              />
+            }
+            value={name}
+          >
+            {name}
+          </SingleSelectOption>
+        );
+      })}
+    </SingleSelect>
+  );
+};
+
+StageFilter.defaultProps = {
+  value: '',
+};
+
+StageFilter.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  uid: PropTypes.string.isRequired,
+  value: PropTypes.string,
+};

package/ee/admin/content-manager/components/Filter/CustomInputs/ReviewWorkflows/constants.js

@@ -0,0 +1,71 @@
+import { getTrad } from '../../../../../../../admin/src/content-manager/utils';
+
+import { AssigneeFilter } from './AssigneeFilter';
+import { StageFilter } from './StageFilter';
+
+export const REVIEW_WORKFLOW_FILTERS = [
+  {
+    fieldSchema: {
+      type: 'relation',
+      mainField: {
+        name: 'name',
+
+        schema: {
+          type: 'string',
+        },
+      },
+    },
+
+    metadatas: {
+      customInput: StageFilter,
+
+      label: {
+        id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.stage`),
+        defaultMessage: 'Review stage',
+      },
+    },
+
+    name: 'strapi_stage',
+  },
+
+  {
+    fieldSchema: {
+      type: 'relation',
+      mainField: {
+        name: 'id',
+
+        schema: {
+          type: 'int',
+        },
+      },
+    },
+
+    metadatas: {
+      customInput: AssigneeFilter,
+
+      customOperators: [
+        {
+          intlLabel: {
+            id: 'components.FilterOptions.FILTER_TYPES.$eq',
+            defaultMessage: 'is',
+          },
+          value: '$eq',
+        },
+        {
+          intlLabel: {
+            id: 'components.FilterOptions.FILTER_TYPES.$ne',
+            defaultMessage: 'is not',
+          },
+          value: '$ne',
+        },
+      ],
+
+      label: {
+        id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.assignee.label`),
+        defaultMessage: 'Assignee',
+      },
+    },
+
+    name: 'strapi_assignee',
+  },
+];

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

@@ -1,238 +1,30 @@
 import React from 'react';
 
-import { Flex, Loader, SingleSelect, SingleSelectOption, Typography } from '@strapi/design-system';
-import {
-  useAPIErrorHandler,
-  useCMEditViewDataManager,
-  useFetchClient,
-  useNotification,
-} from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { useMutation } from 'react-query';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 import { Information } from '../../../../../../admin/src/content-manager/pages/EditView/Information';
-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';
 
-const ATTRIBUTE_NAME = 'strapi_stage';
+import { AssigneeSelect } from './components/AssigneeSelect';
+import { StageSelect } from './components/StageSelect';
 
 export function InformationBoxEE() {
   const {
-    initialData,
     isCreatingEntry,
-    layout: { uid, options },
-    isSingleType,
-    onChange,
+    layout: { options },
   } = useCMEditViewDataManager();
-  const { put } = useFetchClient();
-  // 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?.[ATTRIBUTE_NAME] ?? null;
-  const hasReviewWorkflowsEnabled = options?.reviewWorkflows ?? false;
-  const { formatMessage } = useIntl();
-  const { formatAPIError } = useAPIErrorHandler();
-  const toggleNotification = useNotification();
-  const { getFeature } = useLicenseLimits();
-  const [showLimitModal, setShowLimitModal] = React.useState(false);
-
-  const {
-    meta,
-    workflows: [workflow],
-    isLoading: isWorkflowLoading,
-  } = useReviewWorkflows({ filters: { contentTypes: uid } });
-
-  const { error, isLoading, mutateAsync } = 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: ATTRIBUTE_NAME, value: createdEntity[ATTRIBUTE_NAME] } }, true);
-
-      return createdEntity;
-    },
-    {
-      onSuccess() {
-        toggleNotification({
-          type: 'success',
-          message: {
-            id: 'content-manager.reviewWorkflows.stage.notification.saved',
-            defaultMessage: 'Review stage updated',
-          },
-        });
-      },
-    }
-  );
-
-  const limits = getFeature('review-workflows');
-  const formattedError = (error && formatAPIError(error)) || null;
-
-  const handleStageChange = 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 {
-        await 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)
-    : {};
+  const hasReviewWorkflowsEnabled = options?.reviewWorkflows ?? false;
 
   return (
     <Information.Root>
       <Information.Title />
-
       {hasReviewWorkflowsEnabled && !isCreatingEntry && (
-        <SingleSelect
-          error={formattedError}
-          name={ATTRIBUTE_NAME}
-          id={ATTRIBUTE_NAME}
-          value={activeWorkflowStage?.id}
-          onChange={(value) => handleStageChange({ 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>
-              {isWorkflowLoading || 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>
+        <>
+          <StageSelect />
+          <AssigneeSelect />
+        </>
       )}
-
       <Information.Body />
-
-      <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>
     </Information.Root>
   );
 }

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

@@ -0,0 +1,147 @@
+import * as React from 'react';
+
+import { Combobox, ComboboxOption, Field, Flex, Loader, Typography } from '@strapi/design-system';
+import {
+  useCMEditViewDataManager,
+  useAPIErrorHandler,
+  useFetchClient,
+  useNotification,
+  useRBAC,
+} from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
+
+import { getDisplayName } from '../../../../../../../../admin/src/content-manager/utils';
+import { useAdminUsers } from '../../../../../../../../admin/src/hooks/useAdminUsers';
+import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
+import { ASSIGNEE_ATTRIBUTE_NAME } from '../../constants';
+
+export function AssigneeSelect() {
+  const {
+    initialData,
+    layout: { uid },
+    isSingleType,
+    onChange,
+  } = useCMEditViewDataManager();
+  const permissions = useSelector(selectAdminPermissions);
+  const { formatMessage } = useIntl();
+  const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
+  const { put } = useFetchClient();
+  const {
+    allowedActions: { canReadUsers },
+  } = useRBAC({
+    readUsers: permissions.settings.users.read,
+  });
+  const { users, isLoading, isError } = useAdminUsers(
+    {},
+    {
+      enabled: canReadUsers,
+    }
+  );
+
+  const currentAssignee = initialData?.[ASSIGNEE_ATTRIBUTE_NAME] ?? null;
+
+  const handleChange = async ({ value: assigneeId }) => {
+    mutation.mutate({
+      entityId: initialData.id,
+      assigneeId: parseInt(assigneeId, 10),
+      uid,
+    });
+  };
+
+  const mutation = useMutation(
+    async ({ entityId, assigneeId, uid }) => {
+      const typeSlug = isSingleType ? 'single-types' : 'collection-types';
+
+      const {
+        data: { data: createdEntity },
+      } = await put(`/admin/content-manager/${typeSlug}/${uid}/${entityId}/assignee`, {
+        data: { id: assigneeId },
+      });
+
+      // 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: ASSIGNEE_ATTRIBUTE_NAME, value: createdEntity[ASSIGNEE_ATTRIBUTE_NAME] },
+        },
+        true
+      );
+
+      return createdEntity;
+    },
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: {
+            id: 'content-manager.reviewWorkflows.assignee.notification.saved',
+            defaultMessage: 'Assignee updated',
+          },
+        });
+      },
+    }
+  );
+
+  return (
+    <Field name={ASSIGNEE_ATTRIBUTE_NAME} id={ASSIGNEE_ATTRIBUTE_NAME}>
+      <Flex direction="column" gap={2} alignItems="stretch">
+        <Combobox
+          clearLabel={formatMessage({
+            id: 'content-manager.reviewWorkflows.assignee.clear',
+            defaultMessage: 'Clear assignee',
+          })}
+          error={
+            (isError &&
+              canReadUsers &&
+              formatMessage({
+                id: 'content-manager.reviewWorkflows.assignee.error',
+                defaultMessage: 'An error occurred while fetching users',
+              })) ||
+            (mutation.error && formatAPIError(mutation.error))
+          }
+          disabled={!isLoading && users.length === 0}
+          name={ASSIGNEE_ATTRIBUTE_NAME}
+          id={ASSIGNEE_ATTRIBUTE_NAME}
+          value={currentAssignee ? currentAssignee.id : null}
+          onChange={(value) => handleChange({ value })}
+          onClear={() => handleChange({ value: null })}
+          placeholder={formatMessage({
+            id: 'content-manager.reviewWorkflows.assignee.placeholder',
+            defaultMessage: 'Select …',
+          })}
+          label={formatMessage({
+            id: 'content-manager.reviewWorkflows.assignee.label',
+            defaultMessage: 'Assignee',
+          })}
+          // eslint-disable-next-line react/no-unstable-nested-components
+          customizeContent={() => (
+            <Flex as="span" justifyContent="space-between" alignItems="center" width="100%">
+              <Typography textColor="neutral800" ellipsis>
+                {currentAssignee ? getDisplayName(currentAssignee, formatMessage) : null}
+              </Typography>
+
+              {isLoading || mutation.isLoading ? (
+                <Loader small style={{ display: 'flex' }} />
+              ) : null}
+            </Flex>
+          )}
+        >
+          {users.map((user) => {
+            return (
+              <ComboboxOption
+                key={user.id}
+                value={user.id}
+                textValue={getDisplayName(user, formatMessage)}
+              >
+                {getDisplayName(user, formatMessage)}
+              </ComboboxOption>
+            );
+          })}
+        </Combobox>
+      </Flex>
+    </Field>
+  );
+}

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

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