feat: add fle2 collection badge COMPASS-5625

packages/collection-model/index.d.ts

@@ -56,6 +56,7 @@ interface Collection {
     isReadonly: boolean;
     isTimeSeries: boolean;
     isClustered: boolean;
+    isFLE: boolean;
     sourceName?: string;
     sourceReadonly?: boolean;
     sourceViewon?: string;

packages/collection-model/lib/collection-properties.js

@@ -2,6 +2,7 @@ const PROPERTIES_COLLATION = 'collation';
 const PROPERTIES_TIME_SERIES = 'timeseries';
 const PROPERTIES_CAPPED = 'capped';
 const PROPERTIES_CLUSTERED = 'clustered';
+const PROPERTIES_FLE2 = 'fle2';
 const PROPERTIES_VIEW = 'view';
 const PROPERTIES_READ_ONLY = 'read-only';
 
@@ -45,6 +46,12 @@ function getProperties(coll) {
     });
   }
 
+  if (coll.fle2) {
+    properties.push({
+      name: PROPERTIES_FLE2,
+    });
+  }
+
   return properties;
 }
 

packages/collection-model/lib/model.js

@@ -99,9 +99,10 @@ function pickCollectionInfo({
   collation,
   pipeline,
   validation,
-  clustered
+  clustered,
+  fle2,
 }) {
-  return { readonly, view_on, collation, pipeline, validation, clustered };
+  return { readonly, view_on, collation, pipeline, validation, clustered, fle2 };
 }
 
 /**
@@ -124,6 +125,7 @@ const CollectionModel = AmpersandModel.extend(debounceActions(['fetch']), {
     // Normalized values from collectionInfo command
     readonly: 'boolean',
     clustered: 'boolean',
+    fle2: 'boolean',
     view_on: 'string',
     collation: 'object',
     pipeline: 'array',
@@ -205,37 +207,32 @@ const CollectionModel = AmpersandModel.extend(debounceActions(['fetch']), {
         return getNamespaceInfo(this._id).normal;
       },
     },
-
     isTimeSeries: {
       deps: ['type'],
       fn() {
         return this.type === 'timeseries';
       },
     },
-
     isView: {
       deps: ['type'],
       fn() {
         return this.type === 'view';
       },
     },
-
     sourceId: {
       deps: ['view_on'],
       fn() {
         return this.view_on ? `${this.database}.${this.view_on}` : null;
       },
     },
-
     source: {
       deps: ['sourceId'],
       fn() {
         return this.collection.get(this.sourceId) ?? null;
       },
     },
-
     properties: {
-      deps: ['collation', 'type', 'capped', 'clustered', 'readonly'],
+      deps: ['collation', 'type', 'capped', 'clustered', 'readonly', 'fle2'],
       fn() {
         return getProperties(this);
       },
@@ -285,11 +282,13 @@ const CollectionModel = AmpersandModel.extend(debounceActions(['fetch']), {
       }
       // We don't care if it fails to get stats from server for any reason
     }
+
     const collectionMetadata = {
       namespace: this.ns,
       isReadonly: this.readonly,
       isTimeSeries: this.isTimeSeries,
-      isClustered: this.clustered
+      isClustered: this.clustered,
+      isFLE: this.fle2,
     };
     if (this.sourceId) {
       try {

packages/compass-collection/src/components/collection-header/collection-header.spec.tsx

@@ -19,6 +19,7 @@ describe('CollectionHeader [Component]', function () {
           isReadonly={false}
           isTimeSeries={false}
           isClustered={false}
+          isFLE={false}
           sourceName={null}
           globalAppRegistry={globalAppRegistry}
           namespace="db.coll"
@@ -71,8 +72,9 @@ describe('CollectionHeader [Component]', function () {
           isReadonly={true}
           isTimeSeries={false}
           isClustered={false}
-          globalAppRegistry={globalAppRegistry}
+          isFLE={false}
           sourceName="orig.coll"
+          globalAppRegistry={globalAppRegistry}
           namespace="db.coll"
           selectOrCreateTab={selectOrCreateTabSpy}
           sourceReadonly={false}
@@ -121,6 +123,7 @@ describe('CollectionHeader [Component]', function () {
           isReadonly={true}
           isTimeSeries={false}
           isClustered={false}
+          isFLE={false}
           sourceName={null}
           globalAppRegistry={globalAppRegistry}
           namespace="db.coll"
@@ -157,6 +160,7 @@ describe('CollectionHeader [Component]', function () {
           isReadonly={false}
           isTimeSeries={true}
           isClustered={false}
+          isFLE={false}
           sourceName={null}
           globalAppRegistry={globalAppRegistry}
           namespace="db.coll"
@@ -193,6 +197,7 @@ describe('CollectionHeader [Component]', function () {
           isReadonly={false}
           isTimeSeries={false}
           isClustered={true}
+          isFLE={false}
           sourceName={null}
           globalAppRegistry={globalAppRegistry}
           namespace="db.coll"
@@ -223,6 +228,35 @@ describe('CollectionHeader [Component]', function () {
     });
   });
 
+  context('when the collection is a fle collection', function () {
+    const globalAppRegistry = new AppRegistry();
+    const selectOrCreateTabSpy = spy();
+
+    beforeEach(function () {
+      render(
+        <CollectionHeader
+          isReadonly={false}
+          isTimeSeries={false}
+          isClustered={false}
+          isFLE={true}
+          sourceName={null}
+          globalAppRegistry={globalAppRegistry}
+          namespace="db.coll"
+          selectOrCreateTab={selectOrCreateTabSpy}
+          sourceReadonly={false}
+          pipeline={[]}
+          stats={STATS_INITIAL_STATE}
+        />
+      );
+    });
+
+    afterEach(cleanup);
+
+    it('renders the clustered badge', function () {
+      expect(screen.getByTestId('collection-badge-fle')).to.exist;
+    });
+  });
+
   context('when the db name is clicked', function () {
     it('emits the open event to the app registry', function () {
       const selectOrCreateTabSpy = spy();
@@ -235,6 +269,7 @@ describe('CollectionHeader [Component]', function () {
           isReadonly={false}
           isTimeSeries={false}
           isClustered={false}
+          isFLE={false}
           globalAppRegistry={
             {
               emit: (eventName, dbName) => {

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

@@ -19,6 +19,7 @@ import ViewBadge from './view-badge';
 import CollectionStats from '../collection-stats';
 import type { CollectionStatsObject } from '../../modules/stats';
 import ClusteredBadge from './clustered-badge';
+import FLEBadge from './fle-badge';
 
 const collectionHeaderStyles = css({
   paddingTop: spacing[3],
@@ -105,6 +106,7 @@ type CollectionHeaderProps = {
   isReadonly: boolean;
   isTimeSeries: boolean;
   isClustered: boolean;
+  isFLE: boolean;
   selectOrCreateTab: (options: any) => any;
   sourceName: string;
   sourceReadonly: boolean;
@@ -122,6 +124,8 @@ class CollectionHeader extends Component<CollectionHeaderProps> {
       namespace: this.props.sourceName,
       isReadonly: this.props.sourceReadonly,
       isTimeSeries: this.props.isTimeSeries,
+      isClustered: this.props.isClustered,
+      isFLE: this.props.isFLE,
       sourceName: this.props.sourceViewOn,
       editViewName: this.props.namespace,
       sourceReadonly: false,
@@ -136,6 +140,7 @@ class CollectionHeader extends Component<CollectionHeaderProps> {
       isReadonly: true,
       isTimeSeries: this.props.isTimeSeries,
       isClustered: this.props.isClustered,
+      isFLE: this.props.isFLE,
       sourceName: this.props.namespace,
       editViewName: null,
       sourceReadonly: this.props.isReadonly,
@@ -207,6 +212,7 @@ class CollectionHeader extends Component<CollectionHeaderProps> {
           {this.props.isReadonly && <ReadOnlyBadge />}
           {this.props.isTimeSeries && <TimeSeriesBadge />}
           {this.props.isClustered && <ClusteredBadge />}
+          {this.props.isFLE && <FLEBadge />}
           {this.props.isReadonly && this.props.sourceName && <ViewBadge />}
           <CollectionHeaderActions
             editViewName={this.props.editViewName}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  Badge,
+  BadgeVariant,
+  css,
+  spacing,
+  Icon,
+} from '@mongodb-js/compass-components';
+
+const collectionHeaderBadgeStyles = css({
+  marginLeft: spacing[2],
+});
+
+const FLEBadge = (): React.ReactElement => (
+  <Badge
+    data-testid="collection-badge-fle"
+    className={collectionHeaderBadgeStyles}
+    variant={BadgeVariant.DarkGray}
+  >
+    {/* TODO(COMPASS-5626): use proper name instead of FLE2 */}
+    <Icon glyph="Key" title="FLE2" size="small" />
+    &nbsp;FLE2
+  </Badge>
+);
+
+export default FLEBadge;

packages/compass-collection/src/components/collection/collection.spec.tsx

@@ -21,6 +21,7 @@ describe('Collection [Component]', function () {
         isReadonly={false}
         isTimeSeries={false}
         isClustered={false}
+        isFLE={false}
         sourceName={null}
         tabs={[]}
         views={[]}

packages/compass-collection/src/components/collection/collection.tsx

@@ -52,6 +52,7 @@ type CollectionProps = {
   isReadonly: boolean;
   isTimeSeries: boolean;
   isClustered: boolean;
+  isFLE: boolean;
   editViewName?: string;
   sourceReadonly: boolean;
   sourceViewOn?: string;
@@ -83,6 +84,7 @@ const Collection: React.FunctionComponent<CollectionProps> = ({
   isReadonly,
   isTimeSeries,
   isClustered,
+  isFLE,
   stats,
   editViewName,
   sourceReadonly,
@@ -150,6 +152,7 @@ const Collection: React.FunctionComponent<CollectionProps> = ({
           isReadonly={isReadonly}
           isTimeSeries={isTimeSeries}
           isClustered={isClustered}
+          isFLE={isFLE}
           editViewName={editViewName}
           sourceReadonly={sourceReadonly}
           sourceViewOn={sourceViewOn}

packages/compass-collection/src/components/workspace/workspace.tsx

@@ -73,6 +73,8 @@ const DEFAULT_NEW_TAB = {
   namespace: '',
   isReadonly: false,
   isTimeSeries: false,
+  isClustered: false,
+  isFLE: false,
   sourceName: '',
 };
 
@@ -158,6 +160,7 @@ class Workspace extends PureComponent<WorkspaceProps> {
           isReadonly: activeTab.isReadonly,
           isTimeSeries: activeTab.isTimeSeries,
           isClustered: activeTab.isClustered,
+          isFLE: activeTab.isFLE,
           sourceName: activeTab.sourceName,
           editViewName: activeTab.editViewName,
           sourceReadonly: activeTab.sourceReadonly,
@@ -229,6 +232,7 @@ class Workspace extends PureComponent<WorkspaceProps> {
             isReadonly={tab.isReadonly}
             isTimeSeries={tab.isTimeSeries}
             isClustered={tab.isClustered}
+            isFLE={tab.isFLE}
             sourceName={tab.sourceName}
             editViewName={tab.editViewName}
             sourceReadonly={tab.sourceReadonly}