Merge branch 'main' into ci-cd-example-workflow

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)

examples/README.md

@@ -1,3 +1,3 @@
 # Documentation by Example
 
-This has been moved to [the docs](https://argo-workflows.readthedocs.io/en/latest/walk-through/).
+This directory contains various examples and is referenced by [the docs site](https://argo-workflows.readthedocs.io).

go.mod

@@ -212,7 +212,7 @@ require (
 	github.com/go-logr/logr v1.4.1 // indirect
 	github.com/go-openapi/jsonpointer v0.20.2 // indirect
 	github.com/go-openapi/swag v0.22.6 // indirect
-	github.com/golang-jwt/jwt/v4 v4.5.0 // indirect
+	github.com/golang-jwt/jwt/v4 v4.5.1 // indirect
 	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
 	github.com/golang/mock v1.6.0
 	github.com/google/btree v1.0.1 // indirect

go.sum

@@ -331,8 +331,8 @@ github.com/gogo/protobuf v1.3.2 h1:Ov1cvc58UF3b5XjBnZv7+opcTcQFZebYjWzi34vdm4Q=
 github.com/gogo/protobuf v1.3.2/go.mod h1:P1XiOD3dCwIKUDQYPy72D8LYyHL2YPYrpS2s69NZV8Q=
 github.com/golang-jwt/jwt/v4 v4.0.0/go.mod h1:/xlHOz8bRuivTWchD4jCa+NbatV+wEUSzwAxVc6locg=
 github.com/golang-jwt/jwt/v4 v4.2.0/go.mod h1:/xlHOz8bRuivTWchD4jCa+NbatV+wEUSzwAxVc6locg=
-github.com/golang-jwt/jwt/v4 v4.5.0 h1:7cYmW1XlMY7h7ii7UhUyChSgS5wUJEnm9uZVTGqOWzg=
-github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
+github.com/golang-jwt/jwt/v4 v4.5.1 h1:JdqV9zKUdtaa9gdPlywC3aeoEsR681PlKC+4F5gQgeo=
+github.com/golang-jwt/jwt/v4 v4.5.1/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
 github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
 github.com/golang-sql/civil v0.0.0-20190719163853-cb61b32ac6fe/go.mod h1:8vg3r2VgvsThLBIFL93Qb5yWzgyZWhEmBwUJWevAkK0=

mkdocs.yml

@@ -1,4 +1,5 @@
 site_name: Argo Workflows - The workflow engine for Kubernetes
+site_url: !ENV [READTHEDOCS_CANONICAL_URL, https://argo-workflows.readthedocs.io/en/latest/] # https://docs.readthedocs.io/en/stable/canonical-urls.html#how-to-specify-the-canonical-url, https://www.mkdocs.org/user-guide/configuration/#environment-variables
 repo_url: https://github.com/argoproj/argo-workflows
 edit_uri: https://github.com/argoproj/argo-workflows/edit/main/docs
 strict: true

test/e2e/hooks_test.go

@@ -5,6 +5,7 @@ package e2e
 import (
 	"strings"
 	"testing"
+	"time"
 
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/suite"
@@ -805,7 +806,7 @@ spec:
         args: ["sleep", "5"]
 `).When().
 		SubmitWorkflow().
-		WaitForWorkflow(fixtures.ToBeCompleted).
+		WaitForWorkflow(fixtures.ToBeCompleted, 2*time.Minute).
 		WaitForWorkflow(fixtures.Condition(func(wf *v1alpha1.Workflow) (bool, string) {
 			onExitNodeName = common.GenerateOnExitNodeName(wf.ObjectMeta.Name)
 			onExitNode := wf.Status.Nodes.FindByDisplayName(onExitNodeName)

test/e2e/signals_test.go

@@ -150,7 +150,7 @@ func (s *SignalsSuite) TestSignaledContainerSet() {
 		Workflow("@testdata/signaled-container-set-workflow.yaml").
 		When().
 		SubmitWorkflow().
-		WaitForWorkflow().
+		WaitForWorkflow(killDuration).
 		Then().
 		ExpectWorkflow(func(t *testing.T, metadata *metav1.ObjectMeta, status *wfv1.WorkflowStatus) {
 			assert.Equal(t, wfv1.WorkflowFailed, status.Phase)

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

@@ -8,10 +8,11 @@ import {UploadButton} from '../shared/components/upload-button';
 import {exampleClusterWorkflowTemplate} from '../shared/examples';
 import {ClusterWorkflowTemplate} from '../shared/models';
 import {services} from '../shared/services';
-import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
+import {useEditableObject} from '../shared/use-editable-object';
+import {WorkflowTemplateEditor} from '../workflow-templates/workflow-template-editor';
 
 export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow: ClusterWorkflowTemplate) => void}) {
-    const [template, setTemplate] = useState<ClusterWorkflowTemplate>(exampleClusterWorkflowTemplate());
+    const {object: template, setObject: setTemplate, serialization, lang, setLang} = useEditableObject(exampleClusterWorkflowTemplate());
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -31,7 +32,7 @@ export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow:
                 </Button>
             </div>
             <ErrorNotice error={error} />
-            <ClusterWorkflowTemplateEditor template={template} onChange={setTemplate} onError={setError} />
+            <WorkflowTemplateEditor template={template} serialization={serialization} lang={lang} onLangChange={setLang} onChange={setTemplate} onError={setError} />
             <div>
                 <ExampleManifests />.
             </div>

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

@@ -18,9 +18,9 @@ import {services} from '../shared/services';
 import {useCollectEvent} from '../shared/use-collect-event';
 import {useEditableObject} from '../shared/use-editable-object';
 import {useQueryParams} from '../shared/use-query-params';
+import {WorkflowTemplateEditor} from '../workflow-templates/workflow-template-editor';
 import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
 import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
-import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
 
 import '../workflows/components/workflow-details/workflow-details.scss';
 
@@ -37,7 +37,7 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
     const [columns, setColumns] = useState<models.Column[]>([]);
 
     const [error, setError] = useState<Error>();
-    const [template, edited, setTemplate, resetTemplate] = useEditableObject<ClusterWorkflowTemplate>();
+    const {object: template, setObject: setTemplate, resetObject: resetTemplate, serialization, edited, lang, setLang} = useEditableObject<ClusterWorkflowTemplate>();
 
     useEffect(
         useQueryParams(history, p => {
@@ -138,7 +138,16 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
                 {!template ? (
                     <Loading />
                 ) : (
-                    <ClusterWorkflowTemplateEditor template={template} onChange={setTemplate} onError={setError} onTabSelected={setTab} selectedTabKey={tab} />
+                    <WorkflowTemplateEditor
+                        template={template}
+                        serialization={serialization}
+                        lang={lang}
+                        onLangChange={setLang}
+                        onChange={setTemplate}
+                        onError={setError}
+                        onTabSelected={setTab}
+                        selectedTabKey={tab}
+                    />
                 )}
             </>
             {template && (

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-creator.tsx

@@ -9,10 +9,11 @@ import {exampleCronWorkflow} from '../shared/examples';
 import {CronWorkflow} from '../shared/models';
 import * as nsUtils from '../shared/namespaces';
 import {services} from '../shared/services';
+import {useEditableObject} from '../shared/use-editable-object';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) {
-    const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(nsUtils.getNamespaceWithDefault(namespace)));
+    const {object: cronWorkflow, setObject: setCronWorkflow, serialization, lang, setLang} = useEditableObject(exampleCronWorkflow(nsUtils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -32,7 +33,7 @@ export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; o
                 </Button>
             </div>
             <ErrorNotice error={error} />
-            <CronWorkflowEditor cronWorkflow={cronWorkflow} onChange={setCronWorkflow} onError={setError} />
+            <CronWorkflowEditor cronWorkflow={cronWorkflow} serialization={serialization} lang={lang} onLangChange={setLang} onChange={setCronWorkflow} onError={setError} />
             <p>
                 <ExampleManifests />.
             </p>