feat: Allow markdown title and description in KeyValueEditor (#13935)

Signed-off-by: panicboat <panicboat@gmail.com>

Author: panicboat

ui/src/shared/components/editors/key-value-editor.scss

@@ -0,0 +1,8 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
+.markdown-rows-name {
+  line-height: 1.5em;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: pre-line;
+}

ui/src/shared/components/editors/key-value-editor.tsx

@@ -1,13 +1,24 @@
 import * as React from 'react';
 import {useState} from 'react';
 
+import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../annotations';
+import {SuspenseReactMarkdownGfm} from '../suspense-react-markdown-gfm';
 import {TextInput} from '../text-input';
 
+require('./key-value-editor.scss');
+
 interface KeyValues {
     [key: string]: string;
 }
 
-export function KeyValueEditor({onChange, keyValues = {}, hide}: {keyValues: KeyValues; onChange: (value: KeyValues) => void; hide?: (key: string) => boolean}) {
+interface KeyValueEditorProps {
+    keyValues: KeyValues;
+    onChange: (value: KeyValues) => void;
+    hide?: (key: string) => boolean;
+    source?: string;
+}
+
+export function KeyValueEditor({onChange, keyValues = {}, hide, source}: KeyValueEditorProps) {
     const [name, setName] = useState('');
     const [value, setValue] = useState('');
 
@@ -32,7 +43,9 @@ export function KeyValueEditor({onChange, keyValues = {}, hide}: {keyValues: Key
                 .map(([k, v]) => (
                     <div className='row white-box__details-row' key={k}>
                         <div className='columns small-4'>{k}</div>
-                        <div className='columns small-6'>{v}</div>
+                        <div className='columns small-6 markdown-rows-name'>
+                            {source == 'annotations' && [ANNOTATION_DESCRIPTION, ANNOTATION_TITLE].indexOf(k) !== -1 ? <SuspenseReactMarkdownGfm markdown={v} /> : v}
+                        </div>
                         <div className='columns small-2'>
                             <button onClick={() => deleteItem(k)}>
                                 <i className='fa fa-times-circle' />

ui/src/shared/components/editors/labels-and-annotations-editor.tsx

@@ -8,14 +8,15 @@ export function LabelsAndAnnotationsEditor({value, onChange}: {value: kubernetes
         <>
             <div className='white-box'>
                 <h5>Labels</h5>
-                <KeyValueEditor keyValues={value && value.labels} onChange={labels => onChange({...value, labels})} />
+                <KeyValueEditor keyValues={value && value.labels} onChange={labels => onChange({...value, labels})} source={'labels'} />
             </div>
             <div className='white-box'>
                 <h5>Annotations</h5>
                 <KeyValueEditor
                     keyValues={value && value.annotations}
                     onChange={annotations => onChange({...value, annotations})}
                     hide={key => key === 'kubectl.kubernetes.io/last-applied-configuration'}
+                    source={'annotations'}
                 />
             </div>
         </>

ui/src/shared/components/editors/workflow-parameters-editor.tsx

@@ -37,6 +37,7 @@ export function WorkflowParametersEditor<T extends WorkflowSpec>(props: {value:
                         );
                         props.onChange(props.value);
                     }}
+                    source={'parameters'}
                 />
             </div>
         </>