conditionally render ai optin modal content using isCloudOptIn prop

Author: ncarbon

package-lock.json

@@ -52,7 +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.50.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

@@ -52,7 +52,6 @@
     "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
   },
   "dependencies": {
-    "@leafygreen-ui/marketing-modal": "^8.0.0",
     "@mongodb-js/atlas-service": "^0.56.0",
     "@mongodb-js/compass-app-registry": "^9.4.20",
     "@mongodb-js/compass-components": "^1.49.0",

packages/compass-generative-ai/package.json

@@ -278,14 +278,18 @@ export class AtlasAiService {
 
   async ensureAiFeatureAccess({ signal }: { signal?: AbortSignal } = {}) {
     if (this.preferences.getPreferences().enableUnauthenticatedGenAI) {
-      return getStore().dispatch(optIntoGenAIWithModalPrompt({ signal }));
+      return getStore().dispatch(
+        optIntoGenAIWithModalPrompt({ signal, isCloudOptIn: false })
+      );
     }
 
     // When the ai feature is attempted to be opened we make sure
     // the user is signed into Atlas and opted in.
 
     if (this.apiURLPreset === 'cloud') {
-      return getStore().dispatch(optIntoGenAIWithModalPrompt({ signal }));
+      return getStore().dispatch(
+        optIntoGenAIWithModalPrompt({ signal, isCloudOptIn: true })
+      );
     }
     return getStore().dispatch(signIntoAtlasWithModalPrompt({ signal }));
   }

packages/compass-generative-ai/src/atlas-ai-service.ts

@@ -1,32 +1,39 @@
+import { render, screen } from '@mongodb-js/testing-library-compass';
 import React from 'react';
-import { render, screen, cleanup } from '@mongodb-js/testing-library-compass';
 import { expect } from 'chai';
 import { AIOptInModal } from './ai-optin-modal';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
 import { PreferencesProvider } from 'compass-preferences-model/provider';
+import Sinon from 'sinon';
 
 let mockPreferences: PreferencesAccess;
 
 describe('AIOptInModal Component', function () {
+  const sandbox = Sinon.createSandbox();
+  const onOptInClickStub = sandbox.stub();
+
+  const baseProps = {
+    projectId: 'ab123',
+    isCloudOptIn: true,
+    isOptInModalVisible: true,
+    isOptInInProgress: false,
+    onOptInModalClose: () => {},
+    onOptInClick: onOptInClickStub,
+  };
+
   beforeEach(async function () {
     mockPreferences = await createSandboxFromDefaultPreferences();
   });
 
   afterEach(function () {
-    cleanup();
+    sandbox.restore();
   });
 
-  it('should show the modal title', function () {
+  it('should show the correct modal title when in a cloud opt-in environment', function () {
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        ></AIOptInModal>
+        <AIOptInModal {...baseProps} />
       </PreferencesProvider>
     );
     expect(
@@ -35,38 +42,61 @@ describe('AIOptInModal Component', function () {
       })
     ).to.exist;
   });
+
+  it('should show the correct modal title when not in a cloud opt-in environment', function () {
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal {...baseProps} isCloudOptIn={false} />
+      </PreferencesProvider>
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: 'Use AI Features in Compass',
+      })
+    ).to.exist;
+  });
+
   it('should show the Not now link', function () {
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        >
-          {' '}
-        </AIOptInModal>
+        <AIOptInModal {...baseProps} />
       </PreferencesProvider>
     );
     expect(screen.getByText('Not now')).to.exist;
   });
 
+  it('should show an info banner when in a cloud opt-in environment', async function () {
+    await mockPreferences.savePreferences({
+      enableGenAIFeaturesAtlasProject: true,
+    });
+
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal {...baseProps} />
+      </PreferencesProvider>
+    );
+
+    const banner = screen.getByTestId('ai-optin-cloud-banner');
+    expect(banner).to.exist;
+  });
+
+  it('should not show a banner when in non-cloud environment', function () {
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal {...baseProps} isCloudOptIn={false} />
+      </PreferencesProvider>
+    );
+    const banner = screen.queryByTestId('ai-optin-cloud-banner');
+    expect(banner).to.not.exist;
+  });
+
   it('should show the opt in button enabled when project AI setting is enabled', async function () {
     await mockPreferences.savePreferences({
       enableGenAIFeaturesAtlasProject: true,
     });
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        >
-          {' '}
-        </AIOptInModal>
+        <AIOptInModal {...baseProps} />
       </PreferencesProvider>
     );
     const button = screen.getByText('Use AI Features').closest('button');
@@ -81,13 +111,7 @@ describe('AIOptInModal Component', function () {
       });
       render(
         <PreferencesProvider value={mockPreferences}>
-          <AIOptInModal
-            projectId="ab123"
-            isOptInModalVisible={true}
-            isOptInInProgress={false}
-            onOptInModalClose={() => {}}
-            onOptInClick={() => {}}
-          />
+          <AIOptInModal {...baseProps} />
         </PreferencesProvider>
       );
       expect(
@@ -107,13 +131,7 @@ describe('AIOptInModal Component', function () {
       });
       render(
         <PreferencesProvider value={mockPreferences}>
-          <AIOptInModal
-            projectId="ab123"
-            isOptInModalVisible={true}
-            isOptInInProgress={false}
-            onOptInModalClose={() => {}}
-            onOptInClick={() => {}}
-          />
+          <AIOptInModal {...baseProps} />
         </PreferencesProvider>
       );
       expect(
@@ -135,13 +153,7 @@ describe('AIOptInModal Component', function () {
       });
       render(
         <PreferencesProvider value={mockPreferences}>
-          <AIOptInModal
-            projectId="ab123"
-            isOptInModalVisible={true}
-            isOptInInProgress={false}
-            onOptInModalClose={() => {}}
-            onOptInClick={() => {}}
-          />
+          <AIOptInModal {...baseProps} />
         </PreferencesProvider>
       );
       expect(
@@ -157,49 +169,31 @@ describe('AIOptInModal Component', function () {
 
   describe('button click behavior', function () {
     it('should not call onOptInClick when main AI features are disabled', async function () {
-      let onOptInClickCalled = false;
       await mockPreferences.savePreferences({
         enableGenAIFeaturesAtlasProject: false,
       });
       render(
         <PreferencesProvider value={mockPreferences}>
-          <AIOptInModal
-            projectId="ab123"
-            isOptInModalVisible={true}
-            isOptInInProgress={false}
-            onOptInModalClose={() => {}}
-            onOptInClick={() => {
-              onOptInClickCalled = true;
-            }}
-          />
+          <AIOptInModal {...baseProps} />
         </PreferencesProvider>
       );
       const button = screen.getByText('Use AI Features');
       button.click();
-      expect(onOptInClickCalled).to.be.false;
+      expect(onOptInClickStub).not.to.have.been.called;
     });
 
     it('should call onOptInClick when main AI features are enabled', async function () {
-      let onOptInClickCalled = false;
       await mockPreferences.savePreferences({
         enableGenAIFeaturesAtlasProject: true,
       });
       render(
         <PreferencesProvider value={mockPreferences}>
-          <AIOptInModal
-            projectId="ab123"
-            isOptInModalVisible={true}
-            isOptInInProgress={false}
-            onOptInModalClose={() => {}}
-            onOptInClick={() => {
-              onOptInClickCalled = true;
-            }}
-          />
+          <AIOptInModal {...baseProps} />
         </PreferencesProvider>
       );
       const button = screen.getByText('Use AI Features');
       button.click();
-      expect(onOptInClickCalled).to.be.true;
+      expect(onOptInClickStub).to.have.been.calledOnce;
     });
   });
 });