mattermost-webapp icon indicating copy to clipboard operation
mattermost-webapp copied to clipboard

[MM-44347] Add popover for user groups

Open cyrilzhang-mm opened this issue 2 years ago • 4 comments

Summary

Adds a user group popover component that is activated by group at-mentions. I also tested and verified it with VoiceOver on Google Chrome, macOS.

Ticket Link

Jira ticket

Related Pull Requests

  • Has server changes: https://github.com/mattermost/mattermost-server/pull/21523

It is necessary to return the group members in order of their username, so that they are fetched in the right order. Otherwise, the InfiniteLoader component doesn't work correctly.

Screenshots

Small group: Screen Shot 2022-10-26 at 4 20 17 PM

Hover state: Screen Shot 2022-10-26 at 4 22 08 PM

Onyx theme: Screen Shot 2022-10-26 at 5 46 30 PM

Large group: Screen Shot 2022-10-26 at 4 20 35 PM

Large group, no search results: Screen Shot 2022-10-26 at 4 20 52 PM

Large group with search result: Screen Shot 2022-10-26 at 4 20 46 PM

No edit permission (on Firefox so the scrollbar looks different): Screen Shot 2022-10-26 at 5 49 42 PM

Release Note

Added a popover containing group information to group at-mentions.

cyrilzhang-mm avatar Oct 25 '22 15:10 cyrilzhang-mm

@cyrilzhang-mm: Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

I understand the commands that are listed here

mm-cloud-bot avatar Oct 25 '22 15:10 mm-cloud-bot

/update-branch

cyrilzhang-mm avatar Oct 26 '22 20:10 cyrilzhang-mm

Creating a new SpinWick test server using Mattermost Cloud.

mm-cloud-bot avatar Oct 27 '22 22:10 mm-cloud-bot

Mattermost test server created! :tada:

Access here: https://mattermost-webapp-pr-11437.test.mattermost.cloud

Account Type Username Password
Admin sysadmin Sys@dmin123
User user-1 User-1@123

mm-cloud-bot avatar Oct 27 '22 22:10 mm-cloud-bot

Updated to address design feedback. Screenshot: Screen Shot 2022-10-31 at 11 40 34 AM

cyrilzhang-mm avatar Oct 31 '22 16:10 cyrilzhang-mm

Marking PR as draft while I work on the design updates.

cyrilzhang-mm avatar Nov 08 '22 18:11 cyrilzhang-mm

Test server creation failed. See the logs for more information.

mm-cloud-bot avatar Nov 09 '22 20:11 mm-cloud-bot

Updated with the new designs. Sorry about the number of commits, I had some merge issues.

Screen Shot 2022-11-09 at 2 35 38 PM Screen Shot 2022-11-09 at 2 35 54 PM Screen Shot 2022-11-09 at 2 36 53 PM Screen Shot 2022-11-09 at 2 36 34 PM

cyrilzhang-mm avatar Nov 09 '22 20:11 cyrilzhang-mm

@matthewbirtch I updated the close button and search bar. I ended up using a different input component for the search bar, so I had to re-style it again. I tried to match it to the previous one as well as the text input Figma document as much as possible but please let me know if I missed anything!

cyrilzhang-mm avatar Nov 10 '22 14:11 cyrilzhang-mm

New commit detected. SpinWick will upgrade if the updated docker image is available.

mm-cloud-bot avatar Nov 10 '22 15:11 mm-cloud-bot

Mattermost test server updated with git commit 31718465f7e15052d9dd2f36818992a2b30ae15c.

Access here: https://mattermost-webapp-pr-11437.test.mattermost.cloud

mm-cloud-bot avatar Nov 10 '22 15:11 mm-cloud-bot

Thanks for catching that @matthewbirtch!

cyrilzhang-mm avatar Nov 10 '22 16:11 cyrilzhang-mm

E2E tests not automatically triggered, because the PR is not in a mergeable state. Please update the branch with the base branch and resolve outstanding conflicts.

mattermod avatar Nov 11 '22 19:11 mattermod

Hi @BenCookie95 can you please fix conflict

furqanmlk avatar Nov 11 '22 20:11 furqanmlk

@furqanmlk Fixed the conflicts, sorry about that!

cyrilzhang-mm avatar Nov 11 '22 21:11 cyrilzhang-mm

@furqanmlk Pushed a commit that will sort users by display name. It should fix the first issue.

I believe the second one isn't an issue. It behaves the same way as the existing profile popovers.

cyrilzhang-mm avatar Nov 21 '22 13:11 cyrilzhang-mm

Hi @furqanmlk the gif looks good to me, the popovers are centered with the mention link. It's a limitation of the popover library we use and it matches the behaviour of the profile popover.

The icons are okay too. They are the same icons as what's already used in the app which @matthewbirtch approved. Thanks :)

cyrilzhang-mm avatar Nov 21 '22 18:11 cyrilzhang-mm

Test server destroyed

mm-cloud-bot avatar Nov 21 '22 19:11 mm-cloud-bot

Test server destroyed

mm-cloud-bot avatar Nov 21 '22 19:11 mm-cloud-bot