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

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<Props> {
         const {
             currentUserId,
             channel,
+            channelMember,
             creatorName,
             fullWidth,
             locale,
@@ -79,7 +83,7 @@ export default class ChannelIntroMessage extends React.PureComponent<Props> {
         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<Props> {
     }
 }
 
-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 <b>muted</b>, so you will not be notified.'},
+    [NotificationLevel.ALL]: {id: 'intro_messages.GM.all', defaultMessage: 'You\'ll be notified <b>for all activity</b> in this group message.'},
+    [NotificationLevel.DEFAULT]: {id: 'intro_messages.GM.all', defaultMessage: 'You\'ll be notified <b>for all activity</b> in this group message.'},
+    [NotificationLevel.MENTION]: {id: 'intro_messages.GM.mention', defaultMessage: 'You have selected to be notified <b>only when mentioned</b> in this group message.'},
+    [NotificationLevel.NONE]: {id: 'intro_messages.GM.none', defaultMessage: 'You have selected to <b>never</b> be notified in this group message.'},
+});
+
+const getGMIntroMessageSpecificPart = (userProfile: UserProfileType | undefined, membership: ChannelMembership | undefined) => {
+    const isMuted = isChannelMuted(membership);
+    if (isMuted) {
+        return (
+            <FormattedMessage
+                {...gmIntroMessages.muted}
+                values={{
+                    b: (chunks) => <b>{chunks}</b>,
+                }}
+            />
+        );
+    }
+    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 (
+        <FormattedMessage
+            {...gmIntroMessages[notifyLevelToUse]}
+            values={{
+                b: (chunks) => <b>{chunks}</b>,
+            }}
+        />
+    );
+};
+
+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:
                 </div>
                 <p className='channel-intro-text'>
                     <FormattedMessage
-                        id='intro_messages.GM'
+                        id='intro_messages.GM.common'
-                        defaultMessage={'This is the start of your group message history with {names}.{br}You\'ll be notified <b>for all activity</b> in this group message.'}
+                        defaultMessage={'This is the start of your group message history with {names}.{br}'}
                         values={{
-                            b: (chunks) => <b>{chunks}</b>,
                             names: channel.display_name,
                             br: <br/>,
                         }}
                     />
+                    {getGMIntroMessageSpecificPart(currentUserProfile, channelMembership)}
                 </p>
                 <div style={{display: 'flex'}}>
                     {createNotificationPreferencesButton(channel, currentUserProfile)}

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,
     };
 }
 

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 <b>for all activity</b> in this group message.",
+  "intro_messages.GM.all": "You'll be notified <b>for all activity</b> 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 <b>only when mentioned</b> in this group message.",
+  "intro_messages.GM.muted": "This group message is currently <b>muted</b>, so you will not be notified.",
+  "intro_messages.GM.none": "You have selected to <b>never</b> 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",

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',
+    DEFAULT: 'default' as const,
-    ALL: 'all',
+    ALL: 'all' as const,
-    MENTION: 'mention',
+    MENTION: 'mention' as const,
-    NONE: 'none',
+    NONE: 'none' as const,
 };
 
 export const MarkUnread = {