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

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: VoidFunction;
-	applyUpdate: () => void;
+	clearFilters: VoidFunction;
-	clearFilters: () => void;
 }
 
 export function SearchFieldsActionBar({
-	fieldsQuery,
 	applyUpdate,
 	clearFilters,
 }: SearchFieldsActionBarProps): JSX.Element | null {
-	if (fieldsQuery.length === 0) {
-		return null;
-	}
-
 	return (
 		<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
 			<Button

frontend/src/container/LogsSearchFilter/SearchFields/index.tsx

@@ -1,4 +1,5 @@
 import { useNotifications } from 'hooks/useNotifications';
+import { reverseParser } from 'lib/logql';
 import { flatten } from 'lodash-es';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -18,13 +19,13 @@ import {
 } from './utils';
 
 export interface SearchFieldsProps {
-	updateParsedQuery: (query: QueryFields[]) => void;
 	onDropDownToggleHandler: (value: boolean) => VoidFunction;
+	updateQueryString: (value: string) => void;
 }
 
 function SearchFields({
-	updateParsedQuery,
 	onDropDownToggleHandler,
+	updateQueryString,
 }: SearchFieldsProps): JSX.Element {
 	const {
 		searchFilter: { parsedQuery },
@@ -90,15 +91,15 @@ function SearchFields({
 		}
 
 		keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
-		updateParsedQuery(flatParsedQuery);
+		updateQueryString(reverseParser(flatParsedQuery));
 		onDropDownToggleHandler(false)();
-	}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery, notifications]);
+	}, [fieldsQuery, notifications, onDropDownToggleHandler, updateQueryString]);
 
 	const clearFilters = useCallback((): void => {
 		keyPrefixRef.current = hashCode(JSON.stringify([]));
-		updateParsedQuery([]);
+		setFieldsQuery([]);
-		onDropDownToggleHandler(false)();
+		updateQueryString('');
-	}, [onDropDownToggleHandler, updateParsedQuery]);
+	}, [updateQueryString]);
 
 	return (
 		<>
@@ -113,7 +114,6 @@ function SearchFields({
 			<SearchFieldsActionBar
 				applyUpdate={applyUpdate}
 				clearFilters={clearFilters}
-				fieldsQuery={fieldsQuery}
 			/>
 			<Suggestions applySuggestion={addSuggestedField} />
 		</>

frontend/src/container/LogsSearchFilter/index.tsx

@@ -36,11 +36,7 @@ function SearchFilter({
 	getLogsAggregate,
 	getLogsFields,
 }: SearchFilterProps): JSX.Element {
-	const {
+	const { updateQueryString, queryString } = useSearchParser();
-		updateParsedQuery,
-		updateQueryString,
-		queryString,
-	} = useSearchParser();
 	const [searchText, setSearchText] = useState(queryString);
 	const [showDropDown, setShowDropDown] = useState(false);
 	const searchRef = useRef<InputRef>(null);
@@ -187,8 +183,8 @@ function SearchFilter({
 				content={
 					<DropDownContainer>
 						<SearchFields
+							updateQueryString={updateQueryString}
 							onDropDownToggleHandler={onDropDownToggleHandler}
-							updateParsedQuery={updateParsedQuery as never}
 						/>
 					</DropDownContainer>
 				}

frontend/src/container/LogsSearchFilter/useSearchParser.ts

@@ -1,8 +1,7 @@
 import { getMinMax } from 'container/TopNav/AutoRefresh/config';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
-import { parseQuery, reverseParser } from 'lib/logql';
+import { parseQuery } from 'lib/logql';
-import { ILogQLParsedQueryItem } from 'lib/logql/types';
 import isEqual from 'lodash-es/isEqual';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -21,7 +20,6 @@ import { getGlobalTime } from './utils';
 export function useSearchParser(): {
 	queryString: string;
 	parsedQuery: unknown;
-	updateParsedQuery: (arg0: ILogQLParsedQueryItem[]) => void;
 	updateQueryString: (arg0: string) => void;
 } {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -75,32 +73,9 @@ export function useSearchParser(): {
 		}
 	}, [queryString, updateQueryString, parsedFilters]);
 
-	const updateParsedQuery = useCallback(
-		(updatedParsedPayload: ILogQLParsedQueryItem[]) => {
-			dispatch({
-				type: SET_SEARCH_QUERY_PARSED_PAYLOAD,
-				payload: updatedParsedPayload,
-			});
-			const reversedParsedQuery = reverseParser(updatedParsedPayload);
-			if (
-				!isEqual(queryString, reversedParsedQuery) ||
-				(queryString === '' && reversedParsedQuery === '')
-			) {
-				dispatch({
-					type: SET_SEARCH_QUERY_STRING,
-					payload: {
-						searchQueryString: reversedParsedQuery,
-					},
-				});
-			}
-		},
-		[dispatch, queryString],
-	);
-
 	return {
 		queryString,
 		parsedQuery,
-		updateParsedQuery,
 		updateQueryString,
 	};
 }