Arvados

Changes at arvados|6549f0466c7f335d7235c4b2e481d3e2ff74cab1 branch 22336-resize-details-panel
Tests developer-run-tests-services-workbench2: #1393

• All agreed upon points are implemented / addressed.
  • Added nested splitter for details panel
  • Added pseudoelement to enlarge clickable area on both left and right splitter (clickable area hangs into the center panel by 15px)
  • Bumped path-to-regexp and nanoid for CVEs
• 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
  • Manual testing and automated tests
• 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.
  • n/a
• Follows our coding standards and GUI style guidelines.
  • no significant change to UI appearance

• In src/views-components/details-panel/details-panel.tsx, Line 37: 'DRAWER_WIDTH' is assigned a value but never used

• I think 15px is actually too wide for the divider clickbox. What happens is that I'm moving my mouse around and my cursor suddenly changes to the divider icon and it's not immediately clear why. This also seems to have the effect of causing the splitter to jump unexpectedly; I click on the margin 10-15px left of the splitter, and as soon as I move my cursor even a pixel, the splitter jumps to that position.

• At the thinnest width, when viewing any details panel with overflowing elements, the tab itself overflows as well. When viewing collection details in the details panel, both tabs (details and versions) fit into the space when viewing the versions tab, but overflow suddenly when switching to the details tab. The tabs should ideally all fit with their labels centered in all cases.

• At the thinnest width, some of the property tags that should wrap to the next line don't. If you look at tordo-j7d0g-c4vq0mo36y98ba8, for example, "Fruit: Tomato", "Size: M", and "New: prop" are cut off. This looks like it only happens in cases where there are a large number of tags.

• We might want to add the same grey border to the bottom of the details panel tabs that is on the project panel tabs. The amount of unbroken whitespace in the details panel tabs wasn't really noticeable before, but when fully embiggened, it looks unpolished beside the project panel.

• In the Project Panel, the Data Explorer tabs aren't the same size. Again, this is unnoticeable when the details panel is at the default size, but when the tabs get smaller, it becomes clearer. In fact, it really only becomes noticeable when the main panel is <800 px wide or so.

• This was preexisting, but the ResourceIcon-ResourceName-CloseButton at the top of the details panel doesn't line up with the tab label below it. It is unnoticeable at the panel's default width, but as the details panel is widened, the misalignment looks kinda shoddy.

• Currently, if the details panel is open and you navigate to another side panel category (My Favorites, Instance Types, Trash etc), the details panel defaults to a project view with no data. It would be nice to either have a placeholder details panel view for each of these categories (which should definitely be a new ticket) or have the details panel slide closed when navigating there (which might be jarring?)

• For the Trash Panel, we need to decide to either not allow the details panel to be open or to add an Additional Details button to the context menu/toolbar. As it is, one can open the details panel and then navigate to Trash and get useful information by clicking on one of the table rows. This appears to be the only way to use the details panel in the Trash panel since we removed the "Additonal Info" button from the main content button.

Changes at arvados|87dc76721cab3eb64631af43a6364414e885ac64
Tests developer-run-tests-services-workbench2: #1415

• In src/views-components/details-panel/details-panel.tsx, Line 37: 'DRAWER_WIDTH'

Removed

• I think 15px is actually too wide for the divider clickbox.

I cut the additional width in half to reduce this effect (the only better way to fix this I think would be to calculate the offset of the clicked position on the new expanded drag handle and the border itself and add that offset to the drag event position, which I'm pretty sure would require a fork of the splitter library)

• At the thinnest width, when viewing any details panel with overflowing elements, the tab itself overflows as well.

Fixed overflowing tabs

• At the thinnest width, some of the property tags that should wrap to the next line don't.

Fixed overflowing chips, they now truncate with ellipses since chips don't have wrapping functionality out of the box

• We might want to add the same grey border to the bottom of the details panel tabs

Added the same border style

• In the Project Panel, the Data Explorer tabs aren't the same size.

Added symmetrictabs style to MPV panel mutually exclusive tabs

• This was preexisting, but the ResourceIcon-ResourceName-CloseButton at the top of the details panel doesn't line up with the tab label below it.

Fixed flex styles for details header

• Currently, if the details panel is open and you navigate to another side panel category (My Favorites, Instance Types, Trash etc), the details panel defaults to a project view with no data.

I created an idea ticket for this: #22548

• For the Trash Panel, we need to decide to either not allow the details panel to be open or to add an Additional Details button to the context menu/toolbar.

Since it's unrelated to the resizing, I created #22547 so we can make that decision

This LGTM! Also, resizing the details panel just feels good, it's a very satisfying thing to do, so kudos on that as well!