fixup: add field descriptions

mongodb-js · Mar 30, 2022 · d904302 · d904302
1 parent 7292c5d
commit d904302
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 33 deletions.
diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/aws-fields.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/aws-fields.tsx
@@ -19,6 +19,7 @@ interface Field {
   value: string;
   errorMessage?: string;
   state: 'error' | 'none';
+  description?: string;
 }
 
 function AWSFields({
@@ -48,6 +49,7 @@ function AWSFields({
       optional: false,
       value: autoEncryptionOptions?.kmsProviders?.aws?.accessKeyId ?? '',
       state: 'none',
+      description: 'The access key used for the AWS KMS provider.'
     },
     {
       name: 'secretAccessKey',
@@ -56,6 +58,7 @@ function AWSFields({
       optional: false,
       value: autoEncryptionOptions?.kmsProviders?.aws?.secretAccessKey ?? '',
       state: 'none',
+      description: 'The secret access key used for the AWS KMS provider.'
     },
     {
       name: 'sessionToken',
@@ -64,13 +67,14 @@ function AWSFields({
       optional: true,
       value: autoEncryptionOptions?.kmsProviders?.aws?.sessionToken ?? '',
       state: 'none',
+      description: 'An optional AWS session token that will be used as the X-Amz-Security-Token header for AWS requests.'
     },
   ];
 
   return (
     <>
       {fields.map(
-        ({ name, label, type, optional, value, errorMessage, state }) => (
+        ({ name, label, type, optional, value, errorMessage, state, description }) => (
           <FormFieldContainer key={name}>
             <TextInput
               onChange={({
@@ -87,6 +91,7 @@ function AWSFields({
               errorMessage={errorMessage}
               state={state}
               spellCheck={false}
+              description={description}
             />
           </FormFieldContainer>
         )

diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/azure-fields.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/azure-fields.tsx
@@ -19,6 +19,7 @@ interface Field {
   value: string;
   errorMessage?: string;
   state: 'error' | 'none';
+  description?: string;
 }
 
 function AzureFields({
@@ -48,6 +49,7 @@ function AzureFields({
       optional: false,
       value: autoEncryptionOptions?.kmsProviders?.azure?.tenantId ?? '',
       state: 'none',
+      description: 'The tenant ID identifies the organization for the account.'
     },
     {
       name: 'clientId',
@@ -56,6 +58,7 @@ function AzureFields({
       optional: false,
       value: autoEncryptionOptions?.kmsProviders?.azure?.clientId ?? '',
       state: 'none',
+      description: 'The client ID to authenticate a registered application.'
     },
     {
       name: 'clientSecret',
@@ -64,6 +67,7 @@ function AzureFields({
       optional: false,
       value: autoEncryptionOptions?.kmsProviders?.azure?.clientSecret ?? '',
       state: 'none',
+      description: 'The client secret to authenticate a registered application.'
     },
     {
       name: 'identityPlatformEndpoint',
@@ -74,13 +78,14 @@ function AzureFields({
         autoEncryptionOptions?.kmsProviders?.azure?.identityPlatformEndpoint ??
         '',
       state: 'none',
+      description: 'A host with optional port.'
     },
   ];
 
   return (
     <>
       {fields.map(
-        ({ name, label, type, optional, value, errorMessage, state }) => (
+        ({ name, label, type, optional, value, errorMessage, state, description }) => (
           <FormFieldContainer key={name}>
             <TextInput
               onChange={({
@@ -97,6 +102,7 @@ function AzureFields({
               errorMessage={errorMessage}
               state={state}
               spellCheck={false}
+              description={description}
             />
           </FormFieldContainer>
         )

diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/csfle-tab.tsx
@@ -46,6 +46,11 @@ const faIcon = css({
   textAlign: 'center',
 });
 
+const kmsProviderComponentWrapperStyles = css({
+  paddingLeft: spacing[3],
+  marginBottom: spacing[3]
+});
+
 type KMSProviderName = keyof NonNullable<AutoEncryptionOptions['kmsProviders']>;
 interface KMSFields {
   id: KMSProviderName;
@@ -98,7 +103,7 @@ function CSFLETab({
   updateConnectionFormField: UpdateConnectionFormField;
   connectionOptions: ConnectionOptions;
 }): React.ReactElement {
-  const [enabledKMSProviders, setEnabledKMSProviders] = useState<
+  const [expandedKMSProviders, setExpandedKMSProviders] = useState<
     KMSProviderName[]
   >([]);
   const autoEncryptionOptions =
@@ -153,27 +158,29 @@ function CSFLETab({
       />
       <Label htmlFor="TODO">KMS Providers</Label>
       {options.map(({ title, id, component: KMSProviderComponent }) => {
-        const isExpanded = enabledKMSProviders.includes(id);
+        const isExpanded = expandedKMSProviders.includes(id);
         return (
           <div key={id}>
             <div>
               <button
                 className={buttonReset}
                 id={`toggle-kms-${id}`}
                 aria-labelledby={`toggle-kms-${id}-label`}
-                aria-pressed={enabledKMSProviders.includes(id)}
+                aria-pressed={expandedKMSProviders.includes(id)}
                 aria-label={
                   isExpanded ? 'Collapse field items' : 'Expand field items'
                 }
+                type="button"
                 onClick={(evt) => {
+                  console.log(evt.target)
                   evt.stopPropagation();
                   evt.preventDefault();
                   if (isExpanded) {
-                    setEnabledKMSProviders(
-                      enabledKMSProviders.filter((i) => i !== id)
+                    setExpandedKMSProviders(
+                      expandedKMSProviders.filter((i) => i !== id)
                     );
                   } else {
-                    setEnabledKMSProviders([...enabledKMSProviders, id]);
+                    setExpandedKMSProviders([...expandedKMSProviders, id]);
                   }
                 }}
               >
@@ -194,11 +201,13 @@ function CSFLETab({
               </Label>
             </div>
             {isExpanded && (
-              <KMSProviderComponent
-                errors={errors}
-                autoEncryptionOptions={autoEncryptionOptions}
-                updateConnectionFormField={updateConnectionFormField}
-              />
+              <div className={kmsProviderComponentWrapperStyles}>
+                <KMSProviderComponent
+                  errors={errors}
+                  autoEncryptionOptions={autoEncryptionOptions}
+                  updateConnectionFormField={updateConnectionFormField}
+                />
+              </div>
             )}
           </div>
         );

diff --git a/...tion-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx b/...tion-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx
@@ -4,7 +4,7 @@ import {
   encryptedFieldConfigToText,
   textToEncryptedFieldConfig,
 } from '../../../utils/csfle-handler';
-import { Label, Banner, css, spacing } from '@mongodb-js/compass-components';
+import { Label, Banner, Description, css, spacing } from '@mongodb-js/compass-components';
 
 import 'ace-builds';
 import AceEditor from 'react-ace';
@@ -55,7 +55,8 @@ function EncryptedFieldConfigInput({
 
   return (
     <div>
-      <Label htmlFor="TODO">EncryptedFieldConfig (recommended)</Label>
+      <Label htmlFor="TODO">EncryptedFieldConfigMap</Label>
+      <Description>Add an optional client-side EncryptedFieldConfigMap for enhanced security.</Description>
       <AceEditor
         mode="javascript" // will be set to mongodb as part of OPTIONS
         theme="mongodb"

diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/gcp-fields.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/gcp-fields.tsx
@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
 import React, { useCallback } from 'react';
-import { TextInput } from '@mongodb-js/compass-components';
+import { TextInput, TextArea } from '@mongodb-js/compass-components';
 import type { AutoEncryptionOptions } from 'mongodb';
 
 import FormFieldContainer from '../../form-field-container';
@@ -14,11 +14,12 @@ type GCPKMSOptions = NonNullable<
 interface Field {
   name: keyof GCPKMSOptions;
   label: string;
-  type: 'password' | 'text';
+  type: 'password' | 'text' | 'textarea';
   optional: boolean;
   value: string;
   errorMessage?: string;
   state: 'error' | 'none';
+  description?: string;
 }
 
 function GCPFields({
@@ -48,17 +49,19 @@ function GCPFields({
       optional: false,
       value: autoEncryptionOptions?.kmsProviders?.gcp?.email ?? '',
       state: 'none',
+      description: 'The service account email to authenticate.'
     },
     {
       name: 'privateKey',
       label: 'Private Key',
-      type: 'password',
+      type: 'textarea',
       optional: false,
       value:
         autoEncryptionOptions?.kmsProviders?.gcp?.privateKey?.toString(
           'base64'
         ) ?? '',
       state: 'none',
+      description: 'A base64-encoded PKCS#8 private key.'
     },
     {
       name: 'endpoint',
@@ -67,32 +70,35 @@ function GCPFields({
       optional: true,
       value: autoEncryptionOptions?.kmsProviders?.gcp?.endpoint ?? '',
       state: 'none',
+      description: 'A host with optional port.'
     },
   ];
 
   return (
     <>
       {fields.map(
-        ({ name, label, type, optional, value, errorMessage, state }) => (
-          <FormFieldContainer key={name}>
-            <TextInput
+        ({ name, label, type, optional, value, errorMessage, state, description }) => {
+          const InputComponent = type === 'textarea' ? TextArea : TextInput;
+          return (<FormFieldContainer key={name}>
+            <InputComponent
               onChange={({
                 target: { value },
-              }: ChangeEvent<HTMLInputElement>) => {
+              }: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {
                 handleFieldChanged(name, value);
               }}
               name={name}
               data-testid={name}
               label={label}
-              type={type}
+              type={type === 'textarea' ? undefined : type}
               optional={optional}
               value={value}
               errorMessage={errorMessage}
               state={state}
               spellCheck={false}
+              description={description}
             />
-          </FormFieldContainer>
-        )
+          </FormFieldContainer>)
+        }
       )}
       <KMSTLSOptions
         kmsProvider="gcp"

diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kmip-fields.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kmip-fields.tsx
@@ -24,6 +24,7 @@ interface Field {
   value: string;
   errorMessage?: string;
   state: 'error' | 'none';
+  description?: string;
 }
 
 function KMIPFIelds({
@@ -56,13 +57,14 @@ function KMIPFIelds({
       value: autoEncryptionOptions?.kmsProviders?.kmip?.endpoint ?? '',
       errorMessage: errorMessageByFieldName(errors, 'kmip.endpoint'),
       state: fieldNameHasError(errors, 'kmip.endpoint') ? 'error' : 'none',
+      description: 'The endpoint consists of a hostname and port separated by a colon.'
     },
   ];
 
   return (
     <>
       {fields.map(
-        ({ name, label, type, optional, value, errorMessage, state }) => (
+        ({ name, label, type, optional, value, errorMessage, state, description }) => (
           <FormFieldContainer key={name}>
             <TextInput
               onChange={({
@@ -79,6 +81,7 @@ function KMIPFIelds({
               errorMessage={errorMessage}
               state={state}
               spellCheck={false}
+              description={description}
             />
           </FormFieldContainer>
         )
@@ -87,6 +90,7 @@ function KMIPFIelds({
         kmsProvider="kmip"
         autoEncryptionOptions={autoEncryptionOptions}
         updateConnectionFormField={updateConnectionFormField}
+        clientCertIsOptional={false}
       />
     </>
   );

diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-tls-options.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/kms-tls-options.tsx
@@ -9,10 +9,12 @@ function KMSTLSOptions({
   updateConnectionFormField,
   autoEncryptionOptions,
   kmsProvider,
+  clientCertIsOptional
 }: {
   updateConnectionFormField: UpdateConnectionFormField;
   autoEncryptionOptions: AutoEncryptionOptions;
   kmsProvider: keyof NonNullable<AutoEncryptionOptions['tlsOptions']>;
+  clientCertIsOptional?: boolean;
 }): React.ReactElement {
   const currentOptions: AutoEncryptionTlsOptions =
     autoEncryptionOptions.tlsOptions?.[kmsProvider] ?? {};
@@ -41,6 +43,7 @@ function KMSTLSOptions({
             value ?? undefined
           )
         }
+        displayDatabaseConnectionUserHints={false}
       />
       {/* TODO: Update UI messages for TLS situation (e.g. drop reference to X.509 auth) */}
       <TLSClientCertificate
@@ -61,6 +64,8 @@ function KMSTLSOptions({
             newPassword ?? undefined
           );
         }}
+        displayDatabaseConnectionUserHints={false}
+        optional={clientCertIsOptional ?? true}
       />
     </>
   );

diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/local-fields.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/local-fields.tsx
@@ -23,6 +23,7 @@ interface Field {
   value: string;
   errorMessage?: string;
   state: 'error' | 'none';
+  description?: string;
 }
 
 function LocalFields({
@@ -57,13 +58,14 @@ function LocalFields({
         '',
       errorMessage: errorMessageByFieldName(errors, 'local.key'),
       state: fieldNameHasError(errors, 'local.key') ? 'error' : 'none',
+      description: 'A 96-byte long base64-encoded string.'
     },
   ];
 
   return (
     <>
       {fields.map(
-        ({ name, label, type, optional, value, errorMessage, state }) => (
+        ({ name, label, type, optional, value, errorMessage, state, description }) => (
           <FormFieldContainer key={name}>
             <TextInput
               onChange={({
@@ -80,6 +82,7 @@ function LocalFields({
               errorMessage={errorMessage}
               state={state}
               spellCheck={false}
+              description={description}
             />
           </FormFieldContainer>
         )