Skip to content

Commit 1142862

Browse files
MartinSchoelerMartinSchoeler
authored
feat: App Logs filters Contextual Bar Clear Filters Button (RocketChat#36556)
1 parent 42b1495 commit 1142862

10 files changed

Lines changed: 110 additions & 28 deletions

File tree

‎.changeset/flat-hairs-rush.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@rocket.chat/meteor": minor
3+
---
4+
5+
Adds a "Clear Filters" Button to the App Logs Filter Contextual Bar

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

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,10 @@ describe('Time range', () => {
7272
it(`Should update time range when ${name} is selected`, async () => {
7373
render(<Default />, { wrapper: mockAppRoot().build() });
7474

75-
const startDate = screen.getByLabelText('Start Date');
76-
const endDate = screen.getByLabelText('End Date');
77-
const startTime = screen.getByLabelText('Start Time');
78-
const endTime = screen.getByLabelText('End Time');
75+
const startDate = screen.getByLabelText('Start_Date');
76+
const endDate = screen.getByLabelText('End_Date');
77+
const startTime = screen.getByLabelText('Start_Time');
78+
const endTime = screen.getByLabelText('End_Time');
7979
const timeSelect = screen.getByLabelText('Time');
8080

8181
await userEvent.click(timeSelect);
@@ -94,10 +94,10 @@ describe('Time range', () => {
9494
it(`Should manually set ${name}`, async () => {
9595
render(<Default />, { wrapper: mockAppRoot().build() });
9696

97-
const startDate = screen.getByLabelText('Start Date');
98-
const endDate = screen.getByLabelText('End Date');
99-
const startTime = screen.getByLabelText('Start Time');
100-
const endTime = screen.getByLabelText('End Time');
97+
const startDate = screen.getByLabelText('Start_Date');
98+
const endDate = screen.getByLabelText('End_Date');
99+
const startTime = screen.getByLabelText('Start_Time');
100+
const endTime = screen.getByLabelText('End_Time');
101101

102102
await userEvent.type(startDate, value[0]);
103103
await userEvent.type(endDate, value[1]);
@@ -111,3 +111,31 @@ describe('Time range', () => {
111111
});
112112
});
113113
});
114+
115+
it('Should clear time range', async () => {
116+
render(<Default />, { wrapper: mockAppRoot().build() });
117+
118+
const startDate = screen.getByLabelText('Start_Date');
119+
const endDate = screen.getByLabelText('End_Date');
120+
const startTime = screen.getByLabelText('Start_Time');
121+
const endTime = screen.getByLabelText('End_Time');
122+
const timeSelect = screen.getByLabelText('Time');
123+
124+
await userEvent.click(timeSelect);
125+
126+
expect(screen.getByRole('option', { name: 'Last_30_minutes' })).toBeVisible();
127+
await userEvent.click(screen.getByRole('option', { name: 'Last_30_minutes' }));
128+
129+
expect(startDate).toHaveValue('2017-05-19');
130+
expect(endDate).toHaveValue('2017-05-19');
131+
expect(startTime).toHaveValue('11:50');
132+
expect(endTime).toHaveValue('12:20');
133+
134+
expect(screen.getByRole('button', { name: 'Clear_filters' })).toBeVisible();
135+
await userEvent.click(screen.getByRole('button', { name: 'Clear_filters' }));
136+
137+
expect(startDate).toHaveValue('');
138+
expect(endDate).toHaveValue('');
139+
expect(startTime).toHaveValue('');
140+
expect(endTime).toHaveValue('');
141+
});

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,18 @@ export default {
1919
}))
2020
.buildStoryDecorator(),
2121
(fn) => {
22-
const methods = useForm({});
22+
const methods = useForm({
23+
defaultValues: {
24+
instanceId: 'instance-1',
25+
method: 'method-1',
26+
severity: 'all',
27+
event: 'all',
28+
startDate: '',
29+
endDate: '',
30+
startTime: '',
31+
endTime: '',
32+
},
33+
});
2334

2435
return (
2536
<FormProvider {...methods}>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Label } from '@rocket.chat/fuselage';
1+
import { Box, Button, Label } from '@rocket.chat/fuselage';
22
import { Controller } from 'react-hook-form';
33
import { useTranslation } from 'react-i18next';
44

@@ -13,6 +13,7 @@ import {
1313
ContextualbarClose,
1414
ContextualbarScrollableContent,
1515
ContextualbarDialog,
16+
ContextualbarFooter,
1617
} from '../../../../../../components/Contextualbar';
1718
import { useAppLogsFilterFormContext } from '../useAppLogsFilterForm';
1819

@@ -24,7 +25,7 @@ type AppLogsFilterContextualBarProps = {
2425
export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }: AppLogsFilterContextualBarProps) => {
2526
const { t } = useTranslation();
2627

27-
const { control } = useAppLogsFilterFormContext();
28+
const { control, reset } = useAppLogsFilterFormContext();
2829

2930
return (
3031
<ContextualbarDialog onClose={onClose}>
@@ -71,6 +72,11 @@ export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }:
7172
/>
7273
</Box>
7374
</ContextualbarScrollableContent>
75+
<ContextualbarFooter>
76+
<Button secondary w='full' aria-label={t('Clear_filters')} onClick={() => reset()}>
77+
{t('Clear_filters')}
78+
</Button>
79+
</ContextualbarFooter>
7480
</ContextualbarDialog>
7581
);
7682
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const DateTimeFilter = ({ type, control, id, error }: DateTimeFilterProps) => {
2121
name={type === 'start' ? 'startDate' : 'endDate'}
2222
render={({ field }) => (
2323
<InputBox
24-
aria-label={type === 'start' ? 'Start Date' : 'End Date'}
24+
aria-label={type === 'start' ? t('Start_Date') : t('End_Date')}
2525
type='date'
2626
{...field}
2727
error={error ? t('Required_field') : undefined}
@@ -34,7 +34,7 @@ const DateTimeFilter = ({ type, control, id, error }: DateTimeFilterProps) => {
3434
<Controller
3535
control={control}
3636
name={type === 'start' ? 'startTime' : 'endTime'}
37-
render={({ field }) => <InputBox aria-label={type === 'start' ? 'Start Time' : 'End Time'} type='time' {...field} />}
37+
render={({ field }) => <InputBox aria-label={type === 'start' ? t('Start_Time') : t('End_Time')} type='time' {...field} />}
3838
/>
3939
</Margins>
4040
</Box>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ test.each(testCases)('AppLogsItem should have no a11y violations', async (_story
2727

2828
it('should not enable apply button when start Date and end Date are not selected', async () => {
2929
render(<Default />, { wrapper: mockAppRoot().build() });
30-
const startDate = screen.getByLabelText('Start Date');
31-
const endDate = screen.getByLabelText('End Date');
32-
const startTime = screen.getByLabelText('Start Time');
33-
const endTime = screen.getByLabelText('End Time');
30+
const startDate = screen.getByLabelText('Start_Date');
31+
const endDate = screen.getByLabelText('End_Date');
32+
const startTime = screen.getByLabelText('Start_Time');
33+
const endTime = screen.getByLabelText('End_Time');
3434

3535
expect(startDate).toBeInTheDocument();
3636
expect(endDate).toBeInTheDocument();

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
169169
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
170170
>
171171
<input
172-
aria-label="Start Date"
172+
aria-label="Start_Date"
173173
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
174174
name="startDate"
175175
size="1"
@@ -191,7 +191,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
191191
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
192192
>
193193
<input
194-
aria-label="Start Time"
194+
aria-label="Start_Time"
195195
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
196196
name="startTime"
197197
size="1"
@@ -227,7 +227,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
227227
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
228228
>
229229
<input
230-
aria-label="End Date"
230+
aria-label="End_Date"
231231
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
232232
name="endDate"
233233
size="1"
@@ -249,7 +249,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
249249
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
250250
>
251251
<input
252-
aria-label="End Time"
252+
aria-label="End_Time"
253253
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
254254
name="endTime"
255255
size="1"
@@ -345,9 +345,11 @@ exports[`renders AppLogsItem without crashing 1`] = `
345345
</label>
346346
</div>
347347
<span
348-
class="rcx-box rcx-box--full rcx-css-uyvtjh"
348+
class="rcx-box rcx-box--full rcx-css-4w7o7u"
349349
id="react-aria-:rg:"
350-
/>
350+
>
351+
All
352+
</span>
351353
<i
352354
aria-hidden="true"
353355
class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-6vi44e"
@@ -384,6 +386,21 @@ exports[`renders AppLogsItem without crashing 1`] = `
384386
</div>
385387
</div>
386388
</div>
389+
<div
390+
class="rcx-box rcx-box--full rcx-css-m843eh"
391+
>
392+
<button
393+
aria-label="Clear_filters"
394+
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
395+
type="button"
396+
>
397+
<span
398+
class="rcx-button--content"
399+
>
400+
Clear_filters
401+
</span>
402+
</button>
403+
</div>
387404
</div>
388405
<span
389406
data-focus-scope-end="true"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
6262
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
6363
>
6464
<input
65-
aria-label="Start Date"
65+
aria-label="Start_Date"
6666
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
6767
name="startDate"
6868
size="1"
@@ -84,7 +84,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
8484
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
8585
>
8686
<input
87-
aria-label="Start Time"
87+
aria-label="Start_Time"
8888
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
8989
name="startTime"
9090
size="1"
@@ -120,7 +120,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
120120
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
121121
>
122122
<input
123-
aria-label="End Date"
123+
aria-label="End_Date"
124124
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
125125
name="endDate"
126126
size="1"
@@ -142,7 +142,7 @@ exports[`renders AppLogsItem without crashing 1`] = `
142142
class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
143143
>
144144
<input
145-
aria-label="End Time"
145+
aria-label="End_Time"
146146
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
147147
name="endTime"
148148
size="1"

‎apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/useAppLogsFilterForm.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,17 @@ export type AppLogsFilterFormData = {
1212
};
1313

1414
export const useAppLogsFilterForm = () =>
15-
useForm<AppLogsFilterFormData>({ defaultValues: { severity: 'all', instance: 'all', timeFilter: 'all', event: 'all' } });
15+
useForm<AppLogsFilterFormData>({
16+
defaultValues: {
17+
severity: 'all',
18+
instance: 'all',
19+
timeFilter: 'all',
20+
event: 'all',
21+
startDate: '',
22+
endDate: '',
23+
startTime: '',
24+
endTime: '',
25+
},
26+
});
1627

1728
export const useAppLogsFilterFormContext = () => useFormContext<AppLogsFilterFormData>();

‎packages/i18n/src/locales/en.i18n.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1917,6 +1917,8 @@
19171917
"EncryptionKey_Change_Disabled": "You can't set a password for your encryption key because your private key is not present on this client. In order to set a new password you need load your private key using your existing password or use a client where the key is already loaded.",
19181918
"Encryption_key_saved_successfully": "Your encryption key was saved successfully.",
19191919
"End": "End",
1920+
"End_Time": "End Time",
1921+
"End_Date": "End Date",
19201922
"End-to-end_encryption": "End-to-end encryption",
19211923
"End-to-end_encryption_Description": "Ensure conversations are kept private",
19221924
"End_Call": "End Call",
@@ -4834,6 +4836,8 @@
48344836
"Starred_Messages": "Starred Messages",
48354837
"Starred_messages_are_only_visible_to_you": "Starred messages are only visible to you",
48364838
"Start": "Start",
4839+
"Start_Time": "Start Time",
4840+
"Start_Date": "Start Date",
48374841
"Start_Chat": "Start Chat",
48384842
"Start_OTR": "Start OTR",
48394843
"Start_a_call": "Start a call",

0 commit comments

Comments
 (0)