@corva/ui 3.81.0-2 → 3.81.0-rc.0
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.
- package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js +1 -1
- package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js.map +1 -1
- package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.js +2 -0
- package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.js.map +1 -0
- package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.d.ts.map +1 -1
- package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js +1 -1
- package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js.map +1 -1
- package/components/DevCenter/IsolatedDevCenterAppContainer/__tests__/snapRectToDevicePixels.test.d.ts +2 -0
- package/components/DevCenter/IsolatedDevCenterAppContainer/__tests__/snapRectToDevicePixels.test.d.ts.map +1 -0
- package/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.d.ts +9 -0
- package/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.d.ts.map +1 -0
- package/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.js +2 -0
- package/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.js.map +1 -0
- package/components/Drillstring/BHAComponentDetail/constants.d.ts +2 -2
- package/mcp-server/server.mjs +3 -3
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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"),
|
|
1
|
+
"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"),i=require("react-dom"),o=require("classnames"),a=require("react-router-dom"),s=require("lodash"),u=require("query-string"),p=require("prop-types"),l=require("./IsolatedPage.js"),d=require("./constants.js"),c=require("./useFullscreenModes.js"),f=require("./utils/snapRectToDevicePixels.js"),v=require("./DevCenterIsolatedApp.module.scss.js"),C=require("../AppContext.js"),m=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("../../../utils/shareRecentRequest.js"),require("../../../permissions/ProvidePermissions.js");var b=require("../../../utils/index.js");require("../AppHeader/AppHeader.js"),require("../AppSideBar/AppSideBar.js"),require("../AppsDataProvider/effects/utils.js"),require("@babel/runtime/helpers/toConsumableArray");var A=require("../../../utils/devcenter.js"),g=require("react/jsx-runtime"),h=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"),require("./DevCenterIsolatedAppPage.js");var j=require("../DevCenterAppContainer/utils.js"),q=require("../../../utils/mobileDetect.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=x(e),I=x(n),M=x(r),R=x(o),w=x(u),S=x(p),P=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","apiRateLimiterConfig","trackApiRateLimiterException"];function E(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(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?E(Object(r),!0).forEach((function(n){y.default(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}var D={};function F(e){var n,r,o,a,u,p,x,y=e.isIsolationFeatureEnabled,S=void 0!==y&&y,E=e.onAppFullscreenTransparentMode,F=void 0===E?s.noop:E,T=e.onIsMaximizedChange,O=void 0===T?s.noop:T,_=e.onInnerContainerMouseEnter,k=void 0===_?s.noop:_,B=e.onInnerContainerMouseLeave,W=void 0===B?s.noop:B,z=e.onAppContainerClick,U=void 0===z?s.noop:z,N=e.setInnerContainerRefFn,H=void 0===N?s.noop:N,V=e.onAppRemove,G=void 0===V?void 0:V,J=e.onSettingChange,K=void 0===J?s.noop:J,Q=e.onSettingsChange,X=void 0===Q?s.noop:Q,Y=e.updateCurrentDashboardAppLastAnnotation,Z=void 0===Y?s.noop:Y,$=e.apiRateLimiterConfig,ee=void 0===$?D:$,ne=e.trackApiRateLimiterException,re=M.default(e,P),te=t.useMemo((function(){return A.createDevCenterRouter(re.history)}),[null===(n=re.history)||void 0===n?void 0:n.location]),ie=A.isCorvaApp(null==re||null===(r=re.app)||void 0===r?void 0:r.app)&&!A.isIsolationEnabledInPackageManifest(null==re||null===(o=re.app)||void 0===o?void 0:o.package)||!S,oe=ie?h:l.IsolatedPage,ae=null===(a=re.app)||void 0===a||null===(u=a.app)||void 0===u?void 0:u.app_key,se=j.getAppVersion(re.app),ue="".concat(ae,"-").concat(se),pe=t.useRef(),le=t.useRef(),de=t.useRef(),ce=t.useRef(!1),fe=t.useRef(!1),ve=A.isAppMaximized(w.default.parse(null===(p=re.history)||void 0===p||null===(x=p.location)||void 0===x?void 0:x.search),re.app.id),Ce=t.useRef(ve);Ce.current=ve;var me=t.useState(b.getUserUnits()),be=I.default(me,2),Ae=be[0],ge=be[1];t.useEffect((function(){var e=b.subscribeForUserUnitsUpdates((function(e){return ge(e)}));return function(){return e()}}),[]);var he=t.useContext(C),je=m.default();function qe(){F({appId:re.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",v.compensateScroll)}var xe=t.useCallback((function(e){var n,r,t,o,a,s=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!S||ie||Ce.current&&!ce.current||ce.current===e){var u;s&&fe.current!==s&&(fe.current=s,null===(u=le.current)||void 0===u||u.classList.add(v.containerMaximizedTransparentModal))}else{var p,c=e?"add":"remove";if(null===(n=le.current)||void 0===n||n.classList[c](v.containerMaximizedTransparent),s||"remove"===c)null===(p=le.current)||void 0===p||p.classList[c](v.containerMaximizedTransparentModal);pe.current=null===(r=le.current)||void 0===r||null===(t=r.querySelector("[".concat(l.APP_IFRAME_ATTRIBUTE,"]")))||void 0===t||null===(o=t.contentWindow)||void 0===o?void 0:o.document;var C=null===(a=pe.current)||void 0===a?void 0:a.getElementById(d.ISOLATED_PAGE_APP_CONTAINER_ID);if(C){if(e){var m=f.snapRectToDevicePixels(de.current.getBoundingClientRect()),b=m.top,A=m.left,g=m.width,h=m.height,j=window.innerWidth!==document.body.clientWidth;i.flushSync((function(){F({appId:re.app.id,isModeEnabled:!0})})),C.setAttribute("style","\n top: ".concat(b,"px;\n left: ").concat(A,"px;\n width: ").concat(g,"px;\n height: ").concat(h,"px;\n position: absolute;\n ")),document.body.classList.add("dc-isolated-app__body-overflow",j&&v.compensateScroll)}else i.flushSync((function(){F({appId:re.app.id,isModeEnabled:!1})})),C.setAttribute("style",""),document.body.classList.remove("dc-isolated-app__body-overflow",v.compensateScroll);ce.current=e,fe.current=s}}}),[S,ie,Ce]);t.useEffect((function(){return qe}),[]),t.useEffect((function(){ve&&ce.current&&xe(!1)}),[ve]);var ye=c.useFullscreenModes({containerRef:de,appInstanceId:re.app.id,isMaximized:ve}),Ie=ye.isBrowserFullscreen,Me=ye.enterBrowserFullscreen,Re=ye.exitBrowserFullscreen,we=ye.isSeparateWindow,Se=ye.openSeparateWindow,Pe=ye.closeSeparateWindow,Ee=ye.setSeparateWindowTitle,Le=t.useCallback((function(e){le.current=e,H(e)}),[]);return g.jsx("div",{className:R.default("dc-isolated-app",v.fixedSizeContainer,ve&&v.containerMaximized),ref:de,children:g.jsx("div",{ref:Le,onMouseEnter:k,onMouseLeave:W,"data-testid":"".concat("DevCenter_AppContainer","_").concat(re.app.app.name),className:R.default(v.container,q.isInsideNewMobileApp&&v.newMobileAppContainer),children:g.jsx(oe,L(L({},re),{},{isBrowserFullscreen:Ie,enterBrowserFullscreen:Me,exitBrowserFullscreen:Re,isSeparateWindow:we,openSeparateWindow:Se,closeSeparateWindow:Pe,setSeparateWindowTitle:Ee,isNonIsolatedApp:ie,appContextValue:he,devCenterRouter:te,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:U,onAppRemove:G,onIsMaximizedChange:O,onSettingChange:K,onSettingsChange:X,permissionsContextValue:je,setIsFullscreenModalMode:xe,userUnits:Ae,trackApiRateLimiterException:ne,updateCurrentDashboardAppLastAnnotation:Z,apiRateLimiterConfig:ee}),ue)})})}F.propTypes={app:S.default.shape({id:S.default.number,app:S.default.shape({name:S.default.string})}).isRequired,currentUser:S.default.shape({}).isRequired,isIsolationFeatureEnabled:S.default.bool,onAppContainerClick:S.default.func,onAppFullscreenTransparentMode:S.default.func,onAppRemove:S.default.func,onInnerContainerMouseEnter:S.default.func,onInnerContainerMouseLeave:S.default.func,onIsMaximizedChange:S.default.func,onSettingChange:S.default.func,onSettingsChange:S.default.func,setInnerContainerRefFn:S.default.func,updateCurrentDashboardAppLastAnnotation:S.default.func,apiRateLimiterConfig:S.default.object};var T=a.withRouter(F);exports.DevCenterIsolatedApp=T;
|
|
2
2
|
//# sourceMappingURL=DevCenterIsolatedApp.js.map
|
package/cjs-bundle/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js.map
CHANGED
|
@@ -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 { flushSync } from 'react-dom';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router-dom';\nimport { noop } from 'lodash';\nimport queryString from 'query-string';\nimport PropTypes from 'prop-types';\n\nimport { APP_IFRAME_ATTRIBUTE, IsolatedPage } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\nimport { useFullscreenModes } from './useFullscreenModes';\n\nimport styles from './DevCenterIsolatedApp.module.scss';\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';\nconst DEFAULT_API_RATE_LIMITER_CONFIG = {};\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled = false,\n onAppFullscreenTransparentMode = noop,\n onIsMaximizedChange = noop,\n onInnerContainerMouseEnter = noop,\n onInnerContainerMouseLeave = noop,\n onAppContainerClick = noop,\n setInnerContainerRefFn = noop,\n onAppRemove = undefined,\n onSettingChange = noop,\n onSettingsChange = noop,\n updateCurrentDashboardAppLastAnnotation = noop,\n apiRateLimiterConfig = DEFAULT_API_RATE_LIMITER_CONFIG,\n trackApiRateLimiterException,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.history),\n [props.history?.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(\n queryString.parse(props.history?.location?.search),\n props.app.id\n );\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 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 // 1. BATCH ALL READS FIRST - prevents layout thrashing\n const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n\n // 2. Flush React state updates synchronously to prevent deferred renders\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n });\n\n // 3. BATCH ALL DOM WRITES - after reads and React flush\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 document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n // Flush React state updates synchronously before DOM writes\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n });\n\n // DOM writes after React flush\n isolatedPageAppContainer.setAttribute('style', '');\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\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 const {\n isBrowserFullscreen,\n enterBrowserFullscreen,\n exitBrowserFullscreen,\n isSeparateWindow,\n openSeparateWindow,\n closeSeparateWindow,\n setSeparateWindowTitle,\n } = useFullscreenModes({\n containerRef: fixedSizeContainerRef,\n appInstanceId: props.app.id,\n isMaximized: isAppMaximized,\n });\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(\n 'dc-isolated-app',\n styles.fixedSizeContainer,\n isAppMaximized && styles.containerMaximized\n )}\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 )}\n >\n <DCAppComponent\n key={iframeKey}\n {...props}\n isBrowserFullscreen={isBrowserFullscreen}\n enterBrowserFullscreen={enterBrowserFullscreen}\n exitBrowserFullscreen={exitBrowserFullscreen}\n isSeparateWindow={isSeparateWindow}\n openSeparateWindow={openSeparateWindow}\n closeSeparateWindow={closeSeparateWindow}\n setSeparateWindowTitle={setSeparateWindowTitle}\n isNonIsolatedApp={isNonIsolatedApp}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onAppRemove={onAppRemove}\n onIsMaximizedChange={onIsMaximizedChange}\n onSettingChange={onSettingChange}\n onSettingsChange={onSettingsChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n trackApiRateLimiterException={trackApiRateLimiterException}\n updateCurrentDashboardAppLastAnnotation={updateCurrentDashboardAppLastAnnotation}\n apiRateLimiterConfig={apiRateLimiterConfig}\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 apiRateLimiterConfig: PropTypes.object,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DEFAULT_API_RATE_LIMITER_CONFIG","DevCenterIsolatedAppComponent","_ref","_props$history","_props$app","_props$app2","_props$app3","_props$app3$app","_props$history2","_props$history2$locat","_ref$isIsolationFeatu","isIsolationFeatureEnabled","_ref$onAppFullscreenT","onAppFullscreenTransparentMode","noop","_ref$onIsMaximizedCha","onIsMaximizedChange","_ref$onInnerContainer","onInnerContainerMouseEnter","_ref$onInnerContainer2","onInnerContainerMouseLeave","_ref$onAppContainerCl","onAppContainerClick","_ref$setInnerContaine","setInnerContainerRefFn","_ref$onAppRemove","onAppRemove","undefined","_ref$onSettingChange","onSettingChange","_ref$onSettingsChange","onSettingsChange","_ref$updateCurrentDas","updateCurrentDashboardAppLastAnnotation","_ref$apiRateLimiterCo","apiRateLimiterConfig","trackApiRateLimiterException","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","createDevCenterRouter","history","location","isNonIsolatedApp","isCorvaApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appKey","app_key","appVersion","getAppVersion","iframeKey","concat","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","queryString","parse","search","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","isBodyScrollVisible","window","innerWidth","clientWidth","flushSync","setAttribute","_useFullscreenModes","useFullscreenModes","appInstanceId","isMaximized","isBrowserFullscreen","enterBrowserFullscreen","exitBrowserFullscreen","isSeparateWindow","openSeparateWindow","closeSeparateWindow","setSeparateWindowTitle","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","containerMaximized","ref","children","jsx","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","object","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 { flushSync } from 'react-dom';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router-dom';\nimport { noop } from 'lodash';\nimport queryString from 'query-string';\nimport PropTypes from 'prop-types';\n\nimport { APP_IFRAME_ATTRIBUTE, IsolatedPage } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\nimport { useFullscreenModes } from './useFullscreenModes';\nimport { snapRectToDevicePixels } from './utils/snapRectToDevicePixels';\n\nimport styles from './DevCenterIsolatedApp.module.scss';\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';\nconst DEFAULT_API_RATE_LIMITER_CONFIG = {};\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled = false,\n onAppFullscreenTransparentMode = noop,\n onIsMaximizedChange = noop,\n onInnerContainerMouseEnter = noop,\n onInnerContainerMouseLeave = noop,\n onAppContainerClick = noop,\n setInnerContainerRefFn = noop,\n onAppRemove = undefined,\n onSettingChange = noop,\n onSettingsChange = noop,\n updateCurrentDashboardAppLastAnnotation = noop,\n apiRateLimiterConfig = DEFAULT_API_RATE_LIMITER_CONFIG,\n trackApiRateLimiterException,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.history),\n [props.history?.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(\n queryString.parse(props.history?.location?.search),\n props.app.id\n );\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 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 // 1. BATCH ALL READS FIRST - prevents layout thrashing\n const { top, left, width, height } = snapRectToDevicePixels(\n fixedSizeContainerRef.current.getBoundingClientRect()\n );\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n\n // 2. Flush React state updates synchronously to prevent deferred renders\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n });\n\n // 3. BATCH ALL DOM WRITES - after reads and React flush\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 document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n // Flush React state updates synchronously before DOM writes\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n });\n\n // DOM writes after React flush\n isolatedPageAppContainer.setAttribute('style', '');\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\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 const {\n isBrowserFullscreen,\n enterBrowserFullscreen,\n exitBrowserFullscreen,\n isSeparateWindow,\n openSeparateWindow,\n closeSeparateWindow,\n setSeparateWindowTitle,\n } = useFullscreenModes({\n containerRef: fixedSizeContainerRef,\n appInstanceId: props.app.id,\n isMaximized: isAppMaximized,\n });\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(\n 'dc-isolated-app',\n styles.fixedSizeContainer,\n isAppMaximized && styles.containerMaximized\n )}\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 )}\n >\n <DCAppComponent\n key={iframeKey}\n {...props}\n isBrowserFullscreen={isBrowserFullscreen}\n enterBrowserFullscreen={enterBrowserFullscreen}\n exitBrowserFullscreen={exitBrowserFullscreen}\n isSeparateWindow={isSeparateWindow}\n openSeparateWindow={openSeparateWindow}\n closeSeparateWindow={closeSeparateWindow}\n setSeparateWindowTitle={setSeparateWindowTitle}\n isNonIsolatedApp={isNonIsolatedApp}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onAppRemove={onAppRemove}\n onIsMaximizedChange={onIsMaximizedChange}\n onSettingChange={onSettingChange}\n onSettingsChange={onSettingsChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n trackApiRateLimiterException={trackApiRateLimiterException}\n updateCurrentDashboardAppLastAnnotation={updateCurrentDashboardAppLastAnnotation}\n apiRateLimiterConfig={apiRateLimiterConfig}\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 apiRateLimiterConfig: PropTypes.object,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DEFAULT_API_RATE_LIMITER_CONFIG","DevCenterIsolatedAppComponent","_ref","_props$history","_props$app","_props$app2","_props$app3","_props$app3$app","_props$history2","_props$history2$locat","_ref$isIsolationFeatu","isIsolationFeatureEnabled","_ref$onAppFullscreenT","onAppFullscreenTransparentMode","noop","_ref$onIsMaximizedCha","onIsMaximizedChange","_ref$onInnerContainer","onInnerContainerMouseEnter","_ref$onInnerContainer2","onInnerContainerMouseLeave","_ref$onAppContainerCl","onAppContainerClick","_ref$setInnerContaine","setInnerContainerRefFn","_ref$onAppRemove","onAppRemove","undefined","_ref$onSettingChange","onSettingChange","_ref$onSettingsChange","onSettingsChange","_ref$updateCurrentDas","updateCurrentDashboardAppLastAnnotation","_ref$apiRateLimiterCo","apiRateLimiterConfig","trackApiRateLimiterException","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","createDevCenterRouter","history","location","isNonIsolatedApp","isCorvaApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appKey","app_key","appVersion","getAppVersion","iframeKey","concat","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","queryString","parse","search","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","snapRectToDevicePixels","getBoundingClientRect","top","left","width","height","isBodyScrollVisible","window","innerWidth","clientWidth","flushSync","setAttribute","_useFullscreenModes","useFullscreenModes","appInstanceId","isMaximized","isBrowserFullscreen","enterBrowserFullscreen","exitBrowserFullscreen","isSeparateWindow","openSeparateWindow","closeSeparateWindow","setSeparateWindowTitle","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","containerMaximized","ref","children","jsx","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","object","DevCenterIsolatedApp","withRouter"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(e,t){return Math.round(e*t)/t};exports.snapRectToDevicePixels=function(t){var i=t.top,o=t.left,r=t.width,n=t.height,d=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window.devicePixelRatio||1;return{top:e(i,d),left:e(o,d),width:e(r,d),height:e(n,d)}};
|
|
2
|
+
//# sourceMappingURL=snapRectToDevicePixels.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snapRectToDevicePixels.js","sources":["../../../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.ts"],"sourcesContent":["type Rect = Pick<DOMRect, 'top' | 'left' | 'width' | 'height'>;\n\nconst snapToDevicePixels = (value: number, devicePixelRatio: number): number =>\n Math.round(value * devicePixelRatio) / devicePixelRatio;\n\n/**\n * Rounds a rect to whole device pixels. The browser places an iframe on whole device pixels, so the\n * app container pinned inside the stretched iframe has to land on the same pixels; with a raw,\n * fractional rect the app shifts by a pixel at a non-integer zoom or DPR.\n */\nexport const snapRectToDevicePixels = (\n { top, left, width, height }: Rect,\n devicePixelRatio = window.devicePixelRatio || 1\n): Rect => ({\n top: snapToDevicePixels(top, devicePixelRatio),\n left: snapToDevicePixels(left, devicePixelRatio),\n width: snapToDevicePixels(width, devicePixelRatio),\n height: snapToDevicePixels(height, devicePixelRatio),\n});\n"],"names":["snapToDevicePixels","value","devicePixelRatio","Math","round","_ref","top","left","width","height","window"],"mappings":"oEAEA,IAAMA,EAAqB,SAACC,EAAeC,GAAwB,OACjEC,KAAKC,MAAMH,EAAQC,GAAoBA,CAAgB,iCAOnB,SAAHG,GAAA,IAC/BC,IAAAA,IAAKC,IAAAA,KAAMC,IAAAA,MAAOC,IAAAA,OACpBP,EAAmBQ,UAAAA,OAAAA,QAAAA,IAAAA,UAAAA,GAAAA,UAAAA,GAAAA,OAAOR,kBAAoB,EAAC,MACrC,CACVI,IAAKN,EAAmBM,EAAKJ,GAC7BK,KAAMP,EAAmBO,EAAML,GAC/BM,MAAOR,EAAmBQ,EAAON,GACjCO,OAAQT,EAAmBS,EAAQP,GACpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevCenterIsolatedApp.d.ts","sourceRoot":"","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DevCenterIsolatedApp.d.ts","sourceRoot":"","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"names":[],"mappings":"AAqTA,eAAO,MAAM,oBAAoB,KAA4C,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/helpers/objectWithoutProperties";import{useMemo as o,useRef as r,useState as i,useEffect as a,useContext as p,useCallback as s}from"react";import{flushSync as l}from"react-dom";import c from"classnames";import{withRouter as d}from"react-router-dom";import{noop as u}from"lodash";import m from"query-string";import v from"prop-types";import{APP_IFRAME_ATTRIBUTE as f,IsolatedPage as C}from"./IsolatedPage.js";import{ISOLATED_PAGE_APP_CONTAINER_ID as b}from"./constants.js";import{useFullscreenModes as g}from"./useFullscreenModes.js";import h from"./DevCenterIsolatedApp.module.scss.js";import
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/helpers/objectWithoutProperties";import{useMemo as o,useRef as r,useState as i,useEffect as a,useContext as p,useCallback as s}from"react";import{flushSync as l}from"react-dom";import c from"classnames";import{withRouter as d}from"react-router-dom";import{noop as u}from"lodash";import m from"query-string";import v from"prop-types";import{APP_IFRAME_ATTRIBUTE as f,IsolatedPage as C}from"./IsolatedPage.js";import{ISOLATED_PAGE_APP_CONTAINER_ID as b}from"./constants.js";import{useFullscreenModes as g}from"./useFullscreenModes.js";import{snapRectToDevicePixels as h}from"./utils/snapRectToDevicePixels.js";import A from"./DevCenterIsolatedApp.module.scss.js";import j from"../AppContext.js";import y 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"../../../utils/shareRecentRequest.js";import"../../../permissions/ProvidePermissions.js";import{getUserUnits as w,subscribeForUserUnitsUpdates as x}from"../../../utils/index.js";import"../AppHeader/AppHeader.js";import"../AppSideBar/AppSideBar.js";import"../AppsDataProvider/effects/utils.js";import"@babel/runtime/helpers/toConsumableArray";import{createDevCenterRouter as M,isCorvaApp as S,isIsolationEnabledInPackageManifest as I,isAppMaximized as L}from"../../../utils/devcenter.js";import{jsx as R}from"react/jsx-runtime";import P 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"./DevCenterIsolatedAppPage.js";import{getAppVersion as D}from"../DevCenterAppContainer/utils.js";import{isInsideNewMobileApp as F}from"../../../utils/mobileDetect.js";var O=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","apiRateLimiterConfig","trackApiRateLimiterException"];function E(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function T(n){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?E(Object(o),!0).forEach((function(t){e(n,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(o,e))}))}return n}var B={};function k(e){var d,v,E,k,W,z,_,N=e.isIsolationFeatureEnabled,q=void 0!==N&&N,U=e.onAppFullscreenTransparentMode,H=void 0===U?u:U,V=e.onIsMaximizedChange,G=void 0===V?u:V,J=e.onInnerContainerMouseEnter,K=void 0===J?u:J,Q=e.onInnerContainerMouseLeave,X=void 0===Q?u:Q,Y=e.onAppContainerClick,Z=void 0===Y?u:Y,$=e.setInnerContainerRefFn,ee=void 0===$?u:$,ne=e.onAppRemove,te=void 0===ne?void 0:ne,oe=e.onSettingChange,re=void 0===oe?u:oe,ie=e.onSettingsChange,ae=void 0===ie?u:ie,pe=e.updateCurrentDashboardAppLastAnnotation,se=void 0===pe?u:pe,le=e.apiRateLimiterConfig,ce=void 0===le?B:le,de=e.trackApiRateLimiterException,ue=t(e,O),me=o((function(){return M(ue.history)}),[null===(d=ue.history)||void 0===d?void 0:d.location]),ve=S(null==ue||null===(v=ue.app)||void 0===v?void 0:v.app)&&!I(null==ue||null===(E=ue.app)||void 0===E?void 0:E.package)||!q,fe=ve?P:C,Ce=null===(k=ue.app)||void 0===k||null===(W=k.app)||void 0===W?void 0:W.app_key,be=D(ue.app),ge="".concat(Ce,"-").concat(be),he=r(),Ae=r(),je=r(),ye=r(!1),we=r(!1),xe=L(m.parse(null===(z=ue.history)||void 0===z||null===(_=z.location)||void 0===_?void 0:_.search),ue.app.id),Me=r(xe);Me.current=xe;var Se=i(w()),Ie=n(Se,2),Le=Ie[0],Re=Ie[1];a((function(){var e=x((function(e){return Re(e)}));return function(){return e()}}),[]);var Pe=p(j),De=y();function Fe(){H({appId:ue.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",A.compensateScroll)}var Oe=s((function(e){var n,t,o,r,i,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!q||ve||Me.current&&!ye.current||ye.current===e){var p;a&&we.current!==a&&(we.current=a,null===(p=Ae.current)||void 0===p||p.classList.add(A.containerMaximizedTransparentModal))}else{var s,c=e?"add":"remove";if(null===(n=Ae.current)||void 0===n||n.classList[c](A.containerMaximizedTransparent),a||"remove"===c)null===(s=Ae.current)||void 0===s||s.classList[c](A.containerMaximizedTransparentModal);he.current=null===(t=Ae.current)||void 0===t||null===(o=t.querySelector("[".concat(f,"]")))||void 0===o||null===(r=o.contentWindow)||void 0===r?void 0:r.document;var d=null===(i=he.current)||void 0===i?void 0:i.getElementById(b);if(d){if(e){var u=h(je.current.getBoundingClientRect()),m=u.top,v=u.left,C=u.width,g=u.height,j=window.innerWidth!==document.body.clientWidth;l((function(){H({appId:ue.app.id,isModeEnabled:!0})})),d.setAttribute("style","\n top: ".concat(m,"px;\n left: ").concat(v,"px;\n width: ").concat(C,"px;\n height: ").concat(g,"px;\n position: absolute;\n ")),document.body.classList.add("dc-isolated-app__body-overflow",j&&A.compensateScroll)}else l((function(){H({appId:ue.app.id,isModeEnabled:!1})})),d.setAttribute("style",""),document.body.classList.remove("dc-isolated-app__body-overflow",A.compensateScroll);ye.current=e,we.current=a}}}),[q,ve,Me]);a((function(){return Fe}),[]),a((function(){xe&&ye.current&&Oe(!1)}),[xe]);var Ee=g({containerRef:je,appInstanceId:ue.app.id,isMaximized:xe}),Te=Ee.isBrowserFullscreen,Be=Ee.enterBrowserFullscreen,ke=Ee.exitBrowserFullscreen,We=Ee.isSeparateWindow,ze=Ee.openSeparateWindow,_e=Ee.closeSeparateWindow,Ne=Ee.setSeparateWindowTitle,qe=s((function(e){Ae.current=e,ee(e)}),[]);return R("div",{className:c("dc-isolated-app",A.fixedSizeContainer,xe&&A.containerMaximized),ref:je,children:R("div",{ref:qe,onMouseEnter:K,onMouseLeave:X,"data-testid":"".concat("DevCenter_AppContainer","_").concat(ue.app.app.name),className:c(A.container,F&&A.newMobileAppContainer),children:R(fe,T(T({},ue),{},{isBrowserFullscreen:Te,enterBrowserFullscreen:Be,exitBrowserFullscreen:ke,isSeparateWindow:We,openSeparateWindow:ze,closeSeparateWindow:_e,setSeparateWindowTitle:Ne,isNonIsolatedApp:ve,appContextValue:Pe,devCenterRouter:me,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:Z,onAppRemove:te,onIsMaximizedChange:G,onSettingChange:re,onSettingsChange:ae,permissionsContextValue:De,setIsFullscreenModalMode:Oe,userUnits:Le,trackApiRateLimiterException:de,updateCurrentDashboardAppLastAnnotation:se,apiRateLimiterConfig:ce}),ge)})})}k.propTypes={app:v.shape({id:v.number,app:v.shape({name:v.string})}).isRequired,currentUser:v.shape({}).isRequired,isIsolationFeatureEnabled:v.bool,onAppContainerClick:v.func,onAppFullscreenTransparentMode:v.func,onAppRemove:v.func,onInnerContainerMouseEnter:v.func,onInnerContainerMouseLeave:v.func,onIsMaximizedChange:v.func,onSettingChange:v.func,onSettingsChange:v.func,setInnerContainerRefFn:v.func,updateCurrentDashboardAppLastAnnotation:v.func,apiRateLimiterConfig:v.object};var W=d(k);export{W as DevCenterIsolatedApp};
|
|
2
2
|
//# sourceMappingURL=DevCenterIsolatedApp.js.map
|
|
@@ -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 { flushSync } from 'react-dom';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router-dom';\nimport { noop } from 'lodash';\nimport queryString from 'query-string';\nimport PropTypes from 'prop-types';\n\nimport { APP_IFRAME_ATTRIBUTE, IsolatedPage } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\nimport { useFullscreenModes } from './useFullscreenModes';\n\nimport styles from './DevCenterIsolatedApp.module.scss';\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';\nconst DEFAULT_API_RATE_LIMITER_CONFIG = {};\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled = false,\n onAppFullscreenTransparentMode = noop,\n onIsMaximizedChange = noop,\n onInnerContainerMouseEnter = noop,\n onInnerContainerMouseLeave = noop,\n onAppContainerClick = noop,\n setInnerContainerRefFn = noop,\n onAppRemove = undefined,\n onSettingChange = noop,\n onSettingsChange = noop,\n updateCurrentDashboardAppLastAnnotation = noop,\n apiRateLimiterConfig = DEFAULT_API_RATE_LIMITER_CONFIG,\n trackApiRateLimiterException,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.history),\n [props.history?.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(\n queryString.parse(props.history?.location?.search),\n props.app.id\n );\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 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 // 1. BATCH ALL READS FIRST - prevents layout thrashing\n const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n\n // 2. Flush React state updates synchronously to prevent deferred renders\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n });\n\n // 3. BATCH ALL DOM WRITES - after reads and React flush\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 document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n // Flush React state updates synchronously before DOM writes\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n });\n\n // DOM writes after React flush\n isolatedPageAppContainer.setAttribute('style', '');\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\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 const {\n isBrowserFullscreen,\n enterBrowserFullscreen,\n exitBrowserFullscreen,\n isSeparateWindow,\n openSeparateWindow,\n closeSeparateWindow,\n setSeparateWindowTitle,\n } = useFullscreenModes({\n containerRef: fixedSizeContainerRef,\n appInstanceId: props.app.id,\n isMaximized: isAppMaximized,\n });\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(\n 'dc-isolated-app',\n styles.fixedSizeContainer,\n isAppMaximized && styles.containerMaximized\n )}\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 )}\n >\n <DCAppComponent\n key={iframeKey}\n {...props}\n isBrowserFullscreen={isBrowserFullscreen}\n enterBrowserFullscreen={enterBrowserFullscreen}\n exitBrowserFullscreen={exitBrowserFullscreen}\n isSeparateWindow={isSeparateWindow}\n openSeparateWindow={openSeparateWindow}\n closeSeparateWindow={closeSeparateWindow}\n setSeparateWindowTitle={setSeparateWindowTitle}\n isNonIsolatedApp={isNonIsolatedApp}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onAppRemove={onAppRemove}\n onIsMaximizedChange={onIsMaximizedChange}\n onSettingChange={onSettingChange}\n onSettingsChange={onSettingsChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n trackApiRateLimiterException={trackApiRateLimiterException}\n updateCurrentDashboardAppLastAnnotation={updateCurrentDashboardAppLastAnnotation}\n apiRateLimiterConfig={apiRateLimiterConfig}\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 apiRateLimiterConfig: PropTypes.object,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DEFAULT_API_RATE_LIMITER_CONFIG","DevCenterIsolatedAppComponent","_ref","_props$history","_props$app","_props$app2","_props$app3","_props$app3$app","_props$history2","_props$history2$locat","_ref$isIsolationFeatu","isIsolationFeatureEnabled","_ref$onAppFullscreenT","onAppFullscreenTransparentMode","noop","_ref$onIsMaximizedCha","onIsMaximizedChange","_ref$onInnerContainer","onInnerContainerMouseEnter","_ref$onInnerContainer2","onInnerContainerMouseLeave","_ref$onAppContainerCl","onAppContainerClick","_ref$setInnerContaine","setInnerContainerRefFn","_ref$onAppRemove","onAppRemove","undefined","_ref$onSettingChange","onSettingChange","_ref$onSettingsChange","onSettingsChange","_ref$updateCurrentDas","updateCurrentDashboardAppLastAnnotation","_ref$apiRateLimiterCo","apiRateLimiterConfig","trackApiRateLimiterException","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","history","location","isNonIsolatedApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appKey","app_key","appVersion","getAppVersion","iframeKey","concat","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","queryString","parse","search","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","isBodyScrollVisible","window","innerWidth","clientWidth","flushSync","setAttribute","_useFullscreenModes","useFullscreenModes","appInstanceId","isMaximized","isBrowserFullscreen","enterBrowserFullscreen","exitBrowserFullscreen","isSeparateWindow","openSeparateWindow","closeSeparateWindow","setSeparateWindowTitle","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","containerMaximized","ref","children","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","object","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 { flushSync } from 'react-dom';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router-dom';\nimport { noop } from 'lodash';\nimport queryString from 'query-string';\nimport PropTypes from 'prop-types';\n\nimport { APP_IFRAME_ATTRIBUTE, IsolatedPage } from './IsolatedPage';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\nimport { useFullscreenModes } from './useFullscreenModes';\nimport { snapRectToDevicePixels } from './utils/snapRectToDevicePixels';\n\nimport styles from './DevCenterIsolatedApp.module.scss';\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';\nconst DEFAULT_API_RATE_LIMITER_CONFIG = {};\n\nfunction DevCenterIsolatedAppComponent({\n isIsolationFeatureEnabled = false,\n onAppFullscreenTransparentMode = noop,\n onIsMaximizedChange = noop,\n onInnerContainerMouseEnter = noop,\n onInnerContainerMouseLeave = noop,\n onAppContainerClick = noop,\n setInnerContainerRefFn = noop,\n onAppRemove = undefined,\n onSettingChange = noop,\n onSettingsChange = noop,\n updateCurrentDashboardAppLastAnnotation = noop,\n apiRateLimiterConfig = DEFAULT_API_RATE_LIMITER_CONFIG,\n trackApiRateLimiterException,\n ...props\n}) {\n const devCenterRouter = useMemo(\n () => devCenterUtils.createDevCenterRouter(props.history),\n [props.history?.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(\n queryString.parse(props.history?.location?.search),\n props.app.id\n );\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 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 // 1. BATCH ALL READS FIRST - prevents layout thrashing\n const { top, left, width, height } = snapRectToDevicePixels(\n fixedSizeContainerRef.current.getBoundingClientRect()\n );\n const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;\n\n // 2. Flush React state updates synchronously to prevent deferred renders\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: true });\n });\n\n // 3. BATCH ALL DOM WRITES - after reads and React flush\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 document.body.classList.add(\n 'dc-isolated-app__body-overflow',\n isBodyScrollVisible && styles.compensateScroll\n );\n } else {\n // Flush React state updates synchronously before DOM writes\n flushSync(() => {\n onAppFullscreenTransparentMode({ appId: props.app.id, isModeEnabled: false });\n });\n\n // DOM writes after React flush\n isolatedPageAppContainer.setAttribute('style', '');\n document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);\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 const {\n isBrowserFullscreen,\n enterBrowserFullscreen,\n exitBrowserFullscreen,\n isSeparateWindow,\n openSeparateWindow,\n closeSeparateWindow,\n setSeparateWindowTitle,\n } = useFullscreenModes({\n containerRef: fixedSizeContainerRef,\n appInstanceId: props.app.id,\n isMaximized: isAppMaximized,\n });\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(\n 'dc-isolated-app',\n styles.fixedSizeContainer,\n isAppMaximized && styles.containerMaximized\n )}\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 )}\n >\n <DCAppComponent\n key={iframeKey}\n {...props}\n isBrowserFullscreen={isBrowserFullscreen}\n enterBrowserFullscreen={enterBrowserFullscreen}\n exitBrowserFullscreen={exitBrowserFullscreen}\n isSeparateWindow={isSeparateWindow}\n openSeparateWindow={openSeparateWindow}\n closeSeparateWindow={closeSeparateWindow}\n setSeparateWindowTitle={setSeparateWindowTitle}\n isNonIsolatedApp={isNonIsolatedApp}\n appContextValue={appContextValue}\n devCenterRouter={devCenterRouter}\n globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}\n globalMixpanelEventTracker={window[Symbol.for('logToMixpanel')]}\n onAppContainerClick={onAppContainerClick}\n onAppRemove={onAppRemove}\n onIsMaximizedChange={onIsMaximizedChange}\n onSettingChange={onSettingChange}\n onSettingsChange={onSettingsChange}\n permissionsContextValue={permissionsContextValue}\n setIsFullscreenModalMode={setIsFullscreenModalMode}\n userUnits={userUnits}\n trackApiRateLimiterException={trackApiRateLimiterException}\n updateCurrentDashboardAppLastAnnotation={updateCurrentDashboardAppLastAnnotation}\n apiRateLimiterConfig={apiRateLimiterConfig}\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 apiRateLimiterConfig: PropTypes.object,\n};\n\nexport const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);\n"],"names":["DEFAULT_API_RATE_LIMITER_CONFIG","DevCenterIsolatedAppComponent","_ref","_props$history","_props$app","_props$app2","_props$app3","_props$app3$app","_props$history2","_props$history2$locat","_ref$isIsolationFeatu","isIsolationFeatureEnabled","_ref$onAppFullscreenT","onAppFullscreenTransparentMode","noop","_ref$onIsMaximizedCha","onIsMaximizedChange","_ref$onInnerContainer","onInnerContainerMouseEnter","_ref$onInnerContainer2","onInnerContainerMouseLeave","_ref$onAppContainerCl","onAppContainerClick","_ref$setInnerContaine","setInnerContainerRefFn","_ref$onAppRemove","onAppRemove","undefined","_ref$onSettingChange","onSettingChange","_ref$onSettingsChange","onSettingsChange","_ref$updateCurrentDas","updateCurrentDashboardAppLastAnnotation","_ref$apiRateLimiterCo","apiRateLimiterConfig","trackApiRateLimiterException","props","_objectWithoutProperties","_excluded","devCenterRouter","useMemo","devCenterUtils","history","location","isNonIsolatedApp","app","package","DCAppComponent","DevCenterAppContainer","IsolatedPage","appKey","app_key","appVersion","getAppVersion","iframeKey","concat","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","fullscreenModeRef","fullscreenModalModeRef","isAppMaximized","queryString","parse","search","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","snapRectToDevicePixels","getBoundingClientRect","top","left","width","height","isBodyScrollVisible","window","innerWidth","clientWidth","flushSync","setAttribute","_useFullscreenModes","useFullscreenModes","appInstanceId","isMaximized","isBrowserFullscreen","enterBrowserFullscreen","exitBrowserFullscreen","isSeparateWindow","openSeparateWindow","closeSeparateWindow","setSeparateWindowTitle","setContainerRefs","node","_jsx","className","classNames","fixedSizeContainer","containerMaximized","ref","children","onMouseEnter","onMouseLeave","PAGE_NAME","name","container","isInsideNewMobileApp","newMobileAppContainer","_objectSpread","globalNotificationToastsAPI","Symbol","for","globalMixpanelEventTracker","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","object","DevCenterIsolatedApp","withRouter"],"mappings":"iiGAsBA,IACMA,EAAkC,CAAA,EAExC,SAASC,EAeNC,GAAA,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAR,EAdDS,0BAAAA,cAAiCD,EAAAE,EAAAV,EACjCW,+BAAAA,aAAiCC,EAAIF,EAAAG,EAAAb,EACrCc,oBAAAA,aAAsBF,EAAIC,EAAAE,EAAAf,EAC1BgB,2BAAAA,aAA6BJ,EAAIG,EAAAE,EAAAjB,EACjCkB,2BAAAA,aAA6BN,EAAIK,EAAAE,EAAAnB,EACjCoB,oBAAAA,aAAsBR,EAAIO,EAAAE,EAAArB,EAC1BsB,uBAAAA,cAAyBV,EAAIS,EAAAE,GAAAvB,EAC7BwB,YAAAA,oBAAcC,EAASF,GAAAG,GAAA1B,EACvB2B,gBAAAA,eAAkBf,EAAIc,GAAAE,GAAA5B,EACtB6B,iBAAAA,eAAmBjB,EAAIgB,GAAAE,GAAA9B,EACvB+B,wCAAAA,eAA0CnB,EAAIkB,GAAAE,GAAAhC,EAC9CiC,qBAAAA,eAAuBnC,EAA+BkC,GACtDE,KAAAA,6BACGC,GAAKC,EAAApC,EAAAqC,GAEFC,GAAkBC,GACtB,WAAA,OAAMC,EAAqCL,GAAMM,QACjD,GAAA,SAAAxC,EAACkC,GAAMM,4BAANxC,EAAeyC,WAGZC,GACHH,EAA0BL,UAAA,QAAKjC,EAALiC,GAAOS,WAAP,IAAA1C,OAAK,EAALA,EAAY0C,OACpCJ,EAAmDL,kBAAAA,EAAAA,GAAOS,sBAAPT,EAAAhC,EAAY0C,WACjEpC,EAEGqC,GAAiBH,GAAmBI,EAAwBC,EAI5DC,WAASd,EAAAA,GAAMS,kBAAN,UAAAxC,EAAWwC,WAAX,IAAAvC,SAAAA,EAAgB6C,QACzBC,GAAaC,EAAcjB,GAAMS,KACjCS,GAAS,GAAAC,OAAML,GAAM,KAAAK,OAAIH,IAEzBI,GAAoBC,IACpBC,GAAeD,IACfE,GAAwBF,IACxBG,GAAoBH,GAAO,GAC3BI,GAAyBJ,GAAO,GAEhCK,GAAiBrB,EACrBsB,EAAYC,cAAM5B,EAAAA,GAAMM,sBAAN,UAAAnC,EAAeoC,gBAAf,IAAAnC,SAAAA,EAAyByD,QAC3C7B,GAAMS,IAAIqB,IAINC,GAAoBV,EAAOK,IACjCK,GAAkBC,QAAUN,GAE5B,IAAAO,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,KACPzE,EAA+B,CAAE0E,MAAOlD,GAAMS,IAAIqB,GAAIqB,eAAe,IACrEC,SAASC,KAAKC,UAAUC,OAAO,iCAAkCC,EAAOC,iBAC1E,CAEA,IAAMC,GAA2BC,GAC/B,SAAkCC,GAAiD,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAjBC,0DAGhE,IACG5F,GACDkC,IACCuB,GAAkBC,UAAYR,GAAkBQ,SACjDR,GAAkBQ,UAAY4B,EAJhC,CAO6D,IAAAO,EAAvDD,GAAWzC,GAAuBO,UAAYkC,IAChDzC,GAAuBO,QAAUkC,EACb,QAApBC,EAAA7C,GAAaU,eAAO,IAAAmC,GAApBA,EAAsBb,UAAUc,IAAIZ,EAAOa,oCAI/C,KAbA,CAeA,IAI+CC,EAJzCC,EAAoBX,EAAiC,MAAQ,SAInE,GAFoB,QAApBC,EAAAvC,GAAaU,eAAO,IAAA6B,GAApBA,EAAsBP,UAAUiB,GAAmBf,EAAOgB,+BAEtDN,GAAiC,WAAtBK,EACO,QAApBD,EAAAhD,GAAaU,eAAO,IAAAsC,GAApBA,EAAsBhB,UAAUiB,GAC9Bf,EAAOa,oCAIXjD,GAAkBY,QAAU,QAAH8B,EAAGxC,GAAaU,eAAb,IAAA8B,GAE3B,QAF2BC,EAAAD,EAAsBW,cAAa,IAAAtD,OACzDuD,EACL,aAAA,IAAAX,GAAe,QAAfC,EAF2BD,EAEzBY,qBAAa,IAAAX,OAFY,EAAAA,EAEVZ,SAElB,IAAMwB,UAA2BxD,EAAAA,GAAkBY,4BAAlBiC,EAA2BY,eAC1DC,GAGF,GAAKF,EAAL,CAIA,GAAIhB,EAAgC,CAElC,IAAqCmB,EAAAA,EACnCxD,GAAsBS,QAAQgD,yBADxBC,IAAAA,IAAKC,IAAAA,KAAMC,IAAAA,MAAOC,IAAAA,OAGpBC,EAAsBC,OAAOC,aAAenC,SAASC,KAAKmC,YAGhEC,GAAU,WACRjH,EAA+B,CAAE0E,MAAOlD,GAAMS,IAAIqB,GAAIqB,eAAe,GACvE,IAGAyB,EAAyBc,aACvB,QAEKT,kBAAAA,OAAAA,EACCC,uBAAAA,OAAAA,EACCC,wBAAAA,OAAAA,EACCC,yBAAAA,OAAAA,EAGT,6CACDhC,SAASC,KAAKC,UAAUc,IACtB,iCACAiB,GAAuB7B,EAAOC,iBAElC,MAEEgC,GAAU,WACRjH,EAA+B,CAAE0E,MAAOlD,GAAMS,IAAIqB,GAAIqB,eAAe,GACvE,IAGAyB,EAAyBc,aAAa,QAAS,IAC/CtC,SAASC,KAAKC,UAAUC,OAAO,iCAAkCC,EAAOC,kBAE1EjC,GAAkBQ,QAAU4B,EAC5BnC,GAAuBO,QAAUkC,CAxCjC,CAtBA,CA+DD,GACD,CAAC5F,EAA2BkC,GAAkBuB,KAGhDS,GAAU,WACR,OAAOS,EACR,GAAE,IAEHT,GAAU,WACJd,IAAkBF,GAAkBQ,SACtC0B,IAAyB,EAE7B,GAAG,CAAChC,KAEJ,IAAAiE,GAQIC,EAAmB,CACrBtE,aAAcC,GACdsE,cAAe7F,GAAMS,IAAIqB,GACzBgE,YAAapE,KAVbqE,MAAAA,oBACAC,MAAAA,uBACAC,MAAAA,sBACAC,MAAAA,iBACAC,MAAAA,mBACAC,MAAAA,oBACAC,MAAAA,uBAWIC,GAAmB3C,GAAY,SAAA4C,GACnCjF,GAAaU,QAAUuE,EACvBpH,GAAuBoH,EACxB,GAAE,IAEH,OACEC,EAAA,MAAA,CACEC,UAAWC,EACT,kBACAlD,EAAOmD,mBACPjF,IAAkB8B,EAAOoD,oBAE3BC,IAAKtF,GAAsBuF,SAE3BN,EAAA,MAAA,CACEK,IAAKP,GACLS,aAAclI,EACdmI,aAAcjI,EACd,cAAgBkI,GAAAA,OAnON,qCAmOmBjH,GAAMS,IAAIA,IAAIyG,MAC3CT,UAAWC,EACTlD,EAAO2D,UACPC,GAAwB5D,EAAO6D,uBAC/BP,SAEFN,EAAC7F,GAAc2G,EAAAA,EAAA,GAETtH,IAAK,GAAA,CACT+F,oBAAqBA,GACrBC,uBAAwBA,GACxBC,sBAAuBA,GACvBC,iBAAkBA,GAClBC,mBAAoBA,GACpBC,oBAAqBA,GACrBC,uBAAwBA,GACxB7F,iBAAkBA,GAClBoC,gBAAiBA,GACjBzC,gBAAiBA,GACjBoH,4BAA6BjC,OAAOkC,OAAOC,IAAI,uBAC/CC,2BAA4BpC,OAAOkC,OAAOC,IAAI,kBAC9CxI,oBAAqBA,EACrBI,YAAaA,GACbV,oBAAqBA,EACrBa,gBAAiBA,GACjBE,iBAAkBA,GAClBqD,wBAAyBA,GACzBW,yBAA0BA,GAC1BpB,UAAWA,GACXvC,6BAA8BA,GAC9BH,wCAAyCA,GACzCE,qBAAsBA,KAxBjBoB,OA6Bf,CAEAtD,EAA8B+J,UAAY,CACxClH,IAAKmH,EAAUC,MAAM,CACnB/F,GAAI8F,EAAUE,OACdrH,IAAKmH,EAAUC,MAAM,CACnBX,KAAMU,EAAUG,WAEjBC,WACHC,YAAaL,EAAUC,MAAM,CAAA,GAAIG,WACjC1J,0BAA2BsJ,EAAUM,KACrCjJ,oBAAqB2I,EAAUO,KAC/B3J,+BAAgCoJ,EAAUO,KAC1C9I,YAAauI,EAAUO,KACvBtJ,2BAA4B+I,EAAUO,KACtCpJ,2BAA4B6I,EAAUO,KACtCxJ,oBAAqBiJ,EAAUO,KAC/B3I,gBAAiBoI,EAAUO,KAC3BzI,iBAAkBkI,EAAUO,KAC5BhJ,uBAAwByI,EAAUO,KAClCvI,wCAAyCgI,EAAUO,KACnDrI,qBAAsB8H,EAAUQ,YAGrBC,EAAuBC,EAAW1K"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snapRectToDevicePixels.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/__tests__/snapRectToDevicePixels.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type Rect = Pick<DOMRect, 'top' | 'left' | 'width' | 'height'>;
|
|
2
|
+
/**
|
|
3
|
+
* Rounds a rect to whole device pixels. The browser places an iframe on whole device pixels, so the
|
|
4
|
+
* app container pinned inside the stretched iframe has to land on the same pixels; with a raw,
|
|
5
|
+
* fractional rect the app shifts by a pixel at a non-integer zoom or DPR.
|
|
6
|
+
*/
|
|
7
|
+
export declare const snapRectToDevicePixels: ({ top, left, width, height }: Rect, devicePixelRatio?: number) => Rect;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=snapRectToDevicePixels.d.ts.map
|
package/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snapRectToDevicePixels.d.ts","sourceRoot":"","sources":["../../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.ts"],"names":[],"mappings":"AAAA,KAAK,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAK/D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,iCACH,IAAI,gCAEjC,IAKD,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var t=function(t,e){return Math.round(t*e)/e},e=function(e){var i=e.top,n=e.left,o=e.width,h=e.height,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window.devicePixelRatio||1;return{top:t(i,r),left:t(n,r),width:t(o,r),height:t(h,r)}};export{e as snapRectToDevicePixels};
|
|
2
|
+
//# sourceMappingURL=snapRectToDevicePixels.js.map
|
package/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"snapRectToDevicePixels.js","sources":["../../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/utils/snapRectToDevicePixels.ts"],"sourcesContent":["type Rect = Pick<DOMRect, 'top' | 'left' | 'width' | 'height'>;\n\nconst snapToDevicePixels = (value: number, devicePixelRatio: number): number =>\n Math.round(value * devicePixelRatio) / devicePixelRatio;\n\n/**\n * Rounds a rect to whole device pixels. The browser places an iframe on whole device pixels, so the\n * app container pinned inside the stretched iframe has to land on the same pixels; with a raw,\n * fractional rect the app shifts by a pixel at a non-integer zoom or DPR.\n */\nexport const snapRectToDevicePixels = (\n { top, left, width, height }: Rect,\n devicePixelRatio = window.devicePixelRatio || 1\n): Rect => ({\n top: snapToDevicePixels(top, devicePixelRatio),\n left: snapToDevicePixels(left, devicePixelRatio),\n width: snapToDevicePixels(width, devicePixelRatio),\n height: snapToDevicePixels(height, devicePixelRatio),\n});\n"],"names":["snapToDevicePixels","value","devicePixelRatio","Math","round","snapRectToDevicePixels","_ref","top","left","width","height","window"],"mappings":"AAEA,IAAMA,EAAqB,SAACC,EAAeC,GAAwB,OACjEC,KAAKC,MAAMH,EAAQC,GAAoBA,CAAgB,EAO5CG,EAAyB,SAAHC,GAAA,IAC/BC,IAAAA,IAAKC,IAAAA,KAAMC,IAAAA,MAAOC,IAAAA,OACpBR,EAAmBS,UAAAA,OAAAA,QAAAA,IAAAA,UAAAA,GAAAA,UAAAA,GAAAA,OAAOT,kBAAoB,EAAC,MACrC,CACVK,IAAKP,EAAmBO,EAAKL,GAC7BM,KAAMR,EAAmBQ,EAAMN,GAC/BO,MAAOT,EAAmBS,EAAOP,GACjCQ,OAAQV,EAAmBU,EAAQR,GACpC"}
|
|
@@ -106,10 +106,10 @@ export declare const BHA_COMPONENT_TYPES: ({
|
|
|
106
106
|
})[];
|
|
107
107
|
})[];
|
|
108
108
|
export declare const BHA_GENERAL_FIELD_TYPES: ({
|
|
109
|
-
unit?: undefined;
|
|
110
109
|
name: string;
|
|
111
110
|
label: string;
|
|
112
111
|
cond?: undefined;
|
|
112
|
+
unit?: undefined;
|
|
113
113
|
col_size?: undefined;
|
|
114
114
|
family?: undefined;
|
|
115
115
|
} | {
|
|
@@ -134,8 +134,8 @@ export declare const BHA_GENERAL_FIELD_TYPES: ({
|
|
|
134
134
|
col_size: number;
|
|
135
135
|
family?: undefined;
|
|
136
136
|
} | {
|
|
137
|
-
unit?: undefined;
|
|
138
137
|
cond?: undefined;
|
|
138
|
+
unit?: undefined;
|
|
139
139
|
name: string;
|
|
140
140
|
label: string;
|
|
141
141
|
col_size: number;
|