fix: Reconnect Auth Fail Fix - embed-widget

packages/app-utils/package.json

@@ -40,6 +40,7 @@
     "@deephaven/iris-grid": "file:../iris-grid",
     "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
     "@deephaven/jsapi-components": "file:../jsapi-components",
+    "@deephaven/jsapi-shim": "file:../jsapi-shim",
     "@deephaven/jsapi-types": "1.0.0-dev0.34.0",
     "@deephaven/jsapi-utils": "file:../jsapi-utils",
     "@deephaven/log": "file:../log",

packages/app-utils/src/components/AppBootstrap.test.tsx

@@ -173,8 +173,8 @@ it('should log in automatically when the anonymous handler is supported', async
   });
 
   expect(screen.queryByTestId('auth-base-loading')).toBeNull();
-  expect(screen.queryByTestId('connection-bootstrap-loading')).not.toBeNull();
-  expect(screen.queryByText(mockChildText)).toBeNull();
+  expect(screen.queryByTestId('connection-bootstrap-loading')).toBeNull();
+  expect(screen.queryByText(mockChildText)).not.toBeNull();
   expect(mockChannel.postMessage).toHaveBeenCalledWith(
     expect.objectContaining({
       message: BROADCAST_LOGIN_MESSAGE,

packages/app-utils/src/components/ConnectionBootstrap.tsx

@@ -1,5 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { LoadingOverlay } from '@deephaven/components';
+import {
+  BasicModal,
+  DebouncedModal,
+  InfoModal,
+  LoadingOverlay,
+  LoadingSpinner,
+} from '@deephaven/components';
 import {
   ObjectFetcherContext,
   sanitizeVariableDescriptor,
@@ -9,6 +15,7 @@ import {
 import type { dh } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import { assertNotNull } from '@deephaven/utils';
+import { vsDebugDisconnect } from '@deephaven/icons';
 import ConnectionContext from './ConnectionContext';
 
 const log = Log.module('@deephaven/app-utils.ConnectionBootstrap');
@@ -29,8 +36,13 @@ export function ConnectionBootstrap({
 }: ConnectionBootstrapProps): JSX.Element {
   const api = useApi();
   const client = useClient();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [error, setError] = useState<unknown>();
   const [connection, setConnection] = useState<dh.IdeConnection>();
+  const [isAuthFailed, setIsAuthFailed] = useState<boolean>(false);
+  const [isShutdown, setIsShutdown] = useState<boolean>(false);
+  const [isReconnecting, setIsReconnecting] = useState<boolean>(false);
+
   useEffect(
     function initConnection() {
       let isCanceled = false;
@@ -56,20 +68,85 @@ export function ConnectionBootstrap({
     [api, client]
   );
 
+  useEffect(function listenForDisconnect() {
+    if (connection == null) return;
+
+    // handles the disconnect event
+    function handleDisconnect(event: CustomEvent): void {
+      const { detail } = event;
+      log.info('Disconnect', `${JSON.stringify(detail)}`);
+      setIsReconnecting(true);
+    }
+    const removerFn = connection.addEventListener(
+      api.IdeConnection.EVENT_DISCONNECT,
+      handleDisconnect
+    );
+
+    return removerFn;
+  });
+
+  useEffect(
+    function listenForReconnect() {
+      if (connection == null) return;
+
+      // handles the reconnect event
+      function handleReconnect(event: CustomEvent): void {
+        const { detail } = event;
+        log.info('Reconnect', `${JSON.stringify(detail)}`);
+        setIsReconnecting(false);
+      }
+      const removerFn = connection.addEventListener(
+        api.CoreClient.EVENT_RECONNECT,
+        handleReconnect
+      );
+
+      return removerFn;
+    },
+    [api, connection]
+  );
+
   useEffect(
     function listenForShutdown() {
       if (connection == null) return;
 
+      // handles the shutdown event
       function handleShutdown(event: CustomEvent): void {
         const { detail } = event;
         log.info('Shutdown', `${JSON.stringify(detail)}`);
         setError(`Server shutdown: ${detail ?? 'Unknown reason'}`);
+        setIsShutdown(true);
       }
-
       const removerFn = connection.addEventListener(
         api.IdeConnection.EVENT_SHUTDOWN,
         handleShutdown
       );
+
+      return removerFn;
+    },
+    [api, connection]
+  );
+
+  useEffect(
+    function listenForAuthFailed() {
+      if (connection == null) return;
+
+      // handles the auth failed event
+      function handleAuthFailed(event: CustomEvent): void {
+        const { detail } = event;
+        log.warn(
+          'Reconnect authentication failed',
+          `${JSON.stringify(detail)}`
+        );
+        setError(
+          `Reconnect authentication failed: ${detail ?? 'Unknown reason'}`
+        );
+        setIsAuthFailed(true);
+      }
+      const removerFn = connection.addEventListener(
+        api.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
+        handleAuthFailed
+      );
+
       return removerFn;
     },
     [api, connection]
@@ -83,7 +160,34 @@ export function ConnectionBootstrap({
     [connection]
   );
 
-  if (connection == null || error != null) {
+  if (isReconnecting && !isShutdown) {
+    return (
+      <DebouncedModal isOpen={isReconnecting} debounceMs={1000}>
+        <InfoModal
+          icon={vsDebugDisconnect}
+          title={
+            <>
+              <LoadingSpinner /> Attempting to reconnect...
+            </>
+          }
+          subtitle="Please check your network connection."
+        />
+      </DebouncedModal>
+    );
+  }
+
+  if (isAuthFailed) {
+    return (
+      <BasicModal
+        confirmButtonText="Refresh"
+        onConfirm={handleRefresh}
+        isOpen={isAuthFailed}
+        headerText="Authentication failed"
+        bodyText="Credentials are invalid. Please refresh your browser to try and reconnect."
+      />
+    );
+  }
+  if (isShutdown) {
     return (
       <LoadingOverlay
         data-testid="connection-bootstrap-loading"
@@ -93,8 +197,13 @@ export function ConnectionBootstrap({
     );
   }
 
+  function handleRefresh(): void {
+    log.info('Refreshing application');
+    window.location.reload();
+  }
+
   return (
-    <ConnectionContext.Provider value={connection}>
+    <ConnectionContext.Provider value={connection ?? null}>
       <ObjectFetcherContext.Provider value={objectFetcher}>
         {children}
       </ObjectFetcherContext.Provider>

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

@@ -18,11 +18,8 @@ import {
   Popper,
   ContextAction,
   Button,
-  InfoModal,
-  LoadingSpinner,
   Logo,
   BasicModal,
-  DebouncedModal,
   NavTabList,
   type NavTabItem,
   SlideTransition,
@@ -140,8 +137,6 @@ interface AppMainContainerProps {
 
 interface AppMainContainerState {
   contextActions: ContextAction[];
-  isAuthFailed: boolean;
-  isDisconnected: boolean;
   isPanelsMenuShown: boolean;
   isResetLayoutPromptShown: boolean;
   isSettingsMenuShown: boolean;
@@ -245,8 +240,6 @@ export class AppMainContainer extends Component<
           isGlobal: true,
         },
       ],
-      isAuthFailed: false,
-      isDisconnected: false,
       isPanelsMenuShown: false,
       isResetLayoutPromptShown: false,
       isSettingsMenuShown: false,
@@ -266,7 +259,6 @@ export class AppMainContainer extends Component<
   componentDidMount(): void {
     this.initWidgets();
     this.initDashboardData();
-    this.startListeningForDisconnect();
 
     window.addEventListener(
       'beforeunload',
@@ -286,7 +278,6 @@ export class AppMainContainer extends Component<
 
   componentWillUnmount(): void {
     this.deinitWidgets();
-    this.stopListeningForDisconnect();
 
     this.dashboardLayouts.forEach(layout => {
       stopListenForCreateDashboard(layout.eventHub, this.handleCreateDashboard);
@@ -637,21 +628,6 @@ export class AppMainContainer extends Component<
     }
   }
 
-  handleDisconnect(): void {
-    log.info('Disconnected from server');
-    this.setState({ isDisconnected: true });
-  }
-
-  handleReconnect(): void {
-    log.info('Reconnected to server');
-    this.setState({ isDisconnected: false });
-  }
-
-  handleReconnectAuthFailed(): void {
-    log.warn('Reconnect authentication failed');
-    this.setState({ isAuthFailed: true });
-  }
-
   /**
    * 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
@@ -722,46 +698,6 @@ export class AppMainContainer extends Component<
     }
   }
 
-  startListeningForDisconnect(): void {
-    const { connection } = this.props;
-    if (connection == null) {
-      return;
-    }
-
-    connection.addEventListener(
-      dh.IdeConnection.EVENT_DISCONNECT,
-      this.handleDisconnect
-    );
-    connection.addEventListener(
-      dh.IdeConnection.EVENT_RECONNECT,
-      this.handleReconnect
-    );
-    connection.addEventListener(
-      dh.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
-      this.handleReconnectAuthFailed
-    );
-  }
-
-  stopListeningForDisconnect(): void {
-    const { connection } = this.props;
-    if (connection == null) {
-      return;
-    }
-
-    connection.removeEventListener(
-      dh.IdeConnection.EVENT_DISCONNECT,
-      this.handleDisconnect
-    );
-    connection.removeEventListener(
-      dh.IdeConnection.EVENT_RECONNECT,
-      this.handleReconnect
-    );
-    connection.removeEventListener(
-      dh.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
-      this.handleReconnectAuthFailed
-    );
-  }
-
   /**
    * Open a widget up, using a drag event if specified.
    * @param widget The widget to open
@@ -851,13 +787,12 @@ export class AppMainContainer extends Component<
   }
 
   render(): ReactElement {
-    const { activeTool, plugins, user, serverConfigValues } = this.props;
+    const { activeTool, plugins, user, serverConfigValues, connection } =
+      this.props;
     const { permissions } = user;
     const { canUsePanels } = permissions;
     const {
       contextActions,
-      isAuthFailed,
-      isDisconnected,
       isPanelsMenuShown,
       isResetLayoutPromptShown,
       isSettingsMenuShown,
@@ -950,7 +885,7 @@ export class AppMainContainer extends Component<
               icon={
                 <span className="fa-layers">
                   <FontAwesomeIcon icon={vsGear} transform="grow-3" />
-                  {isDisconnected && !isAuthFailed && (
+                  {connection == null && (
                     <>
                       <FontAwesomeIcon
                         icon={dhSquareFilled}
@@ -966,11 +901,7 @@ export class AppMainContainer extends Component<
                   )}
                 </span>
               }
-              tooltip={
-                isDisconnected && !isAuthFailed
-                  ? 'Server disconnected'
-                  : 'User Settings'
-              }
+              tooltip="User Settings"
             />
           </div>
         </div>
@@ -1016,20 +947,6 @@ export class AppMainContainer extends Component<
           onChange={this.handleImportLayoutFiles}
           data-testid="input-import-layout"
         />
-        <DebouncedModal
-          isOpen={isDisconnected && !isAuthFailed}
-          debounceMs={1000}
-        >
-          <InfoModal
-            icon={vsDebugDisconnect}
-            title={
-              <>
-                <LoadingSpinner /> Attempting to reconnect...
-              </>
-            }
-            subtitle="Please check your network connection."
-          />
-        </DebouncedModal>
         <BasicModal
           confirmButtonText="Reset"
           onConfirm={this.handleConfirmResetLayoutPrompt}
@@ -1047,13 +964,6 @@ export class AppMainContainer extends Component<
               : 'Do you want to reset your layout? Any unsaved notebooks will be lost.'
           }
         />
-        <BasicModal
-          confirmButtonText="Refresh"
-          onConfirm={AppMainContainer.handleRefresh}
-          isOpen={isAuthFailed}
-          headerText="Authentication failed"
-          bodyText="Credentials are invalid. Please refresh your browser to try and reconnect."
-        />
       </div>
     );
   }