[NEW] Add Discussions to RoomActionsView

app/i18n/locales/en.json

@@ -688,6 +688,7 @@
   "No_threads": "There are no threads",
   "No_threads_following": "You are not following any threads",
   "No_threads_unread": "There are no unread threads",
+  "No_discussions": "There are no discussions",
   "Messagebox_Send_to_channel": "Send to channel",
   "Leader": "Leader",
   "Moderator": "Moderator",

app/stacks/InsideStack.js

@@ -74,6 +74,7 @@ import QueueListView from '../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../views/AddChannelTeamView';
 import AddExistingChannelView from '../views/AddExistingChannelView';
 import SelectListView from '../views/SelectListView';
+import DiscussionMessagesView from '../views/DiscussionMessagesView';
 
 // ChatsStackNavigator
 const ChatsStack = createStackNavigator();
@@ -114,6 +115,10 @@ const ChatsStackNavigator = () => {
 				component={RoomMembersView}
 				options={RoomMembersView.navigationOptions}
 			/>
+			<ChatsStack.Screen
+				name='DiscussionMessagesView'
+				component={DiscussionMessagesView}
+			/>
 			<ChatsStack.Screen
 				name='SearchMessagesView'
 				component={SearchMessagesView}

app/stacks/MasterDetailStack/index.js

@@ -64,6 +64,7 @@ import QueueListView from '../../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../../views/AddChannelTeamView';
 import AddExistingChannelView from '../../views/AddExistingChannelView';
 import SelectListView from '../../views/SelectListView';
+import DiscussionMessagesView from '../../views/DiscussionMessagesView';
 
 // ChatsStackNavigator
 const ChatsStack = createStackNavigator();
@@ -212,6 +213,10 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 					name='ThreadMessagesView'
 					component={ThreadMessagesView}
 				/>
+				<ModalStack.Screen
+					name='DiscussionMessagesView'
+					component={DiscussionMessagesView}
+				/>
 				<ModalStack.Screen
 					name='TeamChannelsView'
 					component={TeamChannelsView}

app/views/DiscussionMessagesView.js

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { FlatList } from 'react-native';
+import { useSelector } from 'react-redux';
+import { Q } from '@nozbe/watermelondb';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { HeaderBackButton } from '@react-navigation/stack';
+
+import ActivityIndicator from '../containers/ActivityIndicator';
+import I18n from '../i18n';
+import database from '../lib/database';
+import StatusBar from '../containers/StatusBar';
+import log from '../utils/log';
+import debounce from '../utils/debounce';
+import { themes } from '../constants/colors';
+import SafeAreaView from '../containers/SafeAreaView';
+import * as HeaderButton from '../containers/HeaderButton';
+import * as List from '../containers/List';
+import BackgroundContainer from '../containers/BackgroundContainer';
+import { isIOS } from '../utils/deviceInfo';
+import { getHeaderTitlePosition } from '../containers/Header';
+import SearchHeader from './ThreadMessagesView/SearchHeader';
+import { useTheme } from '../theme';
+import Message from '../containers/message';
+import { sanitizeLikeString } from '../lib/database/utils';
+
+const DiscussionMessagesView = ({ navigation, route }) => {
+	const rid = route.params?.rid;
+	const canAutoTranslate = route.params?.canAutoTranslate;
+	const autoTranslate = route.params?.autoTranslate;
+	const autoTranslateLanguage = route.params?.autoTranslateLanguage;
+	const baseUrl = useSelector(state => state.server.server);
+	const useRealName = useSelector(state => state.settings.UI_Use_Real_Name);
+	const Message_TimeFormat = useSelector(state => state.settings.Message_TimeFormat);
+	const isMasterDetail = useSelector(state => state.app.isMasterDetail);
+	const [loading, setLoading] = useState(false);
+	const [discussions, setDiscussions] = useState([]);
+	const [isSearching, setIsSearching] = useState(false);
+	const { theme } = useTheme();
+	const insets = useSafeAreaInsets();
+
+	const load = async() => {
+		if (loading) {
+			return;
+		}
+
+		setLoading(true);
+
+		try {
+			const db = database.active;
+			const subCollection = db.get('messages');
+			const subDiscussions = await subCollection.query(
+				Q.where('rid', Q.eq(rid)),
+				Q.where('drid', Q.notEq(null))
+			);
+			setDiscussions(subDiscussions);
+			setLoading(false);
+		} catch (e) {
+			log(e);
+		}
+	};
+
+	const onSearchChangeText = debounce(async(text) => {
+		try {
+			const db = database.active;
+			const whereClause = [
+				Q.where('rid', Q.eq(rid)),
+				Q.where('drid', Q.notEq(null))
+			];
+
+			if (text?.trim()) {
+				whereClause.push(Q.where('msg', Q.like(`%${ sanitizeLikeString(text?.trim()) }%`)));
+			}
+
+			const discussionsMessages = await db
+				.get('messages')
+				.query(...whereClause);
+			setDiscussions(discussionsMessages);
+		} catch (e) {
+			log(e);
+		}
+	}, 300);
+
+	const onCancelSearchPress = () => {
+		setIsSearching(false);
+		load();
+	};
+
+	const onSearchPress = () => {
+		setIsSearching(true);
+	};
+
+	const setHeader = () => {
+		if (isSearching) {
+			const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 1 });
+			return {
+				headerTitleAlign: 'left',
+				headerLeft: () => (
+					<HeaderButton.Container left>
+						<HeaderButton.Item
+							iconName='close'
+							onPress={onCancelSearchPress}
+						/>
+					</HeaderButton.Container>
+				),
+				headerTitle: () => <SearchHeader onSearchChangeText={onSearchChangeText} />,
+				headerTitleContainerStyle: {
+					left: headerTitlePosition.left,
+					right: headerTitlePosition.right
+				},
+				headerRight: () => null
+			};
+		}
+
+		const options = {
+			headerLeft: () => (
+				<HeaderBackButton
+					labelVisible={false}
+					onPress={() => navigation.pop()}
+					tintColor={themes[theme].headerTintColor}
+				/>
+			),
+			headerTitleAlign: 'center',
+			headerTitle: I18n.t('Discussions'),
+			headerTitleContainerStyle: {
+				left: null,
+				right: null
+			}
+		};
+
+		if (isMasterDetail) {
+			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
+		}
+
+		options.headerRight = () => (
+			<HeaderButton.Container>
+				<HeaderButton.Item iconName='search' onPress={onSearchPress} />
+			</HeaderButton.Container>
+		);
+		return options;
+	};
+
+	useEffect(() => {
+		load();
+	}, []);
+
+	useEffect(() => {
+		const options = setHeader();
+		navigation.setOptions(options);
+	}, [navigation, isSearching]);
+
+
+	const onDiscussionPress = debounce((item) => {
+		navigation.push('RoomView', {
+			rid: item.drid, prid: item.rid, name: item.msg, t: 'p'
+		});
+	}, 1000, true);
+
+	// eslint-disable-next-line react/prop-types
+	const renderItem = ({ item }) => (
+		<Message
+			item={item}
+			// eslint-disable-next-line react/prop-types
+			user={item.id}
+			rid={rid}
+			onDiscussionPress={onDiscussionPress}
+			baseUrl={baseUrl}
+			timeFormat={Message_TimeFormat}
+			useRealName={useRealName}
+			autoTranslateRoom={canAutoTranslate && autoTranslate}
+			autoTranslateLanguage={autoTranslateLanguage}
+		/>
+	);
+
+	if (!discussions?.length) {
+		return (
+			<>
+				<BackgroundContainer text={I18n.t('No_discussions')} />
+			</>
+		);
+	}
+
+	return (
+		<SafeAreaView testID='discussion-messages-view'>
+			<StatusBar />
+			<FlatList
+				data={discussions}
+				renderItem={renderItem}
+				// eslint-disable-next-line react/prop-types
+				keyExtractor={item => item.msg}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
+				onEndReachedThreshold={0.5}
+				maxToRenderPerBatch={5}
+				windowSize={10}
+				initialNumToRender={7}
+				removeClippedSubviews={isIOS}
+				ItemSeparatorComponent={List.Separator}
+				ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
+				scrollIndicatorInsets={{ right: 1 }}
+			/>
+		</SafeAreaView>
+	);
+};
+
+DiscussionMessagesView.propTypes = {
+	navigation: PropTypes.object,
+	route: PropTypes.object
+};
+
+export default DiscussionMessagesView;

app/views/RoomActionsView/index.js

@@ -903,7 +903,7 @@ class RoomActionsView extends React.Component {
 			room, membersCount, canViewMembers, canAddUser, canInviteUser, joined, canAutoTranslate, canForwardGuest, canReturnQueue
 		} = this.state;
 		const {
-			rid, t
+			rid, t, prid
 		} = room;
 		const isGroupChat = RocketChat.isGroupChat(room);
 
@@ -974,6 +974,31 @@ class RoomActionsView extends React.Component {
 							)
 							: null}
 
+						{['c', 'p', 'd'].includes(t) && !prid
+							? (
+								<>
+									<List.Item
+										title='Discussions'
+										onPress={() => this.onPressTouchable({
+											route: 'DiscussionMessagesView',
+											params: {
+												rid,
+												t,
+												prid,
+												canAutoTranslate,
+												autoTranslate: room.autoTranslate,
+												autoTranslateLanguage: room.autoTranslateLanguage
+											}
+										})}
+										testID='room-actions-discussions'
+										left={() => <List.Icon name='discussions' />}
+										showActionIndicator
+									/>
+									<List.Separator />
+								</>
+							)
+							: null}
+
 						{['c', 'p', 'd'].includes(t)
 							? (
 								<>

app/views/RoomView/index.js

@@ -424,7 +424,7 @@ class RoomView extends React.Component {
 				}
 			});
 		} else {
-			navigation.navigate('RoomActionsView', {
+			navigation.push('RoomActionsView', {
 				rid: this.rid, t: this.t, room, member
 			});
 		}

e2e/tests/room/04-discussion.spec.js

@@ -71,7 +71,7 @@ describe('Discussion', () => {
 	});
 
 	describe('Check RoomActionsView render', () => {
-		it('should navigete to RoomActionsView', async() => {
+		it('should navigate to RoomActionsView', async() => {
 			await waitFor(element(by.id('room-header'))).toBeVisible().withTimeout(5000);
 			await element(by.id('room-header')).tap();
 			await waitFor(element(by.id('room-actions-view'))).toBeVisible().withTimeout(5000);
@@ -130,4 +130,25 @@ describe('Discussion', () => {
 			await expect(element(by.id('room-info-view-edit-button'))).toBeVisible();
 		});
 	});
+
+	describe('Open Discussion from DiscussionMessagesView', () => {
+		const discussionName = `${ data.random }message`;
+		it('should go back to main room', async() => {
+			await tapBack();
+			await waitFor(element(by.id('room-actions-view'))).toBeVisible().withTimeout(5000);
+			await tapBack();
+			await waitFor(element(by.id(`room-view-title-${ discussionName }`))).toExist().withTimeout(5000);
+			await tapBack();
+			await navigateToRoom();
+		});
+
+		it('should navigate to DiscussionMessagesView', async() => {
+			await waitFor(element(by.id(`room-view-title-${ channel }`))).toExist().withTimeout(5000);
+			await waitFor(element(by.id('room-header'))).toBeVisible().withTimeout(5000);
+			await element(by.id('room-header')).tap();
+			await waitFor(element(by.id('room-actions-discussions'))).toBeVisible().withTimeout(5000);
+			await element(by.id('room-actions-discussions')).tap();
+			await waitFor(element(by.id('discussion-messages-view'))).toBeVisible().withTimeout(5000);
+		});
+	});
 });