Skip to content

refactor: Adjusts HeaderToolbarAction props #37108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 16 commits into from
Oct 17, 2025
Merged

refactor: Adjusts HeaderToolbarAction props #37108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b49c1ea
chore: adjusts component properties
dougfabris Sep 30, 2025
d74fb72
fix: stories
dougfabris Sep 30, 2025
1c92ced
fix: ts
dougfabris Oct 1, 2025
c242d2f
fix: videoconf tooltip
dougfabris Oct 2, 2025
41eba74
chore: purge all ToolBox-* data-qa
dougfabris Oct 2, 2025
e3d1b8b
Merge branch 'develop' into refactor/headerToolbarAction
dougfabris Oct 2, 2025
6a86e84
chore: remove `data-index`
dougfabris Oct 7, 2025
9ec893b
fix: dialog locator
dougfabris Oct 7, 2025
2c88ade
Merge branch 'develop' into refactor/headerToolbarAction
dougfabris Oct 7, 2025
9162e22
test: team info locator
dougfabris Oct 7, 2025
cfc9503
test: fix onHold locators
dougfabris Oct 7, 2025
a5a7831
fix: missing key on mapping actions
dougfabris Oct 7, 2025
7ff5303
test: closeChatModal instance not being defined
dougfabris Oct 8, 2025
758dbee
test: keep clickCount for now
dougfabris Oct 16, 2025
4c0fcd9
Merge branch 'develop' into refactor/headerToolbarAction
dougfabris Oct 16, 2025
88d3987
Merge branch 'develop' into refactor/headerToolbarAction
kodiakhq[bot] Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/hooks/roomActions/useAppsRoomStarActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/hooks/roomActions/useVideoCallRoomAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
6 changes: 4 additions & 2 deletions apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);
Expand All @@ -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 }) => {
Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 4 additions & 7 deletions apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
};
Expand All @@ -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' />}
</>
);
};
Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/views/room/Header/RoomToolbox/RoomToolboxE2EESetup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
2 changes: 2 additions & 0 deletions apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
];

Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/views/room/Header/RoomToolbox/hooks/useRoomToolboxActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,12 @@ export const useRoomToolboxActions = ({ actions, openTab }: Pick<RoomToolboxCont
const hiddenActions = (!roomToolboxExpanded ? actions : [...appsActions, ...normalActions.slice(6)])
.filter((item) => !item.disabled && !item.featured)
.map((item) => ({
'content': t(item.title),
'onClick':
content: t(item.title),
onClick:
item.action ??
((): void => {
openTab(item.id);
}),
'data-qa-id': `ToolBoxAction-${item.icon}`,
...item,
}))
.reduce((acc, item) => {
Expand Down
6 changes: 4 additions & 2 deletions apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActionOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);
Expand All @@ -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 }) => {
Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/views/room/HeaderV2/Omnichannel/QuickActions/QuickActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 options={options} key={id} action={action} {...props} />;
}

return <HeaderToolbarAction key={id} {...props} />;
return <HeaderToolbarAction key={id} onClick={() => action(id)} {...props} />;
})}
{quickActions.length > 0 && <HeaderToolbarDivider />}
</HeaderToolbar>
Expand Down
11 changes: 4 additions & 7 deletions apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
};
Expand All @@ -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' />}
</>
);
};
Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/views/room/HeaderV2/RoomToolbox/RoomToolboxE2EESetup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,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}
/>
Expand Down
2 changes: 2 additions & 0 deletions apps/meteor/client/views/room/HeaderV2/RoomToolbox/hooks/useRoomToolboxActions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
];

Expand Down
5 changes: 2 additions & 3 deletions apps/meteor/client/views/room/HeaderV2/RoomToolbox/hooks/useRoomToolboxActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,12 @@ export const useRoomToolboxActions = ({ actions, openTab }: Pick<RoomToolboxCont
const hiddenActions = (!roomToolboxExpanded ? actions : [...appsActions, ...normalActions.slice(6)])
.filter((item) => !item.disabled && !item.featured)
.map((item) => ({
'content': t(item.title),
'onClick':
content: t(item.title),
onClick:
item.action ??
((): void => {
openTab(item.id);
}),
'data-qa-id': `ToolBoxAction-${item.icon}`,
...item,
}))
.reduce((acc, item) => {
Expand Down
7 changes: 3 additions & 4 deletions apps/meteor/client/views/room/contexts/RoomToolboxContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ import type { Box } from '@rocket.chat/fuselage';
import type { Keys as IconName } from '@rocket.chat/icons';
import type { TranslationKey } from '@rocket.chat/ui-contexts';
import { createContext, useContext } from 'react';
import type { ReactNode, ComponentProps, ComponentType, UIEvent } from 'react';
import type { ReactNode, ComponentProps, ComponentType } from 'react';

export type RenderToolboxItemParams = RoomToolboxActionConfig & {
className?: ComponentProps<typeof Box>['className'];
index: number;
toolbox: RoomToolboxContextValue;
};

export type RoomToolboxActionConfig = {
id: string;
icon?: IconName;
icon: IconName;
title: TranslationKey;
anonymous?: boolean;
tooltip?: string;
Expand All @@ -21,7 +20,7 @@ export type RoomToolboxActionConfig = {
order?: number;
groups: Array<'group' | 'channel' | 'live' | 'direct' | 'direct_multiple' | 'team' | 'voip'>;
hotkey?: string;
action?: (event?: UIEvent<HTMLElement>) => void;
action?: () => void;
featured?: boolean;
renderToolboxItem?: (params: RenderToolboxItemParams) => ReactNode;
tabComponent?: ComponentType<{
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/room/lib/quickActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export type QuickActionsActionOptions = Array<{

export type QuickActionsActionConfig = {
id: string;
icon?: IconName;
icon: IconName;
title: TranslationKey;
order?: number;
featured?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/room/providers/hooks/useAppsRoomActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export const useAppsRoomActions = () => {
result.data?.filter(applyButtonFilters).map(
(action): RoomToolboxActionConfig => ({
id: action.actionId,
icon: undefined,
variant: action.variant,
icon: undefined as unknown as RoomToolboxActionConfig['icon'],
order: 300,
title: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
Expand Down
Loading
Loading