chore(compass-generative-ai): update Gen AI opt-in modal COMPASS-9593

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

@@ -281,7 +281,9 @@ export class AtlasAiService {
     // 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/components/ai-optin-modal.spec.tsx

@@ -9,6 +9,15 @@ import { PreferencesProvider } from 'compass-preferences-model/provider';
 let mockPreferences: PreferencesAccess;
 
 describe('AIOptInModal Component', function () {
+  const baseProps = {
+    projectId: 'ab123',
+    isCloudOptIn: true,
+    isOptInModalVisible: true,
+    isOptInInProgress: false,
+    onOptInModalClose: () => {},
+    onOptInClick: () => {},
+  };
+
   beforeEach(async function () {
     mockPreferences = await createSandboxFromDefaultPreferences();
   });
@@ -20,37 +29,23 @@ describe('AIOptInModal Component', function () {
   it('should show the modal title', function () {
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        ></AIOptInModal>
+        <AIOptInModal {...baseProps}></AIOptInModal>
       </PreferencesProvider>
     );
     expect(
       screen.getByRole('heading', {
-        name: 'Use natural language to generate queries and pipelines',
+        name: 'Opt-in Gen AI-Powered features',
       })
     ).to.exist;
   });
-  it('should show the cancel button', function () {
+  it('should show the not now link', function () {
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        >
-          {' '}
-        </AIOptInModal>
+        <AIOptInModal {...baseProps}></AIOptInModal>
       </PreferencesProvider>
     );
-    const button = screen.getByText('Cancel').closest('button');
-    expect(button).to.not.match('disabled');
+    const link = screen.getByText('Not now');
+    expect(link).to.exist;
   });
 
   it('should show the opt in button enabled when project AI setting is enabled', async function () {
@@ -59,19 +54,34 @@ describe('AIOptInModal Component', function () {
     });
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        >
-          {' '}
-        </AIOptInModal>
+        <AIOptInModal {...baseProps}></AIOptInModal>
+      </PreferencesProvider>
+    );
+    const button = screen.getByText('Opt-in AI features');
+    expect(button).to.exist;
+  });
+
+  it('should show an info banner in a cloud opt-in', async function () {
+    await mockPreferences.savePreferences({
+      enableGenAIFeaturesAtlasProject: true,
+    });
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal {...baseProps} isCloudOptIn={true}></AIOptInModal>
+      </PreferencesProvider>
+    );
+    const banner = screen.getByTestId('ai-optin-cloud-banner');
+    expect(banner).to.exist;
+  });
+
+  it('should not show a banner in non-cloud environment', function () {
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal {...baseProps} isCloudOptIn={false}></AIOptInModal>
       </PreferencesProvider>
     );
-    const button = screen.getByText('Use Natural Language').closest('button');
-    expect(button?.getAttribute('aria-disabled')).to.equal('false');
+    const banner = screen.queryByTestId('ai-optin-cloud-banner');
+    expect(banner).to.not.exist;
   });
 
   it('should disable the opt in button if project AI setting is disabled ', async function () {
@@ -80,18 +90,10 @@ describe('AIOptInModal Component', function () {
     });
     render(
       <PreferencesProvider value={mockPreferences}>
-        <AIOptInModal
-          projectId="ab123"
-          isOptInModalVisible={true}
-          isOptInInProgress={false}
-          onOptInModalClose={() => {}}
-          onOptInClick={() => {}}
-        >
-          {' '}
-        </AIOptInModal>
+        <AIOptInModal {...baseProps}></AIOptInModal>
       </PreferencesProvider>
     );
-    const button = screen.getByText('Use Natural Language').closest('button');
-    expect(button?.getAttribute('aria-disabled')).to.equal('true');
+    const button = screen.getByText('AI features disabled');
+    expect(button).to.exist;
   });
 });

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

@@ -4,12 +4,12 @@ import {
   Banner,
   Body,
   Link,
-  ConfirmationModal,
-  SpinLoader,
+  MarketingModal,
   css,
   spacing,
-  H3,
   palette,
+  useDarkMode,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { AiImageBanner } from './ai-image-banner';
 import { closeOptInModal, optIn } from '../store/atlas-optin-reducer';
@@ -22,50 +22,42 @@ const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
 type OptInModalProps = {
   isOptInModalVisible: boolean;
   isOptInInProgress: boolean;
+  isCloudOptIn: boolean;
   onOptInModalClose: () => void;
   onOptInClick: () => void;
   projectId?: string;
 };
 
-const titleStyles = css({
-  marginBottom: spacing[400],
-  marginTop: spacing[400],
-  marginLeft: spacing[500],
-  marginRight: spacing[500],
-  textAlign: 'center',
-});
-
-const bodyStyles = css({
-  marginBottom: spacing[400],
-  marginTop: spacing[400],
-  marginLeft: spacing[300],
-  marginRight: spacing[300],
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  textAlign: 'center',
-});
-
 const disclaimerStyles = css({
   color: palette.gray.dark1,
-  marginTop: spacing[400],
-  marginLeft: spacing[800],
-  marginRight: spacing[800],
+  paddingLeft: spacing[800],
+  paddingRight: spacing[800],
 });
 
-const bannerStyles = css({
-  padding: spacing[400],
-  marginTop: spacing[400],
-  textAlign: 'left',
+// TODO: The LG MarketingModal does not provide a way to disable a button
+// so this is a temporary workaround to make the button look disabled.
+const disableOptInButtonStyles = css({
+  button: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+    cursor: 'not-allowed',
+  },
 });
-const getButtonText = (isOptInInProgress: boolean) => {
+
+const getButtonText = ({
+  isOptInInProgress,
+  darkMode,
+}: {
+  isOptInInProgress: boolean;
+  darkMode: boolean | undefined;
+}) => {
   return (
     <>
-      &nbsp;Use Natural Language
+      Opt-in AI features
       {isOptInInProgress && (
         <>
           &nbsp;
-          <SpinLoader darkMode={true}></SpinLoader>
+          <SpinLoader darkMode={darkMode}></SpinLoader>
         </>
       )}
     </>
@@ -75,12 +67,14 @@ const getButtonText = (isOptInInProgress: boolean) => {
 export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   isOptInModalVisible,
   isOptInInProgress,
+  isCloudOptIn,
   onOptInModalClose,
   onOptInClick,
   projectId,
 }) => {
   const isProjectAIEnabled = usePreference('enableGenAIFeaturesAtlasProject');
   const track = useTelemetry();
+  const darkMode = useDarkMode();
   const PROJECT_SETTINGS_LINK = projectId
     ? window.location.origin + '/v2/' + projectId + '#/settings/groupSettings'
     : null;
@@ -92,7 +86,7 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   }, [isOptInModalVisible, track]);
 
   const onConfirmClick = () => {
-    if (isOptInInProgress) {
+    if (isOptInInProgress || !isProjectAIEnabled) {
       return;
     }
     onOptInClick();
@@ -104,43 +98,22 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   }, [track, onOptInModalClose]);
 
   return (
-    <ConfirmationModal
-      open={isOptInModalVisible}
-      title=""
-      confirmButtonProps={{
-        children: getButtonText(isOptInInProgress),
-        disabled: !isProjectAIEnabled,
-        onClick: onConfirmClick,
-      }}
-      cancelButtonProps={{
-        onClick: handleModalClose,
-      }}
-    >
-      <Body className={bodyStyles}>
-        <AiImageBanner></AiImageBanner>
-        <H3 className={titleStyles}>
-          Use natural language to generate queries and pipelines
-        </H3>
-        Atlas users can now quickly create queries and aggregations with
-        MongoDB&apos;s&nbsp; intelligent AI-powered feature, available today.
-        <Banner
-          variant={isProjectAIEnabled ? 'info' : 'warning'}
-          className={bannerStyles}
-        >
-          {isProjectAIEnabled
-            ? 'AI features are enabled for project users with data access.'
-            : 'AI features are disabled for project users.'}{' '}
-          Project Owners can {isProjectAIEnabled ? 'disable' : 'enable'} Data
-          Explorer AI features in the{' '}
-          {PROJECT_SETTINGS_LINK !== null ? (
-            <Link href={PROJECT_SETTINGS_LINK} target="_blank">
-              Project Settings
-            </Link>
-          ) : (
-            'Project Settings'
-          )}
-          .
-        </Banner>
+    <MarketingModal
+      open={true}
+      onClose={handleModalClose}
+      className={isCloudOptIn ? disableOptInButtonStyles : undefined}
+      onButtonClick={onConfirmClick}
+      title="Opt-in Gen AI-Powered features"
+      // @ts-expect-error - buttonText expects a string but supports ReactNode as well.
+      buttonText={getButtonText({
+        isOptInInProgress,
+        darkMode,
+      })}
+      linkText="Not now"
+      onLinkClick={handleModalClose}
+      graphic={<AiImageBanner />}
+      darkMode={darkMode}
+      disclaimer={
         <div className={disclaimerStyles}>
           This is a feature powered by generative AI, and may give inaccurate
           responses. Please see our{' '}
@@ -149,8 +122,49 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
           </Link>{' '}
           for more information.
         </div>
+      }
+    >
+      <Body
+        style={{
+          textAlign: 'left',
+          marginTop: spacing[300],
+        }}
+      >
+        Opt in now MongoDB’s intelligent AI-powered features:
+        <ul
+          style={{
+            textAlign: 'left',
+            marginTop: spacing[100],
+            listStyle: 'disc',
+          }}
+        >
+          <li>AI Assistant allows you to ask questions across connections</li>
+          <li>Natural Language Bar to create queries and aggregations</li>
+          {/* <li>Mock Data Generator to create AI powered sample data</li> */}
+        </ul>
+        {isCloudOptIn && (
+          <Banner
+            data-testid="ai-optin-cloud-banner"
+            variant={isProjectAIEnabled ? 'info' : 'warning'}
+            style={{ marginTop: spacing[300] }}
+          >
+            {isProjectAIEnabled
+              ? 'AI features are enabled for project users with data access.'
+              : 'AI features are disabled for project users.'}{' '}
+            Project Owners can {isProjectAIEnabled ? 'disable' : 'enable'} Data
+            Explorer AI features in the{' '}
+            {PROJECT_SETTINGS_LINK !== null ? (
+              <Link href={PROJECT_SETTINGS_LINK} target="_blank">
+                Project Settings
+              </Link>
+            ) : (
+              'Project Settings'
+            )}
+            .
+          </Banner>
+        )}
       </Body>
-    </ConfirmationModal>
+    </MarketingModal>
   );
 };
 

packages/compass-generative-ai/src/components/plugin.tsx

@@ -5,15 +5,20 @@ import { ConfirmationModalArea } from '@mongodb-js/compass-components';
 
 export interface AtlasAiPluginProps {
   projectId?: string;
+  isCloudOptIn: boolean;
 }
 
 export const AtlasAiPlugin: React.FunctionComponent<AtlasAiPluginProps> = ({
   projectId,
+  isCloudOptIn,
 }) => {
   return (
     <ConfirmationModalArea>
       <AISignInModal></AISignInModal>
-      <AIOptInModal projectId={projectId}></AIOptInModal>
+      <AIOptInModal
+        isCloudOptIn={isCloudOptIn}
+        projectId={projectId}
+      ></AIOptInModal>
     </ConfirmationModalArea>
   );
 };