From c8e9fcfb2c0ec943a9d3a4fb2000f9950cf23cc0 Mon Sep 17 00:00:00 2001
From: panicboat <panicboat@gmail.com>
Date: Mon, 25 Nov 2024 05:49:01 +0000
Subject: [PATCH] feat: Allow markdown title and description in KeyValueEditor

Signed-off-by: panicboat <panicboat@gmail.com>
---
 .../components/editors/key-value-editor.scss    |  8 ++++++++
 .../components/editors/key-value-editor.tsx     | 17 +++++++++++++++--
 .../editors/labels-and-annotations-editor.tsx   |  3 ++-
 .../editors/workflow-parameters-editor.tsx      |  1 +
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/shared/components/editors/key-value-editor.scss

diff --git a/ui/src/shared/components/editors/key-value-editor.scss b/ui/src/shared/components/editors/key-value-editor.scss
new file mode 100644
index 000000000000..4f6b77f1b094
--- /dev/null
+++ b/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;
+}
diff --git a/ui/src/shared/components/editors/key-value-editor.tsx b/ui/src/shared/components/editors/key-value-editor.tsx
index 0a443aaae695..0df5faf03357 100644
--- a/ui/src/shared/components/editors/key-value-editor.tsx
+++ b/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' />
diff --git a/ui/src/shared/components/editors/labels-and-annotations-editor.tsx b/ui/src/shared/components/editors/labels-and-annotations-editor.tsx
index b8312c1fefe4..f5c151503dec 100644
--- a/ui/src/shared/components/editors/labels-and-annotations-editor.tsx
+++ b/ui/src/shared/components/editors/labels-and-annotations-editor.tsx
@@ -8,7 +8,7 @@ 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>
@@ -16,6 +16,7 @@ export function LabelsAndAnnotationsEditor({value, onChange}: {value: kubernetes
                     keyValues={value && value.annotations}
                     onChange={annotations => onChange({...value, annotations})}
                     hide={key => key === 'kubectl.kubernetes.io/last-applied-configuration'}
+                    source={'annotations'}
                 />
             </div>
         </>
diff --git a/ui/src/shared/components/editors/workflow-parameters-editor.tsx b/ui/src/shared/components/editors/workflow-parameters-editor.tsx
index 6f0f310bc890..ca18b925df78 100644
--- a/ui/src/shared/components/editors/workflow-parameters-editor.tsx
+++ b/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>
         </>