mattermost-webapp
mattermost-webapp copied to clipboard
[MM-44347] Add popover for user groups
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
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:
Hover state:
Onyx theme:
Large group:
Large group, no search results:
Large group with search result:
No edit permission (on Firefox so the scrollbar looks different):
Release Note
Added a popover containing group information to group at-mentions.
@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
/update-branch
Creating a new SpinWick test server using Mattermost Cloud.
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 |
Updated to address design feedback. Screenshot:
Marking PR as draft while I work on the design updates.
Test server creation failed. See the logs for more information.
Updated with the new designs. Sorry about the number of commits, I had some merge issues.




@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!
New commit detected. SpinWick will upgrade if the updated docker image is available.
Mattermost test server updated with git commit 31718465f7e15052d9dd2f36818992a2b30ae15c
.
Access here: https://mattermost-webapp-pr-11437.test.mattermost.cloud
Thanks for catching that @matthewbirtch!
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.
Hi @BenCookie95 can you please fix conflict
@furqanmlk Fixed the conflicts, sorry about that!
@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.
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 :)
Test server destroyed
Test server destroyed