chore: replace FLE2 with proper names in UI (#3097)

Author: addaleax

packages/compass-collection/src/components/collection-header/fle-badge.tsx

@@ -17,9 +17,9 @@ const FLEBadge = (): React.ReactElement => (
     className={collectionHeaderBadgeStyles}
     variant={BadgeVariant.DarkGray}
   >
-    {/* TODO(COMPASS-5626): use proper name instead of FLE2 */}
-    <Icon glyph="Key" title="FLE2" size="small" />
-    &nbsp;FLE2
+    {/* Queryable Encryption is the user-facing name of FLE2 */}
+    <Icon glyph="Key" title="Queryable Encryption" size="small" />
+    &nbsp;Queryable Encryption
   </Badge>
 );
 

packages/databases-collections-list/src/collections.tsx

@@ -61,11 +61,9 @@ function collectionPropertyToBadge({
     case 'timeseries':
       return { name, variant: 'darkgray', icon: 'TimeSeries' };
     case 'fle2':
-      return { name, variant: 'darkgray', icon: 'Key' };
+      return { name: 'Queryable Encryption', variant: 'darkgray', icon: 'Key' };
     case 'clustered':
       return { name, variant: 'darkgray' };
-    case 'readonly':
-      return { name };
     default:
       return { name };
   }

packages/databases-collections/src/components/collection-fields/fle2-fields.jsx

@@ -71,11 +71,11 @@ function FLE2Fields({
       toggled={isFLE2}
       disabled={isTimeSeries || isCapped}
       onToggle={checked => onChangeIsFLE2(checked)}
-      // TODO(COMPASS-5626): Use proper name instead of FLE2
-      label="FLE2"
+      // Queryable Encryption is the user-facing name of FLE2
+      label="Queryable Encryption"
       dataTestId="fle2-fields"
       helpUrl={HELP_URL_FLE2}
-      description="FLE2 collections encrypt a subset of the fields using client-side encryption."
+      description="Encrypt a subset of the fields using Queryable Encryption."
     >
       <FieldSet>
         <Label htmlFor="TODO(COMPASS-5653)">Encrypted fields</Label>