refactor: Adjusts HeaderToolbarAction props (RocketChat#37108)

Author: dougfabris

apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx

@@ -21,7 +21,8 @@ const PlaceChatOnHoldModal = ({ onCancel, onOnHoldChat, confirm = onOnHoldChat,
 	const { t } = useTranslation();
 
 	return (
-		<Modal {...props} data-qa-id='on-hold-modal'>
+		// TODO: Replace Modal with GenericModal
+		<Modal {...props} aria-label={t('Omnichannel_onHold_Chat')}>
 			<ModalHeader>
 				<ModalIcon name='pause-unfilled' />
 				<ModalTitle>{t('Omnichannel_onHold_Chat')}</ModalTitle>

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

@@ -152,7 +152,11 @@ const CloseChatModal = ({ department, visitorEmail, onCancel, onConfirm }: Close
 
 	if (commentRequired || tagRequired || canSendTranscript) {
 		return (
-			<Modal wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(onSubmit)} {...props} />}>
+			// TODO: Replace Modal with GenericModal
+			<Modal
+				aria-label={t('Wrap_up_conversation')}
+				wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(onSubmit)} {...props} />}
+			>
 				<ModalHeader>
 					<ModalIcon name='baloon-close-top-right' />
 					<ModalTitle>{t('Wrap_up_conversation')}</ModalTitle>

apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx

@@ -39,7 +39,7 @@ export const useAppsRoomStarActions = () => {
 			order: 3,
 			renderToolboxItem: ({ id, icon, title, disabled, className }) => (
 				<GenericMenu
-					button={<HeaderToolbarAction />}
+					button={<HeaderToolbarAction icon={icon} />}
 					key={id}
 					title={title}
 					disabled={disabled}

apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx

@@ -45,16 +45,15 @@ export const useThreadRoomAction = () => {
 			icon: 'thread',
 			tabComponent: Threads,
 			order: 2,
-			renderToolboxItem: ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => (
+			renderToolboxItem: ({ id, className, icon, title, toolbox: { tab }, disabled, action, tooltip }) => (
 				<HeaderToolbarAction
 					key={id}
 					className={className}
-					index={index}
 					id={id}
 					icon={icon}
 					title={t(title)}
 					pressed={id === tab?.id}
-					action={action}
+					onClick={action}
 					disabled={disabled}
 					tooltip={tooltip}
 				>

apps/meteor/client/hooks/roomActions/useVideoCallRoomAction.tsx

@@ -51,7 +51,7 @@ export const useVideoCallRoomAction = () => {
 	const visible = groups.length > 0;
 	const allowed = visible && permittedToCallManagement && (!user?.username || !room.muted?.includes(user.username)) && !ownUser;
 	const disabled = federated || (!!room.ro && !permittedToPostReadonly) || room.archived;
-	const tooltip = disabled ? t('core.Video_Call_unavailable_for_this_type_of_room') : '';
+	const tooltip = disabled ? t('core.Video_Call_unavailable_for_this_type_of_room') : undefined;
 
 	const handleOpenVideoConf = useEffectEvent(async () => {
 		if (isCalling || isRinging) {

apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx

@@ -1,5 +1,6 @@
 import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
 import { Box, Dropdown, Option } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,9 +12,10 @@ type QuickActionOptionsProps = {
 	options: QuickActionsActionOptions;
 	action: (id: string) => void;
 	room: IOmnichannelRoom;
+	icon: IconName;
 };
 
-const QuickActionOptions = ({ options, room, action, ...props }: QuickActionOptionsProps) => {
+const QuickActionOptions = ({ options, room, action, icon, ...props }: QuickActionOptionsProps) => {
 	const { t } = useTranslation();
 	const reference = useRef(null);
 	const target = useRef(null);
@@ -26,7 +28,7 @@ const QuickActionOptions = ({ options, room, action, ...props }: QuickActionOpti
 
 	return (
 		<>
-			<HeaderToolbarAction ref={reference} onClick={(): void => toggle()} secondary={isVisible} {...props} />
+			<HeaderToolbarAction ref={reference} icon={icon} onClick={() => toggle()} secondary={isVisible} {...props} />
 			{isVisible && (
 				<Dropdown reference={reference} ref={target}>
 					{options.map(({ id, label, validate }) => {

apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx

@@ -28,15 +28,14 @@ const QuickActions = ({ className }: QuickActionsProps) => {
 					className,
 					index,
 					primary: false,
-					action,
 					room,
 				};
 
 				if (options) {
-					return <QuickActionOptions options={options} key={id} {...props} />;
+					return <QuickActionOptions key={id} action={action} options={options} {...props} />;
 				}
 
-				return <HeaderToolbarAction key={id} {...props} />;
+				return <HeaderToolbarAction key={id} onClick={() => action(id)} {...props} />;
 			})}
 			{quickActions.length > 0 && <HeaderToolbarDivider />}
 		</HeaderToolbar>

apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx

@@ -23,30 +23,27 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => {
 	const showKebabMenu = hiddenActions.length > 0;
 
 	const renderDefaultToolboxItem = useEffectEvent(
-		({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }: RenderToolboxItemParams) => {
+		({ id, className, icon, title, toolbox: { tab }, action, disabled, tooltip }: RenderToolboxItemParams) => {
 			return (
 				<HeaderToolbarAction
 					key={id}
 					className={className}
-					index={index}
-					id={id}
 					icon={icon}
 					title={t(title)}
 					pressed={id === tab?.id}
-					action={action}
+					onClick={action}
 					disabled={disabled}
 					tooltip={tooltip}
 				/>
 			);
 		},
 	);
 
-	const mapToToolboxItem = (action: RoomToolboxActionConfig, index: number) => {
+	const mapToToolboxItem = (action: RoomToolboxActionConfig) => {
 		return (action.renderToolboxItem ?? renderDefaultToolboxItem)?.({
 			...action,
 			action: action.action ?? (() => toolbox.openTab(action.id)),
 			className,
-			index,
 			toolbox,
 		});
 	};
@@ -56,7 +53,7 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => {
 			{featuredActions.map(mapToToolboxItem)}
 			{featuredActions.length > 0 && <HeaderToolbarDivider />}
 			{visibleActions.map(mapToToolboxItem)}
-			{showKebabMenu && <GenericMenu title={t('Options')} data-qa-id='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />}
+			{showKebabMenu && <GenericMenu title={t('Options')} sections={hiddenActions} placement='bottom-end' />}
 		</>
 	);
 };

apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx

@@ -32,16 +32,15 @@ const RoomToolboxE2EESetup = ({ className }: RoomToolboxE2EESetupProps) => {
 
 	return (
 		<>
-			{actions.map(({ id, icon, title, action, disabled, tooltip }, index) => (
+			{actions.map(({ id, icon, title, action, disabled, tooltip }) => (
 				<HeaderToolbarAction
 					key={id}
 					className={className}
-					index={index}
 					id={id}
 					icon={icon}
 					title={t(title)}
 					pressed={id === tab?.id}
-					action={action ?? (() => toolbox.openTab(id))}
+					onClick={action ?? (() => toolbox.openTab(id))}
 					disabled={disabled}
 					tooltip={tooltip}
 				/>

apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.spec.ts

@@ -48,12 +48,14 @@ const appsActions: RoomToolboxActionConfig[] = [
 		title: 'app-42212581-0966-44aa-8366-b3e92aa00df4.action_button_label_files',
 		groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
 		type: 'apps',
+		icon: undefined as unknown as RoomToolboxActionConfig['icon'],
 	},
 	{
 		id: 'app2',
 		title: 'app-42212581-0966-44aa-8366-b3e92aa00df4.action_button_label_files',
 		groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
 		type: 'apps',
+		icon: undefined as unknown as RoomToolboxActionConfig['icon'],
 	},
 ];