fix(ui): Add editor nav and make taller (#6047)

Signed-off-by: Alex Collins <alex_collins@intuit.com>

ui/src/app/shared/components/object-editor/object-editor.tsx

@@ -64,13 +64,39 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
     }, [lang, type]);
 
     const editor = createRef<MonacoEditor>();
+    // this calculation is rough, it is probably hard to work for for every case, essentially it is:
+    // some pixels above and below for buttons, plus a bit of a buffer/padding
+    const height = Math.max(600, window.innerHeight * 0.9 - 250);
 
     return (
         <>
             <div style={{paddingBottom: '1em'}}>
                 <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>
+
+                {Object.keys(value).map(x => (
+                    <Button
+                        key={x}
+                        icon='caret-right'
+                        outline={true}
+                        onClick={() => {
+                            // Attempt to move the the correct section of the document. Ideally, we'd have the line at the top of the
+                            // editor, but Monaco editor does not have method for this (e.g. `revealLineAtTop`).
+
+                            // find the line for the section in either YAML or JSON
+                            const index = text.split('\n').findIndex((y, i) => (lang === 'yaml' ? y.startsWith(x + ':') : y.includes('"' + x + '":')));
+
+                            if (index >= 0) {
+                                const lineNumber = index + 1;
+                                editor.current.editor.revealLineInCenter(lineNumber);
+                                editor.current.editor.setPosition({lineNumber, column: 0});
+                                editor.current.editor.focus();
+                            }
+                        }}>
+                        {x}
+                    </Button>
+                ))}
                 {buttons}
             </div>
             <div>
@@ -79,7 +105,7 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
                     key='editor'
                     defaultValue={text}
                     language={lang}
-                    height='400px'
+                    height={height + 'px'}
                     options={{
                         readOnly: onChange === null,
                         minimap: {enabled: false},