fix(ui): handle parsing errors properly in object editor

[MasonM]

Motivation

#13915 introduced a regression where edits made in an object editor that introduce syntax errors cause a full screen error.

This is happening because parsing was lifted out of <ObjectEditor> and into a reducer. Before #13915, the object editor used the following to catch parse errors:

argo-workflows/ui/src/shared/components/object-editor.tsx

Lines 131 to 136 in eb4f245

	try {
	onChange(parse(v));
	setError(null);
	} catch (e) {
	setError(e);
	}

After #13915, the parsing logic was moved to reducer(), which is executed async, and therefore errors aren't propagated to the catch (e) {} block:

argo-workflows/ui/src/shared/components/object-editor.tsx

Lines 117 to 122 in 1392ef5

	try {
	onChange(v);
	setError(null);
	} catch (e) {
	setError(e);
	}

Modifications

This moves the parsing logic to the setObject() function (which gets passed as onChange to <ObjectEditor>), which means errors will now be caught by the catch (e) {} block.

Verification

Tested by going http://localhost:8080/workflow-templates, creating a new WorkflowTemplate, and making edits.

fix_error_handling.mp4

[Adrien-D]

Tested on local env and it works well

Do you think its also possible to have the try/catch logic in the reducer and return a parsingError state ? So the hook would be 'safe' to use by itself without throwing an error ?

[MasonM]

@Adrien-D The problem is the parsing error needs to be propagated to <ObjectEditor> at the time onChange() is called, and I don't see any way of doing that when the parsing logic is in the reducer without lifting up the error state, which would involve a lot more changes.