Gutenberg/improve mentions support

[mchowning]

related Gutenberg-Mobile PR

Improving the mentions UI by adding a background scrim and making sure dark mode looks good. This also updates to add a "Loading..." message while the users are being loaded (which can take a while the first time on a site with a lot of users).

Testing

Dark/Light Mode

• Verify that the mentions UI looks fine in both dark and light mode

Site With 1 or 2 Users

1. Load a site with 1 or 2 users
2. Open the Gutenberg editor, and in an empty paragraph block type the "@" symbol
3. Verify that the Gutenberg editor can still be seen behind the mentions UI, but that the editor is covered by a dark scrim (like it's covered with a shadow).

Site With Many Users

1. Load a site with many users that has not had the users loaded before on the mobile device since the app was installed (i.e. you've never tried to @-mention a user in a comment or post for that site
2. Open the Gutenberg editor, and in an empty paragraph block type the "@" symbol
3. Observe that the mentions UI loads up with no suggestions and a "Loading..." message
4. Observe that after a bit (maybe 5-20 seconds depending on your connection), the suggestions will be populated.
5. Enter characters in the mentions UI until there are no matching users and observe that instead of the "Loading..." message there is now a message stating that there are no matching users available

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading the APK here.

[marecar3]

Nice job @mchowning! 👍

Everything is working as expected but just need to make sure is it suppose to be a feature that you can add a mention to a Post title? I have checked in the web app and I couldn't do it.

Here is the proper video.

[SergioEstevao]

@marecar3 you shouldn't be able to do it. I think @mchowning is aware and still needs to add a check to avoid that.

[marecar3]

@marecar3 you shouldn't be able to do it. I think @mchowning is aware and still needs to add a check to avoid that.

Thanks for the update 👍

[mchowning]

Everything is working as expected but just need to make sure is it suppose to be a feature that you can add a mention to a Post title? I have checked in the web app and I couldn't do it.

I've addressed that issue so you can't add mentions to the title anymore. 🙂 All the branches on this PR have also been updated with the monorepo updates as well.

I know you've already approved @marecar3 , but I wanted to let you know in case you wanted to give it another look.

[marecar3]

Hey @mchowning I can confirm that everything is working as expected and that issue in the Post Title is fixed! LGTM!

[oguzkocer]

Hi there! 15.2 is being frozen, so this PR is being bumped to 15.3. If these changes have to be shipped with 15.2, please target release/15.2 and cc me in the PR so I can cut a new beta release. Also if you can keep the release dates in mind and bump the PRs & issues you are working on before the code freeze date, we'd really appreciate it.