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 13001c8d9f..544a82b96f 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 b6df6433ff..01fb97f659 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 7b78ec869e..964cfc0845 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 0000000000..e57fc3db70 --- /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 e9edc95e1b..6d38b1883b 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 bdc9058257..eca9acd570 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 3e3df44009..d04cf25b23 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 3cad7fdc89..d777490256 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 040d94b342..a985d2dde9 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 93cbe25b89..50d7d93ec4 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 1c607b5c4c..951093277a 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 9f498c577a..29501931c4 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 ec0e9692f9..3e2dde3827 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 f03e62eb6e..bc8a5ea3a5 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 5275e8b69d..b0cfa467a9 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 0000000000..ef6b6ae308 --- /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 0000000000..5b9480fe4c --- /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 6b29cd9669..f25403cb6e 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 0000000000..c7b3589351 --- /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 0000000000..2aeefd5f40 --- /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 0000000000..777e2c1d60 --- /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 0000000000..c75855364f --- /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 f1547f31f5..fded7718f5 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 fa66bb7693..8f32d5e636 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 b69f4f5340..39d9d894b5 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 f3acefbef1..1ff828f67d 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 d3e70e8398..e3318ff967 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 52530fa7c5..71b27b497e 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 7e349b6bc7..5ac649d13a 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 f557620b60..52056924eb 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 & {