Various improvements to z/OS console panel

packages/zowe-explorer/CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to the "vscode-extension-for-zowe" extension will be documen
 - Added Time Started, Time Ended, and Time Submitted job properties to the Jobs table view. [#3055](https://github.com/zowe/zowe-explorer-vscode/issues/3055)
 - Implemented copy/paste functionality of data sets within and across LPARs. [#3012](https://github.com/zowe/zowe-explorer-vscode/issues/3012)
 - Implemented drag and drop functionality of data sets within and across LPARs. [#3413](https://github.com/zowe/zowe-explorer-vscode/pull/3413)
+- Renamed "Zowe Explorer z/OS Console" to "z/OS Console". [#3445](https://github.com/zowe/zowe-explorer-vscode/pull/3445)
 - Adopted ZE APIs new `directConnectLogin` and `directConnectLogout` methods for login and logout actions NOT using the tokenType `apimlAuthenticationToken`. [#3346](https://github.com/zowe/zowe-explorer-vscode/issues/3346)
 
 ### Bug fixes
@@ -17,6 +18,8 @@ All notable changes to the "vscode-extension-for-zowe" extension will be documen
 - Fixed an issue where the 'Delete' key binding for the USS tree returns a 'contextValue' error. [#2796](https://github.com/zowe/zowe-explorer-vscode/issues/2796)
 - Fixed an issue where cancelling Unix, MVS or TSO command still submits the command. [#3422](https://github.com/zowe/zowe-explorer-vscode/issues/3422)
 - Fixed an issue where user is unable to open a renamed sequential data set from the Data Sets tree view.. [#3345](https://github.com/zowe/zowe-explorer-vscode/issues/3345)
+- 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 an issue seen with outdated profile information in the z/OS tree view data during upload and download of data set and USS files
   [#3457](https://github.com/zowe/zowe-explorer-vscode/issues/3457)
 - 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)

packages/zowe-explorer/package.json

@@ -50,7 +50,7 @@
         {
           "id": "zowezosconsole",
           "title": "%zowe.zosconsole%",
-          "icon": ""
+          "icon": "$(chevron-right)"
         }
       ]
     },

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",

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>
   );
 }

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>