diff --git a/.changeset/flat-hairs-rush.md b/.changeset/flat-hairs-rush.md new file mode 100644 index 00000000000..e13e11f8669 --- /dev/null +++ b/.changeset/flat-hairs-rush.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": minor +--- + +Adds a "Clear Filters" Button to the App Logs Filter Contextual Bar diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.spec.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.spec.tsx index 67572297984..b00bcfd882f 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.spec.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.spec.tsx @@ -72,10 +72,10 @@ describe('Time range', () => { it(`Should update time range when ${name} is selected`, async () => { render(, { wrapper: mockAppRoot().build() }); - const startDate = screen.getByLabelText('Start Date'); - const endDate = screen.getByLabelText('End Date'); - const startTime = screen.getByLabelText('Start Time'); - const endTime = screen.getByLabelText('End Time'); + const startDate = screen.getByLabelText('Start_Date'); + const endDate = screen.getByLabelText('End_Date'); + const startTime = screen.getByLabelText('Start_Time'); + const endTime = screen.getByLabelText('End_Time'); const timeSelect = screen.getByLabelText('Time'); await userEvent.click(timeSelect); @@ -94,10 +94,10 @@ describe('Time range', () => { it(`Should manually set ${name}`, async () => { render(, { wrapper: mockAppRoot().build() }); - const startDate = screen.getByLabelText('Start Date'); - const endDate = screen.getByLabelText('End Date'); - const startTime = screen.getByLabelText('Start Time'); - const endTime = screen.getByLabelText('End Time'); + const startDate = screen.getByLabelText('Start_Date'); + const endDate = screen.getByLabelText('End_Date'); + const startTime = screen.getByLabelText('Start_Time'); + const endTime = screen.getByLabelText('End_Time'); await userEvent.type(startDate, value[0]); await userEvent.type(endDate, value[1]); @@ -111,3 +111,31 @@ describe('Time range', () => { }); }); }); + +it('Should clear time range', async () => { + render(, { wrapper: mockAppRoot().build() }); + + const startDate = screen.getByLabelText('Start_Date'); + const endDate = screen.getByLabelText('End_Date'); + const startTime = screen.getByLabelText('Start_Time'); + const endTime = screen.getByLabelText('End_Time'); + const timeSelect = screen.getByLabelText('Time'); + + await userEvent.click(timeSelect); + + expect(screen.getByRole('option', { name: 'Last_30_minutes' })).toBeVisible(); + await userEvent.click(screen.getByRole('option', { name: 'Last_30_minutes' })); + + expect(startDate).toHaveValue('2017-05-19'); + expect(endDate).toHaveValue('2017-05-19'); + expect(startTime).toHaveValue('11:50'); + expect(endTime).toHaveValue('12:20'); + + expect(screen.getByRole('button', { name: 'Clear_filters' })).toBeVisible(); + await userEvent.click(screen.getByRole('button', { name: 'Clear_filters' })); + + expect(startDate).toHaveValue(''); + expect(endDate).toHaveValue(''); + expect(startTime).toHaveValue(''); + expect(endTime).toHaveValue(''); +}); diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx index e6a9bd6e276..53cf59beb73 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx @@ -19,7 +19,18 @@ export default { })) .buildStoryDecorator(), (fn) => { - const methods = useForm({}); + const methods = useForm({ + defaultValues: { + instanceId: 'instance-1', + method: 'method-1', + severity: 'all', + event: 'all', + startDate: '', + endDate: '', + startTime: '', + endTime: '', + }, + }); return ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx index 8f4f6222ce3..4e82b552063 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx @@ -1,4 +1,4 @@ -import { Box, Label } from '@rocket.chat/fuselage'; +import { Box, Button, Label } from '@rocket.chat/fuselage'; import { Controller } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -13,6 +13,7 @@ import { ContextualbarClose, ContextualbarScrollableContent, ContextualbarDialog, + ContextualbarFooter, } from '../../../../../../components/Contextualbar'; import { useAppLogsFilterFormContext } from '../useAppLogsFilterForm'; @@ -24,7 +25,7 @@ type AppLogsFilterContextualBarProps = { export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }: AppLogsFilterContextualBarProps) => { const { t } = useTranslation(); - const { control } = useAppLogsFilterFormContext(); + const { control, reset } = useAppLogsFilterFormContext(); return ( @@ -71,6 +72,11 @@ export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }: /> + + + ); }; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeFilter.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeFilter.tsx index 8836dd70dea..fa5bcee539e 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeFilter.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeFilter.tsx @@ -21,7 +21,7 @@ const DateTimeFilter = ({ type, control, id, error }: DateTimeFilterProps) => { name={type === 'start' ? 'startDate' : 'endDate'} render={({ field }) => ( { } + render={({ field }) => } /> diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.spec.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.spec.tsx index 75497569ea2..58790437772 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.spec.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.spec.tsx @@ -27,10 +27,10 @@ test.each(testCases)('AppLogsItem should have no a11y violations', async (_story it('should not enable apply button when start Date and end Date are not selected', async () => { render(, { wrapper: mockAppRoot().build() }); - const startDate = screen.getByLabelText('Start Date'); - const endDate = screen.getByLabelText('End Date'); - const startTime = screen.getByLabelText('Start Time'); - const endTime = screen.getByLabelText('End Time'); + const startDate = screen.getByLabelText('Start_Date'); + const endDate = screen.getByLabelText('End_Date'); + const startTime = screen.getByLabelText('Start_Time'); + const endTime = screen.getByLabelText('End_Time'); expect(startDate).toBeInTheDocument(); expect(endDate).toBeInTheDocument(); diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap index 30795a832ac..c6a657745db 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap @@ -169,7 +169,7 @@ exports[`renders AppLogsItem without crashing 1`] = ` class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442" > + > + All +