From 12ad23a061e70e327fd4129dfc14665bf005deb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Kr=C3=BCger?= Date: Mon, 17 Aug 2026 10:15:33 +0200 Subject: [PATCH] Sync CloudShell backend PTY size on terminal resize (#2553) * Sync CloudShell backend PTY size on terminal resize Resizing the browser window only re-fit the local xterm; the remote shell kept its original column count, so typed input wrapped/broke at the wrong column. Add resizeTerminal() client call to the CloudShell terminals/{id}/size endpoint and register a debounced terminal.onResize handler that pushes new dimensions to the backend. * Add unit tests for registerTerminalResizeHandler (debounce, no-op skip, error handling) * Fix resizeTerminal success test: stub a successful fetch response --- .../CloudShellTerminalCore.test.tsx | 119 ++++++++++++++++++ .../CloudShellTab/CloudShellTerminalCore.tsx | 48 ++++++- .../Data/CloudShellClient.test.tsx | 63 ++++++++++ .../CloudShellTab/Data/CloudShellClient.tsx | 24 ++++ 4 files changed, 252 insertions(+), 2 deletions(-) create mode 100644 src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.test.tsx diff --git a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.test.tsx b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.test.tsx new file mode 100644 index 000000000..f5f67c3de --- /dev/null +++ b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.test.tsx @@ -0,0 +1,119 @@ +import { Terminal } from "xterm"; +import { registerTerminalResizeHandler } from "./CloudShellTerminalCore"; +import { resizeTerminal } from "./Data/CloudShellClient"; + +// Mock the CloudShell client so we can assert on backend resize calls without any network access. +jest.mock("./Data/CloudShellClient"); + +const mockResizeTerminal = resizeTerminal as jest.Mock; + +const CONSOLE_URI = "https://shell.azure.com/console123"; +const TERMINAL_ID = "terminal-id"; +const DEBOUNCE_MS = 300; + +type ResizeListener = (size: { cols: number; rows: number }) => void; + +interface MockTerminal { + cols: number; + rows: number; + onResize: (listener: ResizeListener) => void; + emitResize: (size: { cols: number; rows: number }) => void; +} + +const createMockTerminal = (cols: number, rows: number): MockTerminal => { + let listener: ResizeListener | undefined; + return { + cols, + rows, + onResize: (cb: ResizeListener) => { + listener = cb; + }, + emitResize: (size: { cols: number; rows: number }) => listener?.(size), + }; +}; + +const registerHandler = (terminal: MockTerminal): void => + registerTerminalResizeHandler(terminal as unknown as Terminal, CONSOLE_URI, TERMINAL_ID); + +describe("registerTerminalResizeHandler", () => { + beforeEach(() => { + jest.useFakeTimers(); + mockResizeTerminal.mockReset(); + mockResizeTerminal.mockResolvedValue(undefined); + }); + + afterEach(() => { + jest.clearAllTimers(); + jest.useRealTimers(); + }); + + it("does not notify the backend when the dimensions are unchanged", () => { + const terminal = createMockTerminal(80, 24); + registerHandler(terminal); + + terminal.emitResize({ cols: 80, rows: 24 }); + jest.advanceTimersByTime(DEBOUNCE_MS); + + expect(mockResizeTerminal).not.toHaveBeenCalled(); + }); + + it("notifies the backend with the new dimensions after the debounce interval", () => { + const terminal = createMockTerminal(80, 24); + registerHandler(terminal); + + terminal.emitResize({ cols: 120, rows: 40 }); + // Nothing should be sent until the debounce interval elapses. + expect(mockResizeTerminal).not.toHaveBeenCalled(); + + jest.advanceTimersByTime(DEBOUNCE_MS); + + expect(mockResizeTerminal).toHaveBeenCalledTimes(1); + expect(mockResizeTerminal).toHaveBeenCalledWith(CONSOLE_URI, TERMINAL_ID, { cols: 120, rows: 40 }); + }); + + it("debounces rapid resizes into a single call with the latest dimensions", () => { + const terminal = createMockTerminal(80, 24); + registerHandler(terminal); + + terminal.emitResize({ cols: 100, rows: 30 }); + terminal.emitResize({ cols: 110, rows: 35 }); + terminal.emitResize({ cols: 120, rows: 40 }); + + jest.advanceTimersByTime(DEBOUNCE_MS); + + expect(mockResizeTerminal).toHaveBeenCalledTimes(1); + expect(mockResizeTerminal).toHaveBeenCalledWith(CONSOLE_URI, TERMINAL_ID, { cols: 120, rows: 40 }); + }); + + it("sends a separate call for each resize that is spaced beyond the debounce interval", () => { + const terminal = createMockTerminal(80, 24); + registerHandler(terminal); + + terminal.emitResize({ cols: 100, rows: 30 }); + jest.advanceTimersByTime(DEBOUNCE_MS); + + terminal.emitResize({ cols: 120, rows: 40 }); + jest.advanceTimersByTime(DEBOUNCE_MS); + + expect(mockResizeTerminal).toHaveBeenCalledTimes(2); + expect(mockResizeTerminal).toHaveBeenNthCalledWith(1, CONSOLE_URI, TERMINAL_ID, { cols: 100, rows: 30 }); + expect(mockResizeTerminal).toHaveBeenNthCalledWith(2, CONSOLE_URI, TERMINAL_ID, { cols: 120, rows: 40 }); + }); + + it("swallows backend resize errors and logs a warning", async () => { + const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => undefined); + mockResizeTerminal.mockRejectedValueOnce(new Error("boom")); + const terminal = createMockTerminal(80, 24); + registerHandler(terminal); + + terminal.emitResize({ cols: 120, rows: 40 }); + jest.advanceTimersByTime(DEBOUNCE_MS); + // Flush the microtask queue so the rejected promise's .catch handler runs. + await Promise.resolve(); + + expect(mockResizeTerminal).toHaveBeenCalledTimes(1); + expect(warnSpy).toHaveBeenCalledWith("CloudShell: failed to resize backend terminal", expect.any(Error)); + + warnSpy.mockRestore(); + }); +}); diff --git a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx index a706e0691..c69d9016e 100644 --- a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx +++ b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx @@ -10,6 +10,7 @@ import { provisionConsole, putEphemeralUserSettings, registerCloudShellProvider, + resizeTerminal, verifyCloudShellProviderRegistration, } from "./Data/CloudShellClient"; import { CloudShellProviderInfo, ProvisionConsoleResponse } from "./Models/DataModels"; @@ -26,6 +27,7 @@ const DEFAULT_FAIRFAX_CLOUDSHELL_REGION = "usgovvirginia"; const POLLING_INTERVAL_MS = 2000; const MAX_RETRY_COUNT = 10; const MAX_PING_COUNT = 120 * 60; // 120 minutes (60 seconds/minute) +const TERMINAL_RESIZE_DEBOUNCE_MS = 300; let pingCount = 0; let keepAliveID: NodeJS.Timeout = null; @@ -96,6 +98,7 @@ export const startCloudShellTerminal = async (terminal: Terminal, shellType: Ter socketUri?: string; provisionConsoleResponse?: ProvisionConsoleResponse; targetUri?: string; + terminalId?: string; } = await provisionCloudShellSession(resolvedRegion, terminal); if (!sessionDetails.socketUri) { @@ -108,6 +111,14 @@ export const startCloudShellTerminal = async (terminal: Terminal, shellType: Ter // Configure WebSocket connection with shell-specific commands const socket = await establishTerminalConnection(terminal, shellHandler, sessionDetails.socketUri); + // Keep the backend PTY size in sync with the frontend terminal. Without this, resizing the + // browser window only re-fits the local xterm while the remote shell keeps its original + // column count, causing typed input to wrap/break at the wrong column. + const consoleUri = sessionDetails.provisionConsoleResponse?.properties?.uri; + if (consoleUri && sessionDetails.terminalId) { + registerTerminalResizeHandler(terminal, consoleUri, sessionDetails.terminalId); + } + TelemetryProcessor.traceSuccess( Action.CloudShellTerminalSession, { @@ -159,13 +170,46 @@ export const determineCloudShellRegion = (): string => { return getNormalizedRegion(userContext.databaseAccount?.location, defaultRegion); }; +/** + * Registers a debounced handler that notifies the CloudShell backend whenever the frontend + * terminal is resized (e.g. after a browser window resize triggers FitAddon.fit()), keeping the + * remote PTY column/row count in sync with what the user sees. + */ +export const registerTerminalResizeHandler = (terminal: Terminal, consoleUri: string, terminalId: string): void => { + let debounceTimer: NodeJS.Timeout | null = null; + let lastCols = terminal.cols; + let lastRows = terminal.rows; + + terminal.onResize(({ cols, rows }) => { + if (cols === lastCols && rows === lastRows) { + return; + } + lastCols = cols; + lastRows = rows; + + if (debounceTimer) { + clearTimeout(debounceTimer); + } + debounceTimer = setTimeout(() => { + resizeTerminal(consoleUri, terminalId, { cols, rows }).catch((err) => { + console.warn("CloudShell: failed to resize backend terminal", err); + }); + }, TERMINAL_RESIZE_DEBOUNCE_MS); + }); +}; + /** * Provisions a CloudShell session */ export const provisionCloudShellSession = async ( resolvedRegion: string, terminal: Terminal, -): Promise<{ socketUri?: string; provisionConsoleResponse?: ProvisionConsoleResponse; targetUri?: string }> => { +): Promise<{ + socketUri?: string; + provisionConsoleResponse?: ProvisionConsoleResponse; + targetUri?: string; + terminalId?: string; +}> => { // Apply user settings await putEphemeralUserSettings(userContext.subscriptionId, resolvedRegion); @@ -217,7 +261,7 @@ export const provisionCloudShellSession = async ( socketUri = `wss://${targetUriBodyArr[0]}/$hc/${targetUriBodyArr[1]}/terminals/${termId}`; } - return { socketUri, provisionConsoleResponse, targetUri }; + return { socketUri, provisionConsoleResponse, targetUri, terminalId: termId }; }; /** diff --git a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx index cc89cb34f..0a38e4aee 100644 --- a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx +++ b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx @@ -6,6 +6,7 @@ import { provisionConsole, putEphemeralUserSettings, registerCloudShellProvider, + resizeTerminal, verifyCloudShellProviderRegistration, } from "./CloudShellClient"; @@ -340,4 +341,66 @@ describe("CloudShellClient", () => { ); }); }); + + describe("resizeTerminal", () => { + it("should call fetch with correct parameters", async () => { + const consoleUri = "https://shell.azure.com/console123"; + const terminalId = "terminal-id"; + const size = { rows: 40, cols: 120 }; + + global.fetch = jest.fn().mockImplementationOnce(() => { + return { + ok: true, + status: 200, + json: jest.fn().mockResolvedValue({}), + text: jest.fn().mockResolvedValue(""), + headers: new Headers(), + } as unknown as Promise; + }); + + await resizeTerminal(consoleUri, terminalId, size); + + expect(global.fetch).toHaveBeenCalledWith( + "https://shell.azure.com/console123/terminals/terminal-id/size?cols=120&rows=40&version=2019-01-01", + { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + "Content-Length": "2", + Authorization: "Bearer mock-token", + "x-ms-client-request-id": "mocked-uuid", + "Accept-Language": "en-US", + }, + body: "{}", + }, + ); + }); + + it("should handle errors when terminal resize fails", async () => { + const consoleUri = "https://shell.azure.com/console123"; + const terminalId = "terminal-id"; + const size = { rows: 40, cols: 120 }; + + global.fetch = jest.fn().mockImplementationOnce(() => { + return { + ok: false, + status: 500, + statusText: "Internal Server Error", + json: jest.fn().mockRejectedValue(new Error("Failed to parse JSON")), + text: jest.fn().mockResolvedValue("Server Error"), + headers: new Headers(), + } as unknown as Promise; + }); + + await expect(resizeTerminal(consoleUri, terminalId, size)).rejects.toThrow( + "Failed to resize terminal: 500 Internal Server Error", + ); + + expect(global.fetch).toHaveBeenCalledWith( + "https://shell.azure.com/console123/terminals/terminal-id/size?cols=120&rows=40&version=2019-01-01", + expect.any(Object), + ); + }); + }); }); diff --git a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx index 2f7926cae..38cf1b03c 100644 --- a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx +++ b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx @@ -125,3 +125,27 @@ export const connectTerminal = async ( return resp.json(); }; + +export const resizeTerminal = async ( + consoleUri: string, + terminalId: string, + size: { rows: number; cols: number }, +): Promise => { + const targetUri = consoleUri + `/terminals/${terminalId}/size?cols=${size.cols}&rows=${size.rows}&version=2019-01-01`; + const resp = await fetch(targetUri, { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + "Content-Length": "2", + Authorization: userContext.authorizationToken, + "x-ms-client-request-id": uuidv4(), + "Accept-Language": getLocale(), + }, + body: "{}", // empty body is necessary + }); + + if (!resp.ok) { + throw new Error(`Failed to resize terminal: ${resp.status} ${resp.statusText}`); + } +};