@strapi/admin 4.2.0-beta.3 → 4.2.1-alpha.0

package/build/webhook-list-page.671582a0.chunk.js

@@ -0,0 +1,133 @@
+(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[4121],{55470:(V,z,p)=>{"use strict";V.exports=p(17173)},17173:function(V,z,p){(function(i,w){V.exports=w(p(32735),p(19615))})(this,function(i,w){return function(o){var b={};function n(a){if(b[a])return b[a].exports;var r=b[a]={i:a,l:!1,exports:{}};return o[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=o,n.c=b,n.d=function(a,r,u){n.o(a,r)||Object.defineProperty(a,r,{enumerable:!0,get:u})},n.r=function(a){typeof Symbol!="undefined"&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})},n.t=function(a,r){if(1&r&&(a=n(a)),8&r||4&r&&typeof a=="object"&&a&&a.__esModule)return a;var u=Object.create(null);if(n.r(u),Object.defineProperty(u,"default",{enumerable:!0,value:a}),2&r&&typeof a!="string")for(var l in a)n.d(u,l,function(f){return a[f]}.bind(null,l));return u},n.n=function(a){var r=a&&a.__esModule?function(){return a.default}:function(){return a};return n.d(r,"a",r),r},n.o=function(a,r){return Object.prototype.hasOwnProperty.call(a,r)},n.p="",n(n.s=121)}({0:function(o,b,n){o.exports=n(19)()},1:function(o,b){o.exports=i},10:function(o,b,n){var a=n(25),r=n(26),u=n(22),l=n(27);o.exports=function(f,c){return a(f)||r(f,c)||u(f,c)||l()},o.exports.default=o.exports,o.exports.__esModule=!0},121:function(o,b,n){"use strict";n.r(b),n.d(b,"Switch",function(){return B});var a,r,u=n(5),l=n.n(u),f=n(4),c=n.n(f),m=n(3),E=n.n(m),C=n(1),s=n.n(C),y=n(0),S=n.n(y),k=n(2),L=n.n(k),D=n(9),e=n(6),t=["label","onChange","onLabel","offLabel","selected","visibleLabels"],d=L.a.div(a||(a=E()([`
+  background: `,`;
+  border: none;
+  border-radius: 16px;
+  position: relative;
+  height: `,`rem;
+  width: `,`rem;
+
+  & span {
+    font-size: `,`;
+  }
+
+  &:before {
+    content: '';
+    background: `,`;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    position: absolute;
+    transition: all 0.5s;
+    left: `,`;
+    top: `,`;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:before {
+      transition: none;
+    }
+  }
+`])),function(O){return O.theme.colors.danger500},1.5,2.5,function(O){return O.visibleLabels?"1rem":0},function(O){return O.theme.colors.neutral0},function(O){return O.theme.spaces[1]},function(O){return O.theme.spaces[1]}),j=L.a.button(r||(r=E()([`
+  background: transparent;
+  padding: 0;
+  border: none;
+
+  &[aria-checked='true'] `,` {
+    background: `,`;
+  }
+
+  &[aria-checked='true'] `,`:before {
+    transform: translateX(1rem);
+  }
+`])),d,function(O){return O.theme.colors.success500},d),B=s.a.forwardRef(function(O,_){var ee=O.label,ne=O.onChange,G=O.onLabel,$=O.offLabel,U=O.selected,Q=O.visibleLabels,te=c()(O,t);return s.a.createElement(j,l()({ref:_,role:"switch","aria-checked":U,"aria-label":ee,onClick:ne,visibleLabels:Q,type:"button"},te),s.a.createElement(D.Flex,null,s.a.createElement(d,null,s.a.createElement("span",null,G),s.a.createElement("span",null,$)),Q&&s.a.createElement(e.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:U?"success600":"danger600"},U?G:$)))});B.defaultProps={onLabel:"On",offLabel:"Off",visibleLabels:!1},B.propTypes={label:S.a.string.isRequired,offLabel:S.a.string,onChange:S.a.func.isRequired,onLabel:S.a.string,selected:S.a.bool.isRequired,visibleLabels:S.a.bool},B.displayName="Switch"},13:function(o,b){function n(a){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?(o.exports=n=function(r){return typeof r},o.exports.default=o.exports,o.exports.__esModule=!0):(o.exports=n=function(r){return r&&typeof Symbol=="function"&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},o.exports.default=o.exports,o.exports.__esModule=!0),n(a)}o.exports=n,o.exports.default=o.exports,o.exports.__esModule=!0},19:function(o,b,n){"use strict";var a=n(20);function r(){}function u(){}u.resetWarningCache=r,o.exports=function(){function l(m,E,C,s,y,S){if(S!==a){var k=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw k.name="Invariant Violation",k}}function f(){return l}l.isRequired=l;var c={array:l,bool:l,func:l,number:l,object:l,string:l,symbol:l,any:l,arrayOf:f,element:l,elementType:l,instanceOf:f,node:l,objectOf:f,oneOf:f,oneOfType:f,shape:f,exact:f,checkPropTypes:u,resetWarningCache:r};return c.PropTypes=c,c}},2:function(o,b){o.exports=w},20:function(o,b,n){"use strict";o.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},21:function(o,b){o.exports=function(n,a){(a==null||a>n.length)&&(a=n.length);for(var r=0,u=new Array(a);r<a;r++)u[r]=n[r];return u},o.exports.default=o.exports,o.exports.__esModule=!0},22:function(o,b,n){var a=n(21);o.exports=function(r,u){if(r){if(typeof r=="string")return a(r,u);var l=Object.prototype.toString.call(r).slice(8,-1);return l==="Object"&&r.constructor&&(l=r.constructor.name),l==="Map"||l==="Set"?Array.from(r):l==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l)?a(r,u):void 0}},o.exports.default=o.exports,o.exports.__esModule=!0},24:function(o,b){o.exports=function(n,a){if(n==null)return{};var r,u,l={},f=Object.keys(n);for(u=0;u<f.length;u++)r=f[u],a.indexOf(r)>=0||(l[r]=n[r]);return l},o.exports.default=o.exports,o.exports.__esModule=!0},25:function(o,b){o.exports=function(n){if(Array.isArray(n))return n},o.exports.default=o.exports,o.exports.__esModule=!0},26:function(o,b){o.exports=function(n,a){var r=n==null?null:typeof Symbol!="undefined"&&n[Symbol.iterator]||n["@@iterator"];if(r!=null){var u,l,f=[],c=!0,m=!1;try{for(r=r.call(n);!(c=(u=r.next()).done)&&(f.push(u.value),!a||f.length!==a);c=!0);}catch(E){m=!0,l=E}finally{try{c||r.return==null||r.return()}finally{if(m)throw l}}return f}},o.exports.default=o.exports,o.exports.__esModule=!0},27:function(o,b){o.exports=function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)},o.exports.default=o.exports,o.exports.__esModule=!0},3:function(o,b){o.exports=function(n,a){return a||(a=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(a)}}))},o.exports.default=o.exports,o.exports.__esModule=!0},4:function(o,b,n){var a=n(24);o.exports=function(r,u){if(r==null)return{};var l,f,c=a(r,u);if(Object.getOwnPropertySymbols){var m=Object.getOwnPropertySymbols(r);for(f=0;f<m.length;f++)l=m[f],u.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(r,l)&&(c[l]=r[l])}return c},o.exports.default=o.exports,o.exports.__esModule=!0},5:function(o,b){function n(){return o.exports=n=Object.assign||function(a){for(var r=1;r<arguments.length;r++){var u=arguments[r];for(var l in u)Object.prototype.hasOwnProperty.call(u,l)&&(a[l]=u[l])}return a},o.exports.default=o.exports,o.exports.__esModule=!0,n.apply(this,arguments)}o.exports=n,o.exports.default=o.exports,o.exports.__esModule=!0},6:function(o,b,n){"use strict";n.r(b),n.d(b,"Box",function(){return D});var a,r=n(3),u=n.n(r),l=n(2),f=n.n(l),c=n(7),m=n(1),E=n.n(m),C=n(0),s=n.n(C),y=function(e){return E.a.createElement("div",e)},S={background:void 0,borderColor:void 0,color:void 0,hiddenS:!1,hiddenXS:!1,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,hasRadius:!1,shadow:void 0,children:null,shrink:void 0,grow:void 0,basis:void 0,flex:void 0,_hover:function(){}},k={_hover:s.a.func,background:s.a.string,basis:s.a.oneOfType([s.a.string,s.a.string]),borderColor:s.a.string,children:s.a.oneOfType([s.a.node,s.a.string]),color:s.a.string,flex:s.a.oneOfType([s.a.string,s.a.string]),grow:s.a.oneOfType([s.a.string,s.a.string]),hasRadius:s.a.bool,hiddenS:s.a.bool,hiddenXS:s.a.bool,padding:s.a.oneOfType([s.a.number,s.a.arrayOf(s.a.number)]),paddingBottom:s.a.oneOfType([s.a.number,s.a.arrayOf(s.a.number)]),paddingLeft:s.a.oneOfType([s.a.number,s.a.arrayOf(s.a.number)]),paddingRight:s.a.oneOfType([s.a.number,s.a.arrayOf(s.a.number)]),paddingTop:s.a.oneOfType([s.a.number,s.a.arrayOf(s.a.number)]),shadow:s.a.string,shrink:s.a.oneOfType([s.a.string,s.a.string])};y.defaultProps=S,y.propTypes=k;var L={color:!0},D=f.a.div.withConfig({shouldForwardProp:function(e,t){return!L[e]&&t(e)}})(a||(a=u()([`
+  // Font
+  font-size: `,`;
+
+  // Colors
+  background: `,`;
+  color: `,`;
+
+  // Spaces
+  `,`
+  `,`
+  `,`
+  `,`
+  `,`
+  `,`
+  `,`
+  `,`
+  `,`
+
+  // Responsive hiding
+  `,`
+  `,`
+  
+
+  // Borders
+  border-radius: `,`;
+  border-style: `,`;
+  border-width: `,`;
+  border-color: `,`;
+  border: `,`;
+
+  // Shadows
+  box-shadow: `,`;
+
+  // Handlers
+  pointer-events: `,`;
+  &:hover {
+    `,`
+  }
+
+  // Display
+  display: `,`;
+
+  // Position
+  position: `,`;
+  left: `,`;
+  right: `,`;
+  top: `,`;
+  bottom: `,`;
+  z-index: `,`;
+  overflow: `,`;
+  cursor: `,`;
+
+  // Size
+  width: `,`;
+  max-width: `,`;
+  min-width: `,`;
+  height: `,`;
+  max-height: `,`;
+  min-height: `,`;
+
+  // Animation
+  transition: `,`;
+  transform: `,`;
+  animation: `,`;
+
+  //Flexbox children props
+  flex-shrink: `,`;
+  flex-grow: `,`;
+  flex-basis: `,`;
+  flex: `,`;
+
+  // Text
+  text-align: `,`;
+  text-transform: `,`;
+  line-height: `,`;
+
+  // Cursor
+  cursor: `,`;
+`])),function(e){var t=e.fontSize;return e.theme.fontSizes[t]||t},function(e){var t=e.theme,d=e.background;return t.colors[d]},function(e){var t=e.theme,d=e.color;return t.colors[d]},function(e){var t=e.theme,d=e.padding;return Object(c.a)("padding",d,t)},function(e){var t=e.theme,d=e.paddingTop;return Object(c.a)("padding-top",d,t)},function(e){var t=e.theme,d=e.paddingRight;return Object(c.a)("padding-right",d,t)},function(e){var t=e.theme,d=e.paddingBottom;return Object(c.a)("padding-bottom",d,t)},function(e){var t=e.theme,d=e.paddingLeft;return Object(c.a)("padding-left",d,t)},function(e){var t=e.theme,d=e.marginLeft;return Object(c.a)("margin-left",d,t)},function(e){var t=e.theme,d=e.marginRight;return Object(c.a)("margin-right",d,t)},function(e){var t=e.theme,d=e.marginTop;return Object(c.a)("margin-top",d,t)},function(e){var t=e.theme,d=e.marginBottom;return Object(c.a)("margin-bottom",d,t)},function(e){var t=e.theme;return e.hiddenS?"".concat(t.mediaQueries.tablet," { display: none; }"):void 0},function(e){var t=e.theme;return e.hiddenXS?"".concat(t.mediaQueries.mobile," { display: none; }"):void 0},function(e){var t=e.theme,d=e.hasRadius,j=e.borderRadius;return d?t.borderRadius:j},function(e){return e.borderStyle},function(e){return e.borderWidth},function(e){var t=e.borderColor;return e.theme.colors[t]},function(e){var t=e.theme,d=e.borderColor,j=e.borderStyle,B=e.borderWidth;if(d&&!j&&!B)return"1px solid ".concat(t.colors[d])},function(e){var t=e.theme,d=e.shadow;return t.shadows[d]},function(e){return e.pointerEvents},function(e){var t=e._hover,d=e.theme;return t?t(d):void 0},function(e){return e.display},function(e){return e.position},function(e){var t=e.left;return e.theme.spaces[t]||t},function(e){var t=e.right;return e.theme.spaces[t]||t},function(e){var t=e.top;return e.theme.spaces[t]||t},function(e){var t=e.bottom;return e.theme.spaces[t]||t},function(e){return e.zIndex},function(e){return e.overflow},function(e){return e.cursor},function(e){var t=e.width;return e.theme.spaces[t]||t},function(e){var t=e.maxWidth;return e.theme.spaces[t]||t},function(e){var t=e.minWidth;return e.theme.spaces[t]||t},function(e){var t=e.height;return e.theme.spaces[t]||t},function(e){var t=e.maxHeight;return e.theme.spaces[t]||t},function(e){var t=e.minHeight;return e.theme.spaces[t]||t},function(e){return e.transition},function(e){return e.transform},function(e){return e.animation},function(e){return e.shrink},function(e){return e.grow},function(e){return e.basis},function(e){return e.flex},function(e){return e.textAlign},function(e){return e.textTransform},function(e){return e.lineHeight},function(e){return e.cursor});D.defaultProps=S,D.propTypes=k},7:function(o,b,n){"use strict";var a=n(10),r=n.n(a),u=n(13),l=n.n(u);b.a=function(f,c,m){var E=c;if(Array.isArray(c)||l()(c)!=="object"||(E=[c==null?void 0:c.desktop,c==null?void 0:c.tablet,c==null?void 0:c.mobile]),E!==void 0){if(Array.isArray(E)){var C=E,s=r()(C,3),y=s[0],S=s[1],k=s[2],L="".concat(f,": ").concat(m.spaces[y],";");return S!==void 0&&(L+="".concat(m.mediaQueries.tablet,`{
+          `).concat(f,": ").concat(m.spaces[S],`;
+        }`)),k!==void 0&&(L+="".concat(m.mediaQueries.mobile,`{
+          `).concat(f,": ").concat(m.spaces[k],`;
+        }`)),L}var D=m.spaces[E]||E;return"".concat(f,": ").concat(D,";")}}},9:function(o,b,n){"use strict";n.r(b),n.d(b,"Flex",function(){return e});var a,r=n(3),u=n.n(r),l=n(2),f=n.n(l),c=n(6),m=n(7),E=n(1),C=n.n(E),s=n(0),y=n.n(s),S=function(t){return C.a.createElement("div",t)},k={alignItems:"center",basis:void 0,direction:"row",gap:void 0,inline:!1,justifyContent:void 0,reverse:!1,wrap:void 0},L={alignItems:y.a.string,basis:y.a.oneOfType([y.a.string,y.a.number]),direction:y.a.string,gap:y.a.oneOfType([y.a.shape({desktop:y.a.number,mobile:y.a.number,tablet:y.a.number}),y.a.number,y.a.arrayOf(y.a.number),y.a.string]),inline:y.a.bool,justifyContent:y.a.string,reverse:y.a.bool,wrap:y.a.string};S.defaultProps=k,S.propTypes=L;var D={direction:!0},e=f()(c.Box).withConfig({shouldForwardProp:function(t,d){return!D[t]&&d(t)}})(a||(a=u()([`
+  align-items: `,`;
+  display: `,`;
+  flex-direction: `,`;
+  flex-wrap: `,`;
+  `,`};
+  justify-content: `,`;
+`])),function(t){return t.alignItems},function(t){return t.inline?"inline-flex":"flex"},function(t){return t.direction},function(t){return t.wrap},function(t){var d=t.gap,j=t.theme;return Object(m.a)("gap",d,j)},function(t){return t.justifyContent});e.defaultProps=k,e.propTypes=L}})})},17542:(V,z,p)=>{"use strict";p.r(z),p.d(z,{default:()=>Ee});var i=p(32735),w=p(83985),o=p(79613),b=p(5141),n=p(5636),a=p(11856),r=p(64354),u=p(19192),l=p(90662),f=p(20763),c=p(35980),m=p(53214),E=p(95602),C=p(44526),s=p(28004),y=p(55470),S=p(16540),k=p(29270),L=p(9808),D=p(59290),e=p.n(D),t=p(95717),d=p.n(t),j=p(76470),B=p.n(j),O=p(97042),_=p.n(O),ee=p(49415),ne=p(3040),G=p.n(ne);const $={webhooks:[],webhooksToDelete:[],webhookToDelete:null,loadingWebhooks:!0},Q=(x,v)=>(0,ee.default)(x,g=>{switch(v.type){case"GET_DATA_SUCCEEDED":{g.webhooks=v.data,g.loadingWebhooks=!1;break}case"TOGGLE_LOADING":{g.loadingWebhooks=!x.loadingWebhooks;break}case"SET_WEBHOOK_ENABLED":{G()(g,["webhooks",...v.keys],v.value);break}case"SET_WEBHOOK_TO_DELETE":{g.webhookToDelete=v.id;break}case"SET_WEBHOOKS_TO_DELETE":{v.value?g.webhooksToDelete.push(v.id):g.webhooksToDelete=x.webhooksToDelete.filter(P=>P!==v.id);break}case"SET_ALL_WEBHOOKS_TO_DELETE":{x.webhooksToDelete.length===0?g.webhooksToDelete=x.webhooks.map(P=>P.id):g.webhooksToDelete=[];break}case"WEBHOOKS_DELETED":{g.webhooks=x.webhooks.filter(P=>!x.webhooksToDelete.includes(P.id)),g.webhooksToDelete=[];break}case"WEBHOOK_DELETED":{g.webhooks=x.webhooks.filter((P,H)=>H!==v.index),g.webhookToDelete=null;break}default:return g}});var te=p(98399),pe=Object.defineProperty,he=Object.defineProperties,me=Object.getOwnPropertyDescriptors,ae=Object.getOwnPropertySymbols,be=Object.prototype.hasOwnProperty,ge=Object.prototype.propertyIsEnumerable,ie=(x,v,g)=>v in x?pe(x,v,{enumerable:!0,configurable:!0,writable:!0,value:g}):x[v]=g,F=(x,v)=>{for(var g in v||(v={}))be.call(v,g)&&ie(x,g,v[g]);if(ae)for(var g of ae(v))ge.call(v,g)&&ie(x,g,v[g]);return x},ve=(x,v)=>he(x,me(v)),X=(x,v,g)=>new Promise((P,H)=>{var N=A=>{try{T(g.next(A))}catch(R){H(R)}},W=A=>{try{T(g.throw(A))}catch(R){H(R)}},T=A=>A.done?P(A.value):Promise.resolve(A.value).then(N,W);T((g=g.apply(x,v)).next())});const ye=()=>{const{isLoading:x,allowedActions:{canCreate:v,canRead:g,canUpdate:P,canDelete:H}}=(0,w.useRBAC)(o.Z.settings.webhooks),N=(0,w.useNotification)(),W=(0,i.useRef)(!0),{formatMessage:T}=(0,n.useIntl)(),[A,R]=(0,i.useState)(!1),[{webhooks:Z,webhooksToDelete:Y,webhookToDelete:oe,loadingWebhooks:re},I]=(0,i.useReducer)(Q,$),{notifyStatus:xe}=(0,k.useNotifyAT)();(0,w.useFocusWhenNavigate)();const{push:Te}=(0,b.useHistory)(),{pathname:se}=(0,b.useLocation)(),J=Z.length,K=Y.length,le=h=>Z.findIndex(M=>M.id===h);(0,i.useEffect)(()=>(W.current=!0,()=>{W.current=!1}),[]),(0,i.useEffect)(()=>{g&&Oe()},[g]);const Oe=()=>X(void 0,null,function*(){try{const{data:h}=yield(0,w.request)("/admin/webhooks",{method:"GET"});W.current&&(I({type:"GET_DATA_SUCCEEDED",data:h}),xe("webhooks have been loaded"))}catch(h){te.log(h),W.current&&(h.code!==20&&N({type:"warning",message:{id:"notification.error"}}),I({type:"TOGGLE_LOADING"}))}}),we=()=>{R(h=>!h)},Se=()=>{oe?ke():Le()},ke=()=>X(void 0,null,function*(){try{yield(0,w.request)(`/admin/webhooks/${oe}`,{method:"DELETE"}),I({type:"WEBHOOK_DELETED",index:le(oe)})}catch(h){h.code!==20&&N({type:"warning",message:{id:"notification.error"}})}R(!1)}),Le=()=>X(void 0,null,function*(){const h={ids:Y};try{yield(0,w.request)("/admin/webhooks/batch-delete",{method:"POST",body:h}),W.current&&I({type:"WEBHOOKS_DELETED"})}catch(M){W.current&&M.code!==20&&N({type:"warning",message:{id:"notification.error"}})}R(!1)}),ue=h=>{R(!0),h!=="all"&&I({type:"SET_WEBHOOK_TO_DELETE",id:h})},Ce=(h,M)=>X(void 0,null,function*(){const ce=le(M),Me=Z[ce],de=[ce,"isEnabled"],fe=ve(F({},Me),{isEnabled:h});delete fe.id;try{I({type:"SET_WEBHOOK_ENABLED",keys:de,value:h}),yield(0,w.request)(`/admin/webhooks/${M}`,{method:"PUT",body:fe})}catch(je){W.current&&(I({type:"SET_WEBHOOK_ENABLED",keys:de,value:!h}),je.code!==20&&N({type:"warning",message:{id:"notification.error"}}))}}),De=()=>{I({type:"SET_ALL_WEBHOOKS_TO_DELETE"})},Pe=(h,M)=>{I({type:"SET_WEBHOOKS_TO_DELETE",value:h,id:M})},q=h=>{Te(`${se}/${h}`)};return i.createElement(a.Layout,null,i.createElement(w.SettingsPageTitle,{name:"Webhooks"}),i.createElement(S.Main,{"aria-busy":x||re},i.createElement(a.HeaderLayout,{title:T({id:"Settings.webhooks.title",defaultMessage:"Webhooks"}),subtitle:T({id:"Settings.webhooks.list.description",defaultMessage:"Get POST changes notifications"}),primaryAction:v&&!re&&i.createElement(w.LinkButton,{startIcon:i.createElement(e(),null),variant:"default",to:`${se}/create`,size:"L"},T({id:"Settings.webhooks.list.button.add",defaultMessage:"Create new webhook"}))}),K>0&&H&&i.createElement(a.ActionLayout,{startActions:i.createElement(i.Fragment,null,i.createElement(E.Typography,{variant:"epsilon",textColor:"neutral600"},T({id:"Settings.webhooks.to.delete",defaultMessage:"{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected"},{webhooksToDeleteLength:K})),i.createElement(C.Button,{onClick:()=>ue("all"),startIcon:i.createElement(B(),null),size:"L",variant:"danger-light"},T({id:"global.delete",defaultMessage:"Delete"})))}),i.createElement(a.ContentLayout,null,x||re?i.createElement(L.Box,{background:"neutral0",padding:6,shadow:"filterShadow",hasRadius:!0},i.createElement(w.LoadingIndicatorPage,null)):i.createElement(i.Fragment,null,J>0?i.createElement(m.Table,{colCount:5,rowCount:J+1,footer:i.createElement(m.TFooter,{onClick:()=>v?q("create"):{},icon:i.createElement(e(),null)},T({id:"Settings.webhooks.list.button.add",defaultMessage:"Create new webhook"}))},i.createElement(m.Thead,null,i.createElement(m.Tr,null,i.createElement(m.Th,null,i.createElement(c.BaseCheckbox,{"aria-label":T({id:"global.select-all-entries",defaultMessage:"Select all entries"}),indeterminate:K>0&&K<J,value:K===J,onValueChange:De})),i.createElement(m.Th,{width:"20%"},i.createElement(E.Typography,{variant:"sigma",textColor:"neutral600"},T({id:"global.name",defaultMessage:"Name"}))),i.createElement(m.Th,{width:"60%"},i.createElement(E.Typography,{variant:"sigma",textColor:"neutral600"},T({id:"Settings.webhooks.form.url",defaultMessage:"URL"}))),i.createElement(m.Th,{width:"20%"},i.createElement(E.Typography,{variant:"sigma",textColor:"neutral600"},T({id:"Settings.webhooks.list.th.status",defaultMessage:"Status"}))),i.createElement(m.Th,null,i.createElement(s.VisuallyHidden,null,T({id:"Settings.webhooks.list.th.actions",defaultMessage:"Actions"}))))),i.createElement(m.Tbody,null,Z.map(h=>i.createElement(m.Tr,F({key:h.id},(0,w.onRowClick)({fn:()=>q(h.id),condition:P})),i.createElement(m.Td,F({},w.stopPropagation),i.createElement(c.BaseCheckbox,{"aria-label":`${T({id:"global.select",defaultMessage:"Select"})} ${h.name}`,value:Y==null?void 0:Y.includes(h.id),onValueChange:M=>Pe(M,h.id),id:"select",name:"select"})),i.createElement(m.Td,null,i.createElement(E.Typography,{fontWeight:"semiBold",textColor:"neutral800"},h.name)),i.createElement(m.Td,null,i.createElement(E.Typography,{textColor:"neutral800"},h.url)),i.createElement(m.Td,null,i.createElement(u.Flex,F({},w.stopPropagation),i.createElement(y.Switch,{onLabel:T({id:"global.enabled",defaultMessage:"Enabled"}),offLabel:T({id:"global.disabled",defaultMessage:"Disabled"}),label:`${h.name} ${T({id:"Settings.webhooks.list.th.status",defaultMessage:"Status"})}`,selected:h.isEnabled,onChange:()=>Ce(!h.isEnabled,h.id),visibleLabels:!0}))),i.createElement(m.Td,null,i.createElement(l.Stack,F({horizontal:!0,spacing:1},w.stopPropagation),P&&i.createElement(f.IconButton,{onClick:()=>{q(h.id)},label:T({id:"Settings.webhooks.events.update",defaultMessage:"Update"}),icon:i.createElement(d(),null),noBorder:!0}),H&&i.createElement(f.IconButton,{onClick:()=>ue(h.id),label:T({id:"global.delete",defaultMessage:"Delete"}),icon:i.createElement(B(),null),noBorder:!0,id:`delete-${h.id}`}))))))):i.createElement(r.EmptyStateLayout,{icon:i.createElement(_(),{width:"160px"}),content:T({id:"Settings.webhooks.list.empty.description",defaultMessage:"No webhooks found"}),action:i.createElement(C.Button,{variant:"secondary",startIcon:i.createElement(e(),null),onClick:()=>v?q("create"):{}},T({id:"Settings.webhooks.list.button.add",defaultMessage:"Create new webhook"}))})))),i.createElement(w.ConfirmDialog,{isOpen:A,onToggleDialog:we,onConfirm:Se}))},Ee=()=>i.createElement(w.CheckPagePermissions,{permissions:o.Z.settings.webhooks.main},i.createElement(ye,null))}}]);

package/index.js

@@ -1,37 +1,66 @@
 'use strict';
 
 const path = require('path');
+const _ = require('lodash');
 const fs = require('fs-extra');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const { isUsingTypeScript } = require('@strapi/typescript-utils');
 const chalk = require('chalk');
+const chokidar = require('chokidar');
+const getWebpackConfig = require('./webpack.config');
 
-const {
-  createCacheDir,
-  getCustomWebpackConfig,
-  shouldBuildAdmin,
-  watchAdminFiles,
-} = require('./utils');
+const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`));
 
-async function build({ appDir, buildDestDir, env, forceBuild, optimize, options, plugins }) {
-  const buildAdmin = await shouldBuildAdmin({ appDir, plugins });
+const DEFAULT_PLUGINS = [
+  'content-type-builder',
+  'content-manager',
+  'upload',
+  'email',
+  'i18n',
+  'users-permissions',
+];
 
-  const useTypeScript = await isUsingTypeScript(
-    path.join(appDir, 'src', 'admin'),
-    'tsconfig.json'
-  );
+function getCustomWebpackConfig(dir, config) {
+  const adminConfigPath = path.join(dir, 'src', 'admin', 'webpack.config.js');
+
+  let webpackConfig = getWebpackConfig(config);
+
+  if (fs.existsSync(adminConfigPath)) {
+    const webpackAdminConfig = require(path.resolve(adminConfigPath));
+
+    if (_.isFunction(webpackAdminConfig)) {
+      // Expose the devServer configuration
+      if (config.devServer) {
+        webpackConfig.devServer = config.devServer;
+      }
+
+      webpackConfig = webpackAdminConfig(webpackConfig, webpack);
+
+      if (!webpackConfig) {
+        console.error(
+          `${chalk.red('Error:')} Nothing was returned from your custom webpack configuration`
+        );
+        process.exit(1);
+      }
+    }
+  }
+
+  return webpackConfig;
+}
+
+async function build({ plugins, dir, env, options, optimize, forceBuild }) {
+  const buildAdmin = await shouldBuildAdmin({ dir, plugins });
 
   if (!buildAdmin && !forceBuild) {
     return;
   }
 
   // Create the cache dir containing the front-end files.
-  await createCacheDir({ appDir, plugins });
+  await createCacheDir({ dir, plugins });
 
-  const cacheDir = path.resolve(appDir, '.cache');
+  const cacheDir = path.resolve(dir, '.cache');
   const entry = path.resolve(cacheDir, 'admin', 'src');
-  const dest = path.resolve(buildDestDir, 'build');
+  const dest = path.resolve(dir, 'build');
 
   // Roots for the @strapi/babel-plugin-switch-ee-ce
   const roots = {
@@ -41,23 +70,15 @@ async function build({ appDir, buildDestDir, env, forceBuild, optimize, options,
 
   const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
 
-  // Either use the tsconfig file from the generated app or the one inside the .cache folder
-  // so we can develop plugins in TS while being in a JS app
-  const tsConfigFilePath = useTypeScript
-    ? path.join(appDir, 'src', 'admin', 'tsconfig.json')
-    : path.resolve(entry, 'tsconfig.json');
-
-  const config = getCustomWebpackConfig(appDir, {
-    appDir,
+  const config = getCustomWebpackConfig(dir, {
+    entry,
+    pluginsPath,
     cacheDir,
     dest,
-    entry,
     env,
-    optimize,
     options,
-    pluginsPath,
+    optimize,
     roots,
-    tsConfigFilePath,
   });
 
   const compiler = webpack(config);
@@ -88,27 +109,115 @@ async function build({ appDir, buildDestDir, env, forceBuild, optimize, options,
   });
 }
 
-async function clean({ appDir, buildDestDir }) {
-  // FIXME rename admin build dir and path to build dir
-  const buildDir = path.join(buildDestDir, 'build');
-  // .cache dir is always located at the root of the app
-  const cacheDir = path.join(appDir, '.cache');
+async function createPluginsJs(plugins, dest) {
+  const pluginsArray = plugins.map(({ pathToPlugin, name }) => {
+    const shortName = _.camelCase(name);
+
+    /**
+     * path.join, on windows, it uses backslashes to resolve path.
+     * The problem is that Webpack does not windows paths
+     * With this tool, we need to rely on "/" and not "\".
+     * This is the reason why '..\\..\\..\\node_modules\\@strapi\\plugin-content-type-builder/strapi-admin.js' was not working.
+     * The regexp at line 105 aims to replace the windows backslashes by standard slash so that webpack can deal with them.
+     * Backslash looks to work only for absolute paths with webpack => https://webpack.js.org/concepts/module-resolution/#absolute-paths
+     */
+    const realPath = path
+      .join(path.relative(path.resolve(dest, 'admin', 'src'), pathToPlugin), 'strapi-admin.js')
+      .replace(/\\/g, '/');
+
+    return {
+      name,
+      pathToPlugin: realPath,
+      shortName,
+    };
+  });
+
+  const content = `
+${pluginsArray
+  .map(({ pathToPlugin, shortName }) => {
+    const req = `'${pathToPlugin}'`;
+
+    return `import ${shortName} from ${req};`;
+  })
+  .join('\n')}
+
+
+const plugins = {
+${[...pluginsArray]
+  .map(({ name, shortName }) => {
+    return `  '${name}': ${shortName},`;
+  })
+  .join('\n')}
+};
+
+export default plugins;
+`;
+
+  return fs.writeFile(path.resolve(dest, 'admin', 'src', 'plugins.js'), content);
+}
+
+async function clean({ dir }) {
+  const buildDir = path.join(dir, 'build');
+  const cacheDir = path.join(dir, '.cache');
 
   fs.removeSync(buildDir);
   fs.removeSync(cacheDir);
 }
 
-async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugins, port }) {
-  const useTypeScript = await isUsingTypeScript(
-    path.join(appDir, 'src', 'admin'),
-    'tsconfig.json'
-  );
+async function copyAdmin(dest) {
+  const adminPath = getPkgPath('@strapi/admin');
+
+  // TODO copy ee folders for plugins
+  await fs.copy(path.resolve(adminPath, 'ee', 'admin'), path.resolve(dest, 'ee', 'admin'));
+
+  await fs.ensureDir(path.resolve(dest, 'config'));
+  await fs.copy(path.resolve(adminPath, 'admin'), path.resolve(dest, 'admin'));
+
+  // Copy package.json
+  await fs.copy(path.resolve(adminPath, 'package.json'), path.resolve(dest, 'package.json'));
+}
+
+async function createCacheDir({ dir, plugins }) {
+  const cacheDir = path.resolve(dir, '.cache');
+
+  const pluginsWithFront = Object.keys(plugins)
+    .filter(pluginName => {
+      const pluginInfo = plugins[pluginName];
+      return fs.existsSync(path.resolve(pluginInfo.pathToPlugin, 'strapi-admin.js'));
+    })
+    .map(name => ({ name, ...plugins[name] }));
+
+  // create .cache dir
+  await fs.emptyDir(cacheDir);
+
+  // copy admin core code
+  await copyAdmin(cacheDir);
+
+  // Copy app.js
+  const customAdminConfigFilePath = path.join(dir, 'src', 'admin', 'app.js');
+
+  if (fs.existsSync(customAdminConfigFilePath)) {
+    await fs.copy(customAdminConfigFilePath, path.resolve(cacheDir, 'admin', 'src', 'app.js'));
+  }
+
+  // Copy admin extensions folder
+  const adminExtensionFolder = path.join(dir, 'src', 'admin', 'extensions');
+
+  if (fs.existsSync(adminExtensionFolder)) {
+    await fs.copy(adminExtensionFolder, path.resolve(cacheDir, 'admin', 'src', 'extensions'));
+  }
+
+  // create plugins.js with plugins requires
+  await createPluginsJs(pluginsWithFront, cacheDir);
+}
+
+async function watchAdmin({ plugins, dir, host, port, browser, options }) {
   // Create the cache dir containing the front-end files.
-  const cacheDir = path.join(appDir, '.cache');
-  await createCacheDir({ appDir, plugins });
+  const cacheDir = path.join(dir, '.cache');
+  await createCacheDir({ dir, plugins });
 
   const entry = path.join(cacheDir, 'admin', 'src');
-  const dest = path.join(buildDestDir, 'build');
+  const dest = path.join(dir, 'build');
   const env = 'development';
 
   // Roots for the @strapi/babel-plugin-switch-ee-ce
@@ -119,20 +228,14 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
 
   const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
 
-  // Either use the tsconfig file from the generated app or the one inside the .cache folder
-  // so we can develop plugins in TS while being in a JS app
-  const tsConfigFilePath = useTypeScript
-    ? path.join(appDir, 'src', 'admin', 'tsconfig.json')
-    : path.resolve(entry, 'tsconfig.json');
-
   const args = {
-    appDir,
+    entry,
     cacheDir,
+    pluginsPath,
     dest,
-    entry,
     env,
+    port,
     options,
-    pluginsPath,
     roots,
     devServer: {
       port,
@@ -143,6 +246,7 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
           warnings: false,
         },
       },
+
       open: browser === 'true' ? true : browser,
       devMiddleware: {
         publicPath: options.adminPath,
@@ -152,10 +256,9 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
         disableDotRule: true,
       },
     },
-    tsConfigFilePath,
   };
 
-  const webpackConfig = getCustomWebpackConfig(appDir, args);
+  const webpackConfig = getCustomWebpackConfig(dir, args);
 
   const compiler = webpack(webpackConfig);
 
@@ -176,7 +279,90 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
 
   runServer();
 
-  watchAdminFiles(appDir, useTypeScript);
+  watchFiles(dir);
+}
+
+/**
+ * Listen to files change and copy the changed files in the .cache/admin folder
+ * when using the dev mode
+ * @param {string} dir
+ */
+async function watchFiles(dir) {
+  const cacheDir = path.join(dir, '.cache');
+  const appExtensionFile = path.join(dir, 'src', 'admin', 'app.js');
+  const extensionsPath = path.join(dir, 'src', 'admin', 'extensions');
+
+  // Only watch the admin/app.js file and the files that are in the ./admin/extensions/folder
+  const filesToWatch = [appExtensionFile, extensionsPath];
+
+  const watcher = chokidar.watch(filesToWatch, {
+    ignoreInitial: true,
+    ignorePermissionErrors: true,
+  });
+
+  watcher.on('all', async (event, filePath) => {
+    const isAppFile = filePath.includes(appExtensionFile);
+
+    // The app.js file needs to be copied in the .cache/admin/src/app.js and the other ones needs to
+    // be copied in the .cache/admin/src/extensions folder
+    const targetPath = isAppFile
+      ? path.join(path.normalize(filePath.split(appExtensionFile)[1]), 'app.js')
+      : path.join('extensions', path.normalize(filePath.split(extensionsPath)[1]));
+
+    const destFolder = path.join(cacheDir, 'admin', 'src');
+
+    if (event === 'unlink' || event === 'unlinkDir') {
+      // Remove the file or folder
+      // We need to copy the original files when deleting an override one
+      try {
+        fs.removeSync(path.join(destFolder, targetPath));
+      } catch (err) {
+        console.log('An error occured while deleting the file', err);
+      }
+    } else {
+      // In any other case just copy the file into the .cache/admin/src folder
+      try {
+        await fs.copy(filePath, path.join(destFolder, targetPath));
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  });
+}
+
+const hasCustomAdminCode = async dir => {
+  const customAdminPath = path.join(dir, 'src', 'admin');
+  const customAdminConfigFile = path.join(customAdminPath, 'app.js');
+  const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
+
+  const hasCustomConfigFile = await fs.pathExists(customAdminConfigFile);
+  const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
+
+  return hasCustomConfigFile || hasCustomWebpackFile;
+};
+
+/**
+ * Checks if the project's installed plugins are not the same as a default one.
+ * @param {Object} plugins
+ * @returns {boolean}
+ */
+const hasNonDefaultPlugins = plugins => {
+  // List of plugins that are not the ones installed in a generated app
+  const installedPlugins = Object.keys(plugins).filter(x => !DEFAULT_PLUGINS.includes(x));
+
+  // List of default plugins uninstalled from a generated app
+  const missingPlugins = DEFAULT_PLUGINS.filter(x => !Object.keys(plugins).includes(x));
+
+  const diff = [...installedPlugins, ...missingPlugins];
+
+  return diff.length > 0;
+};
+
+async function shouldBuildAdmin({ dir, plugins }) {
+  const appHasCustomAdminCode = await hasCustomAdminCode(dir);
+  const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
+
+  return appHasCustomAdminCode || appHasNonDefaultPlugins;
 }
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.2.0-beta.3",
+  "version": "4.2.1-alpha.0",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -28,7 +28,6 @@
     "develop:webpack": "cross-env NODE_ENV=development webpack serve --config webpack.config.dev.js --progress profile",
     "prepublishOnly": "yarn build",
     "build": "rimraf build && node ./scripts/build.js",
-    "build:mesure": "rimraf build && cross-env MESURE_BUILD_SPEED=true node ./scripts/build.js",
     "test": "echo \"no tests yet\"",
     "test:unit": "jest --verbose",
     "test:front": "cross-env IS_EE=true jest --config ./jest.config.front.js",
@@ -50,12 +49,11 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@strapi/babel-plugin-switch-ee-ce": "4.2.0-beta.3",
-    "@strapi/design-system": "1.1.0",
-    "@strapi/helper-plugin": "4.2.0-beta.3",
-    "@strapi/icons": "1.1.0",
-    "@strapi/typescript-utils": "4.2.0-beta.3",
-    "@strapi/utils": "4.2.0-beta.3",
+    "@strapi/babel-plugin-switch-ee-ce": "4.2.1-alpha.0",
+    "@strapi/design-system": "1.1.1",
+    "@strapi/helper-plugin": "4.2.1-alpha.0",
+    "@strapi/icons": "1.1.1",
+    "@strapi/utils": "4.2.1-alpha.0",
     "axios": "0.24.0",
     "babel-loader": "8.2.3",
     "babel-plugin-styled-components": "2.0.2",
@@ -71,7 +69,6 @@
     "execa": "^1.0.0",
     "fast-deep-equal": "3.1.3",
     "font-awesome": "^4.7.0",
-    "fork-ts-checker-webpack-plugin": "7.2.1",
     "formik": "^2.2.6",
     "fs-extra": "10.0.0",
     "highlight.js": "^10.4.1",
@@ -137,12 +134,11 @@
   },
   "devDependencies": {
     "duplicate-dependencies-webpack-plugin": "0.2.0",
-    "speed-measure-webpack-plugin": "1.5.0",
     "webpack-bundle-analyzer": "4.4.1"
   },
   "engines": {
-    "node": ">=12.22.0 <=16.x.x",
+    "node": ">=14.19.1 <=16.x.x",
     "npm": ">=6.0.0"
   },
-  "gitHead": "c4addbad6ecbc8ef7633bbba3806f3b0a2ae5f49"
+  "gitHead": "90bd3b9e294a69cd9538bde4e2e853e6de60f238"
 }

package/scripts/build.js

@@ -3,11 +3,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const { isObject } = require('lodash');
-// eslint-disable-next-line node/no-extraneous-require
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
-
 const webpackConfig = require('../webpack.config');
-const getPluginsPath = require('../utils/get-plugins-path');
 const {
   getCorePluginsPath,
   getPluginToInstallPath,
@@ -16,39 +12,29 @@ const {
 
 const PLUGINS_TO_INSTALL = ['i18n', 'users-permissions'];
 
-// Wrapper that outputs the webpack speed
-const smp = new SpeedMeasurePlugin();
-
 const buildAdmin = async () => {
   const entry = path.join(__dirname, '..', 'admin', 'src');
   const dest = path.join(__dirname, '..', 'build');
-  const tsConfigFilePath = path.join(__dirname, '..', 'admin', 'src', 'tsconfig.json');
-
   const corePlugins = getCorePluginsPath();
   const plugins = getPluginToInstallPath(PLUGINS_TO_INSTALL);
   const allPlugins = { ...corePlugins, ...plugins };
-  const pluginsPath = getPluginsPath();
 
   await createPluginsFile(allPlugins);
 
   const args = {
     entry,
     dest,
-    cacheDir: path.join(__dirname, '..'),
-    pluginsPath,
+    cacheDir: path.resolve(__dirname, '..'),
+    pluginsPath: [path.resolve(__dirname, '../../../../packages')],
     env: 'production',
     optimize: true,
     options: {
       backend: 'http://localhost:1337',
       adminPath: '/admin/',
     },
-    tsConfigFilePath,
   };
 
-  const config =
-    process.env.MESURE_BUILD_SPEED === 'true' ? smp.wrap(webpackConfig(args)) : webpackConfig(args);
-
-  const compiler = webpack(config);
+  const compiler = webpack(webpackConfig(args));
 
   console.log('Building the admin panel');
 

package/server/config/admin-actions.js

@@ -146,5 +146,19 @@ module.exports = {
       section: 'settings',
       category: 'api tokens',
     },
+    {
+      uid: 'project-settings.update',
+      displayName: 'Update the project level settings',
+      pluginName: 'admin',
+      section: 'settings',
+      category: 'project',
+    },
+    {
+      uid: 'project-settings.read',
+      displayName: 'Read the project level settings',
+      pluginName: 'admin',
+      section: 'settings',
+      category: 'project',
+    },
   ],
 };