fix: Reconnect Auth Fail Fix - embed-widget

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,25 +68,96 @@ export function ConnectionBootstrap({
     [api, client]
   );
 
+  useEffect(
+    function listenForDisconnect() {
+      if (connection == null || isShutdown) 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;
+    },
+    [api, connection, isShutdown]
+  );
+
+  useEffect(
+    function listenForReconnect() {
+      if (connection == null || isShutdown) 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, isShutdown]
+  );
+
   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);
+        setIsReconnecting(false);
+        setIsAuthFailed(false);
       }
-
       const removerFn = connection.addEventListener(
         api.IdeConnection.EVENT_SHUTDOWN,
         handleShutdown
       );
+
       return removerFn;
     },
     [api, connection]
   );
 
+  useEffect(
+    function listenForAuthFailed() {
+      if (connection == null || isShutdown) 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);
+        setIsReconnecting(false);
+      }
+      const removerFn = connection.addEventListener(
+        api.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
+        handleAuthFailed
+      );
+
+      return removerFn;
+    },
+    [api, connection, isShutdown]
+  );
+
   const objectFetcher = useCallback(
     async (descriptor: dh.ide.VariableDescriptor) => {
       assertNotNull(connection, 'No connection available to fetch object with');
@@ -83,20 +166,58 @@ export function ConnectionBootstrap({
     [connection]
   );
 
-  if (connection == null || error != null) {
-    return (
-      <LoadingOverlay
-        data-testid="connection-bootstrap-loading"
-        isLoading={connection == null}
-        errorMessage={error != null ? `${error}` : undefined}
-      />
-    );
+  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}
+        {(() => {
+          if (isShutdown) {
+            return (
+              <LoadingOverlay
+                isLoading={false}
+                errorMessage={error != null ? `${error}` : undefined}
+              />
+            );
+          }
+          if (isReconnecting) {
+            return (
+              <>
+                {children}
+                <DebouncedModal isOpen={isReconnecting} debounceMs={1000}>
+                  <InfoModal
+                    icon={vsDebugDisconnect}
+                    title={
+                      <>
+                        <LoadingSpinner /> Attempting to reconnect...
+                      </>
+                    }
+                    subtitle="Please check your network connection."
+                  />
+                </DebouncedModal>
+              </>
+            );
+          }
+          if (isAuthFailed) {
+            return (
+              <>
+                {children}
+                <BasicModal
+                  confirmButtonText="Refresh"
+                  onConfirm={handleRefresh}
+                  isOpen={isAuthFailed}
+                  headerText="Authentication failed"
+                  bodyText="Credentials are invalid. Please refresh your browser to try and reconnect."
+                />
+              </>
+            );
+          }
+          // If none of the conditions are met, render the children
+          return children;
+        })()}
       </ObjectFetcherContext.Provider>
     </ConnectionContext.Provider>
   );