implement raw schema confirmation screen

Author: kpamaran

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

@@ -1,12 +1,12 @@
 import React from 'react';
 
 // TODO: More to come from CLOUDP-333853, CLOUDP-333854
-const FakerSchemaEditor = () => {
+const FakerSchemaEditorScreen = () => {
   return (
     <div data-testid="faker-schema-editor">
       Schema Editor Content Placeholder
     </div>
   );
 };
 
-export default FakerSchemaEditor;
+export default FakerSchemaEditorScreen;

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

@@ -222,7 +222,8 @@ describe('MockDataGeneratorModal', () => {
         expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
       });
 
-      // todo: assert a user-friendly error is displayed (CLOUDP-333852)
+      expect(screen.getByText('LLM Request failed. Please confirm again.')).to
+        .exist;
     });
 
     // todo: assert that closing then re-opening the modal after an LLM err removes the err message

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

@@ -21,8 +21,8 @@ import {
   generateFakerMappings,
   mockDataGeneratorPreviousButtonClicked,
 } from '../../modules/collection-tab';
-import { default as SchemaConfirmationScreen } from './raw-schema-confirmation';
-import FakerSchemaEditor from './faker-schema-editor';
+import RawSchemaConfirmationScreen from './raw-schema-confirmation-screen';
+import FakerSchemaEditor from './faker-schema-editor-screen';
 
 const footerStyles = css`
   flex-direction: row;
@@ -65,7 +65,7 @@ const MockDataGeneratorModal = ({
   let stepContent: React.ReactNode;
 
   if (currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION) {
-    stepContent = <SchemaConfirmationScreen />;
+    stepContent = <RawSchemaConfirmationScreen />;
   }
 
   if (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR) {

packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import {
+  css,
+  palette,
+  spacing,
+  Banner,
+  BannerVariant,
+  Code,
+  Body,
+  Subtitle,
+} from '@mongodb-js/compass-components';
+
+import { usePreference } from 'compass-preferences-model/provider';
+import toUserFriendlyFieldInfo from './to-user-friendly-field-info';
+import type { CollectionState } from '../../modules/collection-tab';
+import type { SchemaAnalysisState } from '../../schema-analysis-types';
+import type { MockDataGeneratorState } from './types';
+
+interface RawSchemaConfirmationScreenProps {
+  schemaAnalysis: SchemaAnalysisState;
+  namespace: string;
+  fakerSchemaGenerationStatus: MockDataGeneratorState['status'];
+}
+
+const namespaceStyles = css({
+  marginTop: spacing[100],
+  marginBottom: spacing[500],
+});
+
+const headingStyles = css({
+  marginBottom: spacing[100],
+});
+
+const descriptionStyles = css({
+  marginBottom: spacing[300],
+});
+
+const codeStyles = css({
+  maxHeight: '30vh',
+});
+
+const errorBannerStyles = css({
+  marginTop: spacing[400],
+});
+
+const errorBannerTextStyles = css({
+  color: palette.red.dark2,
+});
+
+// Note: Currently a placeholder. The final contents will be addressed by CLOUDP-333852
+const RawSchemaConfirmationScreen = (
+  props: RawSchemaConfirmationScreenProps
+) => {
+  let enableSampleDocumentPassing = usePreference(
+    'enableGenAISampleDocumentPassing'
+  );
+
+  const subtitleText = enableSampleDocumentPassing
+    ? 'Sample Documents Collected'
+    : 'Document Schema Identified';
+
+  const descriptionText = enableSampleDocumentPassing
+    ? 'A sample of document values from your collection will be sent to an LLM for processing.'
+    : 'We have identified the following schema from your documents. This schema will be sent to an LLM for processing.';
+
+  // todo: should establish if unfinished schema analysis edge case should be handled within the modal or
+  // from the button opening the modal
+  const schemaAnalysisIncompletePlaceholder = (
+    <Body>Schema analysis has yet to complete successfully.</Body>
+  );
+
+  return (
+    <div data-testid="raw-schema-confirmation">
+      {props.schemaAnalysis.status === 'complete' ? (
+        <>
+          <Body className={namespaceStyles}>{props.namespace}</Body>
+          <Body
+            as="h2"
+            className={headingStyles}
+            baseFontSize={16}
+            weight="medium"
+          >
+            {subtitleText}
+          </Body>
+          <Body className={descriptionStyles}>{descriptionText}</Body>
+          <Code language="javascript" copyable={false} className={codeStyles}>
+            {enableSampleDocumentPassing
+              ? JSON.stringify(props.schemaAnalysis.sampleDocument, null, 4)
+              : JSON.stringify(
+                  toUserFriendlyFieldInfo(props.schemaAnalysis.processedSchema),
+                  null,
+                  4
+                )}
+          </Code>
+          {props.fakerSchemaGenerationStatus === 'error' && (
+            <Banner
+              variant={BannerVariant.Danger}
+              className={errorBannerStyles}
+            >
+              <Body className={errorBannerTextStyles}>
+                LLM Request failed. Please confirm again.
+              </Body>
+            </Banner>
+          )}
+        </>
+      ) : (
+        schemaAnalysisIncompletePlaceholder
+      )}
+    </div>
+  );
+};
+
+const mapStateToProps = (state: CollectionState) => {
+  const schemaAnalysis = state.schemaAnalysis;
+  const fakerSchemaGenerationStatus = state.fakerSchemaGeneration.status;
+
+  return {
+    schemaAnalysis,
+    namespace: state.namespace,
+    fakerSchemaGenerationStatus,
+  };
+};
+
+const ConnectedRawSchemaConfirmationScreen = connect(
+  mapStateToProps,
+  {}
+)(RawSchemaConfirmationScreen);
+
+export default ConnectedRawSchemaConfirmationScreen;

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

@@ -0,0 +1,56 @@
+import { processSchema } from '../../transform-schema-to-field-info';
+import type { FieldInfo } from '../../schema-analysis-types';
+
+type UserFriendlyFieldInfoNode =
+  | { [field: string]: UserFriendlyFieldInfoNode }
+  | FieldInfo['type'];
+export type UserFriendlyFieldInfoTree = {
+  [field: string]: UserFriendlyFieldInfoNode;
+};
+
+/**
+ * Usage is for display purposes only. The result is derived from the work of `processSchema`,
+ * instead of directly derived from the `Schema` type from `mongodb-schema`, ensuring that what
+ * the user sees in `RawSchemaConfirmationScreen` is constrained to what the LLM processes.
+ */
+export default function toUserFriendlyFieldInfo(
+  input: ReturnType<typeof processSchema>
+): UserFriendlyFieldInfoTree {
+  // ensure parent nodes are created before their children
+  const sortedFieldPaths = Object.keys(input).sort(
+    (f1, f2) => countSeparators(f1) - countSeparators(f2)
+  );
+
+  // Assumes "." and "[]" placement is valid
+  const result: UserFriendlyFieldInfoTree = {};
+  for (const path of sortedFieldPaths) {
+    const fieldParts = path.split('.');
+
+    let node = result;
+    for (let i = 0; i < fieldParts.length; i++) {
+      const part = fieldParts[i];
+
+      if (i === fieldParts.length - 1) {
+        node[part] = input[path].type;
+        break;
+      }
+
+      if (typeof node[part] !== 'object' || node[part] === null) {
+        node[part] = {};
+      }
+      node = node[part];
+    }
+  }
+  return result;
+}
+
+/**
+ * note: assumes `processSchema` constructs field paths in this manner:
+ * - 1+ "[]" can only appear at the end of field paths
+ * - field keys do not contain "." or "[]"
+ */
+function countSeparators(input: string): number {
+  const c1 = input.split('.').length - 1;
+  const c2 = input.split('[]').length - 1;
+  return c1 + c2;
+}