feat(compass-generative-ai): Add plugin to generative ai package to show opt-in for project setting in DE COMPASS-8378

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

@@ -0,0 +1,100 @@
+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';
+
+let mockPreferences: PreferencesAccess;
+
+describe('AIOptInModal Component', function () {
+  beforeEach(async function () {
+    mockPreferences = await createSandboxFromDefaultPreferences();
+  });
+
+  afterEach(function () {
+    cleanup();
+  });
+
+  it('should show the modal title', function () {
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal
+          projectId="ab123"
+          isOptInModalVisible={true}
+          isOptInInProgress={false}
+          onOptInModalClose={() => {}}
+          onOptInClick={() => {}}
+        ></AIOptInModal>
+      </PreferencesProvider>
+    );
+    expect(
+      screen.getByRole('heading', {
+        name: 'Use natural language to generate queries and pipelines',
+      })
+    ).to.exist;
+  });
+  it('should show the cancel button', function () {
+    void mockPreferences.savePreferences({
+      enableGenAIFeaturesAtlasProject: true,
+    });
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal
+          projectId="ab123"
+          isOptInModalVisible={true}
+          isOptInInProgress={false}
+          onOptInModalClose={() => {}}
+          onOptInClick={() => {}}
+        >
+          {' '}
+        </AIOptInModal>
+      </PreferencesProvider>
+    );
+    const button = screen.getByText('Cancel').closest('button');
+    expect(button).to.not.match('disabled');
+  });
+
+  it('should show the opt in button enabled when project AI setting is enabled', function () {
+    void mockPreferences.savePreferences({
+      enableGenAIFeaturesAtlasProject: true,
+    });
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal
+          projectId="ab123"
+          isOptInModalVisible={true}
+          isOptInInProgress={false}
+          onOptInModalClose={() => {}}
+          onOptInClick={() => {}}
+        >
+          {' '}
+        </AIOptInModal>
+      </PreferencesProvider>
+    );
+    const button = screen.getByText('Use Natural Language').closest('button');
+    expect(button?.getAttribute('aria-disabled')).to.equal('false');
+  });
+
+  it('should disable the opt in button if project AI setting is disabled ', function () {
+    void mockPreferences.savePreferences({
+      enableGenAIFeaturesAtlasProject: false,
+    });
+    render(
+      <PreferencesProvider value={mockPreferences}>
+        <AIOptInModal
+          projectId="ab123"
+          isOptInModalVisible={true}
+          isOptInInProgress={false}
+          onOptInModalClose={() => {}}
+          onOptInClick={() => {}}
+        >
+          {' '}
+        </AIOptInModal>
+      </PreferencesProvider>
+    );
+    const button = screen.getByText('Use Natural Language').closest('button');
+    expect(button?.getAttribute('aria-disabled')).to.equal('true');
+  });
+});

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

@@ -23,7 +23,7 @@ type OptInModalProps = {
   isOptInInProgress: boolean;
   onOptInModalClose: () => void;
   onOptInClick: () => void;
-  projectId: string;
+  projectId: string | undefined;
 };
 
 const titleStyles = css({
@@ -71,16 +71,17 @@ const getButtonText = (isOptInInProgress: boolean) => {
   );
 };
 
-const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
+export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
   isOptInModalVisible,
   isOptInInProgress,
   onOptInModalClose,
   onOptInClick,
   projectId,
 }) => {
   const isProjectAIEnabled = usePreference('enableGenAIFeaturesAtlasProject');
-  const PROJECT_SETTINGS_LINK =
-    window.location.origin + '/v2/' + projectId + '#/settings/groupSettings';
+  const PROJECT_SETTINGS_LINK = projectId
+    ? window.location.origin + '/v2/' + projectId + '#/settings/groupSettings'
+    : null;
 
   const onConfirmClick = () => {
     if (isOptInInProgress) {
@@ -116,9 +117,13 @@ const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
             ? 'AI features are enabled for project users with data access.'
             : 'AI features are disabled for project users.'}{' '}
           Project Owners can change this setting in the{' '}
-          <Link href={PROJECT_SETTINGS_LINK} target="_blank">
-            AI features
-          </Link>
+          {PROJECT_SETTINGS_LINK !== null ? (
+            <Link href={PROJECT_SETTINGS_LINK} target="_blank">
+              AI features
+            </Link>
+          ) : (
+            'AI features '
+          )}
           section.
         </Banner>
         <div className={disclaimerStyles}>

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

@@ -4,7 +4,7 @@ import AIOptInModal from './ai-optin-modal';
 import { ConfirmationModalArea } from '@mongodb-js/compass-components';
 
 export interface AtlasAiPluginProps {
-  projectId: string;
+  projectId: string | undefined;
 }
 
 export const AtlasAiPlugin: React.FunctionComponent<AtlasAiPluginProps> = ({

packages/compass/src/app/components/home.tsx

@@ -215,11 +215,7 @@ function Home({
           <CompassFindInPagePlugin></CompassFindInPagePlugin>
           <AtlasAuthPlugin></AtlasAuthPlugin>
           <CompassGenerativeAIPlugin
-            projectId={
-              connectionInfo && connectionInfo.atlasMetadata
-                ? connectionInfo?.atlasMetadata?.projectId
-                : ''
-            }
+            projectId={connectionInfo?.atlasMetadata?.projectId}
           ></CompassGenerativeAIPlugin>
           <LegacyConnectionsModal />
         </FieldStorePlugin>