chore: update todo htmlFor usage in labels COMPASS-5653 (#3447)

Anemy · web-flow · commit 25c0e64d6b52 · 2022-09-08T07:17:27.000-04:00
diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   spacing,
-  Label,
+  Body,
   Description,
   Link,
   css,
@@ -29,7 +29,7 @@ function UrlOptions({
 }): React.ReactElement {
   return (
     <div className={urlOptionsContainerStyles} data-testid="url-options">
-      <Label htmlFor={''}>URI Options</Label>
+      <Body weight="medium">URI Options</Body>
       <Description className={urlOptionsTableDescriptionStyles}>
         Add additional MongoDB URI options to customize your connection.&nbsp;
         <Link
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
@@ -4,6 +4,7 @@ import type { ConnectionOptions } from 'mongodb-data-service';
 import {
   Accordion,
   Banner,
+  Body,
   Checkbox,
   Label,
   Link,
@@ -147,7 +148,7 @@ function CSFLETab({
         />
       </FormFieldContainer>
       <FormFieldContainer>
-        <Label htmlFor="TODO(COMPASS-5653)">KMS Providers</Label>
+        <Body weight="medium">KMS Providers</Body>
         <Description>
           Specify one or more Key Management Systems to use.
         </Description>
diff --git a/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx
@@ -36,6 +36,8 @@ const ENCRYPTED_FIELDS_MAP_PLACEHOLDER = `{
 }
 `;
 
+const encryptedFieldsMapEditorId = 'encrypted-fields-map-editor-id';
+
 function EncryptedFieldConfigInput({
   encryptedFieldsMap,
   errorMessage,
@@ -60,11 +62,12 @@ function EncryptedFieldConfigInput({
   return (
     <div data-testid="connection-csfle-encrypted-fields-map">
       <FormFieldContainer>
-        <Label htmlFor="TODO(COMPASS-5653)">{label}</Label>
+        <Label htmlFor={encryptedFieldsMapEditorId}>{label}</Label>
         <Description>{description}</Description>
         <Editor
           data-testid="encrypted-fields-map-editor"
           variant="Shell"
+          id={encryptedFieldsMapEditorId}
           text={encryptedFieldConfigToText(encryptedFieldsMap)}
           onChangeText={(newText) => {
             setHasEditedContent(true);
diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from '@mongodb-js/compass-components';
-import { spacing, css } from '@mongodb-js/compass-components';
 
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 import FieldSet from '../field-set/field-set';
diff --git a/packages/databases-collections/src/components/collection-fields/fle2-fields.jsx b/packages/databases-collections/src/components/collection-fields/fle2-fields.jsx
@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  css,
   Description,
   Editor,
   EditorVariant,
   Label,
-  Option,
   RadioBox,
   RadioBoxGroup,
-  Select,
-  SelectSize
 } from '@mongodb-js/compass-components';
 
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
@@ -56,6 +52,9 @@ const keyEncryptionKeyTemplate = {
   kmip: '/* No KeyEncryptionKey required */\n{}'
 };
 
+const queryableEncryptedFieldsEditorId = 'queryable-encrypted-fields-editor-id';
+const keyEncryptionKeyEditorId = 'key-encryption-key-editor-id';
+
 function FLE2Fields({
   isCapped,
   isTimeSeries,
@@ -77,10 +76,11 @@ function FLE2Fields({
       description="Encrypt a subset of the fields using Queryable Encryption."
     >
       <FieldSet>
-        <Label htmlFor="TODO(COMPASS-5653)">Encrypted fields</Label>
+        <Label htmlFor={queryableEncryptedFieldsEditorId}>Encrypted fields</Label>
         <Description>Indicate which fields should be encrypted and whether they should be queryable.</Description>
         <Editor
           variant={EditorVariant.Shell}
+          id={queryableEncryptedFieldsEditorId}
           name="fle2.encryptedFields"
           value={fle2.encryptedFields}
           data-testid="fle2-encryptedFields"
@@ -124,10 +124,11 @@ function FLE2Fields({
       </FieldSet>
 
       <FieldSet>
-        <Label htmlFor="TODO(COMPASS-5653)">Key Encryption Key</Label>
+        <Label htmlFor={keyEncryptionKeyEditorId}>Key Encryption Key</Label>
         <Description>Specify which key encryption key to use for creating new data encryption keys.</Description>
         <Editor
           variant={EditorVariant.Shell}
+          id={keyEncryptionKeyEditorId}
           name="fle2.keyEncryptionKey"
           defaultValue={keyEncryptionKeyTemplate[fle2.kmsProvider]}
           value={fle2.keyEncryptionKey || keyEncryptionKeyTemplate[fle2.kmsProvider]}
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, TextInput } from '@mongodb-js/compass-components';
-import { spacing, css } from '@mongodb-js/compass-components';
+import { css } from '@mongodb-js/compass-components';
 
 import FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
diff --git a/packages/databases-collections/src/modules/create-collection/index.js b/packages/databases-collections/src/modules/create-collection/index.js
@@ -100,6 +100,55 @@ export const open = (dbName) => ({
   databaseName: dbName
 });
 
+
+export async function handleFLE2Options(ds, options) {
+  if (!options) {
+    return options;
+  }
+
+  if (options.encryptedFields) {
+    try {
+      options.encryptedFields = queryParser(options.encryptedFields);
+    } catch (err) {
+      throw new Error(`Could not parse encryptedFields config: ${err.message}`);
+    }
+
+    if (Object.keys(options.encryptedFields).length === 0) {
+      delete options.encryptedFields;
+    } else if (options.kmsProvider) {
+      // If keys are missing from the encryptedFields config,
+      // generate them as part of the collection creation operation.
+      let keyEncryptionKey;
+      try {
+        keyEncryptionKey = queryParser(options.keyEncryptionKey || '{}');
+      } catch (err) {
+        throw new Error(`Could not parse keyEncryptionKey: ${err.message}`);
+      }
+
+      const fields = options.encryptedFields.fields;
+      if (Array.isArray(fields)) {
+        const keyCreationPromises = [];
+        for (const field of fields) {
+          if (field.keyId) continue;
+          keyCreationPromises.push((async() => {
+            field.keyId = await ds.createDataKey(options.kmsProvider, {
+              masterKey: keyEncryptionKey
+            });
+          })());
+        }
+        await Promise.all(keyCreationPromises);
+      }
+    }
+  } else {
+    delete options.encryptedFields;
+  }
+
+  delete options.kmsProvider;
+  delete options.keyEncryptionKey;
+
+  return options;
+}
+
 export const createCollection = (data, kind = 'Collection') => {
   // Note: This method can also be called from createDatabase(),
   // against a different state.
@@ -152,51 +201,3 @@ export const createCollection = (data, kind = 'Collection') => {
     }
   };
 };
-
-export async function handleFLE2Options(ds, options) {
-  if (!options) {
-    return options;
-  }
-
-  if (options.encryptedFields) {
-    try {
-      options.encryptedFields = queryParser(options.encryptedFields);
-    } catch (err) {
-      throw new Error(`Could not parse encryptedFields config: ${err.message}`);
-    }
-
-    if (Object.keys(options.encryptedFields).length === 0) {
-      delete options.encryptedFields;
-    } else if (options.kmsProvider) {
-      // If keys are missing from the encryptedFields config,
-      // generate them as part of the collection creation operation.
-      let keyEncryptionKey;
-      try {
-        keyEncryptionKey = queryParser(options.keyEncryptionKey || '{}');
-      } catch (err) {
-        throw new Error(`Could not parse keyEncryptionKey: ${err.message}`);
-      }
-
-      const fields = options.encryptedFields.fields;
-      if (Array.isArray(fields)) {
-        const keyCreationPromises = [];
-        for (const field of fields) {
-          if (field.keyId) continue;
-          keyCreationPromises.push((async() => {
-            field.keyId = await ds.createDataKey(options.kmsProvider, {
-              masterKey: keyEncryptionKey
-            });
-          })());
-        }
-        await Promise.all(keyCreationPromises);
-      }
-    }
-  } else {
-    delete options.encryptedFields;
-  }
-
-  delete options.kmsProvider;
-  delete options.keyEncryptionKey;
-
-  return options;
-}
