feat: Allow markdown title and description in CronWorkflows, Workflow…

…Templates, & ClusterWorkflowTemplates. Fixes argoproj#12644 (argoproj#12697)

Signed-off-by: panicboat <panicboat@gmail.com>
Co-authored-by: Anton Gilgur <4970083+agilgur5@users.noreply.github.com>

docs/title-and-description.md

@@ -15,7 +15,7 @@ metadata:
 ```
 
 The above manifest will render as a row like the below image:
-![Title and Description Example](assets/workflow-title-and-description.png)
+![Title and Description Example](assets/title-and-description-workflow.png)
 
 ## Embedded Markdown
 
@@ -34,7 +34,7 @@ metadata:
 ```
 
 The above manifest will render as a row like the below image:
-![Markdown Example](assets/workflow-title-and-description-markdown.png)
+![Markdown Example](assets/title-and-description-markdown-workflow.png)
 
 Below are a few more examples:
 
@@ -76,4 +76,67 @@ metadata:
 ```
 
 The above examples will render as rows like the below image:
-![More Markdown Examples](assets/workflow-title-and-description-markdown-complex.png)
+![More Markdown Examples](assets/title-and-description-markdown-complex-workflow.png)
+
+### For `ClusterWorkflowTemplates`
+
+> v3.6 and after
+
+You can also add the `workflows.argoproj.io/title` and `workflows.argoproj.io/description` annotations with embedded markdown to a `ClusterWorkflowTemplate` to display in the list:
+
+```yaml
+apiVersion: argoproj.io/v1alpha1
+kind: ClusterWorkflowTemplate
+metadata:
+  name: my-cluster-workflow-template
+  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
+```
+
+The above manifest will render as a row like the below image:
+![ClusterWorkflowTemplate Example](assets/title-and-description-markdown-cluster-workflow-template.png)
+
+### For `CronWorkflows`
+
+> v3.6 and after
+
+You can also add the `workflows.argoproj.io/title` and `workflows.argoproj.io/description` annotations with embedded markdown to a `CronWorkflow` to display in the list:
+
+```yaml
+apiVersion: argoproj.io/v1alpha1
+kind: CronWorkflow
+metadata:
+  name: my-cron-workflow
+  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
+```
+
+The above manifest will render as a row like the below image:
+![CronWorkflow Example](assets/title-and-description-markdown-cron-workflow.png)
+
+### For `WorkflowTemplates`
+
+> v3.6 and after
+
+You can also add the `workflows.argoproj.io/title` and `workflows.argoproj.io/description` annotations with embedded markdown to a `WorkflowTemplate` to display in the list:
+
+```yaml
+apiVersion: argoproj.io/v1alpha1
+kind: WorkflowTemplate
+metadata:
+  name: my-workflow-template
+  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
+```
+
+The above manifest will render as a row like the below image:
+![WorkflowTemplate Example](assets/title-and-description-markdown-workflow-template.png)

ui/src/cluster-workflow-templates/cluster-workflow-template-list.scss

@@ -5,4 +5,22 @@
   &__row:hover {
     box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1), 0 0 0 1px rgba($argo-color-teal-5, .5);
   }
-}
+}
+
+.cluster-workflow-templates-list {
+  padding: 1em;
+
+  &__row-container {
+    a {
+      color: $argo-color-gray-6;
+    }
+
+    a:hover {
+      color: $argo-color-teal-5;
+    }
+  }
+}
+
+.row.pt-60 {
+  padding-top: 60px;
+}

ui/src/cluster-workflow-templates/cluster-workflow-template-list.tsx

@@ -19,6 +19,7 @@ import {useCollectEvent} from '../shared/use-collect-event';
 import {useQueryParams} from '../shared/use-query-params';
 import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 import {ClusterWorkflowTemplateCreator} from './cluster-workflow-template-creator';
+import {ClusterWorkflowTemplateMarkdown} from './cluster-workflow-template-markdown';
 
 import './cluster-workflow-template-list.scss';
 
@@ -83,15 +84,19 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP
                         </div>
                     </div>
                     {templates.map(t => (
-                        <Link className='row argo-table-list__row' key={t.metadata.uid} to={uiUrl(`cluster-workflow-templates/${t.metadata.name}`)}>
-                            <div className='columns small-1'>
-                                <i className='fa fa-clone' />
+                        <div className='cluster-workflow-templates-list__row-container' key={`${t.metadata.namespace}/${t.metadata.name}`}>
+                            <div className='row argo-table-list__row'>
+                                <div className='columns small-1'>
+                                    <i className='fa fa-clone' />
+                                </div>
+                                <Link to={{pathname: uiUrl(`cluster-workflow-templates/${t.metadata.name}`)}} className='columns small-5'>
+                                    <ClusterWorkflowTemplateMarkdown workflow={t} key={`{t.metadata.namespace}/${t.metadata.name}`} />
+                                </Link>
+                                <div className='columns small-3'>
+                                    <Timestamp date={t.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormat} />
+                                </div>
                             </div>
-                            <div className='columns small-5'>{t.metadata.name}</div>
-                            <div className='columns small-3'>
-                                <Timestamp date={t.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormat} />
-                            </div>
-                        </Link>
+                        </div>
                     ))}
                 </div>
                 <Footnote>

ui/src/cluster-workflow-templates/cluster-workflow-template-markdown.scss

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

ui/src/cluster-workflow-templates/cluster-workflow-template-markdown.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../shared/annotations';
+import {SuspenseReactMarkdownGfm} from '../shared/components/suspense-react-markdown-gfm';
+import {ClusterWorkflowTemplate} from '../shared/models';
+
+require('./cluster-workflow-template-markdown.scss');
+
+interface ClusterWorkflowTemplateMarkdownProps {
+    workflow: ClusterWorkflowTemplate;
+}
+
+export function ClusterWorkflowTemplateMarkdown(props: ClusterWorkflowTemplateMarkdownProps) {
+    const wf = props.workflow;
+    // title + description vars
+    const title = wf.metadata.annotations?.[ANNOTATION_TITLE] ?? wf.metadata.name;
+    const description = (wf.metadata.annotations?.[ANNOTATION_DESCRIPTION] && `\n${wf.metadata.annotations[ANNOTATION_DESCRIPTION]}`) || '';
+    const hasAnnotation = title !== wf.metadata.name || description !== '';
+    const markdown = `${title}${description}`;
+
+    return <div className='wf-rows-name'>{hasAnnotation ? <SuspenseReactMarkdownGfm markdown={markdown} /> : markdown}</div>;
+}

ui/src/cron-workflows/cron-workflow-list.scss

@@ -4,4 +4,22 @@
   &__row:hover {
     box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1), 0 0 0 1px rgba($argo-color-teal-5, .5);
   }
-}
+}
+
+.cron-workflows-list {
+  padding: 1em;
+
+  &__row-container {
+    a {
+      color: $argo-color-gray-6;
+    }
+
+    a:hover {
+      color: $argo-color-teal-5;
+    }
+  }
+}
+
+.row.pt-60 {
+  padding-top: 60px;
+}

ui/src/cron-workflows/cron-workflow-list.tsx

@@ -1,31 +1,28 @@
 import {Page} from 'argo-ui/src/components/page/page';
 import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
-import {Ticker} from 'argo-ui/src/components/ticker';
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
-import {Link, RouteComponentProps} from 'react-router-dom';
+import {RouteComponentProps} from 'react-router-dom';
 
-import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../shared/annotations';
 import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {ExampleManifests} from '../shared/components/example-manifests';
 import {InfoIcon} from '../shared/components/fa-icons';
 import {Loading} from '../shared/components/loading';
-import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
+import {TimestampSwitch} from '../shared/components/timestamp';
 import {ZeroState} from '../shared/components/zero-state';
 import {Context} from '../shared/context';
-import {getNextScheduledTime} from '../shared/cron';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
-import {CronWorkflow, CronWorkflowSpec} from '../shared/models';
+import {CronWorkflow} from '../shared/models';
 import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
 import {useCollectEvent} from '../shared/use-collect-event';
 import {useQueryParams} from '../shared/use-query-params';
 import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
 import {CronWorkflowCreator} from './cron-workflow-creator';
 import {CronWorkflowFilters} from './cron-workflow-filters';
-import {PrettySchedule} from './pretty-schedule';
+import {CronWorkflowRow} from './cron-workflow-row';
 
 import './cron-workflow-list.scss';
 
@@ -156,56 +153,16 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
                                         />
                                     </div>
                                 </div>
-                                {cronWorkflows.map(w => (
-                                    <Link
-                                        className='row argo-table-list__row'
-                                        key={`${w.metadata.namespace}/${w.metadata.name}`}
-                                        to={uiUrl(`cron-workflows/${w.metadata.namespace}/${w.metadata.name}`)}>
-                                        <div className='columns small-1'>{w.spec.suspend ? <i className='fa fa-pause' /> : <i className='fa fa-clock' />}</div>
-                                        <div className='columns small-2'>
-                                            {w.metadata.annotations?.[ANNOTATION_TITLE] ?? w.metadata.name}
-                                            {w.metadata.annotations?.[ANNOTATION_DESCRIPTION] ? <p>{w.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
-                                        </div>
-                                        <div className='columns small-1'>{w.metadata.namespace}</div>
-                                        <div className='columns small-1'>{w.spec.timezone}</div>
-                                        <div className='columns small-1'>
-                                            {w.spec.schedule
-                                                ? w.spec.schedule
-                                                : w.spec.schedules.map(schedule => (
-                                                      <>
-                                                          {schedule}
-                                                          <br />
-                                                      </>
-                                                  ))}
-                                        </div>
-                                        <div className='columns small-2'>
-                                            {w.spec.schedule ? (
-                                                <PrettySchedule schedule={w.spec.schedule} />
-                                            ) : (
-                                                <>
-                                                    {w.spec.schedules.map(schedule => (
-                                                        <>
-                                                            <PrettySchedule schedule={schedule} />
-                                                            <br />
-                                                        </>
-                                                    ))}
-                                                </>
-                                            )}
-                                        </div>
-                                        <div className='columns small-2'>
-                                            <Timestamp date={w.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormatCreation} />
-                                        </div>
-                                        <div className='columns small-2'>
-                                            {w.spec.suspend ? (
-                                                ''
-                                            ) : (
-                                                <Ticker intervalMs={1000}>
-                                                    {() => <Timestamp date={getSpecNextScheduledTime(w.spec)} displayISOFormat={storedDisplayISOFormatNextScheduled} />}
-                                                </Ticker>
-                                            )}
-                                        </div>
-                                    </Link>
-                                ))}
+                                {cronWorkflows.map(w => {
+                                    return (
+                                        <CronWorkflowRow
+                                            workflow={w}
+                                            displayISOFormatCreation={storedDisplayISOFormatCreation}
+                                            displayISOFormatNextScheduled={storedDisplayISOFormatNextScheduled}
+                                            key={`{w.metadata.namespace}/${w.metadata.name}`}
+                                        />
+                                    );
+                                })}
                             </div>
                             <Footnote>
                                 <InfoIcon /> Cron workflows are workflows that run on a preset schedule. Next scheduled run assumes workflow-controller is in UTC.{' '}
@@ -221,18 +178,3 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
         </Page>
     );
 }
-
-function getSpecNextScheduledTime(spec: CronWorkflowSpec): Date {
-    if (spec.schedule) {
-        return getNextScheduledTime(spec.schedule, spec.timezone);
-    }
-
-    let out: Date;
-    spec.schedules.forEach(schedule => {
-        const next = getNextScheduledTime(schedule, spec.timezone);
-        if (!out || next.getTime() < out.getTime()) {
-            out = next;
-        }
-    });
-    return out;
-}

ui/src/cron-workflows/cron-workflow-row.scss

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