diff --git a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx index 8643395..ff74051 100644 --- a/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx +++ b/src/CqlBuilderPanel/functionsSection/argumentSection/ArgumentSection.tsx @@ -23,6 +23,7 @@ interface ArgumentsProps { canEdit: boolean; addArgumentToFunctionsArguments: Function; deleteArgumentFromFunctionArguments: Function; + dirty: boolean; } const availableDataTypes = [ @@ -43,8 +44,8 @@ export default function ArgumentSection(props: ArgumentsProps) { deleteArgumentFromFunctionArguments, functionArguments, canEdit, + dirty, } = props; - const [functionDataType, setFunctionDataType] = useState(""); const [confirmationDialog, setConfirmationDialog] = useState(false); const formik = useFormik({ @@ -60,8 +61,8 @@ export default function ArgumentSection(props: ArgumentsProps) { const { dataType } = formik.values; const handleSubmit = () => { - let value = formik.values.dataType; - if (functionDataType === "Other") { + let value = dataType; + if (value === "Other") { value = formik.values.other; } const fnToAdd = { @@ -72,7 +73,12 @@ export default function ArgumentSection(props: ArgumentsProps) { formik.resetForm(); }; const { resetForm } = formik; - + // reset inner if outer is clean (listen for reset event) + useEffect(() => { + if (!dirty) { + resetForm(); + } + }, [dirty]); return ( <>
@@ -118,14 +124,15 @@ export default function ArgumentSection(props: ArgumentsProps) { error={Boolean(formik.errors.dataType)} helperText={formik.errors.dataType} onChange={(evt) => { - setFunctionDataType(evt.target.value); formik.setFieldValue("dataType", evt.target.value); - formik.setFieldValue("other", ""); + if (formik.values.other) { + formik.setFieldValue("other", ""); + } }} />
- {functionDataType && functionDataType === "Other" && ( + {dataType === "Other" && (
setConfirmationDialog(false)} onSubmit={() => { resetForm(); - setFunctionDataType(""); setConfirmationDialog(false); }} /> diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx index 2d356f7..b9e2a2e 100644 --- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx +++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.test.tsx @@ -449,9 +449,6 @@ describe("CQL Function Builder Tests", () => { const functionNameInput = (await screen.findByTestId( "function-name-text-input" )) as HTMLInputElement; - const argumentsSection = screen.getByTestId( - "terminology-section-Arguments-sub-heading" - ); expect(functionNameInput).toBeInTheDocument(); expect(functionNameInput.value).toBe(""); fireEvent.change(functionNameInput, { @@ -522,6 +519,7 @@ describe("CQL Function Builder Tests", () => { }); expect(argumentNameInput.value).toBe("Test"); + // dataType const dataTypeDropdown = await screen.findByTestId( "arg-type-selector-input" ); @@ -529,22 +527,40 @@ describe("CQL Function Builder Tests", () => { target: { value: "Other" }, }); - // we now need to populate other textfield const otherNameInput = (await screen.findByTestId( "other-type-input" )) as HTMLInputElement; expect(otherNameInput).toBeInTheDocument(); - expect(otherNameInput.value).toBe(""); - fireEvent.change(otherNameInput, { - target: { value: "Other" }, + + // switch to blank other + fireEvent.change(dataTypeDropdown, { + target: { value: "Integer" }, + }); + await waitFor(() => { + expect(screen.queryByTestId("other-type-input")).not.toBeInTheDocument(); }); - expect(otherNameInput.value).toBe("Other"); - const addButton = screen.getByTestId("function-argument-add-btn"); - expect(addButton).toBeInTheDocument(); - expect(addButton).toBeEnabled(); + // select other again + fireEvent.change(dataTypeDropdown, { + target: { value: "Other" }, + }); + // other input appears + await waitFor(() => { + expect(screen.queryByTestId("other-type-input")).toBeInTheDocument(); + }); - fireEvent.click(addButton); + // finda nd fill out other + const other = (await screen.findByTestId( + "other-type-input" + )) as HTMLInputElement; + fireEvent.change(other, { + target: { value: "test" }, + }); + await waitFor(() => { + const addButton = screen.getByTestId("function-argument-add-btn"); + expect(addButton).toBeEnabled(); + fireEvent.click(addButton); + }); const functionArgumentTable = screen.getByTestId("function-argument-tbl"); expect(functionArgumentTable).toBeInTheDocument(); @@ -565,7 +581,7 @@ describe("CQL Function Builder Tests", () => { functionsArguments: [ expect.objectContaining({ argumentName: "Test", - dataType: "Other", + dataType: "test", }), ], }) diff --git a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx index 96ac947..7c4e285 100644 --- a/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx +++ b/src/CqlBuilderPanel/functionsSection/functionBuilder/FunctionBuilder.tsx @@ -50,7 +50,6 @@ export default function FunctionBuilder({ useState(false); const textAreaRef = useRef(null); const [confirmationDialog, setConfirmationDialog] = useState(false); - const [expressionEditorValue, setExpressionEditorValue] = useState(""); const [cursorPosition, setCursorPosition] = useState(null); const [autoInsert, setAutoInsert] = useState(false); const formik = useFormik({ @@ -59,6 +58,7 @@ export default function FunctionBuilder({ comment: funct?.comment || "", fluentFunction: funct?.fluentFunction || true, functionsArguments: funct?.functionsArguments || [], + expressionEditorValue: "", type: "", name: "", }, @@ -68,20 +68,21 @@ export default function FunctionBuilder({ const newValues = getNewExpressionsAndLines( values, cursorPosition, - expressionEditorValue, + formik.values.expressionEditorValue, autoInsert ); updateExpressionAndLines(newValues[0], newValues[1]); }, }); - const { resetForm } = formik; + // going to pass dirty down to know when we need to reset sub form + const { resetForm, dirty } = formik; // update formik, and expressionEditor, cursor, lines const updateExpressionAndLines = ( newEditorExpressionValue, newCursorPosition ) => { - setExpressionEditorValue(newEditorExpressionValue); + formik.setFieldValue("expressionEditorValue", newEditorExpressionValue); formik.setFieldValue("type", ""); formik.setFieldValue("name", ""); @@ -186,6 +187,7 @@ export default function FunctionBuilder({ deleteArgumentFromFunctionArguments={ deleteArgumentFromFunctionArguments } + dirty={dirty} functionArguments={formik.values.functionsArguments} /> @@ -197,8 +199,10 @@ export default function FunctionBuilder({ expressionEditorOpen={expressionEditorOpen} cqlBuilderLookupsTypes={cqlBuilderLookupsTypes} textAreaRef={textAreaRef} - expressionEditorValue={expressionEditorValue} - setExpressionEditorValue={setExpressionEditorValue} + expressionEditorValue={formik.values.expressionEditorValue} + setExpressionEditorValue={(v) => { + formik.setFieldValue("expressionEditorValue", v); + }} setCursorPosition={setCursorPosition} setAutoInsert={setAutoInsert} /> @@ -225,10 +229,9 @@ export default function FunctionBuilder({ comment: formik.values.comment, functionsArguments: formik.values.functionsArguments, fluentFunction: formik.values.fluentFunction, - expressionValue: expressionEditorValue, + expressionValue: formik.values.expressionEditorValue, }; resetForm(); - setExpressionEditorValue(""); handleApplyFunction(functionToApply); }} >