fix: Reconnect Auth Fail Fix - embed-widget

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

@@ -6,8 +6,7 @@ import {
   useApi,
   useClient,
 } from '@deephaven/jsapi-bootstrap';
-import dh from '@deephaven/jsapi-shim';
-import type { dh as DhType } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import { assertNotNull } from '@deephaven/utils';
 import ConnectionContext from './ConnectionContext';
@@ -32,7 +31,7 @@ export function ConnectionBootstrap({
   const client = useClient();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [error, setError] = useState<unknown>();
-  const [connection, setConnection] = useState<DhType.IdeConnection>();
+  const [connection, setConnection] = useState<dh.IdeConnection>();
   const [authFailedState, setIsAuthFailedState] = useState<boolean>(false);
   useEffect(
     function initConnection() {
@@ -59,39 +58,53 @@ export function ConnectionBootstrap({
     [api, client]
   );
 
-  useEffect(() => {
-    if (connection == null) return;
+  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'}`);
-    }
-    const removerFn = connection.addEventListener(
-      api.IdeConnection.EVENT_SHUTDOWN,
-      handleShutdown
-    );
+      // 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]
+  );
 
-    // 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'}`
+  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
       );
-      setIsAuthFailedState(true);
-    }
-    const authFailed = connection.addEventListener(
-      dh.CoreClient.EVENT_RECONNECT_AUTH_FAILED,
-      handleAuthFailed
-    );
 
-    return authFailedState ? authFailed : removerFn;
-  }, [api, connection, authFailedState]);
+      return authFailed;
+    },
+    [api, connection]
+  );
 
   const objectFetcher = useCallback(
-    async (descriptor: DhType.ide.VariableDescriptor) => {
+    async (descriptor: dh.ide.VariableDescriptor) => {
       assertNotNull(connection, 'No connection available to fetch object with');
       return connection.getObject(sanitizeVariableDescriptor(descriptor));
     },

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('');