chore(settings): update atlas settings text and icon (#4869)

mongodb-js · Sep 19, 2023 · 61eb423 · 61eb423
1 parent 788c84c
commit 61eb423
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/packages/compass-settings/src/components/settings/atlas-login.spec.tsx b/packages/compass-settings/src/components/settings/atlas-login.spec.tsx
@@ -61,7 +61,9 @@ describe('AtlasLoginSettings', function () {
       .exist;
 
     expect(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ })
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      })
     ).to.have.attribute('aria-checked', 'false');
   });
 
@@ -92,11 +94,15 @@ describe('AtlasLoginSettings', function () {
     ).to.exist;
 
     expect(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ })
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      })
     ).to.have.attribute('aria-checked', 'false');
 
     expect(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ })
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      })
     ).to.have.attribute('disabled');
   });
 
@@ -229,11 +235,15 @@ describe('AtlasLoginSettings', function () {
     await store.dispatch(signIn());
 
     expect(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ })
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      })
     ).to.have.attribute('aria-checked', 'false');
 
     userEvent.click(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ }),
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      }),
       undefined,
       { skipPointerEventsCheck: true }
     );
@@ -242,7 +252,9 @@ describe('AtlasLoginSettings', function () {
 
     await waitFor(() => {
       expect(
-        screen.getByRole('switch', { name: /Use AI to generate queries/ })
+        screen.getByRole('switch', {
+          name: /Enable natural language prompts to generate/,
+        })
       ).to.have.attribute('aria-checked', 'true');
     });
   });
@@ -261,11 +273,15 @@ describe('AtlasLoginSettings', function () {
     await store.dispatch(signIn());
 
     expect(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ })
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      })
     ).to.have.attribute('aria-checked', 'true');
 
     userEvent.click(
-      screen.getByRole('switch', { name: /Use AI to generate queries/ }),
+      screen.getByRole('switch', {
+        name: /Enable natural language prompts to generate/,
+      }),
       undefined,
       { skipPointerEventsCheck: true }
     );
@@ -274,7 +290,9 @@ describe('AtlasLoginSettings', function () {
 
     await waitFor(() => {
       expect(
-        screen.getByRole('switch', { name: /Use AI to generate queries/ })
+        screen.getByRole('switch', {
+          name: /Enable natural language prompts to generate/,
+        })
       ).to.have.attribute('aria-checked', 'false');
     });
   });

diff --git a/packages/compass-settings/src/components/settings/atlas-login.tsx b/packages/compass-settings/src/components/settings/atlas-login.tsx
@@ -6,7 +6,6 @@ import {
   Icon,
   KeylineCard,
   Label,
-  MongoDBLogoMark,
   SpinLoader,
   Subtitle,
   Toggle,
@@ -106,10 +105,7 @@ export const AtlasLoginSettings: React.FunctionComponent<{
         )}
       >
         <Subtitle className={atlasLoginHeadingTitleStyles}>
-          <MongoDBLogoMark
-            color={darkMode ? 'white' : 'black'}
-            height={18}
-          ></MongoDBLogoMark>
+          <Icon glyph="Sparkle" />
           <span>Use Generative AI</span>
           <Badge variant="blue">Preview</Badge>
         </Subtitle>
@@ -166,8 +162,8 @@ export const AtlasLoginSettings: React.FunctionComponent<{
             htmlFor="use-ai-toggle"
             className={atlasLoginToggleControlLabelStyles}
           >
-            Use AI to generate queries and aggregations with a natural language
-            text input on the query bar and aggregation page.
+            Enable natural language prompts to generate queries and
+            aggregations.
           </Label>
         </div>
         {isSignedIn && !isAIFeatureEnabled && (