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,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { LoadingOverlay } from '@deephaven/components';
+import { BasicModal } from '@deephaven/components';
 import {
   ObjectFetcherContext,
   sanitizeVariableDescriptor,
@@ -29,8 +29,10 @@ 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 [authFailedState, setIsAuthFailedState] = useState<boolean>(false);
   useEffect(
     function initConnection() {
       let isCanceled = false;
@@ -60,21 +62,47 @@ export function ConnectionBootstrap({
     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'}`);
       }
-
       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'}`
+        );
+        setIsAuthFailedState(true);
+      }
+      const authFailed = connection.addEventListener(
+        api.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
+        handleAuthFailed
+      );
+
+      return authFailed;
+    },
+    [api, connection]
+  );
+
   const objectFetcher = useCallback(
     async (descriptor: dh.ide.VariableDescriptor) => {
       assertNotNull(connection, 'No connection available to fetch object with');
@@ -83,20 +111,24 @@ 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}
+        <>
+          {children}
+          <BasicModal
+            confirmButtonText="Refresh"
+            onConfirm={handleRefresh}
+            isOpen={authFailedState}
+            headerText="Authentication failed"
+            bodyText="Credentials are invalid. Please refresh your browser to try and reconnect."
+          />
+        </>
       </ObjectFetcherContext.Provider>
     </ConnectionContext.Provider>
   );

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

@@ -140,7 +140,6 @@ interface AppMainContainerProps {
 
 interface AppMainContainerState {
   contextActions: ContextAction[];
-  isAuthFailed: boolean;
   isDisconnected: boolean;
   isPanelsMenuShown: boolean;
   isResetLayoutPromptShown: boolean;
@@ -245,7 +244,6 @@ export class AppMainContainer extends Component<
           isGlobal: true,
         },
       ],
-      isAuthFailed: false,
       isDisconnected: false,
       isPanelsMenuShown: false,
       isResetLayoutPromptShown: false,
@@ -647,11 +645,6 @@ export class AppMainContainer extends Component<
     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
@@ -736,10 +729,6 @@ export class AppMainContainer extends Component<
       dh.IdeConnection.EVENT_RECONNECT,
       this.handleReconnect
     );
-    connection.addEventListener(
-      dh.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
-      this.handleReconnectAuthFailed
-    );
   }
 
   stopListeningForDisconnect(): void {
@@ -756,10 +745,6 @@ export class AppMainContainer extends Component<
       dh.IdeConnection.EVENT_RECONNECT,
       this.handleReconnect
     );
-    connection.removeEventListener(
-      dh.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
-      this.handleReconnectAuthFailed
-    );
   }
 
   /**
@@ -856,7 +841,6 @@ export class AppMainContainer extends Component<
     const { canUsePanels } = permissions;
     const {
       contextActions,
-      isAuthFailed,
       isDisconnected,
       isPanelsMenuShown,
       isResetLayoutPromptShown,
@@ -950,7 +934,7 @@ export class AppMainContainer extends Component<
               icon={
                 <span className="fa-layers">
                   <FontAwesomeIcon icon={vsGear} transform="grow-3" />
-                  {isDisconnected && !isAuthFailed && (
+                  {isDisconnected && (
                     <>
                       <FontAwesomeIcon
                         icon={dhSquareFilled}
@@ -966,11 +950,7 @@ export class AppMainContainer extends Component<
                   )}
                 </span>
               }
-              tooltip={
-                isDisconnected && !isAuthFailed
-                  ? 'Server disconnected'
-                  : 'User Settings'
-              }
+              tooltip="Server disconnected"
             />
           </div>
         </div>
@@ -1015,10 +995,7 @@ export class AppMainContainer extends Component<
           onChange={this.handleImportLayoutFiles}
           data-testid="input-import-layout"
         />
-        <DebouncedModal
-          isOpen={isDisconnected && !isAuthFailed}
-          debounceMs={1000}
-        >
+        <DebouncedModal isOpen={isDisconnected} debounceMs={1000}>
           <InfoModal
             icon={vsDebugDisconnect}
             title={
@@ -1046,13 +1023,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>
     );
   }

packages/embed-widget/src/index.tsx

@@ -5,7 +5,6 @@ import { store } from '@deephaven/redux';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
 import { LoadingOverlay, preloadTheme } from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
-import './index.scss';
 
 preloadTheme();
 

tests/notebook.spec.ts

@@ -6,7 +6,8 @@ import { pasteInMonaco } from './utils';
 test.describe.configure({ mode: 'serial' });
 
 test('test creating a file, saving it, reloading the page, closing it, re-opening it, running it, then deleting it', async ({
-  page, browserName
+  page,
+  browserName,
 }) => {
   await page.goto('');