[v17] Refactor client canvas and fix a race condition when closing RDP stream

lib/srv/desktop/rdp/rdpclient/client.go

@@ -396,8 +396,7 @@ func (c *Client) startRustRDP(ctx context.Context) error {
 
 	c.cfg.Logger.InfoContext(ctx, message)
 
-	// TODO(zmb3): convert this to severity error and ensure it renders in the UI
-	c.sendTDPAlert(message, tdp.SeverityInfo)
+	c.sendTDPAlert(message, tdp.SeverityError)
 
 	return nil
 }

web/packages/teleport/src/DesktopSession/DesktopSession.story.tsx

@@ -20,9 +20,9 @@ import { useState } from 'react';
 
 import { ButtonPrimary } from 'design/Button';
 import { NotificationItem } from 'shared/components/Notification';
-import { throttle } from 'shared/utils/highbar';
 
 import { TdpClient, TdpClientEvent } from 'teleport/lib/tdp';
+import { BitmapFrame } from 'teleport/lib/tdp/client';
 import { makeDefaultMfaState } from 'teleport/lib/useMfa';
 
 import { DesktopSession } from './DesktopSession';
@@ -38,12 +38,6 @@ const fakeClient = () => {
   return client;
 };
 
-const fillGray = (canvas: HTMLCanvasElement) => {
-  var ctx = canvas.getContext('2d');
-  ctx.fillStyle = 'gray';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-};
-
 const props: State = {
   hostname: 'host.com',
   fetchAttempt: { status: 'processing' },
@@ -54,25 +48,20 @@ const props: State = {
   },
   tdpClient: fakeClient(),
   username: 'user',
-  clientOnWsOpen: () => {},
-  clientOnWsClose: () => {},
   wsConnection: { status: 'closed', statusText: 'websocket closed' },
   setClipboardSharingState: () => {},
   directorySharingState: {
     allowedByAcl: true,
     browserSupported: true,
     directorySelected: false,
   },
+  addAlert: () => {},
+  setWsConnection: () => {},
   setDirectorySharingState: () => {},
   onShareDirectory: () => {},
   onCtrlAltDel: () => {},
-  clientOnPngFrame: () => {},
-  clientOnBitmapFrame: () => {},
-  clientOnClientScreenSpec: () => {},
+  setInitialTdpConnectionSucceeded: () => {},
   clientScreenSpecToRequest: { width: 0, height: 0 },
-  clientOnTdpError: () => {},
-  clientOnTdpInfo: () => {},
-  clientOnTdpWarning: () => {},
   canvasOnKeyDown: () => {},
   canvasOnKeyUp: () => {},
   canvasOnMouseMove: () => {},
@@ -88,7 +77,7 @@ const props: State = {
   setShowAnotherSessionActiveDialog: () => {},
   alerts: [],
   onRemoveAlert: () => {},
-  windowOnResize: throttle(() => {}, 1000),
+  onResize: () => {},
 };
 
 export const BothProcessing = () => (
@@ -172,7 +161,7 @@ export const TdpGraceful = () => (
 export const ConnectedSettingsFalse = () => {
   const client = fakeClient();
   client.connect = async () => {
-    client.emit(TdpClientEvent.TDP_PNG_FRAME);
+    emitGrayFrame(client);
   };
 
   return (
@@ -193,17 +182,14 @@ export const ConnectedSettingsFalse = () => {
         browserSupported: false,
         directorySelected: false,
       }}
-      clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
-        fillGray(ctx.canvas);
-      }}
     />
   );
 };
 
 export const ConnectedSettingsTrue = () => {
   const client = fakeClient();
   client.connect = async () => {
-    client.emit(TdpClientEvent.TDP_PNG_FRAME);
+    emitGrayFrame(client);
   };
 
   return (
@@ -224,9 +210,6 @@ export const ConnectedSettingsTrue = () => {
         browserSupported: true,
         directorySelected: true,
       }}
-      clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
-        fillGray(ctx.canvas);
-      }}
     />
   );
 };
@@ -319,7 +302,7 @@ export const ClipboardSharingDisabledBrowserPermissions = () => (
 export const Alerts = () => {
   const client = fakeClient();
   client.connect = async () => {
-    client.emit(TdpClientEvent.TDP_PNG_FRAME);
+    emitGrayFrame(client);
   };
 
   const [alerts, setAlerts] = useState<NotificationItem[]>([]);
@@ -375,12 +358,31 @@ export const Alerts = () => {
           browserSupported: true,
           directorySelected: true,
         }}
-        clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
-          fillGray(ctx.canvas);
-        }}
         alerts={alerts}
         onRemoveAlert={removeAlert}
       />
     </>
   );
 };
+
+function emitGrayFrame(client: TdpClient) {
+  const width = 300;
+  const height = 100;
+  const imageData = new ImageData(width, height);
+
+  // Fill with gray (RGB: 128, 128, 128)
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    imageData.data[i] = 128; // Red
+    imageData.data[i + 1] = 128; // Green
+    imageData.data[i + 2] = 128; // Blue
+    imageData.data[i + 3] = 255; // Alpha (fully opaque)
+  }
+
+  const frame: BitmapFrame = {
+    left: 0,
+    top: 0,
+    image_data: imageData,
+  };
+
+  client.emit(TdpClientEvent.TDP_BMP_FRAME, frame);
+}