Arvados

I spent some time with the ProjectsTreePicker code, I have a new idea about how to add search to the existing dialog that is less effort than completely rewriting everything.

1. Add two new top level tree nodes, "All projects" and "All collections" that each contain a flat list of all projects / collections
   1. These could be hidden until something is entered into the search box
2. Add two search boxes at the top, "Project search" and "Collection search"
3. The "Project search" adds a filter on project names in "All projects"
4. The "Collection search" adds a filter on collection names anywhere collections are listed

User Interactions:

• User enters part of a project name, the project appears in "All projects". They can then open the project and navigate from there.
• User enters part of a collection name. The collection appears in "All collections".
• User navigates to a project from "Home". User then enters part of a collection name into collection search. This applies a filter to collection listing under the project, so user can find a specific collection under the project.
• User enters both project search term and collection search term. User looks for the project under "All projects" and can then expand the project contents. The listing of collections is filtered.

Discussed with Sarah, she is has bought into the idea --

You "search" for Projects and "filter" Collections

Entering text into the project box will render a flat list of projects that match the search term. Projects can be opened to see their contents.

Entering text into the collection box will apply a filter on the list of collections that is shown for project's contents.

Implementation:

Add a couple of search boxes (existing search box component).

Search boxes send an action to the redux state.

Updating search or filter value refreshes tree contents.

opening/closing collections is causing it to crash.

Change "Search all projects" -> "Search for a project"

If you search for a project, then enter a collection filter, then clear the project search, the collection filter won't be applied.

Update the message "Not all items were listed, use search or filter to reduce the number of items"

Reduce to 200 items or so.

Try switching to use the general all-columns search instead of names.

Filter which collections are listed within projects

Advanced search "search in project" is messed up, should use a dialog.

19783-picking-tweak @ arvados-workbench2|0950a5eb6f6188df4ec099f02b662dbcf4b559a4

Most recent test run here (1 commit behind head but the last commit was pretty trivial):

developer-tests-workbench2: #1023

I would appreciate it a lot if you can go through the failing tests and see which ones are easy fixes and which ones are more substantial changes.

Stephen Smith wrote in #note-13:

I think this looks pretty good, my only gripe is the double scrollbar action which makes viewing a long list a bit clunky (it takes several scroll up/down inputs in a row to get it to switch from the inner scroll context to the outer one to finish scrolling all the way to the top or bottom of the list)

I spent some time fighting with this already, clearly I need to . It definitely is not intended to have the outer scroll bar. Clearly I need to work on this some more

As for the tests, it looks like most of the failures are due to cypress not expanding picker tree items. Manually it works on the first click, but cypress only opens it if it clicks twice - it looks like it might be selecting the node instead of expanding it on the first click somehow. The tests pass when adding the workaround of clicking twice so it looks like it should be a simple fix.

I didn't do anything to modify the clicking behavior. In my testing I was using the triangle on the left to expand/contract the subtree, but the target area for that is pretty small so I am not totally happy with it. You're saying doubling clicking works to expand and contract it?

Tests developer-tests-workbench2: #1035
arvados-workbench2|b321c4ab41ef13dfb43c7e64aee395c4db161872

• Workaround cypress click event bug (https://github.com/cypress-io/cypress/issues/5529#issuecomment-556050189)
• Changed the picker dialog to use flexbox to ensure a single scrollable area
• Added dialog height to consumers of the tree picker so previous height behavior is the same (no expanding height when opening or closing tree items)

Stephen Smith wrote in #note-18:

Tests developer-tests-workbench2: #1035
arvados-workbench2|b321c4ab41ef13dfb43c7e64aee395c4db161872

Added a couple commits:

• Workaround cypress click event bug (https://github.com/cypress-io/cypress/issues/5529#issuecomment-556050189)
• Changed the picker dialog to use flexbox to ensure a single scrollable area
• Added dialog height to consumers of the tree picker so previous height behavior is the same (no expanding height when opening or closing tree items)

I'm still getting the double scroll bar when the browser window is small enough (around 700px height and under).

My intuition is that we probably need something like,

set the dialog fixed at 64vh (or whatever)

use flex column around dialog title, content, actions, where content is set to take all remaining space.

then the picker uses its nested flex column that does the same thing.

something like that?

Changes at arvados-workbench2|8e6e183396531005e9c6cee19e6e79998047cabd
Tests developer-tests-workbench2: #1043

• Changed 64vh content heights to flex-basis and added flex wrappers where necessary to allow flex-shrink of dialog contents
  • Also required adding flex styling to the form element wrapper of the form dialog component - the insertion of form between the dialog wrapper and contents is what appeared to break flex behavior of the dialog content element
• Replaced some wrapper elements of form fields with react fragments so that field components can be flex children without additional wrapper styling
• Fixed horizontal scrolling in file upload form dialog due to box sizing and flex