From def164f790a836427b593f96e8b30adaeb457a18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Thu, 5 Oct 2023 18:38:31 +0200 Subject: [PATCH] Make GM Intro message to change based on the notification preferences. (#24634) * Make GM Intro message to change based on the notification preferences. * Fix test and minor refactoring * Fix lint --- .../channel_intro_message.tsx | 58 ++++++++++++++++--- .../post_view/channel_intro_message/index.ts | 4 +- webapp/channels/src/i18n/en.json | 6 +- .../src/constants/channels.ts | 8 +-- 4 files changed, 63 insertions(+), 13 deletions(-) diff --git a/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx b/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx index 1d1f380f1f..1f8599c177 100644 --- a/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx +++ b/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx @@ -2,13 +2,15 @@ // See LICENSE.txt for license information. import React from 'react'; -import {FormattedDate, FormattedMessage} from 'react-intl'; +import {FormattedDate, FormattedMessage, defineMessages} from 'react-intl'; import {BellRingOutlineIcon} from '@mattermost/compass-icons/components'; -import type {Channel} from '@mattermost/types/channels'; +import type {Channel, ChannelMembership} from '@mattermost/types/channels'; import type {UserProfile as UserProfileType} from '@mattermost/types/users'; import {Permissions} from 'mattermost-redux/constants'; +import {NotificationLevel} from 'mattermost-redux/constants/channels'; +import {isChannelMuted} from 'mattermost-redux/utils/channel_utils'; import AddGroupsToTeamModal from 'components/add_groups_to_team_modal'; import ChannelNotificationsModal from 'components/channel_notifications_modal'; @@ -43,6 +45,7 @@ type Props = { teammateName?: string; stats: any; usersLimit: number; + channelMember?: ChannelMembership; actions: { getTotalUsersStats: () => any; }; @@ -58,6 +61,7 @@ export default class ChannelIntroMessage extends React.PureComponent { const { currentUserId, channel, + channelMember, creatorName, fullWidth, locale, @@ -79,7 +83,7 @@ export default class ChannelIntroMessage extends React.PureComponent { if (channel.type === Constants.DM_CHANNEL) { return createDMIntroMessage(channel, centeredIntro, teammate, teammateName); } else if (channel.type === Constants.GM_CHANNEL) { - return createGMIntroMessage(channel, centeredIntro, channelProfiles, currentUserId); + return createGMIntroMessage(channel, centeredIntro, channelProfiles, currentUserId, channelMember); } else if (channel.name === Constants.DEFAULT_CHANNEL) { return createDefaultIntroMessage(channel, centeredIntro, stats, usersLimit, enableUserCreation, isReadOnly, teamIsGroupConstrained); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { @@ -91,7 +95,47 @@ export default class ChannelIntroMessage extends React.PureComponent { } } -function createGMIntroMessage(channel: Channel, centeredIntro: string, profiles: UserProfileType[], currentUserId: string) { +const gmIntroMessages = defineMessages({ + muted: {id: 'intro_messages.GM.muted', defaultMessage: 'This group message is currently muted, so you will not be notified.'}, + [NotificationLevel.ALL]: {id: 'intro_messages.GM.all', defaultMessage: 'You\'ll be notified for all activity in this group message.'}, + [NotificationLevel.DEFAULT]: {id: 'intro_messages.GM.all', defaultMessage: 'You\'ll be notified for all activity in this group message.'}, + [NotificationLevel.MENTION]: {id: 'intro_messages.GM.mention', defaultMessage: 'You have selected to be notified only when mentioned in this group message.'}, + [NotificationLevel.NONE]: {id: 'intro_messages.GM.none', defaultMessage: 'You have selected to never be notified in this group message.'}, +}); + +const getGMIntroMessageSpecificPart = (userProfile: UserProfileType | undefined, membership: ChannelMembership | undefined) => { + const isMuted = isChannelMuted(membership); + if (isMuted) { + return ( + {chunks}, + }} + /> + ); + } + const channelNotifyProp = membership?.notify_props?.desktop || NotificationLevel.DEFAULT; + const userNotifyProp = userProfile?.notify_props?.desktop || NotificationLevel.MENTION; + let notifyLevelToUse = channelNotifyProp; + if (notifyLevelToUse === NotificationLevel.DEFAULT) { + notifyLevelToUse = userNotifyProp; + } + if (channelNotifyProp === NotificationLevel.DEFAULT && userNotifyProp === NotificationLevel.MENTION) { + notifyLevelToUse = NotificationLevel.ALL; + } + + return ( + {chunks}, + }} + /> + ); +}; + +function createGMIntroMessage(channel: Channel, centeredIntro: string, profiles: UserProfileType[], currentUserId: string, channelMembership?: ChannelMembership) { const channelIntroId = 'channelIntro'; if (profiles.length > 0) { @@ -118,14 +162,14 @@ function createGMIntroMessage(channel: Channel, centeredIntro: string, profiles:

for all activity in this group message.'} + id='intro_messages.GM.common' + defaultMessage={'This is the start of your group message history with {names}.{br}'} values={{ - b: (chunks) => {chunks}, names: channel.display_name, br:
, }} /> + {getGMIntroMessageSpecificPart(currentUserProfile, channelMembership)}

{createNotificationPreferencesButton(channel, currentUserProfile)} diff --git a/webapp/channels/src/components/post_view/channel_intro_message/index.ts b/webapp/channels/src/components/post_view/channel_intro_message/index.ts index 7ddbc9cfa4..0519976305 100644 --- a/webapp/channels/src/components/post_view/channel_intro_message/index.ts +++ b/webapp/channels/src/components/post_view/channel_intro_message/index.ts @@ -6,7 +6,7 @@ import {bindActionCreators} from 'redux'; import type {Dispatch} from 'redux'; import {getTotalUsersStats} from 'mattermost-redux/actions/users'; -import {getCurrentChannel, getDirectTeammate} from 'mattermost-redux/selectors/entities/channels'; +import {getCurrentChannel, getDirectTeammate, getMyCurrentChannelMembership} from 'mattermost-redux/selectors/entities/channels'; import {getConfig} from 'mattermost-redux/selectors/entities/general'; import {get} from 'mattermost-redux/selectors/entities/preferences'; import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams'; @@ -28,6 +28,7 @@ function mapStateToProps(state: GlobalState) { const isReadOnly = false; const team = getCurrentTeam(state); const channel = getCurrentChannel(state) || {}; + const channelMember = getMyCurrentChannelMembership(state); const teammate = getDirectTeammate(state, channel.id); const creator = getUser(state, channel.creator_id); @@ -49,6 +50,7 @@ function mapStateToProps(state: GlobalState) { teammateName: getDisplayNameByUser(state, teammate), stats, usersLimit, + channelMember, }; } diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 1b7077c324..27f96828e5 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -3764,7 +3764,11 @@ "intro_messages.creatorPrivate": "This is the start of the {name} private channel, created by {creator} on {date}.", "intro_messages.default": "**Welcome to {display_name}!**\n \nPost messages here that you want everyone to see. Everyone automatically becomes a permanent member of this channel when they join the team.", "intro_messages.DM": "This is the start of your direct message history with {teammate}.\nDirect messages and files shared here are not shown to people outside this area.", - "intro_messages.GM": "This is the start of your group message history with {names}.{br}You'll be notified for all activity in this group message.", + "intro_messages.GM.all": "You'll be notified for all activity in this group message.", + "intro_messages.GM.common": "This is the start of your group message history with {names}.{br}", + "intro_messages.GM.mention": "You have selected to be notified only when mentioned in this group message.", + "intro_messages.GM.muted": "This group message is currently muted, so you will not be notified.", + "intro_messages.GM.none": "You have selected to never be notified in this group message.", "intro_messages.group_message": "This is the start of your group message history with these teammates. Messages and files shared here are not shown to people outside this area.", "intro_messages.inviteGropusToChannel.button": "Add groups to this private channel", "intro_messages.inviteMembersToChannel.button": "Add members to this channel", diff --git a/webapp/channels/src/packages/mattermost-redux/src/constants/channels.ts b/webapp/channels/src/packages/mattermost-redux/src/constants/channels.ts index c56ba0674e..b18b4fbf71 100644 --- a/webapp/channels/src/packages/mattermost-redux/src/constants/channels.ts +++ b/webapp/channels/src/packages/mattermost-redux/src/constants/channels.ts @@ -2,10 +2,10 @@ // See LICENSE.txt for license information. export const NotificationLevel = { - DEFAULT: 'default', - ALL: 'all', - MENTION: 'mention', - NONE: 'none', + DEFAULT: 'default' as const, + ALL: 'all' as const, + MENTION: 'mention' as const, + NONE: 'none' as const, }; export const MarkUnread = {