@corva/ui 0.38.0-1 → 0.38.0-6

package/src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterAppZoidComponent.js

@@ -0,0 +1,43 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import * as zoid from 'zoid/dist/zoid.frameworks';
+
+import { LoadingIndicator } from '~/components';
+
+export const APP_IFRAME_ATTRIBUTE = 'data-corva-app-iframe';
+
+const devCenterAppZoidInstance = zoid.create({
+  tag: 'dc-isolated-app-zoid-component',
+  url: new URL('DevCenterIsolatedAppPage.html', window.location.origin).href,
+  dimensions: {
+    width: '100%',
+    height: '100%',
+  },
+  prerenderTemplate: function containerTemplate({ doc }) {
+    const html = doc.createElement('html');
+
+    const body = doc.createElement('body');
+    body.style.display = 'flex';
+    body.style.alignItems = 'center';
+    body.style.justifyContent = 'center';
+    html.appendChild(body);
+
+    const img = doc.createElement('img');
+    img.src = LoadingIndicator.LOADER_HREF;
+    img.width = LoadingIndicator.LOADER_DEFAULT_SIZE;
+    img.height = LoadingIndicator.LOADER_DEFAULT_SIZE;
+    body.appendChild(img);
+
+    return html;
+  },
+  attributes: {
+    iframe: {
+      [APP_IFRAME_ATTRIBUTE]: true,
+    },
+  },
+});
+
+export const DevCenterAppZoidComponent = devCenterAppZoidInstance.driver('react', {
+  React,
+  ReactDOM,
+});

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

@@ -0,0 +1,205 @@
+import { useContext, useMemo, useState, useEffect, useRef, useCallback, useReducer } from 'react';
+import classNames from 'classnames';
+import { withRouter } from 'react-router';
+import { noop } from 'lodash';
+import PropTypes from 'prop-types';
+
+import AppContext from '~/components/DevCenter/AppContext';
+import { usePermissionsContext } from '~/permissions';
+
+import { devcenter as devCenterUtils, getUserUnits, subscribeForUserUnitsUpdates } from '~/utils';
+import { DevCenterAppContainer } from '~/components';
+
+import { DevCenterAppZoidComponent, APP_IFRAME_ATTRIBUTE } from './DevCenterAppZoidComponent';
+import { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';
+
+import styles from './DevCenterIsolatedApp.module.css';
+
+const PAGE_NAME = 'DevCenter_AppContainer';
+
+function DevCenterIsolatedAppComponent({
+  isIsolationFeatureEnabled,
+  onAppFullscreenTransparentMode,
+  onIsMaximizedChange,
+  onInnerContainerMouseEnter,
+  onInnerContainerMouseLeave,
+  onAppContainerClick,
+  setInnerContainerRefFn,
+  ...props
+}) {
+  const devCenterRouter = useMemo(() => devCenterUtils.createDevCenterRouter(props.router), [
+    props.router?.location,
+  ]);
+  const DCAppComponent = isIsolationFeatureEnabled
+    ? DevCenterAppZoidComponent
+    : DevCenterAppContainer;
+
+  const appIframeDocument = useRef();
+  const containerRef = useRef();
+  const fixedSizeContainerRef = useRef();
+
+  const isAppMaximized = devCenterUtils.isAppMaximized(props.location?.query, props.app.id);
+
+  const [userUnits, setUserUnits] = useState(getUserUnits());
+
+  useEffect(() => {
+    const unsubscribeFn = subscribeForUserUnitsUpdates(newUserUnits => setUserUnits(newUserUnits));
+
+    return () => unsubscribeFn();
+  }, []);
+
+  const appContextValue = useContext(AppContext);
+  const 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 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 modal, 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 modal is opened, it looks like it's a part of the platform, and the app which modal is shown, 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)
+  */
+  const isFullscreenModalModeRef = useRef(false);
+  const [, forceRender] = useReducer(x => !x, false);
+
+  function handleAppFullscreenTransparentModeExit() {
+    onAppFullscreenTransparentMode(null);
+    document.body.classList.remove(styles.overflowHidden, styles.compensateScroll);
+  }
+
+  function setIsFullscreenModalMode(nextIsFullscreenModalModeValue) {
+    if (!isIsolationFeatureEnabled) {
+      return;
+    }
+    // update the flag in sync, but force re-render to update the view
+    isFullscreenModalModeRef.current = nextIsFullscreenModalModeValue;
+    forceRender();
+
+    appIframeDocument.current = containerRef.current?.querySelector(
+      `[${APP_IFRAME_ATTRIBUTE}]`
+    )?.contentWindow?.document;
+
+    const isolatedPageAppContainer = appIframeDocument.current?.getElementById(
+      ISOLATED_PAGE_APP_CONTAINER_ID
+    );
+
+    if (!isolatedPageAppContainer) {
+      return;
+    }
+
+    if (nextIsFullscreenModalModeValue) {
+      const { top, left, width, height } = fixedSizeContainerRef.current.getBoundingClientRect();
+
+      // 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',
+        `
+        top: ${top}px;
+        left: ${left}px;
+        width: ${width}px;
+        height: ${height}px;
+        position: absolute;
+      `
+      );
+      onAppFullscreenTransparentMode(props.app.id);
+      const isBodyScrollVisible = window.innerWidth !== document.body.clientWidth;
+      document.body.classList.add(
+        styles.overflowHidden,
+        isBodyScrollVisible && styles.compensateScroll
+      );
+    } else {
+      isolatedPageAppContainer.setAttribute('style', '');
+      handleAppFullscreenTransparentModeExit();
+    }
+  }
+
+  useEffect(() => {
+    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.
+   */
+  const setContainerRefs = useCallback(node => {
+    containerRef.current = node;
+    setInnerContainerRefFn(node);
+  }, []);
+
+  return (
+    <div className={styles.fixedSizeContainer} ref={fixedSizeContainerRef}>
+      <div
+        ref={setContainerRefs}
+        onMouseEnter={onInnerContainerMouseEnter}
+        onMouseLeave={onInnerContainerMouseLeave}
+        data-testid={`${PAGE_NAME}_${props.app.app.name}`}
+        className={classNames(
+          styles.container,
+          isFullscreenModalModeRef.current && styles.containerMaximizedTransparent,
+          isAppMaximized && styles.containerMaximized
+        )}
+      >
+        <DCAppComponent
+          {...props}
+          appContextValue={appContextValue}
+          devCenterRouter={devCenterRouter}
+          globalNotificationToastsAPI={window[Symbol.for('notificationToasts')]}
+          onAppContainerClick={onAppContainerClick}
+          onIsMaximizedChange={onIsMaximizedChange}
+          permissionsContextValue={permissionsContextValue}
+          setIsFullscreenModalMode={setIsFullscreenModalMode}
+          userUnits={userUnits}
+        />
+      </div>
+    </div>
+  );
+}
+
+DevCenterIsolatedAppComponent.propTypes = {
+  app: PropTypes.shape({
+    id: PropTypes.string,
+    app: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+  }).isRequired,
+  currentUser: PropTypes.shape({}).isRequired,
+  isIsolationFeatureEnabled: PropTypes.func,
+  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,
+};
+
+export const DevCenterIsolatedApp = withRouter(DevCenterIsolatedAppComponent);

package/src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.module.css

@@ -0,0 +1,55 @@
+.container {
+  background-color: #201f1f;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.container > div {
+  height: 100%;
+}
+
+.containerMaximized {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  width: auto;
+  height: auto;
+  z-index: 500;
+  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.75);
+  overflow: hidden;
+}
+
+.containerMaximizedTransparent {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: auto;
+  height: auto;
+  z-index: 500;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.fixedSizeContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.overflowHidden {
+  overflow: hidden;
+}
+
+.compensateScroll {
+  margin-right: 15px;
+}

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

@@ -0,0 +1,118 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+
+import classNames from 'classnames';
+import { DevCenterAppContainer } from '~/components';
+import { withMUIProvidersHOC } from '~/hocs';
+import AppContext from '~/components/DevCenter/AppContext';
+import { THEMES } from '~/constants/theme';
+import { LOCAL_STORAGE_APP_THEME_KEY } from '~/CLI/hocs/constants';
+import { setThemeVariables } from '~/utils/themeVariables';
+import { isPDFReportView } from '~/CLI/hocs/utils';
+import { PermissionsContext } from '~/permissions/PermissionsContext';
+import { updateUserUnits } from '~/utils';
+import '~/config/initGlobalDependencies';
+import '~/styles/globalStyles';
+
+import { useXProps } from './effects/useXProps';
+import { ISOLATED_PAGE_APP_CONTAINER_ID } from './constants';
+import { replaceUndefinedValuesWithNull } from './utils/replaceUndefinedValuesWithNull';
+import './DevCenterAppZoidComponent';
+
+const 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
+ */
+const useStyles = makeStyles(() => ({
+  '@global': {
+    body: {
+      backgroundColor: 'transparent',
+      overflow: 'hidden',
+    },
+  },
+}));
+
+/**
+ * Root component that is rendered inside of app's iframe.
+ * Receives CLIAppComponent, CLIAppSettings when used
+ * in local development
+ */
+export function DevCenterIsolatedAppPage({
+  CLIAppComponent,
+  CLIAppSettings,
+  containerReportClassName,
+}) {
+  useStyles();
+
+  const {
+    appContextValue,
+    permissionsContextValue,
+    globalNotificationToastsAPI,
+    userUnits,
+    onSettingChange,
+    onSettingsChange,
+    ...xProps
+  } = useXProps();
+  const isReportsPage = xProps.location.pathname.startsWith('/reports/') || isPDFReportView;
+
+  // Force dark theme for login page. Force light theme for PDF reports view
+  const selectedTheme = localStorage.getItem(LOCAL_STORAGE_APP_THEME_KEY) ?? THEMES.DARK;
+  const isDarkTheme = !isReportsPage && selectedTheme === THEMES.DARK;
+
+  useEffect(() => {
+    setThemeVariables(isDarkTheme);
+  }, [isDarkTheme]);
+
+  useEffect(() => {
+    window[Symbol.for('notificationToasts')] = globalNotificationToastsAPI;
+  }, [globalNotificationToastsAPI]);
+
+  useEffect(() => {
+    updateUserUnits({ userUnits });
+  }, []);
+
+  return (
+    <PermissionsContext.Provider value={permissionsContextValue}>
+      <AppContext.Provider value={appContextValue}>
+        <div
+          id={ISOLATED_PAGE_APP_CONTAINER_ID}
+          className={classNames(isReportsPage && containerReportClassName)}
+        >
+          <DevCenterAppContainerWithMUI
+            {...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={nextSettings =>
+              onSettingsChange(replaceUndefinedValuesWithNull(nextSettings))
+            }
+            onSettingChange={(key, value) =>
+              onSettingChange(key, replaceUndefinedValuesWithNull(value))
+            }
+            CLIAppComponent={CLIAppComponent}
+            CLIAppSettings={CLIAppSettings}
+          />
+        </div>
+      </AppContext.Provider>
+    </PermissionsContext.Provider>
+  );
+}
+
+DevCenterIsolatedAppPage.propTypes = {
+  CLIAppComponent: PropTypes.node,
+  CLIAppSettings: PropTypes.node,
+  containerReportClassName: PropTypes.string,
+};
+
+DevCenterIsolatedAppPage.defaultProps = {
+  CLIAppComponent: null,
+  CLIAppSettings: null,
+  containerReportClassName: null,
+};

package/src/components/DevCenter/IsolatedDevCenterAppContainer/constants.js

@@ -0,0 +1 @@
+export const ISOLATED_PAGE_APP_CONTAINER_ID = 'isolated-page-app-container';

package/src/components/DevCenter/IsolatedDevCenterAppContainer/effects/useXProps.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+
+export function useXProps() {
+  const [xprops, setXProps] = useState(window.xprops);
+
+  useEffect(() => {
+    window.xprops.onProps(props => {
+      setXProps({ ...props });
+    });
+  }, []);
+
+  return xprops;
+}

package/src/components/DevCenter/IsolatedDevCenterAppContainer/index.js

@@ -0,0 +1,3 @@
+export * from './DevCenterIsolatedAppPage';
+export * from './DevCenterIsolatedApp';
+export * from './AppsGridDragHandle';

package/src/components/DevCenter/IsolatedDevCenterAppContainer/utils/replaceUndefinedValuesWithNull.js

@@ -0,0 +1,25 @@
+import { isPlainObject, reduce } from 'lodash';
+
+export function replaceUndefinedValuesWithNull(object) {
+  if (!isPlainObject(object)) {
+    return object;
+  }
+
+  return reduce(
+    object,
+    (result, value, key) => {
+      let mappedValue = value;
+
+      if (isPlainObject(value)) {
+        mappedValue = replaceUndefinedValuesWithNull(value);
+      } else if (value === undefined) {
+        mappedValue = null;
+      }
+      // eslint-disable-next-line no-param-reassign
+      result[key] = mappedValue;
+
+      return result;
+    },
+    {}
+  );
+}

package/src/components/DevCenter/NavigationBar/NavigationBar.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { AppBar, Toolbar, withStyles, Grid } from '@material-ui/core';
+
+const NavigationBar = ({ classes, appBarClassName, children }) => (
+  <AppBar className={classnames(classes.appBar, appBarClassName)} position="fixed">
+    <Toolbar className={classes.toolbar}>
+      <Grid
+        container
+        direction="row"
+        justify="space-between"
+        alignItems="center"
+        className={classes.container}
+      >
+        {children}
+      </Grid>
+    </Toolbar>
+  </AppBar>
+);
+
+NavigationBar.propTypes = {
+  children: PropTypes.node.isRequired,
+  appBarClassName: PropTypes.string,
+};
+
+NavigationBar.defaultProps = {
+  appBarClassName: null,
+};
+
+export default withStyles(theme => ({
+  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);

package/src/components/DevCenter/NavigationBar/index.js

@@ -0,0 +1 @@
+export { default } from './NavigationBar';

package/src/components/DevCenter/SideBar/SideBar.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { Drawer, List, Toolbar, withStyles } from '@material-ui/core';
+
+const SideBar = ({
+  classes,
+  drawerClassName,
+  drawerPaperClassName,
+  isToolbarGutterShown,
+  onClick,
+  children,
+  listClassName,
+  anchor,
+}) => (
+  <Drawer
+    onClick={onClick}
+    className={classnames(classes.drawer, drawerClassName)}
+    variant="permanent"
+    classes={{
+      paper: classnames(classes.drawerPaper, drawerPaperClassName),
+    }}
+    anchor={anchor}
+  >
+    {isToolbarGutterShown && <Toolbar className={classes.toolbar} />}
+    <List className={classnames(classes.list, listClassName)}>{children}</List>
+  </Drawer>
+);
+
+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: () => {},
+  isToolbarGutterShown: true,
+  drawerWidth: 240,
+  anchor: 'left',
+};
+
+export default withStyles({
+  drawer: {
+    width: ({ drawerWidth }) => drawerWidth,
+    flexShrink: 0,
+  },
+  drawerPaper: {
+    width: ({ drawerWidth }) => drawerWidth,
+    background: '#3B3B3B',
+    border: 'none',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.15)',
+  },
+  toolbar: {
+    height: 50,
+    minHeight: 50,
+  },
+  list: {
+    padding: 0,
+  },
+})(SideBar);

package/src/components/DevCenter/SideBar/index.js

@@ -0,0 +1 @@
+export { default } from './SideBar.js';

package/src/components/DevCenter/icons/CorvaLogoSmall.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+
+function CorvaLogoSmall({ color, width, height }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="white"
+      viewBox="0 0 36 36"
+    >
+      <path
+        d="M16.0615 6.04102C14.9975 6.04102 14.3696 6.85435 14.0909 7.33968L3.49355 25.341C3.40822 25.4863 3.40689 25.6663 3.49089 25.8117C3.57489 25.9583 3.72955 26.0477 3.89888 26.0477H6.54022C6.70689 26.0477 6.86155 25.9597 6.94555 25.8144L16.0109 10.2863L23.2762 22.9544H15.0256C14.8642 22.9544 14.7135 23.037 14.6282 23.1743L13.2789 25.3277C13.1882 25.473 13.1829 25.6544 13.2656 25.8037C13.3482 25.953 13.5056 26.0463 13.6762 26.0463H28.0802C28.2482 26.0463 28.4029 25.957 28.4869 25.8117C28.5709 25.6663 28.5709 25.4863 28.4856 25.3423L18.0322 7.33835C17.7616 6.85702 17.1402 6.04102 16.0615 6.04102Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
+
+CorvaLogoSmall.propTypes = {
+  color: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+CorvaLogoSmall.defaultProps = {
+  color: 'white',
+  width: 36,
+  height: 36,
+};
+
+export default CorvaLogoSmall;

package/src/components/DevCenter/icons/DevCenterIcon.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+
+function DevCenterIcon({ color, width, height }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      viewBox="0 0 36 36"
+    >
+      <path
+        fill={color}
+        d="M15.428 26.228c-.128 0-.385 0-.514-.128-.643-.257-.9-1.029-.643-1.543l5.015-14.014c.257-.643 1.028-.9 1.542-.643.643.257.9 1.028.643 1.543l-5.014 14.014c-.129.514-.643.771-1.029.771zM10.8 24.557a1.39 1.39 0 01-.9-.386l-4.5-5.4c-.514-.514-.514-1.286 0-1.671l4.5-5.4c.515-.515 1.286-.515 1.672 0 .514.514.514 1.285 0 1.671L7.972 18l3.6 4.5c.514.514.514 1.285 0 1.671-.257.257-.514.386-.772.386zM25.2 24.685c.257 0 .643-.128.9-.385l4.5-5.529c.514-.514.514-1.286 0-1.671l-4.5-5.4c-.514-.515-1.286-.515-1.671 0-.515.514-.515 1.285 0 1.671l3.6 4.5-3.6 4.757c-.515.514-.515 1.286 0 1.672.257.257.514.385.771.385z"
+      />
+    </svg>
+  );
+}
+
+DevCenterIcon.propTypes = {
+  color: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+DevCenterIcon.defaultProps = {
+  color: '#03BCD4',
+  width: 36,
+  height: 36,
+};
+
+export default DevCenterIcon;

package/src/components/DevCenter/index.js

@@ -0,0 +1,9 @@
+export { default as AppHeader } from './AppHeader';
+export { default as AppSideBar } from './AppSideBar/AppSideBar';
+export { default as AppsDataProvider } from './AppsDataProvider';
+export { default as DevCenterAppContainer, DisabledSettingsMessage } from './DevCenterAppContainer';
+export { default as NavigationBar } from './NavigationBar';
+export { default as SideBar } from './SideBar';
+export { default as AppSettingsPopover } from './AppSettingsPopover';
+export * from './DevCenterRouterContext';
+export * from './IsolatedDevCenterAppContainer';