From c7f9d7e3053aef7f719942b47d150eb2d9960a08 Mon Sep 17 00:00:00 2001 From: Jade Welton Date: Thu, 21 May 2026 10:19:13 -0700 Subject: [PATCH] Switch VCore Mongo quickstart to use CloudShell terminal - Replace NotebookTerminalComponent with CloudShellTerminalComponent in VCoreMongoQuickstartTab - Refactor useTerminal hook to send messages via WebSocket instead of postRobot/iframe - Register CloudShellTerminalComponent socket with useTerminal store - Remove notebook dependencies (useNotebook, allocateContainer) from VCoreMongoQuickstartTab - Remove useTerminal reference from NotebookTerminalComponent (dead code) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Notebook/NotebookTerminalComponent.tsx | 2 - .../CloudShellTerminalComponent.tsx | 11 ++++- src/Explorer/Tabs/Tabs.tsx | 2 +- src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx | 46 ++++--------------- src/hooks/useTerminal.ts | 24 ++++------ 5 files changed, 28 insertions(+), 57 deletions(-) diff --git a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx index 21b5602ef..a50ec41f5 100644 --- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx +++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx @@ -3,7 +3,6 @@ */ import { AuthType } from "../../../AuthType"; -import { useTerminal } from "hooks/useTerminal"; import postRobot from "post-robot"; import * as React from "react"; import * as DataModels from "../../../Contracts/DataModels"; @@ -55,7 +54,6 @@ export class NotebookTerminalComponent extends React.Component): void { this.terminalWindow = (event.target as HTMLIFrameElement).contentWindow; - useTerminal.getState().setTerminal(this.terminalWindow); this.sendPropsToTerminalFrame(); } diff --git a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent.tsx b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent.tsx index 3408ccf21..c3eccd12f 100644 --- a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent.tsx +++ b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent.tsx @@ -1,3 +1,4 @@ +import { useTerminal } from "hooks/useTerminal"; import React, { useEffect, useRef } from "react"; import { Terminal } from "xterm"; import { FitAddon } from "xterm-addon-fit"; @@ -59,7 +60,14 @@ export const CloudShellTerminalComponent: React.FC { + const socket = await startCloudShellTerminal(terminal, props.shellType); + socketRef.current = socket; + if (socket) { + useTerminal.getState().setSocket(socket); + } + }; + initTerminal(); // Cleanup function to close WebSocket and dispose terminal return () => { @@ -73,6 +81,7 @@ export const CloudShellTerminalComponent: React.FC + ) : ( ); diff --git a/src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx b/src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx index 3956841ac..2bbdb8072 100644 --- a/src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx +++ b/src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx @@ -1,10 +1,8 @@ -import { Spinner, SpinnerSize, Stack, Text } from "@fluentui/react"; +import { Stack } from "@fluentui/react"; -import { NotebookWorkspaceConnectionInfo } from "Contracts/DataModels"; import { MessageTypes } from "Contracts/ExplorerContracts"; -import { NotebookTerminalComponent } from "Explorer/Controls/Notebook/NotebookTerminalComponent"; -import Explorer from "Explorer/Explorer"; -import { useNotebook } from "Explorer/Notebook/useNotebook"; +import { TerminalKind } from "Contracts/ViewModels"; +import { CloudShellTerminalComponent } from "Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent"; import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification"; import { VcoreMongoQuickstartGuide } from "Explorer/Quickstart/VCoreMongoQuickstartGuide"; import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules"; @@ -12,22 +10,9 @@ import { userContext } from "UserContext"; import React, { useEffect, useState } from "react"; import FirewallRuleScreenshot from "../../../images/vcoreMongoFirewallRule.png"; -interface VCoreMongoQuickstartTabProps { - explorer: Explorer; -} - -export const VcoreMongoQuickstartTab: React.FC = ({ - explorer, -}: VCoreMongoQuickstartTabProps): JSX.Element => { - const notebookServerInfo = useNotebook((state) => state.notebookServerInfo); +export const VcoreMongoQuickstartTab: React.FC = (): JSX.Element => { const [isAllPublicIPAddressEnabled, setIsAllPublicIPAddressEnabled] = useState(true); - const getNotebookServerInfo = (): NotebookWorkspaceConnectionInfo => ({ - authToken: notebookServerInfo.authToken, - notebookServerEndpoint: `${notebookServerInfo.notebookServerEndpoint?.replace(/\/+$/, "")}/mongovcore`, - forwardingId: notebookServerInfo.forwardingId, - }); - useEffect(() => { checkFirewallRules( "2023-03-01-preview", @@ -38,10 +23,6 @@ export const VcoreMongoQuickstartTab: React.FC = ( ); }); - useEffect(() => { - explorer.allocateContainer(); - }, []); - return ( @@ -55,25 +36,14 @@ export const VcoreMongoQuickstartTab: React.FC = ( shellName="MongoDB" /> )} - {isAllPublicIPAddressEnabled && notebookServerInfo?.notebookServerEndpoint && ( - )} - {isAllPublicIPAddressEnabled && !notebookServerInfo?.notebookServerEndpoint && ( - - - Connecting to the Mongo shell. - - - If the cluster was just created, this could take up to a minute. - - - - )} ); diff --git a/src/hooks/useTerminal.ts b/src/hooks/useTerminal.ts index f727d2d79..686bac67d 100644 --- a/src/hooks/useTerminal.ts +++ b/src/hooks/useTerminal.ts @@ -1,26 +1,20 @@ -import postRobot from "post-robot"; import create, { UseStore } from "zustand"; interface TerminalState { - terminalWindow: Window; - setTerminal: (terminalWindow: Window) => void; + socket: WebSocket | undefined; + setSocket: (socket: WebSocket) => void; sendMessage: (message: string) => void; } export const useTerminal: UseStore = create((set, get) => ({ - terminalWindow: undefined, - setTerminal: (terminalWindow: Window) => { - set({ terminalWindow }); + socket: undefined, + setSocket: (socket: WebSocket) => { + set({ socket }); }, sendMessage: (message: string) => { - const terminalWindow = get().terminalWindow; - postRobot.send( - terminalWindow, - "sendMessage", - { type: "stdin", content: [message] }, - { - domain: window.location.origin, - }, - ); + const socket = get().socket; + if (socket && socket.readyState === WebSocket.OPEN) { + socket.send(message + "\r"); + } }, }));