chore: Reduce complexity to infer IconName type (#29881)

apps/meteor/app/ui-message/client/messageBox/messageBoxFormatting.ts

-import type { Icon } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import type { ComponentProps } from 'react';
+import type { Keys as IconName } from '@rocket.chat/icons';
 
 import { settings } from '../../../settings/client';
 
 export type FormattingButton =
 	| {
 			label: TranslationKey;
-			icon: ComponentProps<typeof Icon>['name'];
+			icon: IconName;
 			pattern: string;
 			// text?: () => string | undefined;
 			command?: string;

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

 import type { IUIActionButton, IUActionButtonWhen } from '@rocket.chat/apps-engine/definition/ui/IUIActionButtonDescriptor';
 import type { UserStatus } from '@rocket.chat/core-typings';
 import type { TranslationKey, LocationPathname } from '@rocket.chat/ui-contexts';
-import type { Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { Keys as IconName } from '@rocket.chat/icons';
 
 import { sdk } from '../../../utils/client/lib/SDKClient';
 
@@ -18,7 +17,7 @@ export interface IAppAccountBoxItem extends IUIActionButton {
 
 export type AccountBoxItem = {
 	name: TranslationKey;
-	icon: ComponentProps<typeof Icon>['name'];
+	icon: IconName;
 	href: LocationPathname;
 	sideNav?: string;
 	condition: () => boolean;

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

-import type { ComponentProps, ContextType } from 'react';
+import type { ContextType } from 'react';
 import mem from 'mem';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
-import type { Icon } from '@rocket.chat/fuselage';
 import type { IMessage, IUser, ISubscription, IRoom, SettingValue, Serialized, ITranslatedMessage } from '@rocket.chat/core-typings';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import type { Keys as IconName } from '@rocket.chat/icons';
 
 import { Messages, ChatRoom, Subscriptions } from '../../../models/client';
 import { roomCoordinator } from '../../../../client/lib/rooms/roomCoordinator';
@@ -48,7 +48,7 @@ type MessageActionConditionProps = {
 
 export type MessageActionConfig = {
 	id: string;
-	icon: ComponentProps<typeof Icon>['name'];
+	icon: IconName;
 	variant?: 'danger' | 'success' | 'warning';
 	label: TranslationKey;
 	order?: number;

apps/meteor/client/components/GenericModal/GenericModal.tsx

-import type { Icon } from '@rocket.chat/fuselage';
 import { Button, Modal } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { FC, ComponentProps, ReactElement, ReactNode } from 'react';
 import React from 'react';
@@ -15,14 +15,14 @@ type GenericModalProps = RequiredModalProps & {
 	cancelText?: ReactNode;
 	confirmText?: ReactNode;
 	title?: string | ReactElement;
-	icon?: ComponentProps<typeof Icon>['name'] | ReactElement | null;
+	icon?: IconName | ReactElement | null;
 	confirmDisabled?: boolean;
 	tagline?: ReactNode;
 	onCancel?: () => Promise<void> | void;
 	onClose?: () => Promise<void> | void;
 } & Omit<ComponentProps<typeof Modal>, 'title'>;
 
-const iconMap: Record<string, ComponentProps<typeof Icon>['name']> = {
+const iconMap: Record<string, IconName> = {
 	danger: 'modal-warning',
 	warning: 'modal-warning',
 	info: 'info',

apps/meteor/client/components/GenericNoResults/GenericNoResults.tsx

-import type { Icon } from '@rocket.chat/fuselage';
 import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ComponentProps } from 'react';
 import React from 'react';
 
 type GenericNoResultsProps = {
-	icon?: ComponentProps<typeof Icon>['name'];
+	icon?: IconName;
 	title?: string;
 	description?: string;
 	buttonTitle?: string;

apps/meteor/client/components/InfoPanel/InfoPanelAction.tsx

 import { Icon, Button } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 type InfoPanelActionProps = Omit<ComponentProps<typeof Button>, 'label'> & {
-	icon?: ComponentProps<typeof Icon>['name'];
+	icon?: IconName;
 	label: ReactNode;
 };
 

apps/meteor/client/components/InfoPanel/InfoPanelTitle.tsx

 import { Box, Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, FC, ReactNode } from 'react';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 type InfoPanelTitleProps = {
@@ -7,7 +8,7 @@ type InfoPanelTitleProps = {
 	icon: ReactNode;
 };
 
-const isValidIcon = (icon: ReactNode): icon is ComponentProps<typeof Icon>['name'] => typeof icon === 'string';
+const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'string';
 
 const InfoPanelTitle: FC<InfoPanelTitleProps> = ({ title, icon }) => (
 	<Box display='flex' flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>

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

 import { Box, Icon, Tag } from '@rocket.chat/fuselage';
-import type { IconProps } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { FC, ReactElement } from 'react';
 import React, { memo } from 'react';
 
@@ -8,7 +8,7 @@ import SidebarGenericItem from './SidebarGenericItem';
 type SidebarNavigationItemProps = {
 	permissionGranted?: (() => boolean) | boolean;
 	pathSection: string;
-	icon?: IconProps['name'];
+	icon?: IconName;
 	label?: string;
 	tag?: string;
 	currentPath?: string;

apps/meteor/client/components/UpsellModal.tsx

-import type { Icon } from '@rocket.chat/fuselage';
 import { Box, Button, Modal } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactNode, ReactElement, ComponentProps } from 'react';
 import React from 'react';
@@ -12,7 +12,7 @@ type UpsellModalProps = {
 	title: string | ReactElement;
 	subtitle?: string | ReactElement;
 	description?: string | ReactElement;
-	icon?: ComponentProps<typeof Icon>['name'];
+	icon?: IconName;
 	img: ComponentProps<typeof Modal.HeroImage>['src'];
 	onCancel?: () => void;
 	onClose?: () => void;

apps/meteor/client/components/UserInfo/UserInfoAction.tsx

 import { Button, Icon } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { ReactElement, ComponentProps } from 'react';
 import React from 'react';
 
 type UserInfoActionProps = {
-	icon: ComponentProps<typeof Icon>['name'];
+	icon: IconName;
 } & ComponentProps<typeof Button>;
 
 const UserInfoAction = ({ icon, label, ...props }: UserInfoActionProps): ReactElement => (

apps/meteor/client/components/message/content/MessageActions.tsx

 import type { IMessage } from '@rocket.chat/core-typings';
-import type { IconProps } from '@rocket.chat/fuselage';
 import { Box, ButtonGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -10,7 +10,7 @@ import { actionLinks } from '../../../lib/actionLinks';
 import MessageAction from './actions/MessageAction';
 
 type MessageActionOptions = {
-	icon: IconProps['name'];
+	icon: IconName;
 	i18nLabel?: TranslationKey;
 	label?: string;
 	methodId: string;

apps/meteor/client/components/message/content/actions/MessageAction.tsx

-import type { IconProps } from '@rocket.chat/fuselage';
 import { Icon, Button } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-const resolveLegacyIcon = (legacyIcon: IconProps['name'] | `icon-${IconProps['name'] | 'videocam'}`): IconProps['name'] => {
+const resolveLegacyIcon = (legacyIcon: IconName | `icon-${IconName | 'videocam'}`): IconName => {
 	if (legacyIcon === 'icon-videocam') {
 		return 'video';
 	}
 
-	return legacyIcon?.replace(/^icon-/, '') as IconProps['name'];
+	return legacyIcon?.replace(/^icon-/, '') as IconName;
 };
 
 type MessageActionProps = {
-	icon: IconProps['name'];
+	icon: IconName;
 	i18nLabel?: TranslationKey;
 	label?: string;
 	methodId: string;

apps/meteor/client/lib/banners.ts

 import type { UiKitBannerPayload } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
-import type { Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps } from 'react';
+import type { Keys as IconName } from '@rocket.chat/icons';
 
 export type LegacyBannerPayload = {
 	id: string;
@@ -9,7 +8,7 @@ export type LegacyBannerPayload = {
 	title?: string | (() => string);
 	text?: string | (() => string);
 	html?: string | (() => string);
-	icon?: ComponentProps<typeof Icon>['name'];
+	icon?: IconName;
 	modifiers?: ('large' | 'danger')[];
 	timer?: number;
 	action?: () => Promise<void> | void;

apps/meteor/client/lib/createSidebarItems.ts

-import type { IconProps } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { LocationPathname } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 
 export type Item = {
 	i18nLabel: string;
 	href?: LocationPathname | `https://go.rocket.chat/i/${string}`;
-	icon?: IconProps['name'];
+	icon?: IconName;
 	tag?: 'Alpha' | 'Beta';
 	permissionGranted?: () => boolean;
 	pathSection?: string;

apps/meteor/client/sidebar/Item/Condensed.tsx

-import type { IconProps } from '@rocket.chat/fuselage';
 import { IconButton, Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { FC, ReactElement } from 'react';
 import React, { memo, useState } from 'react';
 
@@ -8,7 +8,7 @@ type CondensedProps = {
 	title: ReactElement | string;
 	titleIcon?: ReactElement;
 	avatar: ReactElement | boolean;
-	icon?: IconProps['name'];
+	icon?: IconName;
 	actions?: ReactElement;
 	href?: string;
 	unread?: boolean;

apps/meteor/client/sidebar/Item/Extended.tsx

-import type { IconProps } from '@rocket.chat/fuselage';
 import { Sidebar, IconButton } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { VFC } from 'react';
 import React, { memo, useState } from 'react';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
 
 type ExtendedProps = {
-	icon?: IconProps['name'];
+	icon?: IconName;
 	title?: React.ReactNode;
 	avatar?: React.ReactNode | boolean;
 	actions?: React.ReactNode;

apps/meteor/client/views/banners/UiKitBanner.tsx

 import type { UIKitActionEvent, UiKitBannerProps } from '@rocket.chat/core-typings';
 import { Banner, Icon } from '@rocket.chat/fuselage';
 import { kitContext, bannerParser, UiKitBanner as renderUiKitBannerBlocks } from '@rocket.chat/fuselage-ui-kit';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
-import type { FC, ComponentProps, ReactElement, ContextType } from 'react';
+import type { FC, ReactElement, ContextType } from 'react';
 import React, { useMemo } from 'react';
 
 import { useUIKitHandleAction } from '../../UIKit/hooks/useUIKitHandleAction';
@@ -19,7 +20,7 @@ const UiKitBanner: FC<UiKitBannerProps> = ({ payload }) => {
 
 	const icon = useMemo(() => {
 		if (state.icon) {
-			return <Icon name={state.icon as ComponentProps<typeof Icon>['name']} size={20} />;
+			return <Icon name={state.icon as IconName} size={20} />;
 		}
 
 		return null;

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

-import type { Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactNode } from 'react';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 export type Action = {
 	label: ReactNode;
-	icon?: ComponentProps<typeof Icon>['name'];
+	icon?: IconName;
 	action: () => void;
 };
 

apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx

-import type { IconProps } from '@rocket.chat/fuselage';
 import { Button, Icon } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import type { FC, HtmlHTMLAttributes } from 'react';
 import React from 'react';
 
 type AgentInfoActionProps = {
-	icon: IconProps['name'];
+	icon: IconName;
 	label?: string;
 	title?: string;
 } & Omit<HtmlHTMLAttributes<HTMLElement>, 'is'>;

apps/meteor/client/views/room/components/contextualBar/MessageListTab.tsx

 import type { IMessage } from '@rocket.chat/core-typings';
-import type { Icon } from '@rocket.chat/fuselage';
 import { Box, MessageDivider, Throbber } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import { useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
 import type { UseQueryResult } from '@tanstack/react-query';
-import type { ReactElement, ComponentProps, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useCallback } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -29,7 +29,7 @@ import { useRoomSubscription } from '../../contexts/RoomContext';
 import { useTabBarClose } from '../../contexts/ToolboxContext';
 
 type MessageListTabProps = {
-	iconName: ComponentProps<typeof Icon>['name'];
+	iconName: IconName;
 	title: ReactNode;
 	emptyResultMessage: string;
 	context: MessageActionContext;