-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(markdown): Allow markdown in workflow title and description
Fixes: #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 - [x] make first column of workflow row not be wrapped in row link so markdown links can be clicked - [x] add overlay so users can still click to open workflow - [x] change remark-gfm to 3.0.0 based on remarkjs/react-markdown#771 (comment) Signed-off-by: jmeridth <[email protected]> Co-authored-by: Steven Johnson <[email protected]>
- Loading branch information
1 parent
954884d
commit a9efa36
Showing
10 changed files
with
2,629 additions
and
1,777 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # 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: '**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`) | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
ui/src/app/workflows/components/workflows-row/workflows-row-name.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| 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 components={{p: React.Fragment}} remarkPlugins={[remarkGfm]}> | ||
| {markdown} | ||
| </ReactMarkdown> | ||
| </div> | ||
| ); | ||
| }; |
22 changes: 22 additions & 0 deletions
22
ui/src/app/workflows/components/workflows-row/workflows-row.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| @import 'node_modules/argo-ui/src/styles/config'; | ||
|
|
||
| .wf-rows-name { | ||
| line-height: 1.5em; | ||
| display: inline-block; | ||
| position: relative; | ||
| pointer-events: none; | ||
| vertical-align: middle; | ||
| white-space: pre-line; | ||
| } | ||
| .overlay { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| } | ||
| .wf-rows-name a { | ||
| pointer-events: all; | ||
| position: relative; | ||
| z-index: 1; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.