Use Webview to manage cluster settings

[angelozerr]

In vscode-kafka, we need to manage UI input forms for :

• cluster configuration (today we can create the cluster configuration with a wizard, but we cannot edit it,an UI forms could be a good solution) like vscode-sqltools provides for connection:

• start consumer should open UI input forms to fill some format (the key type, etc) and parameters (offset) like Conduktor provides:

To manage that we must use Webview API because vscode doesn't provide some UI forms toolkit (perhaps in the future? see https://github.com/microsoft/vscode/issues/94741).

UI input forms requires databinding between UI and TS model and validation for TS model.

There are several solutions:

• use HTML + JS (without framework),my fear is that code will become awful.
• use angular. There are several articles about that https://medium.com/@GrandSchtroumpf/vscode-extension-inside-a-nx-workspace-f9ad232a26e5 but I don't see a lot of vscode extension based onangular.
• use reactjs : vscode-sqltools does that. There are several articles about this topic like https://medium.com/younited-tech-blog/reactception-extending-vs-code-extension-with-webviews-and-react-12be2a5898fd
• use vscode-page (based on handlerbar). https://dev.to/foxgem/simplifying-vs-code-webview-development-with-vscode-page-13c3 It's a nice article but the project have not a lot of stars
• other?

@jlandersen @fbricon have you some opinions about that?

[fbricon]

I think either Angular or React would be fine, but I'm not familiar with any of them. However, we can get some help from fellow Red Hatters on react-based webviews if needed, so I'd prolly use that. Unless @jlandersen has a strong preference for another solution.

[jlandersen]

A webview based form would be nice for managing clusters. Personally i'd prefer avoiding bundling up a framework in the extension - well aware it might be a bit awful to work with depending on the complexity.

How do we imagine this will look like? If it is restricted to input cluster address, name and optionally SASL parameters then I would imagine this being managable.

[fbricon]

We'll also need to handle SSL configuration: selecting CA, CE, Perm files. If we add JAAS config, and open up the cluster config to 3rd party extensions (providing AWS, confluent or red hat specific options) the simple wizard workflow doesn't scale. No framework means data binding is going to be a headache

[angelozerr]

Personally i'd prefer avoiding bundling up a framework in the extension

I understand your fear, but IMHO I think it will simplify the code for databinding, validation support and when we will need complex UI (ex : list of items with add/remove item).

Using react in vscode is not an experimentation because:

• vscode-sqltools is a great sample
• Red Hat have skills about using react in vscode (see https://github.com/redhat-developer/vscode-openshift-tools for instance).

[jlandersen]

Personally i'd prefer avoiding bundling up a framework in the extension

I understand your fear, but IMHO I think it will simplify the code for databinding, validation support and when we will need complex UI (ex : list of items with add/remove item).

Using react in vscode is not an experimentation because:

* vscode-sqltools is a great sample

* Red Hat have skills about using react in vscode (see https://github.com/redhat-developer/vscode-openshift-tools for instance).

Thanks for the links - I looked over them and it seems manageable and I recognize we can utilize this for other things than just clusters in the future (like creating a consumer we discussed in #69). Aside from vanilla JS/HTML I do prefer react and worked with it plenty of times, so let's move forward with that.

[angelozerr]

Aside from vanilla JS/HTML I do prefer react and worked with it plenty of times, so let's move forward with that.

Great!

I will work on this.

[fbricon]

Here's the latest UI

Still room for improvement, but we'll take care of that in later PRs