npm - @corva/ui - Versions diffs - 3.41.0-0 → 3.41.0-1 - Mend

@corva/ui 3.41.0-0 → 3.41.0-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),n=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/objectWithoutProperties"),t=require("react"),o=require("classnames"),i=require("react-router"),a=require("lodash"),s=require("prop-types"),u=require("./IsolatedPage.js"),p=require("./constants.js"),l=require("./DevCenterIsolatedApp.module.css.js"),d=require("../AppContext.js"),c=require("../../../permissions/PermissionsContext.js");require("../../../permissions/constants/index.js"),require("../../../permissions/withPermissionsHOC.js"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/regenerator"),require("../../../clients/jsonApi/index.js"),require("../../../permissions/ProvidePermissions.js");var f=require("../../../utils/index.js");require("../AppHeader/AppHeader.js"),require("../AppSideBar/AppSideBar.js"),require("../AppsDataProvider/AppsDataProvider.js");var v=require("../DevCenterAppContainer/DevCenterAppContainer.js");require("../NavigationBar/NavigationBar.js"),require("../SideBar/SideBar.js"),require("../AppSettingsPopover/AppSettingsPopover.js"),require("../AppFilterPanelLayout/AppFilterPanelLayout.js"),require("../DevCenterRouterContext/DevCenterRouterContext.js"),require("../DevCenterRouterContext/UniversalLink/UniversalLink.js");var C=require("react/jsx-runtime");require("./DevCenterIsolatedAppPage.js");var b=require("../../../utils/mobileDetect.js"),m=require("../../../utils/devcenter.js");function A(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=A(e),g=A(n),I=A(r),q=A(o),M=A(s),h=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn"];function x(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function y(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?x(Object(r),!0).forEach((function(n){j.default(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function P(e){var n,r,o,i,a,s=e.isIsolationFeatureEnabled,A=e.onAppFullscreenTransparentMode,j=e.onIsMaximizedChange,M=e.onInnerContainerMouseEnter,x=e.onInnerContainerMouseLeave,P=e.onAppContainerClick,E=e.setInnerContainerRefFn,R=I.default(e,h),w=t.useMemo((function(){return m.createDevCenterRouter(R.router)}),[null===(n=R.router)||void 0===n?void 0:n.location]),D=m.isCorvaApp(null==R||null===(r=R.app)||void 0===r?void 0:r.app)&&!m.isIsolationEnabledInPackageManifest(null==R||null===(o=R.app)||void 0===o?void 0:o.package)||!s,O=D?v:u.IsolatedPage,S=t.useRef(),T=t.useRef(),F=t.useRef(),L=t.useRef(!1),_=t.useRef(!1),k=m.isAppMaximized(null===(i=R.router)||void 0===i||null===(a=i.location)||void 0===a?void 0:a.query,R.app.id),z=t.useRef(k);z.current=k;var U=t.useState(f.getUserUnits()),B=g.default(U,2),N=B[0],W=B[1];t.useEffect((function(){var e=f.subscribeForUserUnitsUpdates((function(e){return W(e)}));return function(){return e()}}),[]);var H=t.useContext(d),G=c.default();function V(){A({appId:R.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",l.compensateScroll)}var J=t.useCallback((function(e){var n,r,t,o,i,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!s||D||z.current&&!L.current||L.current===e){var d;a&&_.current!==a&&(_.current=a,null===(d=T.current)||void 0===d||d.classList.add(l.containerMaximizedTransparentModal))}else{var c,f=e?"add":"remove";if(null===(n=T.current)||void 0===n||n.classList[f](l.containerMaximizedTransparent),a||"remove"===f)null===(c=T.current)||void 0===c||c.classList[f](l.containerMaximizedTransparentModal);S.current=null===(r=T.current)||void 0===r||null===(t=r.querySelector("[".concat(u.APP_IFRAME_ATTRIBUTE,"]")))||void 0===t||null===(o=t.contentWindow)||void 0===o?void 0:o.document;var v=null===(i=S.current)||void 0===i?void 0:i.getElementById(p.ISOLATED_PAGE_APP_CONTAINER_ID);if(v){if(e){var C=F.current.getBoundingClientRect(),b=C.top,m=C.left,j=C.width,g=C.height;v.setAttribute("style","\n        top: ".concat(b,"px;\n        left: ").concat(m,"px;\n        width: ").concat(j,"px;\n        height: ").concat(g,"px;\n        position: absolute;\n      ")),A({appId:R.app.id,isModeEnabled:!0});var I=window.innerWidth!==document.body.clientWidth;document.body.classList.add("dc-isolated-app__body-overflow",I&&l.compensateScroll)}else v.setAttribute("style",""),V();L.current=e,_.current=a}}}),[s,D,z]);t.useEffect((function(){return V}),[]),t.useEffect((function(){k&&L.current&&J(!1)}),[k]);var K=t.useCallback((function(e){T.current=e,E(e)}),[]);return C.jsx("div",{className:q.default("dc-isolated-app",l.fixedSizeContainer),ref:F,children:C.jsx("div",{ref:K,onMouseEnter:M,onMouseLeave:x,"data-testid":"".concat("DevCenter_AppContainer","_").concat(R.app.app.name),className:q.default(l.container,b.isInsideNewMobileApp&&l.newMobileAppContainer,k&&l.containerMaximized),children:C.jsx(O,y(y({},R),{},{appContextValue:H,devCenterRouter:w,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:P,onIsMaximizedChange:j,permissionsContextValue:G,setIsFullscreenModalMode:J,userUnits:N}))})})}P.propTypes={app:M.default.shape({id:M.default.number,app:M.default.shape({name:M.default.string})}).isRequired,currentUser:M.default.shape({}).isRequired,isIsolationFeatureEnabled:M.default.bool,onAppContainerClick:M.default.func,onAppFullscreenTransparentMode:M.default.func,onAppRemove:M.default.func,onInnerContainerMouseEnter:M.default.func,onInnerContainerMouseLeave:M.default.func,onIsMaximizedChange:M.default.func,onSettingChange:M.default.func,onSettingsChange:M.default.func,setInnerContainerRefFn:M.default.func,updateCurrentDashboardAppLastAnnotation:M.default.func},P.defaultProps={isIsolationFeatureEnabled:!1,onAppContainerClick:a.noop,onAppFullscreenTransparentMode:a.noop,onAppRemove:a.noop,onInnerContainerMouseEnter:a.noop,onInnerContainerMouseLeave:a.noop,onIsMaximizedChange:a.noop,onSettingChange:a.noop,onSettingsChange:a.noop,setInnerContainerRefFn:a.noop,updateCurrentDashboardAppLastAnnotation:a.noop};var E=i.withRouter(P);exports.DevCenterIsolatedApp=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),n=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/objectWithoutProperties"),t=require("react"),o=require("classnames"),i=require("react-router"),a=require("lodash"),s=require("prop-types"),u=require("./IsolatedPage.js"),p=require("./constants.js"),l=require("./DevCenterIsolatedApp.module.css.js"),d=require("../AppContext.js"),c=require("../../../permissions/PermissionsContext.js");require("../../../permissions/constants/index.js"),require("../../../permissions/withPermissionsHOC.js"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/regenerator"),require("../../../clients/jsonApi/index.js"),require("../../../permissions/ProvidePermissions.js");var f=require("../../../utils/index.js");require("../AppHeader/AppHeader.js"),require("../AppSideBar/AppSideBar.js"),require("../AppsDataProvider/AppsDataProvider.js");var v=require("../DevCenterAppContainer/DevCenterAppContainer.js");require("../NavigationBar/NavigationBar.js"),require("../SideBar/SideBar.js"),require("../AppSettingsPopover/AppSettingsPopover.js"),require("../AppFilterPanelLayout/AppFilterPanelLayout.js"),require("../DevCenterRouterContext/DevCenterRouterContext.js"),require("../DevCenterRouterContext/UniversalLink/UniversalLink.js");var C=require("react/jsx-runtime");require("./DevCenterIsolatedAppPage.js");var b=require("../DevCenterAppContainer/utils.js"),m=require("../../../utils/mobileDetect.js"),A=require("../../../utils/devcenter.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=j(e),q=j(n),I=j(r),M=j(o),h=j(s),x=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn"];function y(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function P(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?y(Object(r),!0).forEach((function(n){g.default(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function E(e){var n,r,o,i,a,s,j,g=e.isIsolationFeatureEnabled,h=e.onAppFullscreenTransparentMode,y=e.onIsMaximizedChange,E=e.onInnerContainerMouseEnter,R=e.onInnerContainerMouseLeave,D=e.onAppContainerClick,w=e.setInnerContainerRefFn,O=I.default(e,x),S=t.useMemo((function(){return A.createDevCenterRouter(O.router)}),[null===(n=O.router)||void 0===n?void 0:n.location]),T=A.isCorvaApp(null==O||null===(r=O.app)||void 0===r?void 0:r.app)&&!A.isIsolationEnabledInPackageManifest(null==O||null===(o=O.app)||void 0===o?void 0:o.package)||!g,F=T?v:u.IsolatedPage,L=null===(i=O.app)||void 0===i||null===(a=i.app)||void 0===a?void 0:a.app_key,_=b.getAppVersion(O.app),k="".concat(L,"-").concat(_),z=t.useRef(),U=t.useRef(),B=t.useRef(),N=t.useRef(!1),W=t.useRef(!1),H=A.isAppMaximized(null===(s=O.router)||void 0===s||null===(j=s.location)||void 0===j?void 0:j.query,O.app.id),V=t.useRef(H);V.current=H;var G=t.useState(f.getUserUnits()),J=q.default(G,2),K=J[0],Q=J[1];t.useEffect((function(){var e=f.subscribeForUserUnitsUpdates((function(e){return Q(e)}));return function(){return e()}}),[]);var X=t.useContext(d),Y=c.default();function Z(){h({appId:O.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",l.compensateScroll)}var $=t.useCallback((function(e){var n,r,t,o,i,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!g||T||V.current&&!N.current||N.current===e){var s;a&&W.current!==a&&(W.current=a,null===(s=U.current)||void 0===s||s.classList.add(l.containerMaximizedTransparentModal))}else{var d,c=e?"add":"remove";if(null===(n=U.current)||void 0===n||n.classList[c](l.containerMaximizedTransparent),a||"remove"===c)null===(d=U.current)||void 0===d||d.classList[c](l.containerMaximizedTransparentModal);z.current=null===(r=U.current)||void 0===r||null===(t=r.querySelector("[".concat(u.APP_IFRAME_ATTRIBUTE,"]")))||void 0===t||null===(o=t.contentWindow)||void 0===o?void 0:o.document;var f=null===(i=z.current)||void 0===i?void 0:i.getElementById(p.ISOLATED_PAGE_APP_CONTAINER_ID);if(f){if(e){var v=B.current.getBoundingClientRect(),C=v.top,b=v.left,m=v.width,A=v.height;f.setAttribute("style","\n        top: ".concat(C,"px;\n        left: ").concat(b,"px;\n        width: ").concat(m,"px;\n        height: ").concat(A,"px;\n        position: absolute;\n      ")),h({appId:O.app.id,isModeEnabled:!0});var j=window.innerWidth!==document.body.clientWidth;document.body.classList.add("dc-isolated-app__body-overflow",j&&l.compensateScroll)}else f.setAttribute("style",""),Z();N.current=e,W.current=a}}}),[g,T,V]);t.useEffect((function(){return Z}),[]),t.useEffect((function(){H&&N.current&&$(!1)}),[H]);var ee=t.useCallback((function(e){U.current=e,w(e)}),[]);return C.jsx("div",{className:M.default("dc-isolated-app",l.fixedSizeContainer),ref:B,children:C.jsx("div",{ref:ee,onMouseEnter:E,onMouseLeave:R,"data-testid":"".concat("DevCenter_AppContainer","_").concat(O.app.app.name),className:M.default(l.container,m.isInsideNewMobileApp&&l.newMobileAppContainer,H&&l.containerMaximized),children:C.jsx(F,P(P({},O),{},{appContextValue:X,devCenterRouter:S,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:D,onIsMaximizedChange:y,permissionsContextValue:Y,setIsFullscreenModalMode:$,userUnits:K}),k)})})}E.propTypes={app:h.default.shape({id:h.default.number,app:h.default.shape({name:h.default.string})}).isRequired,currentUser:h.default.shape({}).isRequired,isIsolationFeatureEnabled:h.default.bool,onAppContainerClick:h.default.func,onAppFullscreenTransparentMode:h.default.func,onAppRemove:h.default.func,onInnerContainerMouseEnter:h.default.func,onInnerContainerMouseLeave:h.default.func,onIsMaximizedChange:h.default.func,onSettingChange:h.default.func,onSettingsChange:h.default.func,setInnerContainerRefFn:h.default.func,updateCurrentDashboardAppLastAnnotation:h.default.func},E.defaultProps={isIsolationFeatureEnabled:!1,onAppContainerClick:a.noop,onAppFullscreenTransparentMode:a.noop,onAppRemove:a.noop,onInnerContainerMouseEnter:a.noop,onInnerContainerMouseLeave:a.noop,onIsMaximizedChange:a.noop,onSettingChange:a.noop,onSettingsChange:a.noop,setInnerContainerRefFn:a.noop,updateCurrentDashboardAppLastAnnotation:a.noop};var R=i.withRouter(E);exports.DevCenterIsolatedApp=R;
 //# sourceMappingURL=DevCenterIsolatedApp.js.map

package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevCenterIsolatedApp.js","sources":["../../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\n\nimport { IsolatedPage, APP_IFRAME_ATTRIBUTE } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\n\nimport styles from './DevCenterIsolatedApp.module.css';\n\nimport AppContext from '~/components/DevCenter/AppContext';\nimport { usePermissionsContext } from '~/permissions';\nimport { devcenter as devCenterUtils, getUserUnits, subscribeForUserUnitsUpdates } from '~/utils';\nimport { DevCenterAppContainer } from '~/components/DevCenter';\nimport { isInsideNewMobileApp } from '~/utils/mobileDetect';\n\nconst PAGE_NAME = 'DevCenter_AppContainer';\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled,\n onAppFullscreenTransparentMode,\n onIsMaximizedChange,\n onInnerContainerMouseEnter,\n onInnerContainerMouseLeave,\n onAppContainerClick,\n setInnerContainerRefFn,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.router),\n [props.router?.location]\n );\n\n const isNonIsolatedApp =\n (devCenterUtils.isCorvaApp(props?.app?.app) &&\n !devCenterUtils.isIsolationEnabledInPackageManifest(props?.app?.package)) \|\|\n !isIsolationFeatureEnabled;\n\n const DCAppComponent = isNonIsolatedApp ? DevCenterAppContainer : IsolatedPage;\n\n const appIframeDocument = useRef();\n const containerRef = useRef();\n const fixedSizeContainerRef = useRef();\n const fullscreenModeRef = useRef(false);\n const fullscreenModalModeRef = useRef(false);\n\n const isAppMaximized = devCenterUtils.isAppMaximized(props.router?.location?.query, props.app.id);\n\n // save to ref to not re-create setIsFullscreenModalMode callback on change and reduce the amoount of DC apps re-renders\n const isAppMaximizedRef = useRef(isAppMaximized);\n isAppMaximizedRef.current = isAppMaximized;\n\n const [userUnits, setUserUnits] = useState(getUserUnits());\n\n useEffect(() => {\n const unsubscribeFn = subscribeForUserUnitsUpdates(newUserUnits => setUserUnits(newUserUnits));\n\n return () => unsubscribeFn();\n }, []);\n\n const appContextValue = useContext(AppContext);\n const permissionsContextValue = usePermissionsContext();\n\n /\n What is fullscreen modal mode?\n\n Our apps, are shown in isolated iFrames. Because of it, when an app has some modal\n and opens it - it's opened inside of its iframe, instead of opening at the center of the screen.\n\n To make app modals & other elements be opened at the center of the screen, as if they are not inside of an iframe,\n we use some hacks.\n\n When the app wants to open a fullscreen element, we make its iframe fullscreen, but with transparent background,\n and we set width/height & position of that app iframe to inner app container that is located inside of the iframe.\n So when iframe's fullscreen element is opened, it looks like it's a part of the platform, and the app which shows the element, looks like\n usual, not in fullscreen\n\n So the platform provides this setIsFullscreenModalMode function to DC apps.\n When DC app wants to open a modal that should be opened at the center of the screen - it needs to\n call setIsFullscreenModalMode(true) first. And when it closes the modal - setIsFullscreenModalMode(false)\n\n Two things are important about this\n - all these styles that make this invisible background work should be applied at once\n - enter and exit from the mode, shouldn't trigger even a single re-render, as it may impact\n some elements inside the DC app\n\n There's a second parameter to `setIsFullscreenModalMode`: `isModal`. It should be used when a fullscreen overlay is displayed\n (Modal, for instance) that should cover everything on screen.\n\n What it does - it basically sets the stretched element's z-index to a very high value, so it covers every other UI element in CWF\n /\n\n function handleAppFullscreenTransparentModeExit() {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\n }\n\n const setIsFullscreenModalMode = useCallback(\n function setIsFullscreenModalMode(nextIsFullscreenModalModeValue, isModal = false) {\n // When an app is already in fullscreen mode, no need to use this\n // invisible fullscreen mode to make elements take the whole screen\n\n if (\n !isIsolationFeatureEnabled \|\|\n isNonIsolatedApp \|\|\n (isAppMaximizedRef.current && !fullscreenModeRef.current) \|\|\n fullscreenModeRef.current === nextIsFullscreenModalModeValue\n ) {\n // Adding modal class if modal is opened when non-modal is already open\n if (isModal && fullscreenModalModeRef.current !== isModal) {\n fullscreenModalModeRef.current = isModal;\n containerRef.current?.classList.add(styles.containerMaximizedTransparentModal);\n }\n\n return;\n }\n\n const classesEditMethod = nextIsFullscreenModalModeValue ? 'add' : 'remove';\n\n containerRef.current?.classList[classesEditMethod](styles.containerMaximizedTransparent);\n\n if (isModal \|\| classesEditMethod === 'remove') {\n containerRef.current?.classList[classesEditMethod](\n styles.containerMaximizedTransparentModal\n );\n }\n\n appIframeDocument.current = containerRef.current?.querySelector(\n `[${APP_IFRAME_ATTRIBUTE}]`\n )?.contentWindow?.document;\n\n const isolatedPageAppContainer = appIframeDocument.current?.getElementById(\n ISOLATED_PAGE_APP_CONTAINER_ID\n );\n\n if (!isolatedPageAppContainer) {\n return;\n }\n\n if (nextIsFullscreenModalModeValue) {\n const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();\n\n // We need to directly set inner iFrame container sizes together with DC platform styles\n // as passing this as props and using some effect inside of an iframe\n // results in a slight delay, which looks like a quick layout jump\n isolatedPageAppContainer.setAttribute(\n 'style',\n `\n top: ${top}px;\n left: ${left}px;\n width: ${width}px;\n height: ${height}px;\n position: absolute;\n `\n );\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n isolatedPageAppContainer.setAttribute('style', '');\n handleAppFullscreenTransparentModeExit();\n }\n fullscreenModeRef.current = nextIsFullscreenModalModeValue;\n fullscreenModalModeRef.current = isModal;\n },\n [isIsolationFeatureEnabled, isNonIsolatedApp, isAppMaximizedRef]\n );\n\n useEffect(() => {\n return handleAppFullscreenTransparentModeExit;\n }, []);\n\n useEffect(() => {\n if (isAppMaximized && fullscreenModeRef.current) {\n setIsFullscreenModalMode(false);\n }\n }, [isAppMaximized]);\n\n /*\n This should be the same function as calling react-intersection-observer's ref setter actually triggers re-render.\n * Which in its turn causes infinite re-render loop.\n */\n const setContainerRefs = useCallback(node => {\n containerRef.current = node;\n setInnerContainerRefFn(node);\n }, []);\n\n return (\n <div\n className={classNames('dc-isolated-app', styles.fixedSizeContainer)}\n ref={fixedSizeContainerRef}\n >\n <div\n ref={setContainerRefs}\n onMouseEnter={onInnerContainerMouseEnter}\n onMouseLeave={onInnerContainerMouseLeave}\n data-testid={`${PAGE_NAME}_${props.app.app.name}`}\n className={classNames(\n styles.container,\n isInsideNewMobileApp && styles.newMobileAppContainer,\n isAppMaximized && styles.containerMaximized\n )}\n >\n <DCAppComponent\n {...props}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onIsMaximizedChange={onIsMaximizedChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n />\n </div>\n </div>\n );\n}\n\nDevCenterIsolatedAppComponent.propTypes = {\n app: PropTypes.shape({\n id: PropTypes.number,\n app: PropTypes.shape({\n name: PropTypes.string,\n }),\n }).isRequired,\n currentUser: PropTypes.shape({}).isRequired,\n isIsolationFeatureEnabled: PropTypes.bool,\n onAppContainerClick: PropTypes.func,\n onAppFullscreenTransparentMode: PropTypes.func,\n onAppRemove: PropTypes.func,\n onInnerContainerMouseEnter: PropTypes.func,\n onInnerContainerMouseLeave: PropTypes.func,\n onIsMaximizedChange: PropTypes.func,\n onSettingChange: PropTypes.func,\n onSettingsChange: PropTypes.func,\n setInnerContainerRefFn: PropTypes.func,\n updateCurrentDashboardAppLastAnnotation: PropTypes.func,\n};\n\nDevCenterIsolatedAppComponent.defaultProps = {\n isIsolationFeatureEnabled: false,\n onAppContainerClick: noop,\n onAppFullscreenTransparentMode: noop,\n onAppRemove: noop,\n onInnerContainerMouseEnter: noop,\n onInnerContainerMouseLeave: noop,\n onIsMaximizedChange: noop,\n onSettingChange: noop,\n onSettingsChange: noop,\n setInnerContainerRefFn: noop,\n updateCurrentDashboardAppLastAnnotation: noop,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DevCenterIsolatedAppComponent","_ref","_props$router","_props$app","_props$app2","_props$router2","_props$router2$locati","isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","createDevCenterRouter","router","location","isNonIsolatedApp","isCorvaApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","query","id","isAppMaximizedRef","current","_useState","useState","getUserUnits","_useState2","_slicedToArray","userUnits","setUserUnits","useEffect","unsubscribeFn","subscribeForUserUnitsUpdates","newUserUnits","appContextValue","useContext","AppContext","permissionsContextValue","usePermissionsContext","handleAppFullscreenTransparentModeExit","appId","isModeEnabled","document","body","classList","remove","styles","compensateScroll","setIsFullscreenModalMode","useCallback","nextIsFullscreenModalModeValue","_containerRef$current2","_containerRef$current4","_containerRef$current5","_containerRef$current6","_appIframeDocument$cu","isModal","_containerRef$current","add","containerMaximizedTransparentModal","_containerRef$current3","classesEditMethod","containerMaximizedTransparent","querySelector","concat","APP_IFRAME_ATTRIBUTE","contentWindow","isolatedPageAppContainer","getElementById","ISOLATED_PAGE_APP_CONTAINER_ID","_fixedSizeContainerRe","getBoundingClientRect","top","left","width","height","setAttribute","isBodyScrollVisible","window","innerWidth","clientWidth","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","ref","children","jsx","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","containerMaximized","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","defaultProps","noop","DevCenterIsolatedApp","withRouter"],"mappings":"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"}
1	+ {"version":3,"file":"DevCenterIsolatedApp.js","sources":["../../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\n\nimport { IsolatedPage, APP_IFRAME_ATTRIBUTE } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\n\nimport styles from './DevCenterIsolatedApp.module.css';\n\nimport AppContext from '~/components/DevCenter/AppContext';\nimport { usePermissionsContext } from '~/permissions';\nimport { devcenter as devCenterUtils, getUserUnits, subscribeForUserUnitsUpdates } from '~/utils';\nimport { DevCenterAppContainer } from '~/components/DevCenter';\nimport { getAppVersion } from '~/components/DevCenter/DevCenterAppContainer/utils';\nimport { isInsideNewMobileApp } from '~/utils/mobileDetect';\n\nconst PAGE_NAME = 'DevCenter_AppContainer';\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled,\n onAppFullscreenTransparentMode,\n onIsMaximizedChange,\n onInnerContainerMouseEnter,\n onInnerContainerMouseLeave,\n onAppContainerClick,\n setInnerContainerRefFn,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.router),\n [props.router?.location]\n );\n\n const isNonIsolatedApp =\n (devCenterUtils.isCorvaApp(props?.app?.app) &&\n !devCenterUtils.isIsolationEnabledInPackageManifest(props?.app?.package)) \|\|\n !isIsolationFeatureEnabled;\n\n const DCAppComponent = isNonIsolatedApp ? DevCenterAppContainer : IsolatedPage;\n\n // Key to force iframe recreation when app version changes.\n // This ensures global dependencies are re-initialized for the new version.\n const appKey = props.app?.app?.app_key;\n const appVersion = getAppVersion(props.app);\n const iframeKey = `${appKey}-${appVersion}`;\n\n const appIframeDocument = useRef();\n const containerRef = useRef();\n const fixedSizeContainerRef = useRef();\n const fullscreenModeRef = useRef(false);\n const fullscreenModalModeRef = useRef(false);\n\n const isAppMaximized = devCenterUtils.isAppMaximized(props.router?.location?.query, props.app.id);\n\n // save to ref to not re-create setIsFullscreenModalMode callback on change and reduce the amoount of DC apps re-renders\n const isAppMaximizedRef = useRef(isAppMaximized);\n isAppMaximizedRef.current = isAppMaximized;\n\n const [userUnits, setUserUnits] = useState(getUserUnits());\n\n useEffect(() => {\n const unsubscribeFn = subscribeForUserUnitsUpdates(newUserUnits => setUserUnits(newUserUnits));\n\n return () => unsubscribeFn();\n }, []);\n\n const appContextValue = useContext(AppContext);\n const permissionsContextValue = usePermissionsContext();\n\n /\n What is fullscreen modal mode?\n\n Our apps, are shown in isolated iFrames. Because of it, when an app has some modal\n and opens it - it's opened inside of its iframe, instead of opening at the center of the screen.\n\n To make app modals & other elements be opened at the center of the screen, as if they are not inside of an iframe,\n we use some hacks.\n\n When the app wants to open a fullscreen element, we make its iframe fullscreen, but with transparent background,\n and we set width/height & position of that app iframe to inner app container that is located inside of the iframe.\n So when iframe's fullscreen element is opened, it looks like it's a part of the platform, and the app which shows the element, looks like\n usual, not in fullscreen\n\n So the platform provides this setIsFullscreenModalMode function to DC apps.\n When DC app wants to open a modal that should be opened at the center of the screen - it needs to\n call setIsFullscreenModalMode(true) first. And when it closes the modal - setIsFullscreenModalMode(false)\n\n Two things are important about this\n - all these styles that make this invisible background work should be applied at once\n - enter and exit from the mode, shouldn't trigger even a single re-render, as it may impact\n some elements inside the DC app\n\n There's a second parameter to `setIsFullscreenModalMode`: `isModal`. It should be used when a fullscreen overlay is displayed\n (Modal, for instance) that should cover everything on screen.\n\n What it does - it basically sets the stretched element's z-index to a very high value, so it covers every other UI element in CWF\n /\n\n function handleAppFullscreenTransparentModeExit() {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\n }\n\n const setIsFullscreenModalMode = useCallback(\n function setIsFullscreenModalMode(nextIsFullscreenModalModeValue, isModal = false) {\n // When an app is already in fullscreen mode, no need to use this\n // invisible fullscreen mode to make elements take the whole screen\n\n if (\n !isIsolationFeatureEnabled \|\|\n isNonIsolatedApp \|\|\n (isAppMaximizedRef.current && !fullscreenModeRef.current) \|\|\n fullscreenModeRef.current === nextIsFullscreenModalModeValue\n ) {\n // Adding modal class if modal is opened when non-modal is already open\n if (isModal && fullscreenModalModeRef.current !== isModal) {\n fullscreenModalModeRef.current = isModal;\n containerRef.current?.classList.add(styles.containerMaximizedTransparentModal);\n }\n\n return;\n }\n\n const classesEditMethod = nextIsFullscreenModalModeValue ? 'add' : 'remove';\n\n containerRef.current?.classList[classesEditMethod](styles.containerMaximizedTransparent);\n\n if (isModal \|\| classesEditMethod === 'remove') {\n containerRef.current?.classList[classesEditMethod](\n styles.containerMaximizedTransparentModal\n );\n }\n\n appIframeDocument.current = containerRef.current?.querySelector(\n `[${APP_IFRAME_ATTRIBUTE}]`\n )?.contentWindow?.document;\n\n const isolatedPageAppContainer = appIframeDocument.current?.getElementById(\n ISOLATED_PAGE_APP_CONTAINER_ID\n );\n\n if (!isolatedPageAppContainer) {\n return;\n }\n\n if (nextIsFullscreenModalModeValue) {\n const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();\n\n // We need to directly set inner iFrame container sizes together with DC platform styles\n // as passing this as props and using some effect inside of an iframe\n // results in a slight delay, which looks like a quick layout jump\n isolatedPageAppContainer.setAttribute(\n 'style',\n `\n top: ${top}px;\n left: ${left}px;\n width: ${width}px;\n height: ${height}px;\n position: absolute;\n `\n );\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n isolatedPageAppContainer.setAttribute('style', '');\n handleAppFullscreenTransparentModeExit();\n }\n fullscreenModeRef.current = nextIsFullscreenModalModeValue;\n fullscreenModalModeRef.current = isModal;\n },\n [isIsolationFeatureEnabled, isNonIsolatedApp, isAppMaximizedRef]\n );\n\n useEffect(() => {\n return handleAppFullscreenTransparentModeExit;\n }, []);\n\n useEffect(() => {\n if (isAppMaximized && fullscreenModeRef.current) {\n setIsFullscreenModalMode(false);\n }\n }, [isAppMaximized]);\n\n /*\n This should be the same function as calling react-intersection-observer's ref setter actually triggers re-render.\n * Which in its turn causes infinite re-render loop.\n */\n const setContainerRefs = useCallback(node => {\n containerRef.current = node;\n setInnerContainerRefFn(node);\n }, []);\n\n return (\n <div\n className={classNames('dc-isolated-app', styles.fixedSizeContainer)}\n ref={fixedSizeContainerRef}\n >\n <div\n ref={setContainerRefs}\n onMouseEnter={onInnerContainerMouseEnter}\n onMouseLeave={onInnerContainerMouseLeave}\n data-testid={`${PAGE_NAME}_${props.app.app.name}`}\n className={classNames(\n styles.container,\n isInsideNewMobileApp && styles.newMobileAppContainer,\n isAppMaximized && styles.containerMaximized\n )}\n >\n <DCAppComponent\n key={iframeKey}\n {...props}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onIsMaximizedChange={onIsMaximizedChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n />\n </div>\n </div>\n );\n}\n\nDevCenterIsolatedAppComponent.propTypes = {\n app: PropTypes.shape({\n id: PropTypes.number,\n app: PropTypes.shape({\n name: PropTypes.string,\n }),\n }).isRequired,\n currentUser: PropTypes.shape({}).isRequired,\n isIsolationFeatureEnabled: PropTypes.bool,\n onAppContainerClick: PropTypes.func,\n onAppFullscreenTransparentMode: PropTypes.func,\n onAppRemove: PropTypes.func,\n onInnerContainerMouseEnter: PropTypes.func,\n onInnerContainerMouseLeave: PropTypes.func,\n onIsMaximizedChange: PropTypes.func,\n onSettingChange: PropTypes.func,\n onSettingsChange: PropTypes.func,\n setInnerContainerRefFn: PropTypes.func,\n updateCurrentDashboardAppLastAnnotation: PropTypes.func,\n};\n\nDevCenterIsolatedAppComponent.defaultProps = {\n isIsolationFeatureEnabled: false,\n onAppContainerClick: noop,\n onAppFullscreenTransparentMode: noop,\n onAppRemove: noop,\n onInnerContainerMouseEnter: noop,\n onInnerContainerMouseLeave: noop,\n onIsMaximizedChange: noop,\n onSettingChange: noop,\n onSettingsChange: noop,\n setInnerContainerRefFn: noop,\n updateCurrentDashboardAppLastAnnotation: noop,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DevCenterIsolatedAppComponent","_ref","_props$router","_props$app","_props$app2","_props$app3","_props$app3$app","_props$router2","_props$router2$locati","isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","createDevCenterRouter","router","location","isNonIsolatedApp","isCorvaApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appKey","app_key","appVersion","getAppVersion","iframeKey","concat","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","query","id","isAppMaximizedRef","current","_useState","useState","getUserUnits","_useState2","_slicedToArray","userUnits","setUserUnits","useEffect","unsubscribeFn","subscribeForUserUnitsUpdates","newUserUnits","appContextValue","useContext","AppContext","permissionsContextValue","usePermissionsContext","handleAppFullscreenTransparentModeExit","appId","isModeEnabled","document","body","classList","remove","styles","compensateScroll","setIsFullscreenModalMode","useCallback","nextIsFullscreenModalModeValue","_containerRef$current2","_containerRef$current4","_containerRef$current5","_containerRef$current6","_appIframeDocument$cu","isModal","_containerRef$current","add","containerMaximizedTransparentModal","_containerRef$current3","classesEditMethod","containerMaximizedTransparent","querySelector","APP_IFRAME_ATTRIBUTE","contentWindow","isolatedPageAppContainer","getElementById","ISOLATED_PAGE_APP_CONTAINER_ID","_fixedSizeContainerRe","getBoundingClientRect","top","left","width","height","setAttribute","isBodyScrollVisible","window","innerWidth","clientWidth","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","ref","children","jsx","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","containerMaximized","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","defaultProps","noop","DevCenterIsolatedApp","withRouter"],"mappings":"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"}

package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevCenterIsolatedApp.d.ts","sourceRoot":"","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"names":[],"mappings":"~~AAmQA~~,uCAA8E"}
1	+ {"version":3,"file":"DevCenterIsolatedApp.d.ts","sourceRoot":"","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"names":[],"mappings":"AA2QA,uCAA8E"}

package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/helpers/objectWithoutProperties";import{useMemo as t,useRef as o,useState as i,useEffect as a,useContext as s,useCallback as p}from"react";import l from"classnames";import{withRouter as c}from"react-router";import{noop as u}from"lodash";import d from"prop-types";import{APP_IFRAME_ATTRIBUTE as m,IsolatedPage as f}from"./IsolatedPage.js";import{ISOLATED_PAGE_APP_CONTAINER_ID as v}from"./constants.js";import C from"./DevCenterIsolatedApp.module.css.js";import b from"../AppContext.js";import g from"../../../permissions/PermissionsContext.js";import"../../../permissions/constants/index.js";import"../../../permissions/withPermissionsHOC.js";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";import"../../../clients/jsonApi/index.js";import"../../../permissions/ProvidePermissions.js";import{getUserUnits as j,subscribeForUserUnitsUpdates as A}from"../../../utils/index.js";import"../AppHeader/AppHeader.js";import"../AppSideBar/AppSideBar.js";import"../AppsDataProvider/AppsDataProvider.js";import h from"../DevCenterAppContainer/DevCenterAppContainer.js";import"../NavigationBar/NavigationBar.js";import"../SideBar/SideBar.js";import"../AppSettingsPopover/AppSettingsPopover.js";import"../AppFilterPanelLayout/AppFilterPanelLayout.js";import"../DevCenterRouterContext/DevCenterRouterContext.js";import"../DevCenterRouterContext/UniversalLink/UniversalLink.js";import{jsx as M}from"react/jsx-runtime";import"./DevCenterIsolatedAppPage.js";import{isInsideNewMobileApp as y}from"../../../utils/mobileDetect.js";import{createDevCenterRouter as I,isCorvaApp as x,isIsolationEnabledInPackageManifest as P,isAppMaximized as w}from"../../../utils/devcenter.js";var O=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn"];function S(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function D(n){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?S(Object(t),!0).forEach((function(r){e(n,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):S(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function L(e){var c,u,d,S,L,E=e.isIsolationFeatureEnabled,F=e.onAppFullscreenTransparentMode,T=e.onIsMaximizedChange,R=e.onInnerContainerMouseEnter,k=e.onInnerContainerMouseLeave,z=e.onAppContainerClick,B=e.setInnerContainerRefFn,_=r(e,O),N=t((function(){return I(_.router)}),[null===(c=_.router)||void 0===c?void 0:c.location]),q=x(null==_||null===(u=_.app)||void 0===u?void 0:u.app)&&!P(null==_||null===(d=_.app)||void 0===d?void 0:d.package)||!E,U=q?h:f,W=o(),H=o(),V=o(),G=o(!1),J=o(!1),K=w(null===(S=_.router)||void 0===S||null===(L=S.location)||void 0===L?void 0:L.query,_.app.id),Q=o(K);Q.current=K;var X=i(j()),Y=n(X,2),Z=Y[0],$=Y[1];a((function(){var e=A((function(e){return $(e)}));return function(){return e()}}),[]);var ee=s(b),ne=g();function re(){F({appId:_.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",C.compensateScroll)}var te=p((function(e){var n,r,t,o,i,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!E||q||Q.current&&!G.current||G.current===e){var s;a&&J.current!==a&&(J.current=a,null===(s=H.current)||void 0===s||s.classList.add(C.containerMaximizedTransparentModal))}else{var p,l=e?"add":"remove";if(null===(n=H.current)||void 0===n||n.classList[l](C.containerMaximizedTransparent),a||"remove"===l)null===(p=H.current)||void 0===p||p.classList[l](C.containerMaximizedTransparentModal);W.current=null===(r=H.current)||void 0===r||null===(t=r.querySelector("[".concat(m,"]")))||void 0===t||null===(o=t.contentWindow)||void 0===o?void 0:o.document;var c=null===(i=W.current)||void 0===i?void 0:i.getElementById(v);if(c){if(e){var u=V.current.getBoundingClientRect(),d=u.top,f=u.left,b=u.width,g=u.height;c.setAttribute("style","\n        top: ".concat(d,"px;\n        left: ").concat(f,"px;\n        width: ").concat(b,"px;\n        height: ").concat(g,"px;\n        position: absolute;\n      ")),F({appId:_.app.id,isModeEnabled:!0});var j=window.innerWidth!==document.body.clientWidth;document.body.classList.add("dc-isolated-app__body-overflow",j&&C.compensateScroll)}else c.setAttribute("style",""),re();G.current=e,J.current=a}}}),[E,q,Q]);a((function(){return re}),[]),a((function(){K&&G.current&&te(!1)}),[K]);var oe=p((function(e){H.current=e,B(e)}),[]);return M("div",{className:l("dc-isolated-app",C.fixedSizeContainer),ref:V,children:M("div",{ref:oe,onMouseEnter:R,onMouseLeave:k,"data-testid":"".concat("DevCenter_AppContainer","_").concat(_.app.app.name),className:l(C.container,y&&C.newMobileAppContainer,K&&C.containerMaximized),children:M(U,D(D({},_),{},{appContextValue:ee,devCenterRouter:N,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:z,onIsMaximizedChange:T,permissionsContextValue:ne,setIsFullscreenModalMode:te,userUnits:Z}))})})}L.propTypes={app:d.shape({id:d.number,app:d.shape({name:d.string})}).isRequired,currentUser:d.shape({}).isRequired,isIsolationFeatureEnabled:d.bool,onAppContainerClick:d.func,onAppFullscreenTransparentMode:d.func,onAppRemove:d.func,onInnerContainerMouseEnter:d.func,onInnerContainerMouseLeave:d.func,onIsMaximizedChange:d.func,onSettingChange:d.func,onSettingsChange:d.func,setInnerContainerRefFn:d.func,updateCurrentDashboardAppLastAnnotation:d.func},L.defaultProps={isIsolationFeatureEnabled:!1,onAppContainerClick:u,onAppFullscreenTransparentMode:u,onAppRemove:u,onInnerContainerMouseEnter:u,onInnerContainerMouseLeave:u,onIsMaximizedChange:u,onSettingChange:u,onSettingsChange:u,setInnerContainerRefFn:u,updateCurrentDashboardAppLastAnnotation:u};var E=c(L);export{E as DevCenterIsolatedApp};
+import e from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/helpers/objectWithoutProperties";import{useMemo as t,useRef as o,useState as i,useEffect as a,useContext as p,useCallback as s}from"react";import l from"classnames";import{withRouter as c}from"react-router";import{noop as u}from"lodash";import d from"prop-types";import{APP_IFRAME_ATTRIBUTE as m,IsolatedPage as v}from"./IsolatedPage.js";import{ISOLATED_PAGE_APP_CONTAINER_ID as f}from"./constants.js";import C from"./DevCenterIsolatedApp.module.css.js";import b from"../AppContext.js";import g from"../../../permissions/PermissionsContext.js";import"../../../permissions/constants/index.js";import"../../../permissions/withPermissionsHOC.js";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";import"../../../clients/jsonApi/index.js";import"../../../permissions/ProvidePermissions.js";import{getUserUnits as j,subscribeForUserUnitsUpdates as A}from"../../../utils/index.js";import"../AppHeader/AppHeader.js";import"../AppSideBar/AppSideBar.js";import"../AppsDataProvider/AppsDataProvider.js";import h from"../DevCenterAppContainer/DevCenterAppContainer.js";import"../NavigationBar/NavigationBar.js";import"../SideBar/SideBar.js";import"../AppSettingsPopover/AppSettingsPopover.js";import"../AppFilterPanelLayout/AppFilterPanelLayout.js";import"../DevCenterRouterContext/DevCenterRouterContext.js";import"../DevCenterRouterContext/UniversalLink/UniversalLink.js";import{jsx as M}from"react/jsx-runtime";import"./DevCenterIsolatedAppPage.js";import{getAppVersion as y}from"../DevCenterAppContainer/utils.js";import{isInsideNewMobileApp as I}from"../../../utils/mobileDetect.js";import{createDevCenterRouter as x,isCorvaApp as P,isIsolationEnabledInPackageManifest as w,isAppMaximized as D}from"../../../utils/devcenter.js";var O=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn"];function S(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function L(n){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?S(Object(t),!0).forEach((function(r){e(n,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):S(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function E(e){var c,u,d,S,E,F,T,R=e.isIsolationFeatureEnabled,k=e.onAppFullscreenTransparentMode,z=e.onIsMaximizedChange,B=e.onInnerContainerMouseEnter,_=e.onInnerContainerMouseLeave,N=e.onAppContainerClick,q=e.setInnerContainerRefFn,U=r(e,O),W=t((function(){return x(U.router)}),[null===(c=U.router)||void 0===c?void 0:c.location]),H=P(null==U||null===(u=U.app)||void 0===u?void 0:u.app)&&!w(null==U||null===(d=U.app)||void 0===d?void 0:d.package)||!R,V=H?h:v,G=null===(S=U.app)||void 0===S||null===(E=S.app)||void 0===E?void 0:E.app_key,J=y(U.app),K="".concat(G,"-").concat(J),Q=o(),X=o(),Y=o(),Z=o(!1),$=o(!1),ee=D(null===(F=U.router)||void 0===F||null===(T=F.location)||void 0===T?void 0:T.query,U.app.id),ne=o(ee);ne.current=ee;var re=i(j()),te=n(re,2),oe=te[0],ie=te[1];a((function(){var e=A((function(e){return ie(e)}));return function(){return e()}}),[]);var ae=p(b),pe=g();function se(){k({appId:U.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",C.compensateScroll)}var le=s((function(e){var n,r,t,o,i,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!R||H||ne.current&&!Z.current||Z.current===e){var p;a&&$.current!==a&&($.current=a,null===(p=X.current)||void 0===p||p.classList.add(C.containerMaximizedTransparentModal))}else{var s,l=e?"add":"remove";if(null===(n=X.current)||void 0===n||n.classList[l](C.containerMaximizedTransparent),a||"remove"===l)null===(s=X.current)||void 0===s||s.classList[l](C.containerMaximizedTransparentModal);Q.current=null===(r=X.current)||void 0===r||null===(t=r.querySelector("[".concat(m,"]")))||void 0===t||null===(o=t.contentWindow)||void 0===o?void 0:o.document;var c=null===(i=Q.current)||void 0===i?void 0:i.getElementById(f);if(c){if(e){var u=Y.current.getBoundingClientRect(),d=u.top,v=u.left,b=u.width,g=u.height;c.setAttribute("style","\n        top: ".concat(d,"px;\n        left: ").concat(v,"px;\n        width: ").concat(b,"px;\n        height: ").concat(g,"px;\n        position: absolute;\n      ")),k({appId:U.app.id,isModeEnabled:!0});var j=window.innerWidth!==document.body.clientWidth;document.body.classList.add("dc-isolated-app__body-overflow",j&&C.compensateScroll)}else c.setAttribute("style",""),se();Z.current=e,$.current=a}}}),[R,H,ne]);a((function(){return se}),[]),a((function(){ee&&Z.current&&le(!1)}),[ee]);var ce=s((function(e){X.current=e,q(e)}),[]);return M("div",{className:l("dc-isolated-app",C.fixedSizeContainer),ref:Y,children:M("div",{ref:ce,onMouseEnter:B,onMouseLeave:_,"data-testid":"".concat("DevCenter_AppContainer","_").concat(U.app.app.name),className:l(C.container,I&&C.newMobileAppContainer,ee&&C.containerMaximized),children:M(V,L(L({},U),{},{appContextValue:ae,devCenterRouter:W,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:N,onIsMaximizedChange:z,permissionsContextValue:pe,setIsFullscreenModalMode:le,userUnits:oe}),K)})})}E.propTypes={app:d.shape({id:d.number,app:d.shape({name:d.string})}).isRequired,currentUser:d.shape({}).isRequired,isIsolationFeatureEnabled:d.bool,onAppContainerClick:d.func,onAppFullscreenTransparentMode:d.func,onAppRemove:d.func,onInnerContainerMouseEnter:d.func,onInnerContainerMouseLeave:d.func,onIsMaximizedChange:d.func,onSettingChange:d.func,onSettingsChange:d.func,setInnerContainerRefFn:d.func,updateCurrentDashboardAppLastAnnotation:d.func},E.defaultProps={isIsolationFeatureEnabled:!1,onAppContainerClick:u,onAppFullscreenTransparentMode:u,onAppRemove:u,onInnerContainerMouseEnter:u,onInnerContainerMouseLeave:u,onIsMaximizedChange:u,onSettingChange:u,onSettingsChange:u,setInnerContainerRefFn:u,updateCurrentDashboardAppLastAnnotation:u};var F=c(E);export{F as DevCenterIsolatedApp};
 //# sourceMappingURL=DevCenterIsolatedApp.js.map

package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevCenterIsolatedApp.js","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\n\nimport { IsolatedPage, APP_IFRAME_ATTRIBUTE } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\n\nimport styles from './DevCenterIsolatedApp.module.css';\n\nimport AppContext from '~/components/DevCenter/AppContext';\nimport { usePermissionsContext } from '~/permissions';\nimport { devcenter as devCenterUtils, getUserUnits, subscribeForUserUnitsUpdates } from '~/utils';\nimport { DevCenterAppContainer } from '~/components/DevCenter';\nimport { isInsideNewMobileApp } from '~/utils/mobileDetect';\n\nconst PAGE_NAME = 'DevCenter_AppContainer';\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled,\n onAppFullscreenTransparentMode,\n onIsMaximizedChange,\n onInnerContainerMouseEnter,\n onInnerContainerMouseLeave,\n onAppContainerClick,\n setInnerContainerRefFn,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.router),\n [props.router?.location]\n );\n\n const isNonIsolatedApp =\n (devCenterUtils.isCorvaApp(props?.app?.app) &&\n !devCenterUtils.isIsolationEnabledInPackageManifest(props?.app?.package)) \|\|\n !isIsolationFeatureEnabled;\n\n const DCAppComponent = isNonIsolatedApp ? DevCenterAppContainer : IsolatedPage;\n\n const appIframeDocument = useRef();\n const containerRef = useRef();\n const fixedSizeContainerRef = useRef();\n const fullscreenModeRef = useRef(false);\n const fullscreenModalModeRef = useRef(false);\n\n const isAppMaximized = devCenterUtils.isAppMaximized(props.router?.location?.query, props.app.id);\n\n // save to ref to not re-create setIsFullscreenModalMode callback on change and reduce the amoount of DC apps re-renders\n const isAppMaximizedRef = useRef(isAppMaximized);\n isAppMaximizedRef.current = isAppMaximized;\n\n const [userUnits, setUserUnits] = useState(getUserUnits());\n\n useEffect(() => {\n const unsubscribeFn = subscribeForUserUnitsUpdates(newUserUnits => setUserUnits(newUserUnits));\n\n return () => unsubscribeFn();\n }, []);\n\n const appContextValue = useContext(AppContext);\n const permissionsContextValue = usePermissionsContext();\n\n /\n What is fullscreen modal mode?\n\n Our apps, are shown in isolated iFrames. Because of it, when an app has some modal\n and opens it - it's opened inside of its iframe, instead of opening at the center of the screen.\n\n To make app modals & other elements be opened at the center of the screen, as if they are not inside of an iframe,\n we use some hacks.\n\n When the app wants to open a fullscreen element, we make its iframe fullscreen, but with transparent background,\n and we set width/height & position of that app iframe to inner app container that is located inside of the iframe.\n So when iframe's fullscreen element is opened, it looks like it's a part of the platform, and the app which shows the element, looks like\n usual, not in fullscreen\n\n So the platform provides this setIsFullscreenModalMode function to DC apps.\n When DC app wants to open a modal that should be opened at the center of the screen - it needs to\n call setIsFullscreenModalMode(true) first. And when it closes the modal - setIsFullscreenModalMode(false)\n\n Two things are important about this\n - all these styles that make this invisible background work should be applied at once\n - enter and exit from the mode, shouldn't trigger even a single re-render, as it may impact\n some elements inside the DC app\n\n There's a second parameter to `setIsFullscreenModalMode`: `isModal`. It should be used when a fullscreen overlay is displayed\n (Modal, for instance) that should cover everything on screen.\n\n What it does - it basically sets the stretched element's z-index to a very high value, so it covers every other UI element in CWF\n /\n\n function handleAppFullscreenTransparentModeExit() {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\n }\n\n const setIsFullscreenModalMode = useCallback(\n function setIsFullscreenModalMode(nextIsFullscreenModalModeValue, isModal = false) {\n // When an app is already in fullscreen mode, no need to use this\n // invisible fullscreen mode to make elements take the whole screen\n\n if (\n !isIsolationFeatureEnabled \|\|\n isNonIsolatedApp \|\|\n (isAppMaximizedRef.current && !fullscreenModeRef.current) \|\|\n fullscreenModeRef.current === nextIsFullscreenModalModeValue\n ) {\n // Adding modal class if modal is opened when non-modal is already open\n if (isModal && fullscreenModalModeRef.current !== isModal) {\n fullscreenModalModeRef.current = isModal;\n containerRef.current?.classList.add(styles.containerMaximizedTransparentModal);\n }\n\n return;\n }\n\n const classesEditMethod = nextIsFullscreenModalModeValue ? 'add' : 'remove';\n\n containerRef.current?.classList[classesEditMethod](styles.containerMaximizedTransparent);\n\n if (isModal \|\| classesEditMethod === 'remove') {\n containerRef.current?.classList[classesEditMethod](\n styles.containerMaximizedTransparentModal\n );\n }\n\n appIframeDocument.current = containerRef.current?.querySelector(\n `[${APP_IFRAME_ATTRIBUTE}]`\n )?.contentWindow?.document;\n\n const isolatedPageAppContainer = appIframeDocument.current?.getElementById(\n ISOLATED_PAGE_APP_CONTAINER_ID\n );\n\n if (!isolatedPageAppContainer) {\n return;\n }\n\n if (nextIsFullscreenModalModeValue) {\n const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();\n\n // We need to directly set inner iFrame container sizes together with DC platform styles\n // as passing this as props and using some effect inside of an iframe\n // results in a slight delay, which looks like a quick layout jump\n isolatedPageAppContainer.setAttribute(\n 'style',\n `\n top: ${top}px;\n left: ${left}px;\n width: ${width}px;\n height: ${height}px;\n position: absolute;\n `\n );\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n isolatedPageAppContainer.setAttribute('style', '');\n handleAppFullscreenTransparentModeExit();\n }\n fullscreenModeRef.current = nextIsFullscreenModalModeValue;\n fullscreenModalModeRef.current = isModal;\n },\n [isIsolationFeatureEnabled, isNonIsolatedApp, isAppMaximizedRef]\n );\n\n useEffect(() => {\n return handleAppFullscreenTransparentModeExit;\n }, []);\n\n useEffect(() => {\n if (isAppMaximized && fullscreenModeRef.current) {\n setIsFullscreenModalMode(false);\n }\n }, [isAppMaximized]);\n\n /*\n This should be the same function as calling react-intersection-observer's ref setter actually triggers re-render.\n * Which in its turn causes infinite re-render loop.\n */\n const setContainerRefs = useCallback(node => {\n containerRef.current = node;\n setInnerContainerRefFn(node);\n }, []);\n\n return (\n <div\n className={classNames('dc-isolated-app', styles.fixedSizeContainer)}\n ref={fixedSizeContainerRef}\n >\n <div\n ref={setContainerRefs}\n onMouseEnter={onInnerContainerMouseEnter}\n onMouseLeave={onInnerContainerMouseLeave}\n data-testid={`${PAGE_NAME}_${props.app.app.name}`}\n className={classNames(\n styles.container,\n isInsideNewMobileApp && styles.newMobileAppContainer,\n isAppMaximized && styles.containerMaximized\n )}\n >\n <DCAppComponent\n {...props}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onIsMaximizedChange={onIsMaximizedChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n />\n </div>\n </div>\n );\n}\n\nDevCenterIsolatedAppComponent.propTypes = {\n app: PropTypes.shape({\n id: PropTypes.number,\n app: PropTypes.shape({\n name: PropTypes.string,\n }),\n }).isRequired,\n currentUser: PropTypes.shape({}).isRequired,\n isIsolationFeatureEnabled: PropTypes.bool,\n onAppContainerClick: PropTypes.func,\n onAppFullscreenTransparentMode: PropTypes.func,\n onAppRemove: PropTypes.func,\n onInnerContainerMouseEnter: PropTypes.func,\n onInnerContainerMouseLeave: PropTypes.func,\n onIsMaximizedChange: PropTypes.func,\n onSettingChange: PropTypes.func,\n onSettingsChange: PropTypes.func,\n setInnerContainerRefFn: PropTypes.func,\n updateCurrentDashboardAppLastAnnotation: PropTypes.func,\n};\n\nDevCenterIsolatedAppComponent.defaultProps = {\n isIsolationFeatureEnabled: false,\n onAppContainerClick: noop,\n onAppFullscreenTransparentMode: noop,\n onAppRemove: noop,\n onInnerContainerMouseEnter: noop,\n onInnerContainerMouseLeave: noop,\n onIsMaximizedChange: noop,\n onSettingChange: noop,\n onSettingsChange: noop,\n setInnerContainerRefFn: noop,\n updateCurrentDashboardAppLastAnnotation: noop,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DevCenterIsolatedAppComponent","_ref","_props$router","_props$app","_props$app2","_props$router2","_props$router2$locati","isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","router","location","isNonIsolatedApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","query","id","isAppMaximizedRef","current","_useState","useState","getUserUnits","_useState2","_slicedToArray","userUnits","setUserUnits","useEffect","unsubscribeFn","subscribeForUserUnitsUpdates","newUserUnits","appContextValue","useContext","AppContext","permissionsContextValue","usePermissionsContext","handleAppFullscreenTransparentModeExit","appId","isModeEnabled","document","body","classList","remove","styles","compensateScroll","setIsFullscreenModalMode","useCallback","nextIsFullscreenModalModeValue","_containerRef$current2","_containerRef$current4","_containerRef$current5","_containerRef$current6","_appIframeDocument$cu","isModal","_containerRef$current","add","containerMaximizedTransparentModal","_containerRef$current3","classesEditMethod","containerMaximizedTransparent","querySelector","concat","APP_IFRAME_ATTRIBUTE","contentWindow","isolatedPageAppContainer","getElementById","ISOLATED_PAGE_APP_CONTAINER_ID","_fixedSizeContainerRe","getBoundingClientRect","top","left","width","height","setAttribute","isBodyScrollVisible","window","innerWidth","clientWidth","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","ref","children","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","containerMaximized","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","defaultProps","noop","DevCenterIsolatedApp","withRouter"],"mappings":"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"}
1	+ {"version":3,"file":"DevCenterIsolatedApp.js","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\n\nimport { IsolatedPage, APP_IFRAME_ATTRIBUTE } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\n\nimport styles from './DevCenterIsolatedApp.module.css';\n\nimport AppContext from '~/components/DevCenter/AppContext';\nimport { usePermissionsContext } from '~/permissions';\nimport { devcenter as devCenterUtils, getUserUnits, subscribeForUserUnitsUpdates } from '~/utils';\nimport { DevCenterAppContainer } from '~/components/DevCenter';\nimport { getAppVersion } from '~/components/DevCenter/DevCenterAppContainer/utils';\nimport { isInsideNewMobileApp } from '~/utils/mobileDetect';\n\nconst PAGE_NAME = 'DevCenter_AppContainer';\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled,\n onAppFullscreenTransparentMode,\n onIsMaximizedChange,\n onInnerContainerMouseEnter,\n onInnerContainerMouseLeave,\n onAppContainerClick,\n setInnerContainerRefFn,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.router),\n [props.router?.location]\n );\n\n const isNonIsolatedApp =\n (devCenterUtils.isCorvaApp(props?.app?.app) &&\n !devCenterUtils.isIsolationEnabledInPackageManifest(props?.app?.package)) \|\|\n !isIsolationFeatureEnabled;\n\n const DCAppComponent = isNonIsolatedApp ? DevCenterAppContainer : IsolatedPage;\n\n // Key to force iframe recreation when app version changes.\n // This ensures global dependencies are re-initialized for the new version.\n const appKey = props.app?.app?.app_key;\n const appVersion = getAppVersion(props.app);\n const iframeKey = `${appKey}-${appVersion}`;\n\n const appIframeDocument = useRef();\n const containerRef = useRef();\n const fixedSizeContainerRef = useRef();\n const fullscreenModeRef = useRef(false);\n const fullscreenModalModeRef = useRef(false);\n\n const isAppMaximized = devCenterUtils.isAppMaximized(props.router?.location?.query, props.app.id);\n\n // save to ref to not re-create setIsFullscreenModalMode callback on change and reduce the amoount of DC apps re-renders\n const isAppMaximizedRef = useRef(isAppMaximized);\n isAppMaximizedRef.current = isAppMaximized;\n\n const [userUnits, setUserUnits] = useState(getUserUnits());\n\n useEffect(() => {\n const unsubscribeFn = subscribeForUserUnitsUpdates(newUserUnits => setUserUnits(newUserUnits));\n\n return () => unsubscribeFn();\n }, []);\n\n const appContextValue = useContext(AppContext);\n const permissionsContextValue = usePermissionsContext();\n\n /\n What is fullscreen modal mode?\n\n Our apps, are shown in isolated iFrames. Because of it, when an app has some modal\n and opens it - it's opened inside of its iframe, instead of opening at the center of the screen.\n\n To make app modals & other elements be opened at the center of the screen, as if they are not inside of an iframe,\n we use some hacks.\n\n When the app wants to open a fullscreen element, we make its iframe fullscreen, but with transparent background,\n and we set width/height & position of that app iframe to inner app container that is located inside of the iframe.\n So when iframe's fullscreen element is opened, it looks like it's a part of the platform, and the app which shows the element, looks like\n usual, not in fullscreen\n\n So the platform provides this setIsFullscreenModalMode function to DC apps.\n When DC app wants to open a modal that should be opened at the center of the screen - it needs to\n call setIsFullscreenModalMode(true) first. And when it closes the modal - setIsFullscreenModalMode(false)\n\n Two things are important about this\n - all these styles that make this invisible background work should be applied at once\n - enter and exit from the mode, shouldn't trigger even a single re-render, as it may impact\n some elements inside the DC app\n\n There's a second parameter to `setIsFullscreenModalMode`: `isModal`. It should be used when a fullscreen overlay is displayed\n (Modal, for instance) that should cover everything on screen.\n\n What it does - it basically sets the stretched element's z-index to a very high value, so it covers every other UI element in CWF\n /\n\n function handleAppFullscreenTransparentModeExit() {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\n }\n\n const setIsFullscreenModalMode = useCallback(\n function setIsFullscreenModalMode(nextIsFullscreenModalModeValue, isModal = false) {\n // When an app is already in fullscreen mode, no need to use this\n // invisible fullscreen mode to make elements take the whole screen\n\n if (\n !isIsolationFeatureEnabled \|\|\n isNonIsolatedApp \|\|\n (isAppMaximizedRef.current && !fullscreenModeRef.current) \|\|\n fullscreenModeRef.current === nextIsFullscreenModalModeValue\n ) {\n // Adding modal class if modal is opened when non-modal is already open\n if (isModal && fullscreenModalModeRef.current !== isModal) {\n fullscreenModalModeRef.current = isModal;\n containerRef.current?.classList.add(styles.containerMaximizedTransparentModal);\n }\n\n return;\n }\n\n const classesEditMethod = nextIsFullscreenModalModeValue ? 'add' : 'remove';\n\n containerRef.current?.classList[classesEditMethod](styles.containerMaximizedTransparent);\n\n if (isModal \|\| classesEditMethod === 'remove') {\n containerRef.current?.classList[classesEditMethod](\n styles.containerMaximizedTransparentModal\n );\n }\n\n appIframeDocument.current = containerRef.current?.querySelector(\n `[${APP_IFRAME_ATTRIBUTE}]`\n )?.contentWindow?.document;\n\n const isolatedPageAppContainer = appIframeDocument.current?.getElementById(\n ISOLATED_PAGE_APP_CONTAINER_ID\n );\n\n if (!isolatedPageAppContainer) {\n return;\n }\n\n if (nextIsFullscreenModalModeValue) {\n const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();\n\n // We need to directly set inner iFrame container sizes together with DC platform styles\n // as passing this as props and using some effect inside of an iframe\n // results in a slight delay, which looks like a quick layout jump\n isolatedPageAppContainer.setAttribute(\n 'style',\n `\n top: ${top}px;\n left: ${left}px;\n width: ${width}px;\n height: ${height}px;\n position: absolute;\n `\n );\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n isolatedPageAppContainer.setAttribute('style', '');\n handleAppFullscreenTransparentModeExit();\n }\n fullscreenModeRef.current = nextIsFullscreenModalModeValue;\n fullscreenModalModeRef.current = isModal;\n },\n [isIsolationFeatureEnabled, isNonIsolatedApp, isAppMaximizedRef]\n );\n\n useEffect(() => {\n return handleAppFullscreenTransparentModeExit;\n }, []);\n\n useEffect(() => {\n if (isAppMaximized && fullscreenModeRef.current) {\n setIsFullscreenModalMode(false);\n }\n }, [isAppMaximized]);\n\n /*\n This should be the same function as calling react-intersection-observer's ref setter actually triggers re-render.\n * Which in its turn causes infinite re-render loop.\n */\n const setContainerRefs = useCallback(node => {\n containerRef.current = node;\n setInnerContainerRefFn(node);\n }, []);\n\n return (\n <div\n className={classNames('dc-isolated-app', styles.fixedSizeContainer)}\n ref={fixedSizeContainerRef}\n >\n <div\n ref={setContainerRefs}\n onMouseEnter={onInnerContainerMouseEnter}\n onMouseLeave={onInnerContainerMouseLeave}\n data-testid={`${PAGE_NAME}_${props.app.app.name}`}\n className={classNames(\n styles.container,\n isInsideNewMobileApp && styles.newMobileAppContainer,\n isAppMaximized && styles.containerMaximized\n )}\n >\n <DCAppComponent\n key={iframeKey}\n {...props}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onIsMaximizedChange={onIsMaximizedChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n />\n </div>\n </div>\n );\n}\n\nDevCenterIsolatedAppComponent.propTypes = {\n app: PropTypes.shape({\n id: PropTypes.number,\n app: PropTypes.shape({\n name: PropTypes.string,\n }),\n }).isRequired,\n currentUser: PropTypes.shape({}).isRequired,\n isIsolationFeatureEnabled: PropTypes.bool,\n onAppContainerClick: PropTypes.func,\n onAppFullscreenTransparentMode: PropTypes.func,\n onAppRemove: PropTypes.func,\n onInnerContainerMouseEnter: PropTypes.func,\n onInnerContainerMouseLeave: PropTypes.func,\n onIsMaximizedChange: PropTypes.func,\n onSettingChange: PropTypes.func,\n onSettingsChange: PropTypes.func,\n setInnerContainerRefFn: PropTypes.func,\n updateCurrentDashboardAppLastAnnotation: PropTypes.func,\n};\n\nDevCenterIsolatedAppComponent.defaultProps = {\n isIsolationFeatureEnabled: false,\n onAppContainerClick: noop,\n onAppFullscreenTransparentMode: noop,\n onAppRemove: noop,\n onInnerContainerMouseEnter: noop,\n onInnerContainerMouseLeave: noop,\n onIsMaximizedChange: noop,\n onSettingChange: noop,\n onSettingsChange: noop,\n setInnerContainerRefFn: noop,\n updateCurrentDashboardAppLastAnnotation: noop,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DevCenterIsolatedAppComponent","_ref","_props$router","_props$app","_props$app2","_props$app3","_props$app3$app","_props$router2","_props$router2$locati","isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","router","location","isNonIsolatedApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appKey","app_key","appVersion","getAppVersion","iframeKey","concat","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","query","id","isAppMaximizedRef","current","_useState","useState","getUserUnits","_useState2","_slicedToArray","userUnits","setUserUnits","useEffect","unsubscribeFn","subscribeForUserUnitsUpdates","newUserUnits","appContextValue","useContext","AppContext","permissionsContextValue","usePermissionsContext","handleAppFullscreenTransparentModeExit","appId","isModeEnabled","document","body","classList","remove","styles","compensateScroll","setIsFullscreenModalMode","useCallback","nextIsFullscreenModalModeValue","_containerRef$current2","_containerRef$current4","_containerRef$current5","_containerRef$current6","_appIframeDocument$cu","isModal","_containerRef$current","add","containerMaximizedTransparentModal","_containerRef$current3","classesEditMethod","containerMaximizedTransparent","querySelector","APP_IFRAME_ATTRIBUTE","contentWindow","isolatedPageAppContainer","getElementById","ISOLATED_PAGE_APP_CONTAINER_ID","_fixedSizeContainerRe","getBoundingClientRect","top","left","width","height","setAttribute","isBodyScrollVisible","window","innerWidth","clientWidth","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","ref","children","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","containerMaximized","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","defaultProps","noop","DevCenterIsolatedApp","withRouter"],"mappings":"omFAoBA,SAASA,EASNC,GAAA,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EARDC,IAAAA,0BACAC,IAAAA,+BACAC,IAAAA,oBACAC,IAAAA,2BACAC,IAAAA,2BACAC,IAAAA,oBACAC,IAAAA,uBACGC,EAAKC,EAAAhB,EAAAiB,GAEFC,EAAkBC,GACtB,WAAA,OAAMC,EAAqCL,EAAMM,OACjD,GAAA,SAAApB,EAACc,EAAMM,2BAANpB,EAAcqB,WAGXC,EACHH,EAA0BL,SAAA,QAAKb,EAALa,EAAOS,WAAP,IAAAtB,OAAK,EAALA,EAAYsB,OACpCJ,EAAmDL,iBAAAA,EAAAA,EAAOS,sBAAPT,EAAAZ,EAAYsB,WACjEjB,EAEGkB,EAAiBH,EAAmBI,EAAwBC,EAI5DC,UAASd,EAAAA,EAAMS,kBAAN,UAAApB,EAAWoB,WAAX,IAAAnB,SAAAA,EAAgByB,QACzBC,EAAaC,EAAcjB,EAAMS,KACjCS,EAAS,GAAAC,OAAML,EAAM,KAAAK,OAAIH,GAEzBI,EAAoBC,IACpBC,EAAeD,IACfE,EAAwBF,IACxBG,EAAoBH,GAAO,GAC3BI,EAAyBJ,GAAO,GAEhCK,GAAiBrB,EAA0C,QAAZL,EAAAA,EAAMM,cAAM,IAAAf,GAAU,QAAVC,EAAZD,EAAcgB,gBAAQ,IAAAf,OAAV,EAAZA,EAAwBmC,MAAO3B,EAAMS,IAAImB,IAGxFC,GAAoBR,EAAOK,IACjCG,GAAkBC,QAAUJ,GAE5B,IAAAK,GAAkCC,EAASC,KAAeC,GAAAC,EAAAJ,GAAA,GAAnDK,GAASF,GAAA,GAAEG,GAAYH,GAAA,GAE9BI,GAAU,WACR,IAAMC,EAAgBC,GAA6B,SAAAC,GAAY,OAAIJ,GAAaI,MAEhF,OAAO,WAAA,OAAMF,GAAe,CAC7B,GAAE,IAEH,IAAMG,GAAkBC,EAAWC,GAC7BC,GAA0BC,IA+BhC,SAASC,KACPrD,EAA+B,CAAEsD,MAAOhD,EAAMS,IAAImB,GAAIqB,eAAe,IACrEC,SAASC,KAAKC,UAAUC,OAAO,iCAAkCC,EAAOC,iBAC1E,CAEA,IAAMC,GAA2BC,GAC/B,SAAkCC,GAAiD,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAjBC,0DAIhE,IACGvE,GACDe,GACCqB,GAAkBC,UAAYN,EAAkBM,SACjDN,EAAkBM,UAAY4B,EAJhC,CAO6D,IAAAO,EAAvDD,GAAWvC,EAAuBK,UAAYkC,IAChDvC,EAAuBK,QAAUkC,EACb,QAApBC,EAAA3C,EAAaQ,eAAO,IAAAmC,GAApBA,EAAsBb,UAAUc,IAAIZ,EAAOa,oCAI/C,KAbA,CAeA,IAI+CC,EAJzCC,EAAoBX,EAAiC,MAAQ,SAInE,GAFoB,QAApBC,EAAArC,EAAaQ,eAAO,IAAA6B,GAApBA,EAAsBP,UAAUiB,GAAmBf,EAAOgB,+BAEtDN,GAAiC,WAAtBK,EACO,QAApBD,EAAA9C,EAAaQ,eAAO,IAAAsC,GAApBA,EAAsBhB,UAAUiB,GAC9Bf,EAAOa,oCAIX/C,EAAkBU,QAAU,QAAH8B,EAAGtC,EAAaQ,eAAb,IAAA8B,GAE3B,QAF2BC,EAAAD,EAAsBW,cAAa,IAAApD,OACzDqD,EACL,aAAA,IAAAX,GAAe,QAAfC,EAF2BD,EAEzBY,qBAAa,IAAAX,OAFY,EAAAA,EAEVZ,SAElB,IAAMwB,UAA2BtD,EAAAA,EAAkBU,4BAAlBiC,EAA2BY,eAC1DC,GAGF,GAAKF,EAAL,CAIA,GAAIhB,EAAgC,CAClC,IAAAmB,EAAqCtD,EAAsBO,QAAQgD,wBAA3DC,IAAAA,IAAKC,IAAAA,KAAMC,IAAAA,MAAOC,IAAAA,OAK1BR,EAAyBS,aACvB,QAEKJ,kBAAAA,OAAAA,EACCC,uBAAAA,OAAAA,EACCC,wBAAAA,OAAAA,EACCC,yBAAAA,OAAAA,EAGT,6CACDxF,EAA+B,CAAEsD,MAAOhD,EAAMS,IAAImB,GAAIqB,eAAe,IACrE,IAAMmC,EAAsBC,OAAOC,aAAepC,SAASC,KAAKoC,YAChErC,SAASC,KAAKC,UAAUc,IACtB,iCACAkB,GAAuB9B,EAAOC,iBAElC,MACEmB,EAAyBS,aAAa,QAAS,IAC/CpC,KAEFvB,EAAkBM,QAAU4B,EAC5BjC,EAAuBK,QAAUkC,CA7BjC,CAtBA,CAoDD,GACD,CAACvE,EAA2Be,EAAkBqB,KAGhDS,GAAU,WACR,OAAOS,EACR,GAAE,IAEHT,GAAU,WACJZ,IAAkBF,EAAkBM,SACtC0B,IAAyB,EAE7B,GAAG,CAAC9B,KAMJ,IAAM8D,GAAmB/B,GAAY,SAAAgC,GACnCnE,EAAaQ,QAAU2D,EACvB1F,EAAuB0F,EACxB,GAAE,IAEH,OACEC,EAAA,MAAA,CACEC,UAAWC,EAAW,kBAAmBtC,EAAOuC,oBAChDC,IAAKvE,EAAsBwE,SAE3BL,EAAA,MAAA,CACEI,IAAKN,GACLQ,aAAcpG,EACdqG,aAAcpG,EACd,cAAgBqG,GAAAA,OA7LN,qCA6LmBlG,EAAMS,IAAIA,IAAI0F,MAC3CR,UAAWC,EACTtC,EAAO8C,UACPC,GAAwB/C,EAAOgD,sBAC/B5E,IAAkB4B,EAAOiD,oBACzBR,SAEFL,EAAC/E,EAAc6F,EAAAA,EAAA,GAETxG,GAAK,GAAA,CACT0C,gBAAiBA,GACjBvC,gBAAiBA,EACjBsG,4BAA6BpB,OAAOqB,OAAOC,IAAI,uBAC/CC,2BAA4BvB,OAAOqB,OAAOC,IAAI,kBAC9C7G,oBAAqBA,EACrBH,oBAAqBA,EACrBkD,wBAAyBA,GACzBW,yBAA0BA,GAC1BpB,UAAWA,KAVNlB,MAef,CAEAlC,EAA8B6H,UAAY,CACxCpG,IAAKqG,EAAUC,MAAM,CACnBnF,GAAIkF,EAAUE,OACdvG,IAAKqG,EAAUC,MAAM,CACnBZ,KAAMW,EAAUG,WAEjBC,WACHC,YAAaL,EAAUC,MAAM,CAAA,GAAIG,WACjCzH,0BAA2BqH,EAAUM,KACrCtH,oBAAqBgH,EAAUO,KAC/B3H,+BAAgCoH,EAAUO,KAC1CC,YAAaR,EAAUO,KACvBzH,2BAA4BkH,EAAUO,KACtCxH,2BAA4BiH,EAAUO,KACtC1H,oBAAqBmH,EAAUO,KAC/BE,gBAAiBT,EAAUO,KAC3BG,iBAAkBV,EAAUO,KAC5BtH,uBAAwB+G,EAAUO,KAClCI,wCAAyCX,EAAUO,MAGrDrI,EAA8B0I,aAAe,CAC3CjI,2BAA2B,EAC3BK,oBAAqB6H,EACrBjI,+BAAgCiI,EAChCL,YAAaK,EACb/H,2BAA4B+H,EAC5B9H,2BAA4B8H,EAC5BhI,oBAAqBgI,EACrBJ,gBAAiBI,EACjBH,iBAAkBG,EAClB5H,uBAAwB4H,EACxBF,wCAAyCE,OAG9BC,EAAuBC,EAAW7I"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@corva/ui",
-  "version": "3.41.0-0",
+  "version": "3.41.0-1",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Shared components/utils for Corva ui projects",
   "keywords": [