Chore: TS migration SortList (#25167)

apps/meteor/client/components/Message/Attachments/Attachments.tsx

@@ -5,10 +5,10 @@ import { useBlockRendered } from '../hooks/useBlockRendered';
 import Item from './Item';
 
 const Attachments: FC<{ attachments: Array<MessageAttachmentBase>; file?: FileProp }> = ({ attachments = null, file }): any => {
-	const { className, ref } = useBlockRendered();
+	const { className, ref } = useBlockRendered<HTMLDivElement>();
 	return (
 		<>
-			<div className={className} ref={ref as any} />
+			<div className={className} ref={ref} />
 			{attachments?.map((attachment, index) => (
 				<Item key={index} file={file} attachment={attachment} />
 			))}

apps/meteor/client/components/Message/Metrics/Broadcast.tsx

@@ -13,11 +13,11 @@ type BroadcastOptions = {
 
 const BroadcastMetric: FC<BroadcastOptions> = ({ username, mid, replyBroadcast }) => {
 	const t = useTranslation();
-	const { className, ref } = useBlockRendered();
+	const { className, ref } = useBlockRendered<HTMLDivElement>();
 
 	return (
 		<Content>
-			<div className={className} ref={ref as any} />
+			<div className={className} ref={ref} />
 			<Reply data-username={username} data-mid={mid} onClick={replyBroadcast}>
 				{t('Reply')}
 			</Reply>

apps/meteor/client/components/Message/Metrics/Discussion.tsx

@@ -16,11 +16,11 @@ type DicussionOptions = {
 const DiscussionMetric: FC<DicussionOptions> = ({ lm, count, rid, drid, openDiscussion }) => {
 	const t = useTranslation();
 	const format = useTimeAgo();
-	const { className, ref } = useBlockRendered();
+	const { className, ref } = useBlockRendered<HTMLDivElement>();
 
 	return (
 		<Message.Block>
-			<div className={className} ref={ref as any} />
+			<div className={className} ref={ref} />
 			<Message.Metrics>
 				<Message.Metrics.Reply data-rid={rid} data-drid={drid} onClick={openDiscussion}>
 					{count ? t('message_counter', { counter: count, count }) : t('Reply')}

apps/meteor/client/components/Message/hooks/useBlockRendered.js

@@ -1,9 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-export const useBlockRendered = () => {
-	const ref = useRef();
-	useEffect(() => {
-		ref.current.dispatchEvent(new Event('rendered'));
-	}, []);
-	return { className: 'js-block-wrapper', ref };
-};

apps/meteor/client/components/Message/hooks/useBlockRendered.ts

@@ -0,0 +1,13 @@
+import { useRef, useEffect, RefObject } from 'react';
+
+// @deprecated
+export const useBlockRendered = <T extends HTMLElement>(): {
+	className: string;
+	ref: RefObject<T>;
+} => {
+	const ref = useRef<T>(null);
+	useEffect(() => {
+		ref.current?.dispatchEvent(new Event('rendered'));
+	}, []);
+	return { className: 'js-block-wrapper', ref };
+};

apps/meteor/client/components/PlanTag.js

@@ -1,38 +0,0 @@
-import { Box, Tag } from '@rocket.chat/fuselage';
-import { useSafely } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect, useState } from 'react';
-
-import { useMethod } from '../contexts/ServerContext';
-
-function PlanTag() {
-	const [plans, setPlans] = useSafely(useState([]));
-
-	const getTags = useMethod('license:getTags');
-
-	useEffect(() => {
-		const developmentTag = process.env.NODE_ENV === 'development' ? { name: 'development', color: '#095ad2' } : null;
-
-		const fetchTags = async () => {
-			const tags = await getTags();
-			setPlans([developmentTag, ...tags].filter(Boolean).map((plan) => ({ plan: plan.name, background: plan.color })));
-		};
-
-		fetchTags();
-	}, [getTags, setPlans]);
-
-	return plans.map(({ plan, background }) => (
-		<Box marginInline='x4' display='inline-block' verticalAlign='middle' key={plan}>
-			<Tag
-				style={{
-					color: '#fff',
-					backgroundColor: background,
-					textTransform: 'capitalize',
-				}}
-			>
-				{plan}
-			</Tag>
-		</Box>
-	));
-}
-
-export default PlanTag;

apps/meteor/client/components/PlanTag.tsx

@@ -0,0 +1,50 @@
+import { Box, Tag } from '@rocket.chat/fuselage';
+import { useSafely } from '@rocket.chat/fuselage-hooks';
+import React, { ReactElement, useEffect, useState } from 'react';
+
+import { ILicenseTag } from '../../ee/app/license/definitions/ILicenseTag';
+import { useMethod } from '../contexts/ServerContext';
+
+function PlanTag(): ReactElement {
+	const [plans, setPlans] = useSafely(
+		useState<
+			{
+				name: string;
+				color: string;
+			}[]
+		>([]),
+	);
+
+	const getTags = useMethod('license:getTags');
+
+	useEffect(() => {
+		const developmentTag = process.env.NODE_ENV === 'development' ? { name: 'development', color: '#095ad2' } : null;
+
+		const fetchTags = async (): Promise<void> => {
+			const tags = await getTags();
+			setPlans([developmentTag, ...tags].filter(Boolean) as ILicenseTag[]);
+		};
+
+		fetchTags();
+	}, [getTags, setPlans]);
+
+	return (
+		<>
+			{plans.map(({ name, color }) => (
+				<Box marginInline='x4' display='inline-block' verticalAlign='middle' key={name}>
+					<Tag
+						style={{
+							color: '#fff',
+							backgroundColor: color,
+							textTransform: 'capitalize',
+						}}
+					>
+						{name}
+					</Tag>
+				</Box>
+			))}
+		</>
+	);
+}
+
+export default PlanTag;

apps/meteor/client/components/RawText.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const RawText = ({ children }) => <span dangerouslySetInnerHTML={{ __html: children }} />;
-
-export default RawText;

apps/meteor/client/components/RawText.tsx

@@ -0,0 +1,6 @@
+import React, { ReactElement } from 'react';
+
+// @deprecated
+const RawText = ({ children }: { children: string }): ReactElement => <span dangerouslySetInnerHTML={{ __html: children }} />;
+
+export default RawText;

apps/meteor/client/components/Skeleton.tsx

@@ -1,7 +1,7 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { ComponentProps, ReactElement } from 'react';
 
-export const FormSkeleton = (props) => (
+export const FormSkeleton = (props: ComponentProps<typeof Box>): ReactElement => (
 	<Box w='full' pb='x24' {...props}>
 		<Skeleton mbe='x8' />
 		<Skeleton mbe='x4' />

apps/meteor/client/components/SortList/GroupingList.tsx

@@ -1,5 +1,5 @@
 import { CheckBox, OptionTitle } from '@rocket.chat/fuselage';
-import React, { useCallback } from 'react';
+import React, { useCallback, ReactElement } from 'react';
 
 import { useMethod } from '../../contexts/ServerContext';
 import { useTranslation } from '../../contexts/TranslationContext';
@@ -15,14 +15,17 @@ const checkBoxStyle = {
 	paddingInlineStart: '24px',
 };
 
-function GroupingList() {
-	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
-	const sidebarShowFavorites = useUserPreference('sidebarShowFavorites');
-	const sidebarShowUnread = useUserPreference('sidebarShowUnread');
+// TODO: chapter day frontend: fix OptionTitle style type
+
+const GroupingList = function GroupingList(): ReactElement {
+	const sidebarGroupByType = useUserPreference<boolean>('sidebarGroupByType');
+	const sidebarShowFavorites = useUserPreference<boolean>('sidebarShowFavorites');
+	const sidebarShowUnread = useUserPreference<boolean>('sidebarShowUnread');
 
 	const saveUserPreferences = useMethod('saveUserPreferences');
 
-	const useHandleChange = (key, value) => useCallback(() => saveUserPreferences({ [key]: value }), [key, value]);
+	const useHandleChange = (key: 'sidebarGroupByType' | 'sidebarShowFavorites' | 'sidebarShowUnread', value: boolean): (() => void) =>
+		useCallback(() => saveUserPreferences({ [key]: value }), [key, value]);
 
 	const handleChangeGroupByType = useHandleChange('sidebarGroupByType', !sidebarGroupByType);
 	const handleChangeShoFavorite = useHandleChange('sidebarShowFavorites', !sidebarShowFavorites);
@@ -32,7 +35,7 @@ function GroupingList() {
 
 	return (
 		<>
-			<OptionTitle style={style}>{t('Group_by')}</OptionTitle>
+			<OptionTitle {...({ style } as any)}>{t('Group_by')}</OptionTitle>
 			<ul className='rc-popover__list'>
 				<ListItem
 					icon={'flag'}
@@ -56,6 +59,6 @@ function GroupingList() {
 			</ul>
 		</>
 	);
-}
+};
 
 export default GroupingList;

apps/meteor/client/components/SortList/SortList.tsx

@@ -1,11 +1,11 @@
 import { Option } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import GroupingList from './GroupingList';
 import SortModeList from './SortModeList';
 import ViewModeList from './ViewModeList';
 
-function SortList() {
+function SortList(): ReactElement {
 	return (
 		<>
 			<ViewModeList />

apps/meteor/client/components/SortList/SortModeList.tsx

@@ -1,5 +1,5 @@
 import { RadioButton, OptionTitle } from '@rocket.chat/fuselage';
-import React, { useCallback } from 'react';
+import React, { ReactElement, useCallback } from 'react';
 
 import { useMethod } from '../../contexts/ServerContext';
 import { useTranslation } from '../../contexts/TranslationContext';
@@ -15,19 +15,20 @@ const checkBoxStyle = {
 	paddingInlineStart: '24px',
 };
 
-function SortModeList() {
+function SortModeList(): ReactElement {
 	const t = useTranslation();
 	const saveUserPreferences = useMethod('saveUserPreferences');
-	const sidebarSortBy = useUserPreference('sidebarSortby', 'activity');
+	const sidebarSortBy = useUserPreference<'activity' | 'alphabetical'>('sidebarSortby', 'activity');
 
-	const useHandleChange = (value) => useCallback(() => saveUserPreferences({ sidebarSortby: value }), [value]);
+	const useHandleChange = (value: 'alphabetical' | 'activity'): (() => void) =>
+		useCallback(() => saveUserPreferences({ sidebarSortby: value }), [value]);
 
 	const setToAlphabetical = useHandleChange('alphabetical');
 	const setToActivity = useHandleChange('activity');
 
 	return (
 		<>
-			<OptionTitle style={style}>{t('Sort_By')}</OptionTitle>
+			<OptionTitle {...({ style } as any)}>{t('Sort_By')}</OptionTitle>
 			<ul className='rc-popover__list'>
 				<ListItem
 					icon={'clock'}

apps/meteor/client/components/SortList/ViewModeList.tsx

@@ -1,5 +1,5 @@
 import { ToggleSwitch, RadioButton, OptionTitle } from '@rocket.chat/fuselage';
-import React, { useCallback } from 'react';
+import React, { useCallback, ReactElement } from 'react';
 
 import { useMethod } from '../../contexts/ServerContext';
 import { useTranslation } from '../../contexts/TranslationContext';
@@ -15,14 +15,15 @@ const checkBoxStyle = {
 	paddingInlineStart: '24px',
 };
 
-function ViewModeList() {
+function ViewModeList(): ReactElement {
 	const t = useTranslation();
 
 	const saveUserPreferences = useMethod('saveUserPreferences');
 
-	const useHandleChange = (value) => useCallback(() => saveUserPreferences({ sidebarViewMode: value }), [value]);
+	const useHandleChange = (value: 'medium' | 'extended' | 'condensed'): (() => void) =>
+		useCallback(() => saveUserPreferences({ sidebarViewMode: value }), [value]);
 
-	const sidebarViewMode = useUserPreference('sidebarViewMode', 'extended');
+	const sidebarViewMode = useUserPreference<'medium' | 'extended' | 'condensed'>('sidebarViewMode', 'extended');
 	const sidebarDisplayAvatar = useUserPreference('sidebarDisplayAvatar', false);
 
 	const setToExtended = useHandleChange('extended');
@@ -36,7 +37,7 @@ function ViewModeList() {
 
 	return (
 		<>
-			<OptionTitle style={style}>{t('Display')}</OptionTitle>
+			<OptionTitle {...({ style } as any)}>{t('Display')}</OptionTitle>
 			<ul className='rc-popover__list'>
 				<ListItem
 					icon={'extended-view'}

apps/meteor/client/components/Subtitle.tsx

@@ -1,7 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
-function Subtitle(props) {
+// @deprecated
+function Subtitle(props: { children: ReactElement }): ReactElement {
 	return <Box color='default' fontFamily='sans' fontScale='h4' marginBlockEnd='x8' withRichContent {...props} />;
 }
 

apps/meteor/client/contexts/ServerContext/methods.ts

@@ -1,6 +1,7 @@
 import type { IRoom, ISetting, IUser } from '@rocket.chat/core-typings';
 import type { DeleteWriteOpResultObject } from 'mongodb';
 
+import { ILicenseTag } from '../../../ee/app/license/definitions/ILicenseTag';
 import { AddWebdavAccountMethod } from './methods/addWebdavAccount';
 import { FollowMessageMethod } from './methods/followMessage';
 import { GetReadReceiptsMethod } from './methods/getReadReceipts';
@@ -78,7 +79,7 @@ export type ServerMethods = {
 	'jitsi:updateTimeout': (...args: any[]) => any;
 	'leaveRoom': (...args: any[]) => any;
 	'license:getModules': () => string[];
-	'license:getTags': (...args: any[]) => any;
+	'license:getTags': () => ILicenseTag[];
 	'livechat:addMonitor': (...args: any[]) => any;
 	'livechat:changeLivechatStatus': (...args: any[]) => any;
 	'livechat:closeRoom': (...args: any[]) => any;

apps/meteor/client/lib/createSidebarItems.ts

@@ -4,6 +4,7 @@ type SidebarItem = {
 	i18nLabel: string;
 	href?: string;
 	icon?: string;
+	tag?: 'Alpha';
 	permissionGranted?: boolean | (() => boolean);
 };
 

apps/meteor/client/views/admin/sidebarItems.ts

@@ -10,67 +10,67 @@ export const {
 		href: 'admin-info',
 		i18nLabel: 'Info',
 		icon: 'info-circled',
-		permissionGranted: () => hasPermission('view-statistics'),
+		permissionGranted: (): boolean => hasPermission('view-statistics'),
 	},
 	{
 		href: 'admin-import',
 		i18nLabel: 'Import',
 		icon: 'import',
-		permissionGranted: () => hasPermission('run-import'),
+		permissionGranted: (): boolean => hasPermission('run-import'),
 	},
 	{
 		href: 'admin-users',
 		i18nLabel: 'Users',
 		icon: 'team',
-		permissionGranted: () => hasPermission('view-user-administration'),
+		permissionGranted: (): boolean => hasPermission('view-user-administration'),
 	},
 	{
 		href: 'admin-rooms',
 		i18nLabel: 'Rooms',
 		icon: 'hashtag',
-		permissionGranted: () => hasPermission('view-room-administration'),
+		permissionGranted: (): boolean => hasPermission('view-room-administration'),
 	},
 	{
 		href: 'invites',
 		i18nLabel: 'Invites',
 		icon: 'user-plus',
-		permissionGranted: () => hasPermission('create-invite-links'),
+		permissionGranted: (): boolean => hasPermission('create-invite-links'),
 	},
 	{
 		icon: 'cloud-plus',
 		href: 'cloud',
 		i18nLabel: 'Connectivity_Services',
-		permissionGranted: () => hasPermission('manage-cloud'),
+		permissionGranted: (): boolean => hasPermission('manage-cloud'),
 	},
 	{
 		href: 'admin-view-logs',
 		i18nLabel: 'View_Logs',
 		icon: 'post',
-		permissionGranted: () => hasPermission('view-logs'),
+		permissionGranted: (): boolean => hasPermission('view-logs'),
 	},
 	{
 		href: 'custom-sounds',
 		i18nLabel: 'Custom_Sounds',
 		icon: 'volume',
-		permissionGranted: () => hasPermission('manage-sounds'),
+		permissionGranted: (): boolean => hasPermission('manage-sounds'),
 	},
 	{
 		icon: 'discover',
 		href: 'federation-dashboard',
 		i18nLabel: 'Federation Dashboard',
-		permissionGranted: () => hasPermission('view-federation-data'),
+		permissionGranted: (): boolean => hasPermission('view-federation-data'),
 	},
 	{
 		icon: 'cube',
 		href: 'admin-marketplace',
 		i18nLabel: 'Apps',
-		permissionGranted: () => hasPermission('manage-apps'),
+		permissionGranted: (): boolean => hasPermission('manage-apps'),
 	},
 	{
 		icon: 'mail',
 		href: 'admin-email-inboxes',
 		i18nLabel: 'Email_Inboxes',
 		tag: 'Alpha',
-		permissionGranted: () => hasPermission('manage-email-inbox'),
+		permissionGranted: (): boolean => hasPermission('manage-email-inbox'),
 	},
 ]);

apps/meteor/client/views/directory/ChannelsTab.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { usePermission } from '../../contexts/AuthorizationContext';
 import NotAuthorizedPage from '../notAuthorized/NotAuthorizedPage';
 import ChannelsTable from './ChannelsTable';
 
-function ChannelsTab(props) {
+function ChannelsTab(): ReactElement {
 	const canViewPublicRooms = usePermission('view-c-room');
 
 	if (canViewPublicRooms) {
-		return <ChannelsTable {...props} />;
+		return <ChannelsTable />;
 	}
 
 	return <NotAuthorizedPage />;

apps/meteor/client/views/directory/DirectoryPage.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from '@rocket.chat/fuselage';
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, ReactElement } from 'react';
 
 import Page from '../../components/Page';
 import { useCurrentRoute, useRoute, useRouteParameter } from '../../contexts/RouterContext';
@@ -9,10 +9,10 @@ import ChannelsTab from './ChannelsTab';
 import TeamsTab from './TeamsTab';
 import UserTab from './UserTab';
 
-function DirectoryPage() {
+function DirectoryPage(): ReactElement {
 	const t = useTranslation();
 
-	const defaultTab = useSetting('Accounts_Directory_DefaultView');
+	const defaultTab = String(useSetting('Accounts_Directory_DefaultView'));
 	const federationEnabled = useSetting('FEDERATION_Enabled');
 	const [routeName] = useCurrentRoute();
 	const tab = useRouteParameter('tab');
@@ -28,7 +28,7 @@ function DirectoryPage() {
 		}
 	}, [routeName, directoryRoute, tab, federationEnabled, defaultTab]);
 
-	const handleTabClick = useCallback((tab) => () => directoryRoute.push({ tab }), [directoryRoute]);
+	const handleTabClick = useCallback((tab) => (): void => directoryRoute.push({ tab }), [directoryRoute]);
 
 	return (
 		<Page>
@@ -50,10 +50,10 @@ function DirectoryPage() {
 				)}
 			</Tabs>
 			<Page.Content>
-				{(tab === 'users' && <UserTab />) ||
-					(tab === 'channels' && <ChannelsTab />) ||
-					(tab === 'teams' && <TeamsTab />) ||
-					(federationEnabled && tab === 'external' && <UserTab workspace='external' />)}
+				{tab === 'users' && <UserTab />}
+				{tab === 'channels' && <ChannelsTab />}
+				{tab === 'teams' && <TeamsTab />}
+				{federationEnabled && tab === 'external' && <UserTab workspace='external' />}
 			</Page.Content>
 		</Page>
 	);

apps/meteor/client/views/directory/TeamsTab.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { usePermission } from '../../contexts/AuthorizationContext';
 import NotAuthorizedPage from '../notAuthorized/NotAuthorizedPage';
 import TeamsTable from './TeamsTable';
 
-function TeamsTab(props) {
+function TeamsTab(): ReactElement {
 	const canViewPublicRooms = usePermission('view-c-room');
 
 	if (canViewPublicRooms) {
-		return <TeamsTable {...props} />;
+		return <TeamsTable />;
 	}
 
 	return <NotAuthorizedPage />;

apps/meteor/client/views/directory/UserTab.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { usePermission } from '../../contexts/AuthorizationContext';
 import NotAuthorizedPage from '../notAuthorized/NotAuthorizedPage';
 import UserTable from './UserTable';
 
-function UserTab(props) {
+function UserTab(props: { workspace?: 'external' | 'local' }): ReactElement {
 	const canViewOutsideRoom = usePermission('view-outside-room');
 	const canViewDM = usePermission('view-d-room');
 

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -616,6 +616,7 @@
   "Available_agents": "Available agents",
   "Available_departments": "Available Departments",
   "Avatar": "Avatar",
+  "Avatars": "Avatars",
   "Avatar_changed_successfully": "Avatar changed successfully",
   "Avatar_URL": "Avatar URL",
   "Avatar_format_invalid": "Invalid Format. Only image type is allowed",