feat(compass-collection): Fill in the script screen of the Generate Mock Data modal flow CLOUDP-333859

[leo-generali]

Description

• Creates the final screen of the "Create Mock Data" generator flow:

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[evergreen-ci-prod]

There is an existing patch(es) for this commit SHA:

• Evergreen patch with PR

Please note that the status that is posted is not in the context of this PR but rather the (latest) existing patch and that may affect some tests that may depend on the particular PR. If your tests do not rely on any PR-specific values (like base or head branch name) then your tests will report the same status. If you would like a patch to run in the context of this PR and abort the other(s), comment 'evergreen retry'.

[Anemy]

Looking good, left two comment on rendering and css.

[Anemy]

A bit of a nit, instead of instantiating these components on load, can we instead write this with a switch? Either in a function or a variable. That way we create them when we're rendering.

Here's an example in the code base:

compass/packages/compass-data-modeling/src/components/new-diagram-form.tsx

Line 330 in 0d862f2

const formContent = useMemo(() => {

If we want to keep the Record approach, using functions would also work:

const STEP_TO_STEP_CONTENT: Record<MockDataGeneratorStep, React.JSX.Element> = {
  [MockDataGeneratorStep.SCHEMA_CONFIRMATION]: () => <SchemaConfirmationScreen />,
  [MockDataGeneratorStep.SCHEMA_EDITOR]: () => <FakerSchemaEditor />,
  [MockDataGeneratorStep.DOCUMENT_COUNT]: () => <></>, // TODO: Implement as part of CLOUDP-333856
  [MockDataGeneratorStep.PREVIEW_DATA]: () => <></>, // TODO: Implement as part of CLOUDP-333857
  [MockDataGeneratorStep.GENERATE_DATA]: () => <ScriptScreen />,
};

[leo-generali]

Got it. Went with the useMemo approach used in the linked code.

[Anemy]

nice!

[jcobis]

Nice work! Wondering about the slight difference in how the password and the username are displayed (one placeholder is surrounded with quotes while the other is not). Asked designs here