[NEW] Option to show mentions badge (#4265)

* [IMPROVE] Option to show mentions badge

* fix the local database and mergeSubscriptions, missing the state in notificationPrefView

* finished the hideMentions

* fix the string version

app/containers/RoomItem/RoomItem.tsx

@@ -52,7 +52,8 @@ const RoomItem = ({
 	autoJoin,
 	showAvatar,
 	displayMode,
-	sourceType
+	sourceType,
+	hideMentionStatus
 }: IRoomItemProps) => (
 	<Touchable
 		onPress={onPress}
@@ -117,6 +118,8 @@ const RoomItem = ({
 							tunread={tunread}
 							tunreadUser={tunreadUser}
 							tunreadGroup={tunreadGroup}
+							hideMentionStatus={hideMentionStatus}
+							hideUnreadStatus={hideUnreadStatus}
 						/>
 					</View>
 				</>
@@ -143,6 +146,8 @@ const RoomItem = ({
 							tunread={tunread}
 							tunreadUser={tunreadUser}
 							tunreadGroup={tunreadGroup}
+							hideMentionStatus={hideMentionStatus}
+							hideUnreadStatus={hideUnreadStatus}
 						/>
 					</View>
 				</View>

app/containers/RoomItem/index.tsx

@@ -167,6 +167,7 @@ class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 				prid={item.prid}
 				status={status}
 				hideUnreadStatus={item.hideUnreadStatus}
+				hideMentionStatus={item.hideMentionStatus}
 				alert={alert}
 				lastMessage={item.lastMessage}
 				showLastMessage={showLastMessage}

app/containers/RoomItem/interfaces.ts

@@ -132,6 +132,7 @@ export interface IRoomItemProps {
 	showAvatar: boolean;
 	displayMode: string;
 	sourceType: IOmnichannelSource;
+	hideMentionStatus?: boolean;
 }
 
 export interface ILastMessageProps {

app/containers/UnreadBadge/index.tsx

@@ -38,16 +38,38 @@ export interface IUnreadBadge {
 	tunreadUser?: [];
 	tunreadGroup?: [];
 	small?: boolean;
+	hideUnreadStatus?: boolean;
+	hideMentionStatus?: boolean;
 }
 
 const UnreadBadge = React.memo(
-	({ unread, userMentions, groupMentions, style, tunread, tunreadUser, tunreadGroup, small }: IUnreadBadge) => {
+	({
+		unread,
+		userMentions,
+		groupMentions,
+		style,
+		tunread,
+		tunreadUser,
+		tunreadGroup,
+		small,
+		hideMentionStatus,
+		hideUnreadStatus
+	}: IUnreadBadge) => {
 		const { theme } = useTheme();
 
 		if ((!unread || unread <= 0) && !tunread?.length) {
 			return null;
 		}
 
+		if (hideUnreadStatus && hideMentionStatus) {
+			return null;
+		}
+
+		// Return null when hideUnreadStatus is true and isn't a direct mention
+		if (hideUnreadStatus && !((userMentions && userMentions > 0) || tunreadUser?.length)) {
+			return null;
+		}
+
 		const { backgroundColor, color } = getUnreadStyle({
 			theme,
 			unread,

app/definitions/ISubscription.ts

@@ -100,6 +100,7 @@ export interface ISubscription {
 	separator?: boolean;
 	onHold?: boolean;
 	source?: IOmnichannelSource;
+	hideMentionStatus?: boolean;
 	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
 	messages: RelationModified<TMessageModel>;
 	threads: RelationModified<TThreadModel>;

app/i18n/locales/ar.json

@@ -489,8 +489,6 @@
   "Share_Link": "مشاركة رابط",
   "Share_this_app": "مشاركة هذا البرنامج",
   "Show_more": "إظهار أكثر..",
-  "Show_Unread_Counter": "عرض عدد الرسائل غير المقروءة",
-  "Show_Unread_Counter_Info": "يتم عرض العدد غير المقروء كشارة على يمين القناة في القائمة",
   "Sign_in_your_server": "تسجيل الدخول إلى الخادم الخاص بك",
   "Sign_Up": "تسجيل جديد",
   "Some_field_is_invalid_or_empty": "بعض الحقول غير صالحة أو فارغة",

app/i18n/locales/de.json

@@ -495,8 +495,6 @@
   "Share_Link": "Link teilen",
   "Share_this_app": "App teilen",
   "Show_more": "Mehr anzeigen …",
-  "Show_Unread_Counter": "Zähler anzeigen",
-  "Show_Unread_Counter_Info": "Anzahl der ungelesenen Nachrichten anzeigen",
   "Sign_in_your_server": "Melden Sie sich bei Ihrem Server an",
   "Sign_Up": "Anmelden",
   "Some_field_is_invalid_or_empty": "Ein Feld ist ungültig oder leer",

app/i18n/locales/en.json

@@ -504,8 +504,6 @@
   "Share_Link": "Share Link",
   "Share_this_app": "Share this app",
   "Show_more": "Show more..",
-  "Show_Unread_Counter": "Show Unread Counter",
-  "Show_Unread_Counter_Info": "Unread counter is displayed as a badge on the right of the channel, in the list",
   "Sign_in_your_server": "Sign in your server",
   "Sign_Up": "Sign Up",
   "Some_field_is_invalid_or_empty": "Some field is invalid or empty",
@@ -825,5 +823,9 @@
   "Omnichannel_placed_chat_on_hold": "Chat On Hold: {{comment}}",
   "Omnichannel_on_hold_chat_resumed": "On Hold Chat Resumed: {{comment}}",
   "Omnichannel_queue": "Omnichannel queue",
-  "Empty": "Empty"
+  "Empty": "Empty",
+  "Mark_as_unread": "Mark as unread",
+  "Mark_as_unread_Info": "Display room as unread when there are unread messages",
+  "Show_badge_for_mentions": "Show badge for mentions",
+  "Show_badge_for_mentions_Info": "Display badge for direct mentions only"
 }

app/i18n/locales/es-ES.json

@@ -344,8 +344,6 @@
   "Settings_succesfully_changed": "¡Configuración cambiada correctamente!",
   "Share": "Compartir",
   "Share_this_app": "Compartir esta aplicación",
-  "Show_Unread_Counter": "Mostrar contador de no leídos",
-  "Show_Unread_Counter_Info": "El contador de no leídos se muestra como una insignia a la derecha del canal, en la lista",
   "Sign_in_your_server": "Accede a tu servidor",
   "Sign_Up": "Registrarse",
   "Some_field_is_invalid_or_empty": "Algún campo no es correcto o está vacío",

app/i18n/locales/fr.json

@@ -495,8 +495,6 @@
   "Share_Link": "Partager le lien",
   "Share_this_app": "Partager cette application",
   "Show_more": "Afficher plus..",
-  "Show_Unread_Counter": "Afficher le compteur non lu",
-  "Show_Unread_Counter_Info": "Le compteur non lu est affiché sous forme de badge à droite du canal, dans la liste",
   "Sign_in_your_server": "Connectez-vous à votre serveur",
   "Sign_Up": "S'inscrire",
   "Some_field_is_invalid_or_empty": "Certains champs sont invalides ou vides",

app/i18n/locales/it.json

@@ -483,8 +483,6 @@
   "Share_Link": "Condividi link",
   "Share_this_app": "Condividi questa app",
   "Show_more": "Mostra altri..",
-  "Show_Unread_Counter": "Mostra contatore messaggi non letti",
-  "Show_Unread_Counter_Info": "Il contatore viene mostrato come un'etichetta alla destra del canale, nella lista",
   "Sign_in_your_server": "Accedi al tuo server",
   "Sign_Up": "Registrati",
   "Some_field_is_invalid_or_empty": "Un campo non è valido o è vuoto",

app/i18n/locales/ja.json

@@ -452,8 +452,6 @@
   "Share_Link": "リンクをシェアする",
   "Share_this_app": "このアプリをシェアする",
   "Show_more": "Show more..",
-  "Show_Unread_Counter": "未読件数を表示する",
-  "Show_Unread_Counter_Info": "未読件数はリスト上で、チャンネルの右側にバッジで表示されます。",
   "Sign_in_your_server": "サーバーに接続",
   "Sign_Up": "登録",
   "Some_field_is_invalid_or_empty": "不正、または空の入力欄があります。",

app/i18n/locales/nl.json

@@ -495,8 +495,6 @@
   "Share_Link": "Deel link",
   "Share_this_app": "Deel deze app",
   "Show_more": "Meer tonen..",
-  "Show_Unread_Counter": "Toon ongelezen teller",
-  "Show_Unread_Counter_Info": "Ongelezen teller wordt weergegeven als een badge aan de rechterkant van het kanaal, in de lijst",
   "Sign_in_your_server": "Log in op je server",
   "Sign_Up": "Registreren",
   "Some_field_is_invalid_or_empty": "Sommige velden zijn ongeldig of leeg",

app/i18n/locales/pt-BR.json

@@ -463,8 +463,6 @@
   "Share": "Compartilhar",
   "Share_Link": "Share Link",
   "Show_more": "Mostrar mais..",
-  "Show_Unread_Counter": "Mostrar contador não lido",
-  "Show_Unread_Counter_Info": "O contador não lido é exibido como um emblema à direita do canal, na lista",
   "Sign_in_your_server": "Entrar no seu servidor",
   "Sign_Up": "Registrar",
   "Some_field_is_invalid_or_empty": "Algum campo está inválido ou vazio",

app/i18n/locales/ru.json

@@ -495,8 +495,6 @@
   "Share_Link": "Ссылка, чтобы Поделиться",
   "Share_this_app": "Рассказать о приложении",
   "Show_more": "Показать больше..",
-  "Show_Unread_Counter": "Показать счетчик непрочитанных",
-  "Show_Unread_Counter_Info": "Счетчик непрочитанных отображается в виде значка справа от канала в списке каналов",
   "Sign_in_your_server": "Войдите на ваш сервер",
   "Sign_Up": "Регистрация",
   "Some_field_is_invalid_or_empty": "Некоторые поля недопустимы или пусты",

app/i18n/locales/tr.json

@@ -483,8 +483,6 @@
   "Share_Link": "Bağlantı paylaş",
   "Share_this_app": "Bu uygulamayı paylaş",
   "Show_more": "Daha fazla göster..",
-  "Show_Unread_Counter": "Okunmamış Sayacını Göster",
-  "Show_Unread_Counter_Info": "Okunmamış sayacı, listede kanalın sağ tarafında bir rozet olarak görüntülenir",
   "Sign_in_your_server": "Sunucunuzda oturum açın",
   "Sign_Up": "Kaydol",
   "Some_field_is_invalid_or_empty": "Bazı alanlar geçersiz veya boş",

app/i18n/locales/zh-CN.json

@@ -481,8 +481,6 @@
   "Share_Link": "分享链接",
   "Share_this_app": "分享此 app",
   "Show_more": "显示更多",
-  "Show_Unread_Counter": "显示未读信息数量",
-  "Show_Unread_Counter_Info": "显示未读信息数量资讯",
   "Sign_in_your_server": "登录你的服务器",
   "Sign_Up": "注册",
   "Some_field_is_invalid_or_empty": "某些字段无效或为空",

app/i18n/locales/zh-TW.json

@@ -483,8 +483,6 @@
   "Share_Link": "分享連結",
   "Share_this_app": "分享此 app",
   "Show_more": "顯示更多",
-  "Show_Unread_Counter": "顯示未讀訊息數量",
-  "Show_Unread_Counter_Info": "顯示未讀訊息數量資訊",
   "Sign_in_your_server": "登錄你的伺服器",
   "Sign_Up": "註冊",
   "Some_field_is_invalid_or_empty": "某些字段無效或為空",

app/lib/database/model/Subscription.js

@@ -103,6 +103,8 @@ export default class Subscription extends Model {
 
 	@field('hide_unread_status') hideUnreadStatus;
 
+	@field('hide_mention_status') hideMentionStatus;
+
 	@json('sys_mes', sanitizer) sysMes;
 
 	@json('uids', sanitizer) uids;

app/lib/database/model/migrations.js

@@ -230,6 +230,15 @@ export default schemaMigrations({
 					columns: [{ name: 'comment', type: 'string', isOptional: true }]
 				})
 			]
+		},
+		{
+			toVersion: 18,
+			steps: [
+				addColumns({
+					table: 'subscriptions',
+					columns: [{ name: 'hide_mention_status', type: 'boolean', isOptional: true }]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 17,
+	version: 18,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -61,7 +61,8 @@ export default appSchema({
 				{ name: 'team_id', type: 'string', isIndexed: true },
 				{ name: 'team_main', type: 'boolean', isOptional: true }, // Use `Q.notEq(true)` to get false or null
 				{ name: 'on_hold', type: 'boolean', isOptional: true },
-				{ name: 'source', type: 'string', isOptional: true }
+				{ name: 'source', type: 'string', isOptional: true },
+				{ name: 'hide_mention_status', type: 'boolean', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/helpers/mergeSubscriptionsRooms.ts

@@ -97,6 +97,8 @@ export const merge = (
 
 	mergedSubscription.blocker = !!mergedSubscription.blocker;
 	mergedSubscription.blocked = !!mergedSubscription.blocked;
+	mergedSubscription.hideMentionStatus = !!mergedSubscription.hideMentionStatus;
+
 	return mergedSubscription;
 };
 

app/lib/methods/subscriptions/rooms.ts

@@ -103,7 +103,8 @@ const createOrUpdateSubscription = async (subscription: ISubscription, room: ISe
 					e2eKeyId: s.e2eKeyId,
 					E2EKey: s.E2EKey,
 					avatarETag: s.avatarETag,
-					onHold: s.onHold
+					onHold: s.onHold,
+					hideMentionStatus: s.hideMentionStatus
 				} as ISubscription;
 			} catch (error) {
 				try {

app/views/NotificationPreferencesView/index.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, Switch, Text } from 'react-native';
 import { RouteProp } from '@react-navigation/core';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Observable, Subscription } from 'rxjs';
+import { connect } from 'react-redux';
 
 import database from '../../lib/database';
 import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
@@ -16,8 +17,9 @@ import log, { events, logEvent } from '../../lib/methods/helpers/log';
 import sharedStyles from '../Styles';
 import { IOptionsField, OPTIONS } from './options';
 import { ChatsStackParamList } from '../../stacks/types';
-import { IRoomNotifications, TRoomNotificationsModel } from '../../definitions';
+import { IApplicationState, IRoomNotifications, TRoomNotificationsModel } from '../../definitions';
 import { Services } from '../../lib/services';
+import { compareServerVersion } from '../../lib/methods/helpers/compareServerVersion';
 
 const styles = StyleSheet.create({
 	pickerText: {
@@ -30,6 +32,7 @@ interface INotificationPreferencesViewProps {
 	navigation: StackNavigationProp<ChatsStackParamList, 'NotificationPrefView'>;
 	route: RouteProp<ChatsStackParamList, 'NotificationPrefView'>;
 	theme: TSupportedThemes;
+	serverVersion: string | null;
 }
 
 interface INotificationPreferencesViewState {
@@ -155,6 +158,7 @@ class NotificationPreferencesView extends React.Component<INotificationPreferenc
 	};
 
 	render() {
+		const { serverVersion } = this.props;
 		const { room } = this.state;
 		return (
 			<SafeAreaView testID='notification-preference-view'>
@@ -185,14 +189,27 @@ class NotificationPreferencesView extends React.Component<INotificationPreferenc
 					<List.Section>
 						<List.Separator />
 						<List.Item
-							title='Show_Unread_Counter'
-							testID='notification-preference-view-unread-count'
+							title='Mark_as_unread'
+							testID='notification-preference-view-mark-as-unread'
 							right={() => this.renderSwitch('hideUnreadStatus')}
 						/>
 						<List.Separator />
-						<List.Info info='Show_Unread_Counter_Info' />
+						<List.Info info='Mark_as_unread_Info' />
 					</List.Section>
 
+					{room.hideUnreadStatus && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '4.8.0') ? (
+						<List.Section>
+							<List.Separator />
+							<List.Item
+								title='Show_badge_for_mentions'
+								testID='notification-preference-view-badge-for-mentions'
+								right={() => this.renderSwitch('hideMentionStatus')}
+							/>
+							<List.Separator />
+							<List.Info info='Show_badge_for_mentions_Info' />
+						</List.Section>
+					) : null}
+
 					<List.Section title='In_App_And_Desktop'>
 						<List.Separator />
 						<List.Item
@@ -258,4 +275,8 @@ class NotificationPreferencesView extends React.Component<INotificationPreferenc
 	}
 }
 
-export default withTheme(NotificationPreferencesView);
+const mapStateToProps = (state: IApplicationState) => ({
+	serverVersion: state.server.version
+});
+
+export default connect(mapStateToProps)(withTheme(NotificationPreferencesView));

e2e/tests/room/03-roomactions.spec.js

@@ -287,7 +287,7 @@ describe('Room actions screen', () => {
 			});
 
 			it('should have show unread count option', async () => {
-				await expect(element(by.id('notification-preference-view-unread-count'))).toExist();
+				await expect(element(by.id('notification-preference-view-mark-as-unread'))).toExist();
 			});
 
 			it('should have notification alert option', async () => {