From 1678ec0a2398916f7e6155cbc54ce5282bbb764f Mon Sep 17 00:00:00 2001 From: Sourabh Jain Date: Tue, 18 Feb 2025 17:11:39 +0530 Subject: [PATCH] xterm add --- package-lock.json | 15 ++++- package.json | 2 +- src/Explorer/Tabs/TerminalTab.tsx | 91 ++++++++++++++-------------- src/Explorer/Tabs/XTermComponent.tsx | 16 +++++ 4 files changed, 77 insertions(+), 47 deletions(-) create mode 100644 src/Explorer/Tabs/XTermComponent.tsx diff --git a/package-lock.json b/package-lock.json index 97106a145..176d7d5cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "@babel/plugin-proposal-decorators": "7.12.12", "@fluentui/react": "8.119.0", "@fluentui/react-components": "9.54.2", - "@jupyterlab/services": "6.0.2", "@jupyterlab/terminal": "3.0.3", "@microsoft/applicationinsights-web": "2.6.1", "@nteract/commutable": "7.5.1", @@ -114,6 +113,7 @@ "tinykeys": "2.1.0", "underscore": "1.12.1", "utility-types": "3.10.0", + "xterm-for-react": "1.0.4", "zustand": "3.5.0" }, "devDependencies": { @@ -36550,6 +36550,19 @@ "xterm": "^4.0.0" } }, + "node_modules/xterm-for-react": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/xterm-for-react/-/xterm-for-react-1.0.4.tgz", + "integrity": "sha512-DCkLR9ZXeW907YyyaCTk/3Ol34VRHfCnf3MAPOkj3dUNA85sDqHvTXN8efw4g7bx7gWdJQRsEpGt2tJOXKG3EQ==", + "dependencies": { + "prop-types": "^15.7.2", + "xterm": "^4.5.0" + }, + "peerDependencies": { + "react": "^16.0.0", + "react-dom": "^16.0.0" + } + }, "node_modules/y18n": { "version": "4.0.3", "license": "ISC" diff --git a/package.json b/package.json index 2b984ca47..1882b40e2 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@babel/plugin-proposal-decorators": "7.12.12", "@fluentui/react": "8.119.0", "@fluentui/react-components": "9.54.2", - "@jupyterlab/services": "6.0.2", "@jupyterlab/terminal": "3.0.3", "@microsoft/applicationinsights-web": "2.6.1", "@nteract/commutable": "7.5.1", @@ -46,6 +45,7 @@ "@types/mkdirp": "1.0.1", "@types/node-fetch": "2.5.7", "@xmldom/xmldom": "0.7.13", + "xterm-for-react":"1.0.4", "allotment": "1.20.2", "applicationinsights": "1.8.0", "bootstrap": "3.4.1", diff --git a/src/Explorer/Tabs/TerminalTab.tsx b/src/Explorer/Tabs/TerminalTab.tsx index 986d4ef11..0abd5618a 100644 --- a/src/Explorer/Tabs/TerminalTab.tsx +++ b/src/Explorer/Tabs/TerminalTab.tsx @@ -10,10 +10,11 @@ import * as DataModels from "../../Contracts/DataModels"; import * as ViewModels from "../../Contracts/ViewModels"; import { userContext } from "../../UserContext"; import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent"; -import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent"; import Explorer from "../Explorer"; -import { useNotebook } from "../Notebook/useNotebook"; +//import { useNotebook } from "../Notebook/useNotebook"; import TabsBase from "./TabsBase"; +import XTermComponent from "./XTermComponent"; + export interface TerminalTabOptions extends ViewModels.TabOptions { account: DataModels.DatabaseAccount; @@ -25,7 +26,7 @@ export interface TerminalTabOptions extends ViewModels.TabOptions { /** * Notebook terminal tab */ -class NotebookTerminalComponentAdapter implements ReactAdapter { +class XTermAdapter implements ReactAdapter { // parameters: true: show, false: hide public parameters: ko.Computed; constructor( @@ -47,14 +48,14 @@ class NotebookTerminalComponentAdapter implements ReactAdapter { /> ); } - return this.parameters() ? ( - + + // ) : ( ); @@ -74,28 +75,28 @@ class NotebookTerminalComponentAdapter implements ReactAdapter { } export default class TerminalTab extends TabsBase { - public readonly html = '
'; + public readonly html = '
'; private container: Explorer; - private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter; + private xtermAdapter: XTermAdapter; private isAllPublicIPAddressesEnabled: ko.Observable; constructor(options: TerminalTabOptions) { super(options); this.container = options.container; this.isAllPublicIPAddressesEnabled = ko.observable(true); - this.notebookTerminalComponentAdapter = new NotebookTerminalComponentAdapter( - () => this.getNotebookServerInfo(options), + this.xtermAdapter = new XTermAdapter( + () => null, () => userContext?.databaseAccount, () => this.tabId, () => this.getUsername(), this.isAllPublicIPAddressesEnabled, options.kind, ); - this.notebookTerminalComponentAdapter.parameters = ko.computed(() => { + this.xtermAdapter.parameters = ko.computed(() => { if ( this.isTemplateReady() && - useNotebook.getState().isNotebookEnabled && - useNotebook.getState().notebookServerInfo?.notebookServerEndpoint && + // useNotebook.getState().isNotebookEnabled && + // useNotebook.getState().notebookServerInfo?.notebookServerEndpoint && this.isAllPublicIPAddressesEnabled() ) { return true; @@ -134,41 +135,41 @@ export default class TerminalTab extends TabsBase { this.updateNavbarWithTabsButtons(); } - private getNotebookServerInfo(options: TerminalTabOptions): DataModels.NotebookWorkspaceConnectionInfo { - let endpointSuffix: string; + // private getNotebookServerInfo(options: TerminalTabOptions): DataModels.NotebookWorkspaceConnectionInfo { + // let endpointSuffix: string; - switch (options.kind) { - case ViewModels.TerminalKind.Default: - endpointSuffix = ""; - break; + // switch (options.kind) { + // case ViewModels.TerminalKind.Default: + // endpointSuffix = ""; + // break; - case ViewModels.TerminalKind.Mongo: - endpointSuffix = "mongo"; - break; + // case ViewModels.TerminalKind.Mongo: + // endpointSuffix = "mongo"; + // break; - case ViewModels.TerminalKind.Cassandra: - endpointSuffix = "cassandra"; - break; + // case ViewModels.TerminalKind.Cassandra: + // endpointSuffix = "cassandra"; + // break; - case ViewModels.TerminalKind.Postgres: - endpointSuffix = "postgresql"; - break; + // case ViewModels.TerminalKind.Postgres: + // endpointSuffix = "postgresql"; + // break; - case ViewModels.TerminalKind.VCoreMongo: - endpointSuffix = "mongovcore"; - break; + // case ViewModels.TerminalKind.VCoreMongo: + // endpointSuffix = "mongovcore"; + // break; - default: - throw new Error(`Terminal kind: ${options.kind} not supported`); - } + // default: + // throw new Error(`Terminal kind: ${options.kind} not supported`); + // } - const info: DataModels.NotebookWorkspaceConnectionInfo = useNotebook.getState().notebookServerInfo; - return { - authToken: info.authToken, - notebookServerEndpoint: `${info.notebookServerEndpoint.replace(/\/+$/, "")}/${endpointSuffix}`, - forwardingId: info.forwardingId, - }; - } + // const info: DataModels.NotebookWorkspaceConnectionInfo = useNotebook.getState().notebookServerInfo; + // return { + // authToken: info.authToken, + // notebookServerEndpoint: `${info.notebookServerEndpoint.replace(/\/+$/, "")}/${endpointSuffix}`, + // forwardingId: info.forwardingId, + // }; + // } private getUsername(): string { if (userContext.apiType !== "VCoreMongo" || !userContext?.vcoreMongoConnectionParams?.adminLogin) { diff --git a/src/Explorer/Tabs/XTermComponent.tsx b/src/Explorer/Tabs/XTermComponent.tsx new file mode 100644 index 000000000..2de211d1a --- /dev/null +++ b/src/Explorer/Tabs/XTermComponent.tsx @@ -0,0 +1,16 @@ +import React, { useEffect, useRef } from "react"; +import { XTerm } from "xterm-for-react"; + +const XTermComponent: React.FC = () => { + const xtermRef = useRef(null); + + useEffect(() => { + if (xtermRef.current) { + xtermRef.current.terminal.writeln("Hello, World!"); + } + }, []); + + return ; +}; + +export default XTermComponent;