fix(ui): improve editor performance and fix Submit button. Fixes argoproj#13892 (argoproj#13915)

Signed-off-by: Mason Malone <[email protected]>
(cherry picked from commit 1392ef5)

Author: MasonM

ui/src/cluster-workflow-templates/cluster-workflow-template-creator.tsx

@@ -8,10 +8,11 @@ import {UploadButton} from '../shared/components/upload-button';
 import {exampleClusterWorkflowTemplate} from '../shared/examples';
 import {ClusterWorkflowTemplate} from '../shared/models';
 import {services} from '../shared/services';
-import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
+import {useEditableObject} from '../shared/use-editable-object';
+import {WorkflowTemplateEditor} from '../workflow-templates/workflow-template-editor';
 
 export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow: ClusterWorkflowTemplate) => void}) {
-    const [template, setTemplate] = useState<ClusterWorkflowTemplate>(exampleClusterWorkflowTemplate());
+    const {object: template, setObject: setTemplate, serialization, lang, setLang} = useEditableObject(exampleClusterWorkflowTemplate());
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -31,7 +32,7 @@ export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow:
                 </Button>
             </div>
             <ErrorNotice error={error} />
-            <ClusterWorkflowTemplateEditor template={template} onChange={setTemplate} onError={setError} />
+            <WorkflowTemplateEditor template={template} serialization={serialization} lang={lang} onLangChange={setLang} onChange={setTemplate} onError={setError} />
             <div>
                 <ExampleManifests />.
             </div>

ui/src/cluster-workflow-templates/cluster-workflow-template-details.tsx

@@ -18,9 +18,9 @@ import {services} from '../shared/services';
 import {useCollectEvent} from '../shared/use-collect-event';
 import {useEditableObject} from '../shared/use-editable-object';
 import {useQueryParams} from '../shared/use-query-params';
+import {WorkflowTemplateEditor} from '../workflow-templates/workflow-template-editor';
 import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
 import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
-import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
 
 import '../workflows/components/workflow-details/workflow-details.scss';
 
@@ -37,7 +37,7 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
     const [columns, setColumns] = useState<models.Column[]>([]);
 
     const [error, setError] = useState<Error>();
-    const [template, edited, setTemplate, resetTemplate] = useEditableObject<ClusterWorkflowTemplate>();
+    const {object: template, setObject: setTemplate, resetObject: resetTemplate, serialization, edited, lang, setLang} = useEditableObject<ClusterWorkflowTemplate>();
 
     useEffect(
         useQueryParams(history, p => {
@@ -138,7 +138,16 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
                 {!template ? (
                     <Loading />
                 ) : (
-                    <ClusterWorkflowTemplateEditor template={template} onChange={setTemplate} onError={setError} onTabSelected={setTab} selectedTabKey={tab} />
+                    <WorkflowTemplateEditor
+                        template={template}
+                        serialization={serialization}
+                        lang={lang}
+                        onLangChange={setLang}
+                        onChange={setTemplate}
+                        onError={setError}
+                        onTabSelected={setTab}
+                        selectedTabKey={tab}
+                    />
                 )}
             </>
             {template && (

ui/src/cluster-workflow-templates/cluster-workflow-template-editor.tsx

@@ -9,10 +9,11 @@ import {exampleCronWorkflow} from '../shared/examples';
 import {CronWorkflow} from '../shared/models';
 import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useEditableObject} from '../shared/use-editable-object';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) {
-    const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(nsUtils.getNamespaceWithDefault(namespace)));
+    const {object: cronWorkflow, setObject: setCronWorkflow, serialization, lang, setLang} = useEditableObject(exampleCronWorkflow(nsUtils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -32,7 +33,7 @@ export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; o
                 </Button>
             </div>
             <ErrorNotice error={error} />
-            <CronWorkflowEditor cronWorkflow={cronWorkflow} onChange={setCronWorkflow} onError={setError} />
+            <CronWorkflowEditor cronWorkflow={cronWorkflow} serialization={serialization} lang={lang} onLangChange={setLang} onChange={setCronWorkflow} onError={setError} />
             <p>
                 <ExampleManifests />.
             </p>

ui/src/cron-workflows/cron-workflow-creator.tsx

@@ -36,7 +36,7 @@ export function CronWorkflowDetails({match, location, history}: RouteComponentPr
     const [workflows, setWorkflows] = useState<Workflow[]>([]);
     const [columns, setColumns] = useState<models.Column[]>([]);
 
-    const [cronWorkflow, edited, setCronWorkflow, resetCronWorkflow] = useEditableObject<CronWorkflow>();
+    const {object: cronWorkflow, setObject: setCronWorkflow, resetObject: resetCronWorkflow, serialization, edited, lang, setLang} = useEditableObject<CronWorkflow>();
     const [error, setError] = useState<Error>();
 
     useEffect(
@@ -207,7 +207,16 @@ export function CronWorkflowDetails({match, location, history}: RouteComponentPr
                 {!cronWorkflow ? (
                     <Loading />
                 ) : (
-                    <CronWorkflowEditor cronWorkflow={cronWorkflow} onChange={setCronWorkflow} onError={setError} selectedTabKey={tab} onTabSelected={setTab} />
+                    <CronWorkflowEditor
+                        cronWorkflow={cronWorkflow}
+                        serialization={serialization}
+                        lang={lang}
+                        onLangChange={setLang}
+                        onChange={setCronWorkflow}
+                        onError={setError}
+                        selectedTabKey={tab}
+                        onTabSelected={setTab}
+                    />
                 )}
                 <SlidingPanel isShown={!!sidePanel} onClose={() => setSidePanel(null)}>
                     {sidePanel === 'share' && <WidgetGallery namespace={namespace} label={'workflows.argoproj.io/cron-workflow=' + name} />}

ui/src/cron-workflows/cron-workflow-details.tsx

@@ -5,6 +5,7 @@ import {LabelsAndAnnotationsEditor} from '../shared/components/editors/labels-an
 import {MetadataEditor} from '../shared/components/editors/metadata-editor';
 import {WorkflowParametersEditor} from '../shared/components/editors/workflow-parameters-editor';
 import {ObjectEditor} from '../shared/components/object-editor';
+import type {Lang} from '../shared/components/object-parser';
 import {CronWorkflow} from '../shared/models';
 import {CronWorkflowSpecEditor} from './cron-workflow-spec-editior';
 import {CronWorkflowStatusViewer} from './cron-workflow-status-viewer';
@@ -14,10 +15,16 @@ export function CronWorkflowEditor({
     onTabSelected,
     onError,
     onChange,
-    cronWorkflow
+    onLangChange,
+    cronWorkflow,
+    serialization,
+    lang
 }: {
     cronWorkflow: CronWorkflow;
-    onChange: (cronWorkflow: CronWorkflow) => void;
+    serialization: string;
+    lang: Lang;
+    onChange: (cronWorkflow: string | CronWorkflow) => void;
+    onLangChange: (lang: Lang) => void;
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
@@ -41,7 +48,16 @@ export function CronWorkflowEditor({
                 {
                     key: 'manifest',
                     title: 'Manifest',
-                    content: <ObjectEditor type='io.argoproj.workflow.v1alpha1.CronWorkflow' value={cronWorkflow} onChange={x => onChange({...x})} />
+                    content: (
+                        <ObjectEditor
+                            type='io.argoproj.workflow.v1alpha1.CronWorkflow'
+                            value={cronWorkflow}
+                            text={serialization}
+                            lang={lang}
+                            onLangChange={onLangChange}
+                            onChange={onChange}
+                        />
+                    )
                 },
                 {
                     key: 'cron',

ui/src/cron-workflows/cron-workflow-editor.tsx

@@ -15,7 +15,7 @@ import {GraphPanel} from '../shared/components/graph/graph-panel';
 import {Node} from '../shared/components/graph/types';
 import {Links} from '../shared/components/links';
 import {NamespaceFilter} from '../shared/components/namespace-filter';
-import {ResourceEditor} from '../shared/components/resource-editor/resource-editor';
+import {SerializingObjectEditor} from '../shared/components/object-editor';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
 import {Footnote} from '../shared/footnote';
@@ -317,7 +317,7 @@ export function EventFlowPage({history, location, match}: RouteComponentProps<an
                                 {
                                     title: 'SUMMARY',
                                     key: 'summary',
-                                    content: <ResourceEditor kind={selected.kind} value={selected.value} />
+                                    content: <SerializingObjectEditor type={'io.argoproj.workflow.v1alpha1.' + selected.kind} value={selected.value} />
                                 },
                                 {
                                     title: 'LOGS',

ui/src/event-flow/event-flow-page.tsx

@@ -8,10 +8,11 @@ import {exampleEventSource} from '../shared/examples';
 import {EventSource} from '../shared/models';
 import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useEditableObject} from '../shared/use-editable-object';
 import {EventSourceEditor} from './event-source-editor';
 
 export function EventSourceCreator({onCreate, namespace}: {namespace: string; onCreate: (eventSource: EventSource) => void}) {
-    const [eventSource, setEventSource] = useState<EventSource>(exampleEventSource(nsUtils.getNamespaceWithDefault(namespace)));
+    const {object: eventSource, setObject: setEventSource, serialization, lang, setLang} = useEditableObject(exampleEventSource(nsUtils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -31,7 +32,7 @@ export function EventSourceCreator({onCreate, namespace}: {namespace: string; on
                 </Button>
             </div>
             <ErrorNotice error={error} />
-            <EventSourceEditor eventSource={eventSource} onChange={setEventSource} onError={setError} />
+            <EventSourceEditor eventSource={eventSource} serialization={serialization} lang={lang} onChange={setEventSource} onLangChange={setLang} onError={setError} />
             <p>
                 <a href='https://github.com/argoproj/argo-events/tree/stable/examples/event-sources'>
                     Example event sources <i className='fa fa-external-link-alt' />

ui/src/event-sources/event-source-creator.tsx

@@ -54,7 +54,7 @@ export function EventSourceDetails({history, location, match}: RouteComponentPro
     );
 
     const [error, setError] = useState<Error>();
-    const [eventSource, edited, setEventSource, resetEventSource] = useEditableObject<EventSource>();
+    const {object: eventSource, setObject: setEventSource, resetObject: resetEventSource, serialization, edited, lang, setLang} = useEditableObject<EventSource>();
 
     const selected = (() => {
         if (!selectedNode) {
@@ -139,7 +139,16 @@ export function EventSourceDetails({history, location, match}: RouteComponentPro
                 {!eventSource ? (
                     <Loading />
                 ) : (
-                    <EventSourceEditor eventSource={eventSource} onChange={setEventSource} onError={setError} onTabSelected={setTab} selectedTabKey={tab} />
+                    <EventSourceEditor
+                        eventSource={eventSource}
+                        serialization={serialization}
+                        lang={lang}
+                        onChange={setEventSource}
+                        onLangChange={setLang}
+                        onError={setError}
+                        onTabSelected={setTab}
+                        selectedTabKey={tab}
+                    />
                 )}
             </>
             <SlidingPanel isShown={!!selected} onClose={() => setSelectedNode(null)}>

ui/src/event-sources/event-source-details.tsx

@@ -3,16 +3,23 @@ import * as React from 'react';
 
 import {MetadataEditor} from '../shared/components/editors/metadata-editor';
 import {ObjectEditor} from '../shared/components/object-editor';
+import type {Lang} from '../shared/components/object-parser';
 import {EventSource} from '../shared/models';
 
 export function EventSourceEditor({
     onChange,
+    onLangChange,
     onTabSelected,
     selectedTabKey,
-    eventSource
+    eventSource,
+    serialization,
+    lang
 }: {
     eventSource: EventSource;
-    onChange: (template: EventSource) => void;
+    serialization: string;
+    lang: Lang;
+    onChange: (template: string | EventSource) => void;
+    onLangChange: (lang: Lang) => void;
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
@@ -27,7 +34,16 @@ export function EventSourceEditor({
                 {
                     key: 'manifest',
                     title: 'Manifest',
-                    content: <ObjectEditor type='io.argoproj.events.v1alpha1.EventSource' value={eventSource} onChange={x => onChange({...x})} />
+                    content: (
+                        <ObjectEditor
+                            type='io.argoproj.events.v1alpha1.EventSource'
+                            value={eventSource}
+                            text={serialization}
+                            lang={lang}
+                            onLangChange={onLangChange}
+                            onChange={onChange}
+                        />
+                    )
                 },
 
                 {