Add a new panel for all OpenShift commands

It's a webview, since we need to use either a treeview or webview for all
panels.
It wraps xtermjs, the same library VS Code uses for its terminal.
It exposes an API for interacting with the terminal multiplexer, as well
as with the individual running processes.
For example, we can run `odo dev` and update the UI
(like we were doing before this PR).

What's missing:
- [ ] copy/paste
- [ ] Tests (pending on redhat-developer/vscode-extension-tester#855)
- [ ] reordering the tabs (I think we should gauge interest and save this for a future PR)
- [ ] tab bar scrolling (supposedly the Material UI component comes with
      this built it, but it wasn't working when I tested it)

Signed-off-by: David Thompson <davthomp@redhat.com>

Author: datho7561

.eslintrc

@@ -16,7 +16,10 @@
   "parserOptions": {
     "ecmaVersion": 2018,
     "comment": true,
-    "project": "./tsconfig.json",
+    "project": [
+      "./tsconfig.json",
+      "./src/webview/tsconfig.json"
+    ],
     "sourceType": "module"
   },
   "plugins": [
@@ -106,13 +109,19 @@
   },
   "overrides": [
     {
-        "files": ["*.test.ts"],
-        "rules": {
-            "no-unused-expressions": "off",
-            "@typescript-eslint/unbound-method" : "off",
-            "max-nested-callbacks" : "off",
-            "@typescript-eslint/no-unsafe-assignment": 1
-        }
+      "files": ["*.test.ts"],
+      "rules": {
+        "no-unused-expressions": "off",
+        "@typescript-eslint/unbound-method" : "off",
+        "max-nested-callbacks" : "off",
+        "@typescript-eslint/no-unsafe-assignment": 1
+      }
+    },
+    {
+      "files": ["./src/@types/**.d.ts"],
+      "rules": {
+        "header/header": "off"
+      }
     }
   ]
 }

.vscode/launch.json

@@ -88,8 +88,9 @@
                 "-o",
                 "${workspaceFolder}/test/ui/settings.json",
                 "-m",
-                "--mocha_config",
                 "${workspaceFolder}/test/ui/.mocharc.js",
+                "-c",
+                "max",
                 "-e",
                 "./test-resources/extensions",
                 "-i"

build/esbuild-watch.mjs

@@ -10,7 +10,8 @@ import * as esbuild from 'esbuild';
 import { sassPlugin } from 'esbuild-sass-plugin';
 import * as fs from 'node:fs/promises';
 import process from 'node:process';
-import * as cp from 'node:child_process'
+import * as cp from 'node:child_process';
+import svgr from 'esbuild-plugin-svgr';
 
 // This script runs tsc and esbuild in parallel when there are filesystem changes.
 // It outputs predictable markers for the beginning and ending of the compilation,
@@ -46,7 +47,12 @@ await Promise.all(
                 '.png': 'file',
                 '.svg': 'file',
             },
-            plugins: [sassPlugin()],
+            plugins: [
+                sassPlugin(),
+                svgr({
+                    plugins: ['@svgr/plugin-jsx']
+                }),
+            ],
         });
         contexts.push(ctx);
     }),

build/esbuild.mjs

@@ -6,6 +6,7 @@
 import * as esbuild from 'esbuild';
 import { sassPlugin } from 'esbuild-sass-plugin';
 import * as fs from 'fs/promises';
+import svgr from 'esbuild-plugin-svgr';
 
 const webviews = [
     'cluster',
@@ -16,7 +17,8 @@ const webviews = [
     'helm-chart',
     'log',
     'welcome',
-    'feedback'
+    'feedback',
+    'openshift-terminal'
 ];
 
 function kebabToCamel(text) {
@@ -36,10 +38,12 @@ await Promise.all([
             sourcemap: true,
             loader: {
                 '.png': 'file',
-                '.svg': 'file',
             },
             plugins: [
                 sassPlugin(),
+                svgr({
+                    plugins: ['@svgr/plugin-jsx']
+                }),
             ]
         })
     ),