Arvados

Here's a few snippets I came up with earlier that may be helpful:

h1-6, p {
display: inline
}
// Add line breaks at the beginning of all headers and paragraphs following other paragraphs
p + h1::before, p + p::before {
  content: "";
  display: block;
}
// No-op any linebreaks
br {display: none}

Stephen Smith wrote in #note-1:

Here's a few snippets I came up with earlier that may be helpful:

This might not cover every corner case but I think the baseline of what we want for spacing is a line break at the end of every p tag, and that's it. Headers etc. get rendered inline. This way if you have a layout like:

h1: Project Name
h2: Introduction
p: Lorem ipsum dolor sic amet…
h2: Details
p: The quick brown fox…

Then it renders as:

Project Name — Introduction — Lorem ipsum dolor sic amet…
Details — The quick brown fox…

This feels like a good balance of preserving structure within the limited space. It feels pretty followable to me.

I think we want to preserve br tags. If the user manually wrote a break it's probably structurally important.

Discussed at standup:

• Replacing images with alt text seems to require JavaScript HTML parsing. We'll just omit them for v1, this can be revisited later if needed.
• Rendering "Read More" at the end of the line is inordinate work. It can just appear on the following line.

Changes at arvados|3d15ef476e5aae7214076e7c0a6784a232220228 branch 23390-description-preview

• Read more shows whenever the content is taller than ~2.9 lines (the extra limit is needed to fit in the read more text, and for regular lines it should either fit fully or trigger the overflow)
• I managed to make images go on their own line (prevents text from being pushed out of sight by images on the first line)
• Added a similar fade-out as the current collapsible description, which is attached to the read more link
• The full description popup is a little bigger than the banner and more responsive
• I still need to make the default tab changes
• Also still need to remove the regular description

Changes at arvados|7609d42f5c70e7e0291224e2d6f4df482e883611 branch 23390-description-preview
Tests developer-run-tests-services-workbench2: #1680

• All agreed upon points are implemented / addressed. Describe changes from pre-implementation design.
  • Added 4 line preview to title pane of the 4 resources, "read full descriptions" shows beyond 4 lines
    • Due to how the CSS works, 5 lines still shows the read more button instead of just showing the 5th line, but at least it remains accessible in the pop up
  • Preview area is styled with inline/bold headers and em dashes, images are placed on their own line, and line breaks added after each paragraph
  • Corrected some type oversights with descriptions being nullable
  • The full description pop up is a little wider than the banner, and uses more default material styles to be responsive
  • Removed original description area for the 4 resources
  • Changed default tab of collections and workflows to the main content tab
• Anything not implemented (discovered or discussed during work) has a follow-up story.
  • none
• Code is tested and passing, both automated and manual, what manual testing was done is described.
  • Passed manual tests, updated cypress tests where needed
• The tested code incorporates recent main branch changes.
  • Within a week, but no conflicts are expected
• New or changed UI/UX has gotten feedback from stakeholders.
  • Yes
• Documentation has been updated.
  • n/a
• Behaves appropriately at the intended scale (describe intended scale).
  • no change
• Considered backwards and forwards compatibility issues between client and server.
  • none anticipated
• Follows our coding standards and GUI style guidelines.
  • yes

Stephen Smith wrote in #note-15:

Changes at arvados|7609d42f5c70e7e0291224e2d6f4df482e883611 branch 23390-description-preview

I took another look and I'm happy with the UI of this. Thanks! I'm looking forward to this.

Going over the requirements again, I thought about another functionality change I'd like to make. I think this is basically independent from other work in the branch. It could be a separate ticket. I'll spell it out, and let me know how you'd like to organize this, and we'll make that happen.

I'd like to amend this point:

• Projects are unchanged. Keep the current logic to follow user preferences.

And I don't want a dramatic change: if the user has a preference set, I still want to follow it. However, if the user has no preference set, I think we should default to the Data tab. It is more likely to be useful than the Overview tab.

Any idea how big a change that is? (I'm guessing it's a small change to the code, and then a bunch of annoying mechanical changes to tests, unfortunately.)

• The full desciption display needs more padding at the top.

• In keeping with existing Workbench patterns, descriptionDialogActions should be a named export of src/store/description-dialog instead of the default export.
• The only change in 5d47fbe8bb4e038d1ae29ebc4f386ba94b0ecaf3 is an extra trailing newline. I laughed when I saw the commit message, but there is no reason to keep this commit except that it's more work to remove it.

The minor notes aren't necessary to fix before merging imo, just flagging them so you can fix them if it's convenient to do so.

Changes at arvados|9da596764eb5f7dc678501a2f088490a64dd7f00
Tests developer-run-tests-services-workbench2: #1681

• Changed fallback project tab default to Data
  • Also fixed an error where the tab key was used to set the fallback default tab instead of the value, it probably wasn't noticed because if no default tab is set, it uses the first tab which was the previous intention
• Added some padding to the top of the description dialog
• Normalized named export usage for actions (and also in the banner which is what I copied)
• The whitespace commit actually has 14 whitespace changes - when saving a file removes more than a couple pieces of trailing whitespace, I like to make that a separate commit so it doesn't make it harder to see the actual changes

LGTM