From ffd72cf406427376b11d90f83d86d29d69725f10 Mon Sep 17 00:00:00 2001
From: Amlan Kumar Nandy <45410599+amlannandy@users.noreply.github.com>
Date: Thu, 30 Jan 2025 00:15:19 +0530
Subject: [PATCH] chore: fix visibility toggle in host filters (#6976)

---
 .../InfraMonitoringHosts/HostsList.tsx        | 19 +++++++++++++++++--
 .../InfraMonitoring.styles.scss               | 11 +++++++++++
 .../K8sFiltersSidePanel.tsx                   | 19 +++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
index 01dcabed0e..bdacb99b8f 100644
--- a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
+++ b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
@@ -1,7 +1,7 @@
 import './InfraMonitoring.styles.scss';
 
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Button, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { HostListPayload } from 'api/infraMonitoring/getHostLists';
 import HostMetricDetail from 'components/HostMetricsDetail';
@@ -11,6 +11,7 @@ import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Filter } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -140,7 +141,21 @@ function HostsList(): JSX.Element {
 					</div>
 				)}
 				<div className="hosts-list-table-container">
-					<HostsListControls handleFiltersChange={handleFiltersChange} />
+					<div className="hosts-list-table-header">
+						{!showFilters && (
+							<div className="quick-filters-toggle-container">
+								<Button
+									className="periscope-btn ghost"
+									type="text"
+									size="small"
+									onClick={handleFilterVisibilityChange}
+								>
+									<Filter size={14} />
+								</Button>
+							</div>
+						)}
+						<HostsListControls handleFiltersChange={handleFiltersChange} />
+					</div>
 					<HostsListTable
 						isLoading={isLoading}
 						isFetching={isFetching}
diff --git a/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss b/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss
index 52c51fd143..1247638b7b 100644
--- a/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss
+++ b/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss
@@ -11,6 +11,7 @@
 	}
 
 	.hosts-list-controls {
+		flex: 1;
 		padding: 8px;
 
 		display: flex;
@@ -73,6 +74,16 @@
 
 	.hosts-list-table-container {
 		flex: 1;
+
+		.hosts-list-table-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.quick-filters-toggle-container {
+				padding: 0 8px;
+			}
+		}
 	}
 
 	.hosts-list-table {
diff --git a/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx b/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx
index d042144b43..081f343043 100644
--- a/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/K8sFiltersSidePanel/K8sFiltersSidePanel.tsx
@@ -37,6 +37,25 @@ function K8sFiltersSidePanel({
 		}
 	}, [searchValue]);
 
+	// Close side panel when clicking outside of it
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				sidePanelRef.current &&
+				!sidePanelRef.current.contains(event.target as Node)
+			) {
+				onClose();
+			}
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	return (
 		<div className="k8s-filters-side-panel-container">
 			<div className="k8s-filters-side-panel" ref={sidePanelRef}>