From bc4904e5b374b8bdb0c404cb5dc01ca2e7613a6e Mon Sep 17 00:00:00 2001 From: Ben Cooke Date: Thu, 14 Sep 2023 10:43:44 -0400 Subject: [PATCH] MM-54123 Add group to channel (#22954) * adding group members to channel initial commit * adding group to channel functionality along with add new team members * fixing circular dependency * fixing e2e and other optimizations * adding e2e tests for adding group members to channels * cypress lint * fixing comments * adding count to button * improvements * adjusting some stuff from PR comments * remove ability to add user to team, update message for non-team members * remove adding to team from add groups functionality * update misspelled variable * lint and unit test fixes * add tests, cleanup * lint fix * revert package-lock.json * fixes for cypress tests * rename TeamInviteBanner to TeamWarningBanner, since invites are no longer allowed * update for warning * lint fixes * cleanup * fix failing e2e tests * update messages to not use markdown --------- Co-authored-by: Scott Bishel Co-authored-by: Mattermost Build --- .../add_users_to_channel_spec.ts | 229 +++- .../accessibility_modals_dialogs_spec.js | 6 +- .../system_console/channel_members_spec.js | 2 +- e2e-tests/cypress/tests/support/api/group.ts | 45 + e2e-tests/cypress/tests/support/api/index.js | 1 + e2e-tests/cypress/tests/support/index.d.ts | 1 + server/channels/api4/group.go | 2 + server/channels/app/group.go | 24 + server/channels/web/params.go | 2 + server/public/model/group.go | 3 + webapp/channels/src/actions/views/group.js | 9 +- .../channels/src/components/alert_banner.scss | 18 +- .../channels/src/components/alert_banner.tsx | 9 + .../notification_from_members_modal.tsx | 7 +- .../channel_invite_modal.test.tsx.snap | 137 +-- .../channel_invite_modal.test.tsx | 20 +- .../channel_invite_modal.tsx | 350 ++++-- .../group_option/group_option.tsx | 128 ++ .../group_option/index.ts | 4 + .../components/channel_invite_modal/index.ts | 48 +- .../team_warning_banner.test.tsx.snap | 1054 +++++++++++++++++ .../team_warning_banner/index.ts | 4 + .../team_warning_banner.test.tsx | 153 +++ .../team_warning_banner.tsx | 220 ++++ .../channel_members_rhs/member_list.tsx | 21 +- .../team_controller/actions/index.ts | 1 + webapp/channels/src/i18n/en.json | 8 + .../src/selectors/entities/teams.ts | 9 + .../components/_channel-invite-modal.scss | 41 + .../channels/src/sass/components/_modal.scss | 7 + webapp/channels/src/utils/utils.tsx | 18 + webapp/platform/types/src/groups.ts | 2 + 32 files changed, 2323 insertions(+), 260 deletions(-) create mode 100644 e2e-tests/cypress/tests/support/api/group.ts create mode 100644 webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx create mode 100644 webapp/channels/src/components/channel_invite_modal/group_option/index.ts create mode 100644 webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap create mode 100644 webapp/channels/src/components/channel_invite_modal/team_warning_banner/index.ts create mode 100644 webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.test.tsx create mode 100644 webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx diff --git a/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts index 13001c8d9f2..544a82b96fc 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel_settings/add_users_to_channel_spec.ts @@ -10,29 +10,53 @@ // Stage: @prod // Group: @channels @channel @channel_settings @smoke +import {getRandomId} from '../../../utils'; + describe('Channel Settings', () => { let testTeam: Cypress.Team; let firstUser: Cypress.UserProfile; let addedUsersChannel: Cypress.Channel; let username: string; + let groupId: string; const usernames: string[] = []; + const users: Cypress.UserProfile[] = []; + before(() => { cy.apiInitSetup().then(({team, user}) => { testTeam = team; firstUser = user; + const teamId = testTeam.id; - // # Add 4 users - for (let i = 0; i < 4; i++) { - cy.apiCreateUser().then(({user: newUser}) => { // eslint-disable-line - cy.apiAddUserToTeam(testTeam.id, newUser.id); + // # Add 10 users + for (let i = 0; i < 10; i++) { + cy.apiCreateUser().then(({user: newUser}) => { + users.push(newUser); + cy.apiAddUserToTeam(teamId, newUser.id); }); } - cy.apiCreateChannel(testTeam.id, 'channel-test', 'Channel').then(({channel}) => { + cy.apiCreateChannel(teamId, 'channel-test', 'Channel').then(({channel}) => { addedUsersChannel = channel; }); + // # Change permission so that regular users can't add team members + cy.apiGetRolesByNames(['team_user']).then((result: any) => { + if (result.roles) { + const role = result.roles[0]; + const permissions = role.permissions.filter((permission) => { + return !(['add_user_to_team'].includes(permission)); + }); + + if (permissions.length !== role.permissions) { + cy.apiPatchRole(role.id, {permissions}); + } + } + }); + cy.apiLogin(firstUser); + }).then(() => { + groupId = getRandomId(); + cy.apiCreateCustomUserGroup(`group${groupId}`, `group${groupId}`, [users[0].id, users[1].id]); }); }); @@ -42,7 +66,7 @@ describe('Channel Settings', () => { cy.visit(`/${testTeam.name}/channels/${channel.name}`); // # Add users to channel - addNumberOfUsersToChannel(1); + addNumberOfUsersToChannel(1, false); cy.getLastPostId().then((id) => { // * The system message should contain 'added to the channel by you' @@ -59,7 +83,7 @@ describe('Channel Settings', () => { cy.apiCreateChannel(testTeam.id, 'channel-test', 'Channel').then(({channel}) => { cy.visit(`/${testTeam.name}/channels/${channel.name}`); - addNumberOfUsersToChannel(3); + addNumberOfUsersToChannel(3, false); cy.getLastPostId().then((id) => { cy.get(`#postMessageText_${id}`).should('contain', '2 others were added to the channel by you'); @@ -82,10 +106,10 @@ describe('Channel Settings', () => { cy.get('#addUsersToChannelModal').should('be.visible'); // # Type into the input box to search for a user - cy.get('#selectItems input').typeWithForce('u'); + cy.get('#selectItems input').typeWithForce('user'); // # First add one user in order to see them disappearing from the list - cy.get('#multiSelectList > div').first().then((el) => { + cy.get('#multiSelectList > div').not(':contains("Already in channel")').first().then((el) => { const childNodes = Array.from(el[0].childNodes); childNodes.map((child: HTMLElement) => usernames.push(child.innerText)); @@ -113,7 +137,7 @@ describe('Channel Settings', () => { }); // Add two more users - addNumberOfUsersToChannel(2); + addNumberOfUsersToChannel(2, false); // Verify that the system post reflects the number of added users cy.getLastPostId().then((id) => { @@ -148,6 +172,179 @@ describe('Channel Settings', () => { }); cy.get('body').type('{esc}'); }); + + it('Add group members to channel', () => { + cy.apiLogin(firstUser); + + // # Create a new channel + cy.apiCreateChannel(testTeam.id, 'new-channel', 'New Channel').then(({channel}) => { + // # Visit the channel + cy.visit(`/${testTeam.name}/channels/${channel.name}`); + + // # Open channel menu and click 'Add Members' + cy.uiOpenChannelMenu('Add Members'); + + // * Assert that modal appears + cy.get('#addUsersToChannelModal').should('be.visible'); + + // # Type 'group'+ id created in beforeAll into the input box + cy.get('#selectItems input').typeWithForce(`group${groupId}`); + + // # Click the first row for a number of times + // cy.get('#multiSelectList').should('be.visible').first().click(); + cy.get('#multiSelectList').should('exist').children().first().click(); + + // # Click the button "Add" to add user to a channel + cy.uiGetButton('Add').click(); + + // # Wait for the modal to disappear + cy.get('#addUsersToChannelModal').should('not.exist'); + + cy.getLastPostId().then((id) => { + // * The system message should contain 'added to the channel by you' + cy.get(`#postMessageText_${id}`).should('contain', 'added to the channel by you'); + + // # Verify username link + verifyMentionedUserAndProfilePopover(id); + }); + + // * Check that the number of channel members is 3 + cy.get('#channelMemberCountText'). + should('be.visible'). + and('have.text', '3'); + }); + }); + + it('Add group members that are not team members', () => { + cy.apiAdminLogin(); + + // # Create a new user + cy.apiCreateUser().then(({user: newUser}) => { + const id = getRandomId(); + + // # Create a custom user group + cy.apiCreateCustomUserGroup(`newgroup${id}`, `newgroup${id}`, [newUser.id]).then(() => { + // # Create a new channel + cy.apiCreateChannel(testTeam.id, 'new-group-channel', 'New Group Channel').then(({channel}) => { + // # Visit a channel + cy.visit(`/${testTeam.name}/channels/${channel.name}`); + + // # Open channel menu and click 'Add Members' + cy.uiOpenChannelMenu('Add Members'); + + // * Assert that modal appears + cy.get('#addUsersToChannelModal').should('be.visible'); + + // # Type 'group' into the input box + cy.get('#selectItems input').typeWithForce(`newgroup${id}`); + + // # Click the first row for a number of times + // cy.get('#multiSelectList').should('be.visible').first().click(); + cy.get('#multiSelectList').should('exist').children().first().click(); + + // * Check you get a warning when adding a non team member + cy.findByTestId('teamWarningBanner').should('contain', '1 user was not selected because they are not a part of this team'); + + // * Check the correct username is appearing in the team invite banner + cy.findByTestId('teamWarningBanner').should('contain', `@${newUser.username}`); + + // # Click the button "Add" to add user to a channel + cy.uiGetButton('Cancel').click(); + + // # Wait for the modal to disappear + cy.get('#addUsersToChannelModal').should('not.exist'); + }); + }); + }); + }); + + it('Add group members and guests that are not team members', () => { + cy.apiAdminLogin(); + + // # Create a new user + cy.apiCreateUser().then(({user: newUser}) => { + // # Create a guest user + cy.apiCreateGuestUser({}).then(({guest}) => { + const id = getRandomId(); + + // # Create a custom user group + cy.apiCreateCustomUserGroup(`guestgroup${id}`, `guestgroup${id}`, [guest.id, newUser.id]).then(() => { + // # Create a new channel + cy.apiCreateChannel(testTeam.id, 'group-guest-channel', 'Channel').then(({channel}) => { + // # Visit a channel + cy.visit(`/${testTeam.name}/channels/${channel.name}`); + + // # Open channel menu and click 'Add Members' + cy.uiOpenChannelMenu('Add Members'); + + // * Assert that modal appears + cy.get('#addUsersToChannelModal').should('be.visible'); + + // # Type 'group' into the input box + cy.get('#selectItems input').typeWithForce(`guestgroup${id}`); + + // # Click the first row for a number of times + // cy.get('#multiSelectList').should('be.visible').first().click(); + cy.get('#multiSelectList').should('exist').children().first().click(); + + // * Check you get a warning when adding a non team member + cy.findByTestId('teamWarningBanner').should('contain', '2 users were not selected because they are not a part of this team'); + + // * Check the correct username is appearing in the invite to team portion + cy.findByTestId('teamWarningBanner').should('contain', `@${newUser.username}`); + + // * Check the guest username is in the warning message and won't be added to the team + cy.findByTestId('teamWarningBanner').should('contain', `@${guest.username} is a guest user`); + + // # Click the button "Add" to add user to a channel + cy.uiGetButton('Cancel').click(); + + // # Wait for the modal to disappear + cy.get('#addUsersToChannelModal').should('not.exist'); + }); + }); + }); + }); + }); + + it('User doesn\'t have permission to add user to team', () => { + cy.apiAdminLogin(); + + // # Create a new user + cy.apiCreateUser().then(({user: newUser}) => { + const id = getRandomId(); + + // # Create a custom user group + cy.apiCreateCustomUserGroup(`newgroup${id}`, `newgroup${id}`, [newUser.id]).then(() => { + // # Create a new channel + cy.apiCreateChannel(testTeam.id, 'new-group-channel', 'Channel').then(({channel}) => { + cy.apiLogin(firstUser); + + // # Visit a channel + cy.visit(`/${testTeam.name}/channels/${channel.name}`); + + // # Open channel menu and click 'Add Members' + cy.uiOpenChannelMenu('Add Members'); + + // * Assert that modal appears + cy.get('#addUsersToChannelModal').should('be.visible'); + + // # Type 'group' into the input box + cy.get('#selectItems input').typeWithForce(`newgroup${id}`); + + // # Click the first row for a number of times + // cy.get('#multiSelectList').should('be.visible').first().click(); + cy.get('#multiSelectList').should('exist').children().first().click(); + + // * Check you get a warning when adding a non team member + cy.findByTestId('teamWarningBanner').should('contain', '1 user was not selected because they are not a part of this team'); + + // * Check the correct username is appearing in the team invite banner + cy.findByTestId('teamWarningBanner').should('contain', `@${newUser.username}`); + }); + }); + }); + }); }); function verifyMentionedUserAndProfilePopover(postId: string) { @@ -169,7 +366,7 @@ function verifyMentionedUserAndProfilePopover(postId: string) { }); } -function addNumberOfUsersToChannel(num = 1) { +function addNumberOfUsersToChannel(num = 1, allowExisting = false) { // # Open channel menu and click 'Add Members' cy.uiOpenChannelMenu('Add Members'); cy.get('#addUsersToChannelModal').should('be.visible'); @@ -177,8 +374,14 @@ function addNumberOfUsersToChannel(num = 1) { // * Assert that modal appears // # Click the first row for a number of times Cypress._.times(num, () => { - cy.get('#selectItems input').typeWithForce('u'); - cy.get('#multiSelectList').should('be.visible').first().click(); + cy.get('#selectItems input').typeWithForce('user'); + + // cy.get('#multiSelectList').should('be.visible').first().click(); + if (allowExisting) { + cy.get('#multiSelectList').should('exist').children().first().click(); + } else { + cy.get('#multiSelectList').should('exist').children().not(':contains("Already in channel")').first().click(); + } }); // # Click the button "Add" to add user to a channel diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.js b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.js index b6df6433ff3..01fb97f6592 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.js @@ -155,11 +155,11 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => { cy.findByRole('heading', {name: modalName}); // * Verify the accessibility support in search input - cy.findByRole('textbox', {name: 'Search for people'}). + cy.findByRole('textbox', {name: 'Search for people or groups'}). should('have.attr', 'aria-autocomplete', 'list'); // # Search for a text and then check up and down arrow - cy.findByRole('textbox', {name: 'Search for people'}). + cy.findByRole('textbox', {name: 'Search for people or groups'}). typeWithForce('u'). wait(TIMEOUTS.HALF_SEC). typeWithForce('{downarrow}{downarrow}{downarrow}{uparrow}'); @@ -184,7 +184,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => { }); // # Search for an invalid text and check if reader can read no results - cy.findByRole('textbox', {name: 'Search for people'}). + cy.findByRole('textbox', {name: 'Search for people or groups'}). typeWithForce('somethingwhichdoesnotexist'). wait(TIMEOUTS.HALF_SEC); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_members_spec.js b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_members_spec.js index 7b78ec869ee..964cfc0845c 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_members_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_members_spec.js @@ -119,7 +119,7 @@ describe('Channel members test', () => { cy.get('#addChannelMembers').click(); // # Enter user1 and user2 emails - cy.findByRole('textbox', {name: 'Search for people'}).typeWithForce(`${user1.email}{enter}${user2.email}{enter}`); + cy.findByRole('textbox', {name: 'Search for people or groups'}).typeWithForce(`${user1.email}{enter}${user2.email}{enter}`); // # Confirm add the users cy.get('#addUsersToChannelModal #saveItems').click(); diff --git a/e2e-tests/cypress/tests/support/api/group.ts b/e2e-tests/cypress/tests/support/api/group.ts new file mode 100644 index 00000000000..e57fc3db70f --- /dev/null +++ b/e2e-tests/cypress/tests/support/api/group.ts @@ -0,0 +1,45 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +// ***************************************************************************** +// Groups +// https://api.mattermost.com/#tag/groups +// ***************************************************************************** + +import {ChainableT} from '../../types'; + +function apiCreateCustomUserGroup(displayName: string, name: string, userIds: string[]): ChainableT { + return cy.request({ + headers: {'X-Requested-With': 'XMLHttpRequest'}, + url: '/api/v4/groups', + method: 'POST', + body: { + display_name: displayName, + name, + source: 'custom', + allow_reference: true, + user_ids: userIds, + }, + }).then((response) => { + expect(response.status).to.equal(201); + return cy.wrap(response); + }); +} + +Cypress.Commands.add('apiCreateCustomUserGroup', apiCreateCustomUserGroup); + +declare global { + // eslint-disable-next-line @typescript-eslint/no-namespace + namespace Cypress { + interface Chainable { + + /** + * Create custom user group + * @param {string} displayName - the display name of the group + * @param {string} name - the @ mentionable name of the group + * @param {string[]} userIds - users to add to the group + */ + apiCreateCustomUserGroup: typeof apiCreateCustomUserGroup; + } + } +} diff --git a/e2e-tests/cypress/tests/support/api/index.js b/e2e-tests/cypress/tests/support/api/index.js index e9edc95e1bc..6d38b1883bd 100644 --- a/e2e-tests/cypress/tests/support/api/index.js +++ b/e2e-tests/cypress/tests/support/api/index.js @@ -8,6 +8,7 @@ import './cloud'; import './cluster'; import './common'; import './data_retention'; +import './group'; import './keycloak'; import './ldap'; import './playbooks'; diff --git a/e2e-tests/cypress/tests/support/index.d.ts b/e2e-tests/cypress/tests/support/index.d.ts index bdc9058257e..eca9acd5707 100644 --- a/e2e-tests/cypress/tests/support/index.d.ts +++ b/e2e-tests/cypress/tests/support/index.d.ts @@ -33,6 +33,7 @@ declare namespace Cypress { type UserCustomStatus = import('@mattermost/types/users').UserCustomStatus; type UserAccessToken = import('@mattermost/types/users').UserAccessToken; type DeepPartial = import('@mattermost/types/utilities').DeepPartial; + type Group = import('@mattermost/types/groups').Group; interface Chainable { tab: (options?: {shift?: boolean}) => Chainable; } diff --git a/server/channels/api4/group.go b/server/channels/api4/group.go index 3e3df44009d..d04cf25b238 100644 --- a/server/channels/api4/group.go +++ b/server/channels/api4/group.go @@ -117,6 +117,7 @@ func getGroup(c *Context, w http.ResponseWriter, r *http.Request) { group, appErr := c.App.GetGroup(c.Params.GroupId, &model.GetGroupOpts{ IncludeMemberCount: c.Params.IncludeMemberCount, + IncludeMemberIDs: c.Params.IncludeMemberIDs, }, restrictions) if appErr != nil { c.Err = appErr @@ -998,6 +999,7 @@ func getGroups(c *Context, w http.ResponseWriter, r *http.Request) { Source: source, FilterHasMember: c.Params.FilterHasMember, IncludeTimezones: includeTimezones, + IncludeMemberIDs: c.Params.IncludeMemberIDs, IncludeArchived: includeArchived, } diff --git a/server/channels/app/group.go b/server/channels/app/group.go index 3cad7fdc89d..d7774902569 100644 --- a/server/channels/app/group.go +++ b/server/channels/app/group.go @@ -24,6 +24,17 @@ func (a *App) GetGroup(id string, opts *model.GetGroupOpts, viewRestrictions *mo } } + if opts != nil && opts.IncludeMemberIDs { + users, err := a.Srv().Store().Group().GetMemberUsers(id) + if err != nil { + return nil, model.NewAppError("GetGroup", "app.member_count", nil, "", http.StatusInternalServerError).Wrap(err) + } + + for _, user := range users { + group.MemberIDs = append(group.MemberIDs, user.Id) + } + } + if opts != nil && opts.IncludeMemberCount { memberCount, err := a.Srv().Store().Group().GetMemberCountWithRestrictions(id, viewRestrictions) if err != nil { @@ -636,6 +647,19 @@ func (a *App) GetGroups(page, perPage int, opts model.GroupSearchOpts, viewRestr return nil, model.NewAppError("GetGroups", "app.select_error", nil, "", http.StatusInternalServerError).Wrap(err) } + if opts.IncludeMemberIDs { + for _, group := range groups { + users, err := a.Srv().Store().Group().GetMemberUsers(group.Id) + if err != nil { + return nil, model.NewAppError("GetGroup", "app.member_count", nil, "", http.StatusInternalServerError).Wrap(err) + } + + for _, user := range users { + group.MemberIDs = append(group.MemberIDs, user.Id) + } + } + } + return groups, nil } diff --git a/server/channels/web/params.go b/server/channels/web/params.go index 040d94b3423..a985d2dde94 100644 --- a/server/channels/web/params.go +++ b/server/channels/web/params.go @@ -75,6 +75,7 @@ type Params struct { NotAssociatedToChannel string Paginate *bool IncludeMemberCount bool + IncludeMemberIDs bool NotAssociatedToGroup string ExcludeDefaultChannels bool LimitAfter int @@ -218,6 +219,7 @@ func ParamsFromRequest(r *http.Request) *Params { } params.IncludeMemberCount, _ = strconv.ParseBool(query.Get("include_member_count")) + params.IncludeMemberIDs, _ = strconv.ParseBool(query.Get("include_member_ids")) params.NotAssociatedToGroup = query.Get("not_associated_to_group") params.ExcludeDefaultChannels, _ = strconv.ParseBool(query.Get("exclude_default_channels")) params.GroupIDs = query.Get("group_ids") diff --git a/server/public/model/group.go b/server/public/model/group.go index 93cbe25b892..50d7d93ec4e 100644 --- a/server/public/model/group.go +++ b/server/public/model/group.go @@ -45,6 +45,7 @@ type Group struct { AllowReference bool `json:"allow_reference"` ChannelMemberCount *int `db:"-" json:"channel_member_count,omitempty"` ChannelMemberTimezonesCount *int `db:"-" json:"channel_member_timezones_count,omitempty"` + MemberIDs []string `db:"-" json:"member_ids"` } func (group *Group) Auditable() map[string]interface{} { @@ -133,6 +134,7 @@ type GroupSearchOpts struct { IncludeChannelMemberCount string IncludeTimezones bool + IncludeMemberIDs bool // Include archived groups IncludeArchived bool @@ -143,6 +145,7 @@ type GroupSearchOpts struct { type GetGroupOpts struct { IncludeMemberCount bool + IncludeMemberIDs bool } type PageOpts struct { diff --git a/webapp/channels/src/actions/views/group.js b/webapp/channels/src/actions/views/group.js index 1c607b5c4c5..951093277a5 100644 --- a/webapp/channels/src/actions/views/group.js +++ b/webapp/channels/src/actions/views/group.js @@ -8,7 +8,7 @@ import {searchAssociatedGroupsForReferenceLocal} from 'mattermost-redux/selector import {isCustomGroupsEnabled} from 'mattermost-redux/selectors/entities/preferences'; import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles'; -export function searchAssociatedGroupsForReference(prefix, teamId, channelId) { +export function searchAssociatedGroupsForReference(prefix, teamId, channelId, opts = {}) { return async (dispatch, getState) => { const state = getState(); if (!haveIChannelPermission(state, @@ -23,7 +23,7 @@ export function searchAssociatedGroupsForReference(prefix, teamId, channelId) { const isTimezoneEnabled = config.ExperimentalTimezone === 'true'; if (isCustomGroupsEnabled(state)) { - await dispatch(searchGroups({ + const params = { q: prefix, filter_allow_reference: true, page: 0, @@ -31,7 +31,10 @@ export function searchAssociatedGroupsForReference(prefix, teamId, channelId) { include_member_count: true, include_channel_member_count: channelId, include_timezones: isTimezoneEnabled, - })); + ...opts, + }; + + await dispatch(searchGroups(params)); } return {data: searchAssociatedGroupsForReferenceLocal(state, prefix, teamId, channelId)}; }; diff --git a/webapp/channels/src/components/alert_banner.scss b/webapp/channels/src/components/alert_banner.scss index 9f498c577a8..29501931c49 100644 --- a/webapp/channels/src/components/alert_banner.scss +++ b/webapp/channels/src/components/alert_banner.scss @@ -8,6 +8,19 @@ padding: 14px; border: 1px solid; border-radius: 4px; + + &__message { + margin-top: 8px; + } + + &__footerMessage { + margin-top: 16px; + } + + &__message, + &__footerMessage { + line-height: 20px; + } } .AlertBanner__icon { @@ -68,11 +81,6 @@ } } -.AlertBanner__message { - margin-top: 8px; - line-height: 20px; -} - .AlertBanner__closeButton { display: flex; padding: 3px; diff --git a/webapp/channels/src/components/alert_banner.tsx b/webapp/channels/src/components/alert_banner.tsx index ec0e9692f98..3e2dde38279 100644 --- a/webapp/channels/src/components/alert_banner.tsx +++ b/webapp/channels/src/components/alert_banner.tsx @@ -31,6 +31,7 @@ export type AlertBannerProps = { hideIcon?: boolean; actionButtonLeft?: React.ReactNode; actionButtonRight?: React.ReactNode; + footerMessage?: React.ReactNode; closeBtnTooltip?: React.ReactNode; onDismiss?: () => void; variant?: 'sys' | 'app'; @@ -47,6 +48,7 @@ const AlertBanner = ({ actionButtonLeft, actionButtonRight, closeBtnTooltip, + footerMessage, hideIcon, children, }: AlertBannerProps) => { @@ -105,6 +107,13 @@ const AlertBanner = ({ {actionButtonRight} )} + { + footerMessage && ( +
+ {footerMessage} +
+ ) + } {onDismiss && ( + @@ -178,9 +164,6 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit ariaLabelRenderer={[Function]} backButtonClass="btn-cancel tertiary-button" backButtonClick={[Function]} - backButtonText="Cancel" - buttonSubmitLoadingText="Adding..." - buttonSubmitText="Add" customNoOptionsMessage={null} focusOnLoad={true} handleAdd={[Function]} @@ -192,24 +175,8 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit key="addUsersToChannelKey" loading={true} optionRenderer={[Function]} - options={ - Array [ - Object { - "delete_at": 0, - "id": "user-1", - "label": "user-1", - "value": "user-1", - }, - Object { - "delete_at": 0, - "id": "user-2", - "label": "user-2", - "value": "user-2", - }, - ] - } + options={Array []} perPage={50} - placeholderText="Search for people" saveButtonPosition="bottom" saving={false} savingEnabled={true} @@ -221,52 +188,36 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit valueWithImage={true} values={Array []} /> + `; exports[`components/channel_invite_modal should match snapshot for channel_invite_modal with userStatuses 1`] = ` -
- -
-
- - - - -
-
-
-
- -
-
-
+ `; exports[`components/channel_invite_modal should match snapshot with exclude and include users 1`] = ` @@ -334,9 +285,6 @@ exports[`components/channel_invite_modal should match snapshot with exclude and ariaLabelRenderer={[Function]} backButtonClass="btn-cancel tertiary-button" backButtonClick={[Function]} - backButtonText="Cancel" - buttonSubmitLoadingText="Adding..." - buttonSubmitText="Add" customNoOptionsMessage={null} focusOnLoad={true} handleAdd={[Function]} @@ -348,24 +296,8 @@ exports[`components/channel_invite_modal should match snapshot with exclude and key="addUsersToChannelKey" loading={true} optionRenderer={[Function]} - options={ - Array [ - Object { - "delete_at": 0, - "id": "user-2", - "label": "user-2", - "value": "user-2", - }, - Object { - "delete_at": 0, - "id": "user-3", - "label": "user-3", - "value": "user-3", - }, - ] - } + options={Array []} perPage={50} - placeholderText="Search for people" saveButtonPosition="bottom" saving={false} savingEnabled={true} @@ -377,6 +309,11 @@ exports[`components/channel_invite_modal should match snapshot with exclude and valueWithImage={true} values={Array []} /> + diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx index f03e62eb6ec..bc8a5ea3a5c 100644 --- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx +++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.test.tsx @@ -16,6 +16,15 @@ import type {Value} from 'components/multiselect/multiselect'; type UserProfileValue = Value & UserProfile; +jest.mock('utils/utils', () => { + const original = jest.requireActual('utils/utils'); + return { + ...original, + localizeMessage: jest.fn(), + sortUsersAndGroups: jest.fn(), + }; +}); + describe('components/channel_invite_modal', () => { const users = [{ id: 'user-1', @@ -55,8 +64,11 @@ describe('components/channel_invite_modal', () => { profilesInCurrentChannel: [], profilesNotInCurrentTeam: [], profilesFromRecentDMs: [], + membersInTeam: {}, + groups: [], userStatuses: {}, teammateNameDisplaySetting: General.TEAMMATE_NAME_DISPLAY.SHOW_USERNAME, + isGroupsEnabled: true, actions: { addUsersToChannel: jest.fn().mockImplementation(() => { const error = { @@ -67,11 +79,13 @@ describe('components/channel_invite_modal', () => { }), getProfilesNotInChannel: jest.fn().mockImplementation(() => Promise.resolve()), getProfilesInChannel: jest.fn().mockImplementation(() => Promise.resolve()), + searchAssociatedGroupsForReference: jest.fn().mockImplementation(() => Promise.resolve()), getTeamStats: jest.fn(), getUserStatuses: jest.fn().mockImplementation(() => Promise.resolve()), loadStatusesForProfilesList: jest.fn(), searchProfiles: jest.fn(), closeModal: jest.fn(), + getTeamMembersByIds: jest.fn(), }, onExited: jest.fn(), }; @@ -176,7 +190,7 @@ describe('components/channel_invite_modal', () => { />, ); - wrapper.setState({values: users, show: true}); + wrapper.setState({selectedUsers: users, show: true}); wrapper.instance().handleSubmit(); expect(wrapper.state('saving')).toEqual(true); expect(wrapper.instance().props.actions.addUsersToChannel).toHaveBeenCalledTimes(1); @@ -205,7 +219,7 @@ describe('components/channel_invite_modal', () => { />, ); - wrapper.setState({values: users, show: true}); + wrapper.setState({selectedUsers: users, show: true}); wrapper.instance().handleSubmit(); expect(wrapper.state('saving')).toEqual(true); expect(wrapper.instance().props.actions.addUsersToChannel).toHaveBeenCalledTimes(1); @@ -231,7 +245,7 @@ describe('components/channel_invite_modal', () => { />, ); - wrapper.setState({values: users, show: true}); + wrapper.setState({selectedUsers: users, show: true}); wrapper.instance().handleSubmit(); expect(onAddCallback).toHaveBeenCalled(); expect(wrapper.instance().props.actions.addUsersToChannel).toHaveBeenCalledTimes(0); diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx index 5275e8b69d8..b0cfa467a9d 100644 --- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx +++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx @@ -1,16 +1,21 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. +import {isEqual} from 'lodash'; import React from 'react'; import {Modal} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; +import styled from 'styled-components'; import type {Channel} from '@mattermost/types/channels'; +import type {Group, GroupSearchParams} from '@mattermost/types/groups'; +import type {TeamMembership} from '@mattermost/types/teams'; import type {UserProfile} from '@mattermost/types/users'; import type {RelationOneToOne} from '@mattermost/types/utilities'; import {Client4} from 'mattermost-redux/client'; import type {ActionResult} from 'mattermost-redux/types/actions'; +import {filterGroupsMatchingTerm} from 'mattermost-redux/utils/group_utils'; import {displayUsername, filterProfilesStartingWithTerm, isGuest} from 'mattermost-redux/utils/user_utils'; import InvitationModal from 'components/invitation_modal'; @@ -23,7 +28,10 @@ import BotTag from 'components/widgets/tag/bot_tag'; import GuestTag from 'components/widgets/tag/guest_tag'; import Constants, {ModalIdentifiers} from 'utils/constants'; -import {localizeMessage} from 'utils/utils'; +import {localizeMessage, sortUsersAndGroups} from 'utils/utils'; + +import GroupOption from './group_option'; +import TeamWarningBanner from './team_warning_banner'; const USERS_PER_PAGE = 50; const USERS_FROM_DMS = 10; @@ -31,11 +39,14 @@ const MAX_USERS = 25; type UserProfileValue = Value & UserProfile; +type GroupValue = Value & Group; + export type Props = { - profilesNotInCurrentChannel: UserProfileValue[]; - profilesInCurrentChannel: UserProfileValue[]; - profilesNotInCurrentTeam: UserProfileValue[]; + profilesNotInCurrentChannel: UserProfile[]; + profilesInCurrentChannel: UserProfile[]; + profilesNotInCurrentTeam: UserProfile[]; profilesFromRecentDMs: UserProfile[]; + membersInTeam: RelationOneToOne; userStatuses: RelationOneToOne; onExited: () => void; channel: Channel; @@ -52,6 +63,8 @@ export type Props = { includeUsers?: Record; canInviteGuests?: boolean; emailInvitationsEnabled?: boolean; + groups: Group[]; + isGroupsEnabled: boolean; actions: { addUsersToChannel: (channelId: string, userIds: string[]) => Promise; getProfilesNotInChannel: (teamId: string, channelId: string, groupConstrained: boolean, page: number, perPage?: number) => Promise; @@ -60,11 +73,16 @@ export type Props = { loadStatusesForProfilesList: (users: UserProfile[]) => void; searchProfiles: (term: string, options: any) => Promise; closeModal: (modalId: string) => void; + searchAssociatedGroupsForReference: (prefix: string, teamId: string, channelId: string | undefined, opts: GroupSearchParams) => Promise; + getTeamMembersByIds: (teamId: string, userIds: string[]) => Promise; }; } type State = { - values: UserProfileValue[]; + selectedUsers: UserProfileValue[]; + groupAndUserOptions: Array; + usersNotInTeam: UserProfileValue[]; + guestsNotInTeam: UserProfileValue[]; term: string; show: boolean; saving: boolean; @@ -72,6 +90,15 @@ type State = { inviteError?: string; } +const UsernameSpan = styled.span` + fontSize: 12px; +`; + +const UserMappingSpan = styled.span` + position: 'absolute'; + right: 20; +`; + export default class ChannelInviteModal extends React.PureComponent { private searchTimeoutId = 0; private selectedItemRef = React.createRef(); @@ -85,21 +112,70 @@ export default class ChannelInviteModal extends React.PureComponent { - const values: UserProfileValue[] = Object.assign([], this.state.values); - if (values.indexOf(value) === -1) { - values.push(value); - } + isUser = (option: UserProfileValue | GroupValue): option is UserProfileValue => { + return (option as UserProfile).username !== undefined; + }; - this.setState({values}); + private addValue = (value: UserProfileValue | GroupValue): void => { + if (this.isUser(value)) { + const profile = value; + if (!this.props.membersInTeam || !this.props.membersInTeam[profile.id]) { + if (isGuest(profile.roles)) { + if (this.state.guestsNotInTeam.indexOf(profile) === -1) { + this.setState((prevState) => { + return {guestsNotInTeam: [...prevState.guestsNotInTeam, profile]}; + }); + } + return; + } + if (this.state.usersNotInTeam.indexOf(profile) === -1) { + this.setState((prevState) => { + return {usersNotInTeam: [...prevState.usersNotInTeam, profile]}; + }); + } + return; + } + + if (this.state.selectedUsers.indexOf(profile) === -1) { + this.setState((prevState) => { + return {selectedUsers: [...prevState.selectedUsers, profile]}; + }); + } + } + }; + + private removeInvitedUsers = (profiles: UserProfile[]): void => { + const usersNotInTeam = this.state.usersNotInTeam.filter((profile) => { + const user = profile as UserProfileValue; + + const index = profiles.indexOf(user); + if (index === -1) { + return true; + } + this.addValue(user); + return false; + }); + + this.setState({usersNotInTeam: [...usersNotInTeam], guestsNotInTeam: []}); + }; + + private removeUsersFromValuesNotInTeam = (profiles: UserProfile[]): void => { + const usersNotInTeam = this.state.usersNotInTeam.filter((profile) => { + const index = profiles.indexOf(profile); + return index === -1; + }); + this.setState({usersNotInTeam: [...usersNotInTeam], guestsNotInTeam: []}); }; public componentDidMount(): void { @@ -112,6 +188,62 @@ export default class ChannelInviteModal extends React.PureComponent 0) { + this.props.actions.getTeamMembersByIds(this.props.channel.team_id, userIds); + } + this.setState({groupAndUserOptions: values}); + } + } + } + + getExcludedUsers = (): Set => { + if (this.props.excludeUsers) { + return new Set(...this.props.profilesNotInCurrentTeam.map((user) => user.id), Object.values(this.props.excludeUsers).map((user) => user.id)); + } + return new Set(this.props.profilesNotInCurrentTeam.map((user) => user.id)); + }; + + // Options list prioritizes recent dms for the first 10 users and then the next 15 are a mix of users and groups + public getOptions = () => { + const excludedAndNotInTeamUserIds = this.getExcludedUsers(); + + const filteredDmUsers = filterProfilesStartingWithTerm(this.props.profilesFromRecentDMs, this.state.term); + const dmUsers = this.filterOutDeletedAndExcludedAndNotInTeamUsers(filteredDmUsers, excludedAndNotInTeamUserIds).slice(0, USERS_FROM_DMS) as UserProfileValue[]; + + let users: UserProfileValue[]; + const filteredUsers: UserProfile[] = filterProfilesStartingWithTerm(this.props.profilesNotInCurrentChannel.concat(this.props.profilesInCurrentChannel), this.state.term); + users = this.filterOutDeletedAndExcludedAndNotInTeamUsers(filteredUsers, excludedAndNotInTeamUserIds); + if (this.props.includeUsers) { + users = [...users, ...Object.values(this.props.includeUsers)]; + } + const groupsAndUsers = [ + ...filterGroupsMatchingTerm(this.props.groups, this.state.term) as GroupValue[], + ...users, + ].sort(sortUsersAndGroups); + + const optionValues = [ + ...dmUsers, + ...groupsAndUsers, + ].slice(0, MAX_USERS); + + return Array.from(new Set(optionValues)); + }; + public onHide = (): void => { this.setState({show: false}); this.props.actions.loadStatusesForProfilesList(this.props.profilesNotInCurrentChannel); @@ -127,8 +259,10 @@ export default class ChannelInviteModal extends React.PureComponent { - this.setState({values}); + private handleDelete = (values: Array): void => { + // Our values for this component are always UserProfileValue + const profiles = values as UserProfileValue[]; + this.setState({selectedUsers: profiles}); }; private setUsersLoadingState = (loadingState: boolean): void => { @@ -153,13 +287,13 @@ export default class ChannelInviteModal extends React.PureComponent { const {actions, channel} = this.props; - const userIds = this.state.values.map((v) => v.id); + const userIds = this.state.selectedUsers.map((u) => u.id); if (userIds.length === 0) { return; } if (this.props.skipCommit && this.props.onAddCallback) { - this.props.onAddCallback(this.state.values); + this.props.onAddCallback(this.state.selectedUsers); this.setState({ saving: false, inviteError: undefined, @@ -190,24 +324,6 @@ export default class ChannelInviteModal extends React.PureComponent { - const options = { - team_id: this.props.channel.team_id, - not_in_channel_id: this.props.channel.id, - group_constrained: this.props.channel.group_constrained, - }; - await this.props.actions.searchProfiles(term, options); - this.setUsersLoadingState(false); - }, - Constants.SEARCH_TIMEOUT_MILLISECONDS, - ); - } else { - return; - } - this.searchTimeoutId = window.setTimeout( async () => { if (!term) { @@ -219,18 +335,36 @@ export default class ChannelInviteModal extends React.PureComponent { + private renderAriaLabel = (option: UserProfileValue | GroupValue): string => { if (!option) { return ''; } - return option.username; + if (this.isUser(option)) { + return option.username; + } + return option.name; }; private filterOutDeletedAndExcludedAndNotInTeamUsers = (users: UserProfile[], excludeUserIds: Set): UserProfileValue[] => { @@ -239,63 +373,75 @@ export default class ChannelInviteModal extends React.PureComponent void, onMouseMove: (user: UserProfileValue) => void) => { + renderOption = (option: UserProfileValue | GroupValue, isSelected: boolean, onAdd: (option: UserProfileValue | GroupValue) => void, onMouseMove: (option: UserProfileValue | GroupValue) => void) => { let rowSelected = ''; if (isSelected) { rowSelected = 'more-modal__row--selected'; } - const ProfilesInGroup = this.props.profilesInCurrentChannel.map((user) => user.id); + if (this.isUser(option)) { + const ProfilesInGroup = this.props.profilesInCurrentChannel.map((user) => user.id); - const userMapping: Record = {}; - - for (let i = 0; i < ProfilesInGroup.length; i++) { - userMapping[ProfilesInGroup[i]] = 'Already in channel'; + const userMapping: Record = {}; + for (let i = 0; i < ProfilesInGroup.length; i++) { + userMapping[ProfilesInGroup[i]] = 'Already in channel'; + } + const displayName = displayUsername(option, this.props.teammateNameDisplaySetting); + return ( +
onAdd(option)} + onMouseMove={() => onMouseMove(option)} + > + +
+
+ + {displayName} + {option.is_bot && } + {isGuest(option.roles) && } + {displayName === option.username ? + null : + + {'@'}{option.username} + + } + + {userMapping[option.id]} + + +
+
+
+
+ +
+
+
+ ); } - const displayName = displayUsername(option, this.props.teammateNameDisplaySetting); - return ( -
onAdd(option)} - onMouseMove={() => onMouseMove(option)} - > - -
-
- - {displayName} - {option.is_bot && } - {isGuest(option.roles) && } - {displayName === option.username ? null : ( - - {'@'}{option.username} - - )} - - {userMapping[option.id]} - - -
-
-
-
- -
-
-
+ addUserProfile={onAdd} + isSelected={isSelected} + rowSelected={rowSelected} + onMouseMove={onMouseMove} + selectedItemRef={this.selectedItemRef} + /> ); }; @@ -319,31 +465,6 @@ export default class ChannelInviteModal extends React.PureComponent; - if (this.props.excludeUsers) { - excludedAndNotInTeamUserIds = new Set(...this.props.profilesNotInCurrentTeam.map((user) => user.id), Object.values(this.props.excludeUsers).map((user) => user.id)); - } else { - excludedAndNotInTeamUserIds = new Set(this.props.profilesNotInCurrentTeam.map((user) => user.id)); - } - let users = this.filterOutDeletedAndExcludedAndNotInTeamUsers( - filterProfilesStartingWithTerm( - this.props.profilesNotInCurrentChannel.concat(this.props.profilesInCurrentChannel), - this.state.term), - excludedAndNotInTeamUserIds); - if (this.props.includeUsers) { - const includeUsers = Object.values(this.props.includeUsers); - users = [...users, ...includeUsers]; - } - users = [ - ...this.filterOutDeletedAndExcludedAndNotInTeamUsers( - filterProfilesStartingWithTerm(this.props.profilesFromRecentDMs, this.state.term), - excludedAndNotInTeamUserIds). - slice(0, USERS_FROM_DMS) as UserProfileValue[], - ...users, - ]. - slice(0, MAX_USERS); - - users = Array.from(new Set(users)); const closeMembersInviteModal = () => { this.props.actions.closeModal(ModalIdentifiers.CHANNEL_INVITE); @@ -387,10 +508,10 @@ export default class ChannelInviteModal extends React.PureComponent {content} + {(this.props.emailInvitationsEnabled && this.props.canInviteGuests) && inviteGuestLink} diff --git a/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx new file mode 100644 index 00000000000..ef6b6ae3082 --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/group_option/group_option.tsx @@ -0,0 +1,128 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useEffect} from 'react'; +import {FormattedMessage} from 'react-intl'; +import {useSelector} from 'react-redux'; + +import {AccountMultipleOutlineIcon, ChevronRightIcon} from '@mattermost/compass-icons/components'; +import type {Group} from '@mattermost/types/groups'; +import type {GlobalState} from '@mattermost/types/store'; +import type {UserProfile} from '@mattermost/types/users'; + +import {getUser, makeDisplayNameGetter, makeGetProfilesByIdsAndUsernames} from 'mattermost-redux/selectors/entities/users'; + +import type {Value} from 'components/multiselect/multiselect'; +import SimpleTooltip from 'components/widgets/simple_tooltip'; + +import Constants from 'utils/constants'; + +type UserProfileValue = Value & UserProfile; +type GroupValue = Value & Group; + +export type Props = { + group: GroupValue; + isSelected: boolean; + rowSelected: string; + selectedItemRef: React.RefObject; + onMouseMove: (group: GroupValue) => void; + addUserProfile: (profile: UserProfileValue) => void; +} + +const displayNameGetter = makeDisplayNameGetter(); + +const GroupOption = (props: Props) => { + const { + group, + isSelected, + rowSelected, + selectedItemRef, + onMouseMove, + addUserProfile, + } = props; + + const getProfilesByIdsAndUsernames = makeGetProfilesByIdsAndUsernames(); + + const profiles = useSelector((state: GlobalState) => getProfilesByIdsAndUsernames(state, {allUserIds: group.member_ids || [], allUsernames: []}) as UserProfileValue[]); + const overflowNames = useSelector((state: GlobalState) => { + if (group?.member_ids) { + return group?.member_ids.map((userId) => displayNameGetter(state, true)(getUser(state, userId))).join(', '); + } + return ''; + }); + + const onAdd = useCallback(() => { + for (const profile of profiles) { + addUserProfile(profile); + } + }, [addUserProfile, profiles]); + + const onKeyDown = useCallback((e: KeyboardEvent) => { + if (e.key === Constants.KeyCodes.ENTER[0] && isSelected) { + e.stopPropagation(); + onAdd(); + } + }, [isSelected, onAdd]); + + useEffect(() => { + // Bind the event listener + document.addEventListener('keydown', onKeyDown, true); + return () => { + // Unbind the event listener on clean up + document.removeEventListener('keydown', onKeyDown, true); + }; + }, [onKeyDown]); + + return ( +
onMouseMove(group)} + > + + + +
+
+ + {group.display_name} + + + {'@'}{group.name} + + + + + + + +
+
+
+ ); +}; + +export default React.memo(GroupOption); diff --git a/webapp/channels/src/components/channel_invite_modal/group_option/index.ts b/webapp/channels/src/components/channel_invite_modal/group_option/index.ts new file mode 100644 index 00000000000..5b9480fe4c8 --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/group_option/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +export {default} from './group_option'; diff --git a/webapp/channels/src/components/channel_invite_modal/index.ts b/webapp/channels/src/components/channel_invite_modal/index.ts index 6b29cd96696..f25403cb6ef 100644 --- a/webapp/channels/src/components/channel_invite_modal/index.ts +++ b/webapp/channels/src/components/channel_invite_modal/index.ts @@ -5,37 +5,39 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import type {ActionCreatorsMapObject, Dispatch} from 'redux'; +import type {GroupSearchParams} from '@mattermost/types/groups'; +import type {TeamMembership} from '@mattermost/types/teams'; import type {UserProfile} from '@mattermost/types/users'; +import type {RelationOneToOne} from '@mattermost/types/utilities'; -import {getTeamStats} from 'mattermost-redux/actions/teams'; +import {getTeamStats, getTeamMembersByIds} from 'mattermost-redux/actions/teams'; import {getProfilesNotInChannel, getProfilesInChannel, searchProfiles} from 'mattermost-redux/actions/users'; import {Permissions} from 'mattermost-redux/constants'; import {getRecentProfilesFromDMs} from 'mattermost-redux/selectors/entities/channels'; import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general'; -import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences'; +import {makeGetAllAssociatedGroupsForReference} from 'mattermost-redux/selectors/entities/groups'; +import {getTeammateNameDisplaySetting, isCustomGroupsEnabled} from 'mattermost-redux/selectors/entities/preferences'; import {haveICurrentTeamPermission} from 'mattermost-redux/selectors/entities/roles'; -import {getCurrentTeam, getTeam} from 'mattermost-redux/selectors/entities/teams'; +import {getCurrentTeam, getMembersInCurrentTeam, getMembersInTeam, getTeam} from 'mattermost-redux/selectors/entities/teams'; import {getProfilesNotInCurrentChannel, getProfilesInCurrentChannel, getProfilesNotInCurrentTeam, getProfilesNotInTeam, getUserStatuses, makeGetProfilesNotInChannel, makeGetProfilesInChannel} from 'mattermost-redux/selectors/entities/users'; import type {Action, ActionResult} from 'mattermost-redux/types/actions'; import {addUsersToChannel} from 'actions/channel_actions'; import {loadStatusesForProfilesList} from 'actions/status_actions'; +import {searchAssociatedGroupsForReference} from 'actions/views/group'; import {closeModal} from 'actions/views/modals'; -import type {Value} from 'components/multiselect/multiselect'; - import type {GlobalState} from 'types/store'; import ChannelInviteModal from './channel_invite_modal'; -type UserProfileValue = Value & UserProfile; - type OwnProps = { channelId?: string; teamId?: string; } function makeMapStateToProps(initialState: GlobalState, initialProps: OwnProps) { + const getAllAssociatedGroupsForReference = makeGetAllAssociatedGroupsForReference(); let doGetProfilesNotInChannel: (state: GlobalState, channelId: string, filters?: any) => UserProfile[]; if (initialProps.channelId && initialProps.teamId) { doGetProfilesNotInChannel = makeGetProfilesNotInChannel(); @@ -47,18 +49,21 @@ function makeMapStateToProps(initialState: GlobalState, initialProps: OwnProps) } return (state: GlobalState, props: OwnProps) => { - let profilesNotInCurrentChannel: UserProfileValue[]; - let profilesInCurrentChannel: UserProfileValue[]; - let profilesNotInCurrentTeam: UserProfileValue[]; + let profilesNotInCurrentChannel: UserProfile[]; + let profilesInCurrentChannel: UserProfile[]; + let profilesNotInCurrentTeam: UserProfile[]; + let membersInTeam: RelationOneToOne; if (props.channelId && props.teamId) { - profilesNotInCurrentChannel = doGetProfilesNotInChannel(state, props.channelId) as UserProfileValue[]; - profilesInCurrentChannel = doGetProfilesInChannel(state, props.channelId) as UserProfileValue[]; - profilesNotInCurrentTeam = getProfilesNotInTeam(state, props.teamId) as UserProfileValue[]; + profilesNotInCurrentChannel = doGetProfilesNotInChannel(state, props.channelId); + profilesInCurrentChannel = doGetProfilesInChannel(state, props.channelId); + profilesNotInCurrentTeam = getProfilesNotInTeam(state, props.teamId); + membersInTeam = getMembersInTeam(state, props.teamId); } else { - profilesNotInCurrentChannel = getProfilesNotInCurrentChannel(state) as UserProfileValue[]; - profilesInCurrentChannel = getProfilesInCurrentChannel(state) as UserProfileValue[]; - profilesNotInCurrentTeam = getProfilesNotInCurrentTeam(state) as UserProfileValue[]; + profilesNotInCurrentChannel = getProfilesNotInCurrentChannel(state); + profilesInCurrentChannel = getProfilesInCurrentChannel(state); + profilesNotInCurrentTeam = getProfilesNotInCurrentTeam(state); + membersInTeam = getMembersInCurrentTeam(state); } const profilesFromRecentDMs = getRecentProfilesFromDMs(state); const config = getConfig(state); @@ -71,20 +76,27 @@ function makeMapStateToProps(initialState: GlobalState, initialProps: OwnProps) const isLicensed = license && license.IsLicensed === 'true'; const isGroupConstrained = Boolean(currentTeam.group_constrained); const canInviteGuests = !isGroupConstrained && isLicensed && guestAccountsEnabled && haveICurrentTeamPermission(state, Permissions.INVITE_GUEST); + const enableCustomUserGroups = isCustomGroupsEnabled(state); + + const isGroupsEnabled = enableCustomUserGroups || (license?.IsLicensed === 'true' && license?.LDAPGroups === 'true'); const userStatuses = getUserStatuses(state); const teammateNameDisplaySetting = getTeammateNameDisplaySetting(state); + const groups = getAllAssociatedGroupsForReference(state, true); return { profilesNotInCurrentChannel, profilesInCurrentChannel, profilesNotInCurrentTeam, + membersInTeam, teammateNameDisplaySetting, profilesFromRecentDMs, userStatuses, canInviteGuests, emailInvitationsEnabled, + groups, + isGroupsEnabled, }; }; } @@ -97,6 +109,8 @@ type Actions = { searchProfiles: (term: string, options: any) => Promise; closeModal: (modalId: string) => void; getProfilesInChannel: (channelId: string, page: number, perPage: number, sort: string, options: {active?: boolean}) => Promise; + searchAssociatedGroupsForReference: (prefix: string, teamId: string, channelId: string | undefined, opts: GroupSearchParams) => Promise; + getTeamMembersByIds: (teamId: string, userIds: string[]) => Promise; } function mapDispatchToProps(dispatch: Dispatch) { @@ -109,6 +123,8 @@ function mapDispatchToProps(dispatch: Dispatch) { loadStatusesForProfilesList, searchProfiles, closeModal, + searchAssociatedGroupsForReference, + getTeamMembersByIds, }, dispatch), }; } diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap new file mode 100644 index 00000000000..c7b35893518 --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/__snapshots__/team_warning_banner.test.tsx.snap @@ -0,0 +1,1054 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/channel_invite_modal/team_warning_banner should match snapshot for team_warning_banner with < 10 guest profiles 1`] = ` + + + , + , + ] + } + />, + " are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.", + ] + } + id="teamWarningBanner" + message={false} + mode="warning" + title={ + + } + variant="app" + > +
+
+ + + + + +
+
+
+ + + 2 users were not selected because they are not a part of this team + + +
+
+ , + , + ] + } + > + + + + + and + + + + + + are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel. +
+
+
+ + + +`; + +exports[`components/channel_invite_modal/team_warning_banner should match snapshot for team_warning_banner with < 10 profiles 1`] = ` + + + , + , + ] + } + />, + " to this channel once they are members of the ", + + Team Name Display + , + " team.", + ] + } + mode="warning" + title={ + + } + variant="app" + > +
+
+ + + + + +
+
+
+ + + 2 users were not selected because they are not a part of this team + + +
+
+ You can add + , + , + ] + } + > + + + + + and + + + + + + to this channel once they are members of the + + Team Name Display + + team. +
+
+
+ + + +`; + +exports[`components/channel_invite_modal/team_warning_banner should match snapshot for team_warning_banner with > 10 guest profiles 1`] = ` + + + , + " and ", + + + + + , + " are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.", + ] + } + id="teamWarningBanner" + message={false} + mode="warning" + title={ + + } + variant="app" + > +
+
+ + + + + +
+
+
+ + + 11 users were not selected because they are not a part of this team + + +
+
+ + + + and + + + @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10 + + } + placement="top" + trigger={ + Array [ + "hover", + "focus", + ] + } + > + + @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10 + + } + placement="top" + trigger={ + Array [ + "hover", + "focus", + ] + } + > + + + + 10 others + + + + + + + are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel. +
+
+
+ + + +`; + +exports[`components/channel_invite_modal/team_warning_banner should match snapshot for team_warning_banner with > 10 profiles 1`] = ` + + + , + " and ", + + + + + , + " to this channel once they are members of the ", + + Team Name Display + , + " team.", + ] + } + mode="warning" + title={ + + } + variant="app" + > +
+
+ + + + + +
+
+
+ + + 11 users were not selected because they are not a part of this team + + +
+
+ You can add + + + + and + + + @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10 + + } + placement="top" + trigger={ + Array [ + "hover", + "focus", + ] + } + > + + @user-1, @user-2, @user-3, @user-4, @user-5, @user-6, @user-7, @user-8, @user-9, @user-10 + + } + placement="top" + trigger={ + Array [ + "hover", + "focus", + ] + } + > + + + + 10 others + + + + + + + to this channel once they are members of the + + Team Name Display + + team. +
+
+
+ + + +`; + +exports[`components/channel_invite_modal/team_warning_banner should return empty snapshot 1`] = ` + + + +`; diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/index.ts b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/index.ts new file mode 100644 index 00000000000..2aeefd5f409 --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +export {default} from './team_warning_banner'; diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.test.tsx b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.test.tsx new file mode 100644 index 00000000000..777e2c1d60c --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.test.tsx @@ -0,0 +1,153 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {Provider} from 'react-redux'; + +import type {UserProfile} from '@mattermost/types/users'; + +import TeamWarningBanner from 'components/channel_invite_modal/team_warning_banner/team_warning_banner'; +import type {Value} from 'components/multiselect/multiselect'; + +import {mountWithIntl} from 'tests/helpers/intl-test-helper'; +import mockStore from 'tests/test_store'; + +type UserProfileValue = Value & UserProfile; + +jest.mock('utils/utils', () => { + const original = jest.requireActual('utils/utils'); + return { + ...original, + localizeMessage: jest.fn(), + sortUsersAndGroups: jest.fn(), + }; +}); + +function createUsers(count: number): UserProfileValue[] { + const users: UserProfileValue[] = []; + for (let x = 0; x < count; x++) { + const user = { + id: 'user-' + x, + username: 'user-' + x, + label: 'user-' + x, + value: 'user-' + x, + delete_at: 0, + } as UserProfileValue; + users.push(user); + } + return users; +} + +describe('components/channel_invite_modal/team_warning_banner', () => { + const teamId = 'team1'; + const state = { + entities: { + channels: {}, + teams: { + current: {id: 'team1'}, + teams: { + team1: { + id: 'team1', + display_name: 'Team Name Display', + }, + }, + }, + general: { + config: {}, + }, + preferences: { + myPreferences: {}, + }, + users: { + currentUserId: 'admin1', + profiles: {}, + }, + groups: { + myGroups: {}, + groups: {}, + }, + emojis: { + customEmoji: {}, + }, + }, + }; + + const store = mockStore(state); + + // beforeEach(() => { + // state = {...state}; + // }); + + test('should return empty snapshot', () => { + const wrapper = mountWithIntl( + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot for team_warning_banner with > 10 profiles', () => { + const users = createUsers(11); + + const wrapper = mountWithIntl( + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot for team_warning_banner with < 10 profiles', () => { + const users = createUsers(2); + + const wrapper = mountWithIntl( + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot for team_warning_banner with > 10 guest profiles', () => { + const guests = createUsers(11); + + const wrapper = mountWithIntl( + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('should match snapshot for team_warning_banner with < 10 guest profiles', () => { + const guests = createUsers(2); + + const wrapper = mountWithIntl( + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx new file mode 100644 index 00000000000..c75855364fa --- /dev/null +++ b/webapp/channels/src/components/channel_invite_modal/team_warning_banner/team_warning_banner.tsx @@ -0,0 +1,220 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback} from 'react'; +import {FormattedMessage, FormattedList, useIntl} from 'react-intl'; +import {useSelector} from 'react-redux'; + +import type {GlobalState} from '@mattermost/types/store'; +import type {UserProfile} from '@mattermost/types/users'; + +import {getTeam} from 'mattermost-redux/selectors/entities/teams'; + +import AlertBanner from 'components/alert_banner'; +import AtMention from 'components/at_mention'; +import type {Value} from 'components/multiselect/multiselect'; +import SimpleTooltip from 'components/widgets/simple_tooltip'; + +import {t} from 'utils/i18n'; + +type UserProfileValue = Value & UserProfile; + +export type Props = { + teamId: string; + users: UserProfileValue[]; + guests: UserProfileValue[]; +} + +const TeamWarningBanner = (props: Props) => { + const { + teamId, + users, + guests, + } = props; + + const {formatMessage} = useIntl(); + + const team = useSelector((state: GlobalState) => getTeam(state, teamId)); + + const getCommaSeparatedUsernames = useCallback((users: Array) => { + return users.map((user) => { + return `@${user.username}`; + }).join(', '); + }, []); + + const getGuestMessage = useCallback(() => { + if (guests.length === 0) { + return null; + } + + const commaSeparatedUsernames = getCommaSeparatedUsernames(guests); + const firstName = guests[0].username; + if (guests.length > 10) { + return ( + formatMessage( + { + id: t('channel_invite.invite_team_members.guests.messageOverflow'), + defaultMessage: '{firstUser} and {others} are guest users and need to first be invited to the team before you can add them to the channel. Once they\'ve joined the team, you can add them to this channel.', + }, + { + firstUser: ( + + ), + others: ( + + + + + + ), + }, + ) + ); + } + + const guestsList = guests.map((user) => { + return ( + + ); + }); + + return ( + formatMessage( + { + id: t('channel_invite.invite_team_members.guests.message'), + defaultMessage: '{count, plural, =1 {{firstUser} is a guest user and needs} other {{users} are guest users and need}} to first be invited to the team before you can add them to the channel. Once they\'ve joined the team, you can add them to this channel.', + }, + { + count: guests.length, + users: (), + firstUser: ( + + ), + team: ({team.display_name}), + }, + ) + ); + }, [guests, formatMessage, getCommaSeparatedUsernames, team.display_name]); + + const getMessage = useCallback(() => { + const commaSeparatedUsernames = getCommaSeparatedUsernames(users); + const firstName = users[0].username; + + if (users.length > 10) { + return formatMessage( + { + id: t('channel_invite.invite_team_members.messageOverflow'), + defaultMessage: 'You can add {firstUser} and {others} to this channel once they are members of the {team} team.', + }, + { + firstUser: ( + + ), + others: ( + + + + + + ), + team: ({team.display_name}), + }, + ); + } + + const usersList = users.map((user) => { + return ( + + ); + }); + + return ( + formatMessage( + { + id: t('channel_invite.invite_team_members.message'), + defaultMessage: 'You can add {count, plural, =1 {{firstUser}} other {{users}}} to this channel once they are members of the {team} team.', + }, + { + count: users.length, + users: (), + firstUser: ( + + ), + team: ({team.display_name}), + }, + ) + ); + }, [users, getCommaSeparatedUsernames, team, formatMessage]); + + return ( + <> + { + (users.length > 0 || guests.length > 0) && + + } + message={ + users.length > 0 && + getMessage() + } + footerMessage={ + guests.length > 0 && + getGuestMessage() + } + /> + } + + ); +}; + +export default React.memo(TeamWarningBanner); diff --git a/webapp/channels/src/components/channel_members_rhs/member_list.tsx b/webapp/channels/src/components/channel_members_rhs/member_list.tsx index f1547f31f52..fded7718f5f 100644 --- a/webapp/channels/src/components/channel_members_rhs/member_list.tsx +++ b/webapp/channels/src/components/channel_members_rhs/member_list.tsx @@ -7,13 +7,28 @@ import {VariableSizeList} from 'react-window'; import type {ListChildComponentProps} from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; -import type {Channel} from '@mattermost/types/channels'; +import type {Channel, ChannelMembership} from '@mattermost/types/channels'; import type {UserProfile} from '@mattermost/types/users'; -import {ListItemType} from './channel_members_rhs'; -import type {ChannelMember, ListItem} from './channel_members_rhs'; import Member from './member'; +interface ChannelMember { + user: UserProfile; + membership?: ChannelMembership; + status?: string; + displayName: string; +} + +enum ListItemType { + Member = 'member', + FirstSeparator = 'first-separator', + Separator = 'separator', +} + +interface ListItem { + type: ListItemType; + data: ChannelMember | JSX.Element; +} export interface Props { channel: Channel; members: ListItem[]; diff --git a/webapp/channels/src/components/team_controller/actions/index.ts b/webapp/channels/src/components/team_controller/actions/index.ts index fa66bb7693a..8f32d5e636c 100644 --- a/webapp/channels/src/components/team_controller/actions/index.ts +++ b/webapp/channels/src/components/team_controller/actions/index.ts @@ -55,6 +55,7 @@ export function initializeTeam(team: Team): ActionFunc { page: 0, per_page: 60, include_member_count: true, + include_member_ids: true, include_archived: false, }; const myGroupsParams: GetGroupsForUserParams = { diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index b69f4f5340f..39d9d894b5e 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -2930,6 +2930,12 @@ "channel_info_rhs.top_buttons.muted": "Muted", "channel_invite.addNewMembers": "Add people to {channel}", "channel_invite.invite_guest": "Invite as a Guest", + "channel_invite.invite_team_members.guests.message": "{count, plural, =1 {{firstUser} is a guest user and needs} other {{users} are guest users and need}} to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.", + "channel_invite.invite_team_members.guests.messageOverflow": "{firstUser} and {others} are guest users and need to first be invited to the team before you can add them to the channel. Once they've joined the team, you can add them to this channel.", + "channel_invite.invite_team_members.message": "You can add {count, plural, =1 {{firstUser}} other {{users}}} to this channel once they are members of the {team} team.", + "channel_invite.invite_team_members.messageOthers": "{count} others", + "channel_invite.invite_team_members.messageOverflow": "You can add {firstUser} and {others} to this channel once they are members of the {team} team.", + "channel_invite.invite_team_members.title": "{count, plural, =1 {1 user was} other {# users were}} not selected because they are not a part of this team", "channel_invite.no_options_message": "No matches found - Invite them to the team", "channel_loader.posted": "Posted", "channel_loader.postedImage": " posted an image", @@ -4045,6 +4051,7 @@ "msg_typing.isTyping": "{user} is typing...", "multiselect.add": "Add", "multiselect.addChannelsPlaceholder": "Search and add channels", + "multiselect.addGroupMembers": "Add {number} people", "multiselect.addGroupsPlaceholder": "Search and add groups", "multiselect.adding": "Adding...", "multiselect.addPeopleToGroup": "Add People", @@ -4063,6 +4070,7 @@ "multiselect.numPeopleRemaining": "Use ↑↓ to browse, ↵ to select. You can add {num, number} more {num, plural, one {person} other {people}}. ", "multiselect.numRemaining": "Up to {max, number} can be added at a time. You have {num, number} remaining.", "multiselect.placeholder": "Search for people", + "multiselect.placeholder.peopleOrGroups": "Search for people or groups", "multiselect.saveDetailsButton": "Save Details", "multiselect.savingDetailsButton": "Saving...", "multiselect.selectChannels": "Use ↑↓ to browse, ↵ to select.", diff --git a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/teams.ts b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/teams.ts index f3acefbef11..1ff828f67da 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/teams.ts +++ b/webapp/channels/src/packages/mattermost-redux/src/selectors/entities/teams.ts @@ -188,6 +188,15 @@ export const getMembersInCurrentTeam: (state: GlobalState) => RelationOneToOne RelationOneToOne = createSelector( + 'getMembersInTeam', + (state: GlobalState, teamId: string) => teamId, + getMembersInTeams, + (teamId, teamMembers) => { + return teamMembers[teamId]; + }, +); + export function getTeamMember(state: GlobalState, teamId: string, userId: string): TeamMembership | undefined { return getMembersInTeams(state)[teamId]?.[userId]; } diff --git a/webapp/channels/src/sass/components/_channel-invite-modal.scss b/webapp/channels/src/sass/components/_channel-invite-modal.scss index d3e70e8398d..e3318ff967f 100644 --- a/webapp/channels/src/sass/components/_channel-invite-modal.scss +++ b/webapp/channels/src/sass/components/_channel-invite-modal.scss @@ -9,6 +9,15 @@ padding: 0 2.4rem; } + .AlertBanner { + margin: 1.2rem 2.4rem 0; + + button.btn { + border-radius: 4px; + font-weight: 600; + } + } + .react-select__multi-value { border-radius: 50px; } @@ -92,6 +101,34 @@ .more-modal__options { overflow: visible; min-height: auto; + + .group-name { + font-size: 12px; + line-height: 20px; + } + + .more-modal__group-image { + display: flex; + width: 32px; + min-width: 32px; + height: 32px; + align-items: center; + justify-content: center; + background: rgba(var(--center-channel-color-rgb), 0.08); + border-radius: 30px; + } + + .add-group-members { + display: none; + min-width: 110px; + margin-left: auto; + color: var(--button-bg); + font-family: 'Open Sans'; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; + } } } @@ -124,6 +161,10 @@ .more-modal__details { padding-left: 12px; } + + .add-others-link { + color: var(--button-bg); + } } .modal .channel-invite__content { diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss index 52530fa7c58..71b27b497e3 100644 --- a/webapp/channels/src/sass/components/_modal.scss +++ b/webapp/channels/src/sass/components/_modal.scss @@ -879,6 +879,7 @@ display: flex; overflow: hidden; min-width: 0; + align-items: center; margin: 5px 0; gap: 4px; text-overflow: ellipsis; @@ -966,6 +967,12 @@ .more-modal__lastPostAt { display: none; } + + .more-modal__details { + .add-group-members { + display: flex; + } + } } .more-modal__shared-actions { diff --git a/webapp/channels/src/utils/utils.tsx b/webapp/channels/src/utils/utils.tsx index 7e349b6bc73..5ac649d13af 100644 --- a/webapp/channels/src/utils/utils.tsx +++ b/webapp/channels/src/utils/utils.tsx @@ -15,6 +15,7 @@ import type {Channel} from '@mattermost/types/channels'; import type {Address} from '@mattermost/types/cloud'; import type {ClientConfig} from '@mattermost/types/config'; import type {FileInfo} from '@mattermost/types/files'; +import type {Group} from '@mattermost/types/groups'; import type {GlobalState} from '@mattermost/types/store'; import type {Team} from '@mattermost/types/teams'; import type {UserProfile} from '@mattermost/types/users'; @@ -1745,3 +1746,20 @@ export function getBlankAddressWithCountry(country?: string): Address { state: '', }; } + +export function sortUsersAndGroups(a: UserProfile | Group, b: UserProfile | Group) { + let aSortString = ''; + let bSortString = ''; + if ('username' in a) { + aSortString = a.username; + } else { + aSortString = a.name; + } + if ('username' in b) { + bSortString = b.username; + } else { + bSortString = b.name; + } + + return aSortString.localeCompare(bSortString); +} diff --git a/webapp/platform/types/src/groups.ts b/webapp/platform/types/src/groups.ts index f557620b607..52056924eba 100644 --- a/webapp/platform/types/src/groups.ts +++ b/webapp/platform/types/src/groups.ts @@ -41,6 +41,7 @@ export type Group = { allow_reference: boolean; channel_member_count?: number; channel_member_timezones_count?: number; + member_ids?: string[]; }; export enum GroupSource { @@ -157,6 +158,7 @@ export type GetGroupsParams = { include_member_count?: boolean; include_archived?: boolean; filter_archived?: boolean; + include_member_ids?: boolean; } export type GetGroupsForUserParams = GetGroupsParams & {