fix(project): update collections search asynchronously

[eatyourgreens]

Make the collections search, in the popup collections modal, asynchronous by using a ref to store the current search text. This fixes a bug where search results were not correctly synchronised to the stored search term (in component state.)

If you typed 4 characters into the search box, all your collections were shown, because the component didn't wait for new search results before updating the dropdown menu. Now, it waits for new search results from the Panoptes API before updating.

I've also refactored the minimum required search text length (for full-text search) into MIN_SEARCH_LENGTH, which makes it easier to manage. 3 is the minimum required by Postgres, but fuzzy text searching can give weird results for 4 or 5-character strings, so increasing it might make the component easier to use. If you increase the value, I'd suggest also increasing the same value in zooniverse/Panoptes-Front-End#7124, so that the search behaviour matches in PFE.

Please request review from @zooniverse/frontend team or an individual member of that team.

Package

• app-project

Linked Issue and/or Talk Post

• Fixes an issue where typing exactly 4 characters displays all your collections (see Inconsistent search for collections behavior #6120.)

How to Review

Open the collections modal and try any search that is exactly 4 characters. The list of collections now only shows results returned from the Panoptes full-text-search API.

Note that the API response can still miss collection names that include the search term.

Screen.Recording.2024-06-10.at.18.10.23.mov

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

Bug Fix

• The PR creator has listed user actions to use when testing if bug is fixed
• The bug is fixed
• Unit tests are added or updated

[coveralls]

coverage: 79.153% (+0.01%) from 79.142%
when pulling 485ceef on eatyourgreens:fix-async-collection-search
into b4935ba on zooniverse:master.

[coveralls]

coverage: 79.145% (+0.003%) from 79.142%
when pulling 408eb9a on eatyourgreens:fix-async-collection-search
into b4935ba on zooniverse:master.

[coveralls]

coverage: 79.145% (+0.003%) from 79.142%
when pulling 5c5e976 on eatyourgreens:fix-async-collection-search
into b4935ba on zooniverse:master.

[coveralls]

coverage: 79.145% (+0.003%) from 79.142%
when pulling 5c5e976 on eatyourgreens:fix-async-collection-search
into b4935ba on zooniverse:master.

[coveralls]

coverage: 79.136% (-0.006%) from 79.142%
when pulling a6a4e34 on eatyourgreens:fix-async-collection-search
into b4935ba on zooniverse:master.

[eatyourgreens]

Increasing this might make the search results more intuitive.

[coveralls]

coverage: 79.192% (-0.02%) from 79.214%
when pulling 7e46e7d on eatyourgreens:fix-async-collection-search
into 37bef25 on zooniverse:master.

[coveralls]

coverage: 79.186% (-0.03%) from 79.214%
when pulling 2342465 on eatyourgreens:fix-async-collection-search
into 37bef25 on zooniverse:master.

[coveralls]

coverage: 79.211% (+0.03%) from 79.18%
when pulling cd49294 on eatyourgreens:fix-async-collection-search
into 81eb200 on zooniverse:master.

[coveralls]

coverage: 79.14% (-0.04%) from 79.176%
when pulling 8e1f127 on eatyourgreens:fix-async-collection-search
into 09cd24e on zooniverse:master.

[coveralls]

coverage: 79.026% (+0.01%) from 79.015%
when pulling 00832e5 on eatyourgreens:fix-async-collection-search
into 3275064 on zooniverse:master.

[eatyourgreens]

The fix for the bug is to wait on the API request before updating state.

[mcbouslog]

The collections search is working more as expected with these changes 👍 .

The panoptes full-text search yields some unexpected results, as noted in this comment - #6120 (comment) - but that's unrelated to these changes and the specific issue of seeing all the collections with 4 characters.

Thanks for the fix!