Arvados

22141-picking-dialog-search @ e9d7b4ef3c2a02bb357f768cc8a87aae29395d91

developer-run-tests: #4484

This branch ended up including #22045 and #22046 as well, so the review should cover the requirements from all three tickets.

• All agreed upon points are implemented / addressed. Describe changes from pre-implementation design.
  • Now uses count=none in queries so they don't take a long time on large databases
  • When using project or collection search, the parent projects are displayed in the list
  • When clicking on a project or collection, user gets details about the selected item
  • User can paste a UUID or PDH into the search boxes to get the exact item they want
  • Dialog box is set to a fixed height of 80vh so it doesn't change size as elements in the tree are added or removed
• Anything not implemented (discovered or discussed during work) has a follow-up story.
  • This does not try to solve the data loading race in #21838, this branch will need to be manually merged with that one
  • #22044 would also be a quality of life improvement for picking, but I didn't work on it
• Code is tested and passing, both automated and manual, what manual testing was done is described.
  • Added e2e tests for the new searching and details panel behavior
  • It occurs to me now writing this that I didn't make an e2e test that includes the interaction of searching both projects and collection, but this behavior was tested manually.
• New or changed UX/UX and has gotten feedback from stakeholders.
  • This went through a few rounds of review with the team to land on a UI design we all liked
• Documentation has been updated.
  • Unfortunately our documentation doesn't describe how to use workbench, so there isn't anything to update. (I checked the tutorial, but it doesn't have any screenshots of this UI either).
• Behaves appropriately at the intended scale (describe intended scale).
  • Improves scaling by using count=none for faster queries.
• Considered backwards and forwards compatibility issues between client and server.
  • I ended up discovering and working around #22154 ('kind' is wrong for users in 'included') by checking the uuid type, so this branch doesn't assume that is fixed (which would be an API change).
• Follows our coding standards and GUI style guidelines.
  • comments

This started out as a ticket to just revise the queries to be more efficient, but I ended up attacking usability of the picking dialog generally.

Entering something into the project or collection search individually gets those hits and displays them under their parent projects.

Now you can also click on items and get details about the item on the right side, including clickable links to the parent project.

As a result, showing the parent project in the tree is not strictly necessary (the information is available in details now) but I think it's still helpful to quickly identify the item you're looking when there are multiple hits, without a lot of clicking around.

If you enter something into both projects and collections search, it searches for projects, then filters the list of collections under those projects (this is more or less the previous search behavior of the picking dialog).

This branch also has a commit that moves around some declarations in order to break circular imports. This was because one of the component tests refused to load. The refactoring is pretty straightforward, it mostly involves moving base type and enum declarations located in 'views' into their own modules and/or into the related 'action' module. This allows other modules to import just the individual types they need without having to depend on a react component definition that requires on lots of other things.

Here's a few things I noticed:

• When searching projects, selecting one of the parents of the results shows a "search-" prefix in the details panel uuid - this also seems to prevent starting a WF in one of the "parent" projects of a search result, if we stick to using the prefix it would be good to put that in a const so it's more easily traceable
• There is a compile error in tree.tsx from the childItemNameDark and childItemNameLight style keys not present in the style object
• Style-wise it seems the indentation got flattened for a large part of projects-tree-picker.tsx

Stephen Smith wrote in #note-10:

Here's a few things I noticed:

• When searching projects, selecting one of the parents of the results shows a "search-" prefix in the details panel uuid - this also seems to prevent starting a WF in one of the "parent" projects of a search result, if we stick to using the prefix it would be good to put that in a const so it's more easily traceable

There might be a better way to encode special behavior for certain tree nodes, but using special ids seems to work. I made it a const and found the place where the gets returned to redux-form and added a check to strip off the prefix.

• There is a compile error in tree.tsx from the childItemNameDark and childItemNameLight style keys not present in the style object

Should be fixed.

• Style-wise it seems the indentation got flattened for a large part of projects-tree-picker.tsx

Should be indented properly now.

22141-picking-dialog-search @ f8b2a1f5617511aa75a5aae636811798b1bc3311

developer-run-tests: #4496

22141-picking-dialog-search @ 3f86ac062745cd18c2b56862058977e58c744c23

developer-run-tests: #4499

Adjusted one workbench test and merged main.

Lgtm!