Skip to content

Commit 1258704

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 505627b commit 1258704

File tree

4 files changed

+97
-13
lines changed

4 files changed

+97
-13
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-screen.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@ const confirmMappingsButtonStyles = css({
4141
width: '200px',
4242
});
4343

44-
const FakerSchemaEditor = ({
44+
const FakerSchemaEditorScreen = ({
4545
onSchemaConfirmed,
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,14 +92,10 @@ const FakerSchemaEditor = ({
8792
mapping.fieldPath === activeField ? updatedFakerFieldMapping : mapping
8893
)
8994
);
95+
resetIsSchemaConfirmed();
9096
}
9197
};
9298

93-
const onConfirmMappings = () => {
94-
onSchemaConfirmed();
95-
};
96-
97-
const FakerSchemaEditorScreen = () => {
9899
return (
99100
<div data-testid="faker-schema-editor" className={containerStyles}>
100101
<div>
@@ -128,7 +129,7 @@ const FakerSchemaEditorScreen = () => {
128129
size={ButtonSize.Small}
129130
className={confirmMappingsButtonStyles}
130131
variant={ButtonVariant.Primary}
131-
onClick={onConfirmMappings}
132+
onClick={() => onSchemaConfirmed(true)}
132133
>
133134
Confirm mappings
134135
</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
@@ -417,6 +417,78 @@ describe('MockDataGeneratorModal', () => {
417417
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
418418
).to.equal('true');
419419
});
420+
421+
it('resets the confirm schema mapping state when the user clicks the back button then goes back to the schema editor step', async () => {
422+
await renderModal({
423+
mockServices: mockServicesWithMockDataResponse,
424+
});
425+
426+
// advance to the schema editor step
427+
userEvent.click(screen.getByText('Confirm'));
428+
await waitFor(() => {
429+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
430+
});
431+
expect(
432+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
433+
).to.equal('true');
434+
// click confirm mappings button
435+
userEvent.click(screen.getByText('Confirm mappings'));
436+
expect(
437+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
438+
).to.equal('false');
439+
440+
// click back button
441+
userEvent.click(screen.getByText('Back'));
442+
await waitFor(() => {
443+
expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
444+
});
445+
446+
// click next button to advance to the schema editor step again
447+
userEvent.click(screen.getByTestId('next-step-button'));
448+
await waitFor(() => {
449+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
450+
});
451+
// the next button should be disabled again
452+
expect(
453+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
454+
).to.equal('true');
455+
});
456+
457+
it('preserves the confirm schema mapping state when the user clicks the next button then goes back to the schema editor step', async () => {
458+
await renderModal({
459+
mockServices: mockServicesWithMockDataResponse,
460+
});
461+
462+
// advance to the schema editor step
463+
userEvent.click(screen.getByText('Confirm'));
464+
await waitFor(() => {
465+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
466+
});
467+
expect(
468+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
469+
).to.equal('true');
470+
// click confirm mappings button
471+
userEvent.click(screen.getByText('Confirm mappings'));
472+
expect(
473+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
474+
).to.equal('false');
475+
476+
// click next button
477+
userEvent.click(screen.getByTestId('next-step-button'));
478+
await waitFor(() => {
479+
expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
480+
});
481+
482+
// click back button to go back to the schema editor step
483+
userEvent.click(screen.getByText('Back'));
484+
await waitFor(() => {
485+
expect(screen.getByTestId('faker-schema-editor')).to.exist;
486+
});
487+
// the next button should not be disabled
488+
expect(
489+
screen.getByTestId('next-step-button').getAttribute('aria-disabled')
490+
).to.equal('false');
491+
});
420492
});
421493

422494
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
@@ -93,7 +93,7 @@ const MockDataGeneratorModal = ({
9393
return (
9494
<FakerSchemaEditorScreen
9595
isSchemaConfirmed={isSchemaConfirmed}
96-
onSchemaConfirmed={() => setIsSchemaConfirmed(true)}
96+
onSchemaConfirmed={setIsSchemaConfirmed}
9797
fakerMappings={fakerSchemaGenerationState.fakerSchema}
9898
/>
9999
);
@@ -107,7 +107,7 @@ const MockDataGeneratorModal = ({
107107
case MockDataGeneratorStep.GENERATE_DATA:
108108
return <ScriptScreen />;
109109
}
110-
}, [currentStep, fakerSchemaGenerationState]);
110+
}, [currentStep, fakerSchemaGenerationState, isSchemaConfirmed]);
111111

112112
const isNextButtonDisabled =
113113
currentStep === MockDataGeneratorStep.SCHEMA_EDITOR &&
@@ -126,6 +126,14 @@ const MockDataGeneratorModal = ({
126126
const shouldShowNamespace =
127127
currentStep !== MockDataGeneratorStep.GENERATE_DATA;
128128

129+
const handlePreviousClick = () => {
130+
if (currentStep === MockDataGeneratorStep.SCHEMA_EDITOR) {
131+
// reset isSchemaConfirmed state when previous step is clicked
132+
setIsSchemaConfirmed(false);
133+
}
134+
onPreviousStep();
135+
};
136+
129137
return (
130138
<Modal
131139
size="large"
@@ -148,7 +156,7 @@ const MockDataGeneratorModal = ({
148156
</ModalBody>
149157
<ModalFooter className={footerStyles}>
150158
<Button
151-
onClick={onPreviousStep}
159+
onClick={handlePreviousClick}
152160
disabled={currentStep === MockDataGeneratorStep.SCHEMA_CONFIRMATION}
153161
>
154162
Back

0 commit comments

Comments
 (0)