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/atlas-ai-service.ts

@@ -10,7 +10,8 @@ import type { Document } from 'mongodb';
 import type { Logger } from '@mongodb-js/compass-logging';
 import { EJSON } from 'bson';
 import { signIntoAtlasWithModalPrompt } from './store/atlas-signin-reducer';
-import { getStore } from './store/atlas-signin-store';
+import { getStore } from './store/atlas-ai-store';
+import { optIntoGenAIWithModalPrompt } from './store/atlas-optin-reducer';
 
 type GenerativeAiInput = {
   userInput: string;
@@ -329,6 +330,10 @@ export class AtlasAiService {
   async ensureAiFeatureAccess({ signal }: { signal?: AbortSignal } = {}) {
     // 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(signIntoAtlasWithModalPrompt({ signal }));
   }
 
@@ -437,6 +442,26 @@ export class AtlasAiService {
     );
   }
 
+  // optIn function w post request to set the user preference to true
+  async optIntoGenAIFeaturesAtlas() {
+    await this.atlasService.authenticatedFetch(
+      this.atlasService.cloudEndpoint(
+        '/settings/optInDataExplorerGenAIFeatures'
+      ),
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Accept: 'application/json',
+        },
+        body: new URLSearchParams([['value', 'true']]),
+      }
+    );
+    await this.preferences.savePreferences({
+      optInDataExplorerGenAIFeatures: true,
+    });
+  }
+
   private validateAIFeatureEnablementResponse(
     response: any
   ): asserts response is AIFeatureEnablement {

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

@@ -0,0 +1,156 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  Banner,
+  Body,
+  Link,
+  ConfirmationModal,
+  SpinLoader,
+  css,
+  spacing,
+  H3,
+  palette,
+} from '@mongodb-js/compass-components';
+import { AISignInImageBanner } from './ai-signin-banner-image';
+import { closeOptInModal, optIn } from '../store/atlas-optin-reducer';
+import type { RootState } from '../store/atlas-ai-store';
+import { usePreference } from 'compass-preferences-model/provider';
+
+const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
+
+type OptInModalProps = {
+  isOptInModalVisible: boolean;
+  isOptInInProgress: 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 disclaimer = css({
+  color: palette.gray.dark1,
+  marginTop: spacing[400],
+  marginLeft: spacing[800],
+  marginRight: spacing[800],
+});
+
+const banner = css({
+  padding: spacing[400],
+  marginTop: spacing[400],
+  textAlign: 'left',
+});
+
+const featureStatusBannerVariant = (pIsOrgAiEnabled: boolean) => {
+  switch (true) {
+    case pIsOrgAiEnabled:
+      return 'info';
+    default:
+      return 'warning';
+  }
+};
+
+function getFeatureStatusBannerText(pIsOrgAiEnabled: boolean) {
+  switch (true) {
+    case pIsOrgAiEnabled:
+      return 'AI features are enabled for project users with data access.';
+
+    default:
+      return 'AI features are disabled for project users.';
+  }
+}
+
+const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
+  isOptInModalVisible,
+  isOptInInProgress,
+  onOptInModalClose,
+  onOptInClick,
+  projectId,
+}) => {
+  const isOrgAiEnabled = usePreference('enableGenAIFeaturesAtlasProject');
+  const PROJECT_SETTINGS_LINK =
+    window.location.origin + '/v2/' + projectId + '#/settings/groupSettings';
+
+  return (
+    <ConfirmationModal
+      open={isOptInModalVisible}
+      onClose={onOptInModalClose}
+      title=""
+      // @ts-expect-error leafygreen only allows strings, but we need to pass icons
+      buttonText={
+        <>
+          &nbsp;Opt in to Atlas to enable
+          {isOptInInProgress && (
+            <>
+              &nbsp;
+              <SpinLoader darkMode={true}></SpinLoader>
+            </>
+          )}
+        </>
+      }
+      submitDisabled={isOrgAiEnabled}
+      onConfirm={() => {
+        if (isOptInInProgress) {
+          return;
+        }
+        onOptInClick();
+      }}
+      onCancel={onOptInModalClose}
+    >
+      <Body className={bodyStyles}>
+        <AISignInImageBanner></AISignInImageBanner>
+        <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={featureStatusBannerVariant(isOrgAiEnabled)}
+          className={banner}
+        >
+          {getFeatureStatusBannerText(isOrgAiEnabled)} Project Owners can change
+          this setting in the{' '}
+          <Link href={PROJECT_SETTINGS_LINK} target="_blank">
+            AI features
+          </Link>{' '}
+          section.
+        </Banner>
+        <div className={disclaimer}>
+          This is a feature powered by generative AI, and may give inaccurate
+          responses. Please see our{' '}
+          <Link hideExternalIcon={false} href={GEN_AI_FAQ_LINK} target="_blank">
+            FAQ
+          </Link>{' '}
+          for more information.
+        </div>
+      </Body>
+    </ConfirmationModal>
+  );
+};
+
+export default connect(
+  (state: RootState) => {
+    return {
+      isOptInModalVisible: state.optIn.isModalOpen,
+      isOptInInProgress: state.optIn.state === 'in-progress',
+    };
+  },
+  { onOptInModalClose: closeOptInModal, onOptInClick: optIn }
+)(AIOptInModal);

packages/compass-generative-ai/src/components/atlas-signin/ai-signin-modal.tsx → packages/compass-generative-ai/src/components/ai-signin-modal.tsx

@@ -11,8 +11,8 @@ import {
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import { AISignInImageBanner } from './ai-signin-banner-image';
-import type { AtlasSignInState } from '../../store/atlas-signin-reducer';
-import { closeSignInModal, signIn } from '../../store/atlas-signin-reducer';
+import { closeSignInModal, signIn } from '../store/atlas-signin-reducer';
+import type { RootState } from '../store/atlas-ai-store';
 
 const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
 
@@ -100,10 +100,10 @@ const AISignInModal: React.FunctionComponent<SignInModalProps> = ({
 };
 
 export default connect(
-  (state: AtlasSignInState) => {
+  (state: RootState) => {
     return {
-      isSignInModalVisible: state.isModalOpen,
-      isSignInInProgress: state.state === 'in-progress',
+      isSignInModalVisible: state.signIn.isModalOpen,
+      isSignInInProgress: state.signIn.state === 'in-progress',
     };
   },
   { onSignInModalClose: closeSignInModal, onSignInClick: signIn }

packages/compass-generative-ai/src/components/index.ts

@@ -3,4 +3,4 @@ export {
   AIExperienceEntry,
   createAIPlaceholderHTMLPlaceholder,
 } from './ai-experience-entry';
-export { AtlasSignIn } from './atlas-signin';
+export { AtlasAiPlugin } from './plugin';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import AISignInModal from './ai-signin-modal';
+import AIOptInModal from './ai-optin-modal';
+import { ConfirmationModalArea } from '@mongodb-js/compass-components';
+
+export interface AtlasAiPluginProps {
+  projectId: string;
+}
+
+export const AtlasAiPlugin: React.FunctionComponent<AtlasAiPluginProps> = ({
+  projectId,
+}) => {
+  return (
+    <ConfirmationModalArea>
+      <AISignInModal></AISignInModal>
+      <AIOptInModal projectId={projectId}></AIOptInModal>
+    </ConfirmationModalArea>
+  );
+};

packages/compass-generative-ai/src/index.ts

@@ -1,17 +1,54 @@
+import type { ActivateHelpers } from 'hadron-app-registry';
 import { registerHadronPlugin } from 'hadron-app-registry';
 import { atlasAuthServiceLocator } from '@mongodb-js/atlas-service/provider';
 
-import { activatePlugin } from './store/atlas-signin-store';
-import { AtlasSignIn } from './components';
+import { AtlasAiPlugin } from './components';
+import { atlasAiServiceLocator } from './provider';
+import { preferencesLocator } from 'compass-preferences-model/provider';
+import type {
+  CompassGenerativeAIServiceStore,
+  CompassGenerativeAIExtraArgs,
+} from './store/atlas-ai-store';
+import { configureStore } from './store/atlas-ai-store';
+import {
+  atlasServiceSignedOut,
+  atlasServiceSignedIn,
+  atlasServiceSignInTokenRefreshFailed,
+} from './store/atlas-signin-reducer';
+import type { AtlasAiPluginProps } from './components/plugin';
+
+let store: CompassGenerativeAIServiceStore;
+
+export function activatePlugin(
+  _initialProps: AtlasAiPluginProps,
+  services: CompassGenerativeAIExtraArgs,
+  { cleanup }: ActivateHelpers
+) {
+  store = configureStore(services);
+  services.atlasAuthService.on('signed-in', () => {
+    void store.dispatch(atlasServiceSignedIn());
+  });
+
+  services.atlasAuthService.on('signed-out', () => {
+    void store.dispatch(atlasServiceSignedOut());
+  });
+
+  services.atlasAuthService.on('token-refresh-failed', () => {
+    void store.dispatch(atlasServiceSignInTokenRefreshFailed());
+  });
+  return { store, deactivate: cleanup };
+}
 
 export const CompassGenerativeAIPlugin = registerHadronPlugin(
   {
     name: 'CompassGenerativeAI',
-    component: AtlasSignIn,
+    component: AtlasAiPlugin,
     activate: activatePlugin,
   },
   {
     atlasAuthService: atlasAuthServiceLocator,
+    atlasAiService: atlasAiServiceLocator,
+    preferences: preferencesLocator,
   }
 );
 

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

@@ -0,0 +1,43 @@
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import thunk from 'redux-thunk';
+import signInReducer from './atlas-signin-reducer';
+import optInReducer from './atlas-optin-reducer';
+import type { AtlasAuthService } from '@mongodb-js/atlas-service/provider';
+import type { AtlasAiService } from '../atlas-ai-service';
+import type { PreferencesAccess } from 'compass-preferences-model';
+
+let store: CompassGenerativeAIServiceStore;
+export function getStore() {
+  if (!store) {
+    throw new Error('CompassGenerativeAIPlugin not activated');
+  }
+  return store;
+}
+const reducer = combineReducers({
+  signIn: signInReducer,
+  optIn: optInReducer,
+});
+
+export type RootState = ReturnType<typeof reducer>;
+
+export type CompassGenerativeAIExtraArgs = {
+  atlasAuthService: AtlasAuthService;
+  atlasAiService: AtlasAiService;
+  preferences: PreferencesAccess;
+};
+
+export function configureStore({
+  atlasAuthService,
+  atlasAiService,
+  preferences,
+}: CompassGenerativeAIExtraArgs) {
+  const store = createStore(
+    reducer,
+    applyMiddleware(
+      thunk.withExtraArgument({ atlasAuthService, atlasAiService, preferences })
+    )
+  );
+  return store;
+}
+
+export type CompassGenerativeAIServiceStore = ReturnType<typeof configureStore>;