feat(compass-collection): Connect schema redux state to modal and filter collections based on nesting depth - CLOUDP-342665 (#7283)

* WIP

* WIP

* Handle undefined

* Comments

* Move tests

* Address comment

* Add getAssignment to experimentation interface

* Dependency updates

* Hide button tooltip while analysis in progress

* Address comment to add tooltip

* Add thunk action abort signal cancellation

Author: jcobis

package-lock.json

@@ -73,6 +73,7 @@
   },
   "devDependencies": {
     "@mongodb-js/eslint-config-compass": "^1.4.8",
+    "@mongodb-js/mdb-experiment-js": "1.9.0",
     "@mongodb-js/mocha-config-compass": "^1.7.1",
     "@mongodb-js/prettier-config-compass": "^1.2.8",
     "@mongodb-js/testing-library-compass": "^1.3.11",

packages/compass-collection/package.json

@@ -48,6 +48,7 @@ describe('CollectionHeaderActions [Component]', function () {
       <CompassExperimentationProvider
         useAssignment={mockUseAssignment}
         assignExperiment={sinon.stub()}
+        getAssignment={sinon.stub().resolves(null)}
       >
         <WorkspacesServiceProvider
           value={workspaceService as WorkspacesService}
@@ -57,6 +58,9 @@ describe('CollectionHeaderActions [Component]', function () {
               namespace="test.test"
               isReadonly={false}
               onOpenMockDataModal={sinon.stub()}
+              hasSchemaAnalysisData={true}
+              analyzedSchemaDepth={2}
+              schemaAnalysisStatus="complete"
               {...props}
             />
           </PreferencesProvider>
@@ -221,97 +225,21 @@ describe('CollectionHeaderActions [Component]', function () {
       },
     };
 
-    it('should not show Mock Data Generator button when user is in control group', async function () {
-      mockUseAssignment.returns({
-        assignment: {
-          assignmentData: {
-            variant: 'mockDataGeneratorControl',
-          },
-        },
-      });
-
-      await renderCollectionHeaderActions(
-        {
-          namespace: 'test.collection',
-          isReadonly: false,
-        },
-        {},
-        atlasConnectionInfo
-      );
-
-      expect(
-        screen.queryByTestId('collection-header-generate-mock-data-button')
-      ).to.not.exist;
-    });
-
-    it('should not show Mock Data Generator button when not in Atlas', async function () {
-      mockUseAssignment.returns({
-        assignment: {
-          assignmentData: {
-            variant: 'treatment',
-          },
-        },
-      });
-
+    it('should call useAssignment with correct parameters', async function () {
       await renderCollectionHeaderActions({
         namespace: 'test.collection',
         isReadonly: false,
-        // Don't pass atlasConnectionInfo, to simulate not being in Atlas
       });
 
-      expect(
-        screen.queryByTestId('collection-header-generate-mock-data-button')
-      ).to.not.exist;
-    });
-
-    it('should not show Mock Data Generator button for readonly collections', async function () {
-      mockUseAssignment.returns({
-        assignment: {
-          assignmentData: {
-            variant: 'treatment',
-          },
-        },
-      });
-
-      await renderCollectionHeaderActions(
-        {
-          namespace: 'test.collection',
-          isReadonly: true,
-        },
-        {},
-        atlasConnectionInfo
+      expect(mockUseAssignment).to.have.been.calledWith(
+        ExperimentTestName.mockDataGenerator,
+        true // trackIsInSample - Experiment viewed analytics event
       );
-
-      expect(
-        screen.queryByTestId('collection-header-generate-mock-data-button')
-      ).to.not.exist;
     });
 
-    it('should not show Mock Data Generator button for views (sourceName present)', async function () {
-      mockUseAssignment.returns({
-        assignment: {
-          assignmentData: {
-            variant: 'treatment',
-          },
-        },
-      });
-
-      await renderCollectionHeaderActions(
-        {
-          namespace: 'test.collection',
-          isReadonly: false,
-          sourceName: 'source-collection',
-        },
-        {},
-        atlasConnectionInfo
-      );
-
-      expect(
-        screen.queryByTestId('collection-header-generate-mock-data-button')
-      ).to.not.exist;
-    });
+    it('should call onOpenMockDataModal when CTA button is clicked', async function () {
+      const onOpenMockDataModal = sinon.stub();
 
-    it('should show Mock Data Generator button when user is in treatment group and in Atlas', async function () {
       mockUseAssignment.returns({
         assignment: {
           assignmentData: {
@@ -324,35 +252,25 @@ describe('CollectionHeaderActions [Component]', function () {
         {
           namespace: 'test.collection',
           isReadonly: false,
+          onOpenMockDataModal,
         },
         {},
         atlasConnectionInfo
       );
 
-      expect(
-        screen.getByTestId('collection-header-generate-mock-data-button')
-      ).to.exist;
-    });
-
-    it('should call useAssignment with correct parameters', async function () {
-      await renderCollectionHeaderActions({
-        namespace: 'test.collection',
-        isReadonly: false,
-      });
-
-      expect(mockUseAssignment).to.have.been.calledWith(
-        ExperimentTestName.mockDataGenerator,
-        true // trackIsInSample - Experiment viewed analytics event
+      const button = screen.getByTestId(
+        'collection-header-generate-mock-data-button'
       );
-    });
+      button.click();
 
-    it('should call onOpenMockDataModal when CTA button is clicked', async function () {
-      const onOpenMockDataModal = sinon.stub();
+      expect(onOpenMockDataModal).to.have.been.calledOnce;
+    });
 
+    it('should disable button for deeply nested collections', async function () {
       mockUseAssignment.returns({
         assignment: {
           assignmentData: {
-            variant: 'mockDataGeneratorVariant',
+            variant: 'mockDataGeneratorVariant', // Treatment variant
           },
         },
       });
@@ -361,7 +279,10 @@ describe('CollectionHeaderActions [Component]', function () {
         {
           namespace: 'test.collection',
           isReadonly: false,
-          onOpenMockDataModal,
+          hasSchemaAnalysisData: true,
+          analyzedSchemaDepth: 5, // Exceeds MAX_COLLECTION_NESTING_DEPTH (3)
+          schemaAnalysisStatus: 'complete',
+          onOpenMockDataModal: sinon.stub(),
         },
         {},
         atlasConnectionInfo
@@ -370,9 +291,8 @@ describe('CollectionHeaderActions [Component]', function () {
       const button = screen.getByTestId(
         'collection-header-generate-mock-data-button'
       );
-      button.click();
-
-      expect(onOpenMockDataModal).to.have.been.calledOnce;
+      expect(button).to.exist;
+      expect(button).to.have.attribute('aria-disabled', 'true');
     });
   });
 });

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

@@ -18,6 +18,15 @@ import {
   ExperimentTestName,
   ExperimentTestGroup,
 } from '@mongodb-js/compass-telemetry/provider';
+import {
+  SCHEMA_ANALYSIS_STATE_ANALYZING,
+  type SchemaAnalysisStatus,
+} from '../../schema-analysis-types';
+
+/**
+ * Maximum allowed nesting depth for collections to show Mock Data Generator
+ */
+const MAX_COLLECTION_NESTING_DEPTH = 3;
 
 const collectionHeaderActionsStyles = css({
   display: 'flex',
@@ -47,6 +56,9 @@ type CollectionHeaderActionsProps = {
   sourceName?: string;
   sourcePipeline?: unknown[];
   onOpenMockDataModal: () => void;
+  hasSchemaAnalysisData: boolean;
+  analyzedSchemaDepth: number;
+  schemaAnalysisStatus: SchemaAnalysisStatus | null;
 };
 
 const CollectionHeaderActions: React.FunctionComponent<
@@ -58,6 +70,9 @@ const CollectionHeaderActions: React.FunctionComponent<
   sourceName,
   sourcePipeline,
   onOpenMockDataModal,
+  hasSchemaAnalysisData,
+  analyzedSchemaDepth,
+  schemaAnalysisStatus,
 }: CollectionHeaderActionsProps) => {
   const connectionInfo = useConnectionInfo();
   const { id: connectionId, atlasMetadata } = connectionInfo;
@@ -85,9 +100,13 @@ const CollectionHeaderActions: React.FunctionComponent<
     atlasMetadata && // Only show in Atlas
     !isReadonly && // Don't show for readonly collections (views)
     !sourceName; // sourceName indicates it's a view
-  // TODO: CLOUDP-337090: also filter out overly nested collections
 
-  const hasData = true; // TODO: CLOUDP-337090
+  const exceedsMaxNestingDepth =
+    analyzedSchemaDepth > MAX_COLLECTION_NESTING_DEPTH;
+
+  const isCollectionEmpty =
+    !hasSchemaAnalysisData &&
+    schemaAnalysisStatus !== SCHEMA_ANALYSIS_STATE_ANALYZING;
 
   return (
     <div
@@ -111,13 +130,13 @@ const CollectionHeaderActions: React.FunctionComponent<
       )}
       {shouldShowMockDataButton && (
         <Tooltip
-          enabled={!hasData}
+          enabled={exceedsMaxNestingDepth || isCollectionEmpty}
           trigger={
             <div>
               <Button
                 data-testid="collection-header-generate-mock-data-button"
                 size={ButtonSize.Small}
-                disabled={!hasData}
+                disabled={!hasSchemaAnalysisData || exceedsMaxNestingDepth}
                 onClick={onOpenMockDataModal}
                 leftGlyph={<Icon glyph="Sparkle" />}
               >
@@ -126,7 +145,10 @@ const CollectionHeaderActions: React.FunctionComponent<
             </div>
           }
         >
-          Please add data to your collection to generate similar mock documents
+          {exceedsMaxNestingDepth &&
+            'At this time we are unable to generate mock data for collections that have deeply nested documents'}
+          {isCollectionEmpty &&
+            'Please add data to your collection to generate similar mock documents'}
         </Tooltip>
       )}
       {atlasMetadata && (