VSCODE-2: Connect form

[Anemy]

https://jira.mongodb.org/browse/VSCODE-77

This PR adds the components for the connect form dialogue. When the Connect button is clicked, the webview sends the driver url to the extension which then begins connecting and prompts the user on where to save the connection.

There's a stripped down version of the connection model here, I copied it over instead of using the currently connection model library because there are some dependencies on electron for file opening. I'd like to avoid some of this code duplication so I'm going to cleaning this up and giving it a think in the future tickets. Open to suggestions. The main reason for not using the current library is the trickiness around having to maintain file handling in the main extension and tracking the state of it in the webview for ssl and ssh. File handling and styling are the main reasons we're creating this whole new connect form here. I think we're saving a good bit of time by not repurposing compass-connect, but we'll have to see.

Since there's a lot going on in this PR I wanted to break some of the work into a couple more tickets:

• Add a connection string button https://jira.mongodb.org/browse/VSCODE-73
• SSL will be in https://jira.mongodb.org/browse/VSCODE-74
• SSH will be in https://jira.mongodb.org/browse/VSCODE-75
• Save and restore webview state https://jira.mongodb.org/browse/VSCODE-76 (When you swap tabs the tab currently refreshes) https://code.visualstudio.com/api/extension-guides/webview#serialization

Also in this PR I tweaked the sidebar icon, pulling in the new svg Fred made, and also removed the extra field inside of Array elements in schema.

A couple notes:

• This is still a first pass on the styling - They'll be updating & improving a bit in the future PRs, but let me know any ideas/suggestions you may have.
• Some of the labels have info indicators I haven't yet pulled in the assets for, so that'll be in a future PR as well. (The small box next to Authentication Database for example).
• In future PRs I plan on adding a whole lot more testing. I think getting this into peoples handles early helps them understand the extension a bit more and maybe we'll want to tweak something about this form. Currently the tests are reaaaaaally minimal... We can use some of the tests from compass connect but I think typescript is doing a lot of good compile time checks that a lot of the tests were actually testing. I plan on still pull in some component & store tests though.

Screenshots

---

Connect Form

Light mode 👀(Have to re-open the tab to see changes update since they're pulled in at the start in styling)

New Sidebar Leaf - How do ya'll feel on the size? Maybe bigger?

When Create Free Cluster is clicked

[alenakhineika]

As I mentioned it in slack before, I like the prev size of the leaf :) yes it was higher than other icons, but the width was matching others better.

Did you decide to use Ruflux just because it was the quickest way since compass-connect is using it? Do you think it would take lots of time to use Redux instead? The thing is that for compass-connect there is already a ticket to rewrite it: https://jira.mongodb.org/browse/COMPASS-3743

We did it already for the rest of Compass plugins, and Connect it is the last one that left.

Did you also take a look at what we discussed during our call with Lucas? Storing extra options that are not presented in URI. I think if we will do it the same way we do it compass connect, maybe we can extract some level of logic from compass connect to reuse it for both apps 🤔

It can be painful to maintain two projects if they have lots and common and slightly different code.

[Anemy]

@alenakhineika I think it would be nice to have this on redux, just used reflux because it was from compass-connect yup. I'll take a look at the other projects and see how they're doing it and swap it over. I'll ping you when it's updated. Hopefully we can reuse some of it on compass connect eventually.

For options which aren't in the URI (ssh & ssl) I'd like to address those in https://jira.mongodb.org/browse/VSCODE-74 and https://jira.mongodb.org/browse/VSCODE-75 - We'll have to do a custom solution for the connect form since it's inside an iframe and doesnt have file system access. I think we'll be able to re-use the system from compass-connect though for storing the connections with extra options using the connectionController. It might take some work though and I'll be looking into it then, and making sure it uses credential storing correctly.

[alenakhineika]

Can we move this connect-form to the out folder? Or do you keep it separated by the purpose?

[Anemy]

Ah it should be there yup thanks. I think I was making sure it was working independently.

[alenakhineika]

Yaaay buddy Redux! :)

[alenakhineika]

Didn't you notice that eslint complains less about the syntax? Did we change the configuration at some point?

[alenakhineika]

Yay plain class and no more ampersand-model! 👻