@strapi/admin 4.10.0-beta.0 → 4.10.0-beta.1

package/build/webhook-edit-page.213f0075.chunk.js

@@ -0,0 +1,75 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[5162],{47272:function(te,O,t){t.d(O,{Z:function(){return Ie}});var e=t(32735),l=t(43383),T=t(27649),o=t(20108),k=t(53038),Z=t(67927),Y=t(60216),s=t.n(Y),g=t(2438),p=t(66456),N=t(29439),Se=t(82055),y=t(87933),fe=t(41415),Oe=t(17e3),ne=t(72850),se=t(15335),V=t(5803),le=t(10369),$=t(92802),j=t(67879),he=t(28847),w=t(49372),ie=t(8471),Ee=t(8284),ke=t(44426),Q=t(23940),de=t.n(Q);const d=({disabledEvents:n,name:r,events:a,inputValue:i,handleChange:m,handleChangeAll:x})=>{const u=a.filter(b=>!n.includes(b)),f=i.length===u.length,M=i.length>0,v=({target:{name:b}})=>{x({target:{name:b,value:!f}})};return e.createElement("tr",null,e.createElement("td",null,e.createElement(Ee.X,{indeterminate:M&&!f,"aria-label":"Select all entries",name:r,onChange:v,value:f},de()(r))),a.map(b=>e.createElement("td",{key:b},e.createElement(ke.C,{disabled:n.includes(b),"aria-label":b,name:b,value:i.includes(b),onValueChange:I=>m({target:{name:b,value:I}})}))))};d.defaultProps={disabledEvents:[],events:[],inputValue:[],handleChange(){},handleChangeAll(){}},d.propTypes={disabledEvents:s().array,events:s().array,inputValue:s().array,handleChange:s().func,handleChangeAll:s().func,name:s().string.isRequired};var D=d,X=n=>n.reduce((r,a)=>{const i=a.split(".")[0];return r[i]||(r[i]=[]),r[i].push(a),r},{});const R=ie.ZP.table`
+  td {
+    height: ${52/16}rem;
+    width: 10%;
+    vertical-align: middle;
+    text-align: center;
+  }
+
+  tbody tr:nth-child(odd) {
+    background: ${({theme:n})=>n.colors.neutral100};
+  }
+
+  tbody tr td:first-child {
+    padding-left: ${({theme:n})=>n.spaces[7]};
+  }
+`,H={headers:{default:[{id:"Settings.webhooks.events.create",defaultMessage:"Create"},{id:"Settings.webhooks.events.update",defaultMessage:"Update"},{id:"app.utils.delete",defaultMessage:"Delete"}],draftAndPublish:[{id:"Settings.webhooks.events.create",defaultMessage:"Create"},{id:"Settings.webhooks.events.update",defaultMessage:"Update"},{id:"app.utils.delete",defaultMessage:"Delete"},{id:"app.utils.publish",defaultMessage:"Publish"},{id:"app.utils.unpublish",defaultMessage:"Unpublish"}]},events:{default:{entry:["entry.create","entry.update","entry.delete"],media:["media.create","media.update","media.delete"]},draftAndPublish:{entry:["entry.create","entry.update","entry.delete","entry.publish","entry.unpublish"],media:["media.create","media.update","media.delete"]}}},ve=({isDraftAndPublish:n})=>{const r=n?H.headers.draftAndPublish:H.headers.default,a=n?H.events.draftAndPublish:H.events.default,{formatMessage:i}=(0,j.Z)(),{values:m,handleChange:x}=(0,$.u6)(),u="events",f=m.events,M=[],v=X(f),b=({target:{name:h,value:A}})=>{let K=new Set(f);A?K.add(h):K.delete(h),x({target:{name:u,value:Array.from(K)}})},I=({target:{name:h,value:A}})=>{let K=new Set(f);A?a[h].forEach(G=>{M.includes(G)||K.add(G)}):a[h].forEach(G=>K.delete(G)),x({target:{name:u,value:Array.from(K)}})};return e.createElement(y.k,{direction:"column",alignItems:"stretch",gap:1},e.createElement(he.Q,null,i({id:"Settings.webhooks.form.events",defaultMessage:"Events"})),e.createElement(R,null,e.createElement("thead",null,e.createElement("tr",null,e.createElement("td",null),r.map(h=>h==="app.utils.publish"||h==="app.utils.unpublish"?e.createElement("td",{key:h.id,title:i({id:"Settings.webhooks.event.publish-tooltip",defaultMessage:"This event only exists for content with draft & publish enabled"})},e.createElement(w.Z,{variant:"sigma",textColor:"neutral600"},i(h))):e.createElement("td",{key:h.id},e.createElement(w.Z,{variant:"sigma",textColor:"neutral600"},i(h)))))),e.createElement("tbody",null,Object.keys(a).map(h=>e.createElement(D,{disabledEvents:M,key:h,name:h,events:a[h],inputValue:v[h],handleChange:b,handleChangeAll:I})))))};ve.propTypes={isDraftAndPublish:s().bool.isRequired};var ce=ve,Le=t(19406),J=t(7563),Te=t(42623),ue=t(90333),be=["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"];const ae=({name:n,onChange:r,value:a,...i})=>{const[m,x]=(0,e.useState)(a?[...be,a]:be),u=M=>{r({target:{name:n,value:M}})},f=M=>{x(v=>[...v,M]),r({target:{name:n,value:M}})};return e.createElement(Te.X,{...i,onChange:u,onCreateOption:f,placeholder:"",value:a},m.map(M=>e.createElement(ue.O,{value:M,key:M},M)))};ae.defaultProps={value:void 0},ae.propTypes={name:s().string.isRequired,onChange:s().func.isRequired,value:s().string};var Ce=ae,ye=()=>{const{formatMessage:n}=(0,j.Z)(),{values:r,errors:a}=(0,$.u6)();return e.createElement(y.k,{direction:"column",alignItems:"stretch",gap:1},e.createElement(he.Q,null,n({id:"Settings.webhooks.form.headers",defaultMessage:"Headers"})),e.createElement(ne.x,{padding:8,background:"neutral100",hasRadius:!0},e.createElement($.F2,{validateOnChange:!1,name:"headers",render:({push:i,remove:m})=>e.createElement(se.r,{gap:4},r.headers?.map((x,u)=>e.createElement(e.Fragment,{key:u},e.createElement(V.P,{col:6},e.createElement($.gN,{as:Ce,name:`headers.${u}.key`,"aria-label":`row ${u+1} key`,label:n({id:"Settings.webhooks.key",defaultMessage:"Key"}),error:a.headers?.[u]?.key&&n({id:a.headers[u]?.key,defaultMessage:a.headers[u]?.key})})),e.createElement(V.P,{col:6},e.createElement(y.k,{alignItems:"flex-end"},e.createElement(ne.x,{style:{flex:1}},e.createElement($.gN,{as:le.o,"aria-label":`row ${u+1} value`,label:n({id:"Settings.webhooks.value",defaultMessage:"Value"}),name:`headers.${u}.value`,error:a.headers?.[u]?.value&&n({id:a.headers[u]?.value,defaultMessage:a.headers[u]?.value})})),e.createElement(y.k,{paddingLeft:2,style:{alignSelf:"center"},paddingTop:a.headers?.[u]?.value?0:5},e.createElement(l.fG,{onClick:()=>r.headers.length!==1&&m(u),label:n({id:"Settings.webhooks.headers.remove",defaultMessage:"Remove header row {number}"},{number:u+1})})))))),e.createElement(V.P,{col:12},e.createElement(J.A,{type:"button",onClick:()=>{i({key:"",value:""})},startIcon:e.createElement(Le.Z,null)},n({id:"Settings.webhooks.create.header",defaultMessage:"Create new header"}))))})))},Re=t(27169),Me=t(35331);const q=ie.ZP.svg(({theme:n,color:r})=>`
+  width: ${12/16}rem;
+  height: ${12/16}rem;
+
+  path {
+    fill: ${n.colors[r]};
+  }
+`),W=({isPending:n,statusCode:r})=>{const{formatMessage:a}=(0,j.Z)();return n?e.createElement(y.k,{gap:2,alignItems:"center"},e.createElement(q,{as:Re.Z}),e.createElement(w.Z,null,a({id:"Settings.webhooks.trigger.pending",defaultMessage:"pending"}))):r>=200&&r<300?e.createElement(y.k,{gap:2,alignItems:"center"},e.createElement(q,{as:p.Z,color:"success700"}),e.createElement(w.Z,null,a({id:"Settings.webhooks.trigger.success",defaultMessage:"success"}))):r>=300?e.createElement(y.k,{gap:2,alignItems:"center"},e.createElement(q,{as:Me.Z,color:"danger700"}),e.createElement(w.Z,null,a({id:"Settings.error",defaultMessage:"error"})," ",r)):null};W.propTypes={isPending:s().bool.isRequired,statusCode:s().number},W.defaultProps={statusCode:void 0};const ge=({statusCode:n,message:r})=>{const{formatMessage:a}=(0,j.Z)();return n>=200&&n<300?e.createElement(y.k,{justifyContent:"flex-end"},e.createElement(w.Z,{textColor:"neutral600",ellipsis:!0},a({id:"Settings.webhooks.trigger.success.label",defaultMessage:"Trigger succeeded"}))):n>=300?e.createElement(y.k,{justifyContent:"flex-end"},e.createElement(y.k,{maxWidth:(0,l.Q1)(250),justifyContent:"flex-end",title:r},e.createElement(w.Z,{ellipsis:!0,textColor:"neutral600"},r))):null};ge.propTypes={statusCode:s().number,message:s().string},ge.defaultProps={statusCode:void 0,message:void 0};const Pe=({onCancel:n})=>{const{formatMessage:r}=(0,j.Z)();return e.createElement(y.k,{justifyContent:"flex-end"},e.createElement("button",{onClick:n,type:"button"},e.createElement(y.k,{gap:2,alignItems:"center"},e.createElement(w.Z,{textColor:"neutral400"},r({id:"Settings.webhooks.trigger.cancel",defaultMessage:"cancel"})),e.createElement(q,{as:Me.Z,color:"neutral400"}))))};Pe.propTypes={onCancel:s().func.isRequired};const P=({isPending:n,onCancel:r,response:a})=>{const{statusCode:i,message:m}=a,{formatMessage:x}=(0,j.Z)();return e.createElement(ne.x,{background:"neutral0",padding:5,shadow:"filterShadow",hasRadius:!0},e.createElement(se.r,{gap:4,style:{alignItems:"center"}},e.createElement(V.P,{col:3},e.createElement(w.Z,null,x({id:"Settings.webhooks.trigger.test",defaultMessage:"Test-trigger"}))),e.createElement(V.P,{col:3},e.createElement(W,{isPending:n,statusCode:i})),e.createElement(V.P,{col:6},n?e.createElement(Pe,{onCancel:r}):e.createElement(ge,{statusCode:i,message:m}))))};P.defaultProps={isPending:!1,onCancel(){},response:{}},P.propTypes={isPending:s().bool,onCancel:s().func,response:s().object};var xe=P,F=t(24346);const Ae=/(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/,U=/(^$)|((https?:\/\/.*)(d*)\/?(.*))/;var z=F.Ry().shape({name:F.Z_(l.I0.string).required(l.I0.required).matches(Ae,l.I0.regex),url:F.Z_(l.I0.string).required(l.I0.required).matches(U,l.I0.regex),headers:F.Vo(n=>{let r=F.IX();if(n.length===1){const{key:a,value:i}=n[0];if(!a&&!i)return r}return r.of(F.Ry().shape({key:F.Z_().required(l.I0.required),value:F.Z_().required(l.I0.required)}))}),events:F.IX()});const me=({handleSubmit:n,data:r,triggerWebhook:a,isCreating:i,isTriggering:m,triggerResponse:x,isDraftAndPublishEvents:u})=>{const{formatMessage:f}=(0,j.Z)(),[M,v]=(0,e.useState)(!1);return e.createElement($.J9,{onSubmit:n,initialValues:{name:r?.name||"",url:r?.url||"",headers:Object.keys(r?.headers||[]).length?Object.entries(r.headers).map(([b,I])=>({key:b,value:I})):[{key:"",value:""}],events:r?.events||[]},validationSchema:z,validateOnChange:!1,validateOnBlur:!1},({handleSubmit:b,errors:I})=>e.createElement(l.l0,{noValidate:!0},e.createElement(Se.T,{primaryAction:e.createElement(y.k,{gap:2},e.createElement(fe.z,{onClick:()=>{a(),v(!0)},variant:"tertiary",startIcon:e.createElement(g.Z,null),disabled:i||m,size:"L"},f({id:"Settings.webhooks.trigger",defaultMessage:"Trigger"})),e.createElement(fe.z,{startIcon:e.createElement(p.Z,null),onClick:b,type:"submit",size:"L"},f({id:"global.save",defaultMessage:"Save"}))),title:i?f({id:"Settings.webhooks.create",defaultMessage:"Create a webhook"}):r?.name,navigationAction:e.createElement(l.rU,{startIcon:e.createElement(N.Z,null),to:"/settings/webhooks"},f({id:"global.back",defaultMessage:"Back"}))}),e.createElement(Oe.D,null,e.createElement(y.k,{direction:"column",alignItems:"stretch",gap:4},M&&e.createElement("div",{className:"trigger-wrapper"},e.createElement(xe,{isPending:m,response:x,onCancel:()=>v(!1)})),e.createElement(ne.x,{background:"neutral0",padding:8,shadow:"filterShadow",hasRadius:!0},e.createElement(y.k,{direction:"column",alignItems:"stretch",gap:6},e.createElement(se.r,{gap:6},e.createElement(V.P,{col:6},e.createElement($.gN,{as:le.o,name:"name",error:I.name&&f({id:I.name}),label:f({id:"global.name",defaultMessage:"Name"}),required:!0})),e.createElement(V.P,{col:12},e.createElement($.gN,{as:le.o,name:"url",error:I.url&&f({id:I.url}),label:f({id:"Settings.roles.form.input.url",defaultMessage:"Url"}),required:!0}))),e.createElement(ye,null),e.createElement(ce,{isDraftAndPublish:u})))))))};me.propTypes={data:s().object,handleSubmit:s().func.isRequired,triggerWebhook:s().func.isRequired,isCreating:s().bool.isRequired,isDraftAndPublishEvents:s().bool.isRequired,isTriggering:s().bool.isRequired,triggerResponse:s().object},me.defaultProps={data:void 0,triggerResponse:void 0};var L=me;const re=n=>({...n,headers:_(n.headers)}),_=n=>n.reduce((r,a)=>{const{key:i,value:m}=a;return i!==""?{...r,[i]:m}:r},{});var ee=re,Ie=()=>{const{params:{id:n}}=(0,k.$B)("/settings/webhooks/:id"),{replace:r}=(0,k.k6)(),{lockApp:a,unlockApp:i}=(0,l.o1)(),m=(0,l.lm)(),x=(0,o.useQueryClient)(),{isLoading:u,collectionTypes:f}=(0,Z.bP)(),{post:M}=(0,l.kY)(),v=n==="create",b=(0,e.useCallback)(async C=>{const[S,{data:we}]=await(0,l.to)((0,l.WY)(`/admin/webhooks/${C}`,{method:"GET"}));return S?(m({type:"warning",message:{id:"notification.error"}}),null):we},[m]),{isLoading:I,data:h}=(0,o.useQuery)(["get-webhook",n],()=>b(n),{enabled:!v}),{isLoading:A,data:K,isIdle:G,mutate:Ze}=(0,o.useMutation)(()=>M(`/admin/webhooks/${n}/trigger`)),$e=()=>Ze(null,{onError(){m({type:"warning",message:{id:"notification.error"}})}}),Be=(0,o.useMutation)(C=>(0,l.WY)("/admin/webhooks",{method:"POST",body:C})),pe=(0,o.useMutation)(({id:C,body:S})=>(0,l.WY)(`/admin/webhooks/${C}`,{method:"PUT",body:S})),c=async C=>{v?(a(),Be.mutate(ee(C),{onSuccess(S){m({type:"success",message:{id:"Settings.webhooks.created"}}),r(`/settings/webhooks/${S.data.id}`),i()},onError(S){m({type:"warning",message:{id:"notification.error"}}),console.log(S),i()}})):(a(),pe.mutate({id:n,body:ee(C)},{onSuccess(){x.invalidateQueries(["get-webhook",n]),m({type:"success",message:{id:"notification.form.success.fields"}}),i()},onError(S){m({type:"warning",message:{id:"notification.error"}}),console.log(S),i()}}))},E=(0,e.useMemo)(()=>f.some(C=>C.options.draftAndPublish===!0),[f]);return I||u?e.createElement(l.dO,null):e.createElement(T.o,null,e.createElement(l.SL,{name:"Webhooks"}),e.createElement(L,{handleSubmit:c,data:h,triggerWebhook:$e,isCreating:v,isTriggering:A,isTriggerIdle:G,triggerResponse:K?.data.data,isDraftAndPublishEvents:E}))}},33238:function(te,O,t){t.r(O);var e=t(32735),l=t(43383),T=t(83983),o=t(47272);const k=()=>e.createElement(l.O4,{permissions:T.Z.settings.webhooks.create},e.createElement(o.Z,null));O.default=k},59021:function(te,O,t){t.r(O);var e=t(32735),l=t(43383),T=t(83983),o=t(47272);const k=()=>e.createElement(l.O4,{permissions:T.Z.settings.webhooks.update},e.createElement(o.Z,null));O.default=k},42623:function(te,O,t){t.d(O,{h:function(){return Q},X:function(){return de}});var e=t(32735),l=t(35331),T=t(16899),o=t(60216),k=t(90333),Z=t(91225),Y=t(17289),s=t(94486);const g={Close:"Close",CloseSelect:"CloseSelect",First:"First",Last:"Last",Next:"Next",Open:"Open",PageDown:"PageDown",PageUp:"PageUp",Previous:"Previous",Select:"Select",Space:"Space",Type:"Type"},p={Close:"Close",First:"First",Last:"Last",Next:"Next",Open:"Open",Previous:"Previous",Select:"Select",UpLevel:"UpLevel"};function N(d=[],D=null,B=[]){const X=String(D??"").toLowerCase();return X?d.filter(R=>R.props.children.toString().toLowerCase().includes(X)&&B.indexOf(R)<0):d}function Se(d,D){if(!D&&d===s.y.DOWN)return g.Open;if(d===s.y.DOWN)return g.Next;if(d===s.y.UP)return g.Previous;if(d===s.y.HOME)return g.First;if(d===s.y.END)return g.Last;if(d===s.y.ESCAPE)return g.Close;if(d===s.y.ENTER)return g.CloseSelect;if(d===s.y.BACKSPACE||d===s.y.CLEAR||d.length===1)return g.Type}function y(d,D,B){switch(B){case g.First:return 0;case g.Last:return D;case g.Previous:return Math.max(0,d-1);case g.Next:return Math.min(D,d+1);default:return d}}function fe(d){(0,Y.Z)(d,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:D,top:B,left:X})=>{D.scrollTop=B,D.scrollLeft=X})}var Oe=t(72850),ne=t(87107),se=t(28847),V=t(67014),le=t(47851),$=t(87933),j=t(74971),he=t(97405),w=t(4101),ie=t(93958),Ee=t(49372),ke=t(3685);const Q=({children:d,clearLabel:D,creatable:B,createMessage:X,disabled:R,error:H,hasMoreItems:ve,hint:ce,id:Le,label:J,labelAction:Te,loading:ue,loadingMessage:We,noOptionsMessage:be,onChange:ae,onClear:Ce,onCreateOption:Ue,onInputChange:ye,onLoadMore:Re,placeholder:Me,required:q,value:W,...ge})=>{const Pe=()=>d.find(c=>c.props?.value.toLowerCase()===W.toLowerCase()).props?.children,[P,xe]=(0,e.useState)(0),[F,Ae]=(0,e.useState)(null),[U,De]=(0,e.useState)(d),[z,me]=(0,e.useState)(!1),[L,re]=(0,e.useState)(""),_=(0,e.useRef)(),ee=(0,e.useRef)(!1),oe=(0,e.useRef)(),Ie=(0,e.useRef)(),n=(0,e.useRef)(),r=(0,e.useRef)(!0),a=(0,j.M)(Le),i=`${a}-label`;if(!J&&!ge["aria-label"])throw new Error('The Combobox component needs a "label" or an "aria-label" props');(0,e.useEffect)(()=>{De(N(d,L))},[L,d]),(0,e.useEffect)(()=>{z&&_.current&&fe(_.current)},[P,z]),(0,e.useLayoutEffect)(()=>{r.current&&(r.current=!1)},[W]);const m=z?`${a}-${P}`:"",x=()=>{ae(null),re("")},u=c=>{ye&&ye(c);const E=oe.current.value;De(N(d,E)),xe(0),Ae(null),L!==E&&re(E),z||A(!0,!1)},f=c=>{const{key:E}=c,C=B&&L?U.length:U.length-1,S=Se(E,z);switch(W&&!L&&E===s.y.BACKSPACE&&x(),S){case g.Next:{if(P===C){v(0);break}v(y(P,C,S));break}case g.Previous:{if(P===0){v(C);break}v(y(P,C,S));break}case g.Last:case g.First:{if(P===C){v(0);break}v(y(P,C,S));break}case g.CloseSelect:c.preventDefault(),h(P);break;case g.Close:c.preventDefault(),A(!1);break;case g.Open:A(!0);break}},M=c=>{if(c.preventDefault(),W&&!ee.current&&re(""),ee.current){ee.current=!1;return}A(!1,!1)},v=c=>{xe(c)},b=c=>{v(c),h(c)},I=()=>{ee.current=!0},h=c=>{const E=U[c];if(re(""),E){ae(E.props.value),A(!1);return}B&&(Ue(L),A(!1))},A=(c,E=!0)=>{me(c),E&&oe.current.focus()},K=e.Children.toArray(U).map((c,E)=>{const C=P===E;return(0,e.cloneElement)(c,{id:`${a}-${E}`,"aria-selected":F===E,"aria-posinset":E+1,"aria-setsize":e.Children.toArray(U).length,ref(S){C&&(_.current=S)},onClick:()=>b(E),onMouseDown:I,isSelected:C})}),G=()=>{oe.current.focus(),Ce&&Ce(),x()},Ze=()=>{oe.current.focus(),A(!0)},$e=()=>{const c=U.findIndex(E=>E.props?.children===L);return L&&c===-1},Be=c=>{c.preventDefault(),A(c,!0)};let pe;return H?pe=`${a}-error`:ce&&(pe=`${a}-hint`),e.createElement(ne.g,{hint:ce,error:H,id:a,required:q},e.createElement(ke.T,{"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text"},W),e.createElement($.k,{direction:"column",alignItems:"stretch",gap:J||ce||H?1:0},J&&e.createElement(se.Q,{action:Te},J),e.createElement(Z.d8,{ref:Ie,$disabled:R,hasError:H},e.createElement(Z.fv,{wrap:"wrap"},!L&&W&&e.createElement(Z.K7,{id:`${a}-selected-value`},e.createElement(Ee.Z,null,Pe())),e.createElement(Z.II,{"aria-activedescendant":m,"aria-autocomplete":"list","aria-controls":`${a}-listbox`,"aria-disabled":R,"aria-expanded":z,"aria-haspopup":"listbox","aria-describedby":pe,autoComplete:"off",autoCorrect:"off",id:a,onBlur:R?void 0:M,onClick:R?void 0:Be,onInput:R?void 0:u,onKeyDown:R?void 0:f,placeholder:W?"":Me,readOnly:R,ref:oe,required:q,role:"combobox",spellCheck:"off",type:"text",value:L})),e.createElement($.k,null,(W||L)&&e.createElement(ie.zb,{id:`${a}-clear`,"aria-label":D,disabled:R,paddingLeft:3,as:"button",onClick:G,type:"button"},e.createElement(l.Z,null)),e.createElement(ie.AV,{disabled:R,paddingLeft:3,"aria-hidden":!0,as:"button",onClick:Ze,tabIndex:-1,type:"button"},e.createElement(T.Z,null)))),e.createElement(V.J,null),e.createElement(le.c,null)),z&&e.createElement(w.J2,{id:`${a}-popover`,source:Ie,spacing:4,fullWidth:!0,intersectionId:`${a}-listbox-popover-intersection`,onReachEnd:ve&&!ue?Re:void 0},e.createElement("div",{role:"listbox",ref:n,id:`${a}-listbox`,"aria-labelledby":J?i:void 0},(Boolean(U.length)||B)&&e.createElement(e.Fragment,null,K,$e()&&B&&e.createElement(k.O,{isSelected:P===U.length,ref:c=>{P===U.length&&(_.current=c)},onMouseDown:I,onClick:()=>h(),taindex:0},X(L))),!U.length&&!B&&!ue&&e.createElement(Oe.x,{paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:_},e.createElement(Ee.Z,{textColor:"neutral800"},be(L))),ue&&e.createElement($.k,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2},e.createElement(he.a,{small:!0},We)))))},de=d=>e.createElement(Q,{...d,creatable:!0});Q.defaultProps={"aria-label":void 0,clearLabel:"clear",creatable:!1,createMessage:d=>`Create "${d}"`,disabled:!1,error:void 0,hasMoreItems:!1,hint:void 0,id:void 0,label:void 0,loading:!1,loadingMessage:"Loading content...",noOptionsMessage:()=>"No results found",onClear:void 0,onCreateOption:void 0,onInputChange:void 0,onLoadMore:void 0,placeholder:"Select or enter a value",value:void 0},de.defaultProps=Q.defaultProps,Q.propTypes={"aria-label":o.string,children:o.oneOfType([o.arrayOf(o.node),o.node]),clearLabel:o.string,creatable:o.bool,createMessage:o.func,disabled:o.bool,error:o.string,hasMoreItems:o.bool,id:o.string,hint:o.oneOfType([o.string,o.node,o.arrayOf(o.node)]),label:o.string,labelAction:o.element,loading:o.bool,loadingMessage:o.string,noOptionsMessage:o.func,onChange:o.func.isRequired,onClear:o.func,onCreateOption:o.func,onInputChange:o.func,onLoadMore:o.func,placeholder:o.string,value:o.string},de.propTypes={...Q.propTypes,onCreateOption:o.func.isRequired}},90333:function(te,O,t){t.d(O,{O:function(){return k}});var e=t(32735),l=t(60216),T=t(91225),o=t(49372);const k=(0,e.forwardRef)(({isSelected:Z,children:Y,...s},g)=>e.createElement(T.Zq,{hasRadius:!0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2,role:"option",background:"neutral0",isSelected:Z,ref:g,...s},e.createElement(o.Z,{textColor:Z?"primary600":"neutral800",fontWeight:Z?"bold":null},Y)));k.defaultProps={isSelected:!1},k.propTypes={children:l.oneOfType([l.string,l.number]).isRequired,isSelected:l.bool},k.displayName="ComboboxOption"},91225:function(te,O,t){t.d(O,{II:function(){return s},K7:function(){return Z},Zq:function(){return g},d8:function(){return k},fv:function(){return Y}});var e=t(8471),l=t(72850),T=t(87933),o=t(30350);const k=(0,e.ZP)(T.k)`
+  position: relative;
+  border: 1px solid ${({theme:p,hasError:N})=>N?p.colors.danger600:p.colors.neutral200};
+  padding-right: ${({theme:p})=>p.spaces[3]};
+  padding-left: ${({theme:p})=>p.spaces[3]};
+  border-radius: ${({theme:p})=>p.borderRadius};
+  background: ${({theme:p})=>p.colors.neutral0};
+
+  ${({theme:p,$disabled:N})=>N?`
+    color: ${p.colors.neutral600};
+    background: ${p.colors.neutral150};
+  `:void 0}
+
+  ${(0,o.k3)()}
+`,Z=e.ZP.div`
+  padding: 1px 2px;
+  grid-area: 1 / 1 / 2 / 3;
+`,Y=(0,e.ZP)(T.k)`
+  display: grid;
+  flex: 1 1 0%;
+  position: relative;
+`,s=e.ZP.input`
+  display: inline-grid;
+  grid-area: 1 / 1 / 2 / 3;
+  grid-template-columns: 0px min-content;
+  background: transparent;
+  min-height: ${40/16}rem;
+  border: none;
+  flex: 1;
+  font-size: ${14/16}rem;
+  color: ${({theme:p})=>p.colors.neutral800};
+  outline: none;
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+    outline-offset: 0;
+  }
+  &[aria-disabled='true'] {
+    background: inherit;
+    color: inherit;
+    cursor: not-allowed;
+  }
+`,g=(0,e.ZP)(l.x)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  ${({isSelected:p,theme:N})=>p&&`background: ${N.colors.primary100};`}
+
+  &:hover {
+    background: ${({theme:p})=>p.colors.primary100};
+  }
+`},29439:function(te,O,t){t.d(O,{Z:function(){return T}});var e=t(74512);const l=o=>(0,e.jsx)("svg",{width:"1rem",height:"1rem",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:(0,e.jsx)("path",{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",fill:"#212134"})}),T=l}}]);

package/build/webhook-list-page.5beb2a5c.chunk.js

@@ -0,0 +1,71 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[4121],{74767:function(U,L,t){t.r(L),t.d(L,{default:function(){return ue}});var e=t(32735),a=t(43383),b=t(83983),h=t(53038),O=t(67879),p=t(94638),C=t(96709),D=t(27649),c=t(82055),f=t(99223),i=t(49372),M=t(41415),x=t(17e3),H=t(72850),_=t(56755),ee=t(73269),te=t(33827),G=t(94547),E=t(19786),N=t(44426),ne=t(3685),le=t(35658),S=t(87933),y=t(60216),V=t(8471);const $=V.ZP.div`
+  background: ${({theme:l})=>l.colors.danger500};
+  border: none;
+  border-radius: 16px;
+  position: relative;
+  height: ${24/16}rem;
+  width: ${40/16}rem;
+
+  & span {
+    font-size: ${({visibleLabels:l})=>l?"1rem":0};
+  }
+
+  &:before {
+    content: '';
+    background: ${({theme:l})=>l.colors.neutral0};
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    position: absolute;
+    transition: all 0.5s;
+    left: ${({theme:l})=>l.spaces[1]};
+    top: ${({theme:l})=>l.spaces[1]};
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:before {
+      transition: none;
+    }
+  }
+`,ae=V.ZP.button`
+  background: transparent;
+  padding: 0;
+  border: none;
+
+  &[aria-checked='true'] ${$} {
+    background: ${({theme:l})=>l.colors.success500};
+  }
+
+  &[aria-checked='true'] ${$}:before {
+    transform: translateX(1rem);
+  }
+`,W=e.forwardRef(({label:l,onChange:r,onLabel:s,offLabel:d,selected:T,visibleLabels:v,...u},o)=>e.createElement(ae,{ref:o,role:"switch","aria-checked":T,"aria-label":l,onClick:r,visibleLabels:v,type:"button",...u},e.createElement(S.k,null,e.createElement($,null,e.createElement("span",null,s),e.createElement("span",null,d)),v&&e.createElement(H.x,{as:"span","aria-hidden":!0,paddingLeft:2,color:T?"success600":"danger600"},T?s:d))));W.defaultProps={onLabel:"On",offLabel:"Off",visibleLabels:!1},W.propTypes={label:y.string.isRequired,offLabel:y.string,onChange:y.func.isRequired,onLabel:y.string,selected:y.bool.isRequired,visibleLabels:y.bool},W.displayName="Switch";var j=t(50563),oe=t(9695),R=t(19406),F=t(4038),se=t(68625),re=t(54725),ie=t(97889),de=t(3040),ce=t.n(de);const Ee={webhooks:[],webhooksToDelete:[],webhookToDelete:null,loadingWebhooks:!0};var me=(l,r)=>(0,ie.ZP)(l,s=>{switch(r.type){case"GET_DATA_SUCCEEDED":{s.webhooks=r.data,s.loadingWebhooks=!1;break}case"TOGGLE_LOADING":{s.loadingWebhooks=!l.loadingWebhooks;break}case"SET_WEBHOOK_ENABLED":{ce()(s,["webhooks",...r.keys],r.value);break}case"SET_WEBHOOK_TO_DELETE":{s.webhookToDelete=r.id;break}case"SET_WEBHOOKS_TO_DELETE":{r.value?s.webhooksToDelete.push(r.id):s.webhooksToDelete=l.webhooksToDelete.filter(d=>d!==r.id);break}case"SET_ALL_WEBHOOKS_TO_DELETE":{l.webhooksToDelete.length===0?s.webhooksToDelete=l.webhooks.map(d=>d.id):s.webhooksToDelete=[];break}case"WEBHOOKS_DELETED":{s.webhooks=l.webhooks.filter(d=>!l.webhooksToDelete.includes(d.id)),s.webhooksToDelete=[];break}case"WEBHOOK_DELETED":{s.webhooks=l.webhooks.filter((d,T)=>T!==r.index),s.webhookToDelete=null;break}default:return s}}),he=()=>{const{isLoading:l,allowedActions:{canCreate:r,canRead:s,canUpdate:d,canDelete:T}}=(0,a.ss)(b.Z.settings.webhooks),v=(0,a.lm)(),u=(0,e.useRef)(!0),{formatMessage:o}=(0,O.Z)(),[ge,P]=(0,e.useState)(!1),[{webhooks:B,webhooksToDelete:Z,webhookToDelete:K,loadingWebhooks:I},g]=(0,e.useReducer)(me,Ee),{notifyStatus:be}=(0,p.G)();(0,a.go)();const{push:fe}=(0,h.k6)(),{pathname:z}=(0,h.TH)(),A=B.length,k=Z.length,Y=n=>B.findIndex(m=>m.id===n);(0,e.useEffect)(()=>(u.current=!0,()=>{u.current=!1}),[]),(0,e.useEffect)(()=>{s&&Te()},[s]);const Te=async()=>{try{const{data:n}=await(0,a.WY)("/admin/webhooks",{method:"GET"});u.current&&(g({type:"GET_DATA_SUCCEEDED",data:n}),be("webhooks have been loaded"))}catch(n){console.log(n),u.current&&(n.code!==20&&v({type:"warning",message:{id:"notification.error"}}),g({type:"TOGGLE_LOADING"}))}},De=()=>{P(n=>!n)},ve=()=>{K?Le():Oe()},Le=async()=>{try{await(0,a.WY)(`/admin/webhooks/${K}`,{method:"DELETE"}),g({type:"WEBHOOK_DELETED",index:Y(K)})}catch(n){n.code!==20&&v({type:"warning",message:{id:"notification.error"}})}P(!1)},Oe=async()=>{const n={ids:Z};try{await(0,a.WY)("/admin/webhooks/batch-delete",{method:"POST",body:n}),u.current&&g({type:"WEBHOOKS_DELETED"})}catch(m){u.current&&m.code!==20&&v({type:"warning",message:{id:"notification.error"}})}P(!1)},Q=n=>{P(!0),n!=="all"&&g({type:"SET_WEBHOOK_TO_DELETE",id:n})},pe=async(n,m)=>{const X=Y(m),ke=B[X],J=[X,"isEnabled"],q={...ke,isEnabled:n};delete q.id;try{g({type:"SET_WEBHOOK_ENABLED",keys:J,value:n}),await(0,a.WY)(`/admin/webhooks/${m}`,{method:"PUT",body:q})}catch(Me){u.current&&(g({type:"SET_WEBHOOK_ENABLED",keys:J,value:!n}),Me.code!==20&&v({type:"warning",message:{id:"notification.error"}}))}},ye=()=>{g({type:"SET_ALL_WEBHOOKS_TO_DELETE"})},Ce=(n,m)=>{g({type:"SET_WEBHOOKS_TO_DELETE",value:n,id:m})},w=n=>{fe(`${z}/${n}`)};return e.createElement(C.A,null,e.createElement(a.SL,{name:"Webhooks"}),e.createElement(D.o,{"aria-busy":l||I},e.createElement(c.T,{title:o({id:"Settings.webhooks.title",defaultMessage:"Webhooks"}),subtitle:o({id:"Settings.webhooks.list.description",defaultMessage:"Get POST changes notifications"}),primaryAction:r&&!I&&e.createElement(a.Qj,{startIcon:e.createElement(R.Z,null),variant:"default",to:`${z}/create`,size:"S"},o({id:"Settings.webhooks.list.button.add",defaultMessage:"Create new webhook"}))}),k>0&&T&&e.createElement(f.Z,{startActions:e.createElement(e.Fragment,null,e.createElement(i.Z,{variant:"epsilon",textColor:"neutral600"},o({id:"Settings.webhooks.to.delete",defaultMessage:"{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected"},{webhooksToDeleteLength:k})),e.createElement(M.z,{onClick:()=>Q("all"),startIcon:e.createElement(F.Z,null),size:"L",variant:"danger-light"},o({id:"global.delete",defaultMessage:"Delete"})))}),e.createElement(x.D,null,l||I?e.createElement(H.x,{background:"neutral0",padding:6,shadow:"filterShadow",hasRadius:!0},e.createElement(a.dO,null)):A>0?e.createElement(_.i,{colCount:5,rowCount:A+1,footer:e.createElement(ee.c,{onClick:()=>r?w("create"):{},icon:e.createElement(R.Z,null)},o({id:"Settings.webhooks.list.button.add",defaultMessage:"Create new webhook"}))},e.createElement(te.h,null,e.createElement(G.Tr,null,e.createElement(E.Th,null,e.createElement(N.C,{"aria-label":o({id:"global.select-all-entries",defaultMessage:"Select all entries"}),indeterminate:k>0&&k<A,value:k===A,onValueChange:ye})),e.createElement(E.Th,{width:"20%"},e.createElement(i.Z,{variant:"sigma",textColor:"neutral600"},o({id:"global.name",defaultMessage:"Name"}))),e.createElement(E.Th,{width:"60%"},e.createElement(i.Z,{variant:"sigma",textColor:"neutral600"},o({id:"Settings.webhooks.form.url",defaultMessage:"URL"}))),e.createElement(E.Th,{width:"20%"},e.createElement(i.Z,{variant:"sigma",textColor:"neutral600"},o({id:"Settings.webhooks.list.th.status",defaultMessage:"Status"}))),e.createElement(E.Th,null,e.createElement(ne.T,null,o({id:"Settings.webhooks.list.th.actions",defaultMessage:"Actions"}))))),e.createElement(le.p,null,B.map(n=>e.createElement(G.Tr,{key:n.id,...(0,a.X7)({fn:()=>w(n.id),condition:d})},e.createElement(E.Td,{...a.UW},e.createElement(N.C,{"aria-label":`${o({id:"global.select",defaultMessage:"Select"})} ${n.name}`,value:Z?.includes(n.id),onValueChange:m=>Ce(m,n.id),id:"select",name:"select"})),e.createElement(E.Td,null,e.createElement(i.Z,{fontWeight:"semiBold",textColor:"neutral800"},n.name)),e.createElement(E.Td,null,e.createElement(i.Z,{textColor:"neutral800"},n.url)),e.createElement(E.Td,null,e.createElement(S.k,{...a.UW},e.createElement(W,{onLabel:o({id:"global.enabled",defaultMessage:"Enabled"}),offLabel:o({id:"global.disabled",defaultMessage:"Disabled"}),label:`${n.name} ${o({id:"Settings.webhooks.list.th.status",defaultMessage:"Status"})}`,selected:n.isEnabled,onChange:()=>pe(!n.isEnabled,n.id),visibleLabels:!0}))),e.createElement(E.Td,null,e.createElement(S.k,{gap:1,...a.UW},d&&e.createElement(j.h,{onClick:()=>{w(n.id)},label:o({id:"Settings.webhooks.events.update",defaultMessage:"Update"}),icon:e.createElement(se.Z,null),noBorder:!0}),T&&e.createElement(j.h,{onClick:()=>Q(n.id),label:o({id:"global.delete",defaultMessage:"Delete"}),icon:e.createElement(F.Z,null),noBorder:!0,id:`delete-${n.id}`}))))))):e.createElement(oe.x,{icon:e.createElement(re.Z,{width:"160px"}),content:o({id:"Settings.webhooks.list.empty.description",defaultMessage:"No webhooks found"}),action:e.createElement(M.z,{variant:"secondary",startIcon:e.createElement(R.Z,null),onClick:()=>r?w("create"):{}},o({id:"Settings.webhooks.list.button.add",defaultMessage:"Create new webhook"}))}))),e.createElement(a.QH,{isOpen:ge,onToggleDialog:De,onConfirm:ve}))},ue=()=>e.createElement(a.O4,{permissions:b.Z.settings.webhooks.main},e.createElement(he,null))},99223:function(U,L,t){t.d(L,{Z:function(){return D}});var e=t(32735),a=t(60216),b=t(8471),h=t(72850),O=t(87933);const p=(0,b.ZP)(O.k)`
+  & > * + * {
+    margin-left: ${({theme:c})=>c.spaces[2]};
+  }
+
+  margin-left: ${({pullRight:c})=>c?"auto":void 0};
+`,C=(0,b.ZP)(p)`
+  flex-shrink: 0;
+`,D=({startActions:c,endActions:f})=>c||f?e.createElement(h.x,{paddingLeft:10,paddingRight:10},e.createElement(h.x,{paddingBottom:4},e.createElement(O.k,{justifyContent:"space-between",alignItems:"flex-start"},c&&e.createElement(p,{wrap:"wrap"},c),f&&e.createElement(C,{pullRight:!0},f)))):null;D.defaultProps={endActions:void 0,startActions:void 0},D.propTypes={endActions:a.node,startActions:a.node}},73269:function(U,L,t){t.d(L,{c:function(){return f}});var e=t(32735),a=t(60216),b=t(8471),h=t(72850),O=t(9026),p=t(87933),C=t(49372);const D=(0,b.ZP)(h.x)`
+  height: ${24/16}rem;
+  width: ${24/16}rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    height: ${10/16}rem;
+    width: ${10/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:i})=>i.colors.primary600};
+  }
+`,c=(0,b.ZP)(h.x)`
+  border-radius: 0 0 ${({theme:i})=>i.borderRadius} ${({theme:i})=>i.borderRadius};
+  display: block;
+  width: 100%;
+  border: none;
+`,f=({children:i,icon:M,...x})=>e.createElement("div",null,e.createElement(O.i,null),e.createElement(c,{as:"button",background:"primary100",padding:5,...x},e.createElement(p.k,null,e.createElement(D,{"aria-hidden":!0,background:"primary200"},M),e.createElement(h.x,{paddingLeft:3},e.createElement(C.Z,{variant:"pi",fontWeight:"bold",textColor:"primary600"},i)))));f.propTypes={children:a.string.isRequired,icon:a.node.isRequired}}}]);

package/{admin/src/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStage.js → ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js}

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '@strapi/design-system';
 
-export function ReviewWorkflowsStage({ name }) {
+export function ReviewWorkflowsStageEE({ name }) {
   return (
     <Typography fontWeight="regular" textColor="neutral700">
       {name}
@@ -10,6 +10,6 @@ export function ReviewWorkflowsStage({ name }) {
   );
 }
 
-ReviewWorkflowsStage.propTypes = {
+ReviewWorkflowsStageEE.propTypes = {
   name: PropTypes.string.isRequired,
 };

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system';
+
+import ReviewWorkflowsStage from '.';
+import getTrad from '../../../../../../../admin/src/content-manager/utils/getTrad';
+
+export default (layout) => {
+  const { formatMessage } = useIntl();
+
+  // TODO: As soon as the feature was enabled in EE mode, the BE currently does not have a way to send
+  // `false` once a user is in CE mode again. We shouldn't have to perform the window.strapi.isEE check here
+  // and it is meant to be in interim solution until we find a better one.
+  const hasReviewWorkflows =
+    (window.strapi.isEE && layout.contentType.options?.reviewWorkflows) ?? false;
+
+  if (!hasReviewWorkflows) {
+    return null;
+  }
+
+  return {
+    key: '__strapi_reviewWorkflows_stage_temp_key__',
+    name: 'strapi_reviewWorkflows_stage',
+    fieldSchema: {
+      type: 'custom',
+    },
+    metadatas: {
+      label: formatMessage({
+        id: getTrad(`containers.ListPage.table-headers.reviewWorkflows.stage`),
+        defaultMessage: 'Review stage',
+      }),
+      searchable: false,
+      sortable: false,
+    },
+    cellFormatter({ strapi_reviewWorkflows_stage }) {
+      // if entities are created e.g. through lifecycle methods
+      // they may not have a stage assigned
+      if (!strapi_reviewWorkflows_stage) {
+        return <Typography textColor="neutral800">-</Typography>;
+      }
+
+      return <ReviewWorkflowsStage name={strapi_reviewWorkflows_stage.name} />;
+    },
+  };
+};

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

@@ -0,0 +1,3 @@
+import { ReviewWorkflowsStageEE } from './ReviewWorkflowsStageEE';
+
+export default ReviewWorkflowsStageEE;

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

@@ -4,13 +4,16 @@ import {
   useCMEditViewDataManager,
   useAPIErrorHandler,
   useFetchClient,
+  useNotification,
 } from '@strapi/helper-plugin';
-import { Field, FieldLabel, FieldError, Flex } from '@strapi/design-system';
+import { Field, FieldLabel, FieldError, Flex, Loader } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
+import { useDispatch } from 'react-redux';
 
 import { useReviewWorkflows } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
 import Information from '../../../../../../admin/src/content-manager/pages/EditView/Information';
+import { updatePartialData } from '../../../../../../admin/src/content-manager/sharedReducers/crudReducer/actions';
 
 const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
 
@@ -19,27 +22,63 @@ export function InformationBoxEE() {
     initialData,
     isCreatingEntry,
     layout: { uid },
+    isSingleType,
   } = useCMEditViewDataManager();
+  const dispatch = useDispatch();
   const { put } = useFetchClient();
   const activeWorkflowStage = initialData?.[ATTRIBUTE_NAME] ?? null;
+  const hasReviewWorkflowsEnabled = Object.prototype.hasOwnProperty.call(
+    initialData,
+    ATTRIBUTE_NAME
+  );
   const { formatMessage } = useIntl();
   const { formatAPIError } = useAPIErrorHandler();
+  const toggleNotification = useNotification();
 
-  const { workflows: { data: [workflow] = [] } = {} } = useReviewWorkflows();
+  const { workflows: { data: workflows, isLoading: workflowIsLoading } = {} } =
+    useReviewWorkflows();
+  // TODO: this works only as long as we support one workflow
+  const workflow = workflows?.[0] ?? null;
 
-  const { error, isLoading, mutateAsync } = useMutation(async ({ entityId, stageId, uid }) => {
-    const {
-      data: { data },
-    } = await put(`/admin/content-manager/collection-types/${uid}/${entityId}/stage`, {
-      data: { id: stageId },
-    });
+  const { error, isLoading, mutateAsync } = useMutation(
+    async ({ entityId, stageId, uid }) => {
+      const typeSlug = isSingleType ? 'single-types' : 'collection-types';
 
-    return data;
-  });
+      const {
+        data: { data: createdEntity },
+      } = await put(`/admin/content-manager/${typeSlug}/${uid}/${entityId}/stage`, {
+        data: { id: stageId },
+      });
 
-  // stages are empty while the workflow is loading
-  const options = (workflow?.stages ?? []).map(({ id, name }) => ({ value: id, label: name }));
-  const formattedError = error ? formatAPIError(error) : null;
+      dispatch(updatePartialData({ [ATTRIBUTE_NAME]: createdEntity[ATTRIBUTE_NAME] }));
+
+      return createdEntity;
+    },
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+        });
+      },
+    }
+  );
+
+  // if entities are created e.g. through lifecycle methods
+  // they may not have a stage assigned. Updating the entity won't
+  // set the default stage either which may lead to entities that
+  // do not have a stage assigned for a while. By displaying an
+  // error by default we are trying to nudge users into assigning a stage.
+  const initialStageNullError =
+    activeWorkflowStage === null &&
+    !workflowIsLoading &&
+    !isCreatingEntry &&
+    formatMessage({
+      id: 'content-manager.reviewWorkflows.stage.select.placeholder',
+      defaultMessage: 'Select a stage',
+    });
+  const formattedMutationError = error && formatAPIError(error);
+  const formattedError = formattedMutationError || initialStageNullError || null;
 
   const handleStageChange = async ({ value: stageId }) => {
     try {
@@ -58,7 +97,7 @@ export function InformationBoxEE() {
     <Information.Root>
       <Information.Title />
 
-      {activeWorkflowStage && (
+      {hasReviewWorkflowsEnabled && !isCreatingEntry && (
         <Field error={formattedError} name={ATTRIBUTE_NAME} id={ATTRIBUTE_NAME}>
           <Flex direction="column" gap={2} alignItems="stretch">
             <FieldLabel>
@@ -69,16 +108,20 @@ export function InformationBoxEE() {
             </FieldLabel>
 
             <ReactSelect
+              components={{
+                LoadingIndicator: () => <Loader small />,
+              }}
               error={formattedError}
               inputId={ATTRIBUTE_NAME}
-              isDisabled={isCreatingEntry}
-              options={options}
-              name={ATTRIBUTE_NAME}
-              defaultValue={{ value: activeWorkflowStage?.id, label: activeWorkflowStage?.name }}
               isLoading={isLoading}
               isSearchable={false}
               isClearable={false}
+              name={ATTRIBUTE_NAME}
               onChange={handleStageChange}
+              options={
+                workflow ? workflow.stages.map(({ id, name }) => ({ value: id, label: name })) : []
+              }
+              value={{ value: activeWorkflowStage?.id, label: activeWorkflowStage?.name }}
             />
 
             <FieldError />

package/ee/admin/hooks/useLicenseLimitNotification/index.js

@@ -5,7 +5,7 @@
  */
 import { useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { useNotification } from '@strapi/helper-plugin';
 import isNil from 'lodash/isNil';
 import useLicenseLimits from '../useLicenseLimits';

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/hooks/useAuditLogsData.js

@@ -2,7 +2,7 @@ import { useQuery } from 'react-query';
 import { useNotification, useFetchClient } from '@strapi/helper-plugin';
 import { useLocation } from 'react-router-dom';
 
-const useAuditLogsData = ({ canRead }) => {
+const useAuditLogsData = ({ canReadAuditLogs, canReadUsers }) => {
   const { get } = useFetchClient();
   const { search } = useLocation();
   const toggleNotification = useNotification();
@@ -21,7 +21,6 @@ const useAuditLogsData = ({ canRead }) => {
   };
 
   const queryOptions = {
-    enabled: canRead,
     keepPreviousData: true,
     retry: false,
     staleTime: 1000 * 20, // 20 seconds
@@ -32,10 +31,14 @@ const useAuditLogsData = ({ canRead }) => {
     data: auditLogs,
     isLoading,
     isError: isAuditLogsError,
-  } = useQuery(['auditLogs', search], fetchAuditLogsPage, queryOptions);
+  } = useQuery(['auditLogs', search], fetchAuditLogsPage, {
+    ...queryOptions,
+    enabled: canReadAuditLogs,
+  });
 
   const { data: users, isError: isUsersError } = useQuery(['auditLogsUsers'], fetchAllUsers, {
     ...queryOptions,
+    enabled: canReadUsers,
     staleTime: 2 * (1000 * 60), // 2 minutes
   });
 

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/index.js

@@ -25,17 +25,27 @@ import Filters from '../../../../../../../admin/src/pages/SettingsPage/component
 import getDisplayedFilters from './utils/getDisplayedFilters';
 import useAuditLogsData from './hooks/useAuditLogsData';
 
+const auditLogsPermissions = {
+  ...adminPermissions.settings.auditLogs,
+  readUsers: adminPermissions.settings.users.read,
+};
+
 const ListView = () => {
   const { formatMessage } = useIntl();
+
   const {
-    allowedActions: { canRead },
-  } = useRBAC(adminPermissions.settings.auditLogs);
+    allowedActions: { canRead: canReadAuditLogs, canReadUsers },
+  } = useRBAC(auditLogsPermissions);
+
   const [{ query }, setQuery] = useQueryParams();
-  const { auditLogs, users, isLoading, hasError } = useAuditLogsData({ canRead });
+  const { auditLogs, users, isLoading, hasError } = useAuditLogsData({
+    canReadAuditLogs,
+    canReadUsers,
+  });
 
   useFocusWhenNavigate();
 
-  const displayedFilters = getDisplayedFilters({ formatMessage, users });
+  const displayedFilters = getDisplayedFilters({ formatMessage, users, canReadUsers });
 
   const title = formatMessage({
     id: 'global.auditLogs',
@@ -73,7 +83,7 @@ const ListView = () => {
         })}
       />
       <ActionLayout startActions={<Filters displayedFilters={displayedFilters} />} />
-      <ContentLayout canRead={canRead}>
+      <ContentLayout canRead={canReadAuditLogs}>
         <DynamicTable
           contentType="Audit logs"
           headers={headers}

package/ee/admin/pages/SettingsPage/pages/AuditLogs/ListView/utils/getDisplayedFilters.js

@@ -12,27 +12,7 @@ const customOperators = [
   },
 ];
 
-const getDisplayedFilters = ({ formatMessage, users }) => {
-  const getDisplaynameFromUser = (user) => {
-    if (user.username) {
-      return user.username;
-    }
-    if (user.firstname && user.lastname) {
-      return formatMessage(
-        {
-          id: 'Settings.permissions.auditLogs.user.fullname',
-          defaultMessage: '{firstname} {lastname}',
-        },
-        {
-          firstname: user.firstname,
-          lastname: user.lastname,
-        }
-      );
-    }
-
-    return user.email;
-  };
-
+const getDisplayedFilters = ({ formatMessage, users, canReadUsers }) => {
   const actionOptions = Object.keys(actionTypes).map((action) => {
     return {
       label: formatMessage(
@@ -46,17 +26,7 @@ const getDisplayedFilters = ({ formatMessage, users }) => {
     };
   });
 
-  const userOptions =
-    users &&
-    users.results.map((user) => {
-      return {
-        label: getDisplaynameFromUser(user),
-        // Combobox expects a string value
-        customValue: user.id.toString(),
-      };
-    });
-
-  return [
+  const filters = [
     {
       name: 'action',
       metadatas: {
@@ -80,20 +50,57 @@ const getDisplayedFilters = ({ formatMessage, users }) => {
       },
       fieldSchema: { type: 'datetime' },
     },
-    {
-      name: 'user',
-      metadatas: {
-        customOperators,
-        label: formatMessage({
-          id: 'Settings.permissions.auditLogs.user',
-          defaultMessage: 'User',
-        }),
-        options: userOptions,
-        customInput: ComboboxFilter,
-      },
-      fieldSchema: { type: 'relation', mainField: { name: 'id' } },
-    },
   ];
+
+  if (canReadUsers && users) {
+    const getDisplayNameFromUser = (user) => {
+      if (user.username) {
+        return user.username;
+      }
+
+      if (user.firstname && user.lastname) {
+        return formatMessage(
+          {
+            id: 'Settings.permissions.auditLogs.user.fullname',
+            defaultMessage: '{firstname} {lastname}',
+          },
+          {
+            firstname: user.firstname,
+            lastname: user.lastname,
+          }
+        );
+      }
+
+      return user.email;
+    };
+
+    const userOptions = users.results.map((user) => {
+      return {
+        label: getDisplayNameFromUser(user),
+        // Combobox expects a string value
+        customValue: user.id.toString(),
+      };
+    });
+
+    return [
+      ...filters,
+      {
+        name: 'user',
+        metadatas: {
+          customOperators,
+          label: formatMessage({
+            id: 'Settings.permissions.auditLogs.user',
+            defaultMessage: 'User',
+          }),
+          options: userOptions,
+          customInput: ComboboxFilter,
+        },
+        fieldSchema: { type: 'relation', mainField: { name: 'id' } },
+      },
+    ];
+  }
+
+  return filters;
 };
 
 export default getDisplayedFilters;

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

@@ -86,10 +86,10 @@ export function ReviewWorkflowsPage() {
   };
 
   const submitForm = async () => {
-    setIsConfirmDeleteDialogOpen(false);
-
     await updateWorkflowStages(currentWorkflow.id, currentWorkflow.stages);
-    refetchWorkflow();
+    await refetchWorkflow();
+
+    setIsConfirmDeleteDialogOpen(false);
   };
 
   const handleConfirmDeleteDialog = async () => {
@@ -122,7 +122,8 @@ export function ReviewWorkflowsPage() {
 
   useEffect(() => {
     trackUsage('didViewWorkflow');
-  }, [trackUsage]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <CheckPagePermissions permissions={adminPermissions.settings['review-workflows'].main}>
@@ -143,6 +144,9 @@ export function ReviewWorkflowsPage() {
                     type="submit"
                     size="M"
                     disabled={!currentWorkflowIsDirty}
+                    // if the confirm dialog is open the loading state is on
+                    // the confirm button already
+                    loading={!isConfirmDeleteDialogOpen && isLoading}
                   >
                     {formatMessage({
                       id: 'global.save',