Bug #19783
closedSearch in picking dialog
Added by Peter Amstutz almost 2 years ago. Updated over 1 year ago.
Description
Short term fix while we more thoroughly improve the dialog
- increase the limit from 100 to 1000 items per project
- add message if there is more than 1000 items
- add filter to collections to filter out intermediate and log collections
- add note about the filter being in effect
Files
simplescreenrecorder-2022-12-12_14.23.23.mp4 (396 KB) simplescreenrecorder-2022-12-12_14.23.23.mp4 | Stephen Smith, 12/12/2022 07:24 PM |
Updated by Peter Amstutz over 1 year ago
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.
- Add two new top level tree nodes, "All projects" and "All collections" that each contain a flat list of all projects / collections
- These could be hidden until something is entered into the search box
- Add two search boxes at the top, "Project search" and "Collection search"
- The "Project search" adds a filter on project names in "All projects"
- 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.
Updated by Peter Amstutz over 1 year ago
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.
Updated by Peter Amstutz over 1 year ago
- Target version changed from 2022-12-07 Sprint to 2022-12-21 Sprint
Updated by Peter Amstutz over 1 year ago
- Story points set to 3.0
- Assigned To deleted (
Peter Amstutz)
Updated by Peter Amstutz over 1 year ago
opening/closing collections is causing it to crash.
Updated by Peter Amstutz over 1 year ago
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.
Updated by Peter Amstutz over 1 year ago
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.
Updated by Peter Amstutz over 1 year ago
- Subject changed from Tweak behavior of the picking dialog to Search in picking dialog
Updated by Stephen Smith over 1 year ago
- File simplescreenrecorder-2022-12-12_14.13.56.mp4 added
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)
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.
Updated by Stephen Smith over 1 year ago
- File deleted (
simplescreenrecorder-2022-12-12_14.13.56.mp4)
Updated by Stephen Smith over 1 year ago
Updated by Peter Amstutz over 1 year ago
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?
Updated by Stephen Smith over 1 year ago
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)
Updated by Peter Amstutz over 1 year ago
Stephen Smith wrote in #note-18:
Tests developer-tests-workbench2: #1035
Added a couple commits:
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)
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?
Updated by Stephen Smith over 1 year ago
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
Updated by Peter Amstutz over 1 year ago
- Status changed from In Progress to Resolved