Chore: Convert AdminSideBar to ts (#25372)

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

apps/meteor/app/ui-utils/client/lib/SideNav.ts

@@ -27,7 +27,7 @@ export const SideNav = new (class extends Emitter<{
 
 	private flexNav: JQuery<HTMLElement>;
 
-	toggleFlex(status: 1 | -1, callback: () => void): void {
+	toggleFlex(status: 1 | -1, callback?: () => void): void {
 		if (this.animating === true) {
 			return;
 		}

apps/meteor/client/views/admin/sidebar/AdminSidebar.js → apps/meteor/client/views/admin/sidebar/AdminSidebar.tsx

-import React, { useCallback, useMemo, useEffect, memo } from 'react';
+import React, { useCallback, useMemo, useEffect, memo, FC } from 'react';
 
 import { menu, SideNav } from '../../../../app/ui-utils/client';
 import PlanTag from '../../../components/PlanTag';
@@ -11,7 +11,7 @@ import SettingsProvider from '../../../providers/SettingsProvider';
 import AdminSidebarPages from './AdminSidebarPages';
 import AdminSidebarSettings from './AdminSidebarSettings';
 
-function AdminSidebar() {
+const AdminSidebar: FC = () => {
 	const t = useTranslation();
 
 	const canViewSettings = useAtLeastOnePermission(
@@ -28,7 +28,8 @@ function AdminSidebar() {
 	}, []);
 
 	const currentRoute = useCurrentRoute();
-	const currentPath = useRoutePath(...currentRoute);
+	const [currentRouteName, currentRouteParams, currentQueryStringParams] = currentRoute;
+	const currentPath = useRoutePath(currentRouteName || '', currentRouteParams, currentQueryStringParams);
 	const [, , , currentRouteGroupName] = currentRoute;
 
 	useEffect(() => {
@@ -50,12 +51,12 @@ function AdminSidebar() {
 					}
 				/>
 				<Sidebar.Content>
-					<AdminSidebarPages currentPath={currentPath} />
-					{canViewSettings && <AdminSidebarSettings currentPath={currentPath} />}
+					<AdminSidebarPages currentPath={currentPath || ''} />
+					{canViewSettings && <AdminSidebarSettings currentPath={currentPath || ''} />}
 				</Sidebar.Content>
 			</Sidebar>
 		</SettingsProvider>
 	);
-}
+};
 
 export default memo(AdminSidebar);

apps/meteor/client/views/omnichannel/components/Field.js → apps/meteor/client/views/omnichannel/components/Field.tsx

 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Field = ({ children }) => <Box mb='x16'>{children}</Box>;
+const Field: FC = ({ children }) => <Box mb='x16'>{children}</Box>;
 
 export default Field;

apps/meteor/client/views/omnichannel/components/Label.js

-import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Label = (props) => <Box mbe='x8' fontScale='p2m' color='default' {...props} />;
-
-export default Label;

apps/meteor/client/views/omnichannel/components/Label.tsx

+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const Label: FC<ComponentProps<typeof Box>> = (props) => <Box mbe='x8' fontScale='p2m' color='default' {...props} />;
+
+export default Label;