fix(ui): improve markdown styles for workflow-row, workflow-templates, cluster-workflow-templates, and cron-workflows

[stevenbjohnson]

Motivation

These changes are being proposed to improve the workflows-row component. With the addition of the .wf-rows-name class for displaying the title and description annotations, previous styles that handled overflow and text-overflow are being overridden. This results in lengthy titles and descriptions creating wrapped text that renders inconsistently sized workflow-row components and makes details difficult to read.

Similarly, there are some markdown text formats that cause the UI to render the workflow-row component inconsistently and make the title and description equally as difficult to read.

Modifications

• Updated workflows-row.scss styles for the .wf-rows-name class
  • increased line-height by 1em
  • removed inline-block display
  • removed middle vertical alignment (useless without inline-block)
  • added styles to properly handle overflow and text-overflow without wrapping (applies to all child elements, as well)

Before Change:

After Change:

• added conditional to the start/finish columns for adding the workflows-list__timestamp class, ensuring times remain aligned in workflows-row when not ISO format (the above changes will create misalignment when a title and description are present)

Before Change:

After Change:

• added EscapeInvalidMarkdown() to prevent markdown text formats that cause large variances in workflow-row sizing, as well as complicate readability (markdown that starts with a header, blockquotes, or list items will have characters removed):

Supported formatting:

1. Bold ( **…** )
2. Italic ( _…_ OR *…* )
3. Strikethrough ( ~…~ )
4. Code Strings ( `…` )
5. Links ( […](URL) )

Not supported formatting:

1. Underline( __…__ )
2. Headers ( # )
3. Subheaders ( -# )
4. List Items ( - OR * )
5. Line Breaks/Multi-line ( \n OR | )
6. Code Blocks ( ```…``` )
7. Blockquotes ( > )

• added a DESCRIPTION section to the workflow-drawer component that will render the unescaped markdown from the title and description for users to view the full values input when truncated in the workflow-row

Verification

Changes were tested in and verified in a dev container, running the UI and submitting workflows with a variety of title/description combinations:

• Short Title + Short Description (no markdown)
• Short Title + Short Description (with markdown)
• Long Title + Long Description (no markdown)
• Long Title + Long Description (with markdown)
• Title Only (short/long with/without markdown)
• Description Only (short/long with/without markdown)

---

UPDATE:

This formatting logic and component rendering has been added to support the recent changes to CronWorkflows, WorkflowTemplates, and ClusterWorkflowTemplates

• Worthwhile considerations for follow-up work:
  • add drawer functionality to the workflow-templates, cluster-workflow-templates, and cron-workflows, to display INFO and show any user-added markdown
  • Tooltip on-hover behavior for quick view of truncated title or description

[jmeridth]

a couple nits and a question about DRYing up some repetitive code. Not sure if possible to centralize or if we should.

And we discussed alt tags for mouseover when title/description gets auto-shortened due to overflow. You mentioned it makes the UI very wonky. Follow up for a future PR.

Nice work.

[Adrien-D]

Locally tested and looks great

[Adrien-D]

Why using ?? instead of || here ? You have a chance of having an empty title

[stevenbjohnson]

Thanks for the feedback, @Adrien-D! The syntax for the title was taken from an existing line for setting the title in the workflows-row.tsx file. Seems the use of the nullish coalescing operator is to ensure users can enter values that would otherwise be evaluated as "false-y." This approach was carried over to ensure that defaulting to the wf.metadata.name is only in the case of a null or undefined value in the [ANNOTATION_TITLE] field.

Please let me know if the use of the || operator is a preferred method to use here and I can go through the files and make the update.

[Adrien-D]

There is not really a preferred method, but as it's taken from an existing line, it's all good !

[terrytangyuan]

Thank you!