chore(settings): use sandbox preference for showing ai settings COMPASS-7800 (#5691)

Author: Anemy

packages/compass-settings/src/components/modal.tsx

@@ -20,17 +20,15 @@ import Sidebar from './sidebar';
 import { saveSettings, closeModal } from '../stores/settings';
 import type { RootState } from '../stores';
 import { getUserInfo } from '../stores/atlas-login';
-import {
-  useIsAIFeatureEnabled,
-  useHasAIFeatureCloudRolloutAccess,
-} from 'compass-preferences-model/provider';
+import { useHasAIFeatureCloudRolloutAccess } from 'compass-preferences-model/provider';
 
 type Settings = {
   name: string;
   component: React.ComponentType;
 };
 
 type SettingsModalProps = {
+  isAIFeatureEnabled: boolean;
   isOpen: boolean;
   isOIDCEnabled: boolean;
   onMount?: () => void;
@@ -60,14 +58,14 @@ const settingsStyles = css(
 );
 
 export const SettingsModal: React.FunctionComponent<SettingsModalProps> = ({
+  isAIFeatureEnabled,
   isOpen,
   onMount,
   onClose,
   onSave,
   isOIDCEnabled,
   hasChangedSettings,
 }) => {
-  const aiFeatureEnabled = useIsAIFeatureEnabled();
   const aiFeatureHasCloudRolloutAccess = useHasAIFeatureCloudRolloutAccess();
   const onMountRef = useRef(onMount);
 
@@ -84,7 +82,7 @@ export const SettingsModal: React.FunctionComponent<SettingsModalProps> = ({
   if (
     isOIDCEnabled ||
     // because oidc options overlap with atlas login used for ai feature
-    aiFeatureEnabled
+    isAIFeatureEnabled
   ) {
     settings.push({
       name: 'OIDC (Preview)',
@@ -151,6 +149,7 @@ export default connect(
     return {
       isOpen:
         state.settings.isModalOpen && state.settings.loadingState === 'ready',
+      isAIFeatureEnabled: !!state.settings.settings.enableGenAIFeatures,
       isOIDCEnabled: !!state.settings.settings.enableOidc,
       hasChangedSettings: state.settings.updatedFields.length > 0,
     };

packages/compass-settings/src/components/settings/gen-ai-settings.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
+import { css, spacing } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+
+import type { RootState } from '../../stores';
 import SettingsList from './settings-list';
-import { useIsAIFeatureEnabled } from 'compass-preferences-model/provider';
 import { ConnectedAtlasLoginSettings } from './atlas-login';
-import { css, spacing } from '@mongodb-js/compass-components';
 
 const atlasSettingsContainerStyles = css({
   marginTop: spacing[3],
 });
 
-export const GenAISettings: React.FunctionComponent = () => {
-  const aiFeatureEnabled = useIsAIFeatureEnabled();
-
+export const GenAISettings: React.FunctionComponent<{
+  isAIFeatureEnabled: boolean;
+}> = ({ isAIFeatureEnabled }) => {
   return (
     <div data-testid="gen-ai-settings">
       <div>
@@ -20,7 +22,7 @@ export const GenAISettings: React.FunctionComponent = () => {
       </div>
       <SettingsList fields={['enableGenAIFeatures']} />
 
-      {aiFeatureEnabled && (
+      {isAIFeatureEnabled && (
         <>
           <div className={atlasSettingsContainerStyles}>
             <ConnectedAtlasLoginSettings></ConnectedAtlasLoginSettings>
@@ -32,4 +34,8 @@ export const GenAISettings: React.FunctionComponent = () => {
   );
 };
 
-export default GenAISettings;
+const mapState = (state: RootState) => ({
+  isAIFeatureEnabled: !!state.settings.settings.enableGenAIFeatures,
+});
+
+export default connect(mapState, null)(GenAISettings);