mongodb-js · Anemy · Feb 19, 2025 · Feb 14, 2025
@@ -85,7 +85,6 @@
     "lodash": "^4.17.21",
     "mongodb-ns": "^2.4.2",
     "mongodb-query-parser": "^4.3.0",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

@@ -2,8 +2,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
 
-import CompassSchemaValidation from '.';
-import { configureStore } from '../../stores/store';
+import { CompassSchemaValidation } from './compass-schema-validation';
+import { configureStore } from '../stores/store';
 import { Provider } from 'react-redux';
 
 describe('CompassSchemaValidation [Component]', function () {

@@ -0,0 +1,23 @@
+import React from 'react';
+import ValidationStates from './validation-states';
+import { css, WorkspaceContainer } from '@mongodb-js/compass-components';
+
+const styles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  height: '100%',
+});
+
+/**
+ * The core schema validation component.
+ */
+export function CompassSchemaValidation() {
+  return (
+    <div className={styles} data-testid="compass-schema-validation">
+      <WorkspaceContainer>
+        <ValidationStates />
+      </WorkspaceContainer>
+    </div>
+  );
+}
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
 
-import DocumentPreview from '.';
+import { DocumentPreview } from './document-preview';
 
 describe('DocumentPreview [Component]', function () {
   context('when document loading state is initial', function () {

@@ -0,0 +1,105 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  Body,
+  KeylineCard,
+  css,
+  cx,
+  spacing,
+  Button,
+} from '@mongodb-js/compass-components';
+import { Document } from '@mongodb-js/compass-crud';
+
+import { LoadingOverlay } from './loading-overlay';
+import type { DOCUMENT_LOADING_STATES } from '../modules/sample-documents';
+import {
+  fetchValidDocument,
+  fetchInvalidDocument,
+} from '../modules/sample-documents';
+import type { RootState } from '../modules';
+
+const previewStyles = css({
+  display: 'flex',
+  height: spacing[6] * 3,
+  padding: 0,
+  overflow: 'auto',
+  position: 'relative',
+});
+
+const noPreviewStyles = css({
+  alignItems: 'center',
+});
+
+const loadSampleStyles = css({
+  width: '100%',
+  textAlign: 'center',
+});
+
+const noPreviewTextStyles = css({
+  padding: spacing[3],
+  textAlign: 'center',
+  fontStyle: 'italic',
+  width: '100%',
+});
+
+function DocumentPreview({
+  document,
+  loadingState,
+  onLoadSampleClick,
+}: {
+  document?: Record<string, unknown>;
+  loadingState: DOCUMENT_LOADING_STATES;
+  onLoadSampleClick?: () => void;
+}) {
+  return (
+    <KeylineCard
+      className={cx(previewStyles, document ? undefined : noPreviewStyles)}
+      data-testid="document-preview"
+    >
+      {loadingState === 'initial' ? (
+        <Body as="div" className={loadSampleStyles}>
+          <Button
+            data-testid="load-sample-document"
+            size="small"
+            onClick={onLoadSampleClick}
+          >
+            Load document
+          </Button>
+        </Body>
+      ) : loadingState === 'loading' ? (
+        <LoadingOverlay />
+      ) : document ? (
+        <Document doc={document} editable={false} />
+      ) : (
+        <Body
+          data-testid="load-sample-no-preview"
+          className={noPreviewTextStyles}
+        >
+          No Preview Documents
+        </Body>
+      )}
+    </KeylineCard>
+  );
+}
+
+const ValidDocumentPreview = connect(
+  (state: RootState) => ({
+    document: state.sampleDocuments.validDocument,
+    loadingState: state.sampleDocuments.validDocumentState,
+  }),
+  {
+    onLoadSampleClick: fetchValidDocument,
+  }
+)(DocumentPreview);
+
+const InvalidDocumentPreview = connect(
+  (state: RootState) => ({
+    document: state.sampleDocuments.invalidDocument,
+    loadingState: state.sampleDocuments.invalidDocumentState,
+  }),
+  {
+    onLoadSampleClick: fetchInvalidDocument,
+  }
+)(DocumentPreview);
+
+export { DocumentPreview, ValidDocumentPreview, InvalidDocumentPreview };
@@ -1,9 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
-import SampleDocuments from '.';
+import { SampleDocuments } from './sample-documents';
 import { Provider } from 'react-redux';
-import { configureStore } from '../../stores/store';
+import { configureStore } from '../stores/store';
 
 describe('SampleDocuments [Component]', function () {
   it('renders a valid and invalid document preview', function () {