From 539b8aba10cadf61448617ef96fffe30b17b850b Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 15 Jul 2022 10:55:09 -0300
Subject: [PATCH] chore: rewrite VerticalBarOldActions

---
 .../ui-message/client/actionButtons/tabbar.ts |  2 +-
 .../room/components/VerticalBarOldActions.js  | 27 -------------
 .../room/components/VerticalBarOldActions.tsx | 38 +++++++++++++++++++
 .../client/views/room/lib/Toolbox/index.tsx   |  4 +-
 4 files changed, 41 insertions(+), 30 deletions(-)
 delete mode 100644 apps/meteor/client/views/room/components/VerticalBarOldActions.js
 create mode 100644 apps/meteor/client/views/room/components/VerticalBarOldActions.tsx

diff --git a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts b/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
index 69fc85aa679f..bb62cc79864b 100644
--- a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
+++ b/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
diff --git a/apps/meteor/client/views/room/components/VerticalBarOldActions.js b/apps/meteor/client/views/room/components/VerticalBarOldActions.js
deleted file mode 100644
index 28d911241bbc..000000000000
--- a/apps/meteor/client/views/room/components/VerticalBarOldActions.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
-
-import VerticalBar from '../../../components/VerticalBar';
-import { useTabBarClose } from '../providers/ToolboxProvider';
-import BlazeTemplate from './BlazeTemplate';
-
-const VerticalBarOldActions = ({ name, icon, tabBar, title, ...props }) => {
-	const close = useTabBarClose();
-	const t = useTranslation();
-
-	return (
-		<>
-			{' '}
-			<VerticalBar.Header>
-				<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} {...props} />
-			</VerticalBar.Content>
-		</>
-	);
-};
-
-export default VerticalBarOldActions;
diff --git a/apps/meteor/client/views/room/components/VerticalBarOldActions.tsx b/apps/meteor/client/views/room/components/VerticalBarOldActions.tsx
new file mode 100644
index 000000000000..9bdfa68395ed
--- /dev/null
+++ b/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;
diff --git a/apps/meteor/client/views/room/lib/Toolbox/index.tsx b/apps/meteor/client/views/room/lib/Toolbox/index.tsx
index 9e89ba05d4b2..943fdd44efcc 100644
--- a/apps/meteor/client/views/room/lib/Toolbox/index.tsx
+++ b/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;