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

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

@@ -365,7 +365,7 @@ func (c *Client) startRustRDP(ctx context.Context) error {
 	}
 
 	c.cfg.Log.Info(message)
-	c.sendTDPNotification(message, tdp.SeverityInfo)
+	c.sendTDPNotification(message, tdp.SeverityError)
 
 	return nil
 }

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

@@ -19,9 +19,9 @@
 import React, { 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 { State } from './useDesktopSession';
 import { DesktopSession } from './DesktopSession';
@@ -36,12 +36,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' },
@@ -52,25 +46,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: () => {},
@@ -90,9 +79,9 @@ const props: State = {
   },
   showAnotherSessionActiveDialog: false,
   setShowAnotherSessionActiveDialog: () => {},
-  warnings: [],
-  onRemoveWarning: () => {},
-  windowOnResize: throttle(() => {}, 1000),
+  alerts: [],
+  onRemoveAlert: () => {},
+  onResize: () => {},
 };
 
 export const BothProcessing = () => (
@@ -176,7 +165,7 @@ export const TdpGraceful = () => (
 export const ConnectedSettingsFalse = () => {
   const client = fakeClient();
   client.connect = async () => {
-    client.emit(TdpClientEvent.TDP_PNG_FRAME);
+    emitGrayFrame(client);
   };
 
   return (
@@ -197,17 +186,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 (
@@ -228,9 +214,6 @@ export const ConnectedSettingsTrue = () => {
         browserSupported: true,
         directorySelected: true,
       }}
-      clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
-        fillGray(ctx.canvas);
-      }}
     />
   );
 };
@@ -317,7 +300,7 @@ export const ClipboardSharingDisabledBrowserPermissions = () => (
 export const Warnings = () => {
   const client = fakeClient();
   client.connect = async () => {
-    client.emit(TdpClientEvent.TDP_PNG_FRAME);
+    emitGrayFrame(client);
   };
 
   const [warnings, setWarnings] = useState<NotificationItem[]>([]);
@@ -360,12 +343,31 @@ export const Warnings = () => {
           browserSupported: true,
           directorySelected: true,
         }}
-        clientOnPngFrame={(ctx: CanvasRenderingContext2D) => {
-          fillGray(ctx.canvas);
-        }}
-        warnings={warnings}
-        onRemoveWarning={removeWarning}
+        alerts={warnings}
+        onRemoveAlert={removeWarning}
       />
     </>
   );
 };
+
+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);
+}