Skip to content

Commit 23e57fa

Browse files
ncarbonncarbon
committed
Added allowDeselect prop to select inputs, modified onSchemaConfirmed to accept a boolean parameter, and implemented state reset logic for schema confirmation. Enhanced tests to verify schema mapping state behavior during navigation.
1 parent e66a8e2 commit 23e57fa

File tree

4 files changed

+96
-11
lines changed

4 files changed

+96
-11
lines changed

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,11 @@ const FakerMappingSelector = ({
4141
<Body className={labelStyles}>Mapping</Body>
4242
<Select
4343
label="JSON Type"
44+
allowDeselect={false}
4445
value={activeJsonType}
4546
onChange={onJsonTypeSelect}
4647
>
48+
{/* TODO(CLOUDP-344400) : Make the select input editable and render other options depending on the JSON type selected */}
4749
{[activeJsonType].map((type) => (
4850
<Option key={type} value={type}>
4951
{type}
@@ -52,9 +54,11 @@ const FakerMappingSelector = ({
5254
</Select>
5355
<Select
5456
label="Faker Function"
57+
allowDeselect={false}
5558
value={activeFakerFunction}
5659
onChange={onFakerFunctionSelect}
5760
>
61+
{/* TODO(CLOUDP-344400): Make the select input editable and render other JSON types */}
5862
{[activeFakerFunction].map((field) => (
5963
<Option key={field} value={field}>
6064
{field}
@@ -67,8 +71,7 @@ const FakerMappingSelector = ({
6771
string &quot;Unrecognized&quot;
6872
</Banner>
6973
)}
70-
71-
{/* TODO: CLOUDP-344400: Render faker function parameters once we have a way to validate them. */}
74+
{/* TODO(CLOUDP-344400): Render faker function parameters once we have a way to validate them. */}
7275
</div>
7376
);
7477
};

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const FakerSchemaEditor = ({
4646
fakerMappings,
4747
}: {
4848
isSchemaConfirmed: boolean;
49-
onSchemaConfirmed: () => void;
49+
onSchemaConfirmed: (isConfirmed: boolean) => void;
5050
fakerMappings: Array<FakerSchemaMapping>;
5151
}) => {
5252
const [fakerSchemaFormValues, setFakerSchemaFormValues] =
@@ -62,6 +62,10 @@ const FakerSchemaEditor = ({
6262
(mapping) => mapping.fieldPath === activeField
6363
)?.fakerMethod;
6464

65+
const resetIsSchemaConfirmed = () => {
66+
onSchemaConfirmed(false);
67+
};
68+
6569
const onJsonTypeSelect = (newJsonType: string) => {
6670
const updatedFakerFieldMapping = fakerSchemaFormValues.find(
6771
(mapping) => mapping.fieldPath === activeField
@@ -73,6 +77,7 @@ const FakerSchemaEditor = ({
7377
mapping.fieldPath === activeField ? updatedFakerFieldMapping : mapping
7478
)
7579
);
80+
resetIsSchemaConfirmed();
7681
}
7782
};
7883

@@ -87,13 +92,10 @@ const FakerSchemaEditor = ({
8792
mapping.fieldPath === activeField ? updatedFakerFieldMapping : mapping
8893
)
8994
);
95+
resetIsSchemaConfirmed();
9096
}
9197
};
9298

93-
const onConfirmMappings = () => {
94-
onSchemaConfirmed();
95-
};
96-
9799
return (
98100
<div data-testid="faker-schema-editor" className={containerStyles}>
99101
<div>
@@ -127,7 +129,7 @@ const FakerSchemaEditor = ({
127129
size={ButtonSize.Small}
128130
className={confirmMappingsButtonStyles}
129131
variant={ButtonVariant.Primary}
130-
onClick={onConfirmMappings}
132+
onClick={() => onSchemaConfirmed(true)}
131133
>
132134
Confirm mappings
133135
</Button>

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,78 @@ describe('MockDataGeneratorModal', () => {
380380
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
381381
).to.equal('true');
382382
});
383+
384+
it('resets the confirm schema mapping state when the user clicks the back button then goes back to the schema editor step', async () => {
385+
await renderModal({
386+
mockServices: mockServicesWithMockDataResponse,
387+
});
388+
389+
// advance to the schema editor step
390+
userEvent.click(screen.getByText('Confirm'));
391+
await waitFor(() => {
392+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
393+
});
394+
expect(
395+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
396+
).to.equal('true');
397+
// click confirm mappings button
398+
userEvent.click(screen.getByText('Confirm mappings'));
399+
expect(
400+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
401+
).to.equal('false');
402+
403+
// click back button
404+
userEvent.click(screen.getByText('Back'));
405+
await waitFor(() => {
406+
expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
407+
});
408+
409+
// click next button to advance to the schema editor step again
410+
userEvent.click(screen.getByTestId('next-step-button'));
411+
await waitFor(() => {
412+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
413+
});
414+
// the next button should be disabled again
415+
expect(
416+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
417+
).to.equal('true');
418+
});
419+
420+
it('preserves the confirm schema mapping state when the user clicks the next button then goes back to the schema editor step', async () => {
421+
await renderModal({
422+
mockServices: mockServicesWithMockDataResponse,
423+
});
424+
425+
// advance to the schema editor step
426+
userEvent.click(screen.getByText('Confirm'));
427+
await waitFor(() => {
428+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
429+
});
430+
expect(
431+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
432+
).to.equal('true');
433+
// click confirm mappings button
434+
userEvent.click(screen.getByText('Confirm mappings'));
435+
expect(
436+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
437+
).to.equal('false');
438+
439+
// click next button
440+
userEvent.click(screen.getByTestId('next-step-button'));
441+
await waitFor(() => {
442+
expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
443+
});
444+
445+
// click back button to go back to the schema editor step
446+
userEvent.click(screen.getByText('Back'));
447+
await waitFor(() => {
448+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
449+
});
450+
// the next button should not be disabled
451+
expect(
452+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
453+
).to.equal('false');
454+
});
383455
});
384456

385457
describe('on the generate data step', () => {

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const MockDataGeneratorModal = ({
8585
return (
8686
<FakerSchemaEditor
8787
isSchemaConfirmed={isSchemaConfirmed}
88-
onSchemaConfirmed={() => setIsSchemaConfirmed(true)}
88+
onSchemaConfirmed={setIsSchemaConfirmed}
8989
fakerMappings={fakerSchemaGenerationState.fakerSchema}
9090
/>
9191
);
@@ -99,7 +99,7 @@ const MockDataGeneratorModal = ({
9999
case MockDataGeneratorStep.GENERATE_DATA:
100100
return <ScriptScreen />;
101101
}
102-
}, [currentStep, fakerSchemaGenerationState]);
102+
}, [currentStep, fakerSchemaGenerationState, isSchemaConfirmed]);
103103

104104
const isNextButtonDisabled =
105105
currentStep === MockDataGeneratorStep.SCHEMA_EDITOR &&
@@ -115,6 +115,14 @@ const MockDataGeneratorModal = ({
115115
}
116116
};
117117

118+
const handlePreviousClick = () => {
119+
if (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR) {
120+
// reset isSchemaConfirmed state when previous step is clicked
121+
setIsSchemaConfirmed(false);
122+
}
123+
onPreviousStep();
124+
};
125+
118126
return (
119127
<Modal
120128
size="large"
@@ -134,7 +142,7 @@ const MockDataGeneratorModal = ({
134142
</ModalBody>
135143
<ModalFooter className={footerStyles}>
136144
<Button
137-
onClick={onPreviousStep}
145+
onClick={handlePreviousClick}
138146
disabled={currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION}
139147
>
140148
Back

0 commit comments

Comments
 (0)