Skip to content

Commit aa37226

Browse files
juliajforestijuliajforesti
authored
refactor: replace legacy Menu with GenericMenu (#38287)
1 parent 5650b78 commit aa37226

File tree

12 files changed

+258
-237
lines changed

12 files changed

+258
-237
lines changed

‎apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Box, InputBox, Menu, Margins, Option } from '@rocket.chat/fuselage';
1+
import { Box, InputBox, Margins } from '@rocket.chat/fuselage';
22
import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
3+
import { GenericMenu } from '@rocket.chat/ui-client';
34
import moment from 'moment';
45
import type { ReactElement, ComponentProps, SetStateAction, FormEvent } from 'react';
56
import { useMemo } from 'react';
@@ -141,46 +142,53 @@ const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps): R
141142
const { t } = useTranslation();
142143

143144
const presets = useMemo(
144-
() =>
145-
({
146-
today: {
147-
label: t('Today'),
148-
action: () => dispatch('today'),
149-
},
150-
yesterday: {
151-
label: t('Yesterday'),
152-
action: () => dispatch('yesterday'),
153-
},
154-
thisWeek: {
155-
label: t('This_week'),
156-
action: () => dispatch('this-week'),
157-
},
158-
previousWeek: {
159-
label: t('Previous_week'),
160-
action: () => dispatch('last-week'),
161-
},
162-
thisMonth: {
163-
label: t('This_month'),
164-
action: () => dispatch('this-month'),
165-
},
166-
lastMonth: {
167-
label: t('Previous_month'),
168-
action: () => dispatch('last-month'),
169-
},
170-
}) as const,
145+
() => [
146+
{
147+
id: 'today',
148+
icon: 'history' as const,
149+
content: t('Today'),
150+
onClick: () => dispatch('today'),
151+
},
152+
{
153+
id: 'yesterday',
154+
icon: 'history' as const,
155+
content: t('Yesterday'),
156+
onClick: () => dispatch('yesterday'),
157+
},
158+
{
159+
id: 'thisWeek',
160+
icon: 'history' as const,
161+
content: t('This_week'),
162+
onClick: () => dispatch('this-week'),
163+
},
164+
{
165+
id: 'previousWeek',
166+
icon: 'history' as const,
167+
content: t('Previous_week'),
168+
onClick: () => dispatch('last-week'),
169+
},
170+
{
171+
id: 'thisMonth',
172+
icon: 'history' as const,
173+
content: t('This_month'),
174+
onClick: () => dispatch('this-month'),
175+
},
176+
{
177+
id: 'lastMonth',
178+
icon: 'history' as const,
179+
content: t('Previous_month'),
180+
onClick: () => dispatch('last-month'),
181+
},
182+
],
171183
[dispatch, t],
172184
);
173185

174186
return (
175-
<Box marginInline={-4} {...props}>
187+
<Box marginInline={-4} alignItems='center' {...props}>
176188
<Margins inline={4}>
177189
<InputBox type='date' value={startDate} max={maxStartDate} flexGrow={1} height={20} onChange={handleChangeStart} />
178190
<InputBox type='date' min={minEndDate} value={endDate} max={maxEndDate} flexGrow={1} height={20} onChange={handleChangeEnd} />
179-
<Menu
180-
options={presets}
181-
renderItem={(props: ComponentProps<typeof Option>) => <Option icon='history' {...props} />}
182-
alignSelf='center'
183-
/>
191+
<GenericMenu title={t('Date_range_presets')} items={presets} small />
184192
</Margins>
185193
</Box>
186194
);

‎apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx‎

Lines changed: 61 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
5858
const compactMode = useCompactMode();
5959

6060
return (
61-
<Box display='flex' flexDirection='row' width='full' flexWrap='wrap' alignContent='flex-end'>
61+
<Box display='flex' alignItems='flex-end' flexDirection='row' width='full' flexWrap='wrap' alignContent='flex-end'>
6262
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
6363
<Label id='eventFilterLabel' htmlFor='eventFilter'>
6464
{t('Event')}
@@ -70,71 +70,69 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
7070
/>
7171
</Box>
7272
{!compactMode && (
73-
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
74-
<Label id='timeFilterLabel' htmlFor='timeFilter'>
75-
{t('Time')}
76-
</Label>
77-
<TimeFilterSelect id='timeFilter' aria-labelledby='timeFilterLabel' />
78-
</Box>
79-
)}
80-
{!compactMode && (
81-
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
82-
<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
83-
{t('Instance')}
84-
</Label>
85-
<Controller
86-
control={control}
87-
name='instance'
88-
render={({ field }) => (
89-
<InstanceFilterSelect appId={appId} aria-labelledby='instanceFilterLabel' id='instanceFilter' {...field} />
90-
)}
73+
<>
74+
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
75+
<Label id='timeFilterLabel' htmlFor='timeFilter'>
76+
{t('Time')}
77+
</Label>
78+
<TimeFilterSelect id='timeFilter' aria-labelledby='timeFilterLabel' />
79+
</Box>
80+
81+
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
82+
<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
83+
{t('Instance')}
84+
</Label>
85+
<Controller
86+
control={control}
87+
name='instance'
88+
render={({ field }) => (
89+
<InstanceFilterSelect appId={appId} aria-labelledby='instanceFilterLabel' id='instanceFilter' {...field} />
90+
)}
91+
/>
92+
</Box>
93+
94+
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
95+
<Label>{t('Severity')}</Label>
96+
<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
97+
</Box>
98+
99+
<IconButton
100+
title={isLoading ? t('Loading') : t('Refresh_logs')}
101+
disabled={isLoading}
102+
icon='refresh'
103+
secondary
104+
mie={10}
105+
onClick={() => refreshLogs()}
91106
/>
92-
</Box>
93-
)}
94-
{!compactMode && (
95-
<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
96-
<Label>{t('Severity')}</Label>
97-
<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
98-
</Box>
99-
)}
100-
{!compactMode && (
101-
<IconButton
102-
title={isLoading ? t('Loading') : t('Refresh_logs')}
103-
alignSelf='flex-end'
104-
disabled={isLoading}
105-
icon='refresh'
106-
secondary
107-
mie={10}
108-
onClick={() => refreshLogs()}
109-
/>
110-
)}
111-
{!compactMode && (
112-
<IconButton
113-
title={noResults ? t('No_data_to_export') : t('Export')}
114-
alignSelf='flex-end'
115-
icon='circle-arrow-down'
116-
disabled={noResults}
117-
secondary
118-
mie={10}
119-
onClick={() => openExportModal()}
120-
aria-label={noResults ? t('No_data_to_export') : t('Export')}
121-
aria-disabled={noResults}
122-
/>
123-
)}
124-
{compactMode && (
125-
<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
126-
{t('Filters')}
127-
</Button>
107+
108+
<IconButton
109+
title={noResults ? t('No_data_to_export') : t('Export')}
110+
icon='circle-arrow-down'
111+
disabled={noResults}
112+
secondary
113+
mie={10}
114+
onClick={() => openExportModal()}
115+
aria-label={noResults ? t('No_data_to_export') : t('Export')}
116+
aria-disabled={noResults}
117+
/>
118+
119+
<AppsLogsFilterOptions onExpandAll={openAllLogs} onCollapseAll={collapseAll} />
120+
</>
128121
)}
129-
{!compactMode && <AppsLogsFilterOptions onExpandAll={openAllLogs} onCollapseAll={collapseAll} />}
122+
130123
{compactMode && (
131-
<CompactFilterOptions
132-
isLoading={isLoading}
133-
onExportLogs={openExportModal}
134-
onExpandAll={openAllLogs}
135-
onCollapseAll={collapseAll}
136-
onRefreshLogs={refreshLogs}
137-
/>
124+
<>
125+
<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
126+
{t('Filters')}
127+
</Button>
128+
<CompactFilterOptions
129+
isLoading={isLoading}
130+
onExportLogs={openExportModal}
131+
onExpandAll={openAllLogs}
132+
onCollapseAll={collapseAll}
133+
onRefreshLogs={refreshLogs}
134+
/>
135+
</>
138136
)}
139137
</Box>
140138
);

‎apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterOptions.tsx‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Icon, Menu } from '@rocket.chat/fuselage';
1+
import { GenericMenu } from '@rocket.chat/ui-client';
22
import { useTranslation } from 'react-i18next';
33

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

12-
const menuOptions = {
13-
expandAll: {
14-
label: (
15-
<Box>
16-
<Icon name='arrow-expand' size='x16' marginInlineEnd={4} />
17-
{t('Expand_all')}
18-
</Box>
19-
),
20-
action: onExpandAll,
12+
const items = [
13+
{
14+
id: 'expandAll',
15+
icon: 'arrow-expand' as const,
16+
content: t('Expand_all'),
17+
onClick: onExpandAll,
2118
},
22-
collapseAll: {
23-
label: (
24-
<Box>
25-
<Icon name='arrow-collapse' size='x16' marginInlineEnd={4} />
26-
{t('Collapse_all')}
27-
</Box>
28-
),
29-
action: onCollapseAll,
19+
{
20+
id: 'collapseAll',
21+
icon: 'arrow-collapse' as const,
22+
content: t('Collapse_all'),
23+
onClick: onCollapseAll,
3024
},
31-
};
32-
return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
25+
];
26+
27+
return <GenericMenu large title={t('Options')} items={items} {...props} />;
3328
};
3429

3530
export default AppsLogsFilterOptions;

‎apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/CompactFilterOptions.tsx‎

Lines changed: 25 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Icon, Menu } from '@rocket.chat/fuselage';
1+
import { GenericMenu } from '@rocket.chat/ui-client';
22
import { useTranslation } from 'react-i18next';
33

44
type CompactFilterOptionsProps = {
@@ -19,46 +19,35 @@ const CompactFilterOptions = ({
1919
}: CompactFilterOptionsProps) => {
2020
const { t } = useTranslation();
2121

22-
const menuOptions = {
23-
exportLogs: {
24-
label: (
25-
<Box>
26-
<Icon name='circle-arrow-down' size='x16' marginInlineEnd={4} />
27-
{t('Export')}
28-
</Box>
29-
),
30-
action: onExportLogs,
22+
const items = [
23+
{
24+
id: 'exportLogs',
25+
icon: 'circle-arrow-down' as const,
26+
content: t('Export'),
27+
onClick: onExportLogs,
3128
},
32-
expandAll: {
33-
label: (
34-
<Box>
35-
<Icon name='arrow-expand' size='x16' marginInlineEnd={4} />
36-
{t('Expand_all')}
37-
</Box>
38-
),
39-
action: onExpandAll,
29+
{
30+
id: 'expandAll',
31+
icon: 'arrow-expand' as const,
32+
content: t('Expand_all'),
33+
onClick: onExpandAll,
4034
},
41-
collapseAll: {
42-
label: (
43-
<Box>
44-
<Icon name='arrow-collapse' size='x16' marginInlineEnd={4} />
45-
{t('Collapse_all')}
46-
</Box>
47-
),
48-
action: onCollapseAll,
35+
{
36+
id: 'collapseAll',
37+
icon: 'arrow-collapse' as const,
38+
content: t('Collapse_all'),
39+
onClick: onCollapseAll,
4940
},
50-
refreshLogs: {
51-
label: (
52-
<Box>
53-
<Icon name='refresh' size='x16' marginInlineEnd={4} />
54-
{t('Refresh_logs')}
55-
</Box>
56-
),
57-
action: onRefreshLogs,
41+
{
42+
id: 'refreshLogs',
43+
icon: 'refresh' as const,
44+
content: t('Refresh_logs'),
45+
onClick: onRefreshLogs,
5846
disabled: isLoading,
5947
},
60-
};
61-
return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
48+
];
49+
50+
return <GenericMenu title={t('Options')} large items={items} {...props} />;
6251
};
6352

6453
export default CompactFilterOptions;

‎apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterCompact.spec.tsx.snap‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
77
class="rcx-box rcx-box--full rcx-css-4jy2w6"
88
>
99
<div
10-
class="rcx-box rcx-box--full rcx-css-1w4asan"
10+
class="rcx-box rcx-box--full rcx-css-rovs2w"
1111
>
1212
<div
1313
class="rcx-box rcx-box--full rcx-css-1rfw4fq"
@@ -46,16 +46,19 @@ exports[`renders AppLogsItem without crashing 1`] = `
4646
</span>
4747
</button>
4848
<button
49-
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--square rcx-button--icon rcx-button rcx-css-17zzf5z"
50-
data-testid="menu"
49+
aria-expanded="false"
50+
aria-haspopup="true"
51+
aria-label="Options"
52+
class="rcx-box rcx-box--full rcx-button--large-square rcx-button--square rcx-button--icon rcx-button"
53+
id="react-aria-:r0:"
5154
title="Options"
5255
type="button"
5356
>
5457
<i
5558
aria-hidden="true"
56-
class="rcx-box rcx-box--full rcx-icon--name-kebab rcx-icon rcx-css-1x2l7ts"
59+
class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-1x2l7ts"
5760
>
58-
61+
5962
</i>
6063
</button>
6164
</div>

0 commit comments

Comments
 (0)