Chore: Rewrite VerticalBarOldActions to TS

apps/meteor/app/ui-message/client/actionButtons/tabbar.ts

@@ -14,7 +14,7 @@ export const onAdded = (button: IUIActionButton): void =>
 		applyButtonFilters(button, room)
 			? {
 					id: button.actionId,
-					icon: '', // Apps won't provide icons for now
+					icon: undefined, // Apps won't provide icons for now
 					order: 300, // Make sure the button only shows up inside the room toolbox
 					title: t(Utilities.getI18nKeyForApp(button.labelI18n, button.appId)) as any,
 					// Filters were applied in the applyButtonFilters function

apps/meteor/client/views/room/components/VerticalBarOldActions.tsx

@@ -0,0 +1,38 @@
+import { IRoom } from '@rocket.chat/core-typings';
+import { Icon } from '@rocket.chat/fuselage';
+import { useTranslation, TranslationKey } from '@rocket.chat/ui-contexts';
+import React, { ReactElement, ComponentProps } from 'react';
+
+import VerticalBar from '../../../components/VerticalBar';
+import { ToolboxContextValue } from '../lib/Toolbox/ToolboxContext';
+import { useTabBarClose } from '../providers/ToolboxProvider';
+import BlazeTemplate from './BlazeTemplate';
+
+type VerticalBarOldActionsProps = {
+	name: string;
+	rid: IRoom['_id'];
+	_id: IRoom['_id'];
+	icon?: ComponentProps<typeof Icon>['name'];
+	tabBar: ToolboxContextValue['tabBar'];
+	title: TranslationKey;
+};
+
+const VerticalBarOldActions = ({ name, rid, icon, tabBar, title, ...props }: VerticalBarOldActionsProps): ReactElement => {
+	const close = useTabBarClose();
+	const t = useTranslation();
+
+	return (
+		<>
+			<VerticalBar.Header>
+				{icon && <VerticalBar.Icon name={icon} />}
+				<VerticalBar.Text>{t(title)}</VerticalBar.Text>
+				{close && <VerticalBar.Close onClick={close} />}
+			</VerticalBar.Header>
+			<VerticalBar.Content>
+				<BlazeTemplate flexShrink={1} overflow='hidden' name={name} tabBar={tabBar} rid={rid} {...props} />
+			</VerticalBar.Content>
+		</>
+	);
+};
+
+export default VerticalBarOldActions;

apps/meteor/client/views/room/lib/Toolbox/index.tsx

@@ -1,5 +1,5 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { Box, Option } from '@rocket.chat/fuselage';
+import { Box, Option, Icon } from '@rocket.chat/fuselage';
 import { TranslationKey } from '@rocket.chat/ui-contexts';
 import { FC, LazyExoticComponent, ReactNode, MouseEvent, ComponentProps } from 'react';
 
@@ -22,7 +22,7 @@ export type OptionRenderer = (props: OptionRendererProps) => ReactNode;
 
 export type ToolboxActionConfig = {
 	'id': string;
-	'icon': string;
+	'icon'?: ComponentProps<typeof Icon>['name'];
 	'title': TranslationKey;
 	'anonymous'?: boolean;
 	'data-tooltip'?: string;