From 33c51ed17250d2a7b66bfd02badbd012ee33dfb3 Mon Sep 17 00:00:00 2001
From: panicboat <panicboat@gmail.com>
Date: Sun, 18 Feb 2024 13:41:36 +0900
Subject: [PATCH] feat: CronWorkflow/WorkflowTemplate title/description in list
 view (#12674)

Signed-off-by: panicboat <panicboat@gmail.com>
Co-authored-by: Anton Gilgur <4970083+agilgur5@users.noreply.github.com>
---
 .../components/cron-workflow-list/cron-workflow-list.tsx    | 6 +++++-
 .../workflow-template-list/workflow-template-list.tsx       | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx b/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx
index 5ecd5b3ee17f..054ef285a242 100644
--- a/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx
+++ b/ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 import {CronWorkflow} from '../../../../models';
+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';
@@ -145,7 +146,10 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
                                         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-3'>{w.metadata.name}</div>
+                                        <div className='columns small-3'>
+                                            {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-2'>{w.metadata.namespace}</div>
                                         <div className='columns small-1'>{w.spec.timezone}</div>
                                         <div className='columns small-1'>{w.spec.schedule}</div>
diff --git a/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx b/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
index 47eb3822d928..2aa8f7a3f675 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
@@ -4,6 +4,7 @@ import {useContext, useEffect, useState} from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 
 import {WorkflowTemplate} from '../../../../models';
+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';
@@ -146,7 +147,10 @@ export function WorkflowTemplateList({match, location, history}: RouteComponentP
                                         <div className='columns small-1'>
                                             <i className='fa fa-clone' />
                                         </div>
-                                        <div className='columns small-5'>{t.metadata.name}</div>
+                                        <div className='columns small-5'>
+                                            {t.metadata.annotations?.[ANNOTATION_TITLE] ?? t.metadata.name}
+                                            {t.metadata.annotations?.[ANNOTATION_DESCRIPTION] ? <p>{t.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
+                                        </div>
                                         <div className='columns small-3'>{t.metadata.namespace}</div>
                                         <div className='columns small-3'>
                                             <Timestamp date={t.metadata.creationTimestamp} />