feat(markdown): Allow markdown in workflow title and description

Fixes: argoproj#10126

- [x] new react component for handling workflow row name
- [x] new css file to manage row name column
- [x] new example file for title and description with markdown
- [x] include `remark-gfm` for GitHub Friendly Markdown (aka urls automatically translate to links)
- [x] Add User Guid -> UI Features -> Title and Description docs page

Signed-off-by: jmeridth <jmeridth@gmail.com>
Co-authored-by: bencompton <benjamincompton@gmail.com>

docs/fields.md

@@ -330,6 +330,8 @@ Workflow is the definition of a workflow resource
 
 - [`timeouts-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/timeouts-workflow.yaml)
 
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
+
 - [`volumes-emptydir.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-emptydir.yaml)
 
 - [`volumes-existing.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-existing.yaml)
@@ -751,6 +753,8 @@ WorkflowSpec is the specification of a Workflow.
 
 - [`timeouts-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/timeouts-workflow.yaml)
 
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
+
 - [`volumes-emptydir.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-emptydir.yaml)
 
 - [`volumes-existing.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-existing.yaml)
@@ -1184,6 +1188,8 @@ CronWorkflowSpec is the specification of a CronWorkflow
 
 - [`timeouts-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/timeouts-workflow.yaml)
 
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
+
 - [`volumes-emptydir.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-emptydir.yaml)
 
 - [`volumes-existing.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-existing.yaml)
@@ -3653,6 +3659,8 @@ MetricLabel is a single label for a prometheus metric
 - [`pod-metadata.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/pod-metadata.yaml)
 
 - [`steps-inline-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/steps-inline-workflow.yaml)
+
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
 </details>
 
 ### Fields
@@ -4832,6 +4840,8 @@ ObjectMeta is metadata that all persisted resources must have, which includes al
 
 - [`timeouts-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/timeouts-workflow.yaml)
 
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
+
 - [`volumes-emptydir.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-emptydir.yaml)
 
 - [`volumes-existing.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-existing.yaml)
@@ -5420,6 +5430,8 @@ A single application container that you want to run within a pod.
 
 - [`timeouts-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/timeouts-workflow.yaml)
 
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
+
 - [`volumes-emptydir.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-emptydir.yaml)
 
 - [`volumes-existing.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-existing.yaml)
@@ -6153,6 +6165,8 @@ PersistentVolumeClaimSpec describes the common attributes of storage devices and
 
 - [`timeouts-workflow.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/timeouts-workflow.yaml)
 
+- [`title-and-descriptin-with-markdown.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/title-and-descriptin-with-markdown.yaml)
+
 - [`volumes-emptydir.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-emptydir.yaml)
 
 - [`volumes-existing.yaml`](https://github.com/argoproj/argo-workflows/blob/master/examples/volumes-existing.yaml)

docs/title-and-description.md

@@ -0,0 +1,25 @@
+# Title and Description
+
+If add specific title and description annotations to your workflow they will show up on the workflow lists. It will also work with markdown.
+
+```yaml
+apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  name: my-wf
+  annotations:
+    workflows.argoproj.io/title: '**Build and test**'
+    workflows.argoproj.io/description: '`SuperDuperProject` PR #6529: Implement frobbing (aff39ee)'
+```
+
+Examples by row:
+
+- markdown title, markdown description using [`remark-gfm`](https://github.com/remarkjs/remark-gfm) to auto turn URLs into links
+- no title or description, defaults to `workflow.metadata.name`
+- markdown title, no description
+- no title, markdown description (title defaults to `workflow.metadata.name`)
+- markdown title, markdown description (description includes URL that auto turns into anchor
+- markdown title, markdown description, includes markdown URL
+- markdown title, markdown description, includes markdown URL (pr link goes to `github.com`)
+
+![Workflow Title And Description](assets/workflow-title-and-description.png)

examples/title-and-descriptin-with-markdown.yaml

@@ -0,0 +1,19 @@
+apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  generateName: title-and-description-with-markdown-
+  labels:
+    workflows.argoproj.io/archive-strategy: "false"
+  annotations:
+    workflows.argoproj.io/title: "**Test Title**"
+    workflows.argoproj.io/description: |
+      `This is a simple hello world example.`
+      You can also run it in Python: https://couler-proj.github.io/couler/examples/#hello-world
+spec:
+  entrypoint: whalesay
+  templates:
+  - name: whalesay
+    container:
+      image: docker/whalesay:latest
+      command: [cowsay]
+      args: ["hello world"]

mkdocs.yml

@@ -109,6 +109,7 @@ nav:
           - artifact-visualization.md
           - widgets.md
           - intermediate-inputs.md
+          - title-and-description.md
       - Debugging Tools:
           - workflow-events.md
           - debug-pause.md

ui/package.json

@@ -33,9 +33,11 @@
         "react-chartjs-2": "^2.11.2",
         "react-datepicker": "^4.10.0",
         "react-dom": "^16.14.0",
+        "react-markdown": "^8.0.5",
         "react-moment": "^1.1.3",
         "react-monaco-editor": "^0.50.1",
         "react-router-dom": "^5.3.4",
+        "remark-gfm": "^3.0.1",
         "superagent": "^8.0.9",
         "superagent-promise": "^1.1.0",
         "swagger-ui-react": "^4.12.0"

ui/src/app/workflows/components/workflows-row/workflows-row-name.tsx

@@ -0,0 +1,18 @@
+import * as kubernetes from 'argo-ui/src/models/kubernetes';
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations';
+
+require('./workflows-row.scss');
+
+export const WorkflowsRowName = ({metadata}: {metadata: kubernetes.ObjectMeta}) => {
+    const title = (metadata.annotations && metadata.annotations[ANNOTATION_TITLE]) || metadata.name;
+    const description = (metadata.annotations && metadata.annotations[ANNOTATION_DESCRIPTION] && `\n${metadata.annotations[ANNOTATION_DESCRIPTION]}`) || '';
+    const markdown = `${title}${description}`;
+    return (
+        <div className='wf-rows-name'>
+            <ReactMarkdown children={markdown} components={{p: React.Fragment}} remarkPlugins={[remarkGfm]} />
+        </div>
+    );
+};

ui/src/app/workflows/components/workflows-row/workflows-row.scss

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

ui/src/app/workflows/components/workflows-row/workflows-row.tsx

@@ -2,13 +2,13 @@ import {Ticker} from 'argo-ui/src/index';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {Workflow} from '../../../../models';
-import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations';
 import {uiUrl} from '../../../shared/base';
 import {DurationPanel} from '../../../shared/components/duration-panel';
 import {PhaseIcon} from '../../../shared/components/phase-icon';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {wfDuration} from '../../../shared/duration';
 import {WorkflowDrawer} from '../workflow-drawer/workflow-drawer';
+import {WorkflowsRowName} from './workflows-row-name';
 
 interface WorkflowsRowProps {
     workflow: Workflow;
@@ -50,8 +50,7 @@ export class WorkflowsRow extends React.Component<WorkflowsRowProps, WorkflowRow
                     </div>
                     <Link to={uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`)} className='small-11 row'>
                         <div className='columns small-3'>
-                            {(wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_TITLE]) || wf.metadata.name}
-                            {wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_DESCRIPTION] ? <p>{wf.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
+                            <WorkflowsRowName metadata={wf.metadata} />
                         </div>
                         <div className='columns small-1'>{wf.metadata.namespace}</div>
                         <div className='columns small-1'>