From a30c6520d4fbbb732f107e838d354bbf5c0a665e Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Fri, 6 Sep 2024 11:25:09 +0200
Subject: [PATCH] feat: clear all button only appears if there is changes on
 search params

---
 app/(prowler)/page.tsx                |  2 +-
 components/filters/FilterControls.tsx | 31 ++++++++++++++++++---------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/(prowler)/page.tsx b/app/(prowler)/page.tsx
index b352170bd1..1fdd78d351 100644
--- a/app/(prowler)/page.tsx
+++ b/app/(prowler)/page.tsx
@@ -11,7 +11,7 @@ export default function Home() {
     <>
       <Header title="Scan Overview" icon="solar:pie-chart-2-outline" />
       <Spacer y={4} />
-      <FilterControls date accounts regions mutedFindings />
+      <FilterControls providers date accounts regions mutedFindings />
       <Spacer y={10} />
       <div className="grid grid-cols-12 gap-4">
         <CustomBox
diff --git a/components/filters/FilterControls.tsx b/components/filters/FilterControls.tsx
index af76da5679..d55386ddc9 100644
--- a/components/filters/FilterControls.tsx
+++ b/components/filters/FilterControls.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from "@nextui-org/react";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { CustomAccountSelection } from "./CustomAccountSelection";
 import { CustomCheckboxMutedFindings } from "./CustomCheckboxMutedFindings";
@@ -30,6 +30,14 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
 }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const [showClearButton, setShowClearButton] = useState(false);
+
+  useEffect(() => {
+    const hasFilters = Array.from(searchParams.keys()).some(
+      (key) => key.startsWith("filter[") || key === "sort",
+    );
+    setShowClearButton(hasFilters);
+  }, [searchParams]);
 
   const clearAllFilters = useCallback(() => {
     const params = new URLSearchParams(searchParams.toString());
@@ -49,15 +57,18 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
       {regions && <CustomRegionSelection />}
       {accounts && <CustomAccountSelection />}
       {mutedFindings && <CustomCheckboxMutedFindings />}
-      <Button
-        className="w-full md:w-fit"
-        onClick={clearAllFilters}
-        variant="flat"
-        color="default"
-        size="sm"
-      >
-        Clear all
-      </Button>
+
+      {showClearButton && (
+        <Button
+          className="w-full md:w-fit transition-all duration-300 ease-in-out"
+          onClick={clearAllFilters}
+          variant="flat"
+          color="default"
+          size="sm"
+        >
+          Clear all
+        </Button>
+      )}
     </div>
   );
 };