Skip to content

refactor: replace legacy Menu with GenericMenu #38287

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 8 commits into from
Jan 26, 2026
Merged

refactor: replace legacy Menu with GenericMenu #38287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b16d54
chore: `DepartmentItemMenu` - replace menu with `GenericMenu`
juliajforesti Jan 21, 2026
c73a54f
chore: `DateRangePicker` - replace menu with `GenericMenu`
juliajforesti Jan 21, 2026
e5c4905
chore: `AppsLogsFilter` - replace menus with `GenericMenu`
juliajforesti Jan 21, 2026
4d7b5c7
chore: snapshots
juliajforesti Jan 21, 2026
0312541
test: close menu before next step
juliajforesti Jan 22, 2026
996bda3
chore: centralize audit menu
juliajforesti Jan 23, 2026
6e4ec6a
test: adjust menu locators
juliajforesti Jan 26, 2026
8eb7479
Merge branch 'develop' into chore/menu-replacement
kodiakhq[bot] Jan 26, 2026
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
76 changes: 42 additions & 34 deletions apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -141,46 +142,53 @@ 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],
);

return (
<Box marginInline={-4} {...props}>
<Box marginInline={-4} alignItems='center' {...props}>
<Margins inline={4}>
<InputBox type='date' value={startDate} max={maxStartDate} flexGrow={1} height={20} onChange={handleChangeStart} />
<InputBox type='date' min={minEndDate} value={endDate} max={maxEndDate} flexGrow={1} height={20} onChange={handleChangeEnd} />
<Menu
options={presets}
renderItem={(props: ComponentProps<typeof Option>) => <Option icon='history' {...props} />}
alignSelf='center'
/>
<GenericMenu title={t('Date_range_presets')} items={presets} small />
</Margins>
</Box>
);
Expand Down
124 changes: 61 additions & 63 deletions apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
const compactMode = useCompactMode();

return (
<Box display='flex' flexDirection='row' width='full' flexWrap='wrap' alignContent='flex-end'>
<Box display='flex' alignItems='flex-end' flexDirection='row' width='full' flexWrap='wrap' alignContent='flex-end'>
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label id='eventFilterLabel' htmlFor='eventFilter'>
{t('Event')}
Expand All @@ -70,71 +70,69 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
/>
</Box>
{!compactMode && (
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label id='timeFilterLabel' htmlFor='timeFilter'>
{t('Time')}
</Label>
<TimeFilterSelect id='timeFilter' aria-labelledby='timeFilterLabel' />
</Box>
)}
{!compactMode && (
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
{t('Instance')}
</Label>
<Controller
control={control}
name='instance'
render={({ field }) => (
<InstanceFilterSelect appId={appId} aria-labelledby='instanceFilterLabel' id='instanceFilter' {...field} />
)}
<>
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label id='timeFilterLabel' htmlFor='timeFilter'>
{t('Time')}
</Label>
<TimeFilterSelect id='timeFilter' aria-labelledby='timeFilterLabel' />
</Box>

<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
{t('Instance')}
</Label>
<Controller
control={control}
name='instance'
render={({ field }) => (
<InstanceFilterSelect appId={appId} aria-labelledby='instanceFilterLabel' id='instanceFilter' {...field} />
)}
/>
</Box>

<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label>{t('Severity')}</Label>
<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
</Box>

<IconButton
title={isLoading ? t('Loading') : t('Refresh_logs')}
disabled={isLoading}
icon='refresh'
secondary
mie={10}
onClick={() => refreshLogs()}
/>
</Box>
)}
{!compactMode && (
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
<Label>{t('Severity')}</Label>
<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
</Box>
)}
{!compactMode && (
<IconButton
title={isLoading ? t('Loading') : t('Refresh_logs')}
alignSelf='flex-end'
disabled={isLoading}
icon='refresh'
secondary
mie={10}
onClick={() => refreshLogs()}
/>
)}
{!compactMode && (
<IconButton
title={noResults ? t('No_data_to_export') : t('Export')}
alignSelf='flex-end'
icon='circle-arrow-down'
disabled={noResults}
secondary
mie={10}
onClick={() => openExportModal()}
aria-label={noResults ? t('No_data_to_export') : t('Export')}
aria-disabled={noResults}
/>
)}
{compactMode && (
<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
{t('Filters')}
</Button>

<IconButton
title={noResults ? t('No_data_to_export') : t('Export')}
icon='circle-arrow-down'
disabled={noResults}
secondary
mie={10}
onClick={() => openExportModal()}
aria-label={noResults ? t('No_data_to_export') : t('Export')}
aria-disabled={noResults}
/>

<AppsLogsFilterOptions onExpandAll={openAllLogs} onCollapseAll={collapseAll} />
</>
)}
{!compactMode && <AppsLogsFilterOptions onExpandAll={openAllLogs} onCollapseAll={collapseAll} />}

{compactMode && (
<CompactFilterOptions
isLoading={isLoading}
onExportLogs={openExportModal}
onExpandAll={openAllLogs}
onCollapseAll={collapseAll}
onRefreshLogs={refreshLogs}
/>
<>
<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
{t('Filters')}
</Button>
<CompactFilterOptions
isLoading={isLoading}
onExportLogs={openExportModal}
onExpandAll={openAllLogs}
onCollapseAll={collapseAll}
onRefreshLogs={refreshLogs}
/>
</>
)}
</Box>
);
Expand Down
35 changes: 15 additions & 20 deletions ...eor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Icon, Menu } from '@rocket.chat/fuselage';
import { GenericMenu } from '@rocket.chat/ui-client';
import { useTranslation } from 'react-i18next';

type AppsLogsFilterOptionsProps = {
Expand All @@ -9,27 +9,22 @@ type AppsLogsFilterOptionsProps = {
const AppsLogsFilterOptions = ({ onExpandAll, onCollapseAll, ...props }: AppsLogsFilterOptionsProps) => {
const { t } = useTranslation();

const menuOptions = {
expandAll: {
label: (
<Box>
<Icon name='arrow-expand' size='x16' marginInlineEnd={4} />
{t('Expand_all')}
</Box>
),
action: onExpandAll,
const items = [
{
id: 'expandAll',
icon: 'arrow-expand' as const,
content: t('Expand_all'),
onClick: onExpandAll,
},
collapseAll: {
label: (
<Box>
<Icon name='arrow-collapse' size='x16' marginInlineEnd={4} />
{t('Collapse_all')}
</Box>
),
action: onCollapseAll,
{
id: 'collapseAll',
icon: 'arrow-collapse' as const,
content: t('Collapse_all'),
onClick: onCollapseAll,
},
};
return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
];

return <GenericMenu large title={t('Options')} items={items} {...props} />;
};

export default AppsLogsFilterOptions;
61 changes: 25 additions & 36 deletions ...eor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/CompactFilterOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Icon, Menu } from '@rocket.chat/fuselage';
import { GenericMenu } from '@rocket.chat/ui-client';
import { useTranslation } from 'react-i18next';

type CompactFilterOptionsProps = {
Expand All @@ -19,46 +19,35 @@ const CompactFilterOptions = ({
}: CompactFilterOptionsProps) => {
const { t } = useTranslation();

const menuOptions = {
exportLogs: {
label: (
<Box>
<Icon name='circle-arrow-down' size='x16' marginInlineEnd={4} />
{t('Export')}
</Box>
),
action: onExportLogs,
const items = [
{
id: 'exportLogs',
icon: 'circle-arrow-down' as const,
content: t('Export'),
onClick: onExportLogs,
},
expandAll: {
label: (
<Box>
<Icon name='arrow-expand' size='x16' marginInlineEnd={4} />
{t('Expand_all')}
</Box>
),
action: onExpandAll,
{
id: 'expandAll',
icon: 'arrow-expand' as const,
content: t('Expand_all'),
onClick: onExpandAll,
},
collapseAll: {
label: (
<Box>
<Icon name='arrow-collapse' size='x16' marginInlineEnd={4} />
{t('Collapse_all')}
</Box>
),
action: onCollapseAll,
{
id: 'collapseAll',
icon: 'arrow-collapse' as const,
content: t('Collapse_all'),
onClick: onCollapseAll,
},
refreshLogs: {
label: (
<Box>
<Icon name='refresh' size='x16' marginInlineEnd={4} />
{t('Refresh_logs')}
</Box>
),
action: onRefreshLogs,
{
id: 'refreshLogs',
icon: 'refresh' as const,
content: t('Refresh_logs'),
onClick: onRefreshLogs,
disabled: isLoading,
},
};
return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
];

return <GenericMenu title={t('Options')} large items={items} {...props} />;
};

export default CompactFilterOptions;
13 changes: 8 additions & 5 deletions ...lace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterCompact.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
class="rcx-box rcx-box--full rcx-css-4jy2w6"
>
<div
class="rcx-box rcx-box--full rcx-css-1w4asan"
class="rcx-box rcx-box--full rcx-css-rovs2w"
>
<div
class="rcx-box rcx-box--full rcx-css-1rfw4fq"
Expand Down Expand Up @@ -46,16 +46,19 @@ exports[`renders AppLogsItem without crashing 1`] = `
</span>
</button>
<button
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--square rcx-button--icon rcx-button rcx-css-17zzf5z"
data-testid="menu"
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--square rcx-button--icon rcx-button"
id="react-aria-:r0:"
title="Options"
type="button"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-kebab rcx-icon rcx-css-1x2l7ts"
class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-1x2l7ts"
>
</i>
</button>
</div>
Expand Down
Loading
Loading