feat: Include/exclude muted findings (#8228)

ui/components/filters/custom-checkbox-muted-findings.tsx

@@ -1,18 +1,38 @@
+"use client";
+
 import { Checkbox } from "@nextui-org/react";
-import React from "react";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+
+import { useUrlFilters } from "@/hooks/use-url-filters";
 
 export const CustomCheckboxMutedFindings = () => {
+  const { updateFilter } = useUrlFilters();
+  const searchParams = useSearchParams();
+  const [excludeMuted, setExcludeMuted] = useState(
+    searchParams.get("filter[muted]") === "false",
+  );
+
+  const handleMutedChange = (value: boolean) => {
+    setExcludeMuted(value);
+    updateFilter("muted", value ? "false" : "true");
+  };
+
   return (
-    <Checkbox
-      classNames={{
-        label: "text-small",
-        wrapper: "checkbox-update xl:-mt-8",
-      }}
-      size="md"
-      color="danger"
-      aria-label="Include Mutelist"
-    >
-      Include Mutelist
-    </Checkbox>
+    <div className="flex h-full">
+      <Checkbox
+        classNames={{
+          label: "text-small",
+          wrapper: "checkbox-update",
+        }}
+        size="md"
+        color="primary"
+        aria-label="Include Mutelist"
+        isSelected={excludeMuted}
+        onValueChange={handleMutedChange}
+      >
+        Exclude muted findings
+      </Checkbox>
+    </div>
   );
 };

ui/components/filters/filter-controls.tsx

@@ -4,7 +4,7 @@ import { Spacer } from "@nextui-org/react";
 import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
-import { FilterControlsProps } from "@/types";
+import { FilterOption } from "@/types";
 
 import { DataTableFilterCustom } from "../ui/table";
 import { ClearFiltersButton } from "./clear-filters-button";
@@ -15,6 +15,17 @@ import { CustomRegionSelection } from "./custom-region-selection";
 import { CustomSearchInput } from "./custom-search-input";
 import { CustomSelectProvider } from "./custom-select-provider";
 
+export interface FilterControlsProps {
+  search?: boolean;
+  providers?: boolean;
+  date?: boolean;
+  regions?: boolean;
+  accounts?: boolean;
+  mutedFindings?: boolean;
+  customFilters?: FilterOption[];
+  showClearButton?: boolean;
+}
+
 export const FilterControls: React.FC<FilterControlsProps> = ({
   search = false,
   providers = false,
@@ -22,16 +33,17 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
   regions = false,
   accounts = false,
   mutedFindings = false,
+  showClearButton = true,
   customFilters,
 }) => {
   const searchParams = useSearchParams();
-  const [showClearButton, setShowClearButton] = useState(false);
+  const [hasFilters, setHasFilters] = useState(false);
 
   useEffect(() => {
     const hasFilters = Array.from(searchParams.keys()).some(
       (key) => key.startsWith("filter[") || key === "sort",
     );
-    setShowClearButton(hasFilters);
+    setHasFilters(hasFilters);
   }, [searchParams]);
 
   return (
@@ -43,7 +55,9 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
         {regions && <CustomRegionSelection />}
         {accounts && <CustomAccountSelection />}
         {mutedFindings && <CustomCheckboxMutedFindings />}
-        {!customFilters && showClearButton && <ClearFiltersButton />}
+        {!customFilters && hasFilters && showClearButton && (
+          <ClearFiltersButton />
+        )}
       </div>
       <Spacer y={8} />
       {customFilters && (