[feature request] ensure research collaborator usernames exist when adding collaborators

[iSCJT]

Is your feature request related to a problem? Please describe. Currently the research collaborators field is a text string with no validation that the usernames entered exist.

Describe the solution you'd like Change to a typeahead search that checks existing usernames and allows tagging of collaborators.

Describe alternatives you've considered Checking each username in the string as part of form validation.

Additional context N/A

[thisislawatts]

Sounds great! I can think of lots of places where a component like this would be useful ✨

[benkelaar]

Can I have a stab at this one? Sounds like fun. Any existing element I can reuse?

[thisislawatts]

Nothing current in the system at the moment @benkelaar, it would require some work. Perhaps using the Autocomplete from Mui Base with the existing Username would be a good start.

[goratt12]

I'm wondering what the best approach will be to getting the available users list for the autocomplete engine. There are three approaches as I see it:

1. Requesting all the usernames from the DB and providing the list to the autocomplete
   • Pros:
     • One request to the DB
     • Instant autocomplete
   • Cons:
     • The request is taking a lot of time (about 1.5 seconds)
     • Provide information security issue where the list of users is in the client side
2. For every update to the input, search the usernames that start with the text the user entered (With minimum of 2 letters) For example: Sam will output [Samuel, Samantha, Santiago]
   • Pros:
     • The requests take less time (few milliseconds) - ideal for autocompletion
     • There is no list of all users in the browser
   • Cons:
     • More requests to the DB
     • Can cause lag in the autocomplete when the DB is lagging
3. Not using autocomplete at all - only checking if username exist when the user finish entering the username
   • Pros:
     • Less requests to the DB
     • There is no list of all users in the browser
   • Cons:
     • Less user friendly

Would love to hear your thoughts on that 😊

[davehakkens]

Thanks for looking into this. Nice feature! Not sure what would be the best technical approach @thisislawatts can advise better.

But one thing to keep in mind is that this feature would probably later be extended to @mentions in content and comments across the platform.

Perhaps that helps to decide how robust the approach should be

[iSCJT]

For the auto complete my gut says option 2 with a timeout on the user input before performing a db search to minimise db requests and potential lag. Let them click to select from the autocomplete but also if they've typed a correct username just flag that as ok... give it a tick, put the text in green or something. If the entered username isn't valid then set an error state on the field and prevent form submit.

[goratt12]

I've researched best practices for mention operations, and here are my findings:

GitHub: Implements mention as the first method by loading all relevant usernames as soon as the page/component loads. This approach is illustrated in the attached screenshot.

Facebook: Employs a hybrid approach, combining elements of the first and second methods. Upon component load, it generates a list of 10 probable mentions (most relevant) and then fetches another 10 potential mentions based on the user's input.

TikTok: Follows the same methodology as Facebook.

Instagram: Only retrieves a user list when the user begins typing, aligning with the second method.

Regarding security concerns, we can use a Firebase Function to filter only the relevant fields from the users collection.

In terms of our approach, I think adopting a method similar to Facebook’s is the best one. We could compute the initial list of usernames client-side (including the post creator, commenters, contributors, etc.) and pass this as props to the component. This would enable users to select a username without making any database requests. If a user opts to type, we would then query the database for relevant usernames, possibly incorporating a timeout feature as @iSCJT suggested.

[onearmy-bot]

:tada: This issue has been resolved in version 1.152.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: