feat: JS API reconnect

__mocks__/dh-core.js

@@ -1267,6 +1267,9 @@ class IdeConnection extends DeephavenObject {
   }
 }
 
+IdeConnection.EVENT_DISCONNECT = 'disconnect';
+IdeConnection.EVENT_RECONNECT = 'reconnect';
+
 class IdeSession extends DeephavenObject {
   constructor(language) {
     super();

packages/code-studio/src/main/AppInit.tsx

@@ -153,7 +153,10 @@ function AppInit(props: AppInitProps) {
     setServerConfigValues,
   } = props;
 
+  // General error means the app is dead and is unlikely to recover
   const [error, setError] = useState<unknown>();
+  // Disconnect error may be temporary, so just show an error overlaid on the app
+  const [disconnectError, setDisconnectError] = useState<unknown>();
   const [isFontLoading, setIsFontLoading] = useState(true);
 
   const initClient = useCallback(async () => {
@@ -175,14 +178,12 @@ function AppInit(props: AppInitProps) {
         ? // Fall back to the old API for anonymous auth if the new API is not supported
           createConnection()
         : coreClient.getAsIdeConnection());
-      connection.addEventListener(
-        dh.IdeConnection.HACK_CONNECTION_FAILURE,
-        event => {
-          const { detail } = event;
-          log.error('Connection failure', `${JSON.stringify(detail)}`);
-          setError(`Unable to connect:  ${detail.details ?? 'Unknown Error'}`);
-        }
-      );
+      connection.addEventListener(dh.IdeConnection.EVENT_SHUTDOWN, event => {
+        const { detail } = event;
+        log.info('Shutdown', `${JSON.stringify(detail)}`);
+        setError(`Server shutdown: ${detail ?? 'Unknown reason'}`);
+        setDisconnectError(null);
+      });
 
       const sessionWrapper = await loadSessionWrapper(connection);
       const name = 'user';
@@ -318,7 +319,10 @@ function AppInit(props: AppInitProps) {
 
   const isLoading = (workspace == null && error == null) || isFontLoading;
   const isLoaded = !isLoading && error == null;
-  const errorMessage = error != null ? `${error}` : null;
+  const errorMessage =
+    error != null || disconnectError != null
+      ? `${error ?? disconnectError}`
+      : null;
 
   return (
     <>

packages/code-studio/src/main/AppMainContainer.tsx

@@ -19,6 +19,8 @@ import {
   Popper,
   ContextAction,
   Button,
+  InfoModal,
+  LoadingSpinner,
 } from '@deephaven/components';
 import {
   IrisGridModel,
@@ -60,7 +62,12 @@ import {
   SessionConfig,
   getDashboardConnection,
 } from '@deephaven/dashboard-core-plugins';
-import { vsGear, dhShapes, dhPanels } from '@deephaven/icons';
+import {
+  vsGear,
+  dhShapes,
+  dhPanels,
+  vsDebugDisconnect,
+} from '@deephaven/icons';
 import dh, {
   IdeConnection,
   IdeSession,
@@ -149,6 +156,7 @@ interface AppMainContainerProps {
 
 interface AppMainContainerState {
   contextActions: ContextAction[];
+  isDisconnected: boolean;
   isPanelsMenuShown: boolean;
   isSettingsMenuShown: boolean;
   widgets: VariableDefinition[];
@@ -203,6 +211,8 @@ export class AppMainContainer extends Component<
     this.hydratePandas = this.hydratePandas.bind(this);
     this.hydrateDefault = this.hydrateDefault.bind(this);
     this.openNotebookFromURL = this.openNotebookFromURL.bind(this);
+    this.handleDisconnect = this.handleDisconnect.bind(this);
+    this.handleReconnect = this.handleReconnect.bind(this);
 
     this.importElement = React.createRef();
 
@@ -232,6 +242,7 @@ export class AppMainContainer extends Component<
           isGlobal: true,
         },
       ],
+      isDisconnected: false,
       isPanelsMenuShown: false,
       isSettingsMenuShown: false,
       widgets: [],
@@ -240,6 +251,7 @@ export class AppMainContainer extends Component<
 
   componentDidMount(): void {
     this.initWidgets();
+    this.startListeningForDisconnect();
 
     window.addEventListener(
       'beforeunload',
@@ -256,6 +268,7 @@ export class AppMainContainer extends Component<
 
   componentWillUnmount(): void {
     this.deinitWidgets();
+    this.stopListeningForDisconnect();
 
     window.removeEventListener(
       'beforeunload',
@@ -534,6 +547,14 @@ export class AppMainContainer extends Component<
     }
   }
 
+  handleDisconnect() {
+    this.setState({ isDisconnected: true });
+  }
+
+  handleReconnect() {
+    this.setState({ isDisconnected: false });
+  }
+
   /**
    * Import the provided file and set it in the workspace data (which should then load it in the dashboard)
    * @param file JSON file to import
@@ -630,6 +651,30 @@ export class AppMainContainer extends Component<
     return PluginUtils.loadComponentPlugin(pluginName);
   }
 
+  startListeningForDisconnect() {
+    const { connection } = this.props;
+    connection.addEventListener(
+      dh.IdeConnection.EVENT_DISCONNECT,
+      this.handleDisconnect
+    );
+    connection.addEventListener(
+      dh.IdeConnection.EVENT_RECONNECT,
+      this.handleReconnect
+    );
+  }
+
+  stopListeningForDisconnect() {
+    const { connection } = this.props;
+    connection.removeEventListener(
+      dh.IdeConnection.EVENT_DISCONNECT,
+      this.handleDisconnect
+    );
+    connection.removeEventListener(
+      dh.IdeConnection.EVENT_RECONNECT,
+      this.handleReconnect
+    );
+  }
+
   hydrateDefault(
     props: {
       metadata?: { type?: VariableTypeUnion; id?: string; name?: string };
@@ -743,6 +788,7 @@ export class AppMainContainer extends Component<
     const { canUsePanels } = permissions;
     const {
       contextActions,
+      isDisconnected,
       isPanelsMenuShown,
       isSettingsMenuShown,
       widgets,
@@ -882,6 +928,16 @@ export class AppMainContainer extends Component<
           style={{ display: 'none' }}
           onChange={this.handleImportLayoutFiles}
         />
+        <InfoModal
+          isOpen={isDisconnected}
+          icon={vsDebugDisconnect}
+          title={
+            <>
+              <LoadingSpinner /> Attempting to reconnect...
+            </>
+          }
+          subtitle="Please check your network connection."
+        />
       </div>
     );
   }

packages/components/src/modal/InfoModal.scss

@@ -0,0 +1,27 @@
+@import '../../scss/custom.scss';
+
+$info-modal-icon-font-size: 120px;
+$info-modal-message-header: 24px;
+$info-modal-padding-bottom: 18px;
+
+.info-modal {
+  text-align: center;
+  padding-bottom: $info-modal-padding-bottom;
+  .message-icon {
+    font-size: $info-modal-icon-font-size;
+    text-align: center;
+    line-height: 1;
+    .svg-inline--fa {
+      font-size: inherit;
+    }
+  }
+  .message-header {
+    font-size: $info-modal-message-header;
+    .svg-inline--fa {
+      font-size: inherit;
+    }
+  }
+  .message-content {
+    font-style: italic;
+  }
+}

packages/components/src/modal/InfoModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import Modal from './Modal';
+import ModalBody from './ModalBody';
+import './InfoModal.scss';
+
+type InfoModalProps = {
+  className?: string;
+  icon?: IconProp;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  isOpen: boolean;
+};
+
+function InfoModal({
+  className,
+  icon,
+  isOpen,
+  subtitle,
+  title,
+}: InfoModalProps): JSX.Element {
+  return (
+    <Modal isOpen={isOpen} className={className}>
+      <ModalBody>
+        <div className="info-modal">
+          {icon != null && (
+            <div className="message-icon">
+              <FontAwesomeIcon icon={icon} />
+            </div>
+          )}
+          <div className="message-header">{title}</div>
+          {subtitle != null && (
+            <div className="message-content">{subtitle}</div>
+          )}
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+}
+
+export default InfoModal;

packages/components/src/modal/index.ts

@@ -1,3 +1,4 @@
+export { default as InfoModal } from './InfoModal';
 export { default as Modal } from './Modal';
 export { default as ModalBody } from './ModalBody';
 export { default as ModalHeader } from './ModalHeader';

packages/dashboard-core-plugins/src/panels/ConsolePanel.scss

@@ -3,3 +3,20 @@
 .error-message pre {
   color: $danger;
 }
+
+.iris-panel-console {
+  &.disconnected {
+    .console-history-result-in-progress {
+      display: none;
+    }
+    .csv-overlay {
+      display: none;
+    }
+    .csv-input-bar {
+      display: none;
+    }
+    .console-input-wrapper {
+      display: none;
+    }
+  }
+}