Chore: Convert sidebar/header/actions (#25581)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

apps/meteor/client/sidebar/header/actions/CreateRoom.js → apps/meteor/client/sidebar/header/actions/CreateRoom.tsx

 import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage';
 import { useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
-import React, { useRef } from 'react';
+import React, { HTMLAttributes, useRef, VFC } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useDropdownVisibility } from '../hooks/useDropdownVisibility';
@@ -8,7 +8,7 @@ import CreateRoomList from './CreateRoomList';
 
 const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user'];
 
-const CreateRoom = (props) => {
+const CreateRoom: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 	const reference = useRef(null);
 	const target = useRef(null);
 	const { isVisible, toggle } = useDropdownVisibility({ reference, target });
@@ -19,13 +19,13 @@ const CreateRoom = (props) => {
 		<>
 			{showCreate && (
 				<Box ref={reference}>
-					<Sidebar.TopBar.Action {...props} icon='edit-rounded' onClick={toggle} />
+					<Sidebar.TopBar.Action {...props} icon='edit-rounded' onClick={(): void => toggle()} />
 				</Box>
 			)}
 			{isVisible &&
 				createPortal(
 					<Dropdown reference={reference} ref={target}>
-						<CreateRoomList closeList={() => toggle(false)} />
+						<CreateRoomList closeList={(): void => toggle(false)} />
 					</Dropdown>,
 					document.body,
 				)}

apps/meteor/client/sidebar/header/actions/CreateRoomList.js → apps/meteor/client/sidebar/header/actions/CreateRoomList.tsx

 import { OptionTitle } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useSetting, useAtLeastOnePermission, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { FC } from 'react';
 
 import { popover } from '../../../../app/ui-utils/client';
 import CreateDiscussion from '../../../components/CreateDiscussion';
@@ -19,7 +19,11 @@ const style = {
 	textTransform: 'uppercase',
 };
 
-const useReactModal = (Component) => {
+type CreateRoomListProps = {
+	closeList: () => void;
+};
+
+const useReactModal = (Component: FC<any>): ((e: React.MouseEvent<HTMLElement>) => void) => {
 	const setModal = useSetModal();
 
 	return useMutableCallback((e) => {
@@ -27,7 +31,7 @@ const useReactModal = (Component) => {
 
 		e.preventDefault();
 
-		const handleClose = () => {
+		const handleClose = (): void => {
 			setModal(null);
 		};
 
@@ -35,7 +39,7 @@ const useReactModal = (Component) => {
 	});
 };
 
-function CreateRoomList({ closeList }) {
+const CreateRoomList: FC<CreateRoomListProps> = ({ closeList }) => {
 	const t = useTranslation();
 
 	const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS);
@@ -52,7 +56,7 @@ function CreateRoomList({ closeList }) {
 
 	return (
 		<>
-			<OptionTitle pb='x8' style={style}>
+			<OptionTitle pb='x8' {...({ style } as any)}>
 				{t('Create_new')}
 			</OptionTitle>
 			<ul className='rc-popover__list'>
@@ -60,7 +64,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='hashtag'
 						text={t('Channel')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createChannel(e);
 							closeList();
 						}}
@@ -70,7 +74,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='team'
 						text={t('Team')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createTeam(e);
 							closeList();
 						}}
@@ -80,7 +84,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='balloon'
 						text={t('Direct_Messages')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createDirectMessage(e);
 							closeList();
 						}}
@@ -90,7 +94,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='discussion'
 						text={t('Discussion')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createDiscussion(e);
 							closeList();
 						}}
@@ -99,6 +103,6 @@ function CreateRoomList({ closeList }) {
 			</ul>
 		</>
 	);
-}
+};
 
 export default CreateRoomList;

apps/meteor/client/sidebar/header/actions/Directory.js → apps/meteor/client/sidebar/header/actions/Directory.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useRoute } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { HTMLAttributes, VFC } from 'react';
 
-const Directory = (props) => {
+const Directory: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 	const directoryRoute = useRoute('directory');
 	const { sidebar } = useLayout();
 	const handleDirectory = useMutableCallback(() => {

apps/meteor/client/sidebar/header/actions/Home.js → apps/meteor/client/sidebar/header/actions/Home.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useRoute, useSetting } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { HTMLAttributes, VFC } from 'react';
 
-const Home = (props) => {
+const SidebarHeaderActionHome: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 	const homeRoute = useRoute('home');
 	const { sidebar } = useLayout();
 	const showHome = useSetting('Layout_Show_Home_Button');
@@ -15,4 +15,4 @@ const Home = (props) => {
 	return showHome ? <Sidebar.TopBar.Action {...props} icon='home' onClick={handleHome} /> : null;
 };
 
-export default Home;
+export default SidebarHeaderActionHome;

apps/meteor/client/sidebar/header/actions/Login.js → apps/meteor/client/sidebar/header/actions/Login.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { useSessionDispatch, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { HTMLAttributes, VFC } from 'react';
 
-const Login = (props) => {
+const Login: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 	const setForceLogin = useSessionDispatch('forceLogin');
 	const t = useTranslation();
 
@@ -13,7 +13,7 @@ const Login = (props) => {
 			ghost={false}
 			icon='login'
 			title={t('Sign_in_to_start_talking')}
-			onClick={() => setForceLogin(true)}
+			onClick={(): void => setForceLogin(true)}
 		/>
 	);
 };

apps/meteor/client/sidebar/header/actions/Search.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback, useOutsideClick } from '@rocket.chat/fuselage-hooks';
-import React, { useState, useEffect, useRef, ReactElement, ComponentProps } from 'react';
+import React, { useState, useEffect, useRef, VFC, HTMLAttributes } from 'react';
 import tinykeys from 'tinykeys';
 
 import SearchList from '../../search/SearchList';
 
-type SearchProps = Omit<ComponentProps<typeof Sidebar.TopBar.Action>, 'icon'>;
-
-const Search = (props: SearchProps): ReactElement => {
+const Search: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 	const [searchOpen, setSearchOpen] = useState(false);
 
 	const ref = useRef<HTMLElement>(null);

apps/meteor/client/sidebar/header/actions/Sort.js → apps/meteor/client/sidebar/header/actions/Sort.tsx

 import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage';
-import React, { useRef } from 'react';
+import React, { VFC, useRef, HTMLAttributes } from 'react';
 import { createPortal } from 'react-dom';
 
 import SortList from '../../../components/SortList';
 import { useDropdownVisibility } from '../hooks/useDropdownVisibility';
 
-const Sort = (props) => {
+const Sort: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = (props) => {
 	const reference = useRef(null);
 	const target = useRef(null);
 	const { isVisible, toggle } = useDropdownVisibility({ reference, target });
@@ -13,7 +13,7 @@ const Sort = (props) => {
 	return (
 		<>
 			<Box ref={reference}>
-				<Sidebar.TopBar.Action {...props} icon='sort' onClick={toggle} />
+				<Sidebar.TopBar.Action {...props} icon='sort' onClick={(): void => toggle()} />
 			</Box>
 			{isVisible &&
 				createPortal(