feat: enhance ConnectionDialog with toggle connection functionality and update CollaborationClient to support withCredentials

Author: isaaclins

excalidraw-app/src/components/ConnectionDialog.tsx

@@ -131,6 +131,26 @@ export function ConnectionDialog({
     return lastFetchedUrl || storedUrl || effectiveServerUrl;
   }, [lastFetchedUrl, storedUrl, effectiveServerUrl]);
 
+  const isConnectedToRoom = Boolean(serverConfig.enabled && currentRoomId);
+
+  const toggleButtonLabel = isConnectedToRoom
+    ? 'Disconnect'
+    : isFetchingRooms
+    ? 'Connecting…'
+    : 'Connect';
+
+  const toggleButtonDisabled = isConnectedToRoom
+    ? false
+    : !hasEffectiveServerUrl || isFetchingRooms;
+
+  const handleToggleClick = () => {
+    if (isConnectedToRoom) {
+      handleDisconnectClick();
+    } else {
+      void handleConnectClick();
+    }
+  };
+
   const handleRoomSelection = (roomId: string) => {
     if (!resolvedServerUrl) {
       setRoomsError('Connect to a server before selecting a room.');
@@ -148,8 +168,6 @@ export function ConnectionDialog({
     onSelectRoom(newRoomId, resolvedServerUrl);
   };
 
-  const isConnectedToRoom = Boolean(serverConfig.enabled && currentRoomId);
-
   return (
     <div className="connection-dialog-overlay" onClick={onClose}>
       <div className="connection-dialog" onClick={(e) => e.stopPropagation()}>
@@ -195,18 +213,11 @@ export function ConnectionDialog({
 
         <div className="button-group">
           <button
-            onClick={handleConnectClick}
-            disabled={isFetchingRooms || !hasEffectiveServerUrl}
-            className="btn-primary"
-          >
-            {isFetchingRooms ? 'Connecting…' : 'Connect'}
-          </button>
-          <button
-            onClick={handleDisconnectClick}
-            disabled={!isConnectedToRoom && !storedUrl}
-            className="btn-secondary"
+            onClick={handleToggleClick}
+            disabled={toggleButtonDisabled}
+            className={isConnectedToRoom ? 'btn-secondary' : 'btn-primary'}
           >
-            Disconnect
+            {toggleButtonLabel}
           </button>
           <button onClick={onClose} className="btn-secondary">
             Close

excalidraw-app/src/lib/__tests__/websocket.test.ts

@@ -74,24 +74,24 @@ describe('CollaborationClient', () => {
 
   describe('joinRoom', () => {
     it('should throw error when not connected', () => {
-      return expect(client.joinRoom('room-123')).rejects.toThrow('Not connected to server');
+      expect(() => client.joinRoom('room-123')).toThrow('Not connected to server');
     });
 
     it('should handle empty room ID when trying to join', () => {
-      return expect(client.joinRoom('')).rejects.toThrow('Not connected to server');
+      expect(() => client.joinRoom('')).toThrow('Not connected to server');
     });
   });
 
   describe('broadcast', () => {
     it('should not broadcast when not connected', () => {
       mockSocket.connected = false;
-      return expect(client.broadcast({ data: 'test' })).resolves.toBeUndefined();
+      expect(() => client.broadcast({ data: 'test' })).not.toThrow();
       expect(mockSocket.emit).not.toHaveBeenCalled();
     });
 
     it('should handle null data', () => {
       mockSocket.connected = false;
-      return expect(client.broadcast(null)).resolves.toBeUndefined();
+      expect(() => client.broadcast(null as unknown as Record<string, unknown>)).not.toThrow();
       expect(mockSocket.emit).not.toHaveBeenCalled();
     });
   });

excalidraw-app/src/lib/websocket.ts

@@ -27,6 +27,7 @@ export class CollaborationClient {
 
       this.socket = io(this.serverUrl, {
         transports: ['websocket', 'polling'],
+        withCredentials: true,
       });
 
       this.socket.on('connect', () => {