Skip to content

Commit 95e406e

Browse files
paula-stachopaula-stacho
committed
fix(compass-validation): unified preview CTA COMPASS-8862 
1 parent dbce22b commit 95e406e

File tree

3 files changed

+209
-138
lines changed

3 files changed

+209
-138
lines changed

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

Lines changed: 3 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
11
import React from 'react';
2-
import { connect } from 'react-redux';
32
import {
43
Body,
54
KeylineCard,
65
css,
76
cx,
87
spacing,
9-
Button,
108
} from '@mongodb-js/compass-components';
119
import { Document } from '@mongodb-js/compass-crud';
1210

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-
2111
const previewStyles = css({
2212
display: 'flex',
2313
height: spacing[6] * 3,
@@ -30,45 +20,20 @@ const noPreviewStyles = css({
3020
alignItems: 'center',
3121
});
3222

33-
const loadSampleStyles = css({
34-
width: '100%',
35-
textAlign: 'center',
36-
});
37-
3823
const noPreviewTextStyles = css({
3924
padding: spacing[3],
4025
textAlign: 'center',
4126
fontStyle: 'italic',
4227
width: '100%',
4328
});
4429

45-
function DocumentPreview({
46-
document,
47-
loadingState,
48-
onLoadSampleClick,
49-
}: {
50-
document?: Record<string, unknown>;
51-
loadingState: DOCUMENT_LOADING_STATES;
52-
onLoadSampleClick?: () => void;
53-
}) {
30+
function DocumentPreview({ document }: { document?: Record<string, unknown> }) {
5431
return (
5532
<KeylineCard
5633
className={cx(previewStyles, document ? undefined : noPreviewStyles)}
5734
data-testid="document-preview"
5835
>
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 ? (
36+
{document ? (
7237
<Document doc={document} editable={false} />
7338
) : (
7439
<Body
@@ -82,24 +47,4 @@ function DocumentPreview({
8247
);
8348
}
8449

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 };
50+
export { DocumentPreview };

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

Lines changed: 140 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import {
33
Icon,
44
Body,
@@ -7,14 +7,14 @@ import {
77
spacing,
88
palette,
99
InlineDefinition,
10-
Subtitle,
1110
useDarkMode,
11+
Button,
12+
ButtonVariant,
1213
} from '@mongodb-js/compass-components';
13-
import { SAMPLE_SIZE } from '../modules/sample-documents';
14-
import {
15-
InvalidDocumentPreview,
16-
ValidDocumentPreview,
17-
} from './document-preview';
14+
import { fetchSampleDocuments, SAMPLE_SIZE } from '../modules/sample-documents';
15+
import { DocumentPreview } from './document-preview';
16+
import { connect } from 'react-redux';
17+
import type { RootState } from '../modules';
1818

1919
const SAMPLE_DEFINITION = `A sample is fetched from a sample-space of ${SAMPLE_SIZE} randomly selected documents`;
2020

@@ -66,15 +66,128 @@ const documentHeadingTextStyles = css({
6666
color: 'inherit',
6767
});
6868

69-
export function SampleDocuments() {
69+
const initialStateContainerStyles = css({
70+
display: 'flex',
71+
flexDirection: 'column',
72+
alignItems: 'center',
73+
gap: spacing[200],
74+
padding: spacing[400],
75+
marginTop: spacing[400],
76+
border: `1px solid ${palette.gray.light2}`,
77+
borderRadius: spacing[400],
78+
});
79+
80+
const initialStateContainerDarkModeStyles = css({
81+
border: `1px solid ${palette.gray.dark2}`,
82+
});
83+
84+
const previewHeaderStyles = css({
85+
fontSize: spacing[400],
86+
fontWeight: 'bold',
87+
color: palette.green.dark2,
88+
});
89+
90+
const previewHeaderDarkModeStyles = css({
91+
color: palette.green.light2,
92+
});
93+
94+
const DocumentGraphic: React.FunctionComponent = () => {
7095
const darkMode = useDarkMode();
96+
const fillColor = useMemo(
97+
() => (darkMode ? palette.green.light1 : palette.green.base),
98+
[darkMode]
99+
);
100+
const strokeColor = useMemo(
101+
() => (darkMode ? palette.white : palette.black),
102+
[darkMode]
103+
);
104+
71105
return (
72-
<div className={sampleDocumentsSectionStyles}>
73-
<Subtitle>
106+
<svg
107+
width="64"
108+
height="58"
109+
viewBox="0 0 64 58"
110+
fill="none"
111+
xmlns="http://www.w3.org/2000/svg"
112+
>
113+
<rect x="0.5" y="1" width="63" height="56" rx="2" stroke={strokeColor} />
114+
<line y1="28.5" x2="64" y2="28.5" stroke={strokeColor} />
115+
<line
116+
x1="8.61035"
117+
y1="15.5898"
118+
x2="32.9054"
119+
y2="15.5898"
120+
stroke={strokeColor}
121+
/>
122+
<circle
123+
cx="44.9268"
124+
cy="16.0898"
125+
r="2"
126+
fill={fillColor}
127+
stroke={strokeColor}
128+
/>
129+
<circle
130+
cx="52.8896"
131+
cy="16.0898"
132+
r="2"
133+
fill={fillColor}
134+
stroke={strokeColor}
135+
/>
136+
</svg>
137+
);
138+
};
139+
140+
const InitialState: React.FC<{
141+
onPreviewClick: () => void;
142+
}> = ({ onPreviewClick }) => {
143+
const darkMode = useDarkMode();
144+
return (
145+
<div
146+
className={cx(
147+
initialStateContainerStyles,
148+
darkMode && initialStateContainerDarkModeStyles
149+
)}
150+
>
151+
<DocumentGraphic />
152+
<div
153+
className={cx(
154+
previewHeaderStyles,
155+
darkMode && previewHeaderDarkModeStyles
156+
)}
157+
>
74158
<InlineDefinition definition={SAMPLE_DEFINITION}>
75-
Sample documents
159+
Preview your sample here
76160
</InlineDefinition>
77-
</Subtitle>
161+
</div>
162+
<div>
163+
This section displays one document that passed validation and one that
164+
failed validation.
165+
</div>
166+
<Button onClick={onPreviewClick} variant={ButtonVariant.PrimaryOutline}>
167+
Preview documents
168+
</Button>
169+
</div>
170+
);
171+
};
172+
173+
function SampleDocuments({
174+
validDocument,
175+
invalidDocument,
176+
isInitialState,
177+
fetchSampleDocuments,
178+
}: {
179+
validDocument?: Record<string, unknown>;
180+
invalidDocument?: Record<string, unknown>;
181+
isInitialState: boolean;
182+
fetchSampleDocuments: () => void;
183+
}) {
184+
const darkMode = useDarkMode();
185+
186+
if (isInitialState)
187+
return <InitialState onPreviewClick={fetchSampleDocuments} />;
188+
189+
return (
190+
<div className={sampleDocumentsSectionStyles}>
78191
<div className={sampleDocumentsStyles}>
79192
{/* Documents that match the validation */}
80193
<div className={sampleDocumentStyles} data-testid="matching-documents">
@@ -87,7 +200,7 @@ export function SampleDocuments() {
87200
<Icon glyph="CheckmarkWithCircle" size="small" />
88201
<Body className={documentHeadingTextStyles}>Passed validation</Body>
89202
</div>
90-
<ValidDocumentPreview />
203+
<DocumentPreview document={validDocument} />
91204
</div>
92205

93206
{/* Documents that do not match the validation */}
@@ -104,9 +217,22 @@ export function SampleDocuments() {
104217
<Icon glyph="XWithCircle" size="small" />
105218
<Body className={documentHeadingTextStyles}>Failed validation</Body>
106219
</div>
107-
<InvalidDocumentPreview />
220+
<DocumentPreview document={invalidDocument} />
108221
</div>
109222
</div>
110223
</div>
111224
);
112225
}
226+
227+
const ConnectedSampleDocuments = connect(
228+
(state: RootState) => ({
229+
validDocument: state.sampleDocuments.validDocument,
230+
invalidDocument: state.sampleDocuments.invalidDocument,
231+
isInitialState: state.sampleDocuments.validDocumentState === 'initial',
232+
}),
233+
{
234+
fetchSampleDocuments,
235+
}
236+
)(SampleDocuments);
237+
238+
export { ConnectedSampleDocuments as SampleDocuments };

0 commit comments

Comments
 (0)