From 5ee0bb57cc87b187620b1a71bf13dbae42f75975 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Wed, 12 Apr 2023 14:00:52 +0530 Subject: [PATCH 1/6] fix: max depth issue is fixed in dashboard (#2563) (cherry picked from commit 1726469aaad74169c7283c40239e1362a0e433aa) Signed-off-by: Prashant Shahi --- .../NewDashboard/DashboardVariablesSelection/VariableItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx index 9910252b3f..8841d10d0a 100644 --- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx +++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx @@ -129,7 +129,8 @@ function VariableItem({ useEffect(() => { getOptions(); - }, [getOptions]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const handleChange = (value: string | string[]): void => { if ( From 9a58cc652c156a77be7e7fc10c308b006a484eaa Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Wed, 12 Apr 2023 13:50:24 +0530 Subject: [PATCH 2/6] feat: custom time frame is updated (#2564) (cherry picked from commit fb1e823e6be25f4956e940753ae3a3056836bb7b) Signed-off-by: Prashant Shahi --- .../CustomDateTimeModal.test.tsx | 42 +++++++++++++++++++ .../TopNav/CustomDateTimeModal/index.tsx | 27 ++++++------ 2 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx new file mode 100644 index 0000000000..719de038c3 --- /dev/null +++ b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx @@ -0,0 +1,42 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import React from 'react'; + +import CustomDateTimeModal from './index'; + +describe('CustomDateTimeModal', () => { + const handleCreate = jest.fn(); + const handleCancel = jest.fn(); + + beforeEach(() => { + render( + , + ); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('renders the modal with title and buttons', () => { + expect(screen.getByText('Chose date and time range')).toBeInTheDocument(); + expect(screen.getByText('Apply')).toBeInTheDocument(); + expect(screen.getByText('Cancel')).toBeInTheDocument(); + }); + + it('donot calls onCreate when the Apply button is clicked without selecting dates', () => { + fireEvent.click(screen.getByText('Apply')); + + expect(handleCreate).toHaveBeenCalledTimes(0); + expect(handleCreate).not.toHaveBeenCalledWith(undefined); + }); + + it('calls onCancel when Cancel button is clicked', () => { + fireEvent.click(screen.getByText('Cancel')); + + expect(handleCancel).toHaveBeenCalledTimes(1); + }); +}); diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx index e2e8ad428c..2682815a74 100644 --- a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx +++ b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/jsx-no-bind */ import { DatePicker, Modal } from 'antd'; import dayjs, { Dayjs } from 'dayjs'; import React, { useState } from 'react'; @@ -12,18 +11,21 @@ function CustomDateTimeModal({ onCreate, onCancel, }: CustomDateTimeModalProps): JSX.Element { - const [customDateTimeRange, setCustomDateTimeRange] = useState(); + const [selectedDate, setDateTime] = useState(); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - function handleRangePickerOk(date_time: any): void { - setCustomDateTimeRange(date_time); - } + const onModalOkHandler = (date_time: any): void => { + onCreate(date_time); + setDateTime(date_time); + }; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - function disabledDate(current: any): boolean { + const disabledDate = (current: Dayjs): boolean => { const currentDay = dayjs(current); return currentDay.isAfter(dayjs()); - } + }; + + const onOk = (): void => { + if (selectedDate) onCreate(selectedDate); + }; return ( onCreate(customDateTimeRange || null)} + onOk={onOk} > ); From c49bb0696bbca7cdde329bbb323ab2f578dd6722 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Thu, 20 Apr 2023 17:28:35 +0530 Subject: [PATCH 3/6] fix: clear filter is fixed (#2544) * fix: clear filter is fixed * chore: action bar empty query condition is handled * feat: local state is clear for filters (cherry picked from commit 6c11c6d4da0816203d1dba4a18b10eb22d43445c) Signed-off-by: Prashant Shahi --- .../SearchFields/ActionBar.tsx | 12 ++------- .../LogsSearchFilter/SearchFields/index.tsx | 16 +++++------ .../src/container/LogsSearchFilter/index.tsx | 8 ++---- .../LogsSearchFilter/useSearchParser.ts | 27 +------------------ 4 files changed, 13 insertions(+), 50 deletions(-) diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx index a8d5c777c9..05ba17b8f6 100644 --- a/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx +++ b/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx @@ -1,23 +1,15 @@ import { Button, Row } from 'antd'; import React from 'react'; -import { QueryFields } from './utils'; - interface SearchFieldsActionBarProps { - fieldsQuery: QueryFields[][]; - applyUpdate: () => void; - clearFilters: () => void; + applyUpdate: VoidFunction; + clearFilters: VoidFunction; } export function SearchFieldsActionBar({ - fieldsQuery, applyUpdate, clearFilters, }: SearchFieldsActionBarProps): JSX.Element | null { - if (fieldsQuery.length === 0) { - return null; - } - return (