fix(ui): Fix YAML/JSON toggle. Fixes #5690 (#5694)

argoproj · Apr 19, 2021 · b7b4b3f · b7b4b3f
1 parent 279b78b
commit b7b4b3f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/ui/src/app/shared/components/object-editor/object-editor.tsx b/ui/src/app/shared/components/object-editor/object-editor.tsx
@@ -4,9 +4,9 @@ import {createRef, useEffect, useState} from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import {uiUrl} from '../../base';
 import {ScopedLocalStorage} from '../../scoped-local-storage';
+import {Button} from '../button';
 import {parse, stringify} from '../object-parser';
 import {PhaseIcon} from '../phase-icon';
-import {ToggleButton} from '../toggle-button';
 
 interface Props<T> {
     type?: string;
@@ -29,8 +29,10 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
     useEffect(() => {
         // we ONLY want to change the text, if the normalized version has changed, this prevents white-space changes
         // from resulting in a significant change
-        if (text !== stringify(parse(editor.current.editor.getValue()), lang)) {
-            editor.current.editor.setValue(text);
+        const editorText = stringify(parse(editor.current.editor.getValue()), lang);
+        const editorLang = editor.current.editor.getValue().startsWith('{') ? 'json' : 'yaml';
+        if (text !== editorText || lang !== editorLang) {
+            editor.current.editor.setValue(stringify(parse(text), lang));
         }
     }, [text, lang]);
 
@@ -66,9 +68,9 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
     return (
         <>
             <div style={{paddingBottom: '1em'}}>
-                <ToggleButton toggled={lang === 'yaml'} onToggle={() => setLang(lang === 'yaml' ? 'json' : 'yaml')}>
-                    YAML
-                </ToggleButton>
+                <Button outline={true} onClick={() => setLang(lang === 'yaml' ? 'json' : 'yaml')}>
+                    <span style={{fontWeight: lang === 'json' ? 'bold' : 'normal'}}>JSON</span>/<span style={{fontWeight: lang === 'yaml' ? 'bold' : 'normal'}}>YAML</span>
+                </Button>
                 {buttons}
             </div>
             <div>

diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -134,7 +134,7 @@ const WorkflowNodeSummary = (props: Props) => {
         <div className='white-box'>
             <div className='white-box__details'>{<AttributeRows attributes={attributes} />}</div>
             <div>
-                {props.onShowYaml && <Button onClick={() => props.onShowYaml(props.node.id)}>YAML</Button>}{' '}
+                {props.onShowYaml && <Button onClick={() => props.onShowYaml(props.node.id)}>MANIFEST</Button>}{' '}
                 {props.node.type === 'Pod' && props.onShowContainerLogs && (
                     <DropDownButton
                         onClick={() => showLogs()}