[NEW] Filter system messages per room

app/containers/UIKit/MultiSelect/index.js

@@ -41,6 +41,12 @@ export const MultiSelect = React.memo(({
 	const [currentValue, setCurrentValue] = useState('');
 	const [showContent, setShowContent] = useState(false);
 
+	useEffect(() => {
+		if (values) {
+			select(values);
+		}
+	}, [values]);
+
 	useEffect(() => {
 		setOpen(showContent);
 	}, [showContent]);

app/i18n/locales/en.js

@@ -210,6 +210,21 @@ export default {
 	Has_joined_the_channel: 'Has joined the channel',
 	Has_joined_the_conversation: 'Has joined the conversation',
 	Has_left_the_channel: 'Has left the channel',
+	Hide_System_Messages: 'Hide System Messages',
+	Hide_type_messages: 'Hide "{{type}}" messages',
+	Message_HideType_uj: 'User Join',
+	Message_HideType_ul: 'User Leave',
+	Message_HideType_ru: 'User Removed',
+	Message_HideType_au: 'User Added',
+	Message_HideType_mute_unmute: 'User Muted / Unmuted',
+	Message_HideType_r: 'Room Name Changed',
+	Message_HideType_ut: 'User Joined Conversation',
+	Message_HideType_wm: 'Welcome',
+	Message_HideType_rm: 'Message Removed',
+	Message_HideType_subscription_role_added: 'Was Set Role',
+	Message_HideType_subscription_role_removed: 'Role No Longer Defined',
+	Message_HideType_room_archived: 'Room Archived',
+	Message_HideType_room_unarchived: 'Room Unarchived',
 	In_app: 'In-app',
 	IN_APP_AND_DESKTOP: 'IN-APP AND DESKTOP',
 	In_App_and_Desktop_Alert_info: 'Displays a banner at the top of the screen when app is open, and displays a notification on desktop',
@@ -297,6 +312,7 @@ export default {
 	Only_authorized_users_can_write_new_messages: 'Only authorized users can write new messages',
 	Open_emoji_selector: 'Open emoji selector',
 	Open_Source_Communication: 'Open Source Communication',
+	Overwrites_the_server_configuration_and_use_room_config: 'Overwrites the server configuration and use room config',
 	Password: 'Password',
 	Permalink_copied_to_clipboard: 'Permalink copied to clipboard!',
 	Pin: 'Pin',
@@ -456,6 +472,7 @@ export default {
 	Username_is_empty: 'Username is empty',
 	Username: 'Username',
 	Username_or_email: 'Username or email',
+	Uses_server_configuration: 'Uses server configuration',
 	Validating: 'Validating',
 	Verify_email_title: 'Registration Succeeded!',
 	Verify_email_desc: 'We have sent you an email to confirm your registration. If you do not receive an email shortly, please come back and try again.',

app/lib/database/model/Subscription.js

@@ -89,4 +89,6 @@ export default class Subscription extends Model {
 	@children('thread_messages') threadMessages;
 
 	@field('hide_unread_status') hideUnreadStatus;
+
+	@json('sys_mes', sanitizer) sysMes;
 }

app/lib/database/model/migrations.js

@@ -51,6 +51,17 @@ export default schemaMigrations({
 					]
 				})
 			]
+		},
+		{
+			toVersion: 6,
+			steps: [
+				addColumns({
+					table: 'subscriptions',
+					columns: [
+						{ name: 'sys_mes', type: 'string', isOptional: true }
+					]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 5,
+	version: 6,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -39,7 +39,8 @@ export default appSchema({
 				{ name: 'jitsi_timeout', type: 'number', isOptional: true },
 				{ name: 'auto_translate', type: 'boolean', isOptional: true },
 				{ name: 'auto_translate_language', type: 'string' },
-				{ name: 'hide_unread_status', type: 'boolean', isOptional: true }
+				{ name: 'hide_unread_status', type: 'boolean', isOptional: true },
+				{ name: 'sys_mes', type: 'string', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/helpers/mergeSubscriptionsRooms.js

@@ -32,6 +32,7 @@ export const merge = (subscription, room) => {
 		} else {
 			subscription.muted = [];
 		}
+		subscription.sysMes = room.sysMes;
 	}
 
 	if (!subscription.name) {

app/utils/messageTypes.js

@@ -0,0 +1,42 @@
+export const MessageTypeValues = [
+	{
+		value: 'uj',
+		text: 'Message_HideType_uj'
+	}, {
+		value: 'ul',
+		text: 'Message_HideType_ul'
+	}, {
+		value: 'ru',
+		text: 'Message_HideType_ru'
+	}, {
+		value: 'au',
+		text: 'Message_HideType_au'
+	}, {
+		value: 'mute_unmute',
+		text: 'Message_HideType_mute_unmute'
+	}, {
+		value: 'r',
+		text: 'Message_HideType_r'
+	}, {
+		value: 'ut',
+		text: 'Message_HideType_ut'
+	}, {
+		value: 'wm',
+		text: 'Message_HideType_wm'
+	}, {
+		value: 'rm',
+		text: 'Message_HideType_rm'
+	}, {
+		value: 'subscription_role_added',
+		text: 'Message_HideType_subscription_role_added'
+	}, {
+		value: 'subscription_role_removed',
+		text: 'Message_HideType_subscription_role_removed'
+	}, {
+		value: 'room_archived',
+		text: 'Message_HideType_room_archived'
+	}, {
+		value: 'room_unarchived',
+		text: 'Message_HideType_room_unarchived'
+	}
+];

app/views/RoomInfoEditView/SwitchContainer.js

@@ -15,20 +15,25 @@ export default class SwitchContainer extends React.PureComponent {
 		rightLabelSecondary: PropTypes.string,
 		onValueChange: PropTypes.func,
 		theme: PropTypes.string,
-		testID: PropTypes.string
+		testID: PropTypes.string,
+		labelContainerStyle: PropTypes.object,
+		leftLabelStyle: PropTypes.object,
+		children: PropTypes.any
 	}
 
 	render() {
 		const {
-			value, disabled, onValueChange, leftLabelPrimary, leftLabelSecondary, rightLabelPrimary, rightLabelSecondary, theme, testID
+			children, value, disabled, onValueChange, leftLabelPrimary, leftLabelSecondary, rightLabelPrimary, rightLabelSecondary, theme, testID, labelContainerStyle, leftLabelStyle
 		} = this.props;
 		return (
 			[
-				<View key='switch-container' style={styles.switchContainer}>
-					<View style={styles.switchLabelContainer}>
-						<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }]}>{leftLabelPrimary}</Text>
-						<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }]}>{leftLabelSecondary}</Text>
-					</View>
+				<View key='switch-container' style={[styles.switchContainer, children && styles.switchMargin]}>
+					{leftLabelPrimary && (
+						<View style={[styles.switchLabelContainer, labelContainerStyle]}>
+							<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>{leftLabelPrimary}</Text>
+							<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>{leftLabelSecondary}</Text>
+						</View>
+					)}
 					<Switch
 						style={styles.switch}
 						onValueChange={onValueChange}
@@ -37,11 +42,14 @@ export default class SwitchContainer extends React.PureComponent {
 						trackColor={SWITCH_TRACK_COLOR}
 						testID={testID}
 					/>
-					<View style={styles.switchLabelContainer}>
-						<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }]}>{rightLabelPrimary}</Text>
-						<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }]}>{rightLabelSecondary}</Text>
-					</View>
+					{rightLabelPrimary && (
+						<View style={[styles.switchLabelContainer, labelContainerStyle]}>
+							<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>{rightLabelPrimary}</Text>
+							<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>{rightLabelSecondary}</Text>
+						</View>
+					)}
 				</View>,
+				children,
 				<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
 			]
 		);

app/views/RoomInfoEditView/index.js

@@ -6,6 +6,8 @@ import {
 import { connect } from 'react-redux';
 import { SafeAreaView } from 'react-navigation';
 import equal from 'deep-equal';
+import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import isEqual from 'lodash/isEqual';
 
 import database from '../../lib/database';
 import { eraseRoom as eraseRoomAction } from '../../actions/room';
@@ -27,6 +29,8 @@ import StatusBar from '../../containers/StatusBar';
 import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
+import { MultiSelect } from '../../containers/UIKit/MultiSelect';
+import { MessageTypeValues } from '../../utils/messageTypes';
 
 const PERMISSION_SET_READONLY = 'set-readonly';
 const PERMISSION_SET_REACT_WHEN_READONLY = 'set-react-when-readonly';
@@ -70,7 +74,9 @@ class RoomInfoEditView extends React.Component {
 			t: false,
 			ro: false,
 			reactWhenReadOnly: false,
-			archived: false
+			archived: false,
+			systemMessages: [],
+			enableSysMes: false
 		};
 		this.loadRoom();
 	}
@@ -117,7 +123,7 @@ class RoomInfoEditView extends React.Component {
 
 	init = (room) => {
 		const {
-			name, description, topic, announcement, t, ro, reactWhenReadOnly, joinCodeRequired
+			name, description, topic, announcement, t, ro, reactWhenReadOnly, joinCodeRequired, sysMes
 		} = room;
 		// fake password just to user knows about it
 		this.randomValue = random(15);
@@ -131,7 +137,9 @@ class RoomInfoEditView extends React.Component {
 			ro,
 			reactWhenReadOnly,
 			joinCode: joinCodeRequired ? this.randomValue : '',
-			archived: room.archived
+			archived: room.archived,
+			systemMessages: sysMes,
+			enableSysMes: sysMes.length > 0
 		});
 	}
 
@@ -148,7 +156,7 @@ class RoomInfoEditView extends React.Component {
 
 	formIsChanged = () => {
 		const {
-			room, name, description, topic, announcement, t, ro, reactWhenReadOnly, joinCode
+			room, name, description, topic, announcement, t, ro, reactWhenReadOnly, joinCode, systemMessages, enableSysMes
 		} = this.state;
 		const { joinCodeRequired } = room;
 		return !(room.name === name
@@ -159,13 +167,15 @@ class RoomInfoEditView extends React.Component {
 			&& room.t === 'p' === t
 			&& room.ro === ro
 			&& room.reactWhenReadOnly === reactWhenReadOnly
+			&& isEqual(room.sysMes, systemMessages)
+			&& enableSysMes === (room.sysMes.length > 0)
 		);
 	}
 
 	submit = async() => {
 		Keyboard.dismiss();
 		const {
-			room, name, description, topic, announcement, t, ro, reactWhenReadOnly, joinCode
+			room, name, description, topic, announcement, t, ro, reactWhenReadOnly, joinCode, systemMessages
 		} = this.state;
 
 		this.setState({ saving: true });
@@ -210,6 +220,10 @@ class RoomInfoEditView extends React.Component {
 			params.reactWhenReadOnly = reactWhenReadOnly;
 		}
 
+		if (!isEqual(room.sysMes, systemMessages)) {
+			params.systemMessages = systemMessages;
+		}
+
 		// Join Code
 		if (this.randomValue !== joinCode) {
 			params.joinCode = joinCode;
@@ -298,12 +312,34 @@ class RoomInfoEditView extends React.Component {
 		return (permissions[PERMISSION_ARCHIVE] || permissions[PERMISSION_UNARCHIVE]);
 	};
 
+	renderSystemMessages = () => {
+		const { systemMessages, enableSysMes } = this.state;
+		const { theme } = this.props;
+
+		if (!enableSysMes) {
+			return null;
+		}
+
+		return (
+			<MultiSelect
+				options={MessageTypeValues.map(m => ({ value: m.value, text: { text: I18n.t('Hide_type_messages', { type: I18n.t(m.text) }) } }))}
+				onChange={({ value }) => this.setState({ systemMessages: value })}
+				placeholder={{ text: I18n.t('Hide_System_Messages') }}
+				value={systemMessages}
+				context={BLOCK_CONTEXT.FORM}
+				multiselect
+				theme={theme}
+			/>
+		);
+	}
+
 	render() {
 		const {
-			name, nameError, description, topic, announcement, t, ro, reactWhenReadOnly, room, joinCode, saving, permissions, archived
+			name, nameError, description, topic, announcement, t, ro, reactWhenReadOnly, room, joinCode, saving, permissions, archived, enableSysMes
 		} = this.state;
 		const { theme } = this.props;
 		const { dangerColor } = themes[theme];
+
 		return (
 			<KeyboardView
 				style={{ backgroundColor: themes[theme].backgroundColor }}
@@ -408,6 +444,18 @@ class RoomInfoEditView extends React.Component {
 							]
 							: null
 						}
+						<SwitchContainer
+							value={enableSysMes}
+							leftLabelPrimary={I18n.t('Hide_System_Messages')}
+							leftLabelSecondary={enableSysMes ? I18n.t('Overwrites_the_server_configuration_and_use_room_config') : I18n.t('Uses_server_configuration')}
+							theme={theme}
+							testID='room-info-edit-switch-system-messages'
+							onValueChange={value => this.setState(({ systemMessages }) => ({ enableSysMes: value, systemMessages: value ? systemMessages : [] }))}
+							labelContainerStyle={styles.hideSystemMessages}
+							leftLabelStyle={styles.systemMessagesLabel}
+						>
+							{this.renderSystemMessages()}
+						</SwitchContainer>
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer,

app/views/RoomInfoEditView/styles.js

@@ -63,5 +63,14 @@ export default StyleSheet.create({
 	broadcast: {
 		...sharedStyles.textAlignCenter,
 		...sharedStyles.textSemibold
+	},
+	hideSystemMessages: {
+		alignItems: 'flex-start'
+	},
+	systemMessagesLabel: {
+		textAlign: 'left'
+	},
+	switchMargin: {
+		marginBottom: 16
 	}
 });