fix: search functionality in Importer page

.changeset/importer-search-bar.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/core-typings": patch
+---
+
+chore: search functionality in Importer page
+

.changeset/large-turtles-accept.md

@@ -0,0 +1,8 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/core-typings": patch
+---
+
+chore: search functionality in Importer page
+
+✅ Created the feature to search for specific users or channels on the Prepare Import page

apps/meteor/app/importer/server/classes/ImporterBase.js

@@ -9,6 +9,7 @@ import { ImporterInfo } from '../../lib/ImporterInfo';
 import { ProgressStep, ImportPreparingStartedStates } from '../../lib/ImporterProgressStep';
 import { ImportDataConverter } from './ImportDataConverter';
 import { Progress } from './ImporterProgress';
+import { SelectionMessage } from './ImporterSelectionMessage';
 import { ImporterWebsocket } from './ImporterWebsocket';
 
 /**
@@ -344,6 +345,7 @@ export class Base {
 
 		const users = await ImportData.getAllUsersForSelection();
 		const channels = await ImportData.getAllChannelsForSelection();
+		const messages = await ImportData.getAllMessages().toArray();
 		const hasDM = await ImportData.checkIfDirectMessagesExists();
 
 		const selectionUsers = users.map(
@@ -362,13 +364,17 @@ export class Base {
 					c.data.t === 'd',
 				),
 		);
-		const selectionMessages = await ImportData.countMessages();
+
+		const selectionMessages = messages.map((m) => new SelectionMessage(m._id, m.data.rid, m.data.u));
+
+		const selectionMessagesCount = await ImportData.countMessages();
+		// In the future, iterate the cursor?
 
 		if (hasDM) {
 			selectionChannels.push(new SelectionChannel('__directMessages__', t('Direct_Messages'), false, true, true, undefined, true));
 		}
 
-		const results = new Selection(this.info.name, selectionUsers, selectionChannels, selectionMessages);
+		const results = new Selection(this.info.name, selectionUsers, selectionChannels, selectionMessagesCount, selectionMessages);
 
 		return results;
 	}

apps/meteor/app/importer/server/classes/ImporterSelection.js

@@ -6,11 +6,13 @@ export class Selection {
 	 * @param {SelectionUser[]} users the users which can be selected
 	 * @param {SelectionChannel[]} channels the channels which can be selected
 	 * @param {number} message_count the number of messages
+	 * @param {SelectionMessage[]} messages the messages from this import (with only: _id, rid, u)
 	 */
-	constructor(name, users, channels, message_count) {
+	constructor(name, users, channels, message_count, messages = undefined) {
 		this.name = name;
 		this.users = users;
 		this.channels = channels;
 		this.message_count = message_count;
+		this.messages = messages; // not all importers use this
 	}
 }

apps/meteor/app/importer/server/classes/ImporterSelectionMessage.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export class SelectionMessage {
+	message_id: string;
+
+	rid: string;
+
+	u: string;
+
+	/**
+	 * Constructs a new selection message.
+	 *
+	 * @param {string} message_id
+	 * @param {string} rid the rid of the channel
+	 * @param {boolean} u user
+	 */
+	constructor(message_id: string, rid: string, u: string) {
+		this.message_id = message_id;
+		this.rid = rid;
+		this.u = u;
+	}
+}

apps/meteor/client/views/admin/import/NewImportPage.js

@@ -215,7 +215,7 @@ function NewImportPage() {
 								{fileType === 'upload' && (
 									<>
 										{maxFileSize > 0 ? (
-											<Callout type='warning' marginBlock='x16'>
+											<Callout type='warning' marginBlock='x16' color='default'>
 												{t('Importer_Upload_FileSize_Message', {
 													maxFileSize: formatMemorySize(maxFileSize),
 												})}

apps/meteor/client/views/admin/import/PrepareChannels.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { FC, Dispatch, SetStateAction, ChangeEvent } from 'react';
 import React, { useState, useCallback } from 'react';
 
-type ChannelDescriptor = {
+export type ChannelDescriptor = {
 	channel_id: string;
 	name: string;
 	is_archived: boolean;
@@ -14,9 +14,10 @@ type PrepareChannelsProps = {
 	channelsCount: number;
 	channels: ChannelDescriptor[];
 	setChannels: Dispatch<SetStateAction<ChannelDescriptor[]>>;
+	searchText: string;
 };
 
-const PrepareChannels: FC<PrepareChannelsProps> = ({ channels, channelsCount, setChannels }) => {
+const PrepareChannels: FC<PrepareChannelsProps> = ({ channels, channelsCount, setChannels, searchText }) => {
 	const t = useTranslation();
 	const [current, setCurrent] = useState(0);
 	const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25);
@@ -64,19 +65,24 @@ const PrepareChannels: FC<PrepareChannelsProps> = ({ channels, channelsCount, se
 				<TableBody>
 					{channels.slice(current, current + itemsPerPage).map((channel) => (
 						<TableRow key={channel.channel_id}>
-							<TableCell width='x36'>
-								<CheckBox
-									checked={channel.do_import}
-									onChange={(event: ChangeEvent<HTMLInputElement>): void => {
-										const { checked } = event.currentTarget;
-										setChannels((channels) =>
-											channels.map((_channel) => (_channel === channel ? { ..._channel, do_import: checked } : _channel)),
-										);
-									}}
-								/>
-							</TableCell>
-							<TableCell>{channel.name}</TableCell>
-							<TableCell align='end'>{channel.is_archived && <Tag variant='danger'>{t('Importer_Archived')}</Tag>}</TableCell>
+							{/* TODO: create filter for paginated results */}
+							{channel.name.includes(searchText) && (
+								<>
+									<TableCell width='x36'>
+										<CheckBox
+											checked={channel.do_import}
+											onChange={(event: ChangeEvent<HTMLInputElement>): void => {
+												const { checked } = event.currentTarget;
+												setChannels((channels) =>
+													channels.map((_channel) => (_channel === channel ? { ..._channel, do_import: checked } : _channel)),
+												);
+											}}
+										/>
+									</TableCell>
+									<TableCell>{channel.name}</TableCell>
+									<TableCell align='end'>{channel.is_archived && <Tag variant='danger'>{t('Importer_Archived')}</Tag>}</TableCell>
+								</>
+							)}
 						</TableRow>
 					))}
 				</TableBody>

apps/meteor/client/views/admin/import/PrepareImportFilters.tsx

@@ -0,0 +1,44 @@
+import { Box, TextInput, Icon } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { Dispatch, SetStateAction } from 'react';
+import React, { useCallback, useState } from 'react';
+
+const PrepareImportFilters = ({ setFilters, tab }: { setFilters: Dispatch<SetStateAction<string>>; tab: string }) => {
+	const t = useTranslation();
+	const [text, setText] = useState('');
+
+	const handleSearchTextChange = useCallback(
+		(event) => {
+			const text = event.currentTarget.value;
+			setFilters(text);
+			setText(text);
+		},
+		[setFilters],
+	);
+
+	return (
+		<Box
+			is='form'
+			onSubmit={useCallback((e) => e.preventDefault(), [])}
+			mb='x8'
+			display='flex'
+			flexWrap='wrap'
+			alignItems='center'
+			justifyContent='center'
+			width='full'
+		>
+			<Box minWidth='x224' maxWidth='590px' display='flex' m='x4' flexGrow={2}>
+				<TextInput
+					name='search-importer'
+					alignItems='center'
+					placeholder={tab === 'users' ? t('Search_users') : t('Search_channels')}
+					addon={<Icon name='magnifier' size='x20' />}
+					onChange={handleSearchTextChange}
+					value={text}
+				/>
+			</Box>
+		</Box>
+	);
+};
+
+export default PrepareImportFilters;

apps/meteor/client/views/admin/import/PrepareImportPage.js

@@ -1,7 +1,7 @@
 import { Badge, Box, Button, ButtonGroup, Margins, ProgressBar, Throbber, Tabs } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useTranslation, useStream, useRouter } from '@rocket.chat/ui-contexts';
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 
 import {
 	ProgressStep,
@@ -14,7 +14,9 @@ import {
 import { numberFormat } from '../../../../lib/utils/stringUtils';
 import Page from '../../../components/Page';
 import PrepareChannels from './PrepareChannels';
+import PrepareImportFilters from './PrepareImportFilters';
 import PrepareUsers from './PrepareUsers';
+import { countMessages } from './countMessages';
 import { useErrorHandler } from './useErrorHandler';
 
 const waitFor = (fn, predicate) =>
@@ -40,13 +42,33 @@ function PrepareImportPage() {
 	const [isPreparing, setPreparing] = useSafely(useState(true));
 	const [progressRate, setProgressRate] = useSafely(useState(null));
 	const [status, setStatus] = useSafely(useState(null));
-	const [messageCount, setMessageCount] = useSafely(useState(0));
 	const [users, setUsers] = useState([]);
 	const [channels, setChannels] = useState([]);
+	const [messages, setMessages] = useState([]);
 	const [isImporting, setImporting] = useSafely(useState(false));
 
-	const usersCount = useMemo(() => users.filter(({ do_import }) => do_import).length, [users]);
-	const channelsCount = useMemo(() => channels.filter(({ do_import }) => do_import).length, [channels]);
+	const [tab, setTab] = useState('users');
+	const handleTabClick = useMemo(() => (tab) => () => setTab(tab), []);
+
+	const [searchFilters, setSearchFilters] = useState('');
+	const prevSearchFilterText = useRef(searchFilters);
+	const searchText = useDebouncedValue(searchFilters, 500);
+
+	useEffect(() => {
+		prevSearchFilterText.current = searchText;
+	}, [searchText]);
+
+	const selectedUsers = useMemo(() => {
+		return users.filter(({ do_import, username }) => (tab === 'users' ? username.includes(searchText) && do_import : do_import));
+	}, [searchText, tab, users]);
+
+	const selectedChannels = useMemo(() => {
+		return channels.filter(({ do_import, name }) => (tab === 'channels' ? name.includes(searchText) && do_import : do_import));
+	}, [channels, searchText, tab]);
+
+	const messagesCount = useMemo(() => {
+		return countMessages(selectedUsers, selectedChannels, messages);
+	}, [selectedUsers, selectedChannels, messages]);
 
 	const router = useRouter();
 
@@ -81,9 +103,10 @@ function PrepareImportPage() {
 					return;
 				}
 
-				setMessageCount(data.message_count);
 				setUsers(data.users.map((user) => ({ ...user, do_import: true })));
 				setChannels(data.channels.map((channel) => ({ ...channel, do_import: true })));
+				setMessages(data.messages);
+
 				setPreparing(false);
 				setProgressRate(null);
 			} catch (error) {
@@ -139,7 +162,7 @@ function PrepareImportPage() {
 		};
 
 		loadCurrentOperation();
-	}, [getCurrentImportOperation, getImportFileData, handleError, router, setMessageCount, setPreparing, setProgressRate, setStatus, t]);
+	}, [getCurrentImportOperation, getImportFileData, handleError, messagesCount, router, setPreparing, setProgressRate, setStatus, t]);
 
 	const handleBackToImportsButtonClick = () => {
 		router.navigate('/admin/import');
@@ -157,16 +180,15 @@ function PrepareImportPage() {
 		}
 	};
 
-	const [tab, setTab] = useState('users');
-	const handleTabClick = useMemo(() => (tab) => () => setTab(tab), []);
-
 	const statusDebounced = useDebouncedValue(status, 100);
 
 	const handleMinimumImportData = !!(
-		(!usersCount && !channelsCount && !messageCount) ||
-		(!usersCount && !channelsCount && messageCount !== 0)
+		(!selectedUsers.length && !selectedChannels.length && !messagesCount) ||
+		(!selectedUsers.length && !selectedChannels.length && messagesCount !== 0)
 	);
 
+	// TODO: when using the search bar, display only the results!
+
 	return (
 		<Page>
 			<Page.Header title={t('Importing_Data')}>
@@ -180,6 +202,8 @@ function PrepareImportPage() {
 				</ButtonGroup>
 			</Page.Header>
 
+			<PrepareImportFilters setFilters={setSearchFilters} tab={tab} />
+
 			<Page.ScrollableContentWithShadow>
 				<Box marginInline='auto' marginBlock='x24' width='full' maxWidth='590px'>
 					<Box is='h2' fontScale='p2m'>
@@ -188,14 +212,14 @@ function PrepareImportPage() {
 					{!isPreparing && (
 						<Tabs flexShrink={0}>
 							<Tabs.Item selected={tab === 'users'} onClick={handleTabClick('users')}>
-								{t('Users')} <Badge>{usersCount}</Badge>
+								{t('Users')} <Badge>{selectedUsers.length}</Badge>
 							</Tabs.Item>
 							<Tabs.Item selected={tab === 'channels'} onClick={handleTabClick('channels')}>
-								{t('Channels')} <Badge>{channelsCount}</Badge>
+								{t('Channels')} <Badge>{selectedChannels.length}</Badge>
 							</Tabs.Item>
 							<Tabs.Item disabled>
 								{t('Messages')}
-								<Badge>{messageCount}</Badge>
+								<Badge>{messagesCount}</Badge>
 							</Tabs.Item>
 						</Tabs>
 					)}
@@ -214,9 +238,18 @@ function PrepareImportPage() {
 								)}
 							</>
 						)}
-						{!isPreparing && tab === 'users' && <PrepareUsers usersCount={usersCount} users={users} setUsers={setUsers} />}
+						{/* TODO: create filters for paginated results on PrepareUsers and PrepareChannels */}
+
+						{!isPreparing && tab === 'users' && (
+							<PrepareUsers usersCount={selectedUsers.length} users={users} setUsers={setUsers} searchText={searchText} />
+						)}
 						{!isPreparing && tab === 'channels' && (
-							<PrepareChannels channels={channels} channelsCount={channelsCount} setChannels={setChannels} />
+							<PrepareChannels
+								channels={channels}
+								channelsCount={selectedChannels.length}
+								setChannels={setChannels}
+								searchText={searchText}
+							/>
 						)}
 					</Margins>
 				</Box>