chore(connection-form): make TLS options a bit more reusable (#2921)

With the upcoming CSFLE work, TLS options will not just apply
to the connection to the database, but also to the KMS servers
used by CSFLE.

Since those options are stored differently, making the
TLS Certificate Authority and Client Certificate components
more independent of the usage of connection strings will
help with that CSFLE work.

Author: addaleax

packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx

@@ -7,8 +7,6 @@ import {
   css,
   cx,
 } from '@mongodb-js/compass-components';
-import type ConnectionStringUrl from 'mongodb-connection-string-url';
-import type { MongoClientOptions } from 'mongodb';
 import {
   checkboxDescriptionStyles,
   disabledCheckboxDescriptionStyles,
@@ -21,23 +19,19 @@ const caFieldsContainer = css({
 });
 
 function TLSCertificateAuthority({
-  connectionStringUrl,
+  tlsCAFile,
   useSystemCA,
   disabled,
   handleTlsOptionChanged,
 }: {
-  connectionStringUrl: ConnectionStringUrl;
+  tlsCAFile?: string | null;
   useSystemCA: boolean;
   disabled: boolean;
   handleTlsOptionChanged: (
     key: 'tlsCAFile' | 'useSystemCA',
     value: string | null
   ) => void;
 }): React.ReactElement {
-  const caFile = connectionStringUrl
-    .typedSearchParams<MongoClientOptions>()
-    .get('tlsCAFile');
-
   return (
     <FormFieldContainer className={caFieldsContainer}>
       <FileInput
@@ -53,7 +47,7 @@ function TLSCertificateAuthority({
           handleTlsOptionChanged('tlsCAFile', files?.[0] ?? null);
         }}
         showFileOnNewLine
-        values={caFile ? [caFile] : undefined}
+        values={tlsCAFile ? [tlsCAFile] : undefined}
         optional
       />
       <Checkbox

packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { FileInput, TextInput, css } from '@mongodb-js/compass-components';
-import type ConnectionStringUrl from 'mongodb-connection-string-url';
-import type { MongoClientOptions } from 'mongodb';
 
 import FormFieldContainer from '../../form-field-container';
 
@@ -10,25 +8,20 @@ const inputFieldStyles = css({
 });
 
 function TLSClientCertificate({
-  connectionStringUrl,
+  tlsCertificateKeyFile,
+  tlsCertificateKeyFilePassword,
   disabled,
   updateTLSClientCertificate,
   updateTLSClientCertificatePassword,
 }: {
-  connectionStringUrl: ConnectionStringUrl;
+  tlsCertificateKeyFile?: string | null;
+  tlsCertificateKeyFilePassword?: string | null;
   disabled: boolean;
   updateTLSClientCertificate: (
     newClientCertificateKeyFile: string | null
   ) => void;
   updateTLSClientCertificatePassword: (newPassword: string | null) => void;
 }): React.ReactElement {
-  const typedParams =
-    connectionStringUrl.typedSearchParams<MongoClientOptions>();
-  const clientCertificateKeyFile = typedParams.get('tlsCertificateKeyFile');
-  const tlsCertificateKeyFilePassword = typedParams.get(
-    'tlsCertificateKeyFilePassword'
-  );
-
   return (
     <>
       <FormFieldContainer className={inputFieldStyles}>
@@ -41,7 +34,7 @@ function TLSClientCertificate({
           link={
             'https://docs.mongodb.com/manual/reference/connection-string/#mongodb-urioption-urioption.tlsCertificateKeyFile'
           }
-          values={clientCertificateKeyFile ? [clientCertificateKeyFile] : []}
+          values={tlsCertificateKeyFile ? [tlsCertificateKeyFile] : []}
           onChange={(files: string[]) => {
             updateTLSClientCertificate(
               files && files.length > 0 ? files[0] : null

packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-ssl-tab.tsx

@@ -104,6 +104,8 @@ function TLSTab({
     [updateConnectionFormField]
   );
 
+  const searchParams =
+    connectionStringUrl.typedSearchParams<MongoClientOptions>();
   const tlsOptionFields: {
     name: TLSOptionName;
     description: string;
@@ -113,22 +115,18 @@ function TLSTab({
       name: 'tlsInsecure',
       description:
         'This includes tlsAllowInvalidHostnames and tlsAllowInvalidCertificates.',
-      checked: connectionStringUrl.searchParams.get('tlsInsecure') === 'true',
+      checked: searchParams.get('tlsInsecure') === 'true',
     },
     {
       name: 'tlsAllowInvalidHostnames',
       description:
         'Disable the validation of the hostnames in the certificate presented by the mongod/mongos instance.',
-      checked:
-        connectionStringUrl.searchParams.get('tlsAllowInvalidHostnames') ===
-        'true',
+      checked: searchParams.get('tlsAllowInvalidHostnames') === 'true',
     },
     {
       name: 'tlsAllowInvalidCertificates',
       description: 'Disable the validation of the server certificates.',
-      checked:
-        connectionStringUrl.searchParams.get('tlsAllowInvalidCertificates') ===
-        'true',
+      checked: searchParams.get('tlsAllowInvalidCertificates') === 'true',
     },
   ];
 
@@ -171,24 +169,22 @@ function TLSTab({
         </RadioBoxGroup>
       </FormFieldContainer>
       <TLSCertificateAuthority
-        connectionStringUrl={connectionStringUrl}
+        tlsCAFile={searchParams.get('tlsCAFile')}
         useSystemCA={!!connectionOptions.useSystemCA}
         disabled={tlsOptionsDisabled}
         handleTlsOptionChanged={handleTlsOptionChanged}
       />
       <TLSClientCertificate
-        connectionStringUrl={connectionStringUrl}
+        tlsCertificateKeyFile={searchParams.get('tlsCertificateKeyFile')}
+        tlsCertificateKeyFilePassword={searchParams.get(
+          'tlsCertificateKeyFilePassword'
+        )}
         disabled={tlsOptionsDisabled}
         updateTLSClientCertificate={(newCertificatePath: string | null) => {
           handleTlsOptionChanged('tlsCertificateKeyFile', newCertificatePath);
         }}
-        updateTLSClientCertificatePassword={(
-          newCertificatePath: string | null
-        ) => {
-          handleTlsOptionChanged(
-            'tlsCertificateKeyFilePassword',
-            newCertificatePath
-          );
+        updateTLSClientCertificatePassword={(newPassword: string | null) => {
+          handleTlsOptionChanged('tlsCertificateKeyFilePassword', newPassword);
         }}
       />
       {tlsOptionFields.map((tlsOptionField) => (