chore(compass-collection): Mock data generator design items CLOUDP-352955 (#7500)

* Mock data generator compass design items

Author: kylelai1

packages/compass-collection/src/components/mock-data-generator-modal/faker-schema-editor-screen.tsx

@@ -61,7 +61,7 @@ const FakerSchemaEditorContent = ({
   onSchemaConfirmed,
 }: {
   fakerSchema: FakerSchema;
-  onSchemaConfirmed: (isConfirmed: boolean) => void;
+  onSchemaConfirmed: () => void;
 }) => {
   const track = useTelemetry();
   const [fakerSchemaFormValues, setFakerSchemaFormValues] =
@@ -86,10 +86,6 @@ const FakerSchemaEditorContent = ({
   const activeFakerFunction = fakerSchemaFormValues[activeField]?.fakerMethod;
   const activeFakerArgs = fakerSchemaFormValues[activeField]?.fakerArgs;
 
-  const resetIsSchemaConfirmed = () => {
-    onSchemaConfirmed(false);
-  };
-
   const onJsonTypeSelect = (newJsonType: MongoDBFieldType) => {
     const currentMapping = fakerSchemaFormValues[activeField];
     const originalLlmMapping = originalLlmMappings.current[activeField];
@@ -124,7 +120,6 @@ const FakerSchemaEditorContent = ({
         ...fakerSchemaFormValues,
         [activeField]: newMapping,
       });
-      resetIsSchemaConfirmed();
     }
   };
 
@@ -159,7 +154,6 @@ const FakerSchemaEditorContent = ({
         ...fakerSchemaFormValues,
         [activeField]: newMapping,
       });
-      resetIsSchemaConfirmed();
     }
   };
 
@@ -170,6 +164,7 @@ const FakerSchemaEditorContent = ({
           activeField={activeField}
           fields={fieldPaths}
           onFieldSelect={setActiveField}
+          fakerSchema={fakerSchemaFormValues}
         />
         {activeJsonType && activeFakerFunction && (
           <FakerMappingSelector
@@ -185,7 +180,7 @@ const FakerSchemaEditorContent = ({
         size={ButtonSize.Small}
         className={confirmMappingsButtonStyles}
         variant={ButtonVariant.Primary}
-        onClick={() => onSchemaConfirmed(true)}
+        onClick={onSchemaConfirmed}
       >
         Confirm mappings
       </Button>
@@ -197,7 +192,7 @@ const FakerSchemaEditorScreen = ({
   onSchemaConfirmed,
   fakerSchemaGenerationState,
 }: {
-  onSchemaConfirmed: (isConfirmed: boolean) => void;
+  onSchemaConfirmed: () => void;
   fakerSchemaGenerationState: MockDataGeneratorState;
 }) => {
   return (

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx

@@ -405,6 +405,30 @@ describe('MockDataGeneratorModal', () => {
       expect(screen.getByTestId('faker-schema-editor-loader')).to.exist;
     });
 
+    it('the next button is disabled when the faker schema generation is in progress', async () => {
+      const mockServices = createMockServices();
+      mockServices.atlasAiService.getMockDataSchema = () =>
+        new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve({
+                fields: [],
+              }),
+            1
+          )
+        );
+
+      await renderModal({ mockServices });
+
+      // advance to the schema editor step
+      userEvent.click(screen.getByText('Confirm'));
+      expect(screen.getByTestId('faker-schema-editor-loader')).to.exist;
+
+      expect(
+        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
+      ).to.equal('true');
+    });
+
     it('shows the faker schema editor when the faker schema generation is completed', async () => {
       await renderModal({
         mockServices: mockServicesWithMockDataResponse,
@@ -684,95 +708,25 @@ describe('MockDataGeneratorModal', () => {
       expect(screen.queryByText(/100000/)).to.not.exist;
     });
 
-    it('disables the Next button when the faker schema mapping is not confirmed', async () => {
+    it('clicking the confirm schema mapping button advances to the document count step', async () => {
       await renderModal({
         mockServices: mockServicesWithMockDataResponse,
         schemaAnalysis: mockSchemaAnalysis,
       });
 
       // advance to the schema editor step
       userEvent.click(screen.getByText('Confirm'));
-      await waitFor(() => {
-        expect(screen.getByTestId('faker-schema-editor')).to.exist;
-      });
-
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('true');
-    });
 
-    it('resets the confirm schema mapping state when the user clicks the back button then goes back to the schema editor step', async () => {
-      await renderModal({
-        mockServices: mockServicesWithMockDataResponse,
-        schemaAnalysis: mockSchemaAnalysis,
-      });
-
-      // advance to the schema editor step
-      userEvent.click(screen.getByText('Confirm'));
       await waitFor(() => {
         expect(screen.getByTestId('faker-schema-editor')).to.exist;
       });
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('true');
-      // click confirm mappings button
-      userEvent.click(screen.getByText('Confirm mappings'));
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('false');
-
-      // click back button
-      userEvent.click(screen.getByText('Back'));
-      await waitFor(() => {
-        expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
-      });
-
-      // click next button to advance to the schema editor step again
-      userEvent.click(screen.getByTestId('next-step-button'));
-      await waitFor(() => {
-        expect(screen.getByTestId('faker-schema-editor')).to.exist;
-      });
-      // the next button should be disabled again
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('true');
-    });
-
-    it('preserves the confirm schema mapping state when the user clicks the next button then goes back to the schema editor step', async () => {
-      await renderModal({
-        mockServices: mockServicesWithMockDataResponse,
-        schemaAnalysis: mockSchemaAnalysis,
-      });
 
-      // advance to the schema editor step
-      userEvent.click(screen.getByText('Confirm'));
-      await waitFor(() => {
-        expect(screen.getByTestId('faker-schema-editor')).to.exist;
-      });
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('true');
-      // click confirm mappings button
       userEvent.click(screen.getByText('Confirm mappings'));
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('false');
-
-      // click next button
-      userEvent.click(screen.getByTestId('next-step-button'));
-      await waitFor(() => {
-        expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
-      });
 
-      // click back button to go back to the schema editor step
-      userEvent.click(screen.getByText('Back'));
       await waitFor(() => {
-        expect(screen.getByTestId('faker-schema-editor')).to.exist;
+        expect(screen.getByText('Specify Number of Documents to Generate')).to
+          .exist;
       });
-      // the next button should not be disabled
-      expect(
-        screen.getByTestId('next-step-button').getAttribute('aria-disabled')
-      ).to.equal('false');
     });
 
     it('fires a track event when the user changes the JSON field type', async () => {

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx

@@ -76,8 +76,6 @@ const MockDataGeneratorModal = ({
   namespace,
   fakerSchemaGenerationState,
 }: Props) => {
-  const [isSchemaConfirmed, setIsSchemaConfirmed] =
-    React.useState<boolean>(false);
   const [documentCount, setDocumentCount] = React.useState<number>(
     DEFAULT_DOCUMENT_COUNT
   );
@@ -94,7 +92,7 @@ const MockDataGeneratorModal = ({
       case MockDataGeneratorStep.SCHEMA_EDITOR:
         return (
           <FakerSchemaEditorScreen
-            onSchemaConfirmed={setIsSchemaConfirmed}
+            onSchemaConfirmed={onNextStep}
             fakerSchemaGenerationState={fakerSchemaGenerationState}
           />
         );
@@ -123,6 +121,7 @@ const MockDataGeneratorModal = ({
     fakerSchemaGenerationState,
     documentCount,
     setDocumentCount,
+    onNextStep,
   ]);
 
   useEffect(() => {
@@ -133,7 +132,7 @@ const MockDataGeneratorModal = ({
 
   const isNextButtonDisabled =
     (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR &&
-      !isSchemaConfirmed) ||
+      fakerSchemaGenerationState.status !== 'completed') ||
     (currentStep === MockDataGeneratorStep.DOCUMENT_COUNT &&
       documentCount < 1) ||
     (currentStep === MockDataGeneratorStep.DOCUMENT_COUNT &&
@@ -158,14 +157,6 @@ const MockDataGeneratorModal = ({
   const shouldShowNamespace =
     currentStep !== MockDataGeneratorStep.GENERATE_DATA;
 
-  const handlePreviousClick = () => {
-    if (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR) {
-      // reset isSchemaConfirmed state when previous step is clicked
-      setIsSchemaConfirmed(false);
-    }
-    onPreviousStep();
-  };
-
   const onModalClose = useCallback(() => {
     track('Mock Data Generator Dismissed', {
       screen: currentStep,
@@ -203,7 +194,7 @@ const MockDataGeneratorModal = ({
       </ModalBody>
       <ModalFooter className={footerStyles}>
         <Button
-          onClick={handlePreviousClick}
+          onClick={onPreviousStep}
           disabled={currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION}
         >
           Back

packages/compass-collection/src/components/mock-data-generator-modal/schema-field-selector.tsx

@@ -6,7 +6,10 @@ import {
   palette,
   useDarkMode,
   Body,
+  Icon,
 } from '@mongodb-js/compass-components';
+import { UNRECOGNIZED_FAKER_METHOD } from '../../modules/collection-tab';
+import type { FakerSchema } from './types';
 
 const fieldsContainerStyles = css({
   width: '40%',
@@ -30,6 +33,9 @@ const buttonStyles = css({
   padding: spacing[200],
   textAlign: 'left',
   fontWeight: 500,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
 });
 
 const activeStylesLight = css({
@@ -73,12 +79,23 @@ type SidebarProps = {
   activeField: string;
   onFieldSelect: (field: string) => void;
   fields: Array<string>;
+  fakerSchema?: FakerSchema;
+};
+
+const shouldShowUnrecognizedIcon = (
+  field: string,
+  fakerSchema?: FakerSchema
+): boolean => {
+  const mapping = fakerSchema?.[field];
+
+  return !!mapping && mapping.fakerMethod === UNRECOGNIZED_FAKER_METHOD;
 };
 
 const FieldSelector: React.FunctionComponent<SidebarProps> = ({
   activeField,
   fields,
   onFieldSelect,
+  fakerSchema,
 }) => {
   const darkMode = useDarkMode();
 
@@ -109,6 +126,9 @@ const FieldSelector: React.FunctionComponent<SidebarProps> = ({
             onClick={() => onFieldSelect(field)}
           >
             {field}
+            {shouldShowUnrecognizedIcon(field, fakerSchema) && (
+              <Icon glyph="ImportantWithCircle" />
+            )}
           </button>
         ))}
       </div>

packages/compass-collection/src/components/mock-data-generator-modal/script-generation-utils.ts

@@ -708,7 +708,7 @@ function generateFakerValue(
   mapping: FakerFieldMapping
 ): string | number | boolean | Date | null | undefined {
   const method =
-    mapping.fakerMethod === 'unrecognized'
+    mapping.fakerMethod === UNRECOGNIZED_FAKER_METHOD
       ? getDefaultFakerMethod(mapping.mongoType)
       : mapping.fakerMethod;