feat: Display title and description in archived view

Already working in normal workflow view via #9805 - create shared react component for workflow row name to dry up usage of this code in both normal and archive workflow lists - add documentation regarding title and description annotations Signed-off-by: jmeridth <jmeridth@gmail.com>
argoproj · Mar 31, 2023 · e193bbd · e193bbd
1 parent 1d04d88
commit e193bbd
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 4 deletions.
diff --git a/docs/assets/workflow-title-and-description.png b/docs/assets/workflow-title-and-description.png
diff --git a/docs/title-and-description.md b/docs/title-and-description.md
@@ -0,0 +1,22 @@
+# Title and Description
+
+If you 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: 'Test Title'
+    workflows.argoproj.io/description: 'Test Description'
+```
+
+Note:
+
+- no title or description, defaults to `workflow.metadata.name`
+- no title, description (title defaults to `workflow.metadata.name`)
+- title, no description
+- title and description
+
+![Workflow Title And Description](assets/workflow-title-and-description.png)
diff --git a/ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx b/ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx
@@ -10,6 +10,7 @@ import {Loading} from '../../../shared/components/loading';
 import {PaginationPanel} from '../../../shared/components/pagination-panel';
 import {PhaseIcon} from '../../../shared/components/phase-icon';
 import {Timestamp} from '../../../shared/components/timestamp';
+import {WorkflowsRowName} from '../../../shared/components/workflows-row-name/workflows-row-name';
 import {ZeroState} from '../../../shared/components/zero-state';
 import {formatDuration, wfDuration} from '../../../shared/duration';
 import {Pagination, parseLimit} from '../../../shared/pagination';
@@ -275,7 +276,9 @@ export class ArchivedWorkflowList extends BasePage<RouteComponentProps<any>, Sta
                             <div className='columns small-1'>
                                 <PhaseIcon value={w.status.phase} />
                             </div>
-                            <div className='columns small-3'>{w.metadata.name}</div>
+                            <div className='columns small-3'>
+                                <WorkflowsRowName metadata={w.metadata} />
+                            </div>
                             <div className='columns small-2'>{w.metadata.namespace}</div>
                             <div className='columns small-2'>
                                 <Timestamp date={w.status.startedAt} />

diff --git a/ui/src/app/shared/components/workflows-row-name/workflows-row-name.scss b/ui/src/app/shared/components/workflows-row-name/workflows-row-name.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;
+}
diff --git a/ui/src/app/shared/components/workflows-row-name/workflows-row-name.tsx b/ui/src/app/shared/components/workflows-row-name/workflows-row-name.tsx
@@ -0,0 +1,12 @@
+import * as kubernetes from 'argo-ui/src/models/kubernetes';
+import * as React from 'react';
+import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations';
+
+require('./workflows-row-name.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 content = `${title}${description}`;
+    return <div className='wf-rows-name'>{content}</div>;
+};
diff --git a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
@@ -2,11 +2,11 @@ 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 {WorkflowsRowName} from '../../../shared/components/workflows-row-name/workflows-row-name';
 import {wfDuration} from '../../../shared/duration';
 import {WorkflowDrawer} from '../workflow-drawer/workflow-drawer';
 
@@ -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'>