From 43f856c41b4011418bfc8bfe58c74f368f728228 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Tue, 3 Dec 2024 13:06:07 +0530
Subject: [PATCH] fix: make the entire row clickable in logs quick filters
 (#6574)

---
 .../Checkbox/Checkbox.styles.scss             |  1 +
 .../FilterRenderers/Checkbox/Checkbox.tsx     | 33 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
index c46d9975f4..34bdd0508e 100644
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -8,6 +8,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		cursor: pointer;
 
 		.left-action {
 			display: flex;
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
index dcf3cc8f3e..bd8b9b1d38 100644
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -396,23 +396,22 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 	return (
 		<div className="checkbox-filter">
-			<section className="filter-header-checkbox">
+			<section
+				className="filter-header-checkbox"
+				onClick={(): void => {
+					if (isOpen) {
+						setIsOpen(false);
+						setVisibleItemsCount(10);
+					} else {
+						setIsOpen(true);
+					}
+				}}
+			>
 				<section className="left-action">
 					{isOpen ? (
-						<ChevronDown
-							size={13}
-							cursor="pointer"
-							onClick={(): void => {
-								setIsOpen(false);
-								setVisibleItemsCount(10);
-							}}
-						/>
+						<ChevronDown size={13} cursor="pointer" />
 					) : (
-						<ChevronRight
-							size={13}
-							onClick={(): void => setIsOpen(true)}
-							cursor="pointer"
-						/>
+						<ChevronRight size={13} cursor="pointer" />
 					)}
 					<Typography.Text className="title">{filter.title}</Typography.Text>
 				</section>
@@ -420,7 +419,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					{isOpen && (
 						<Typography.Text
 							className="clear-all"
-							onClick={handleClearFilterAttribute}
+							onClick={(e): void => {
+								e.stopPropagation();
+								e.preventDefault();
+								handleClearFilterAttribute();
+							}}
 						>
 							Clear All
 						</Typography.Text>