avoid cyclical dep

kpamaran · kpamaran · commit e411dd94ace6 · 2025-09-11T12:07:19.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-collection/package.json b/packages/compass-collection/package.json
@@ -52,7 +52,6 @@
     "@mongodb-js/compass-app-stores": "^7.59.0",
     "@mongodb-js/compass-components": "^1.51.0",
     "@mongodb-js/compass-connections": "^1.73.0",
-    "@mongodb-js/compass-crud": "^13.72.1",
     "@mongodb-js/compass-generative-ai": "^0.53.0",
     "@mongodb-js/compass-logging": "^1.7.14",
     "@mongodb-js/compass-telemetry": "^1.15.0",
diff --git a/packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx b/packages/compass-collection/src/components/mock-data-generator-modal/raw-schema-confirmation-screen.tsx
@@ -8,25 +8,31 @@ import {
   Banner,
   BannerVariant,
   Body,
+  DocumentList,
 } from '@mongodb-js/compass-components';
 
 import { usePreference } from 'compass-preferences-model/provider';
 import toSimplifiedFieldInfo from './to-simplified-field-info';
 import type { CollectionState } from '../../modules/collection-tab';
 import type { SchemaAnalysisState } from '../../schema-analysis-types';
 import type { MockDataGeneratorState } from './types';
-import { Document } from '@mongodb-js/compass-crud';
+import HadronDocument from 'hadron-document';
 
 interface RawSchemaConfirmationScreenProps {
   schemaAnalysis: SchemaAnalysisState;
   fakerSchemaGenerationStatus: MockDataGeneratorState['status'];
 }
 
-const documentContainerStyles = css({
-  backgroundColor: palette.gray.light3,
-  border: `1px solid ${palette.gray.light2}`,
-  borderRadius: spacing[400],
-});
+// note: the "> div" selector works around the lack of a className prop on HadronDocument
+const documentContainerStyles = css`
+  background-color: ${palette.gray.light3};
+  border: 1px solid ${palette.gray.light2};
+  border-radius: ${spacing[400]}px;
+
+  > div {
+    padding: ${spacing[400]}px ${spacing[900]}px;
+  }
+`;
 
 const descriptionStyles = css({
   marginBottom: spacing[200],
@@ -65,12 +71,14 @@ const RawSchemaConfirmationScreen = ({
           </Body>
           <Body className={descriptionStyles}>{descriptionText}</Body>
           <div className={documentContainerStyles}>
-            <Document
+            <DocumentList.Document
               editable={false}
-              doc={
-                enableSampleDocumentPassing
-                  ? schemaAnalysis.sampleDocument
-                  : toSimplifiedFieldInfo(schemaAnalysis.processedSchema)
+              value={
+                new HadronDocument(
+                  enableSampleDocumentPassing
+                    ? schemaAnalysis.sampleDocument
+                    : toSimplifiedFieldInfo(schemaAnalysis.processedSchema)
+                )
               }
             />
           </div>
