Add a new panel for all OpenShift commands

[datho7561]

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 to show the state of the deployment created by odo (like we were doing before this PR).

What's missing and can probably saved for a future PR:

• Copy/paste using Ctrl+Shift+C/Ctrl+Shift+V (using the context menu to copy and paste works)
• Tests (pending on Add page object for WebviewView vscode-extension-tester#855)
• Reordering the tabs (I think we should gauge interest on this feature, since it would be hard to implement)
• Tab bar scrolling when there are too many tabs. Supposedly the Material UI component comes with this built it, but it wasn't working when I tested it

Known bugs:

• If you create two terminal tabs (through commands or running odo dev), and switch back to the first tab, the font size and family changes on that tab. All subsequent tab creation/switching doesn't seem to cause this issue.

Closes #2819

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

[codecov]

Codecov Report

Patch coverage: 17.87% and project coverage change: +1.14 🎉

Comparison is base (d5d3ff0) 35.41% compared to head (ce9a3c7) 36.56%.

❗ Current head ce9a3c7 differs from pull request most recent head 10c0bdc. Consider uploading reports for the commit 10c0bdc to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2879      +/-   ##
==========================================
+ Coverage   35.41%   36.56%   +1.14%     
==========================================
  Files          64       54      -10     
  Lines        4238     3758     -480     
  Branches      836      736     -100     
==========================================
- Hits         1501     1374     -127     
+ Misses       2737     2384     -353     

Impacted Files	Coverage Δ
.../webview/create-service/createServiceViewLoader.ts	31.25% <0.00%> (ø)
src/openshift/component.ts	21.72% <8.00%> (+2.22%)	⬆️
...rc/webview/openshift-terminal/openShiftTerminal.ts	10.89% <10.89%> (ø)
src/cli.ts	83.78% <25.00%> (+4.29%)	⬆️
src/openshift/cluster.ts	10.27% <40.00%> (-0.26%)	⬇️
src/webview/cluster/clusterViewLoader.ts	9.66% <50.00%> (+0.25%)	⬆️
src/extension.ts	61.36% <100.00%> (-2.18%)	⬇️
src/k8s/build.ts	97.53% <100.00%> (ø)
src/k8s/deploymentConfig.ts	97.33% <100.00%> (ø)
src/odo.ts	45.63% <100.00%> (+3.04%)	⬆️
... and 1 more

... and 19 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[datho7561]

blocked on redhat-developer/vscode-extension-tester#804 through discussion with Mohit, we decided to add UI tests in a future PR

[datho7561]

I just realized that, after this change, it will be very difficult to write automated tests for anything that uses the terminal. We are testing using Selenium, which can scrape data off the HTML DOM. The library I am using to render the terminal output uses WebGL for performance reasons, so the terminal text is not in a DOM node, it's a rendered image.

The two ways I can think of to test the terminal output:

• Take a screenshot using selenium and compare the screenshot to a cached screenshot, which is really flaky
• Switch the rendering strategy of the terminal to use a DOM-based version during the test suite, and trust that the renderers are similar enough

I'll try the second version and see if I get anywhere

edit: it should be feasible to use the second strategy, I had some code that did that as a part of this PR, but I removed it.

[datho7561]

Requires redhat-developer/vscode-extension-tester#855 (I have been using npm link locally) removed tests

[msivasubramaniaan]

The below error on npm install

ERR! find VSfind VS msvs_version not set from command line or npm config?

After resolved the above error and opened the extension, I was trying to run the Start Dev command, then the extension was stuck and I couldn't able to perform anything further on the extension.

[datho7561]

npm i works for me on Windows, and the webview loads, but when running a command, the output is not transferred into the webview properly. @JessicaJHee or @msivasubramaniaan , can you confirm that the terminal works on Linux?

[JessicaJHee]

Works great now! The only thing I noticed was that if I tried to close the middle tab, it will close the tabs to the right of it as well.

[datho7561]

if I tried to close the middle tab, it will close the tabs to the right of it as well.

Good catch! Should be fixed

[datho7561]

@JessicaJHee @rgrunber let me know if you think it's good. I'll have to address the merge conflict before we can merge the PR.

[JessicaJHee]

LGTM!

[msivasubramaniaan]

LGTM