[IMPROVE] Upgrade nivo and React Query (#26338)

apps/meteor/client/components/GenericTable/GenericTable.stories.tsx

@@ -35,7 +35,7 @@ const renderRow = ({ _id, name, email }: any) => (
 );
 
 export const Default: ComponentStory<typeof GenericTable> = (args) => (
-	<GenericTable {...args} header={header} renderFilter={renderFilter} renderRow={renderRow} height='100vh' />
+	<GenericTable {...args} header={header} renderFilter={renderFilter} renderRow={renderRow} />
 );
 Default.storyName = 'GenericTable';
 Default.args = {

apps/meteor/client/components/GenericTable/GenericTable.tsx

@@ -15,11 +15,11 @@ const defaultSetParamsValue = (): void => undefined;
 
 export type GenericTableParams = {
 	text?: string;
-	current?: number;
-	itemsPerPage?: 25 | 50 | 100;
+	current: number;
+	itemsPerPage: 25 | 50 | 100;
 };
 
-type GenericTableProps<FilterProps extends { onChange?: (params: GenericTableParams) => void }, ResultProps extends { _id?: Key }> = {
+type GenericTableProps<FilterProps extends { onChange?: (params: GenericTableParams) => void }, ResultProps extends { _id?: Key } | {}> = {
 	fixed?: boolean;
 	header?: ReactNode;
 	params?: GenericTableParams;
@@ -34,7 +34,7 @@ type GenericTableProps<FilterProps extends { onChange?: (params: GenericTablePar
 
 const GenericTable = forwardRef(function GenericTable<
 	FilterProps extends { onChange?: (params: GenericTableParams) => void },
-	ResultProps extends { _id?: Key },
+	ResultProps extends { _id?: Key } | {},
 >(
 	{
 		children,
@@ -83,7 +83,7 @@ const GenericTable = forwardRef(function GenericTable<
 						<GenericTableBody>
 							{isLoading && <GenericTableLoadingTable headerCells={headerCells} />}
 							{!isLoading &&
-								((RenderRow && results?.map((props, index: number) => <RenderRow key={props._id || index} {...props} />)) ||
+								((RenderRow && results?.map((props, index: number) => <RenderRow key={'_id' in props ? props._id : index} {...props} />)) ||
 									(children && results?.map(children)))}
 						</GenericTableBody>
 					</GenericTableV2>

apps/meteor/client/components/PlanTag.tsx

@@ -1,7 +1,7 @@
 import { Box, Tag } from '@rocket.chat/fuselage';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React, { ReactElement, useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 
 import { isTruthy } from '../../lib/isTruthy';
 

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx

@@ -2,8 +2,8 @@ import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
 import type { Options } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React, { memo, ReactElement, useState, ComponentProps } from 'react';
-import { useQuery } from 'react-query';
 
 import UserAvatar from '../avatar/UserAvatar';
 import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions';

apps/meteor/client/lib/queryClient.ts

@@ -1,3 +1,3 @@
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
 
 export const queryClient = new QueryClient();

apps/meteor/client/sidebar/RoomList/ScrollerWithCustomProps.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement } from 'react';
 
 import ScrollableContentWrapper from '../../components/ScrollableContentWrapper';
 
-export default forwardRef<HTMLElement>(function ScrollerWithCustomProps(props, ref): ReactElement {
+export default forwardRef<HTMLDivElement>(function ScrollerWithCustomProps(props, ref): ReactElement {
 	return (
 		<ScrollableContentWrapper
 			{...props}

apps/meteor/client/sidebar/search/ScrollerWithCustomProps.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactElement } from 'react';
 
 import ScrollableContentWrapper from '../../components/ScrollableContentWrapper';
 
-const ScrollerWithCustomProps = forwardRef(function ScrollerWithCustomProps(props, ref: React.Ref<HTMLElement>) {
+const ScrollerWithCustomProps = forwardRef(function ScrollerWithCustomProps(props, ref: React.Ref<HTMLDivElement>) {
 	return (
 		<ScrollableContentWrapper
 			{...props}

apps/meteor/client/stories/contexts/QueryClientProviderMock.tsx

@@ -1,5 +1,5 @@
+import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { FC } from 'react';
-import { QueryCache, QueryClient, QueryClientProvider } from 'react-query';
 
 const queryCache = new QueryCache();
 

apps/meteor/client/views/admin/rooms/RoomsTable.tsx

@@ -14,8 +14,8 @@ import FilterByTypeAndText from './FilterByTypeAndText';
 type RoomParamsType = {
 	text?: string;
 	types?: string[];
-	current?: number;
-	itemsPerPage?: 25 | 50 | 100;
+	current: number;
+	itemsPerPage: 25 | 50 | 100;
 };
 
 const style: CSSProperties = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };

apps/meteor/client/views/admin/settings/groups/voip/VoipExtensionsPage.tsx

@@ -15,7 +15,7 @@ const VoipExtensionsPage: FC = () => {
 	const t = useTranslation();
 	const setModal = useSetModal();
 
-	const [params, setParams] = useState<{ current?: number; itemsPerPage?: 25 | 50 | 100 }>({
+	const [params, setParams] = useState<{ current: number; itemsPerPage: 25 | 50 | 100 }>({
 		current: 0,
 		itemsPerPage: 25,
 	});

apps/meteor/client/views/hooks/useUpgradeTabParams.ts

@@ -1,6 +1,6 @@
 import { useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
-import { useQuery } from 'react-query';
 
 import { UpgradeTabVariant, getUpgradeTabType } from '../../../lib/getUpgradeTabType';
 

apps/meteor/client/views/invite/InvitePage.tsx

@@ -7,8 +7,8 @@ import {
 	useSetting,
 	useTranslation,
 } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React, { ReactElement } from 'react';
-import { useQuery } from 'react-query';
 
 import { APIClient } from '../../../app/utils/client';
 import LoginPage from '../root/MainLayout/LoginPage';

apps/meteor/client/views/invite/SecretURLPage.tsx

@@ -1,6 +1,6 @@
 import { useSessionDispatch, useRouteParameter, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React, { ReactElement } from 'react';
-import { useQuery } from 'react-query';
 
 import { KonchatNotification } from '../../../app/ui';
 import { call } from '../../lib/utils/call';

apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx

@@ -28,8 +28,8 @@ const useQuery = (
 		current,
 	}: {
 		text?: string;
-		itemsPerPage?: 25 | 50 | 100;
-		current?: number;
+		itemsPerPage: 25 | 50 | 100;
+		current: number;
 	},
 	[column, direction]: string[],
 	userIdLoggedIn: string | null,
@@ -54,7 +54,7 @@ const useQuery = (
 	);
 
 const CallTable: FC = () => {
-	const [params, setParams] = useState<{ text?: string; current?: number; itemsPerPage?: 25 | 50 | 100 }>({
+	const [params, setParams] = useState<{ text?: string; current: number; itemsPerPage: 25 | 50 | 100 }>({
 		text: '',
 		current: 0,
 		itemsPerPage: 25,

apps/meteor/client/views/omnichannel/queueList/QueueListPage.tsx

@@ -8,7 +8,7 @@ type QueueListPagePropsParamsType = {
 	servedBy: string;
 	status: string;
 	departmentId: string;
-	itemsPerPage: number;
+	itemsPerPage: 25 | 50 | 100;
 	current: number;
 };
 
@@ -41,7 +41,7 @@ export const QueueListPage = ({ title, header, data, renderRow, params, setParam
 				results={data?.queue}
 				total={data?.total}
 				params={params}
-				setParams={setParams}
+				setParams={setParams as (params: Pick<QueueListPagePropsParamsType, 'itemsPerPage' | 'current'>) => void}
 			/>
 		</Page.Content>
 	</Page>

apps/meteor/client/views/omnichannel/queueList/index.tsx

@@ -87,7 +87,13 @@ const QueueList = (): ReactElement => {
 		[mediaQuery, t],
 	);
 
-	const [params, setParams] = useState({
+	const [params, setParams] = useState<{
+		servedBy: string;
+		status: string;
+		departmentId: string;
+		itemsPerPage: 25 | 50 | 100;
+		current: number;
+	}>({
 		servedBy: '',
 		status: '',
 		departmentId: '',

apps/meteor/client/views/room/ShareLocation/ShareLocationModal.tsx

@@ -1,7 +1,7 @@
 import { IMessage, IRoom } from '@rocket.chat/core-typings';
 import { useEndpoint, useTranslation, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { ReactElement } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
 
 import GenericModal from '../../../components/GenericModal';
 import MapView from '../../location/MapView';
@@ -17,7 +17,7 @@ type ShareLocationModalProps = {
 const ShareLocationModal = ({ rid, tmid, onClose }: ShareLocationModalProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToast = useToastMessageDispatch();
-	const { data: permissionData, isLoading: permissionLoading } = useQuery('geolocationPermission', getGeolocationPermission);
+	const { data: permissionData, isLoading: permissionLoading } = useQuery(['geolocationPermission'], getGeolocationPermission);
 	const { data: positionData } = useQuery(['geolocationPosition', permissionData], async () => {
 		if (permissionLoading || permissionData === 'prompt' || permissionData === 'denied') {
 			return;
@@ -55,9 +55,9 @@ const ShareLocationModal = ({ rid, tmid, onClose }: ShareLocationModalProps): Re
 		try {
 			const position = await getGeolocationPosition();
 			queryClient.setQueryData(['geolocationPosition', 'granted'], position);
-			queryClient.setQueryData('geolocationPermission', 'granted');
+			queryClient.setQueryData(['geolocationPermission'], 'granted');
 		} catch (e) {
-			queryClient.setQueryData('geolocationPermission', () => getGeolocationPermission);
+			queryClient.setQueryData(['geolocationPermission'], () => getGeolocationPermission);
 		}
 	};
 

apps/meteor/client/views/root/AppRoot.tsx

@@ -1,5 +1,5 @@
+import { QueryClientProvider } from '@tanstack/react-query';
 import React, { FC, lazy, Suspense } from 'react';
-import { QueryClientProvider } from 'react-query';
 
 import { OmnichannelRoomIconProvider } from '../../components/RoomIcon/OmnichannelRoomIcon/provider/OmnichannelRoomIconProvider';
 import { queryClient } from '../../lib/queryClient';

apps/meteor/client/views/setupWizard/hooks/useParameters.ts

@@ -1,6 +1,6 @@
 import type { ISetting } from '@rocket.chat/core-typings';
 import { useMethod } from '@rocket.chat/ui-contexts';
-import { useQuery, UseQueryResult } from 'react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
 type SetupWizardParameters = {
 	settings: ISetting[];

apps/meteor/client/views/teams/ChannelDesertionTable.tsx

@@ -12,7 +12,7 @@ type ChannelDesertionTableProps = {
 	lastOwnerWarning: boolean | undefined;
 	rooms: (Serialized<IRoom> & { isLastOwner?: string })[] | undefined;
 	eligibleRoomsLength: number | undefined;
-	params?: {};
+	params?: { current: number; itemsPerPage: 25 | 50 | 100 };
 	onChangeParams?: () => void;
 	onChangeRoomSelection: (room: Serialized<IRoom>) => void;
 	selectedRooms: { [key: string]: Serialized<IRoom> };
@@ -66,7 +66,7 @@ const ChannelDesertionTable: FC<ChannelDesertionTableProps> = ({
 						formatDate={formatDate}
 						room={room}
 						onChange={onChangeRoomSelection}
-						selected={!!selectedRooms[room._id]}
+						selected={'_id' in room && room._id ? !!selectedRooms[room._id] : false}
 						lastOwnerWarning={lastOwnerWarning}
 					/>
 				)}

apps/meteor/ee/client/lib/onToggledFeature.ts

@@ -1,4 +1,4 @@
-import { QueryObserver } from 'react-query';
+import { QueryObserver } from '@tanstack/react-query';
 
 import { queryClient } from '../../../client/lib/queryClient';
 import type { BundleFeature } from '../../app/license/server/bundles';

apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponsesPage.tsx

@@ -10,8 +10,8 @@ import Page from '../../../../client/components/Page';
 export type CannedResponsesPageProps = {
 	data: any;
 	header: ReactElement[];
-	setParams: Dispatch<SetStateAction<{ current?: number; itemsPerPage?: 25 | 50 | 100 }>>;
-	params: { current?: number; itemsPerPage?: 25 | 50 | 100 };
+	setParams: Dispatch<SetStateAction<{ current: number; itemsPerPage: 25 | 50 | 100 }>>;
+	params: { current: number; itemsPerPage: 25 | 50 | 100 };
 	title: string;
 	renderFilter?: (props: any) => ReactElement;
 	renderRow?: (props: any) => ReactElement;

apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponsesRoute.tsx

@@ -44,7 +44,7 @@ const CannedResponsesRoute: FC = () => {
 	const { sharing, createdBy, text } = values as CannedResponseFilterValues;
 	const { handleSharing, handleCreatedBy, handleText } = handlers;
 
-	const [params, setParams] = useState<{ current?: number; itemsPerPage?: 25 | 50 | 100 }>({
+	const [params, setParams] = useState<{ current: number; itemsPerPage: 25 | 50 | 100 }>({
 		current: 0,
 		itemsPerPage: 25,
 	});

apps/meteor/ee/client/sidebar/footer/SidebarFooterWatermark.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React, { ReactElement } from 'react';
-import { useQuery } from 'react-query';
 
 export const SidebarFooterWatermark = (): ReactElement | null => {
 	const t = useTranslation();

apps/meteor/ee/client/views/admin/engagementDashboard/channels/useChannelsList.ts

@@ -1,5 +1,5 @@
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { getPeriodRange, Period } from '../dataView/periods';
 

apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts

@@ -1,5 +1,5 @@
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { getPeriodRange, Period } from '../dataView/periods';
 

apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessagesSent.ts

@@ -1,5 +1,5 @@
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { getPeriodRange, Period } from '../dataView/periods';
 

apps/meteor/ee/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts

@@ -1,5 +1,5 @@
 import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { getPeriodRange, Period } from '../dataView/periods';
 

apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx

@@ -221,8 +221,7 @@ const ActiveUsersSection = ({ timezone }: ActiveUsersSectionProps): ReactElement
 											format: (date): string => moment(date).format(dauValues.length === 7 ? 'dddd' : 'L'),
 										}}
 										animate={true}
-										motionStiffness={90}
-										motionDamping={15}
+										motionConfig='stiff'
 										theme={{
 											// TODO: Get it from theme
 											axis: {