Mirrors/Rocket.Chat
1
0
Fork 0
mirror of https://github.com/RocketChat/Rocket.Chat.git synced 2025-12-28 06:47:25 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: App Logs filters Contextual Bar Clear Filters Button (#36556)
Some checks failed
Deploy GitHub Pages / deploy-preview (push) Has been cancelled
Details
CI / ⚙️ Variables Setup (push) Has been cancelled
Details
CI / Builds matrix rust bindings against alpine (push) Has been cancelled
Details
Code scanning - action / CodeQL-Build (push) Has been cancelled
Details
CI / 🚀 Notify external services - draft (push) Has been cancelled
Details
CI / 📦 Build Packages (push) Has been cancelled
Details
CI / 👀 Deploy Preview (push) Has been cancelled
Details
CI / 📦 Meteor Build - coverage (push) Has been cancelled
Details
CI / 📦 Meteor Build - official (push) Has been cancelled
Details
CI / 🚢 Build Docker Images for Testing (alpine) (push) Has been cancelled
Details
CI / 🚢 Build Docker Images for Production (alpine) (push) Has been cancelled
Details
CI / 🔎 Code Check (push) Has been cancelled
Details
CI / 🔨 Test Storybook (push) Has been cancelled
Details
CI / 🔨 Test Unit (push) Has been cancelled
Details
CI / 🔨 Test API (CE) (push) Has been cancelled
Details
CI / 🔨 Test UI (CE) (push) Has been cancelled
Details
CI / 🔨 Test API (EE) (push) Has been cancelled
Details
CI / 🔨 Test UI (EE) (push) Has been cancelled
Details
CI / ✅ Tests Done (push) Has been cancelled
Details
CI / 🚀 Publish build assets (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (main) (alpine) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (account) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (authorization) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (ddp-streamer) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (omnichannel-transcript) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (presence) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (queue-worker) (push) Has been cancelled
Details
CI / 🚀 Publish Docker Image (services) (stream-hub) (push) Has been cancelled
Details
CI / 🚀 Notify external services (push) Has been cancelled
Details
CI / Update Version Durability (push) Has been cancelled
Details
Close inactive issues / close-issues (push) Has been cancelled
Details
Release candidate cut / new-release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Martin Schoeler 2025-08-01 18:37:20 -03:00 committed by GitHub
parent 42b14952f7
commit 1142862ae4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 110 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/flat-hairs-rush.md Normal file
View File

@ -0,0 +1,5 @@
---
"@rocket.chat/meteor": minor
---
Adds a "Clear Filters" Button to the App Logs Filter Contextual Bar

44
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.spec.tsx
View File

@ -72,10 +72,10 @@ describe('Time range', () => {
it(`Should update time range when ${name} is selected`, async () => {
render(<Default />, { 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(<Default />, { 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(<Default />, { 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('');
});

13
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx
View File

@ -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 (
<FormProvider {...methods}>

10
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx
View File

@ -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 (
<ContextualbarDialog onClose={onClose}>
@ -71,6 +72,11 @@ export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }:
/>
</Box>
</ContextualbarScrollableContent>
<ContextualbarFooter>
<Button secondary w='full' aria-label={t('Clear_filters')} onClick={() => reset()}>
{t('Clear_filters')}
</Button>
</ContextualbarFooter>
</ContextualbarDialog>
);
};

4
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeFilter.tsx
View File

@ -21,7 +21,7 @@ const DateTimeFilter = ({ type, control, id, error }: DateTimeFilterProps) => {
name={type === 'start' ? 'startDate' : 'endDate'}
render={({ field }) => (
<InputBox
aria-label={type === 'start' ? 'Start Date' : 'End Date'}
aria-label={type === 'start' ? t('Start_Date') : t('End_Date')}
type='date'
{...field}
error={error ? t('Required_field') : undefined}
@ -34,7 +34,7 @@ const DateTimeFilter = ({ type, control, id, error }: DateTimeFilterProps) => {
<Controller
control={control}
name={type === 'start' ? 'startTime' : 'endTime'}
render={({ field }) => <InputBox aria-label={type === 'start' ? 'Start Time' : 'End Time'} type='time' {...field} />}
render={({ field }) => <InputBox aria-label={type === 'start' ? t('Start_Time') : t('End_Time')} type='time' {...field} />}
/>
</Margins>
</Box>

8
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.spec.tsx
View File

@ -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(<Default />, { 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();

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

@ -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"
>
<input
aria-label="Start Date"
aria-label="Start_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="startDate"
size="1"
@ -191,7 +191,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-nc7kyx"
>
<input
aria-label="Start Time"
aria-label="Start_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="startTime"
size="1"
@ -227,7 +227,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"
>
<input
aria-label="End Date"
aria-label="End_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="endDate"
size="1"
@ -249,7 +249,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-nc7kyx"
>
<input
aria-label="End Time"
aria-label="End_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="endTime"
size="1"
@ -345,9 +345,11 @@ exports[`renders AppLogsItem without crashing 1`] = `
</label>
</div>
<span
class="rcx-box rcx-box--full rcx-css-uyvtjh"
class="rcx-box rcx-box--full rcx-css-4w7o7u"
id="react-aria-:rg:"
/>
>
All
</span>
<i
aria-hidden="true"
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`] = `
</div>
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-m843eh"
>
<button
aria-label="Clear_filters"
class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
type="button"
>
<span
class="rcx-button--content"
>
Clear_filters
</span>
</button>
</div>
</div>
<span
data-focus-scope-end="true"

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

@ -62,7 +62,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"
>
<input
aria-label="Start Date"
aria-label="Start_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="startDate"
size="1"
@ -84,7 +84,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-nc7kyx"
>
<input
aria-label="Start Time"
aria-label="Start_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="startTime"
size="1"
@ -120,7 +120,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"
>
<input
aria-label="End Date"
aria-label="End_Date"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
name="endDate"
size="1"
@ -142,7 +142,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-nc7kyx"
>
<input
aria-label="End Time"
aria-label="End_Time"
class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
name="endTime"
size="1"

13
apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/useAppLogsFilterForm.ts
View File

@ -12,6 +12,17 @@ export type AppLogsFilterFormData = {
};
export const useAppLogsFilterForm = () =>
useForm<AppLogsFilterFormData>({ defaultValues: { severity: 'all', instance: 'all', timeFilter: 'all', event: 'all' } });
useForm<AppLogsFilterFormData>({
defaultValues: {
severity: 'all',
instance: 'all',
timeFilter: 'all',
event: 'all',
startDate: '',
endDate: '',
startTime: '',
endTime: '',
},
});
export const useAppLogsFilterFormContext = () => useFormContext<AppLogsFilterFormData>();

4
packages/i18n/src/locales/en.i18n.json
View File

@ -1917,6 +1917,8 @@
"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.",
"Encryption_key_saved_successfully": "Your encryption key was saved successfully.",
"End": "End",
"End_Time": "End Time",
"End_Date": "End Date",
"End-to-end_encryption": "End-to-end encryption",
"End-to-end_encryption_Description": "Ensure conversations are kept private",
"End_Call": "End Call",
@ -4834,6 +4836,8 @@
"Starred_Messages": "Starred Messages",
"Starred_messages_are_only_visible_to_you": "Starred messages are only visible to you",
"Start": "Start",
"Start_Time": "Start Time",
"Start_Date": "Start Date",
"Start_Chat": "Start Chat",
"Start_OTR": "Start OTR",
"Start_a_call": "Start a call",