fix(ui): improve ux of backend disconnect modal (#2378)

diamonwiggins · web-flow · commit 744bb512020d · 2025-06-27T11:35:53.000-07:00
* handle backend disconnect

* add new lines

* fix lint

* use a simple component instead of react context

* new lines

* make health check timeout less aggressive

* remove consecutiveattempts logic for simplicity

* clean up

* synchornize timer with retry button

* remove merge markers

* fix lint

* remove retry button
diff --git a/web/src/components/common/ConnectionMonitor.tsx b/web/src/components/common/ConnectionMonitor.tsx
@@ -1,15 +1,34 @@
 import React, { useEffect, useState, useCallback } from 'react';
 
+const RETRY_INTERVAL = 10000; // 10 seconds
+
+// Reusable spinner component
+const Spinner: React.FC = () => (
+  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
+);
+
 // Connection modal component
-const ConnectionModal: React.FC<{ onRetry: () => void; isRetrying: boolean }> = ({ onRetry, isRetrying }) => {
-  const [retryCount, setRetryCount] = useState(0);
+const ConnectionModal: React.FC<{ 
+  nextRetryTime?: number;
+}> = ({ nextRetryTime }) => {
+  const [secondsUntilRetry, setSecondsUntilRetry] = useState(0);
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setRetryCount(count => count + 1);
-    }, 1000);
+    if (!nextRetryTime) return;
+    
+    const updateCountdown = () => {
+      const now = Date.now();
+      const remaining = Math.max(0, Math.floor((nextRetryTime - now) / 1000));
+      setSecondsUntilRetry(remaining);
+    };
+    
+    // Update immediately
+    updateCountdown();
+    
+    // Update every second
+    const interval = setInterval(updateCountdown, 1000);
     return () => clearInterval(interval);
-  }, []);
+  }, [nextRetryTime]);
 
   return (
     <div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
@@ -31,90 +50,99 @@ const ConnectionModal: React.FC<{ onRetry: () => void; isRetrying: boolean }> =
           installer is running and accessible.
         </p>
         
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-center">
           <div className="flex items-center text-sm font-semibold text-gray-600">
-            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
-            Trying again in {Math.max(1, 10 - (retryCount % 10))} second{Math.max(1, 10 - (retryCount % 10)) !== 1 ? 's' : ''}
+            {secondsUntilRetry > 0 ? (
+              <>
+                <Spinner />
+                Retrying in {secondsUntilRetry} second{secondsUntilRetry !== 1 ? 's' : ''}
+              </>
+            ) : (
+              <>
+                <Spinner />
+                Retrying now...
+              </>
+            )}
           </div>
-          <button 
-            onClick={onRetry}
-            disabled={isRetrying}
-            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isRetrying ? 'Retrying...' : 'Try Now'}
-          </button>
         </div>
       </div>
     </div>
   );
 };
 
-const ConnectionMonitor: React.FC = () => {
+// Custom hook for connection monitoring logic
+const useConnectionMonitor = () => {
   const [isConnected, setIsConnected] = useState(true);
-  const [isChecking, setIsChecking] = useState(false);
+  const [nextRetryTime, setNextRetryTime] = useState<number | undefined>();
+  const [checkInterval, setCheckInterval] = useState<NodeJS.Timeout | null>(null);
 
   const checkConnection = useCallback(async () => {
-    setIsChecking(true);
-    
     try {
-      // Try up to 3 times before marking as disconnected
-      let attempts = 0;
-      const maxAttempts = 3;
+      const timeoutPromise = new Promise((_, reject) => 
+        setTimeout(() => reject(new Error('Timeout')), 5000)
+      );
       
-      while (attempts < maxAttempts) {
-        try {
-          // Create a timeout promise
-          const timeoutPromise = new Promise((_, reject) => 
-            setTimeout(() => reject(new Error('Timeout')), 5000)
-          );
-          
-          const fetchPromise = fetch('/api/health', {
-            method: 'GET',
-            headers: { 'Content-Type': 'application/json' },
-          });
-          
-          const response = await Promise.race([fetchPromise, timeoutPromise]) as Response;
-          
-          if (response.ok) {
-            setIsConnected(true);
-            return;
-          } else {
-            throw new Error(`HTTP ${response.status}`);
-          }
-        } catch {
-          attempts++;
-          if (attempts < maxAttempts) {
-            await new Promise(resolve => setTimeout(resolve, 1000));
-          }
-        }
-      }
+      const fetchPromise = fetch('/api/health', {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
       
-      // All attempts failed - show modal immediately
-      setIsConnected(false);
+      const response = await Promise.race([fetchPromise, timeoutPromise]) as Response;
       
+      if (response.ok) {
+        setIsConnected(true);
+        setNextRetryTime(undefined);
+      } else {
+        throw new Error(`HTTP ${response.status}`);
+      }
     } catch {
+      // Connection failed - set up countdown for next retry
       setIsConnected(false);
-    } finally {
-      setIsChecking(false);
+      const retryTime = Date.now() + RETRY_INTERVAL;
+      setNextRetryTime(retryTime);
     }
   }, []);
 
   useEffect(() => {
     // Initial check
     checkConnection();
     
-    // Set up periodic health checks every 5 seconds
-    const interval = setInterval(checkConnection, 5000);
+    // Set up regular interval checks
+    const interval = setInterval(checkConnection, RETRY_INTERVAL);
+    setCheckInterval(interval);
     
-    return () => clearInterval(interval);
-  }, [checkConnection]);
+    // Cleanup on unmount
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty dependency array to prevent infinite loops
+
+  // Cleanup interval when it changes
+  useEffect(() => {
+    return () => {
+      if (checkInterval) {
+        clearInterval(checkInterval);
+      }
+    };
+  }, [checkInterval]);
+
+  return {
+    isConnected,
+    nextRetryTime,
+  };
+};
+
+const ConnectionMonitor: React.FC = () => {
+  const { isConnected, nextRetryTime } = useConnectionMonitor();
 
   return (
     <>
       {!isConnected && (
         <ConnectionModal 
-          onRetry={checkConnection}
-          isRetrying={isChecking}
+          nextRetryTime={nextRetryTime}
         />
       )}
     </>
diff --git a/web/src/components/common/tests/ConnectionMonitor.test.tsx b/web/src/components/common/tests/ConnectionMonitor.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
@@ -46,14 +46,15 @@ describe('ConnectionMonitor', () => {
     }, { timeout: 4000 });
   }, 6000);
 
-  it('should handle manual retry', async () => {
-    let manualRetryClicked = false;
+  it('should handle automatic retry', async () => {
+    let retryCount = 0;
     
     server.use(
       http.get('*/api/health', () => {
+        retryCount++;
         
-        // Keep failing until manual retry is clicked, then succeed
-        if (!manualRetryClicked) {
+        // Fail first time, succeed on second automatic retry
+        if (retryCount === 1) {
           return HttpResponse.error();
         }
         
@@ -71,20 +72,16 @@ describe('ConnectionMonitor', () => {
       expect(screen.getByText('Cannot connect')).toBeInTheDocument();
     }, { timeout: 6000 });
 
-    // Wait for the retry button to be available
+    // Should show countdown
     await waitFor(() => {
-      expect(screen.getByText('Try Now')).toBeInTheDocument();
+      expect(screen.getByText(/Retrying in \d+ second/)).toBeInTheDocument();
     }, { timeout: 1000 });
 
-    // Mark that manual retry was clicked, then click it
-    manualRetryClicked = true;
-    fireEvent.click(screen.getByText('Try Now'));
-
-    // Modal should disappear when connection is restored
+    // Modal should disappear when automatic retry succeeds
     await waitFor(() => {
       expect(screen.queryByText('Cannot connect')).not.toBeInTheDocument();
-    }, { timeout: 6000 });
-  }, 12000);
+    }, { timeout: 12000 });
+  }, 15000);
 
   it('should show retry countdown timer', async () => {
     server.use(
@@ -99,6 +96,6 @@ describe('ConnectionMonitor', () => {
       expect(screen.getByText('Cannot connect')).toBeInTheDocument();
     }, { timeout: 4000 });
 
-    expect(screen.getByText(/Trying again in \d+ second/)).toBeInTheDocument();
+    expect(screen.getByText(/Retrying in \d+ second/)).toBeInTheDocument();
   }, 6000);
 });
