Skip to content

Commit 1e1e298

Browse files
leo-generalileo-generali
committed
Create MVP of script screen
1 parent bd9abea commit 1e1e298

File tree

2 files changed

+160
-12
lines changed

2 files changed

+160
-12
lines changed

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ import {
2323
} from '../../modules/collection-tab';
2424
import { default as SchemaConfirmationScreen } from './raw-schema-confirmation';
2525
import FakerSchemaEditor from './faker-schema-editor';
26+
import ScriptScreen from './script-screen';
27+
28+
const STEP_TO_COMPONENT: Record<MockDataGeneratorStep, React.JSX.Element> = {
29+
[MockDataGeneratorStep.SCHEMA_CONFIRMATION]: <SchemaConfirmationScreen />,
30+
[MockDataGeneratorStep.SCHEMA_EDITOR]: <FakerSchemaEditor />,
31+
[MockDataGeneratorStep.DOCUMENT_COUNT]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
32+
[MockDataGeneratorStep.PREVIEW_DATA]: <></>, // TODO: Implement as part of CLOUDP-XXXXXX
33+
[MockDataGeneratorStep.GENERATE_DATA]: <ScriptScreen />,
34+
};
2635

2736
const footerStyles = css`
2837
flex-direction: row;
@@ -62,18 +71,9 @@ const MockDataGeneratorModal = ({
6271
}
6372
};
6473

65-
let stepContent: React.ReactNode;
66-
67-
if (currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION) {
68-
stepContent = <SchemaConfirmationScreen />;
69-
}
70-
71-
if (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR) {
72-
stepContent = <FakerSchemaEditor />;
73-
}
74-
7574
return (
7675
<Modal
76+
size="large"
7777
open={isOpen}
7878
setOpen={(open) => {
7979
if (!open) {
@@ -84,8 +84,9 @@ const MockDataGeneratorModal = ({
8484
>
8585
<ModalHeader title="Generate Mock Data" />
8686
<ModalBody>
87-
{stepContent}
88-
<div data-testid={`generate-mock-data-step-${currentStep}`} />
87+
<div data-testid={`generate-mock-data-step-${currentStep}`}>
88+
{STEP_TO_COMPONENT[currentStep]}
89+
</div>
8990
</ModalBody>
9091
<ModalFooter className={footerStyles}>
9192
<Button

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React from 'react';
2+
import {
3+
Body,
4+
Code,
5+
Copyable,
6+
css,
7+
cx,
8+
InlineCode,
9+
Language,
10+
Link,
11+
Overline,
12+
palette,
13+
spacing,
14+
useDarkMode,
15+
} from '@mongodb-js/compass-components';
16+
17+
const RUN_SCRIPT_COMMAND = `
18+
mongosh "mongodb+srv://<your-cluster>.mongodb.net/mockDataDB" \\
19+
--username <yourUsername> \\
20+
--password "<yourPassword>" \\
21+
mockdatascript.js
22+
`;
23+
24+
const outerSectionStyles = css({
25+
display: 'flex',
26+
flexDirection: 'column',
27+
gap: spacing[400],
28+
});
29+
30+
const listStyles = css({
31+
listStylePosition: 'inside',
32+
listStyleType: 'disc',
33+
marginLeft: spacing[200],
34+
});
35+
36+
const copyableStyles = css({
37+
marginLeft: spacing[400],
38+
});
39+
40+
const sectionInstructionStyles = css({
41+
margin: `${spacing[200]}px 0`,
42+
});
43+
44+
const resourceSectionStyles = css({
45+
padding: `${spacing[400]}px ${spacing[800]}px`,
46+
borderRadius: spacing[400],
47+
});
48+
49+
const resourceSectionLightStyles = css({
50+
backgroundColor: palette.gray.light3,
51+
});
52+
53+
const resourceSectionDarkStyles = css({
54+
backgroundColor: palette.gray.dark3,
55+
});
56+
57+
const resourceSectionHeader = css({
58+
marginBottom: spacing[300],
59+
});
60+
61+
const ScriptScreen = () => {
62+
const isDarkMode = useDarkMode();
63+
64+
return (
65+
<section className={outerSectionStyles}>
66+
<section>
67+
<Body baseFontSize={16} weight="medium">
68+
Prerequisites
69+
</Body>
70+
<Body className={css({ marginTop: spacing[200] })}>
71+
To run the generated script, you must:
72+
</Body>
73+
<ul className={listStyles}>
74+
<li>
75+
Install{' '}
76+
<Link href="https://www.mongodb.com/docs/mongodb-shell/install/">
77+
mongosh
78+
</Link>
79+
</li>
80+
<li>
81+
Install{' '}
82+
<Link href="https://fakerjs.dev/guide/#installation">faker.js</Link>
83+
<Copyable className={copyableStyles}>
84+
npm install @faker-js/faker
85+
</Copyable>
86+
</li>
87+
</ul>
88+
</section>
89+
<section>
90+
<Body baseFontSize={16} weight="medium">
91+
1. Create a .js file with the following script
92+
</Body>
93+
<Body className={sectionInstructionStyles}>
94+
In the directory that you created, create a file
95+
named mockdatascript.js (or any name you’d like).
96+
</Body>
97+
{/* TODO: Fill in with real code */}
98+
<Code copyable language={Language.JavaScript}>
99+
TK
100+
</Code>
101+
</section>
102+
<section>
103+
<Body baseFontSize={16} weight="medium">
104+
2. Run the script with <InlineCode>mongosh</InlineCode>
105+
</Body>
106+
<Body className={sectionInstructionStyles}>
107+
In the same working directory run the command below. Please{' '}
108+
<strong>paste in your username and password</strong> where there are
109+
placeholders.{' '}
110+
<em>
111+
Note that this will add data to your cluster and will not be
112+
reversible.
113+
</em>
114+
</Body>
115+
<Code copyable language={Language.Bash}>
116+
{RUN_SCRIPT_COMMAND}
117+
</Code>
118+
</section>
119+
<section
120+
className={cx(
121+
resourceSectionStyles,
122+
isDarkMode ? resourceSectionDarkStyles : resourceSectionLightStyles
123+
)}
124+
>
125+
<Overline className={resourceSectionHeader}>Resources</Overline>
126+
<ul>
127+
<li>
128+
<Link href="https://www.mongodb.com/docs/atlas/synthetic-data/">
129+
Generating Synthetic Data with MongoDB
130+
</Link>
131+
</li>
132+
<li>
133+
<Link href="https://www.mongodb.com/docs/mongodb-shell/">
134+
Learn About the MongoDB Shell
135+
</Link>
136+
</li>
137+
<li>
138+
{/* TODO: Update URL */}
139+
<Link href="#">Access your Database Users</Link>
140+
</li>
141+
</ul>
142+
</section>
143+
</section>
144+
);
145+
};
146+
147+
export default ScriptScreen;

0 commit comments

Comments
 (0)