Various improvements to z/OS console panel (#3445)

* Fix missing icon on z/OS console when show labels is off Signed-off-by: JWaters02 <watersjoshua2002@gmail.com> * Rename Zowe Explorer z/OS Console to z/OS Console Signed-off-by: JWaters02 <watersjoshua2002@gmail.com> * Fix z/OS Console panel colour was not in sync with rest of VSCode styling This meant replacing the deprecated vscode webviews component with raw html/css as that React library's components' stylings cannot be overriden Signed-off-by: JWaters02 <watersjoshua2002@gmail.com> * chore: changelog Signed-off-by: JWaters02 <watersjoshua2002@gmail.com> chore: changelog Signed-off-by: JWaters02 <watersjoshua2002@gmail.com> * Switch to built in vscode codicon Co-authored-by: Timothy Johnson <timothy.johnson@broadcom.com> Signed-off-by: Joshua Waters <watersjoshua2002@gmail.com> * Remove old chevron-right svg Signed-off-by: Timothy Johnson <timothy.johnson@broadcom.com> --------- Signed-off-by: JWaters02 <watersjoshua2002@gmail.com> Signed-off-by: Joshua Waters <watersjoshua2002@gmail.com> Signed-off-by: Timothy Johnson <timothy.johnson@broadcom.com> Co-authored-by: Billie Simmons <BillieJean.Simmons@ibm.com> Co-authored-by: Timothy Johnson <timothy.johnson@broadcom.com>
zowe · Feb 21, 2025 · d835bd6 · d835bd6
1 parent a16ae9d
commit d835bd6
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 30 deletions.
diff --git a/packages/zowe-explorer/CHANGELOG.md b/packages/zowe-explorer/CHANGELOG.md
@@ -6,8 +6,11 @@ All notable changes to the "vscode-extension-for-zowe" extension will be documen
 
 ### New features and enhancements
 
+- Renamed "Zowe Explorer z/OS Console" to "z/OS Console". [#3445](https://github.com/zowe/zowe-explorer-vscode/pull/3445)
 ### Bug fixes
 
+- Fixed missing z/OS Console icon when `Workbench > Panel: Show Labels` is set to false. [#3293](https://github.com/zowe/zowe-explorer-vscode/issues/3293)
+- Fixed z/OS Console panel background colour to be in sync with the rest of the VS Code styling. [#3445](https://github.com/zowe/zowe-explorer-vscode/pull/3445)
 - Fixed issue where deleting too many nodes at once would cause the confirmation prompt to be oversized. [#3254](https://github.com/zowe/zowe-explorer-vscode/issues/3254)
 
 ## `3.1.1`

diff --git a/packages/zowe-explorer/package.json b/packages/zowe-explorer/package.json
@@ -50,7 +50,7 @@
         {
           "id": "zowezosconsole",
           "title": "%zowe.zosconsole%",
-          "icon": ""
+          "icon": "$(chevron-right)"
         }
       ]
     },

diff --git a/packages/zowe-explorer/package.nls.json b/packages/zowe-explorer/package.nls.json
@@ -3,7 +3,7 @@
   "description": "VS Code extension, powered by Zowe CLI, that streamlines interaction with mainframe Data Sets, USS files, and Jobs",
   "viewsContainers.activitybar": "Zowe Explorer",
   "viewsContainers.panel.tableView": "Zowe Resources",
-  "zowe.zosconsole": "Zowe Explorer z/OS Console",
+  "zowe.zosconsole": "z/OS Console",
   "zowe.resources.name": "Zowe Resources",
   "zosconsole": "z/OS Console",
   "zowe.placeholderCommand": "Placeholder",

diff --git a/packages/zowe-explorer/src/webviews/src/zos-console/App.tsx b/packages/zowe-explorer/src/webviews/src/zos-console/App.tsx
@@ -1,5 +1,3 @@
-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";
 import * as l10n from "@vscode/l10n";
 import { isSecureOrigin } from "../utils";
@@ -21,15 +19,15 @@ export function App() {
       }
 
       const message = event.data;
-      const profileList = document.getElementById("systems") as Option;
+      const profileList = document.getElementById("systems") as HTMLSelectElement;
 
       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");
+            const option = document.createElement("option");
             option.textContent = message.profiles[profile];
             if (message.profiles[profile] === message.defaultProfile) {
               option.setAttribute("selected", "true");
@@ -47,14 +45,14 @@ export function App() {
         }
       }
     });
-    const consoleResponse = document.getElementById("output") as TextArea;
-    consoleResponse.control.scrollTop = consoleResponse.control.scrollHeight;
+    const consoleResponse = document.getElementById("output") as HTMLTextAreaElement;
+    consoleResponse.scrollTop = consoleResponse.scrollHeight;
     vscode.postMessage({ command: "GET_LOCALIZATION" });
   });
 
   const sendCommand = (e: KeyboardEvent) => {
-    const consoleField = document.getElementById("command-input") as TextField;
-    const profileList = document.getElementById("systems") as Dropdown;
+    const consoleField = document.getElementById("command-input") as HTMLInputElement;
+    const profileList = document.getElementById("systems") as HTMLSelectElement;
     if (e.key === "Enter") {
       if (consoleField!.value === "clear") {
         setConsoleContent("");
@@ -70,36 +68,58 @@ export function App() {
   };
 
   return (
-    <div className="box">
-      <div style="display: flex; align-items: center; gap: 10px;">
-        <VSCodeTextField
-          id="command-input"
-          name="command-input"
-          type="text"
-          placeholder={placeholder}
-          onKeyDown={sendCommand}
+    <div className="box vscode-panel">
+      <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <div style={{ position: "relative", width: "calc(100% - 170px)" }}>
+          <span
+            className="codicon codicon-chevron-right"
+            style={{ position: "absolute", left: "10px", top: "50%", transform: "translateY(-50%)", pointerEvents: "none" }}
+          ></span>
+          <input
+            id="command-input"
+            name="command-input"
+            type="text"
+            placeholder={placeholder}
+            onKeyDown={sendCommand}
+            style={{
+              width: "100%",
+              paddingLeft: "30px",
+              fontFamily: "Consolas,monospace",
+              backgroundColor: "var(--vscode-editor-background)",
+              color: "var(--vscode-editor-foreground)",
+              border: "none",
+              outline: "none",
+            }}
+          />
+        </div>
+        <select
+          id="systems"
           style={{
-            width: "100%",
-            "font-family": "Consolas,monospace",
+            width: "150px",
+            marginLeft: "20px",
+            backgroundColor: "var(--vscode-editor-background)",
+            color: "var(--vscode-editor-foreground)",
+            border: "none",
+            outline: "none",
           }}
-        >
-          <span slot="start" className="codicon codicon-chevron-right"></span>
-        </VSCodeTextField>
-        <VSCodeDropdown id="systems"></VSCodeDropdown>
+        ></select>
       </div>
-      <VSCodeTextArea
+      <textarea
         id="output"
-        readonly
-        resize="none"
-        value={consoleContent}
+        readOnly
         style={{
           width: "100%",
           height: "100%",
           overflow: "auto",
           display: "flex",
-          "font-family": "Consolas,monospace",
+          fontFamily: "Consolas,monospace",
+          backgroundColor: "var(--vscode-editor-background)",
+          color: "var(--vscode-editor-foreground)",
+          border: "none",
+          outline: "none",
         }}
-      ></VSCodeTextArea>
+        value={consoleContent}
+      ></textarea>
     </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
@@ -4,6 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>z/OS Console</title>
+    <style>
+      .vscode-panel {
+        background-color: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+      }
+      .vscode-panel input,
+      .vscode-panel select,
+      .vscode-panel textarea {
+        background-color: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+      }
+    </style>
   </head>
   <body>
     <div id="webviewRoot"></div>