@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js

@@ -1 +1,211 @@
-import e from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import o from"@babel/runtime/helpers/objectWithoutProperties";import{useMemo as t,useRef as r,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{DevCenterAppZoidComponent as m,APP_IFRAME_ATTRIBUTE as f}from"./DevCenterAppZoidComponent.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 A 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 g}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 y}from"react/jsx-runtime";import"./DevCenterIsolatedAppPage.js";import{isInsideNewMobileApp as I}from"../../../utils/mobileDetect.js";import{createDevCenterRouter as M,isCorvaApp as x,isIsolationEnabledInPackageManifest as P,isAppMaximized as w}from"../../../utils/devcenter.js";var D=["isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn"];function O(e,n){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),o.push.apply(o,t)}return o}function S(n){for(var o=1;o<arguments.length;o++){var t=null!=arguments[o]?arguments[o]:{};o%2?O(Object(t),!0).forEach((function(o){e(n,o,t[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function E(e){var c,u,d,O,E,F=e.isIsolationFeatureEnabled,L=e.onAppFullscreenTransparentMode,R=e.onIsMaximizedChange,T=e.onInnerContainerMouseEnter,k=e.onInnerContainerMouseLeave,z=e.onAppContainerClick,B=e.setInnerContainerRefFn,_=o(e,D),N=t((function(){return M(_.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)||!F,U=q?h:m,W=r(),H=r(),V=r(),G=r(!1),Z=w(null===(O=_.router)||void 0===O||null===(E=O.location)||void 0===E?void 0:E.query,_.app.id),J=i(j()),K=n(J,2),Q=K[0],X=K[1];a((function(){var e=g((function(e){return X(e)}));return function(){return e()}}),[]);var Y=p(b),$=A();function ee(){L({appId:_.app.id,isModeEnabled:!1}),document.body.classList.remove("dc-isolated-app__body-overflow",C.compensateScroll)}a((function(){return ee}),[]);var ne=s((function(e){H.current=e,B(e)}),[]);return y("div",{className:l("dc-isolated-app",C.fixedSizeContainer),ref:V,children:y("div",{ref:ne,onMouseEnter:T,onMouseLeave:k,"data-testid":"".concat("DevCenter_AppContainer","_").concat(_.app.app.name),className:l(C.container,I&&C.newMobileAppContainer,Z&&C.containerMaximized),children:y(U,S(S({},_),{},{appContextValue:Y,devCenterRouter:N,globalNotificationToastsAPI:window[Symbol.for("notificationToasts")],globalMixpanelEventTracker:window[Symbol.for("logToMixpanel")],onAppContainerClick:z,onIsMaximizedChange:R,permissionsContextValue:$,setIsFullscreenModalMode:function(e){var n,o,t,r,i;if(F&&!q&&!Z&&G.current!==e){var a=e?"add":"remove";null===(n=H.current)||void 0===n||n.classList[a](C.containerMaximizedTransparent),W.current=null===(o=H.current)||void 0===o||null===(t=o.querySelector("[".concat(f,"]")))||void 0===t||null===(r=t.contentWindow)||void 0===r?void 0:r.document;var p=null===(i=W.current)||void 0===i?void 0:i.getElementById(v);if(p){if(e){var s=V.current.getBoundingClientRect(),l=s.top,c=s.left,u=s.width,d=s.height;p.setAttribute("style","\n        top: ".concat(l,"px;\n        left: ").concat(c,"px;\n        width: ").concat(u,"px;\n        height: ").concat(d,"px;\n        position: absolute;\n      ")),L({appId:_.app.id,isModeEnabled:!0});var m=window.innerWidth!==document.body.clientWidth;document.body.classList.add("dc-isolated-app__body-overflow",m&&C.compensateScroll)}else p.setAttribute("style",""),ee();G.current=e}}},userUnits:Q}))})})}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};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useMemo, useRef, useState, useEffect, useContext, useCallback } from 'react';
+import classNames from 'classnames';
+import { withRouter } from 'react-router';
+import { noop } from 'lodash';
+import PropTypes from 'prop-types';
+import { DevCenterAppZoidComponent, APP_IFRAME_ATTRIBUTE } from './DevCenterAppZoidComponent.js';
+import { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants.js';
+import styles from './DevCenterIsolatedApp.module.css.js';
+import AppContext from '../AppContext.js';
+import usePermissionsContext from '../../../permissions/PermissionsContext.js';
+import '../../../permissions/constants/index.js';
+import '../../LoadingIndicator/LoadingIndicator.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import 'query-string';
+import '../../../clients/api/apiCore.js';
+import '../../../clients/constants.js';
+import '../../../permissions/ProvidePermissions.js';
+import { getUserUnits, subscribeForUserUnitsUpdates } from '../../../utils/index.js';
+import '../AppHeader/AppHeader.js';
+import '../AppSideBar/AppSideBar.js';
+import '../AppsDataProvider/AppsDataProvider.js';
+import DevCenterAppContainer 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 { isInsideNewMobileApp } from '../../../utils/mobileDetect.js';
+import { createDevCenterRouter, isCorvaApp, isIsolationEnabledInPackageManifest, isAppMaximized } from '../../../utils/devcenter.js';
+
+var _excluded = ["isIsolationFeatureEnabled", "onAppFullscreenTransparentMode", "onIsMaximizedChange", "onInnerContainerMouseEnter", "onInnerContainerMouseLeave", "onAppContainerClick", "setInnerContainerRefFn"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var PAGE_NAME = 'DevCenter_AppContainer';
+function DevCenterIsolatedAppComponent(_ref) {
+  var _props$router, _props$app, _props$app2, _props$router2, _props$router2$locati;
+  var isIsolationFeatureEnabled = _ref.isIsolationFeatureEnabled,
+    onAppFullscreenTransparentMode = _ref.onAppFullscreenTransparentMode,
+    onIsMaximizedChange = _ref.onIsMaximizedChange,
+    onInnerContainerMouseEnter = _ref.onInnerContainerMouseEnter,
+    onInnerContainerMouseLeave = _ref.onInnerContainerMouseLeave,
+    onAppContainerClick = _ref.onAppContainerClick,
+    setInnerContainerRefFn = _ref.setInnerContainerRefFn,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var devCenterRouter = useMemo(function () {
+    return createDevCenterRouter(props.router);
+  }, [(_props$router = props.router) === null || _props$router === void 0 ? void 0 : _props$router.location]);
+  var isNonIsolatedApp = isCorvaApp(props === null || props === void 0 ? void 0 : (_props$app = props.app) === null || _props$app === void 0 ? void 0 : _props$app.app) && !isIsolationEnabledInPackageManifest(props === null || props === void 0 ? void 0 : (_props$app2 = props.app) === null || _props$app2 === void 0 ? void 0 : _props$app2.package) || !isIsolationFeatureEnabled;
+  var DCAppComponent = isNonIsolatedApp ? DevCenterAppContainer : DevCenterAppZoidComponent;
+  var appIframeDocument = useRef();
+  var containerRef = useRef();
+  var fixedSizeContainerRef = useRef();
+  var modalModeRef = useRef(false);
+  var isAppMaximized$1 = isAppMaximized((_props$router2 = props.router) === null || _props$router2 === void 0 ? void 0 : (_props$router2$locati = _props$router2.location) === null || _props$router2$locati === void 0 ? void 0 : _props$router2$locati.query, props.app.id);
+  var _useState = useState(getUserUnits()),
+    _useState2 = _slicedToArray(_useState, 2),
+    userUnits = _useState2[0],
+    setUserUnits = _useState2[1];
+  useEffect(function () {
+    var unsubscribeFn = subscribeForUserUnitsUpdates(function (newUserUnits) {
+      return setUserUnits(newUserUnits);
+    });
+    return function () {
+      return unsubscribeFn();
+    };
+  }, []);
+  var appContextValue = useContext(AppContext);
+  var permissionsContextValue = usePermissionsContext();
+
+  /*
+  What is fullscreen modal mode?
+   Our apps, are shown in isolated iFrames. Because of it, when an app has some modal
+  and opens it - it's opened inside of its iframe, instead of opening at the center of the screen.
+   To make app modals & other elements be opened at the center of the screen, as if they are not inside of an iframe,
+  we use some hacks.
+   When the app wants to open a fullscreen element, we make its iframe fullscreen, but with transparent background,
+  and we set width/height & position of that app iframe to inner app container that is located inside of the iframe.
+  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
+  usual, not in fullscreen
+   So the platform provides this setIsFullscreenModalMode function to DC apps.
+  When DC app wants to open a modal that should be opened at the center of the screen - it needs to
+  call setIsFullscreenModalMode(true) first. And when it closes the modal - setIsFullscreenModalMode(false)
+   Two things are important about this
+  - all these styles that make this invisible background work should be applied at once
+  - enter and exit from the mode, shouldn't trigger even a single re-render, as it may impact
+    some elements inside the DC app
+  */
+
+  function handleAppFullscreenTransparentModeExit() {
+    onAppFullscreenTransparentMode({
+      appId: props.app.id,
+      isModeEnabled: false
+    });
+    document.body.classList.remove('dc-isolated-app__body-overflow', styles.compensateScroll);
+  }
+  function setIsFullscreenModalMode(nextIsFullscreenModalModeValue) {
+    var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4, _appIframeDocument$cu;
+    // When an app is already in fullscreen mode, no need to use this
+    // invisible fullscreen mode to make elements take the whole screen
+    if (!isIsolationFeatureEnabled || isNonIsolatedApp || isAppMaximized$1 || modalModeRef.current === nextIsFullscreenModalModeValue) {
+      return;
+    }
+    var classesEditMethod = nextIsFullscreenModalModeValue ? 'add' : 'remove';
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.classList[classesEditMethod](styles.containerMaximizedTransparent);
+    appIframeDocument.current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : (_containerRef$current3 = _containerRef$current2.querySelector("[".concat(APP_IFRAME_ATTRIBUTE, "]"))) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.contentWindow) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.document;
+    var isolatedPageAppContainer = (_appIframeDocument$cu = appIframeDocument.current) === null || _appIframeDocument$cu === void 0 ? void 0 : _appIframeDocument$cu.getElementById(ISOLATED_PAGE_APP_CONTAINER_ID);
+    if (!isolatedPageAppContainer) {
+      return;
+    }
+    if (nextIsFullscreenModalModeValue) {
+      var _fixedSizeContainerRe = fixedSizeContainerRef.current.getBoundingClientRect(),
+        top = _fixedSizeContainerRe.top,
+        left = _fixedSizeContainerRe.left,
+        width = _fixedSizeContainerRe.width,
+        height = _fixedSizeContainerRe.height;
+
+      // We need to directly set inner iFrame container sizes together with DC platform styles
+      // as passing this as props and using some effect inside of an iframe
+      // results in a slight delay, which looks like a quick layout jump
+      isolatedPageAppContainer.setAttribute('style', "\n        top: ".concat(top, "px;\n        left: ").concat(left, "px;\n        width: ").concat(width, "px;\n        height: ").concat(height, "px;\n        position: absolute;\n      "));
+      onAppFullscreenTransparentMode({
+        appId: props.app.id,
+        isModeEnabled: true
+      });
+      var isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;
+      document.body.classList.add('dc-isolated-app__body-overflow', isBodyScrollVisible && styles.compensateScroll);
+    } else {
+      isolatedPageAppContainer.setAttribute('style', '');
+      handleAppFullscreenTransparentModeExit();
+    }
+    modalModeRef.current = nextIsFullscreenModalModeValue;
+  }
+  useEffect(function () {
+    return handleAppFullscreenTransparentModeExit;
+  }, []);
+
+  /**
+   * This should be the same function as calling react-intersection-observer's ref setter actually triggers re-render.
+   * Which in its turn causes infinite re-render loop.
+   */
+  var setContainerRefs = useCallback(function (node) {
+    containerRef.current = node;
+    setInnerContainerRefFn(node);
+  }, []);
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('dc-isolated-app', styles.fixedSizeContainer),
+    ref: fixedSizeContainerRef,
+    children: /*#__PURE__*/jsx("div", {
+      ref: setContainerRefs,
+      onMouseEnter: onInnerContainerMouseEnter,
+      onMouseLeave: onInnerContainerMouseLeave,
+      "data-testid": "".concat(PAGE_NAME, "_").concat(props.app.app.name),
+      className: classNames(styles.container, isInsideNewMobileApp && styles.newMobileAppContainer, isAppMaximized$1 && styles.containerMaximized),
+      children: /*#__PURE__*/jsx(DCAppComponent, _objectSpread(_objectSpread({}, props), {}, {
+        appContextValue: appContextValue,
+        devCenterRouter: devCenterRouter,
+        globalNotificationToastsAPI: window[Symbol.for('notificationToasts')],
+        globalMixpanelEventTracker: window[Symbol.for('logToMixpanel')],
+        onAppContainerClick: onAppContainerClick,
+        onIsMaximizedChange: onIsMaximizedChange,
+        permissionsContextValue: permissionsContextValue,
+        setIsFullscreenModalMode: setIsFullscreenModalMode,
+        userUnits: userUnits
+      }))
+    })
+  });
+}
+DevCenterIsolatedAppComponent.propTypes = {
+  app: PropTypes.shape({
+    id: PropTypes.number,
+    app: PropTypes.shape({
+      name: PropTypes.string
+    })
+  }).isRequired,
+  currentUser: PropTypes.shape({}).isRequired,
+  isIsolationFeatureEnabled: PropTypes.bool,
+  onAppContainerClick: PropTypes.func,
+  onAppFullscreenTransparentMode: PropTypes.func,
+  onAppRemove: PropTypes.func,
+  onInnerContainerMouseEnter: PropTypes.func,
+  onInnerContainerMouseLeave: PropTypes.func,
+  onIsMaximizedChange: PropTypes.func,
+  onSettingChange: PropTypes.func,
+  onSettingsChange: PropTypes.func,
+  setInnerContainerRefFn: PropTypes.func,
+  updateCurrentDashboardAppLastAnnotation: PropTypes.func
+};
+DevCenterIsolatedAppComponent.defaultProps = {
+  isIsolationFeatureEnabled: false,
+  onAppContainerClick: noop,
+  onAppFullscreenTransparentMode: noop,
+  onAppRemove: noop,
+  onInnerContainerMouseEnter: noop,
+  onInnerContainerMouseLeave: noop,
+  onIsMaximizedChange: noop,
+  onSettingChange: noop,
+  onSettingsChange: noop,
+  setInnerContainerRefFn: noop,
+  updateCurrentDashboardAppLastAnnotation: noop
+};
+var DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);
+
+export { DevCenterIsolatedApp };
+//# sourceMappingURL=DevCenterIsolatedApp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevCenterIsolatedApp.js","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"],"sourcesContent":["import { useContext, useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { withRouter } from 'react-router';\nimport { noop } from 'lodash';\nimport PropTypes from 'prop-types';\n\nimport { DevCenterAppZoidComponent, APP_IFRAME_ATTRIBUTE } from './DevCenterAppZoidComponent';\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 : DevCenterAppZoidComponent;\n\n  const appIframeDocument = useRef();\n  const containerRef = useRef();\n  const fixedSizeContainerRef = useRef();\n  const modalModeRef = useRef(false);\n\n  const isAppMaximized = devCenterUtils.isAppMaximized(props.router?.location?.query, props.app.id);\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\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  function setIsFullscreenModalMode(nextIsFullscreenModalModeValue) {\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      isAppMaximized ||\n      modalModeRef.current === nextIsFullscreenModalModeValue\n    ) {\n      return;\n    }\n\n    const classesEditMethod = nextIsFullscreenModalModeValue ? 'add' : 'remove';\n\n    containerRef.current?.classList[classesEditMethod](styles.containerMaximizedTransparent);\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    modalModeRef.current = nextIsFullscreenModalModeValue;\n  }\n\n  useEffect(() => {\n    return handleAppFullscreenTransparentModeExit;\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('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":["PAGE_NAME","DevCenterIsolatedAppComponent","isIsolationFeatureEnabled","onAppFullscreenTransparentMode","onIsMaximizedChange","onInnerContainerMouseEnter","onInnerContainerMouseLeave","onAppContainerClick","setInnerContainerRefFn","props","devCenterRouter","useMemo","devCenterUtils","router","location","isNonIsolatedApp","app","package","DCAppComponent","DevCenterAppContainer","DevCenterAppZoidComponent","appIframeDocument","useRef","containerRef","fixedSizeContainerRef","modalModeRef","isAppMaximized","query","id","useState","getUserUnits","userUnits","setUserUnits","useEffect","unsubscribeFn","subscribeForUserUnitsUpdates","newUserUnits","appContextValue","useContext","AppContext","permissionsContextValue","usePermissionsContext","handleAppFullscreenTransparentModeExit","appId","isModeEnabled","document","body","classList","remove","styles","compensateScroll","setIsFullscreenModalMode","nextIsFullscreenModalModeValue","current","classesEditMethod","containerMaximizedTransparent","querySelector","APP_IFRAME_ATTRIBUTE","contentWindow","isolatedPageAppContainer","getElementById","ISOLATED_PAGE_APP_CONTAINER_ID","getBoundingClientRect","top","left","width","height","setAttribute","isBodyScrollVisible","window","innerWidth","clientWidth","add","setContainerRefs","useCallback","node","_jsx","classNames","fixedSizeContainer","name","container","isInsideNewMobileApp","newMobileAppContainer","containerMaximized","Symbol","for","propTypes","PropTypes","shape","number","string","isRequired","currentUser","bool","func","onAppRemove","onSettingChange","onSettingsChange","updateCurrentDashboardAppLastAnnotation","defaultProps","noop","DevCenterIsolatedApp","withRouter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,SAAS,GAAG,wBAAwB,CAAA;AAE1C,SAASC,6BAA6B,CASnC,IAAA,EAAA;AAAA,EAAA,IAAA,aAAA,EAAA,UAAA,EAAA,WAAA,EAAA,cAAA,EAAA,qBAAA,CAAA;EAAA,IARDC,yBAAyB,QAAzBA,yBAAyB;AACzBC,IAAAA,8BAA8B,QAA9BA,8BAA8B;AAC9BC,IAAAA,mBAAmB,QAAnBA,mBAAmB;AACnBC,IAAAA,0BAA0B,QAA1BA,0BAA0B;AAC1BC,IAAAA,0BAA0B,QAA1BA,0BAA0B;AAC1BC,IAAAA,mBAAmB,QAAnBA,mBAAmB;AACnBC,IAAAA,sBAAsB,QAAtBA,sBAAsB;IACnBC,KAAK,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;EAER,IAAMC,eAAe,GAAGC,OAAO,CAC7B,YAAA;AAAA,IAAA,OAAMC,qBAAoC,CAACH,KAAK,CAACI,MAAM,CAAC,CAAA;GACxD,EAAA,CAAA,CAAA,aAAA,GAACJ,KAAK,CAACI,MAAM,kDAAZ,aAAcC,CAAAA,QAAQ,CAAC,CACzB,CAAA;AAED,EAAA,IAAMC,gBAAgB,GACnBH,UAAyB,CAACH,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,UAAA,GAALA,KAAK,CAAEO,GAAG,MAAV,IAAA,IAAA,UAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAYA,GAAG,CAAC,IACzC,CAACJ,mCAAkD,CAACH,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,WAAAA,GAAAA,KAAK,CAAEO,GAAG,gDAAV,WAAYC,CAAAA,OAAO,CAAC,IAC1E,CAACf,yBAAyB,CAAA;AAE5B,EAAA,IAAMgB,cAAc,GAAGH,gBAAgB,GAAGI,qBAAqB,GAAGC,yBAAyB,CAAA;EAE3F,IAAMC,iBAAiB,GAAGC,MAAM,EAAE,CAAA;EAClC,IAAMC,YAAY,GAAGD,MAAM,EAAE,CAAA;EAC7B,IAAME,qBAAqB,GAAGF,MAAM,EAAE,CAAA;AACtC,EAAA,IAAMG,YAAY,GAAGH,MAAM,CAAC,KAAK,CAAC,CAAA;EAElC,IAAMI,gBAAc,GAAGd,cAA6B,CAACH,CAAAA,cAAAA,GAAAA,KAAK,CAACI,MAAM,MAAA,IAAA,IAAA,cAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,qBAAA,GAAZ,eAAcC,QAAQ,MAAA,IAAA,IAAA,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAtB,sBAAwBa,KAAK,EAAElB,KAAK,CAACO,GAAG,CAACY,EAAE,CAAC,CAAA;AAEjG,EAAA,IAAA,SAAA,GAAkCC,QAAQ,CAACC,YAAY,EAAE,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,SAAA,EAAA,CAAA,CAAA;IAAnDC,SAAS,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,YAAY,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;AAE9BC,EAAAA,SAAS,CAAC,YAAM;AACd,IAAA,IAAMC,aAAa,GAAGC,4BAA4B,CAAC,UAAAC,YAAY,EAAA;MAAA,OAAIJ,YAAY,CAACI,YAAY,CAAC,CAAA;KAAC,CAAA,CAAA;IAE9F,OAAO,YAAA;AAAA,MAAA,OAAMF,aAAa,EAAE,CAAA;AAAA,KAAA,CAAA;GAC7B,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,IAAMG,eAAe,GAAGC,UAAU,CAACC,UAAU,CAAC,CAAA;EAC9C,IAAMC,uBAAuB,GAAGC,qBAAqB,EAAE,CAAA;;AAEvD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOE,EAAA,SAASC,sCAAsC,GAAG;AAChDvC,IAAAA,8BAA8B,CAAC;AAAEwC,MAAAA,KAAK,EAAElC,KAAK,CAACO,GAAG,CAACY,EAAE;AAAEgB,MAAAA,aAAa,EAAE,KAAA;AAAM,KAAC,CAAC,CAAA;AAC7EC,IAAAA,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,MAAM,CAAC,gCAAgC,EAAEC,MAAM,CAACC,gBAAgB,CAAC,CAAA;AAC3F,GAAA;EAEA,SAASC,wBAAwB,CAACC,8BAA8B,EAAE;AAAA,IAAA,IAAA,qBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,qBAAA,CAAA;AAChE;AACA;AACA,IAAA,IACE,CAAClD,yBAAyB,IAC1Ba,gBAAgB,IAChBW,gBAAc,IACdD,YAAY,CAAC4B,OAAO,KAAKD,8BAA8B,EACvD;AACA,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAME,iBAAiB,GAAGF,8BAA8B,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE3E,IAAA,CAAA,qBAAA,GAAA7B,YAAY,CAAC8B,OAAO,MAAA,IAAA,IAAA,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApB,qBAAsBN,CAAAA,SAAS,CAACO,iBAAiB,CAAC,CAACL,MAAM,CAACM,6BAA6B,CAAC,CAAA;AAExFlC,IAAAA,iBAAiB,CAACgC,OAAO,GAAA,CAAA,sBAAA,GAAG9B,YAAY,CAAC8B,OAAO,MAApB,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,sBAAA,GAAA,sBAAA,CAAsBG,aAAa,CAAA,GAAA,CAAA,MAAA,CACzDC,oBAAoB,EACzB,GAAA,CAAA,CAAA,MAAA,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,sBAAA,GAF2B,uBAEzBC,aAAa,MAAA,IAAA,IAAA,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAFY,uBAEVb,QAAQ,CAAA;IAE1B,IAAMc,wBAAwB,GAAGtC,CAAAA,qBAAAA,GAAAA,iBAAiB,CAACgC,OAAO,0DAAzB,qBAA2BO,CAAAA,cAAc,CACxEC,8BAA8B,CAC/B,CAAA;IAED,IAAI,CAACF,wBAAwB,EAAE;AAC7B,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIP,8BAA8B,EAAE;AAClC,MAAA,IAAA,qBAAA,GAAqC5B,qBAAqB,CAAC6B,OAAO,CAACS,qBAAqB,EAAE;AAAlFC,QAAAA,GAAG,yBAAHA,GAAG;AAAEC,QAAAA,IAAI,yBAAJA,IAAI;AAAEC,QAAAA,KAAK,yBAALA,KAAK;AAAEC,QAAAA,MAAM,yBAANA,MAAM,CAAA;;AAEhC;AACA;AACA;AACAP,MAAAA,wBAAwB,CAACQ,YAAY,CACnC,OAAO,EAEAJ,iBAAAA,CAAAA,MAAAA,CAAAA,GAAG,EACFC,qBAAAA,CAAAA,CAAAA,MAAAA,CAAAA,IAAI,EACHC,sBAAAA,CAAAA,CAAAA,MAAAA,CAAAA,KAAK,EACJC,uBAAAA,CAAAA,CAAAA,MAAAA,CAAAA,MAAM,EAGjB,0CAAA,CAAA,CAAA,CAAA;AACD/D,MAAAA,8BAA8B,CAAC;AAAEwC,QAAAA,KAAK,EAAElC,KAAK,CAACO,GAAG,CAACY,EAAE;AAAEgB,QAAAA,aAAa,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;MAC5E,IAAMwB,mBAAmB,GAAGC,MAAM,CAACC,UAAU,KAAKzB,QAAQ,CAACC,IAAI,CAACyB,WAAW,CAAA;AAC3E1B,MAAAA,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACyB,GAAG,CACzB,gCAAgC,EAChCJ,mBAAmB,IAAInB,MAAM,CAACC,gBAAgB,CAC/C,CAAA;AACH,KAAC,MAAM;AACLS,MAAAA,wBAAwB,CAACQ,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AAClDzB,MAAAA,sCAAsC,EAAE,CAAA;AAC1C,KAAA;IACAjB,YAAY,CAAC4B,OAAO,GAAGD,8BAA8B,CAAA;AACvD,GAAA;AAEAnB,EAAAA,SAAS,CAAC,YAAM;AACd,IAAA,OAAOS,sCAAsC,CAAA;GAC9C,EAAE,EAAE,CAAC,CAAA;;AAEN;AACF;AACA;AACA;AACE,EAAA,IAAM+B,gBAAgB,GAAGC,WAAW,CAAC,UAAAC,IAAI,EAAI;IAC3CpD,YAAY,CAAC8B,OAAO,GAAGsB,IAAI,CAAA;IAC3BnE,sBAAsB,CAACmE,IAAI,CAAC,CAAA;GAC7B,EAAE,EAAE,CAAC,CAAA;EAEN,oBACEC,GAAA,CAAA,KAAA,EAAA;IACE,SAAS,EAAEC,UAAU,CAAC,iBAAiB,EAAE5B,MAAM,CAAC6B,kBAAkB,CAAE;AACpE,IAAA,GAAG,EAAEtD,qBAAsB;IAAA,QAE3B,eAAAoD,GAAA,CAAA,KAAA,EAAA;AACE,MAAA,GAAG,EAAEH,gBAAiB;AACtB,MAAA,YAAY,EAAEpE,0BAA2B;AACzC,MAAA,YAAY,EAAEC,0BAA2B;MACzC,aAAgBN,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,SAAS,cAAIS,KAAK,CAACO,GAAG,CAACA,GAAG,CAAC+D,IAAI,CAAG;AAClD,MAAA,SAAS,EAAEF,UAAU,CACnB5B,MAAM,CAAC+B,SAAS,EAChBC,oBAAoB,IAAIhC,MAAM,CAACiC,qBAAqB,EACpDxD,gBAAc,IAAIuB,MAAM,CAACkC,kBAAkB,CAC3C;MAAA,QAEF,eAAAP,GAAA,CAAC,cAAc,EAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EACTnE,KAAK,CAAA,EAAA,EAAA,EAAA;AACT,QAAA,eAAe,EAAE4B,eAAgB;AACjC,QAAA,eAAe,EAAE3B,eAAgB;QACjC,2BAA2B,EAAE2D,MAAM,CAACe,MAAM,CAACC,GAAG,CAAC,oBAAoB,CAAC,CAAE;QACtE,0BAA0B,EAAEhB,MAAM,CAACe,MAAM,CAACC,GAAG,CAAC,eAAe,CAAC,CAAE;AAChE,QAAA,mBAAmB,EAAE9E,mBAAoB;AACzC,QAAA,mBAAmB,EAAEH,mBAAoB;AACzC,QAAA,uBAAuB,EAAEoC,uBAAwB;AACjD,QAAA,wBAAwB,EAAEW,wBAAyB;AACnD,QAAA,SAAS,EAAEpB,SAAAA;AAAU,OAAA,CAAA,CAAA;AACrB,KAAA,CAAA;GAEA,CAAA,CAAA;AAEV,CAAA;AAEA9B,6BAA6B,CAACqF,SAAS,GAAG;AACxCtE,EAAAA,GAAG,EAAEuE,SAAS,CAACC,KAAK,CAAC;IACnB5D,EAAE,EAAE2D,SAAS,CAACE,MAAM;AACpBzE,IAAAA,GAAG,EAAEuE,SAAS,CAACC,KAAK,CAAC;MACnBT,IAAI,EAAEQ,SAAS,CAACG,MAAAA;KACjB,CAAA;GACF,CAAC,CAACC,UAAU;EACbC,WAAW,EAAEL,SAAS,CAACC,KAAK,CAAC,EAAE,CAAC,CAACG,UAAU;EAC3CzF,yBAAyB,EAAEqF,SAAS,CAACM,IAAI;EACzCtF,mBAAmB,EAAEgF,SAAS,CAACO,IAAI;EACnC3F,8BAA8B,EAAEoF,SAAS,CAACO,IAAI;EAC9CC,WAAW,EAAER,SAAS,CAACO,IAAI;EAC3BzF,0BAA0B,EAAEkF,SAAS,CAACO,IAAI;EAC1CxF,0BAA0B,EAAEiF,SAAS,CAACO,IAAI;EAC1C1F,mBAAmB,EAAEmF,SAAS,CAACO,IAAI;EACnCE,eAAe,EAAET,SAAS,CAACO,IAAI;EAC/BG,gBAAgB,EAAEV,SAAS,CAACO,IAAI;EAChCtF,sBAAsB,EAAE+E,SAAS,CAACO,IAAI;EACtCI,uCAAuC,EAAEX,SAAS,CAACO,IAAAA;AACrD,CAAC,CAAA;AAED7F,6BAA6B,CAACkG,YAAY,GAAG;AAC3CjG,EAAAA,yBAAyB,EAAE,KAAK;AAChCK,EAAAA,mBAAmB,EAAE6F,IAAI;AACzBjG,EAAAA,8BAA8B,EAAEiG,IAAI;AACpCL,EAAAA,WAAW,EAAEK,IAAI;AACjB/F,EAAAA,0BAA0B,EAAE+F,IAAI;AAChC9F,EAAAA,0BAA0B,EAAE8F,IAAI;AAChChG,EAAAA,mBAAmB,EAAEgG,IAAI;AACzBJ,EAAAA,eAAe,EAAEI,IAAI;AACrBH,EAAAA,gBAAgB,EAAEG,IAAI;AACtB5F,EAAAA,sBAAsB,EAAE4F,IAAI;AAC5BF,EAAAA,uCAAuC,EAAEE,IAAAA;AAC3C,CAAC,CAAA;IAEYC,oBAAoB,GAAGC,UAAU,CAACrG,6BAA6B;;;;"}

package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage.js

@@ -1 +1,172 @@
-import o from"@babel/runtime/helpers/defineProperty";import s from"@babel/runtime/helpers/objectWithoutProperties";import{useEffect as t,useRef as e}from"react";import n from"prop-types";import{makeStyles as r}from"@material-ui/core";import i from"classnames";import c from"moment-timezone";import{useXProps as p}from"./effects/useXProps.js";import{ISOLATED_PAGE_APP_CONTAINER_ID as m}from"./constants.js";import{replaceUndefinedValuesWithNull as l}from"./utils/replaceUndefinedValuesWithNull.js";import{IsInsideIsolatedDcAppProvider as a}from"../DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider/IsInsideIsolatedDcAppProvider.js";import u from"../DevCenterAppContainer/DevCenterAppContainer.js";import{jsx as j}from"react/jsx-runtime";import"@icon-park/react/es/all";import{IconParkProvider as d}from"../../../icons/IconParkProvider.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/Gap.js";import f from"../../../hocs/withMUIProvidersHOC.js";import"../../../hocs/withAssetEditorLockHOC.js";import C from"../AppContext.js";import{THEMES as I}from"../../../constants/theme.js";import{LOCAL_STORAGE_APP_THEME_KEY as b}from"../../../CLI/hocs/constants.js";import{setThemeVariables as g}from"../../../utils/themeVariables.js";import{isPDFReportView as h}from"../../../CLI/hocs/utils.js";import{PermissionsContext as v}from"../../../permissions/PermissionsContext.js";import{updateUserUnits as y}from"../../../utils/index.js";import"../../../config/initGlobalDependencies.js";import"../../../styles/iconPark.global.css.js";import"../../../styles/index.global.css.js";import"../../../styles/reactVirtualized.global.css.js";import"../../../styles/emojiMart.global.css.js";import"../../../styles/mapbox.global.css.js";import"../../../styles/lightbox.global.css.js";import"../../../styles/generatedThemesVariables.global.css.js";import"../../../styles/customScrollbars.global.css.js";import"./DevCenterAppZoidComponent.js";var P=["appContextValue","globalMixpanelEventTracker","globalNotificationToastsAPI","onSettingChange","onSettingsChange","permissionsContextValue","timezone","userUnits"];function A(o,s){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);s&&(e=e.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),t.push.apply(t,e)}return t}function O(s){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?A(Object(e),!0).forEach((function(t){o(s,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(e)):A(Object(e)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(e,o))}))}return s}var x=f(u),S=r((function(){return{"@global":{body:{backgroundColor:"transparent",overflow:"hidden"}}}}));function D(o){var n,r,u,f=o.CLIAppComponent,A=o.CLIAppSettings,D=o.containerReportClassName;S();var L=p(),k=L.appContextValue,w=L.globalMixpanelEventTracker,T=L.globalNotificationToastsAPI,E=L.onSettingChange,M=L.onSettingsChange,R=L.permissionsContextValue,V=L.timezone,F=L.userUnits,N=s(L,P),z=N.location.pathname.startsWith("/reports/")||h,U=localStorage.getItem(b)||(null===(n=N.currentUser)||void 0===n||null===(r=n.settings)||void 0===r||null===(u=r.uiSettings)||void 0===u?void 0:u.theme)||I.DARK,G=!z&&U!==I.LIGHT;t((function(){g(G)}),[G]),t((function(){window[Symbol.for("notificationToasts")]=T,window[Symbol.for("logToMixpanel")]=w}),[T,w]);var H=e(!0);return(H.current||z)&&(H.current=!1,y({userUnits:F})),t((function(){return V&&c.tz.setDefault(V),function(){return c.tz.setDefault(null)}}),[V]),j(v.Provider,{value:R,children:j(C.Provider,{value:k,children:j(a,{value:!0,children:j(d,{children:j("div",{id:m,className:i(z&&D),children:j(x,O(O({},N),{},{theme:G?I.DARK:I.LIGHT,onSettingsChange:function(o){return M(l(o))},onSettingChange:function(o,s){return E(o,l(s))},CLIAppComponent:f,CLIAppSettings:A}))})})})})})}D.propTypes={CLIAppComponent:n.func,CLIAppSettings:n.func,containerReportClassName:n.string},D.defaultProps={CLIAppComponent:null,CLIAppSettings:null,containerReportClassName:null};export{D as DevCenterIsolatedAppPage};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+import classNames from 'classnames';
+import moment from 'moment-timezone';
+import { useXProps } from './effects/useXProps.js';
+import { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants.js';
+import { replaceUndefinedValuesWithNull } from './utils/replaceUndefinedValuesWithNull.js';
+import { IsInsideIsolatedDcAppProvider } from '../DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider/IsInsideIsolatedDcAppProvider.js';
+import DevCenterAppContainer from '../DevCenterAppContainer/DevCenterAppContainer.js';
+import '@icon-park/react/es/all';
+import { jsx } from 'react/jsx-runtime';
+import { IconParkProvider } from '../../../icons/IconParkProvider.js';
+import '../../../icons/customIcons/icons/AddMessage.js';
+import '../../../icons/customIcons/icons/Attention.js';
+import '../../../icons/customIcons/icons/Collapse.js';
+import '../../../icons/customIcons/icons/Dashboard.js';
+import '../../../icons/customIcons/icons/Expand.js';
+import '../../../icons/customIcons/icons/FolderClosed.js';
+import '../../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../../icons/customIcons/icons/FolderOpened.js';
+import '../../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../../icons/customIcons/icons/LessOrEqual.js';
+import '../../../icons/customIcons/icons/Search.js';
+import '../../../icons/customIcons/icons/Wellhub.js';
+import '../../../icons/customIcons/icons/MultiRuler.js';
+import '../../../icons/customIcons/icons/Checkbox.js';
+import '../../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../../icons/customIcons/icons/Radio.js';
+import '../../../icons/customIcons/icons/RadioChecked.js';
+import '../../../icons/customIcons/icons/SimulFrac.js';
+import '../../../icons/customIcons/icons/ZipperFrac.js';
+import '../../../icons/customIcons/icons/CautionFilled.js';
+import '../../../icons/customIcons/icons/MoreApp.js';
+import '../../../icons/customIcons/icons/Pad.js';
+import '../../../icons/customIcons/icons/Gap.js';
+import withMUIProvidersHOC from '../../../hocs/withMUIProvidersHOC.js';
+import '../../../hocs/withAssetEditorLockHOC.js';
+import AppContext from '../AppContext.js';
+import { THEMES } from '../../../constants/theme.js';
+import { LOCAL_STORAGE_APP_THEME_KEY } from '../../../CLI/hocs/constants.js';
+import { setThemeVariables } from '../../../utils/themeVariables.js';
+import { isPDFReportView } from '../../../CLI/hocs/utils.js';
+import { PermissionsContext } from '../../../permissions/PermissionsContext.js';
+import { updateUserUnits } from '../../../utils/index.js';
+import '../../../config/initGlobalDependencies.js';
+import '../../../styles/iconPark.global.css.js';
+import '../../../styles/index.global.css.js';
+import '../../../styles/reactVirtualized.global.css.js';
+import '../../../styles/emojiMart.global.css.js';
+import '../../../styles/mapbox.global.css.js';
+import '../../../styles/lightbox.global.css.js';
+import '../../../styles/generatedThemesVariables.global.css.js';
+import '../../../styles/customScrollbars.global.css.js';
+import './DevCenterAppZoidComponent.js';
+
+var _excluded = ["appContextValue", "globalMixpanelEventTracker", "globalNotificationToastsAPI", "onSettingChange", "onSettingsChange", "permissionsContextValue", "timezone", "userUnits"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var DevCenterAppContainerWithMUI = withMUIProvidersHOC(DevCenterAppContainer);
+
+/**
+ * It's important to keep these global styles in js, to apply only
+ * when the component is actually used, if moved to CSS - they'll be
+ * applied to whatever somehow imports the code
+ */
+var useStyles = makeStyles(function () {
+  return {
+    '@global': {
+      body: {
+        backgroundColor: 'transparent',
+        overflow: 'hidden'
+      }
+    }
+  };
+});
+
+/**
+ * Root component that is rendered inside of app's iframe.
+ * Receives CLIAppComponent, CLIAppSettings when used
+ * in local development
+ */
+function DevCenterIsolatedAppPage(_ref) {
+  var _xProps$currentUser, _xProps$currentUser$s, _xProps$currentUser$s2;
+  var CLIAppComponent = _ref.CLIAppComponent,
+    CLIAppSettings = _ref.CLIAppSettings,
+    containerReportClassName = _ref.containerReportClassName;
+  useStyles();
+  var _useXProps = useXProps(),
+    appContextValue = _useXProps.appContextValue,
+    globalMixpanelEventTracker = _useXProps.globalMixpanelEventTracker,
+    globalNotificationToastsAPI = _useXProps.globalNotificationToastsAPI,
+    _onSettingChange = _useXProps.onSettingChange,
+    _onSettingsChange = _useXProps.onSettingsChange,
+    permissionsContextValue = _useXProps.permissionsContextValue,
+    timezone = _useXProps.timezone,
+    userUnits = _useXProps.userUnits,
+    xProps = _objectWithoutProperties(_useXProps, _excluded);
+  var isReportsPage = xProps.location.pathname.startsWith('/reports/') || isPDFReportView;
+
+  // Force light theme for PDF reports view
+  var selectedTheme = localStorage.getItem(LOCAL_STORAGE_APP_THEME_KEY) || ((_xProps$currentUser = xProps.currentUser) === null || _xProps$currentUser === void 0 ? void 0 : (_xProps$currentUser$s = _xProps$currentUser.settings) === null || _xProps$currentUser$s === void 0 ? void 0 : (_xProps$currentUser$s2 = _xProps$currentUser$s.uiSettings) === null || _xProps$currentUser$s2 === void 0 ? void 0 : _xProps$currentUser$s2.theme) || THEMES.DARK;
+  var isDarkTheme = !isReportsPage && selectedTheme !== THEMES.LIGHT;
+  useEffect(function () {
+    setThemeVariables(isDarkTheme);
+  }, [isDarkTheme]);
+  useEffect(function () {
+    window[Symbol.for('notificationToasts')] = globalNotificationToastsAPI;
+    window[Symbol.for('logToMixpanel')] = globalMixpanelEventTracker;
+  }, [globalNotificationToastsAPI, globalMixpanelEventTracker]);
+  var isFirstRenderRef = useRef(true);
+  if (isFirstRenderRef.current || isReportsPage) {
+    isFirstRenderRef.current = false;
+    updateUserUnits({
+      userUnits: userUnits
+    });
+  }
+  useEffect(function () {
+    if (timezone) moment.tz.setDefault(timezone);
+    return function () {
+      return moment.tz.setDefault(null);
+    };
+  }, [timezone]);
+  return /*#__PURE__*/jsx(PermissionsContext.Provider, {
+    value: permissionsContextValue,
+    children: /*#__PURE__*/jsx(AppContext.Provider, {
+      value: appContextValue,
+      children: /*#__PURE__*/jsx(IsInsideIsolatedDcAppProvider, {
+        value: true,
+        children: /*#__PURE__*/jsx(IconParkProvider, {
+          children: /*#__PURE__*/jsx("div", {
+            id: ISOLATED_PAGE_APP_CONTAINER_ID,
+            className: classNames(isReportsPage && containerReportClassName),
+            children: /*#__PURE__*/jsx(DevCenterAppContainerWithMUI, _objectSpread(_objectSpread({}, xProps), {}, {
+              theme: isDarkTheme ? THEMES.DARK : THEMES.LIGHT
+              // zoid serializes passed arguments using JSON.stringify.
+              // All undefined values are removed as they are not valid JSON values
+              // so we replace undefined values with null to not drop them
+              // Any future cb function that passes arbitrary objects as args
+              // also should be wrapped in this mapper
+              ,
+              onSettingsChange: function onSettingsChange(nextSettings) {
+                return _onSettingsChange(replaceUndefinedValuesWithNull(nextSettings));
+              },
+              onSettingChange: function onSettingChange(key, value) {
+                return _onSettingChange(key, replaceUndefinedValuesWithNull(value));
+              },
+              CLIAppComponent: CLIAppComponent,
+              CLIAppSettings: CLIAppSettings
+            }))
+          })
+        })
+      })
+    })
+  });
+}
+DevCenterIsolatedAppPage.propTypes = {
+  CLIAppComponent: PropTypes.func,
+  CLIAppSettings: PropTypes.func,
+  containerReportClassName: PropTypes.string
+};
+DevCenterIsolatedAppPage.defaultProps = {
+  CLIAppComponent: null,
+  CLIAppSettings: null,
+  containerReportClassName: null
+};
+
+export { DevCenterIsolatedAppPage };
+//# sourceMappingURL=DevCenterIsolatedAppPage.js.map

package/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevCenterIsolatedAppPage.js","sources":["../../../../src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage.js"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/core';\nimport classNames from 'classnames';\nimport moment from 'moment-timezone';\n\nimport { useXProps } from './effects/useXProps';\nimport { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';\nimport { replaceUndefinedValuesWithNull } from './utils/replaceUndefinedValuesWithNull';\n\nimport { IsInsideIsolatedDcAppProvider } from '~/components/DevCenter/DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider';\nimport DevCenterAppContainer from '~/components/DevCenter/DevCenterAppContainer';\nimport { IconParkProvider } from '~/icons';\nimport { withMUIProvidersHOC } from '~/hocs';\nimport AppContext from '~/components/DevCenter/AppContext';\nimport { THEMES } from '~/constants/theme';\nimport { LOCAL_STORAGE_APP_THEME_KEY } from '~/CLI/hocs/constants';\nimport { setThemeVariables } from '~/utils/themeVariables';\nimport { isPDFReportView } from '~/CLI/hocs/utils';\nimport { PermissionsContext } from '~/permissions/PermissionsContext';\nimport { updateUserUnits } from '~/utils';\nimport '~/config/initGlobalDependencies';\nimport '~/styles/globalStyles';\n\nimport './DevCenterAppZoidComponent';\n\nconst DevCenterAppContainerWithMUI = withMUIProvidersHOC(DevCenterAppContainer);\n\n/**\n * It's important to keep these global styles in js, to apply only\n * when the component is actually used, if moved to CSS - they'll be\n * applied to whatever somehow imports the code\n */\nconst useStyles = makeStyles(() => ({\n  '@global': {\n    body: {\n      backgroundColor: 'transparent',\n      overflow: 'hidden',\n    },\n  },\n}));\n\n/**\n * Root component that is rendered inside of app's iframe.\n * Receives CLIAppComponent, CLIAppSettings when used\n * in local development\n */\nexport function DevCenterIsolatedAppPage({\n  CLIAppComponent,\n  CLIAppSettings,\n  containerReportClassName,\n}) {\n  useStyles();\n\n  const {\n    appContextValue,\n    globalMixpanelEventTracker,\n    globalNotificationToastsAPI,\n    onSettingChange,\n    onSettingsChange,\n    permissionsContextValue,\n    timezone,\n    userUnits,\n    ...xProps\n  } = useXProps();\n  const isReportsPage = xProps.location.pathname.startsWith('/reports/') || isPDFReportView;\n\n  // Force light theme for PDF reports view\n  const selectedTheme =\n    localStorage.getItem(LOCAL_STORAGE_APP_THEME_KEY) ||\n    xProps.currentUser?.settings?.uiSettings?.theme ||\n    THEMES.DARK;\n  const isDarkTheme = !isReportsPage && selectedTheme !== THEMES.LIGHT;\n\n  useEffect(() => {\n    setThemeVariables(isDarkTheme);\n  }, [isDarkTheme]);\n\n  useEffect(() => {\n    window[Symbol.for('notificationToasts')] = globalNotificationToastsAPI;\n    window[Symbol.for('logToMixpanel')] = globalMixpanelEventTracker;\n  }, [globalNotificationToastsAPI, globalMixpanelEventTracker]);\n\n  const isFirstRenderRef = useRef(true);\n  if (isFirstRenderRef.current || isReportsPage) {\n    isFirstRenderRef.current = false;\n    updateUserUnits({ userUnits });\n  }\n\n  useEffect(() => {\n    if (timezone) moment.tz.setDefault(timezone);\n    return () => moment.tz.setDefault(null);\n  }, [timezone]);\n\n  return (\n    <PermissionsContext.Provider value={permissionsContextValue}>\n      <AppContext.Provider value={appContextValue}>\n        <IsInsideIsolatedDcAppProvider value>\n          <IconParkProvider>\n            <div\n              id={ISOLATED_PAGE_APP_CONTAINER_ID}\n              className={classNames(isReportsPage && containerReportClassName)}\n            >\n              <DevCenterAppContainerWithMUI\n                {...xProps}\n                theme={isDarkTheme ? THEMES.DARK : THEMES.LIGHT}\n                // zoid serializes passed arguments using JSON.stringify.\n                // All undefined values are removed as they are not valid JSON values\n                // so we replace undefined values with null to not drop them\n                // Any future cb function that passes arbitrary objects as args\n                // also should be wrapped in this mapper\n                onSettingsChange={nextSettings =>\n                  onSettingsChange(replaceUndefinedValuesWithNull(nextSettings))\n                }\n                onSettingChange={(key, value) =>\n                  onSettingChange(key, replaceUndefinedValuesWithNull(value))\n                }\n                CLIAppComponent={CLIAppComponent}\n                CLIAppSettings={CLIAppSettings}\n              />\n            </div>\n          </IconParkProvider>\n        </IsInsideIsolatedDcAppProvider>\n      </AppContext.Provider>\n    </PermissionsContext.Provider>\n  );\n}\n\nDevCenterIsolatedAppPage.propTypes = {\n  CLIAppComponent: PropTypes.func,\n  CLIAppSettings: PropTypes.func,\n  containerReportClassName: PropTypes.string,\n};\n\nDevCenterIsolatedAppPage.defaultProps = {\n  CLIAppComponent: null,\n  CLIAppSettings: null,\n  containerReportClassName: null,\n};\n"],"names":["DevCenterAppContainerWithMUI","withMUIProvidersHOC","DevCenterAppContainer","useStyles","makeStyles","body","backgroundColor","overflow","DevCenterIsolatedAppPage","CLIAppComponent","CLIAppSettings","containerReportClassName","useXProps","appContextValue","globalMixpanelEventTracker","globalNotificationToastsAPI","onSettingChange","onSettingsChange","permissionsContextValue","timezone","userUnits","xProps","isReportsPage","location","pathname","startsWith","isPDFReportView","selectedTheme","localStorage","getItem","LOCAL_STORAGE_APP_THEME_KEY","currentUser","settings","uiSettings","theme","THEMES","DARK","isDarkTheme","LIGHT","useEffect","setThemeVariables","window","Symbol","for","isFirstRenderRef","useRef","current","updateUserUnits","moment","tz","setDefault","_jsx","ISOLATED_PAGE_APP_CONTAINER_ID","classNames","nextSettings","replaceUndefinedValuesWithNull","key","value","propTypes","PropTypes","func","string","defaultProps"],"mappings":"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"}

package/components/DevCenter/NavigationBar/NavigationBar.js

@@ -1 +1,51 @@
-import e from"prop-types";import r from"classnames";import{withStyles as a,AppBar as i,Toolbar as n,Grid as t}from"@material-ui/core";import{jsx as s}from"react/jsx-runtime";var o=function(e){var a=e.classes,o=e.appBarClassName,p=e.children;return s(i,{className:r(a.appBar,o),position:"fixed",children:s(n,{className:a.toolbar,children:s(t,{container:!0,direction:"row",justify:"space-between",alignItems:"center",className:a.container,children:p})})})};o.propTypes={children:e.node.isRequired,appBarClassName:e.string},o.defaultProps={appBarClassName:null};var p=a((function(e){return{appBar:{height:50,zIndex:e.zIndex.drawer+1,background:"linear-gradient(86.1deg, #2C2C2C 39.4%, #3B3B3B 74.22%)"},toolbar:{minHeight:50,height:"100%"},container:{height:"100%"}}}))(o);export{p as default};
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles, AppBar, Toolbar, Grid } from '@material-ui/core';
+import { jsx } from 'react/jsx-runtime';
+
+var NavigationBar = function NavigationBar(_ref) {
+  var classes = _ref.classes,
+    appBarClassName = _ref.appBarClassName,
+    children = _ref.children;
+  return /*#__PURE__*/jsx(AppBar, {
+    className: classNames(classes.appBar, appBarClassName),
+    position: "fixed",
+    children: /*#__PURE__*/jsx(Toolbar, {
+      className: classes.toolbar,
+      children: /*#__PURE__*/jsx(Grid, {
+        container: true,
+        direction: "row",
+        justify: "space-between",
+        alignItems: "center",
+        className: classes.container,
+        children: children
+      })
+    })
+  });
+};
+NavigationBar.propTypes = {
+  children: PropTypes.node.isRequired,
+  appBarClassName: PropTypes.string
+};
+NavigationBar.defaultProps = {
+  appBarClassName: null
+};
+var NavigationBar$1 = withStyles(function (theme) {
+  return {
+    appBar: {
+      height: 50,
+      zIndex: theme.zIndex.drawer + 1,
+      background: 'linear-gradient(86.1deg, #2C2C2C 39.4%, #3B3B3B 74.22%)'
+    },
+    toolbar: {
+      minHeight: 50,
+      height: '100%'
+    },
+    container: {
+      height: '100%'
+    }
+  };
+})(NavigationBar);
+
+export { NavigationBar$1 as default };
+//# sourceMappingURL=NavigationBar.js.map

package/components/DevCenter/NavigationBar/NavigationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.js","sources":["../../../../src/components/DevCenter/NavigationBar/NavigationBar.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { AppBar, Toolbar, withStyles, Grid } from '@material-ui/core';\n\nconst NavigationBar = ({ classes, appBarClassName, children }) => (\n  <AppBar className={classnames(classes.appBar, appBarClassName)} position=\"fixed\">\n    <Toolbar className={classes.toolbar}>\n      <Grid\n        container\n        direction=\"row\"\n        justify=\"space-between\"\n        alignItems=\"center\"\n        className={classes.container}\n      >\n        {children}\n      </Grid>\n    </Toolbar>\n  </AppBar>\n);\n\nNavigationBar.propTypes = {\n  children: PropTypes.node.isRequired,\n  appBarClassName: PropTypes.string,\n};\n\nNavigationBar.defaultProps = {\n  appBarClassName: null,\n};\n\nexport default withStyles(theme => ({\n  appBar: {\n    height: 50,\n    zIndex: theme.zIndex.drawer + 1,\n    background: 'linear-gradient(86.1deg, #2C2C2C 39.4%, #3B3B3B 74.22%)',\n  },\n  toolbar: {\n    minHeight: 50,\n    height: '100%',\n  },\n  container: {\n    height: '100%',\n  },\n}))(NavigationBar);\n"],"names":["NavigationBar","classes","appBarClassName","children","_jsx","classnames","appBar","toolbar","container","propTypes","PropTypes","node","isRequired","string","defaultProps","withStyles","theme","height","zIndex","drawer","background","minHeight"],"mappings":";;;;;AAIA,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CAAA,IAAA,EAAA;EAAA,IAAMC,OAAO,QAAPA,OAAO;AAAEC,IAAAA,eAAe,QAAfA,eAAe;AAAEC,IAAAA,QAAQ,QAARA,QAAQ,CAAA;AAAA,EAAA,oBACzDC,IAAC,MAAM,EAAA;IAAC,SAAS,EAAEC,UAAU,CAACJ,OAAO,CAACK,MAAM,EAAEJ,eAAe,CAAE;AAAC,IAAA,QAAQ,EAAC,OAAO;AAAA,IAAA,QAAA,eAC9EE,IAAC,OAAO,EAAA;MAAC,SAAS,EAAEH,OAAO,CAACM,OAAQ;AAAA,MAAA,QAAA,eAClCH,IAAC,IAAI,EAAA;QACH,SAAS,EAAA,IAAA;AACT,QAAA,SAAS,EAAC,KAAK;AACf,QAAA,OAAO,EAAC,eAAe;AACvB,QAAA,UAAU,EAAC,QAAQ;QACnB,SAAS,EAAEH,OAAO,CAACO,SAAU;QAAA,QAE5BL,EAAAA,QAAAA;AAAQ,OAAA,CAAA;AACJ,KAAA,CAAA;GAEF,CAAA,CAAA;AAAA,CACV,CAAA;AAEDH,aAAa,CAACS,SAAS,GAAG;AACxBN,EAAAA,QAAQ,EAAEO,SAAS,CAACC,IAAI,CAACC,UAAU;EACnCV,eAAe,EAAEQ,SAAS,CAACG,MAAAA;AAC7B,CAAC,CAAA;AAEDb,aAAa,CAACc,YAAY,GAAG;AAC3BZ,EAAAA,eAAe,EAAE,IAAA;AACnB,CAAC,CAAA;AAED,sBAAea,UAAU,CAAC,UAAAC,KAAK,EAAA;EAAA,OAAK;AAClCV,IAAAA,MAAM,EAAE;AACNW,MAAAA,MAAM,EAAE,EAAE;AACVC,MAAAA,MAAM,EAAEF,KAAK,CAACE,MAAM,CAACC,MAAM,GAAG,CAAC;AAC/BC,MAAAA,UAAU,EAAE,yDAAA;KACb;AACDb,IAAAA,OAAO,EAAE;AACPc,MAAAA,SAAS,EAAE,EAAE;AACbJ,MAAAA,MAAM,EAAE,MAAA;KACT;AACDT,IAAAA,SAAS,EAAE;AACTS,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;GACD,CAAA;AAAA,CAAC,CAAC,CAACjB,aAAa,CAAC;;;;"}

package/components/DevCenter/SideBar/SideBar.js

@@ -1 +1,78 @@
-import r from"prop-types";import a from"classnames";import{withStyles as e,Drawer as n,Toolbar as s,List as o}from"@material-ui/core";import{jsxs as t,jsx as i}from"react/jsx-runtime";var l=function(r){var e=r.classes,l=r.drawerClassName,d=r.drawerPaperClassName,c=r.isToolbarGutterShown,m=r.onClick,p=r.children,h=r.listClassName,u=r.anchor;return t(n,{onClick:m,className:a(e.drawer,l),variant:"permanent",classes:{paper:a(e.drawerPaper,d)},anchor:u,children:[c&&i(s,{className:e.toolbar}),i(o,{className:a(e.list,h),children:p})]})};l.propTypes={children:r.oneOfType([r.arrayOf(r.node),r.node]).isRequired,drawerPaperClassName:r.string,drawerClassName:r.string,listClassName:r.string,onClick:r.func,isToolbarGutterShown:r.bool,drawerWidth:r.oneOfType([r.number,r.string]),anchor:r.oneOf(["left","right"])},l.defaultProps={drawerPaperClassName:null,drawerClassName:null,listClassName:null,onClick:function(){},isToolbarGutterShown:!0,drawerWidth:240,anchor:"left"};var d=e({drawer:{width:function(r){return r.drawerWidth},flexShrink:0},drawerPaper:{width:function(r){return r.drawerWidth},background:"#3B3B3B",border:"none",boxShadow:"0px 4px 8px rgba(0, 0, 0, 0.15)"},toolbar:{height:50,minHeight:50},list:{padding:0}})(l);export{d as default};
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles, Drawer, Toolbar, List } from '@material-ui/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SideBar = function SideBar(_ref) {
+  var classes = _ref.classes,
+    drawerClassName = _ref.drawerClassName,
+    drawerPaperClassName = _ref.drawerPaperClassName,
+    isToolbarGutterShown = _ref.isToolbarGutterShown,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    listClassName = _ref.listClassName,
+    anchor = _ref.anchor;
+  return /*#__PURE__*/jsxs(Drawer, {
+    onClick: onClick,
+    className: classNames(classes.drawer, drawerClassName),
+    variant: "permanent",
+    classes: {
+      paper: classNames(classes.drawerPaper, drawerPaperClassName)
+    },
+    anchor: anchor,
+    children: [isToolbarGutterShown && /*#__PURE__*/jsx(Toolbar, {
+      className: classes.toolbar
+    }), /*#__PURE__*/jsx(List, {
+      className: classNames(classes.list, listClassName),
+      children: children
+    })]
+  });
+};
+SideBar.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  drawerPaperClassName: PropTypes.string,
+  drawerClassName: PropTypes.string,
+  listClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  isToolbarGutterShown: PropTypes.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
+  drawerWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  anchor: PropTypes.oneOf(['left', 'right'])
+};
+SideBar.defaultProps = {
+  drawerPaperClassName: null,
+  drawerClassName: null,
+  listClassName: null,
+  onClick: function onClick() {},
+  isToolbarGutterShown: true,
+  drawerWidth: 240,
+  anchor: 'left'
+};
+var SideBar$1 = withStyles({
+  drawer: {
+    width: function width(_ref2) {
+      var drawerWidth = _ref2.drawerWidth;
+      return drawerWidth;
+    },
+    flexShrink: 0
+  },
+  drawerPaper: {
+    width: function width(_ref3) {
+      var drawerWidth = _ref3.drawerWidth;
+      return drawerWidth;
+    },
+    background: '#3B3B3B',
+    border: 'none',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.15)'
+  },
+  toolbar: {
+    height: 50,
+    minHeight: 50
+  },
+  list: {
+    padding: 0
+  }
+})(SideBar);
+
+export { SideBar$1 as default };
+//# sourceMappingURL=SideBar.js.map