Skip to content

Commit c1c91a5

Browse files
AnemyAnemy
authored
chore(schema-validation): update react components to functional from classes COMPASS-8858 (#6726)
1 parent e42ec95 commit c1c91a5

24 files changed

+470
-588
lines changed

‎package-lock.json

Lines changed: 0 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-schema-validation/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
"lodash": "^4.17.21",
8686
"mongodb-ns": "^2.4.2",
8787
"mongodb-query-parser": "^4.3.0",
88-
"prop-types": "^15.7.2",
8988
"react": "^17.0.2",
9089
"react-redux": "^8.1.3",
9190
"redux": "^4.2.1",

‎packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.spec.tsx renamed to ‎packages/compass-schema-validation/src/components/compass-schema-validation.spec.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import { mount } from 'enzyme';
33
import { expect } from 'chai';
44

5-
import CompassSchemaValidation from '.';
6-
import { configureStore } from '../../stores/store';
5+
import { CompassSchemaValidation } from './compass-schema-validation';
6+
import { configureStore } from '../stores/store';
77
import { Provider } from 'react-redux';
88

99
describe('CompassSchemaValidation [Component]', function () {

‎packages/compass-schema-validation/src/components/compass-schema-validation.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import ValidationStates from './validation-states';
3+
import { css, WorkspaceContainer } from '@mongodb-js/compass-components';
4+
5+
const styles = css({
6+
display: 'flex',
7+
flexDirection: 'column',
8+
flexGrow: 1,
9+
height: '100%',
10+
});
11+
12+
/**
13+
* The core schema validation component.
14+
*/
15+
export function CompassSchemaValidation() {
16+
return (
17+
<div className={styles} data-testid="compass-schema-validation">
18+
<WorkspaceContainer>
19+
<ValidationStates />
20+
</WorkspaceContainer>
21+
</div>
22+
);
23+
}

‎packages/compass-schema-validation/src/components/compass-schema-validation/compass-schema-validation.tsx

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎packages/compass-schema-validation/src/components/compass-schema-validation/index.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎packages/compass-schema-validation/src/components/document-preview/document-preview.spec.tsx renamed to ‎packages/compass-schema-validation/src/components/document-preview.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { mount } from 'enzyme';
33
import { expect } from 'chai';
44

5-
import DocumentPreview from '.';
5+
import { DocumentPreview } from './document-preview';
66

77
describe('DocumentPreview [Component]', function () {
88
context('when document loading state is initial', function () {

‎packages/compass-schema-validation/src/components/document-preview.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import {
4+
Body,
5+
KeylineCard,
6+
css,
7+
cx,
8+
spacing,
9+
Button,
10+
} from '@mongodb-js/compass-components';
11+
import { Document } from '@mongodb-js/compass-crud';
12+
13+
import { LoadingOverlay } from './loading-overlay';
14+
import type { DOCUMENT_LOADING_STATES } from '../modules/sample-documents';
15+
import {
16+
fetchValidDocument,
17+
fetchInvalidDocument,
18+
} from '../modules/sample-documents';
19+
import type { RootState } from '../modules';
20+
21+
const previewStyles = css({
22+
display: 'flex',
23+
height: spacing[6] * 3,
24+
padding: 0,
25+
overflow: 'auto',
26+
position: 'relative',
27+
});
28+
29+
const noPreviewStyles = css({
30+
alignItems: 'center',
31+
});
32+
33+
const loadSampleStyles = css({
34+
width: '100%',
35+
textAlign: 'center',
36+
});
37+
38+
const noPreviewTextStyles = css({
39+
padding: spacing[3],
40+
textAlign: 'center',
41+
fontStyle: 'italic',
42+
width: '100%',
43+
});
44+
45+
function DocumentPreview({
46+
document,
47+
loadingState,
48+
onLoadSampleClick,
49+
}: {
50+
document?: Record<string, unknown>;
51+
loadingState: DOCUMENT_LOADING_STATES;
52+
onLoadSampleClick?: () => void;
53+
}) {
54+
return (
55+
<KeylineCard
56+
className={cx(previewStyles, document ? undefined : noPreviewStyles)}
57+
data-testid="document-preview"
58+
>
59+
{loadingState === 'initial' ? (
60+
<Body as="div" className={loadSampleStyles}>
61+
<Button
62+
data-testid="load-sample-document"
63+
size="small"
64+
onClick={onLoadSampleClick}
65+
>
66+
Load document
67+
</Button>
68+
</Body>
69+
) : loadingState === 'loading' ? (
70+
<LoadingOverlay />
71+
) : document ? (
72+
<Document doc={document} editable={false} />
73+
) : (
74+
<Body
75+
data-testid="load-sample-no-preview"
76+
className={noPreviewTextStyles}
77+
>
78+
No Preview Documents
79+
</Body>
80+
)}
81+
</KeylineCard>
82+
);
83+
}
84+
85+
const ValidDocumentPreview = connect(
86+
(state: RootState) => ({
87+
document: state.sampleDocuments.validDocument,
88+
loadingState: state.sampleDocuments.validDocumentState,
89+
}),
90+
{
91+
onLoadSampleClick: fetchValidDocument,
92+
}
93+
)(DocumentPreview);
94+
95+
const InvalidDocumentPreview = connect(
96+
(state: RootState) => ({
97+
document: state.sampleDocuments.invalidDocument,
98+
loadingState: state.sampleDocuments.invalidDocumentState,
99+
}),
100+
{
101+
onLoadSampleClick: fetchInvalidDocument,
102+
}
103+
)(DocumentPreview);
104+
105+
export { DocumentPreview, ValidDocumentPreview, InvalidDocumentPreview };

‎packages/compass-schema-validation/src/components/document-preview/document-preview.tsx

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎packages/compass-schema-validation/src/components/document-preview/index.ts

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)