@strapi/admin 4.10.2-alpha.0 → 4.10.2

package/build/review-workflows-settings.7c0b4e73.chunk.js

@@ -0,0 +1,61 @@
+"use strict";(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[8155],{89945:function(_e,N,a){a.r(N),a.d(N,{default:function(){return He}});var t=a(32735),D=a(92802),O=a(67879),R=a(15062),J=a(20108),v=a(24989),q=a(96709),_=a(27649),ee=a(82055),te=a(41415),ae=a(17e3),oe=a(97405),ne=a(66456),re=a(60216),g=a.n(re),I=a(8471),k=a(72850),h=a(87933),d=a(61937);function se({status:e,data:o}){return{type:d.QM,payload:{status:e,workflows:o}}}function le(e){return{type:d.x4,payload:{stageId:e}}}function ie(e={}){return{type:d.Ot,payload:e}}function U(e,o){return{type:d.Nj,payload:{stageId:e,...o}}}function de(e,o){return{type:d.$k,payload:{newIndex:o,oldIndex:e}}}var b=a(49372),ce=a(86308);const L=(0,I.ZP)(ce.Z)`
+  > circle {
+    fill: ${({theme:e})=>e.colors.neutral150};
+  }
+  > path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`,ue=(0,I.ZP)(k.x)`
+  border-radius: 26px;
+
+  svg {
+    height: ${({theme:e})=>e.spaces[6]};
+    width: ${({theme:e})=>e.spaces[6]};
+
+    > path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+
+  &:hover {
+    color: ${({theme:e})=>e.colors.primary600} !important;
+    ${b.Z} {
+      color: ${({theme:e})=>e.colors.primary600} !important;
+    }
+
+    ${L} {
+      > circle {
+        fill: ${({theme:e})=>e.colors.primary600};
+      }
+      > path {
+        fill: ${({theme:e})=>e.colors.neutral100};
+      }
+    }
+  }
+
+  &:active {
+    ${b.Z} {
+      color: ${({theme:e})=>e.colors.primary600};
+    }
+
+    ${L} {
+      > circle {
+        fill: ${({theme:e})=>e.colors.primary600};
+      }
+      > path {
+        fill: ${({theme:e})=>e.colors.neutral100};
+      }
+    }
+  }
+`;function G({children:e,...o}){return t.createElement(ue,{as:"button",background:"neutral0",border:"neutral150",paddingBottom:3,paddingLeft:4,paddingRight:4,paddingTop:3,shadow:"filterShadow",...o},t.createElement(h.k,{gap:2},t.createElement(L,{"aria-hidden":!0}),t.createElement(b.Z,{variant:"pi",fontWeight:"bold",textColor:"neutral500"},e)))}G.propTypes={children:g().node.isRequired};var ge=a(3685),me=a(83828),fe=a(61762),j=a(50563),ve=a(89966),pe=a(15335),z=a(5803),Se=a(10369),he=a(87107),we=a(28847),ye=a(47851),Ee=a(4038),ke=a(47081),Ce=a(12301);function et(e){const n=Object.entries(lightTheme.colors).filter(([,c])=>c===e).reduce((c,[s])=>(STAGE_COLORS?.[s]&&(c=s),c),null);return n?{themeColorName:n,name:STAGE_COLORS[n]}:null}function We(){return Object.entries(d.lv).map(([e,o])=>({hex:Ce.W.colors[e].toUpperCase(),name:o}))}var De=a(28315),Re=a(8445),Ie=a(56327),Me=a(95952);const $e=We();function Te(){return t.createElement(k.x,{background:"primary100",borderStyle:"dashed",borderColor:"primary600",borderWidth:"1px",display:"block",hasRadius:!0,padding:6,shadow:"tableShadow"})}function H({id:e,index:o,canDelete:n,canReorder:c,isOpen:s=!1,stagesCount:l}){const r=i=>`${i+1} of ${l}`,m=i=>{y(u({id:"dnd.grab-item",defaultMessage:"{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel."},{item:p.value,position:r(i)}))},w=i=>{y(u({id:"dnd.drop-item",defaultMessage:"{item}, dropped. Final position in list: {position}."},{item:p.value,position:r(i)}))},C=()=>{y(u({id:"dnd.cancel-item",defaultMessage:"{item}, dropped. Re-order cancelled."},{item:p.value}))},P=(i,V)=>{y(u({id:"dnd.reorder",defaultMessage:"{item}, moved. New position in list: {position}."},{item:p.value,position:r(i)})),E(de(V,i))},[x,y]=t.useState(null),{formatMessage:u}=(0,O.Z)(),{trackUsage:F}=(0,v.rS)(),E=(0,R.I0)(),[$,A]=t.useState(s),[p,B]=(0,D.U$)(`stages.${o}.name`),[f,S]=(0,D.U$)(`stages.${o}.color`),[{handlerId:T,isDragging:W,handleKeyDown:Ke},Qe,Xe,Ye]=(0,Ie.Y9)(c,{index:o,item:{name:p.value},onGrabItem:m,onDropItem:w,onMoveItem:P,onCancel:C,type:d.uL.STAGE}),Je=(0,Me.FE)(Qe,Xe),Y=$e.map(({hex:i,name:V})=>({value:i,label:u({id:"Settings.review-workflows.stage.color.name",defaultMessage:"{name}"},{name:V}),color:i})),qe=Y.find(({value:i})=>i===f.value.toUpperCase());return t.createElement(k.x,{ref:Je},x&&t.createElement(ge.T,{"aria-live":"assertive"},x),W?t.createElement(Te,null):t.createElement(me.U,{size:"S",variant:"primary",onToggle:()=>{A(!$),$||F("willEditStage")},expanded:$,shadow:"tableShadow"},t.createElement(fe.B,{title:p.value,togglePosition:"left",action:t.createElement(t.Fragment,null,n&&t.createElement(j.h,{background:"transparent",icon:t.createElement(Ee.Z,null),label:u({id:"Settings.review-workflows.stage.delete",defaultMessage:"Delete stage"}),noBorder:!0,onClick:()=>E(le(e))}),t.createElement(j.h,{background:"transparent",forwardedAs:"div",role:"button",noBorder:!0,tabIndex:0,"data-handler-id":T,ref:Ye,label:u({id:"Settings.review-workflows.stage.drag",defaultMessage:"Drag"}),onClick:i=>i.stopPropagation(),onKeyDown:Ke},t.createElement(ke.Z,null)))}),t.createElement(ve.v,{padding:6,background:"neutral0",hasRadius:!0},t.createElement(pe.r,{gap:4},t.createElement(z.P,{col:6},t.createElement(Se.o,{...p,id:p.name,label:u({id:"Settings.review-workflows.stage.name.label",defaultMessage:"Stage name"}),error:B.error??!1,onChange:i=>{p.onChange(i),E(U(e,{name:i.target.value}))},required:!0})),t.createElement(z.P,{col:6},t.createElement(he.g,{error:S?.error??!1,name:f.name,id:f.name,required:!0},t.createElement(h.k,{direction:"column",gap:1,alignItems:"stretch"},t.createElement(we.Q,null,u({id:"content-manager.reviewWorkflows.stage.color",defaultMessage:"Color"})),t.createElement(v.JV,{components:{Option:De.K,SingleValue:Re.R},error:S?.error,inputId:f.name,name:f.name,options:Y,onChange:({value:i})=>{f.onChange({target:{value:i}}),E(U(e,{color:i}))},value:qe??{value:f.value,label:u({id:"Settings.review-workflows.stage.color.name.custom",defaultMessage:"Custom"}),color:f.value}}),t.createElement(ye.c,null))))))))}H.propTypes=g().shape({id:g().number.isRequired,color:g().string.isRequired,canDelete:g().bool.isRequired,canReorder:g().bool.isRequired,stagesCount:g().number.isRequired}).isRequired;const be=(0,I.ZP)(k.x)`
+  position: relative;
+`,xe=(0,I.ZP)(k.x)`
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+`;function Z({stages:e}){const{formatMessage:o}=(0,O.Z)(),n=(0,R.I0)(),{trackUsage:c}=(0,v.rS)();return t.createElement(h.k,{direction:"column",gap:6,width:"100%"},t.createElement(be,{spacing:4,width:"100%"},t.createElement(xe,{background:"neutral200",height:"100%",width:2,zIndex:1}),t.createElement(h.k,{direction:"column",alignItems:"stretch",gap:6,zIndex:2,position:"relative",as:"ol"},e.map((s,l)=>{const r=s?.id??s.__temp_key__;return t.createElement(k.x,{key:`stage-${r}`,as:"li"},t.createElement(H,{id:r,index:l,canDelete:e.length>1,isOpen:!s.id,canReorder:e.length>1,stagesCount:e.length}))}))),t.createElement(h.k,{direction:"column",gap:6},t.createElement(G,{type:"button",onClick:()=>{n(ie({name:""})),c("willCreateStage")}},o({id:"Settings.review-workflows.stage.add",defaultMessage:"Add new stage"}))))}Z.defaultProps={stages:[]},Z.propTypes={stages:g().arrayOf(g().shape({id:g().number,__temp_key__:g().number,name:g().string.isRequired}))};var K=a(97889),Ae=a(89793),Oe=a.n(Ae);const Q={status:"loading",serverState:{currentWorkflow:null,workflows:[]},clientState:{currentWorkflow:{data:null,isDirty:!1,hasDeletedServerStages:!1}}};function Le(e=Q,o){return(0,K.Uy)(e,n=>{const{payload:c}=o;switch(o.type){case d.QM:{const{status:s,workflows:l}=c;if(n.status=s,l?.length>0){let r=l[0];r={...r,stages:r.stages.map(m=>({...m,color:m?.color??d.FT}))},n.serverState.workflows=l,n.serverState.currentWorkflow=r,n.clientState.currentWorkflow.data=r,n.clientState.currentWorkflow.hasDeletedServerStages=!1}break}case d.x4:{const{stageId:s}=c,{currentWorkflow:l}=e.clientState;n.clientState.currentWorkflow.data.stages=l.data.stages.filter(r=>(r?.id??r.__temp_key__)!==s),l.hasDeletedServerStages||(n.clientState.currentWorkflow.hasDeletedServerStages=!!e.serverState.currentWorkflow.stages.find(r=>r.id===s));break}case d.Ot:{const{currentWorkflow:s}=e.clientState;s.data||(n.clientState.currentWorkflow.data={stages:[]});const l=Ze(n.clientState.currentWorkflow.data.stages);n.clientState.currentWorkflow.data.stages.push({...c,color:c?.color??d.FT,__temp_key__:l});break}case d.Nj:{const{currentWorkflow:s}=e.clientState,{stageId:l,...r}=c;n.clientState.currentWorkflow.data.stages=s.data.stages.map(m=>(m.id??m.__temp_key__)===l?{...m,...r}:m);break}case d.$k:{const{currentWorkflow:{data:{stages:s}}}=e.clientState,{newIndex:l,oldIndex:r}=c;if(l>=0&&l<s.length){const m=s[r];let w=[...s];w.splice(r,1),w.splice(l,0,m),n.clientState.currentWorkflow.data.stages=w}break}default:break}e.clientState.currentWorkflow.data&&(n.clientState.currentWorkflow.isDirty=!Oe()((0,K.Vk)(n.clientState.currentWorkflow).data,n.serverState.currentWorkflow))})}const Ze=(e=[])=>{const o=e.map(n=>n.id??n.__temp_key__);return Math.max(...o,-1)+1};function Pe(e,o){const n=(0,R.oR)();(0,t.useEffect)(()=>{n.injectReducer(e,o)},[n,e,o])}var Fe=a(67350),M=a(24346);function Be({formatMessage:e}){return M.Ry({stages:M.IX().of(M.Ry().shape({name:M.Z_().required(e({id:"Settings.review-workflows.validation.stage.name",defaultMessage:"Name is required"})).max(255,e({id:"Settings.review-workflows.validation.stage.max-length",defaultMessage:"Name can not be longer than 255 characters"})),color:M.Z_().required(e({id:"Settings.review-workflows.validation.stage.color",defaultMessage:"Color is required"})).matches(/^#(?:[0-9a-fA-F]{3}){1,2}$/i)}))})}var Ve=a(83983),Ne=a(16899);const Ue=(0,I.ZP)(h.k)`
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`;function X({name:e}){return t.createElement(h.k,{background:"primary100",borderStyle:"dashed",borderColor:"primary600",borderWidth:"1px",gap:3,hasRadius:!0,padding:3,shadow:"tableShadow",width:(0,v.Q1)(300)},t.createElement(Ue,{alignItems:"center",background:"neutral200",borderRadius:"50%",height:6,justifyContent:"center",width:6},t.createElement(Ne.Z,{width:`${8/16}rem`})),t.createElement(b.Z,{fontWeight:"bold"},e))}X.propTypes={name:g().string.isRequired};var Ge=a(55433);function je({type:e,item:o}){switch(e){case d.uL.STAGE:return t.createElement(X,{...o});default:return null}}function ze(){const{trackUsage:e}=(0,v.rS)(),{formatMessage:o}=(0,O.Z)(),n=(0,R.I0)(),{put:c}=(0,v.kY)(),{formatAPIError:s}=(0,v.So)(),l=(0,v.lm)(),{workflows:r,refetchWorkflow:m}=(0,Fe.n)(),{status:w,clientState:{currentWorkflow:{data:C,isDirty:P,hasDeletedServerStages:x}}}=(0,R.v9)(S=>S?.[d.sN]??Q),[y,u]=(0,t.useState)(!1),{mutateAsync:F,isLoading:E}=(0,J.useMutation)(async({workflowId:S,stages:T})=>{const{data:{data:W}}=await c(`/admin/review-workflows/workflows/${S}/stages`,{data:T});return W},{onSuccess(){l({type:"success",message:{id:"notification.success.saved",defaultMessage:"Saved"}})}}),$=async(S,T)=>{try{return await F({workflowId:S,stages:T})}catch(W){return l({type:"warning",message:s(W)}),null}},A=async()=>{await $(C.id,C.stages),await m(),u(!1)},p=async()=>{await A()},B=()=>{u(S=>!S)},f=(0,D.TA)({enableReinitialize:!0,initialValues:C,async onSubmit(){x?u(!0):A()},validationSchema:Be({formatMessage:o}),validateOnChange:!1});return Pe(d.sN,Le),(0,t.useEffect)(()=>{n(se({status:r.status,data:r.data}))},[r.status,r.data,n]),(0,t.useEffect)(()=>{e("didViewWorkflow")},[]),t.createElement(v.O4,{permissions:Ve.Z.settings["review-workflows"].main},t.createElement(q.A,null,t.createElement(v.SL,{name:o({id:"Settings.review-workflows.page.title",defaultMessage:"Review Workflows"})}),t.createElement(_.o,{tabIndex:-1},t.createElement(Ge.r,{renderItem:je}),t.createElement(D.Hy,{value:f},t.createElement(D.l0,{onSubmit:f.handleSubmit},t.createElement(ee.T,{primaryAction:t.createElement(te.z,{startIcon:t.createElement(ne.Z,null),type:"submit",size:"M",disabled:!P,loading:!y&&E},o({id:"global.save",defaultMessage:"Save"})),title:o({id:"Settings.review-workflows.page.title",defaultMessage:"Review Workflows"}),subtitle:o({id:"Settings.review-workflows.page.subtitle",defaultMessage:"{count, plural, one {# stage} other {# stages}}"},{count:C?.stages?.length??0})}),t.createElement(ae.D,null,w==="loading"&&t.createElement(oe.a,null,o({id:"Settings.review-workflows.page.isLoading",defaultMessage:"Workflow is loading"})),t.createElement(Z,{stages:f.values?.stages})))),t.createElement(v.QH,{bodyText:{id:"Settings.review-workflows.page.delete.confirm.body",defaultMessage:"All entries assigned to deleted stages will be moved to the previous stage. Are you sure you want to save?"},isConfirmButtonLoading:E,isOpen:y,onToggleDialog:B,onConfirm:p}))))}var He=ze}}]);

package/build/{runtime~main.c9593d59.js → runtime~main.c20330f1.js}

@@ -1,2 +1,2 @@
-(function(){"use strict";var j={},m={};function e(n){var i=m[n];if(i!==void 0)return i.exports;var t=m[n]={id:n,loaded:!1,exports:{}};return j[n].call(t.exports,t,t.exports,e),t.loaded=!0,t.exports}e.m=j,function(){var n=[];e.O=function(i,t,o,r){if(t){r=r||0;for(var s=n.length;s>0&&n[s-1][2]>r;s--)n[s]=n[s-1];n[s]=[t,o,r];return}for(var a=1/0,s=0;s<n.length;s++){for(var t=n[s][0],o=n[s][1],r=n[s][2],c=!0,l=0;l<t.length;l++)(r&!1||a>=r)&&Object.keys(e.O).every(function(b){return e.O[b](t[l])})?t.splice(l--,1):(c=!1,r<a&&(a=r));if(c){n.splice(s--,1);var d=o();d!==void 0&&(i=d)}}return i}}(),function(){e.n=function(n){var i=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(i,{a:i}),i}}(),function(){var n=Object.getPrototypeOf?function(t){return Object.getPrototypeOf(t)}:function(t){return t.__proto__},i;e.t=function(t,o){if(o&1&&(t=this(t)),o&8||typeof t=="object"&&t&&(o&4&&t.__esModule||o&16&&typeof t.then=="function"))return t;var r=Object.create(null);e.r(r);var s={};i=i||[null,n({}),n([]),n(n)];for(var a=o&2&&t;typeof a=="object"&&!~i.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(c){s[c]=function(){return t[c]}});return s.default=function(){return t},e.d(r,s),r}}(),function(){e.d=function(n,i){for(var t in i)e.o(i,t)&&!e.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:i[t]})}}(),function(){e.f={},e.e=function(n){return Promise.all(Object.keys(e.f).reduce(function(i,t){return e.f[t](n,i),i},[]))}}(),function(){e.u=function(n){return""+({46:"content-type-builder-translation-zh-Hans-json",90:"i18n-translation-de-json",92:"api-tokens-edit-page",96:"email-translation-de-json",123:"ru-json",129:"i18n-translation-es-json",302:"sso-settings-page",320:"en-json",395:"tr-json",435:"email-translation-it-json",562:"no-json",585:"upload-translation-pt-json",606:"sk-json",615:"upload-translation-uk-json",695:"upload-settings",742:"content-type-builder-translation-th-json",744:"email-translation-cs-json",749:"th-json",801:"Admin-authenticatedApp",830:"he-json",931:"content-type-builder-translation-en-json",994:"content-manager",1001:"content-type-builder-translation-nl-json",1009:"upload-translation-ms-json",1011:"zh-json",1018:"email-translation-ko-json",1023:"content-type-builder-translation-it-json",1056:"upload-translation-tr-json",1157:"email-translation-pt-BR-json",1167:"users-permissions-translation-ko-json",1180:"i18n-translation-tr-json",1312:"ja-json",1331:"upload-translation-es-json",1375:"upload-translation-pt-BR-json",1377:"ko-json",1442:"users-permissions-translation-cs-json",1495:"email-settings-page",1674:"users-permissions-translation-ru-json",1930:"users-permissions-translation-pt-json",2137:"i18n-translation-fr-json",2151:"content-type-builder-translation-id-json",2246:"content-type-builder-translation-dk-json",2248:"gu-json",2282:"users-providers-settings-page",2380:"users-permissions-translation-tr-json",2411:"email-translation-tr-json",2464:"users-permissions-translation-de-json",2489:"upload-translation-ko-json",2492:"transfer-tokens-edit-page",2544:"admin-edit-roles-page",2553:"zh-Hans-json",2567:"content-type-builder-translation-ko-json",2603:"email-translation-en-json",2648:"email-translation-ar-json",2657:"content-type-builder-translation-cs-json",2671:"nl-json",2742:"users-permissions-translation-zh-Hans-json",2812:"audit-logs-settings-page",3025:"ms-json",3038:"upload-translation-sk-json",3043:"email-translation-zh-Hans-json",3095:"users-permissions-translation-sk-json",3098:"users-permissions-translation-fr-json",3166:"email-translation-pt-json",3206:"email-translation-nl-json",3278:"vi-json",3304:"content-type-builder-translation-tr-json",3340:"pt-json",3455:"admin-roles-list",3516:"ca-json",3530:"users-permissions-translation-vi-json",3552:"i18n-settings-page",3650:"upload",3677:"Admin_pluginsPage",3702:"users-permissions-translation-pl-json",3825:"email-translation-dk-json",3948:"content-type-builder-translation-pl-json",3964:"content-type-builder-translation-ms-json",3981:"Admin_homePage",4021:"upload-translation-de-json",4121:"webhook-list-page",4179:"users-permissions-translation-id-json",4263:"admin-edit-users",4299:"api-tokens-create-page",4302:"content-type-builder-translation-zh-json",4587:"email-translation-th-json",4693:"email-translation-fr-json",4804:"upload-translation-ru-json",4816:"transfer-tokens-create-page",4987:"upload-translation-pl-json",5053:"upload-translation-zh-json",5162:"webhook-edit-page",5199:"admin-users",5222:"upload-translation-it-json",5296:"i18n-translation-dk-json",5388:"email-translation-ru-json",5396:"users-permissions-translation-zh-json",5516:"Admin_marketplace",5538:"admin-app",5751:"email-translation-es-json",5880:"upload-translation-ja-json",5894:"hu-json",5895:"Admin_settingsPage",5905:"content-type-builder-list-view",5906:"content-type-builder-translation-pt-BR-json",6232:"upload-translation-th-json",6280:"i18n-translation-ko-json",6332:"hi-json",6377:"users-permissions-translation-dk-json",6434:"upload-translation-en-json",6460:"users-permissions-translation-en-json",6745:"email-translation-uk-json",6784:"email-translation-ms-json",6817:"it-json",6831:"upload-translation-zh-Hans-json",6836:"users-permissions-translation-uk-json",6848:"email-translation-zh-json",6901:"de-json",7048:"users-permissions-translation-nl-json",7094:"users-permissions-translation-ar-json",7155:"content-type-builder-translation-de-json",7186:"content-type-builder-translation-ru-json",7327:"email-translation-vi-json",7347:"highlight.js",7403:"uk-json",7465:"upload-translation-dk-json",7519:"cs-json",7663:"email-translation-id-json",7808:"i18n-translation-zh-json",7817:"users-permissions-translation-es-json",7828:"users-permissions-translation-th-json",7833:"upload-translation-fr-json",7846:"pl-json",7898:"dk-json",7934:"content-type-builder-translation-pt-json",7958:"ar-json",7997:"content-type-builder-translation-sk-json",8006:"fr-json",8056:"api-tokens-list-page",8155:"review-workflows-settings",8175:"i18n-translation-en-json",8178:"email-translation-ja-json",8329:"content-type-builder-translation-sv-json",8342:"content-type-builder-translation-es-json",8360:"eu-json",8367:"es-json",8418:"users-email-settings-page",8423:"upload-translation-ca-json",8467:"users-permissions-translation-sv-json",8481:"email-translation-pl-json",8573:"content-type-builder-translation-uk-json",8736:"users-permissions-translation-pt-BR-json",8853:"users-roles-settings-page",8880:"content-type-builder",8897:"id-json",8907:"content-type-builder-translation-ja-json",8965:"content-type-builder-translation-fr-json",9220:"users-permissions-translation-ms-json",9303:"sv-json",9366:"i18n-translation-pl-json",9412:"email-translation-sk-json",9460:"users-advanced-settings-page",9497:"Admin_profilePage",9501:"Admin_InternalErrorPage",9502:"users-permissions-translation-ja-json",9511:"content-type-builder-translation-ar-json",9514:"Upload_ConfigureTheView",9600:"transfer-tokens-list-page",9647:"pt-BR-json",9726:"sa-json",9762:"i18n-translation-zh-Hans-json",9797:"upload-translation-he-json",9903:"ml-json",9905:"users-permissions-translation-it-json"}[n]||n)+"."+{46:"415577fb",90:"362384a6",92:"29725c5e",96:"1b334230",123:"e0662702",129:"87b494d1",302:"f44d95d8",320:"c7fc79af",395:"bac5dbd3",435:"a2ed8c78",462:"8fff7f3b",562:"19a2dbfa",585:"6b937fdf",606:"2374f129",615:"9950466a",695:"dd2d987c",742:"7ad256e2",744:"6eaeec6a",749:"5f659396",801:"2fab70e4",830:"3cf0b48a",931:"446b611d",994:"a0ff6cad",1001:"225ef5d3",1009:"74f6d746",1011:"3529f1e5",1018:"4de49b23",1023:"aaf16753",1056:"74117e5c",1157:"81cca553",1167:"357d7a33",1180:"10f0600d",1312:"81b6d1e3",1331:"ba2eb03a",1375:"d1704f0b",1377:"4539f4ba",1387:"84b454d3",1442:"7e23424a",1495:"dc07d518",1657:"45231968",1674:"20e177db",1930:"a7eda429",2137:"57ddc77e",2151:"f0513929",2246:"fbd39bb7",2248:"4d667d0c",2282:"0d6304a5",2380:"2bd7ff98",2411:"e6c0f8fc",2464:"a6fb670f",2489:"a52eab64",2492:"6cf23295",2544:"d0c9497b",2553:"4cfef87d",2567:"8fe21a7f",2603:"4211d4d0",2648:"88304564",2657:"a5b299ca",2671:"98345913",2742:"6ab714ee",2812:"45cb4fb5",3025:"0eddffd9",3038:"483a18f6",3043:"c6841563",3081:"bcf9a12f",3095:"7f37180f",3098:"7e55bbbb",3166:"2a2a0643",3206:"377bdd9f",3278:"ee4c5537",3304:"926f6191",3340:"ee554a41",3455:"c759daa3",3516:"43e14418",3530:"6722a8a2",3552:"8219dd99",3650:"c8479232",3677:"9e6fa51c",3702:"0a7287d1",3825:"85402492",3948:"92f36be2",3964:"3b5d2d3e",3981:"9f7c0bb1",4021:"420c943b",4121:"30d73114",4179:"a5a0fb59",4263:"ba27c532",4299:"973d2816",4302:"ad24dbeb",4587:"660fa9a8",4628:"20631dd1",4693:"78be2787",4804:"675f6b93",4816:"170acee6",4987:"426f31c9",5053:"e1dd6eb2",5162:"f4db86f3",5199:"ad5dd832",5222:"e87d7966",5296:"89401417",5388:"6bce37dd",5396:"7978eaa6",5516:"a60cde15",5538:"9bfe4ec7",5542:"b8240e3f",5563:"986609ed",5751:"0b6b1006",5880:"44b88e7a",5894:"fe71e6c8",5895:"56e9641c",5905:"5ff685ec",5906:"3bd10f89",6232:"98d35574",6280:"ef4f9471",6332:"323be97d",6377:"60e50f48",6404:"68405699",6434:"8b7573ce",6460:"4b302272",6745:"bd1fb6bf",6784:"7390477e",6817:"bfe27ed8",6831:"db163b6b",6836:"6a0a1572",6848:"7a2232ea",6901:"fcac7381",7048:"c9f92a3c",7094:"7d87d54d",7155:"393a76c0",7186:"9bfe47ce",7259:"7a48aa2f",7327:"9fb7e6d7",7347:"28a1547e",7403:"b7e38370",7465:"bbb2fa05",7519:"4b44411c",7663:"c97239fe",7725:"f717acdd",7808:"bef2dc07",7817:"35007573",7828:"1e9c0247",7833:"baab9911",7846:"59a5dab3",7898:"e34cad0d",7934:"ddb44f8c",7958:"39e54aba",7997:"d03cc18a",8006:"73494bf5",8056:"66c4fbdd",8155:"089d7ec5",8175:"60af6722",8178:"63eebd02",8329:"d23dcd32",8342:"9288474b",8360:"fb17c8f9",8367:"715b6fd8",8418:"2716ce8e",8423:"57954414",8467:"17187818",8481:"97d0db97",8573:"7bf19546",8736:"1b6d2920",8853:"eeb3a339",8880:"4737a30c",8897:"41e07c46",8907:"9be0d5b2",8965:"d35e269c",9220:"c83f87c4",9303:"ae6e71ea",9366:"dfac513d",9412:"53da2fcd",9460:"c36cfd59",9497:"1b337b73",9501:"96ceaae1",9502:"891fe76e",9511:"56d8fcf4",9514:"4fc648b5",9600:"c3fec4c1",9647:"9410688b",9726:"6359a11c",9762:"757ce62d",9797:"0a830937",9903:"8988e374",9905:"0705465d"}[n]+".chunk.js"}}(),function(){e.miniCssF=function(n){}}(),function(){e.g=function(){if(typeof globalThis=="object")return globalThis;try{return this||new Function("return this")()}catch{if(typeof window=="object")return window}}()}(),function(){e.o=function(n,i){return Object.prototype.hasOwnProperty.call(n,i)}}(),function(){var n={},i="@strapi/admin:";e.l=function(t,o,r,s){if(n[t]){n[t].push(o);return}var a,c;if(r!==void 0)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var f=l[d];if(f.getAttribute("src")==t||f.getAttribute("data-webpack")==i+r){a=f;break}}a||(c=!0,a=document.createElement("script"),a.charset="utf-8",a.timeout=120,e.nc&&a.setAttribute("nonce",e.nc),a.setAttribute("data-webpack",i+r),a.src=t),n[t]=[o];var u=function(g,b){a.onerror=a.onload=null,clearTimeout(p);var h=n[t];if(delete n[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(function(y){return y(b)}),g)return g(b)},p=setTimeout(u.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=u.bind(null,a.onerror),a.onload=u.bind(null,a.onload),c&&document.head.appendChild(a)}}(),function(){e.r=function(n){typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})}}(),function(){e.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n}}(),function(){e.p="/admin/"}(),function(){e.b=document.baseURI||self.location.href;var n={1303:0};e.f.j=function(o,r){var s=e.o(n,o)?n[o]:void 0;if(s!==0)if(s)r.push(s[2]);else if(o!=1303){var a=new Promise(function(f,u){s=n[o]=[f,u]});r.push(s[2]=a);var c=e.p+e.u(o),l=new Error,d=function(f){if(e.o(n,o)&&(s=n[o],s!==0&&(n[o]=void 0),s)){var u=f&&(f.type==="load"?"missing":f.type),p=f&&f.target&&f.target.src;l.message="Loading chunk "+o+` failed.
+(function(){"use strict";var j={},m={};function e(n){var i=m[n];if(i!==void 0)return i.exports;var t=m[n]={id:n,loaded:!1,exports:{}};return j[n].call(t.exports,t,t.exports,e),t.loaded=!0,t.exports}e.m=j,function(){var n=[];e.O=function(i,t,o,r){if(t){r=r||0;for(var s=n.length;s>0&&n[s-1][2]>r;s--)n[s]=n[s-1];n[s]=[t,o,r];return}for(var a=1/0,s=0;s<n.length;s++){for(var t=n[s][0],o=n[s][1],r=n[s][2],c=!0,l=0;l<t.length;l++)(r&!1||a>=r)&&Object.keys(e.O).every(function(b){return e.O[b](t[l])})?t.splice(l--,1):(c=!1,r<a&&(a=r));if(c){n.splice(s--,1);var d=o();d!==void 0&&(i=d)}}return i}}(),function(){e.n=function(n){var i=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(i,{a:i}),i}}(),function(){var n=Object.getPrototypeOf?function(t){return Object.getPrototypeOf(t)}:function(t){return t.__proto__},i;e.t=function(t,o){if(o&1&&(t=this(t)),o&8||typeof t=="object"&&t&&(o&4&&t.__esModule||o&16&&typeof t.then=="function"))return t;var r=Object.create(null);e.r(r);var s={};i=i||[null,n({}),n([]),n(n)];for(var a=o&2&&t;typeof a=="object"&&!~i.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(c){s[c]=function(){return t[c]}});return s.default=function(){return t},e.d(r,s),r}}(),function(){e.d=function(n,i){for(var t in i)e.o(i,t)&&!e.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:i[t]})}}(),function(){e.f={},e.e=function(n){return Promise.all(Object.keys(e.f).reduce(function(i,t){return e.f[t](n,i),i},[]))}}(),function(){e.u=function(n){return""+({46:"content-type-builder-translation-zh-Hans-json",90:"i18n-translation-de-json",92:"api-tokens-edit-page",96:"email-translation-de-json",123:"ru-json",129:"i18n-translation-es-json",302:"sso-settings-page",320:"en-json",395:"tr-json",435:"email-translation-it-json",562:"no-json",585:"upload-translation-pt-json",606:"sk-json",615:"upload-translation-uk-json",695:"upload-settings",742:"content-type-builder-translation-th-json",744:"email-translation-cs-json",749:"th-json",801:"Admin-authenticatedApp",830:"he-json",931:"content-type-builder-translation-en-json",994:"content-manager",1001:"content-type-builder-translation-nl-json",1009:"upload-translation-ms-json",1011:"zh-json",1018:"email-translation-ko-json",1023:"content-type-builder-translation-it-json",1056:"upload-translation-tr-json",1157:"email-translation-pt-BR-json",1167:"users-permissions-translation-ko-json",1180:"i18n-translation-tr-json",1312:"ja-json",1331:"upload-translation-es-json",1375:"upload-translation-pt-BR-json",1377:"ko-json",1442:"users-permissions-translation-cs-json",1495:"email-settings-page",1674:"users-permissions-translation-ru-json",1930:"users-permissions-translation-pt-json",2137:"i18n-translation-fr-json",2151:"content-type-builder-translation-id-json",2246:"content-type-builder-translation-dk-json",2248:"gu-json",2282:"users-providers-settings-page",2380:"users-permissions-translation-tr-json",2411:"email-translation-tr-json",2464:"users-permissions-translation-de-json",2489:"upload-translation-ko-json",2492:"transfer-tokens-edit-page",2544:"admin-edit-roles-page",2553:"zh-Hans-json",2567:"content-type-builder-translation-ko-json",2603:"email-translation-en-json",2648:"email-translation-ar-json",2657:"content-type-builder-translation-cs-json",2671:"nl-json",2742:"users-permissions-translation-zh-Hans-json",2812:"audit-logs-settings-page",3025:"ms-json",3038:"upload-translation-sk-json",3043:"email-translation-zh-Hans-json",3095:"users-permissions-translation-sk-json",3098:"users-permissions-translation-fr-json",3166:"email-translation-pt-json",3206:"email-translation-nl-json",3278:"vi-json",3304:"content-type-builder-translation-tr-json",3340:"pt-json",3455:"admin-roles-list",3516:"ca-json",3530:"users-permissions-translation-vi-json",3552:"i18n-settings-page",3650:"upload",3677:"Admin_pluginsPage",3702:"users-permissions-translation-pl-json",3825:"email-translation-dk-json",3948:"content-type-builder-translation-pl-json",3964:"content-type-builder-translation-ms-json",3981:"Admin_homePage",4021:"upload-translation-de-json",4121:"webhook-list-page",4179:"users-permissions-translation-id-json",4263:"admin-edit-users",4299:"api-tokens-create-page",4302:"content-type-builder-translation-zh-json",4587:"email-translation-th-json",4693:"email-translation-fr-json",4804:"upload-translation-ru-json",4816:"transfer-tokens-create-page",4987:"upload-translation-pl-json",5053:"upload-translation-zh-json",5162:"webhook-edit-page",5199:"admin-users",5222:"upload-translation-it-json",5296:"i18n-translation-dk-json",5388:"email-translation-ru-json",5396:"users-permissions-translation-zh-json",5516:"Admin_marketplace",5538:"admin-app",5751:"email-translation-es-json",5880:"upload-translation-ja-json",5894:"hu-json",5895:"Admin_settingsPage",5905:"content-type-builder-list-view",5906:"content-type-builder-translation-pt-BR-json",6232:"upload-translation-th-json",6280:"i18n-translation-ko-json",6332:"hi-json",6377:"users-permissions-translation-dk-json",6434:"upload-translation-en-json",6460:"users-permissions-translation-en-json",6745:"email-translation-uk-json",6784:"email-translation-ms-json",6817:"it-json",6831:"upload-translation-zh-Hans-json",6836:"users-permissions-translation-uk-json",6848:"email-translation-zh-json",6901:"de-json",7048:"users-permissions-translation-nl-json",7094:"users-permissions-translation-ar-json",7155:"content-type-builder-translation-de-json",7186:"content-type-builder-translation-ru-json",7327:"email-translation-vi-json",7347:"highlight.js",7403:"uk-json",7465:"upload-translation-dk-json",7519:"cs-json",7663:"email-translation-id-json",7808:"i18n-translation-zh-json",7817:"users-permissions-translation-es-json",7828:"users-permissions-translation-th-json",7833:"upload-translation-fr-json",7846:"pl-json",7898:"dk-json",7934:"content-type-builder-translation-pt-json",7958:"ar-json",7997:"content-type-builder-translation-sk-json",8006:"fr-json",8056:"api-tokens-list-page",8155:"review-workflows-settings",8175:"i18n-translation-en-json",8178:"email-translation-ja-json",8329:"content-type-builder-translation-sv-json",8342:"content-type-builder-translation-es-json",8360:"eu-json",8367:"es-json",8418:"users-email-settings-page",8423:"upload-translation-ca-json",8467:"users-permissions-translation-sv-json",8481:"email-translation-pl-json",8573:"content-type-builder-translation-uk-json",8736:"users-permissions-translation-pt-BR-json",8853:"users-roles-settings-page",8880:"content-type-builder",8897:"id-json",8907:"content-type-builder-translation-ja-json",8965:"content-type-builder-translation-fr-json",9220:"users-permissions-translation-ms-json",9303:"sv-json",9366:"i18n-translation-pl-json",9412:"email-translation-sk-json",9460:"users-advanced-settings-page",9497:"Admin_profilePage",9501:"Admin_InternalErrorPage",9502:"users-permissions-translation-ja-json",9511:"content-type-builder-translation-ar-json",9514:"Upload_ConfigureTheView",9600:"transfer-tokens-list-page",9647:"pt-BR-json",9726:"sa-json",9762:"i18n-translation-zh-Hans-json",9797:"upload-translation-he-json",9903:"ml-json",9905:"users-permissions-translation-it-json"}[n]||n)+"."+{46:"415577fb",90:"362384a6",92:"29725c5e",96:"1b334230",123:"e0662702",129:"87b494d1",302:"f44d95d8",320:"c7fc79af",395:"bac5dbd3",435:"a2ed8c78",462:"8fff7f3b",562:"19a2dbfa",585:"6b937fdf",606:"2374f129",615:"9950466a",695:"dd2d987c",742:"7ad256e2",744:"6eaeec6a",749:"5f659396",801:"a8373103",830:"3cf0b48a",931:"446b611d",994:"d28eb183",1001:"225ef5d3",1009:"74f6d746",1011:"3529f1e5",1018:"4de49b23",1023:"aaf16753",1056:"74117e5c",1157:"81cca553",1167:"357d7a33",1180:"10f0600d",1312:"81b6d1e3",1331:"ba2eb03a",1375:"d1704f0b",1377:"4539f4ba",1387:"84b454d3",1442:"7e23424a",1495:"dc07d518",1657:"45231968",1674:"20e177db",1930:"a7eda429",2137:"57ddc77e",2151:"f0513929",2246:"fbd39bb7",2248:"4d667d0c",2282:"0d6304a5",2380:"2bd7ff98",2411:"e6c0f8fc",2464:"a6fb670f",2489:"a52eab64",2492:"6cf23295",2544:"d0c9497b",2553:"4cfef87d",2567:"8fe21a7f",2603:"4211d4d0",2648:"88304564",2657:"a5b299ca",2671:"98345913",2742:"6ab714ee",2812:"45cb4fb5",3025:"0eddffd9",3038:"483a18f6",3043:"c6841563",3081:"bcf9a12f",3095:"7f37180f",3098:"7e55bbbb",3166:"2a2a0643",3206:"377bdd9f",3278:"ee4c5537",3304:"926f6191",3340:"ee554a41",3455:"c759daa3",3516:"43e14418",3530:"6722a8a2",3552:"8219dd99",3650:"c8479232",3677:"9e6fa51c",3702:"0a7287d1",3825:"85402492",3948:"92f36be2",3964:"3b5d2d3e",3981:"9f7c0bb1",4021:"420c943b",4121:"30d73114",4179:"a5a0fb59",4263:"ba27c532",4299:"973d2816",4302:"ad24dbeb",4587:"660fa9a8",4628:"20631dd1",4693:"78be2787",4804:"675f6b93",4816:"170acee6",4987:"426f31c9",5053:"e1dd6eb2",5162:"f4db86f3",5199:"ad5dd832",5222:"e87d7966",5296:"89401417",5388:"6bce37dd",5396:"7978eaa6",5516:"a60cde15",5538:"9bfe4ec7",5542:"b8240e3f",5563:"986609ed",5751:"0b6b1006",5880:"44b88e7a",5894:"fe71e6c8",5895:"5e045f42",5905:"5ff685ec",5906:"3bd10f89",6232:"98d35574",6280:"ef4f9471",6332:"323be97d",6377:"60e50f48",6404:"68405699",6434:"8b7573ce",6460:"4b302272",6745:"bd1fb6bf",6784:"7390477e",6817:"bfe27ed8",6831:"db163b6b",6836:"6a0a1572",6848:"7a2232ea",6858:"56d4d528",6901:"fcac7381",7048:"c9f92a3c",7094:"7d87d54d",7155:"393a76c0",7186:"9bfe47ce",7259:"7a48aa2f",7327:"9fb7e6d7",7347:"28a1547e",7403:"b7e38370",7465:"bbb2fa05",7519:"4b44411c",7663:"c97239fe",7725:"1633e06f",7808:"bef2dc07",7817:"35007573",7828:"1e9c0247",7833:"baab9911",7846:"59a5dab3",7898:"e34cad0d",7934:"ddb44f8c",7958:"39e54aba",7997:"d03cc18a",8006:"73494bf5",8056:"66c4fbdd",8155:"7c0b4e73",8175:"60af6722",8178:"63eebd02",8329:"d23dcd32",8342:"9288474b",8360:"fb17c8f9",8367:"715b6fd8",8418:"2716ce8e",8423:"57954414",8467:"17187818",8481:"97d0db97",8573:"7bf19546",8736:"1b6d2920",8853:"eeb3a339",8880:"4737a30c",8897:"41e07c46",8907:"9be0d5b2",8965:"d35e269c",9220:"c83f87c4",9303:"ae6e71ea",9366:"dfac513d",9412:"53da2fcd",9460:"c36cfd59",9497:"1b337b73",9501:"96ceaae1",9502:"891fe76e",9511:"56d8fcf4",9514:"4fc648b5",9600:"c3fec4c1",9647:"9410688b",9703:"e590889d",9726:"6359a11c",9762:"757ce62d",9797:"0a830937",9903:"8988e374",9905:"0705465d"}[n]+".chunk.js"}}(),function(){e.miniCssF=function(n){}}(),function(){e.g=function(){if(typeof globalThis=="object")return globalThis;try{return this||new Function("return this")()}catch{if(typeof window=="object")return window}}()}(),function(){e.o=function(n,i){return Object.prototype.hasOwnProperty.call(n,i)}}(),function(){var n={},i="@strapi/admin:";e.l=function(t,o,r,s){if(n[t]){n[t].push(o);return}var a,c;if(r!==void 0)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var f=l[d];if(f.getAttribute("src")==t||f.getAttribute("data-webpack")==i+r){a=f;break}}a||(c=!0,a=document.createElement("script"),a.charset="utf-8",a.timeout=120,e.nc&&a.setAttribute("nonce",e.nc),a.setAttribute("data-webpack",i+r),a.src=t),n[t]=[o];var u=function(g,b){a.onerror=a.onload=null,clearTimeout(p);var h=n[t];if(delete n[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(function(y){return y(b)}),g)return g(b)},p=setTimeout(u.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=u.bind(null,a.onerror),a.onload=u.bind(null,a.onload),c&&document.head.appendChild(a)}}(),function(){e.r=function(n){typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})}}(),function(){e.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n}}(),function(){e.p="/admin/"}(),function(){e.b=document.baseURI||self.location.href;var n={1303:0};e.f.j=function(o,r){var s=e.o(n,o)?n[o]:void 0;if(s!==0)if(s)r.push(s[2]);else if(o!=1303){var a=new Promise(function(f,u){s=n[o]=[f,u]});r.push(s[2]=a);var c=e.p+e.u(o),l=new Error,d=function(f){if(e.o(n,o)&&(s=n[o],s!==0&&(n[o]=void 0),s)){var u=f&&(f.type==="load"?"missing":f.type),p=f&&f.target&&f.target.src;l.message="Loading chunk "+o+` failed.
 (`+u+": "+p+")",l.name="ChunkLoadError",l.type=u,l.request=p,s[1](l)}};e.l(c,d,"chunk-"+o,o)}else n[o]=0},e.O.j=function(o){return n[o]===0};var i=function(o,r){var s=r[0],a=r[1],c=r[2],l,d,f=0;if(s.some(function(p){return n[p]!==0})){for(l in a)e.o(a,l)&&(e.m[l]=a[l]);if(c)var u=c(e)}for(o&&o(r);f<s.length;f++)d=s[f],e.o(n,d)&&n[d]&&n[d][0](),n[d]=0;return e.O(u)},t=self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[];t.forEach(i.bind(null,0)),t.push=i.bind(null,t.push.bind(t))}(),function(){e.nc=void 0}()})();

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

@@ -1,15 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
 
-export function ReviewWorkflowsStageEE({ name }) {
+export function ReviewWorkflowsStageEE({ color, name }) {
   return (
-    <Typography fontWeight="regular" textColor="neutral700">
-      {name}
-    </Typography>
+    <Flex alignItems="center" gap={2} maxWidth={pxToRem(300)}>
+      <Box height={2} background={color} hasRadius shrink={0} width={2} />
+
+      <Typography fontWeight="regular" textColor="neutral700" ellipsis>
+        {name}
+      </Typography>
+    </Flex>
   );
 }
 
 ReviewWorkflowsStageEE.propTypes = {
+  color: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
 };

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

@@ -4,6 +4,7 @@ import { Typography } from '@strapi/design-system';
 
 import ReviewWorkflowsStage from '.';
 import getTrad from '../../../../../../../admin/src/content-manager/utils/getTrad';
+import { STAGE_COLOR_DEFAULT } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/constants';
 
 export default (layout) => {
   const { formatMessage } = useIntl();
@@ -24,7 +25,7 @@ export default (layout) => {
     key: '__strapi_reviewWorkflows_stage_temp_key__',
     name: 'strapi_reviewWorkflows_stage',
     fieldSchema: {
-      type: 'custom',
+      type: 'relation',
     },
     metadatas: {
       label: formatMessage({
@@ -32,7 +33,8 @@ export default (layout) => {
         defaultMessage: 'Review stage',
       }),
       searchable: false,
-      sortable: false,
+      sortable: true,
+      mainField: 'name',
     },
     cellFormatter({ strapi_reviewWorkflows_stage }) {
       // if entities are created e.g. through lifecycle methods
@@ -41,7 +43,9 @@ export default (layout) => {
         return <Typography textColor="neutral800">-</Typography>;
       }
 
-      return <ReviewWorkflowsStage name={strapi_reviewWorkflows_stage.name} />;
+      const { color, name } = strapi_reviewWorkflows_stage;
+
+      return <ReviewWorkflowsStage color={color ?? STAGE_COLOR_DEFAULT} name={name} />;
     },
   };
 };

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

@@ -11,6 +11,8 @@ import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
 
 import { useReviewWorkflows } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
+import { OptionColor } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor';
+import { SingleValueColor } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor';
 import Information from '../../../../../../admin/src/content-manager/pages/EditView/Information';
 
 const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
@@ -113,6 +115,8 @@ export function InformationBoxEE() {
             <ReactSelect
               components={{
                 LoadingIndicator: () => <Loader small />,
+                Option: OptionColor,
+                SingleValue: SingleValueColor,
               }}
               error={formattedError}
               inputId={ATTRIBUTE_NAME}
@@ -122,9 +126,19 @@ export function InformationBoxEE() {
               name={ATTRIBUTE_NAME}
               onChange={handleStageChange}
               options={
-                workflow ? workflow.stages.map(({ id, name }) => ({ value: id, label: name })) : []
+                workflow
+                  ? workflow.stages.map(({ id, color, name }) => ({
+                      value: id,
+                      label: name,
+                      color,
+                    }))
+                  : []
               }
-              value={{ value: activeWorkflowStage?.id, label: activeWorkflowStage?.name }}
+              value={{
+                value: activeWorkflowStage?.id,
+                label: activeWorkflowStage?.name,
+                color: activeWorkflowStage?.color,
+              }}
             />
 
             <FieldError />

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

@@ -18,12 +18,24 @@ import { Check } from '@strapi/icons';
 
 import { Stages } from './components/Stages';
 import { reducer, initialState } from './reducer';
-import { REDUX_NAMESPACE } from './constants';
+import { REDUX_NAMESPACE, DRAG_DROP_TYPES } from './constants';
 import { useInjectReducer } from '../../../../../../admin/src/hooks/useInjectReducer';
 import { useReviewWorkflows } from './hooks/useReviewWorkflows';
 import { setWorkflows } from './actions';
 import { getWorkflowValidationSchema } from './utils/getWorkflowValidationSchema';
 import adminPermissions from '../../../../../../admin/src/permissions';
+import { StageDragPreview } from './components/StageDragPreview';
+import { DragLayer } from '../../../../../../admin/src/components/DragLayer';
+
+function renderDragLayerItem({ type, item }) {
+  switch (type) {
+    case DRAG_DROP_TYPES.STAGE:
+      return <StageDragPreview {...item} />;
+
+    default:
+      return null;
+  }
+}
 
 export function ReviewWorkflowsPage() {
   const { trackUsage } = useTracking();
@@ -47,31 +59,15 @@ export function ReviewWorkflowsPage() {
 
   const { mutateAsync, isLoading } = useMutation(
     async ({ workflowId, stages }) => {
-      try {
-        const {
-          data: { data },
-        } = await put(`/admin/review-workflows/workflows/${workflowId}/stages`, {
-          data: stages,
-        });
+      const {
+        data: { data },
+      } = await put(`/admin/review-workflows/workflows/${workflowId}/stages`, {
+        data: stages,
+      });
 
-        return data;
-      } catch (error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      }
-
-      return null;
+      return data;
     },
     {
-      onError(error) {
-        toggleNotification({
-          type: 'warning',
-          message: formatAPIError(error),
-        });
-      },
-
       onSuccess() {
         toggleNotification({
           type: 'success',
@@ -81,8 +77,19 @@ export function ReviewWorkflowsPage() {
     }
   );
 
-  const updateWorkflowStages = (workflowId, stages) => {
-    return mutateAsync({ workflowId, stages });
+  const updateWorkflowStages = async (workflowId, stages) => {
+    try {
+      const res = await mutateAsync({ workflowId, stages });
+
+      return res;
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(error),
+      });
+
+      return null;
+    }
   };
 
   const submitForm = async () => {
@@ -135,6 +142,8 @@ export function ReviewWorkflowsPage() {
           })}
         />
         <Main tabIndex={-1}>
+          <DragLayer renderItem={renderDragLayerItem} />
+
           <FormikProvider value={formik}>
             <Form onSubmit={formik.handleSubmit}>
               <HeaderLayout

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

@@ -3,6 +3,7 @@ import {
   ACTION_DELETE_STAGE,
   ACTION_ADD_STAGE,
   ACTION_UPDATE_STAGE,
+  ACTION_UPDATE_STAGE_POSITION,
 } from '../constants';
 
 export function setWorkflows({ status, data }) {
@@ -40,3 +41,13 @@ export function updateStage(stageId, payload) {
     },
   };
 }
+
+export function updateStagePosition(oldIndex, newIndex) {
+  return {
+    type: ACTION_UPDATE_STAGE_POSITION,
+    payload: {
+      newIndex,
+      oldIndex,
+    },
+  };
+}

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Flex, Typography } from '@strapi/design-system';
+import { CarretDown } from '@strapi/icons';
+import { pxToRem } from '@strapi/helper-plugin';
+
+const Toggle = styled(Flex)`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+export function StageDragPreview({ name }) {
+  return (
+    <Flex
+      background="primary100"
+      borderStyle="dashed"
+      borderColor="primary600"
+      borderWidth="1px"
+      gap={3}
+      hasRadius
+      padding={3}
+      shadow="tableShadow"
+      width={pxToRem(300)}
+    >
+      <Toggle
+        alignItems="center"
+        background="neutral200"
+        borderRadius="50%"
+        height={6}
+        justifyContent="center"
+        width={6}
+      >
+        <CarretDown width={`${8 / 16}rem`} />
+      </Toggle>
+
+      <Typography fontWeight="bold">{name}</Typography>
+    </Flex>
+  );
+}
+
+StageDragPreview.propTypes = {
+  name: PropTypes.string.isRequired,
+};

package/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/StageDragPreview/index.js

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