feat(compass-collection): add Disclaimer Screen - Mock Data Generator CLOUDP-333851 (#7212)

Author: ncarbon

package-lock.json

@@ -52,6 +52,7 @@
     "@mongodb-js/compass-app-stores": "^7.57.0",
     "@mongodb-js/compass-components": "^1.49.0",
     "@mongodb-js/compass-connections": "^1.71.0",
+    "@mongodb-js/compass-generative-ai": "^0.51.0",
     "@mongodb-js/compass-logging": "^1.7.12",
     "@mongodb-js/compass-telemetry": "^1.14.0",
     "@mongodb-js/compass-workspaces": "^0.52.0",

packages/compass-collection/package.json

@@ -26,7 +26,7 @@ function renderCollectionHeader(
   const mockStore = createStore(() => ({
     mockDataGenerator: {
       isModalOpen: false,
-      currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+      currentStep: MockDataGeneratorStep.SCHEMA_CONFIRMATION,
     },
   }));
 

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

@@ -20,7 +20,7 @@ import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { getConnectionTitle } from '@mongodb-js/connection-info';
 import MockDataGeneratorModal from '../mock-data-generator-modal/mock-data-generator-modal';
 import { connect } from 'react-redux';
-import { mockDataGeneratorModalOpened } from '../../modules/collection-tab';
+import { openMockDataGeneratorModal } from '../../modules/collection-tab';
 
 const collectionHeaderStyles = css({
   padding: spacing[400],
@@ -182,7 +182,7 @@ const CollectionHeader: React.FunctionComponent<CollectionHeaderProps> = ({
 };
 
 const ConnectedCollectionHeader = connect(undefined, {
-  onOpenMockDataModal: mockDataGeneratorModalOpened,
+  onOpenMockDataModal: openMockDataGeneratorModal,
 })(CollectionHeader);
 
 export default ConnectedCollectionHeader;

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

@@ -1,7 +1,6 @@
 import { MockDataGeneratorStep } from './types';
 
 export const StepButtonLabelMap = {
-  [MockDataGeneratorStep.AI_DISCLAIMER]: 'Use Natural Language',
   [MockDataGeneratorStep.SCHEMA_CONFIRMATION]: 'Confirm',
   [MockDataGeneratorStep.SCHEMA_EDITOR]: 'Next',
   [MockDataGeneratorStep.DOCUMENT_COUNT]: 'Next',

packages/compass-collection/src/components/mock-data-generator-modal/constants.ts

@@ -23,7 +23,7 @@ describe('MockDataGeneratorModal', () => {
 
   function renderModal({
     isOpen = true,
-    currentStep = MockDataGeneratorStep.AI_DISCLAIMER,
+    currentStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION,
   } = {}) {
     return render(
       <MockDataGeneratorModal

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx

@@ -70,7 +70,7 @@ const MockDataGeneratorModal = ({
       <ModalFooter className={footerStyles}>
         <Button
           onClick={onPreviousStep}
-          disabled={currentStep === MockDataGeneratorStep.AI_DISCLAIMER}
+          disabled={currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION}
         >
           Back
         </Button>

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx

@@ -1,5 +1,4 @@
 export enum MockDataGeneratorStep {
-  AI_DISCLAIMER = 'AI_DISCLAIMER',
   SCHEMA_CONFIRMATION = 'SCHEMA_CONFIRMATION',
   SCHEMA_EDITOR = 'SCHEMA_EDITOR',
   DOCUMENT_COUNT = 'DOCUMENT_COUNT',

packages/compass-collection/src/components/mock-data-generator-modal/types.ts

@@ -18,6 +18,7 @@ import {
   CollectionWorkspaceTitle,
   CollectionPluginTitleComponent,
 } from './plugin-tab-title';
+import { atlasAiServiceLocator } from '@mongodb-js/compass-generative-ai/provider';
 
 export const WorkspaceTab: WorkspacePlugin<typeof CollectionWorkspaceTitle> = {
   name: CollectionWorkspaceTitle,
@@ -37,6 +38,7 @@ export const WorkspaceTab: WorkspacePlugin<typeof CollectionWorkspaceTitle> = {
       connectionInfoRef: connectionInfoRefLocator,
       logger: createLoggerLocator('COMPASS-COLLECTION'),
       preferences: preferencesLocator,
+      atlasAiService: atlasAiServiceLocator,
     }
   ),
   content: CollectionTab,

packages/compass-collection/src/index.ts

@@ -10,6 +10,8 @@ import type { DataService } from '@mongodb-js/compass-connections/provider';
 import type { experimentationServiceLocator } from '@mongodb-js/compass-telemetry/provider';
 import { type Logger, mongoLogId } from '@mongodb-js/compass-logging/provider';
 import { type PreferencesAccess } from 'compass-preferences-model/provider';
+import type { AtlasAiService } from '@mongodb-js/compass-generative-ai/provider';
+
 import { isInternalFieldPath } from 'hadron-document';
 import toNS from 'mongodb-ns';
 import {
@@ -24,11 +26,11 @@ import {
 import { calculateSchemaDepth } from '../calculate-schema-depth';
 import { processSchema } from '../transform-schema-to-field-info';
 import type { Document, MongoError } from 'mongodb';
+import { MockDataGeneratorStep } from '../components/mock-data-generator-modal/types';
 
 const DEFAULT_SAMPLE_SIZE = 100;
 
 const NO_DOCUMENTS_ERROR = 'No documents found in the collection to analyze.';
-import { MockDataGeneratorStep } from '../components/mock-data-generator-modal/types';
 
 function isAction<A extends AnyAction>(
   action: AnyAction,
@@ -65,6 +67,7 @@ type CollectionThunkAction<R, A extends AnyAction = AnyAction> = ThunkAction<
     experimentationServices: ReturnType<typeof experimentationServiceLocator>;
     logger: Logger;
     preferences: PreferencesAccess;
+    atlasAiService: AtlasAiService;
   },
   A
 >;
@@ -148,7 +151,7 @@ const reducer: Reducer<CollectionState, Action> = (
     },
     mockDataGenerator: {
       isModalOpen: false,
-      currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+      currentStep: MockDataGeneratorStep.SCHEMA_CONFIRMATION,
     },
   },
   action
@@ -236,7 +239,7 @@ const reducer: Reducer<CollectionState, Action> = (
       mockDataGenerator: {
         ...state.mockDataGenerator,
         isModalOpen: true,
-        currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+        currentStep: MockDataGeneratorStep.SCHEMA_CONFIRMATION,
       },
     };
   }
@@ -266,9 +269,6 @@ const reducer: Reducer<CollectionState, Action> = (
     let nextStep: MockDataGeneratorStep;
 
     switch (currentStep) {
-      case MockDataGeneratorStep.AI_DISCLAIMER:
-        nextStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION;
-        break;
       case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
         nextStep = MockDataGeneratorStep.SCHEMA_EDITOR;
         break;
@@ -305,7 +305,8 @@ const reducer: Reducer<CollectionState, Action> = (
 
     switch (currentStep) {
       case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
-        previousStep = MockDataGeneratorStep.AI_DISCLAIMER;
+        // TODO: Decide with product what we want behavior to be: close modal? Re-open disclaimer modal, if possible?
+        previousStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION;
         break;
       case MockDataGeneratorStep.SCHEMA_EDITOR:
         previousStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION;
@@ -372,6 +373,27 @@ export const selectTab = (
   };
 };
 
+export const openMockDataGeneratorModal = (): CollectionThunkAction<
+  Promise<void>
+> => {
+  return async (dispatch, _getState, { atlasAiService, logger }) => {
+    try {
+      if (process.env.COMPASS_E2E_SKIP_ATLAS_SIGNIN !== 'true') {
+        await atlasAiService.ensureAiFeatureAccess();
+      }
+      dispatch(mockDataGeneratorModalOpened());
+    } catch (error) {
+      // if failed or user canceled we just don't show the modal
+      logger.log.error(
+        mongoLogId(1_001_000_364),
+        'Collections',
+        'Failed to ensure AI feature access and open mock data generator modal',
+        error
+      );
+    }
+  };
+};
+
 export const analyzeCollectionSchema = (): CollectionThunkAction<
   Promise<void>
 > => {