From 5b16d548ccb599eec33f8b0fe43339b2daa8b3d3 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 21 Jan 2026 14:51:17 -0300 Subject: [PATCH 1/7] chore: `DepartmentItemMenu` - replace menu with `GenericMenu` --- .../DepartmentsTable/DepartmentItemMenu.tsx | 71 +++++++++---------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx index 253ad9d10c4b6..ecae635d81527 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx @@ -1,10 +1,11 @@ import type { ILivechatDepartment } from '@rocket.chat/core-typings'; -import { Box, Icon, Menu } from '@rocket.chat/fuselage'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useToastMessageDispatch, useEndpoint, useRoute, useSetModal, useTranslation, useSetting } from '@rocket.chat/ui-contexts'; +import { GenericMenu } from '@rocket.chat/ui-client'; +import { useToastMessageDispatch, useEndpoint, useRoute, useSetModal, useSetting } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import type { ReactElement } from 'react'; -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import RemoveDepartmentModal from './RemoveDepartmentModal'; @@ -20,7 +21,7 @@ type DepartmentItemMenuProps = { // TODO: Use MenuV2 instead of Menu const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps): ReactElement => { - const t = useTranslation(); + const { t } = useTranslation(); const queryClient = useQueryClient(); const setModal = useSetModal(); const dispatchToastMessage = useToastMessageDispatch(); @@ -60,39 +61,37 @@ const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps): setModal( setModal(null)} name={name} />); }); - const menuOptions = { - ...(!archived && { - edit: { - label: ( - <> - - {t('Edit')} - - ), - action: (): void => handleEdit(), + const items = useMemo( + () => [ + ...(archived + ? [] + : [ + { + id: 'edit', + icon: 'edit' as const, + content: t('Edit'), + onClick: handleEdit, + }, + ]), + { + id: archived ? 'unarchive' : 'archive', + icon: archived ? ('undo' as const) : ('arrow-down-box' as const), + content: archived ? t('Unarchive') : t('Archive'), + onClick: handleToggleArchive, }, - }), - [archived ? 'unarchive' : 'archive']: { - label: ( - <> - - {archived ? t('Unarchive') : t('Archive')} - - ), - action: (): Promise => handleToggleArchive(), - }, - delete: { - label: ( - - - {t('Delete')} - - ), - action: (): void => handlePermanentDepartmentRemoval(), - disabled: !departmentRemovalEnabled, - }, - }; - return ; + { + id: 'delete', + icon: 'trash' as const, + content: t('Delete'), + onClick: handlePermanentDepartmentRemoval, + disabled: !departmentRemovalEnabled, + tooltip: !departmentRemovalEnabled ? t('Department_Removal_Disabled') : undefined, + }, + ], + [archived, departmentRemovalEnabled, handleEdit, handleToggleArchive, handlePermanentDepartmentRemoval, t], + ); + + return ; }; export default DepartmentItemMenu; From c73a54ff2e5bf7b2bc79217379bc86bd032b5d02 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 21 Jan 2026 15:07:22 -0300 Subject: [PATCH 2/7] chore: `DateRangePicker` - replace menu with `GenericMenu` --- .../components/forms/DateRangePicker.tsx | 74 ++++++++++--------- .../omnichannel/analytics/DateRangePicker.tsx | 65 +++++++++------- packages/i18n/src/locales/en.i18n.json | 3 +- 3 files changed, 80 insertions(+), 62 deletions(-) diff --git a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx index 9d659169622e8..0cfb82ee9720c 100644 --- a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx +++ b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx @@ -1,5 +1,6 @@ -import { Box, InputBox, Menu, Margins, Option } from '@rocket.chat/fuselage'; +import { Box, InputBox, Margins } from '@rocket.chat/fuselage'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; +import { GenericMenu } from '@rocket.chat/ui-client'; import moment from 'moment'; import type { ReactElement, ComponentProps, SetStateAction, FormEvent } from 'react'; import { useMemo } from 'react'; @@ -141,33 +142,44 @@ const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps): R const { t } = useTranslation(); const presets = useMemo( - () => - ({ - today: { - label: t('Today'), - action: () => dispatch('today'), - }, - yesterday: { - label: t('Yesterday'), - action: () => dispatch('yesterday'), - }, - thisWeek: { - label: t('This_week'), - action: () => dispatch('this-week'), - }, - previousWeek: { - label: t('Previous_week'), - action: () => dispatch('last-week'), - }, - thisMonth: { - label: t('This_month'), - action: () => dispatch('this-month'), - }, - lastMonth: { - label: t('Previous_month'), - action: () => dispatch('last-month'), - }, - }) as const, + () => [ + { + id: 'today', + icon: 'history' as const, + content: t('Today'), + onClick: () => dispatch('today'), + }, + { + id: 'yesterday', + icon: 'history' as const, + content: t('Yesterday'), + onClick: () => dispatch('yesterday'), + }, + { + id: 'thisWeek', + icon: 'history' as const, + content: t('This_week'), + onClick: () => dispatch('this-week'), + }, + { + id: 'previousWeek', + icon: 'history' as const, + content: t('Previous_week'), + onClick: () => dispatch('last-week'), + }, + { + id: 'thisMonth', + icon: 'history' as const, + content: t('This_month'), + onClick: () => dispatch('this-month'), + }, + { + id: 'lastMonth', + icon: 'history' as const, + content: t('Previous_month'), + onClick: () => dispatch('last-month'), + }, + ], [dispatch, t], ); @@ -176,11 +188,7 @@ const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps): R - ) =>