The <ObjectEditor> component used by all the edit pages encapsulates the logic for serializing/deserializing the object being edited, but it's extremely inefficient. For example, if you're editing a WorkflowTemplate, every single keystroke will cause parse() to be called twice and stringify() to be called 4 times. For large documents, this serialization/deserialization overhead adds up quickly.
Additionally, the "Submit" button is sometimes incorrectly grayed out, e.g. after clicking the "Update" button. This is happening because useEditableObject() is using reference comparisons on the object being edited, since it doesn't have access to the serialized string version encapsulated by <ObjectEditor>.
Modifications
This decouples <ObjectEditor> from the serialization/deseralization logic and lifts the state involved up to the useEditableObject() hook, as discussed in https://github.com/argoproj/argo-workflows/pull/13593#discussion_r1781972661. Doing so eliminates unnecessary serialization/deseralization: now, if you're editing a WorkflowTemplate, each keystroke will only call parse() once and won't call stringify() at all. This also fixes issues with the Submit button not reflecting the current page state, since useEditableObject() now uses string comparisons instead of ref comparisons.
Also, I did some minor cleanup:
Delete ui/src/cluster-workflow-templates/cluster-workflow-template-editor.tsx because it was identical to ui/src/workflow-templates/workflow-template-editor.tsx
Delete ui/src/shared/components/resource-editor/resource.scss because it stopped being used in #4470
Delete ui/src/shared/components/resource-editor/resource-editor.tsx, which was a thin wrapper around <ObjectEditor>, because the only files using it weren't actually passing any of the props (e.g. onSubmit) that enabled the extra functionality.
Fixes #13892
Motivation
The
<ObjectEditor>component used by all the edit pages encapsulates the logic for serializing/deserializing the object being edited, but it's extremely inefficient. For example, if you're editing aWorkflowTemplate, every single keystroke will cause parse() to be called twice and stringify() to be called 4 times. For large documents, this serialization/deserialization overhead adds up quickly.Additionally, the "Submit" button is sometimes incorrectly grayed out, e.g. after clicking the "Update" button. This is happening because
useEditableObject()is using reference comparisons on the object being edited, since it doesn't have access to the serialized string version encapsulated by<ObjectEditor>.Modifications
This decouples
<ObjectEditor>from the serialization/deseralization logic and lifts the state involved up to theuseEditableObject()hook, as discussed in https://github.com/argoproj/argo-workflows/pull/13593#discussion_r1781972661. Doing so eliminates unnecessary serialization/deseralization: now, if you're editing aWorkflowTemplate, each keystroke will only callparse()once and won't callstringify()at all. This also fixes issues with the Submit button not reflecting the current page state, sinceuseEditableObject()now uses string comparisons instead of ref comparisons.Also, I did some minor cleanup:
ui/src/cluster-workflow-templates/cluster-workflow-template-editor.tsxbecause it was identical toui/src/workflow-templates/workflow-template-editor.tsxui/src/shared/components/resource-editor/resource.scssbecause it stopped being used in #4470ui/src/shared/components/resource-editor/resource-editor.tsx, which was a thin wrapper around<ObjectEditor>, because the only files using it weren't actually passing any of the props (e.g.onSubmit) that enabled the extra functionality.Verification
Followed these steps to verify on each of the following pages: http://localhost:8080/workflow-templates, http://localhost:8080/cluster-workflow-templates, http://localhost:8080/cron-workflows, http://localhost:8080/event-sources, and http://localhost:8080/sensors
https://github.com/user-attachments/assets/c07c4aed-4b6c-4c49-a149-0a2aa4c4dad2
I also verified I can edit objects at http://localhost:8080/event-flow and http://localhost:8080/workflow-event-bindings