fix(ui): code-split markdown title + desc, fix row linking, etc

[agilgur5]

Follow-up to #10553 issues

• Partial fix for feat: Allow markdown in workflow title and description. Fixes #10126 #10553 (review) -- this fixes the UI issues, will have some separate PRs for docs. EDIT: Docs PR: docs(ui): full copy-edit of title & description page #12582
  • part of the docs changes need backporting as well as the title / desc feature is older per feat: Allow markdown in workflow title and description. Fixes #10126 #10553 (comment) (it is from feat: Workflow title/description in workflow list view. Fixes #6529 #9805)

Related / partial fix for to #12059, although the PR was merged after that issue was created

Motivation

• react-markdown and remark-gfm are large deps, so we should code-split / lazy load them

  • and we should only load them if a user is using this feature
    • can't quite detect if a string is markdown without a dep, but can at least check if the annotations are used

• CSS had several issues

  • was imported from the wrong component
  • overlay was not sufficiently unique (as we currently use global CSS and not something like CSS Modules)
  • some unnecessary CSS attributes
  • most importantly, the positioning of rows broke and did not flex to the last column
    • it caused columns to not match the heading very confusingly and a lot of empty space on the right as well
    • that also broke some overflow properties (it re-broke fix(ui): ensure WorkflowsRow message is not too long #11908)
    • and it broke the details drawer as well
      • I couldn't get it to open half the time
      • when I did open it, the first two columns were empty, and with the last few columns empty too, it looked like it was just centered horizontally (unintentionally)

• fix nested link issues

  • overlay was unintuitive and hacky
    • can instead use JS to capture the event & explicitly prevent bubble up
      • semantically, the JS is still hacky to have nested links, but it less hacky
        • nested linking is also an optional feature that happens only if a user has an annotation, with embedded markdown, and with a link in the markdown (i.e. an optional feature of an optional feature of an optional feature), so I don't mind that hack as much now

• remove Link for the entire row as it was unintuitive, especially with the drawer

  • the drawer click conflicted, but superseded the link click
  • the whole drawer would be highlighted on hover since the whole row was a link, including the drawer
  • one could also not copy+paste things from the row because it caused a click
    • in particular, there were several times I wanted to copy something from the details drawer and would instead end up on the details page
  • only link the workflow name now

Modifications

• code-split react-markdown and remark-gfm
  • only load them when annotations are present
• revert the split of the workflows-row-name.tsx file and merge it back to where it was
  • import the CSS from workflows-row.tsx, not workflows-row-name.tsx
    • remove most of the CSS as the Link was changed and because some of it was not necessary
• fix several issues with the links
  • the overlay anchor element was a workaround for nested linking (which could optionally be used with the markdown feature), remove it and use JS to handle nested links instead
    • can explicitly control event bubbling in JS
    • the overlay caused problems with the drawer and removed the highlighting that an anchor element has on hover
  • only link the name column and not the entire row (which included the drawer before, both open and closed)

Verification

Rendered UI itself

Manually tested the UI:

Before had several issues (as listed in #10553 (review)):

Misplaced columns; row does not flex all the way to the right:

Details drawer has empty space on both left and right:

Overflow that was fixed in #11908 was re-broken:

After:

UI deps code-split

Shaved off ~575KB / ~140KB minified / ~41KB gzipped from the main entrypoint:

[jmeridth]

Nice use of suspense. Just one minor nit.