From 1916fc87b093e462262b196a222a1fed9bd654f5 Mon Sep 17 00:00:00 2001
From: Amol Umbark <amolumbarkar@gmail.com>
Date: Wed, 28 Dec 2022 14:30:37 +0530
Subject: [PATCH] fix: added clear filters button (#1920)

* fix: added clear filters button

* fix: removed console log


Co-authored-by: mindhash <mindhash@mindhashs-MacBook-Pro.local>
Co-authored-by: Pranay Prateek <pranay@signoz.io>
Co-authored-by: Ankit Nayan <ankit@signoz.io>
---
 .../SearchFields/ActionBar.tsx                | 36 ++++++++++++++
 .../LogsSearchFilter/SearchFields/index.tsx   | 47 ++++++++++---------
 2 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx

diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx
new file mode 100644
index 0000000000..a8d5c777c9
--- /dev/null
+++ b/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx
@@ -0,0 +1,36 @@
+import { Button, Row } from 'antd';
+import React from 'react';
+
+import { QueryFields } from './utils';
+
+interface SearchFieldsActionBarProps {
+	fieldsQuery: QueryFields[][];
+	applyUpdate: () => void;
+	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
+				type="default"
+				onClick={clearFilters}
+				style={{ marginRight: '1rem' }}
+			>
+				Clear Filter
+			</Button>
+			<Button type="primary" onClick={applyUpdate}>
+				Apply
+			</Button>
+		</Row>
+	);
+}
+export default SearchFieldsActionBar;
diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
index bca82bdaaf..a7228c6c45 100644
--- a/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
+++ b/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx
@@ -1,10 +1,11 @@
-import { Button, notification, Row } from 'antd';
+import { notification } from 'antd';
 import { flatten } from 'lodash-es';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { ILogsReducer } from 'types/reducer/logs';
 
+import { SearchFieldsActionBar } from './ActionBar';
 import QueryBuilder from './QueryBuilder/QueryBuilder';
 import Suggestions from './Suggestions';
 import {
@@ -68,24 +69,26 @@ function SearchFields({
 		[fieldsQuery, setFieldsQuery],
 	);
 
-	const applyUpdate = useCallback(
-		(e): void => {
-			e.preventDefault();
-			const flatParsedQuery = flatten(fieldsQuery);
+	const applyUpdate = useCallback((): void => {
+		const flatParsedQuery = flatten(fieldsQuery);
 
-			if (!fieldsQueryIsvalid(flatParsedQuery)) {
-				notification.error({
-					message: 'Please enter a valid criteria for each of the selected fields',
-				});
-				return;
-			}
+		if (!fieldsQueryIsvalid(flatParsedQuery)) {
+			notification.error({
+				message: 'Please enter a valid criteria for each of the selected fields',
+			});
+			return;
+		}
 
-			keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
-			updateParsedQuery(flatParsedQuery);
-			onDropDownToggleHandler(false)();
-		},
-		[onDropDownToggleHandler, fieldsQuery, updateParsedQuery],
-	);
+		keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
+		updateParsedQuery(flatParsedQuery);
+		onDropDownToggleHandler(false)();
+	}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery]);
+
+	const clearFilters = useCallback((): void => {
+		keyPrefixRef.current = hashCode(JSON.stringify([]));
+		updateParsedQuery([]);
+		onDropDownToggleHandler(false)();
+	}, [onDropDownToggleHandler, updateParsedQuery]);
 
 	return (
 		<>
@@ -96,11 +99,11 @@ function SearchFields({
 				fieldsQuery={fieldsQuery}
 				setFieldsQuery={setFieldsQuery}
 			/>
-			<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
-				<Button type="primary" onClick={applyUpdate}>
-					Apply
-				</Button>
-			</Row>
+			<SearchFieldsActionBar
+				applyUpdate={applyUpdate}
+				clearFilters={clearFilters}
+				fieldsQuery={fieldsQuery}
+			/>
 			<Suggestions applySuggestion={addSuggestedField} />
 		</>
 	);