feat: filters relationships in findings and scans page (#8046)

Co-authored-by: Pablo Lara <larabjj@gmail.com>

ui/components/ui/table/data-table-filter-custom.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 import { useCallback, useMemo } from "react";
 
+import { ClearFiltersButton } from "@/components/filters";
 import { CustomFilterIcon } from "@/components/icons";
 import { CustomButton, CustomDropdownFilter } from "@/components/ui/custom";
 import { useUrlFilters } from "@/hooks/use-url-filters";
@@ -11,11 +12,13 @@ import { FilterOption } from "@/types";
 export interface DataTableFilterCustomProps {
   filters: FilterOption[];
   defaultOpen?: boolean;
+  showClearButton?: boolean;
 }
 
 export const DataTableFilterCustom = ({
   filters,
   defaultOpen = false,
+  showClearButton = false,
 }: DataTableFilterCustomProps) => {
   const { updateFilter } = useUrlFilters();
   const [showFilters, setShowFilters] = useState(defaultOpen);
@@ -43,39 +46,33 @@ export const DataTableFilterCustom = ({
   );
 
   return (
-    <div
-      className={`flex ${
-        sortedFilters.length > 4 ? "flex-col" : "flex-col md:flex-row"
-      } gap-4`}
-    >
-      <CustomButton
-        ariaLabel={showFilters ? "Hide Filters" : "Show Filters"}
-        variant="flat"
-        color={showFilters ? "action" : "primary"}
-        size="md"
-        startContent={<CustomFilterIcon size={16} />}
-        onPress={() => setShowFilters(!showFilters)}
-        className="w-full max-w-fit"
-      >
-        <h3 className="text-small">
-          {showFilters ? "Hide Filters" : "Show Filters"}
-        </h3>
-      </CustomButton>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-row gap-4">
+        <CustomButton
+          ariaLabel={showFilters ? "Hide Filters" : "Show Filters"}
+          variant="flat"
+          color={showFilters ? "action" : "primary"}
+          size="md"
+          startContent={<CustomFilterIcon size={16} />}
+          onPress={() => setShowFilters(!showFilters)}
+          className="w-full max-w-fit"
+        >
+          <h3 className="text-small">
+            {showFilters ? "Hide Filters" : "Show Filters"}
+          </h3>
+        </CustomButton>
+
+        {showClearButton && <ClearFiltersButton />}
+      </div>
 
       <div
         className={`transition-all duration-700 ease-in-out ${
           showFilters
-            ? "max-h-96 w-full translate-x-0 overflow-visible opacity-100"
-            : "max-h-0 -translate-x-full overflow-hidden opacity-0"
+            ? "w-full translate-x-0 overflow-visible opacity-100"
+            : "mt-[-16px] max-h-0 -translate-x-full overflow-hidden opacity-0"
         }`}
       >
-        <div
-          className={`grid gap-4 ${
-            sortedFilters.length >= 4
-              ? "grid-cols-1 md:grid-cols-4"
-              : "grid-cols-1 md:grid-cols-3"
-          }`}
-        >
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
           {sortedFilters.map((filter) => (
             <CustomDropdownFilter
               key={filter.key}