zowe · zFernand0 · Sep 5, 2024 · May 3, 2024 · May 7, 2024 · May 8, 2024
diff --git a/packages/zowe-explorer-api/src/vscode/ui/index.ts b/packages/zowe-explorer-api/src/vscode/ui/index.ts
@@ -14,3 +14,4 @@ export * from "./utils/TableMediator";
 export * from "./TableView";
 export * from "./TableViewProvider";
 export * from "./WebView";
+export * as HTMLTemplate from "./utils/HTMLTemplate";
diff --git a/packages/zowe-explorer-api/src/vscode/ui/utils/HTMLTemplate.ts b/packages/zowe-explorer-api/src/vscode/ui/utils/HTMLTemplate.ts
@@ -14,28 +14,24 @@
 /**
  * HTML template that is compiled with Mustache to load a WebView instance at runtime.
  */
-const HTMLTemplate: string = `
+const HTMLTemplate: string = /*html*/ `
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>{{ title }}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta 
-            http-equiv="Content-Security-Policy" 
-            content="default-src 'none'; font-src data: {{ cspSource }}; img-src data: vscode-resource: https:; script-src {{#unsafeEval}}'unsafe-eval'{{/unsafeEval}} 'nonce-{{ nonce }}';
-            style-src {{ cspSource }} vscode-resource: 'unsafe-inline' http: https: data:;"
+        <meta
+            http-equiv="Content-Security-Policy"
+            content="default-src 'none'; font-src data: https:; img-src data: vscode-resource: https:; script-src 'nonce-{{ nonce }}';
+            style-src vscode-resource: 'unsafe-inline' http: https: data:;"
         />
         <base href="{{ uris.resource.build }}">
-        {{#uris.resource.css}}
-        <link type="text/css" rel="stylesheet" href="{{ uris.resource.css }}" />
-        {{/uris.resource.css}}
-        {{#uris.resource.codicons}}
-        <link type="text/css" rel="stylesheet" href="{{ uris.resource.codicons }}" />
-        {{/uris.resource.codicons}}
+        {{{ style }}}
     </head>
     <body>
         <noscript>You'll need to enable JavaScript to run this app.</noscript>
+        {{{ startup }}}
         <div id="webviewRoot"></div>
         <script type="module" nonce="{{ nonce }}" src="{{ uris.resource.script }}" />
     </body>

diff --git a/packages/zowe-explorer/__tests__/__mocks__/@zowe/zos-console-for-zowe-sdk.ts b/packages/zowe-explorer/__tests__/__mocks__/@zowe/zos-console-for-zowe-sdk.ts
@@ -0,0 +1,12 @@
+/**
+ * This program and the accompanying materials are made available under the terms of the
+ * Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Copyright Contributors to the Zowe Project.
+ *
+ */
+
+export interface IIssueParms {}
diff --git a/packages/zowe-explorer/__tests__/__unit__/extension.unit.test.ts b/packages/zowe-explorer/__tests__/__unit__/extension.unit.test.ts
@@ -39,8 +39,8 @@ jest.mock("fs-extra");
 jest.mock("util");
 jest.mock("isbinaryfile");
 
-function createGlobalMocks() {
-    const mockReadProfilesFromDisk = jest.fn();
+async function createGlobalMocks() {
+    const mockReadProfilesFromDisk = jest.fn().mockReturnValue(Promise.resolve());
     const globalMocks = {
         mockLoadNamedProfile: jest.fn(),
         mockMkdirSync: jest.fn(),
@@ -50,6 +50,8 @@ function createGlobalMocks() {
         mockCreateTreeView: jest.fn().mockReturnValue({ onDidCollapseElement: jest.fn() }),
         mockExecuteCommand: jest.fn(),
         mockRegisterCommand: jest.fn(),
+        mockRegisterWebviewViewProvider: jest.fn(),
+        mockOnDidCloseTextDocument: jest.fn(),
         mockOnDidSaveTextDocument: jest.fn(),
         mockOnDidChangeSelection: jest.fn(),
         mockOnDidChangeConfiguration: jest.fn(),
@@ -257,6 +259,10 @@ function createGlobalMocks() {
         value: globalMocks.mockRegisterCommand,
         configurable: true,
     });
+    Object.defineProperty(vscode.window, "registerWebviewViewProvider", {
+        value: globalMocks.mockRegisterWebviewViewProvider,
+        configurable: true,
+    });
     Object.defineProperty(vscode.commands, "executeCommand", {
         value: globalMocks.mockExecuteCommand,
         configurable: true,

diff --git a/packages/zowe-explorer/__tests__/__unit__/zosconsole/ZosConsolePanel.unit.test.ts b/packages/zowe-explorer/__tests__/__unit__/zosconsole/ZosConsolePanel.unit.test.ts
@@ -0,0 +1,48 @@
+/**
+ * This program and the accompanying materials are made available under the terms of the
+ * Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Copyright Contributors to the Zowe Project.
+ *
+ */
+
+import { createInstanceOfProfile, createIProfile } from "../../__mocks__/mockCreators/shared";
+import { ZosConsoleViewProvider } from "../../../src/zosconsole/ZosConsolePanel";
+import { Profiles } from "../../../src/configuration/Profiles";
+import * as vscode from "vscode";
+
+describe("ZosConsoleViewProvider", () => {
+    function createGlobalMocks(): any {
+        const newMocks = {
+            imperativeProfile: createIProfile(),
+            profileInstance: null,
+            testWebView: {},
+        };
+        newMocks.testWebView = {
+            webview: {
+                postMessage: jest.fn(),
+                asWebviewUri: jest.fn(),
+                onDidReceiveMessage: jest.fn(),
+            },
+        };
+        newMocks.profileInstance = createInstanceOfProfile(newMocks.imperativeProfile);
+        Object.defineProperty(Profiles, "getInstance", {
+            value: jest.fn().mockReturnValue(newMocks.profileInstance),
+            configurable: true,
+        });
+        Object.defineProperty(vscode.Uri, "joinPath", { value: jest.fn(), configurable: true });
+
+        return newMocks;
+    }
+    describe("resolveWebviewView", () => {
+        it("should submit command", () => {
+            const globalMocks = createGlobalMocks();
+            const myconsole = new ZosConsoleViewProvider({} as any);
+            myconsole.resolveWebviewView(globalMocks.testWebView, {} as any, { isCancellationRequested: false } as any);
+            expect(globalMocks.testWebView.webview.onDidReceiveMessage).toBeCalled();
+        });
+    });
+});
diff --git a/packages/zowe-explorer/package.json b/packages/zowe-explorer/package.json
@@ -46,6 +46,11 @@
           "id": "zowe-panel",
           "icon": "resources/zowe.svg",
           "title": "%viewsContainers.panel.tableView%"
+        },
+        {
+          "id": "zowezosconsole",
+          "title": "Zowe Explorer z/OS Console",
+          "icon": ""
         }
       ]
     },
@@ -70,6 +75,13 @@
           "id": "zowe-resources",
           "name": "%zowe.resources.name%"
         }
+      ],
+      "zowezosconsole": [
+        {
+          "id": "zosconsole",
+          "name": "z/OS Console",
+          "type": "webview"
+        }
       ]
     },
     "keybindings": [
@@ -1841,6 +1853,7 @@
     "@zowe/zos-jobs-for-zowe-sdk": "8.0.0-next.202407232256",
     "@zowe/zosmf-for-zowe-sdk": "8.0.0-next.202407232256",
     "@zowe/zowe-explorer-api": "3.0.0-next-SNAPSHOT",
+    "@vscode/codicons": "^0.0.35",
     "dayjs": "^1.11.10",
     "fs-extra": "8.0.1",
     "isbinaryfile": "4.0.4",

diff --git a/packages/zowe-explorer/src/extension.ts b/packages/zowe-explorer/src/extension.ts
@@ -23,6 +23,7 @@ import { SharedInit } from "./trees/shared/SharedInit";
 import { SharedTreeProviders } from "./trees/shared/SharedTreeProviders";
 import { USSInit } from "./trees/uss/USSInit";
 import { ProfilesUtils } from "./utils/ProfilesUtils";
+import { ZosConsoleViewProvider } from "./zosconsole/ZosConsolePanel";
 
 /**
  * The function that runs when the extension is loaded
@@ -47,11 +48,14 @@ export async function activate(context: vscode.ExtensionContext): Promise<ZoweEx
         async () => SharedInit.setupRemoteWorkspaceFolders()
     );
     SharedInit.registerCommonCommands(context, providers);
+    SharedInit.registerZosConsoleView(context);
     SharedInit.registerRefreshCommand(context, activate, deactivate);
     ZoweExplorerExtender.createInstance(providers.ds, providers.uss, providers.job);
 
     SharedInit.watchConfigProfile(context);
     await SharedInit.watchForZoweButtonClick();
+    const provider = new ZosConsoleViewProvider(context.extensionUri);
+    context.subscriptions.push(vscode.window.registerWebviewViewProvider(ZosConsoleViewProvider.viewType, provider));
 
     return ZoweExplorerApiRegister.getInstance();
 }

diff --git a/packages/zowe-explorer/src/trees/shared/SharedInit.ts b/packages/zowe-explorer/src/trees/shared/SharedInit.ts
@@ -45,6 +45,7 @@ import { SharedUtils } from "./SharedUtils";
 import { SharedContext } from "./SharedContext";
 import { TreeViewUtils } from "../../utils/TreeViewUtils";
 import { CertificateWizard } from "../../utils/CertificateWizard";
+import { ZosConsoleViewProvider } from "../../zosconsole/ZosConsolePanel";
 
 export class SharedInit {
     public static registerRefreshCommand(
@@ -423,6 +424,11 @@ export class SharedInit {
         ZoweLogger.zeOutputChannel = await LoggerUtils.initVscLogger(context, logsPath);
     }
 
+    public static registerZosConsoleView(context: vscode.ExtensionContext): void {
+        const provider = new ZosConsoleViewProvider(context.extensionUri);
+        context.subscriptions.push(vscode.window.registerWebviewViewProvider(ZosConsoleViewProvider.viewType, provider));
+    }
+
     /**
      * Initialize Zowe Explorer UI functions
      * Function can only run one time during runtime, otherwise it will immediately return

diff --git a/packages/zowe-explorer/src/webviews/src/zos-console/App.tsx b/packages/zowe-explorer/src/webviews/src/zos-console/App.tsx
@@ -0,0 +1,93 @@
+import { Dropdown, Option, TextArea, TextField } from "@vscode/webview-ui-toolkit";
+import { VSCodeDropdown, VSCodeTextArea, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { useEffect, useState } from "preact/hooks";
+
+export function App() {
+  const [consoleContent, setConsoleContent] = useState("");
+  useEffect(() => {
+    window.addEventListener("message", (event) => {
+      // Prevent users from sending data into webview outside of extension/webview context
+      const eventUrl = new URL(event.origin);
+      const isWebUser =
+        (eventUrl.protocol === document.location.protocol && eventUrl.hostname === document.location.hostname) ||
+        eventUrl.hostname.endsWith(".github.dev");
+      const isLocalVSCodeUser = eventUrl.protocol === "vscode-webview:";
+
+      if (!isWebUser && !isLocalVSCodeUser) {
+        return;
+      }
+
+      const message = event.data;
+      const profileList = document.getElementById("systems") as Option;
+
+      switch (message.type) {
+        case "commandResult":
+          setConsoleContent(consoleContent + `> ${message.cmd} (${message.profile})\n${message.result}`);
+          break;
+        case "optionsList":
+          for (const profile in message.profiles) {
+            const option = document.createElement("vscode-option");
+            option.textContent = message.profiles[profile];
+            if (message.profiles[profile] === message.defaultProfile) {
+              option.setAttribute("selected", "true");
+            }
+            profileList.appendChild(option);
+          }
+          break;
+      }
+    });
+    const consoleResponse = document.getElementById("output") as TextArea;
+    consoleResponse.control.scrollTop = consoleResponse.control.scrollHeight;
+  });
+
+  const sendCommand = (e: KeyboardEvent) => {
+    const consoleField = document.getElementById("command-input") as TextField;
+    const profileList = document.getElementById("systems") as Dropdown;
+    if (e.key === "Enter") {
+      if (consoleField!.value === "clear") {
+        setConsoleContent("");
+      } else {
+        postMessage({
+          command: "opercmd",
+          profile: profileList.options[profileList.selectedIndex].text,
+          text: consoleField.value,
+        });
+      }
+      consoleField.value = "";
+    }
+  };
+
+  return (
+    <div className="box">
+      <div style="display: flex; align-items: center; gap: 10px;">
+        <VSCodeTextField
+          id="command-input"
+          name="command-input"
+          type="text"
+          placeholder="Enter command here..."
+          onKeyDown={sendCommand}
+          style={{
+            width: "100%",
+            "font-family": "Consolas,monospace",
+          }}
+        >
+          <span slot="start" className="codicon codicon-chevron-right"></span>
+        </VSCodeTextField>
+        <VSCodeDropdown id="systems"></VSCodeDropdown>
+      </div>
+      <VSCodeTextArea
+        id="output"
+        readonly
+        resize="none"
+        value={consoleContent}
+        style={{
+          width: "100%",
+          height: "100%",
+          overflow: "auto",
+          display: "flex",
+          "font-family": "Consolas,monospace",
+        }}
+      ></VSCodeTextArea>
+    </div>
+  );
+}
diff --git a/packages/zowe-explorer/src/webviews/src/zos-console/index.html b/packages/zowe-explorer/src/webviews/src/zos-console/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>z/OS Console</title>
+  </head>
+  <body>
+    <div id="webviewRoot"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/zowe-explorer/src/webviews/src/zos-console/index.tsx b/packages/zowe-explorer/src/webviews/src/zos-console/index.tsx
@@ -0,0 +1,4 @@
+import { render } from "preact";
+import { App } from "./App";
+
+render(<App />, document.getElementById("webviewRoot")!);
diff --git a/packages/zowe-explorer/src/webviews/vite.config.ts b/packages/zowe-explorer/src/webviews/vite.config.ts
@@ -44,11 +44,11 @@ export default defineConfig({
         viteStaticCopy({
             targets: [
                 {
-                    src: "../node_modules/@vscode/codicons/dist/codicon.css",
+                    src: "../../../node_modules/@vscode/codicons/dist/codicon.css",
                     dest: "codicons/",
                 },
                 {
-                    src: "../node_modules/@vscode/codicons/dist/codicon.ttf",
+                    src: "../../../node_modules/@vscode/codicons/dist/codicon.ttf",
                     dest: "codicons/",
                 },
             ],