MM-12048: Add mute/unmute to Channel Header Dropdown. (mattermost#1724)

* MM-12048: Add mute/unmute to Channel Header Dropdown.

* Update component tests.

* Add a test for muted channel.

components/channel_header/channel_header.jsx

@@ -177,6 +177,17 @@ export default class ChannelHeader extends React.Component {
  actions.updateChannelNotifyProps(currentUser.id, channel.id, options);
  };
 
+ mute = () => {
+ const {actions, channel, channelMember, currentUser} = this.props;
+
+ if (!channelMember || !currentUser || !channel) {
+ return;
+ }
+
+ const options = {mark_unread: NotificationLevels.MENTION};
+ actions.updateChannelNotifyProps(currentUser.id, channel.id, options);
+ };
+
  searchMentions = (e) => {
  e.preventDefault();
  if (this.props.rhsState === RHSStates.MENTION) {
@@ -349,6 +360,9 @@ export default class ChannelHeader extends React.Component {
  const isDirect = (this.props.channel.type === Constants.DM_CHANNEL);
  const isGroup = (this.props.channel.type === Constants.GM_CHANNEL);
  const isPrivate = (this.props.channel.type === Constants.PRIVATE_CHANNEL);
+
+ const channelMuted = isChannelMuted(this.props.channelMember);
+
  const teamId = TeamStore.getCurrentId();
  let webrtc;
 
@@ -595,6 +609,48 @@ export default class ChannelHeader extends React.Component {
  );
  }
 
+ if (!isDirect) {
+ if (channelMuted) {
+ dropdownContents.push(
+ <li
+ key='dropdown_unmute'
+ role='presentation'
+ >
+ <button
+ className='style--none'
+ id='channelUnmute'
+ role='menuitem'
+ onClick={this.unmute}
+ >
+ <FormattedMessage
+ id='channel_header.unmute'
+ defaultMessage='Unmute Channel'
+ />
+ </button>
+ </li>
+ );
+ } else {
+ dropdownContents.push(
+ <li
+ key='dropdown_mute'
+ role='presentation'
+ >
+ <button
+ className='style--none'
+ id='channelMute'
+ role='menuitem'
+ onClick={this.mute}
+ >
+ <FormattedMessage
+ id='channel_header.mute'
+ defaultMessage='Mute Channel'
+ />
+ </button>
+ </li>
+ );
+ }
+ }
+
  if (!this.props.isDefault) {
  dropdownContents.push(
  <li
@@ -1007,7 +1063,6 @@ export default class ChannelHeader extends React.Component {
  );
  }
 
- const channelMuted = isChannelMuted(this.props.channelMember);
  const channelMutedTooltip = (
  <Tooltip id='channelMutedTooltip'>
  <FormattedMessage

i18n/en.json

@@ -1503,6 +1503,8 @@
  "channel_header.flagged": "Flagged Posts",
  "channel_header.leave": "Leave Channel",
  "channel_header.manageMembers": "Manage Members",
+ "channel_header.unmute": "Unmute Channel",
+ "channel_header.mute": "Mute Channel",
  "channel_header.notificationPreferences": "Notification Preferences",
  "channel_header.pinnedPosts": "Pinned Posts",
  "channel_header.recentMentions": "Recent Mentions",