feat(connect-form): Add tls tab form options COMPASS-5232

[Anemy]

COMPASS-5232

Adds TLS options to the new connect form.
Updates the FileInput compass-components component to allow showing files on following lines and removing files (see video).

Some decisions we can discuss/improve/change:

• Right now we just show tls options. If the user wants to use deprecated ssl options it's still possible in the connection string but we don't currently reflect it in the form.
• We show one .pem input, instead of 2 for a .crt and .key
• We're only exposing what's in the connection string to be edited. These are options were added in 4.2 - https://docs.mongodb.com/manual/reference/connection-string/#mongodb-urioption-urioption.tlsCertificateKeyFile . Should we make the ssl equivalents the defaults or exposed?

env USE_NEW_CONNECT_FORM="true" npm start

Here's how it looks, and connecting to the devtools docker tls env:

options.1.mp4

editing.tls.options.mp4

Videos not totally up to date - the width changing glitch when switching tabs is fixed in a recent commit.

[mabaasit]

suggestion: in the leafygreen UI, the optional text is always right next in the field and not label. should we align that?

[mcasimir]

@Sgrinfy what do you think? Should we make this a follow up too?

[Sgrinfy]

I'm looking at the optional field for "Client Key Password", and the optional label is in the field like it should be. @mabaasit what should we align?

[mabaasit]

this whole thing came from the screenshot linked. the label on this input is getting cluttered with many options.

For LG input the label is on the right and within the input field. I suggested to align these two.

But now I feel like it will not look good either on file upload button.

[Sgrinfy]

ah yes, I understand now. I would love to align these. Is this select file component only used in the connect form?

[mabaasit]

exactly. Its used in import to/export from collection modals as well.

[Anemy]

Is that recent screenshot what it should be updated to @Sgrinfy ?
I'd like to merge this and update the styles in a follow up I'm thinking

[Sgrinfy]

@Anemy No, let's leave it like it is currently implemented. This select file component it's used in other places too in Compass and I don't want to have slightly different styles. We can revaluate in future how to improve it.