Chore: Convert components/sidebar to TS (#25429)

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

apps/meteor/client/components/Sidebar/Content.js → apps/meteor/client/components/Sidebar/Content.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
 import ScrollableContentWrapper from '../ScrollableContentWrapper';
 
-const Content = ({ children, ...props }) => (
+const Content: FC = ({ children, ...props }) => (
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} overflow='hidden'>
 		<ScrollableContentWrapper {...props}>
 			<Box display='flex' flexDirection='column' w='full' h='full'>

apps/meteor/client/components/Sidebar/Header.js → apps/meteor/client/components/Sidebar/Header.tsx

@@ -1,7 +1,12 @@
 import { Box, ActionButton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC, ReactElement } from 'react';
 
-const Header = ({ title, onClose, children = undefined, ...props }) => (
+type HeaderProps = {
+	title?: ReactElement | string;
+	onClose?: () => void;
+};
+
+const Header: FC<HeaderProps> = ({ title, onClose, children, ...props }) => (
 	<Box is='header' display='flex' flexDirection='column' pb='x16' {...props}>
 		{(title || onClose) && (
 			<Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>

apps/meteor/client/components/Sidebar/Sidebar.js → apps/meteor/client/components/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Sidebar = ({ children, ...props }) => (
+const Sidebar: FC = ({ children, ...props }) => (
 	<Box display='flex' flexDirection='column' h='full' justifyContent='stretch' {...props}>
 		{children}
 	</Box>

apps/meteor/client/components/Sidebar/GenericItem.tsx → apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx

@@ -3,8 +3,8 @@ import { Box } from '@rocket.chat/fuselage';
 import type colors from '@rocket.chat/fuselage-tokens/colors';
 import React, { memo, ReactElement, ReactNode } from 'react';
 
-type GenericItemProps = {
-	href: string;
+type SidebarGenericItemProps = {
+	href?: string;
 	active?: boolean;
 	children: ReactNode;
 	customColors?: {
@@ -15,7 +15,14 @@ type GenericItemProps = {
 	textColor?: string;
 };
 
-const GenericItem = ({ href, active, children, customColors, textColor = 'default', ...props }: GenericItemProps): ReactElement => (
+const SidebarGenericItem = ({
+	href,
+	active,
+	children,
+	customColors,
+	textColor = 'default',
+	...props
+}: SidebarGenericItemProps): ReactElement => (
 	<Box
 		is='a'
 		color={textColor}
@@ -28,7 +35,7 @@ const GenericItem = ({ href, active, children, customColors, textColor = 'defaul
 				${customColors ? `background-color: ${customColors.default} !important;` : ''}
 				&:hover,
 				&:focus,
-				
+
 				&.active:hover {
 					background-color: ${customColors?.hover || 'var(--sidebar-background-light-hover)'} !important;
 				}
@@ -46,4 +53,4 @@ const GenericItem = ({ href, active, children, customColors, textColor = 'defaul
 	</Box>
 );
 
-export default memo(GenericItem);
+export default memo(SidebarGenericItem);

apps/meteor/client/components/Sidebar/SidebarItemsAssembler.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { memo, FC } from 'react';
+
+import { SidebarItem } from '../../lib/createSidebarItems';
+import SidebarNavigationItem from './SidebarNavigationItem';
+
+type SidebarItemsAssemblerProps = {
+	items: SidebarItem[];
+	currentPath?: string;
+};
+
+const SidebarItemsAssembler: FC<SidebarItemsAssemblerProps> = ({ items, currentPath }) => {
+	const t = useTranslation();
+	return (
+		<>
+			{items.map(({ href, pathSection, i18nLabel, name, icon, permissionGranted, pathGroup, tag }) => (
+				<SidebarNavigationItem
+					permissionGranted={permissionGranted}
+					pathGroup={pathGroup || ''}
+					pathSection={href || pathSection || ''}
+					icon={icon}
+					label={t((i18nLabel || name) as Parameters<typeof t>[0])}
+					key={i18nLabel || name}
+					currentPath={currentPath}
+					tag={t.has(tag as Parameters<typeof t>[0]) ? t(tag as Parameters<typeof t>[0]) : undefined}
+				/>
+			))}
+			;
+		</>
+	);
+};
+
+export default memo(SidebarItemsAssembler);

apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx

@@ -0,0 +1,42 @@
+import { Box, Icon, IconProps, Tag } from '@rocket.chat/fuselage';
+import { useRoutePath } from '@rocket.chat/ui-contexts';
+import React, { memo, useMemo, FC } from 'react';
+
+import SidebarGenericItem from './SidebarGenericItem';
+
+type SidebarNavigationItemProps = {
+	permissionGranted?: (() => boolean) | boolean;
+	pathGroup: string;
+	pathSection: string;
+	icon?: IconProps['name'];
+	label?: string;
+	tag?: string;
+	currentPath?: string;
+};
+
+const SidebarNavigationItem: FC<SidebarNavigationItemProps> = ({
+	permissionGranted,
+	pathGroup,
+	pathSection,
+	icon,
+	label,
+	currentPath,
+	tag,
+}) => {
+	const params = useMemo(() => ({ group: pathGroup }), [pathGroup]);
+	const path = useRoutePath(pathSection, params);
+	const isActive = path === currentPath || false;
+	if (permissionGranted === false || (typeof permissionGranted === 'function' && !permissionGranted())) {
+		return null;
+	}
+	return (
+		<SidebarGenericItem active={isActive} href={path} key={path}>
+			{icon && <Icon name={icon} size='x20' mi='x4' />}
+			<Box withTruncatedText fontScale='p2' mi='x4' color='info'>
+				{label} {tag && <Tag style={{ display: 'inline', backgroundColor: '#000', color: '#FFF', marginLeft: 4 }}>{tag}</Tag>}
+			</Box>
+		</SidebarGenericItem>
+	);
+};
+
+export default memo(SidebarNavigationItem);

apps/meteor/client/components/Sidebar/index.ts

@@ -1,16 +1,16 @@
 import Content from './Content';
-import GenericItem from './GenericItem';
 import Header from './Header';
-import ItemsAssembler from './ItemsAssembler';
 import ListItem from './ListItem';
-import NavigationItem from './NavigationItem';
 import Sidebar from './Sidebar';
+import GenericItem from './SidebarGenericItem';
+import SidebarItemsAssembler from './SidebarItemsAssembler';
+import NavigationItem from './SidebarNavigationItem';
 
 export default Object.assign(Sidebar, {
 	Content,
 	Header,
 	GenericItem,
 	NavigationItem,
-	ItemsAssembler,
+	ItemsAssembler: SidebarItemsAssembler,
 	ListItem,
 });

apps/meteor/client/lib/createSidebarItems.ts

@@ -1,11 +1,15 @@
+import { IconProps } from '@rocket.chat/fuselage';
 import type { Subscription } from 'use-subscription';
 
-type SidebarItem = {
+export type SidebarItem = {
 	i18nLabel: string;
 	href?: string;
-	icon?: string;
+	icon?: IconProps['name'];
 	tag?: 'Alpha';
 	permissionGranted?: boolean | (() => boolean);
+	pathSection?: string;
+	pathGroup?: string;
+	name?: string;
 };
 
 export const createSidebarItems = (

apps/meteor/client/views/account/sidebarItems.js → apps/meteor/client/views/account/sidebarItems.ts

@@ -18,27 +18,27 @@ export const {
 		pathGroup: 'profile',
 		i18nLabel: 'Profile',
 		icon: 'user',
-		permissionGranted: () => settings.get('Accounts_AllowUserProfileChange'),
+		permissionGranted: (): boolean => settings.get('Accounts_AllowUserProfileChange'),
 	},
 	{
 		pathSection: 'account',
 		pathGroup: 'security',
 		i18nLabel: 'Security',
 		icon: 'lock',
-		permissionGranted: () => settings.get('Accounts_TwoFactorAuthentication_Enabled') || settings.get('E2E_Enable'),
+		permissionGranted: (): boolean => settings.get('Accounts_TwoFactorAuthentication_Enabled') || settings.get('E2E_Enable'),
 	},
 	{
 		pathSection: 'account',
 		pathGroup: 'integrations',
 		i18nLabel: 'Integrations',
 		icon: 'code',
-		permissionGranted: () => settings.get('Webdav_Integration_Enabled'),
+		permissionGranted: (): boolean => settings.get('Webdav_Integration_Enabled'),
 	},
 	{
 		pathSection: 'account',
 		pathGroup: 'tokens',
 		i18nLabel: 'Personal_Access_Tokens',
 		icon: 'key',
-		permissionGranted: () => hasPermission('create-personal-access-tokens'),
+		permissionGranted: (): boolean => hasPermission('create-personal-access-tokens'),
 	},
 ]);

apps/meteor/client/views/admin/sidebar/AdminSidebarPages.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { memo, FC } from 'react';
 import { useSubscription } from 'use-subscription';
 
-import Sidebar from '../../../components/Sidebar';
+import SidebarItemsAssembler from '../../../components/Sidebar/SidebarItemsAssembler';
 import { useUpgradeTabParams } from '../../hooks/useUpgradeTabParams';
 import { itemsSubscription } from '../sidebarItems';
 import UpgradeTab from './UpgradeTab';
@@ -18,7 +18,7 @@ const AdminSidebarPages: FC<AdminSidebarPagesProps> = ({ currentPath }) => {
 	return (
 		<Box display='flex' flexDirection='column' flexShrink={0} pb='x8'>
 			{!isLoading && tabType && <UpgradeTab type={tabType} currentPath={currentPath} trialEndDate={trialEndDate} />}
-			<Sidebar.ItemsAssembler items={items} currentPath={currentPath} />
+			<SidebarItemsAssembler items={items} currentPath={currentPath} />
 		</Box>
 	);
 };

apps/meteor/client/views/omnichannel/sidebar/OmnichannelSidebar.tsx

@@ -4,6 +4,7 @@ import { useSubscription } from 'use-subscription';
 
 import { menu, SideNav } from '../../../../app/ui-utils/client';
 import Sidebar from '../../../components/Sidebar';
+import SidebarItemsAssemblerProps from '../../../components/Sidebar/SidebarItemsAssembler';
 import { isLayoutEmbedded } from '../../../lib/utils/isLayoutEmbedded';
 import SettingsProvider from '../../../providers/SettingsProvider';
 import { itemsSubscription } from '../sidebarItems';
@@ -36,7 +37,7 @@ const OmnichannelSidebar: FC = () => {
 			<Sidebar>
 				<Sidebar.Header onClose={closeOmnichannelFlex} title={<>{t('Omnichannel')}</>} />
 				<Sidebar.Content>
-					<Sidebar.ItemsAssembler items={items} currentPath={currentPath} />
+					<SidebarItemsAssemblerProps items={items} currentPath={currentPath} />
 				</Sidebar.Content>
 			</Sidebar>
 		</SettingsProvider>

apps/meteor/client/views/omnichannel/sidebarItems.js → apps/meteor/client/views/omnichannel/sidebarItems.ts

@@ -9,66 +9,66 @@ export const {
 	{
 		href: 'omnichannel/current',
 		i18nLabel: 'Current_Chats',
-		permissionGranted: () => hasPermission('view-livechat-current-chats'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-current-chats'),
 	},
 	{
 		href: 'omnichannel-analytics',
 		i18nLabel: 'Analytics',
-		permissionGranted: () => hasPermission('view-livechat-analytics'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-analytics'),
 	},
 	{
 		href: 'omnichannel-realTime',
 		i18nLabel: 'Real_Time_Monitoring',
-		permissionGranted: () => hasPermission('view-livechat-real-time-monitoring'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-real-time-monitoring'),
 	},
 	{
 		href: 'omnichannel/managers',
 		i18nLabel: 'Managers',
-		permissionGranted: () => hasPermission('manage-livechat-managers'),
+		permissionGranted: (): boolean => hasPermission('manage-livechat-managers'),
 	},
 	{
 		href: 'omnichannel/agents',
 		i18nLabel: 'Agents',
-		permissionGranted: () => hasPermission('manage-livechat-agents'),
+		permissionGranted: (): boolean => hasPermission('manage-livechat-agents'),
 	},
 	{
 		href: 'omnichannel/departments',
 		i18nLabel: 'Departments',
-		permissionGranted: () => hasPermission('view-livechat-departments'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-departments'),
 	},
 	{
 		href: 'omnichannel-customfields',
 		i18nLabel: 'Custom_Fields',
-		permissionGranted: () => hasPermission('view-livechat-customfields'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-customfields'),
 	},
 	{
 		href: 'omnichannel-triggers',
 		i18nLabel: 'Livechat_Triggers',
-		permissionGranted: () => hasPermission('view-livechat-triggers'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-triggers'),
 	},
 	{
 		href: 'omnichannel-installation',
 		i18nLabel: 'Livechat_Installation',
-		permissionGranted: () => hasPermission('view-livechat-installation'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-installation'),
 	},
 	{
 		href: 'omnichannel-appearance',
 		i18nLabel: 'Livechat_Appearance',
-		permissionGranted: () => hasPermission('view-livechat-appearance'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-appearance'),
 	},
 	{
 		href: 'omnichannel-webhooks',
 		i18nLabel: 'Webhooks',
-		permissionGranted: () => hasPermission('view-livechat-webhooks'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-webhooks'),
 	},
 	{
 		href: 'omnichannel-facebook',
 		i18nLabel: 'Facebook Messenger',
-		permissionGranted: () => hasPermission('view-livechat-facebook'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-facebook'),
 	},
 	{
 		href: 'omnichannel-businessHours',
 		i18nLabel: 'Business_Hours',
-		permissionGranted: () => hasPermission('view-livechat-business-hours'),
+		permissionGranted: (): boolean => hasPermission('view-livechat-business-hours'),
 	},
 ]);