fix(compass-collection): Mock Data Generator QA items - CLOUDP-356791 (#7554)

ckramer10 · web-flow · commit 0afd9654f122 · 2025-11-12T11:26:48.000-05:00
* Mock Data Generator QA items

* Update styling

* cleanup
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/document-count-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/document-count-screen.tsx
@@ -2,7 +2,7 @@ import {
   Body,
   compactBytes,
   css,
-  palette,
+  Description,
   spacing,
   TextInput,
 } from '@mongodb-js/compass-components';
@@ -21,7 +21,6 @@ const titleStyles = css({
 });
 
 const descriptionStyles = css({
-  color: palette.gray.dark1,
   fontStyle: 'italic',
 });
 
@@ -107,9 +106,9 @@ const DocumentCountScreen = ({
       <Body className={titleStyles}>
         Specify Number of Documents to Generate
       </Body>
-      <Body className={descriptionStyles}>
+      <Description className={descriptionStyles}>
         Indicate the amount of documents you want to generate below.
-      </Body>
+      </Description>
       <div className={inputContainerStyles}>
         <TextInput
           label="Documents to generate in current collection"
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/faker-mapping-selector.tsx
@@ -6,7 +6,6 @@ import {
   css,
   Label,
   Option,
-  palette,
   Select,
   spacing,
 } from '@mongodb-js/compass-components';
@@ -27,7 +26,6 @@ const fieldMappingSelectorsStyles = css({
 });
 
 const labelStyles = css({
-  color: palette.gray.dark1,
   fontWeight: 600,
 });
 
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx
@@ -1,11 +1,8 @@
 import {
-  Body,
-  Button,
-  ButtonSize,
-  ButtonVariant,
   css,
+  Description,
+  H3,
   Link,
-  palette,
   spacing,
   SpinLoaderWithLabel,
 } from '@mongodb-js/compass-components';
@@ -35,21 +32,12 @@ const innerEditorStyles = css({
 });
 
 const titleStyles = css({
-  color: palette.black,
   fontWeight: 600,
   fontSize: '16px',
   lineHeight: '20px',
   marginBottom: 0,
 });
 
-const bodyStyles = css({
-  color: palette.gray.dark1,
-});
-
-const confirmMappingsButtonStyles = css({
-  width: '200px',
-});
-
 const schemaEditorLoaderStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -58,10 +46,8 @@ const schemaEditorLoaderStyles = css({
 
 const FakerSchemaEditorContent = ({
   fakerSchema,
-  onSchemaConfirmed,
 }: {
   fakerSchema: FakerSchema;
-  onSchemaConfirmed: () => void;
 }) => {
   const track = useTelemetry();
   const [fakerSchemaFormValues, setFakerSchemaFormValues] =
@@ -176,38 +162,29 @@ const FakerSchemaEditorContent = ({
           />
         )}
       </div>
-      <Button
-        size={ButtonSize.Small}
-        className={confirmMappingsButtonStyles}
-        variant={ButtonVariant.Primary}
-        onClick={onSchemaConfirmed}
-      >
-        Confirm mappings
-      </Button>
     </>
   );
 };
 
 const FakerSchemaEditorScreen = ({
-  onSchemaConfirmed,
   fakerSchemaGenerationState,
 }: {
-  onSchemaConfirmed: () => void;
   fakerSchemaGenerationState: MockDataGeneratorState;
 }) => {
   return (
     <div data-testid="faker-schema-editor" className={containerStyles}>
       <div>
-        <h3 className={titleStyles}>
+        <H3 className={titleStyles}>
           Confirm Field to Faker Function Mappings
-        </h3>
-        <Body className={bodyStyles}>
-          We have sampled your collection and created a schema based on your
-          documents. That schema has been sent to an LLM and it has returned the
-          following mapping between your schema fields and{' '}
-          <Link href="https://fakerjs.dev/api/faker.html">faker functions</Link>
-          .
-        </Body>
+        </H3>
+        <Description>
+          We analyzed a sample of your data and used generative AI to suggest
+          the following mapping between your document fields and data simulation
+          functions.{' '}
+          <Link href="https://www.mongodb.com/docs/generative-ai-faq/?utm_source=compass&utm_medium=product">
+            Learn more about MongoDB’s AI usage
+          </Link>
+        </Description>
       </div>
       {fakerSchemaGenerationState.status === 'in-progress' && (
         <div
@@ -220,7 +197,6 @@ const FakerSchemaEditorScreen = ({
       {fakerSchemaGenerationState.status === 'completed' && (
         <FakerSchemaEditorContent
           fakerSchema={fakerSchemaGenerationState.editedFakerSchema}
-          onSchemaConfirmed={onSchemaConfirmed}
         />
       )}
     </div>
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx
@@ -725,7 +725,7 @@ describe('MockDataGeneratorModal', () => {
         expect(screen.getByTestId('faker-schema-editor')).to.exist;
       });
 
-      userEvent.click(screen.getByText('Confirm mappings'));
+      userEvent.click(screen.getByText('Next'));
 
       await waitFor(() => {
         expect(screen.getByText('Specify Number of Documents to Generate')).to
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx
@@ -96,7 +96,6 @@ const MockDataGeneratorModal = ({
       case MockDataGeneratorStep.SCHEMA_EDITOR:
         return (
           <FakerSchemaEditorScreen
-            onSchemaConfirmed={onNextStep}
             fakerSchemaGenerationState={fakerSchemaGenerationState}
           />
         );
@@ -125,7 +124,6 @@ const MockDataGeneratorModal = ({
     fakerSchemaGenerationState,
     documentCount,
     onDocumentCountChange,
-    onNextStep,
   ]);
 
   useTrackOnChange(
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/schema-field-selector.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/schema-field-selector.tsx
@@ -50,8 +50,11 @@ const activeStylesLight = css({
 
 const activeStylesDark = css({
   color: palette.white,
+  backgroundColor: palette.green.dark3,
+  fontWeight: 600,
+
   '&:active,&:focus': {
-    backgroundColor: palette.gray.dark3,
+    backgroundColor: palette.green.dark3,
     color: palette.white,
   },
 });
@@ -71,7 +74,6 @@ const hoverStylesDark = css({
 });
 
 const labelStyles = css({
-  color: palette.gray.dark1,
   fontWeight: 600,
 });
 
