From a20f4bb21f02035eb303ceed4b70b8048c55f664 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Thu, 18 Dec 2025 12:01:58 +0100
Subject: [PATCH] feat: revert muted finding filter checkbox behavior

---
 .../_components/advanced-mutelist-form.tsx    | 241 +++++++++---------
 .../custom-checkbox-muted-findings.tsx        |  65 +++--
 .../saml/saml-integration-card.tsx            |  48 +++-
 ui/lib/menu-list.ts                           |   2 +-
 ui/middleware.ts                              |  14 +
 5 files changed, 221 insertions(+), 149 deletions(-)

diff --git a/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx b/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx
index 1251de6f85..6309d1f0af 100644
--- a/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx
+++ b/ui/app/(prowler)/mutelist/_components/advanced-mutelist-form.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Textarea } from "@heroui/input";
+import { Trash2 } from "lucide-react";
 import { useActionState, useEffect, useState } from "react";
 
 import {
@@ -9,9 +10,9 @@ import {
   getMutedFindingsConfig,
   updateMutedFindingsConfig,
 } from "@/actions/processors";
-import { DeleteIcon } from "@/components/icons";
 import { Button, Card, Skeleton } from "@/components/shadcn";
 import { useToast } from "@/components/ui";
+import { CustomAlertModal } from "@/components/ui/custom";
 import { CustomLink } from "@/components/ui/custom/custom-link";
 import { fontMono } from "@/config/fonts";
 import {
@@ -36,10 +37,22 @@ export function AdvancedMutelistForm() {
   }>({ isValid: true });
   const [hasUserStartedTyping, setHasUserStartedTyping] = useState(false);
 
+  // Unified action that decides to create or update based on ID presence
+  const saveConfig = async (
+    _prevState: MutedFindingsConfigActionState,
+    formData: FormData,
+  ): Promise<MutedFindingsConfigActionState> => {
+    const id = formData.get("id");
+    if (id) {
+      return updateMutedFindingsConfig(_prevState, formData);
+    }
+    return createMutedFindingsConfig(_prevState, formData);
+  };
+
   const [state, formAction, isPending] = useActionState<
     MutedFindingsConfigActionState,
     FormData
-  >(config ? updateMutedFindingsConfig : createMutedFindingsConfig, null);
+  >(saveConfig, null);
 
   const { toast } = useToast();
 
@@ -62,6 +75,10 @@ export function AdvancedMutelistForm() {
         title: "Configuration saved successfully",
         description: state.success,
       });
+      // Reload config to get the created/updated data (shows Delete button)
+      getMutedFindingsConfig().then((result) => {
+        setConfig(result || null);
+      });
     } else if (state?.errors?.general) {
       toast({
         variant: "destructive",
@@ -123,7 +140,7 @@ export function AdvancedMutelistForm() {
           <Skeleton className="h-4 w-full" />
           <Skeleton className="h-4 w-3/4" />
           <Skeleton className="h-[400px] w-full" />
-          <div className="flex gap-4">
+          <div className="flex w-full justify-end gap-4">
             <Skeleton className="h-10 w-24" />
             <Skeleton className="h-10 w-24" />
           </div>
@@ -132,23 +149,24 @@ export function AdvancedMutelistForm() {
     );
   }
 
-  if (showDeleteConfirmation) {
-    return (
-      <Card variant="base" className="p-6">
+  return (
+    <>
+      {/* Delete Confirmation Modal */}
+      <CustomAlertModal
+        isOpen={showDeleteConfirmation}
+        onOpenChange={setShowDeleteConfirmation}
+        title="Delete Mutelist Configuration"
+        size="md"
+      >
         <div className="flex flex-col gap-4">
-          <h3 className="text-default-700 text-lg font-semibold">
-            Delete Mutelist Configuration
-          </h3>
           <p className="text-default-600 text-sm">
             Are you sure you want to delete this configuration? This action
             cannot be undone.
           </p>
-          <div className="flex w-full justify-center gap-6">
+          <div className="flex w-full justify-end gap-4">
             <Button
               type="button"
-              aria-label="Cancel"
-              className="w-full bg-transparent"
-              variant="outline"
+              variant="ghost"
               size="lg"
               onClick={() => setShowDeleteConfirmation(false)}
               disabled={isDeleting}
@@ -157,107 +175,111 @@ export function AdvancedMutelistForm() {
             </Button>
             <Button
               type="button"
-              aria-label="Delete"
-              className="w-full"
               variant="destructive"
               size="lg"
               disabled={isDeleting}
               onClick={handleDelete}
             >
-              {isDeleting ? (
-                "Deleting"
-              ) : (
-                <>
-                  <DeleteIcon size={24} />
-                  Delete
-                </>
-              )}
+              <Trash2 className="size-4" />
+              {isDeleting ? "Deleting..." : "Delete"}
             </Button>
           </div>
         </div>
-      </Card>
-    );
-  }
+      </CustomAlertModal>
 
-  return (
-    <Card variant="base" className="p-6">
-      <form action={formAction} className="flex flex-col gap-4">
-        {config && <input type="hidden" name="id" value={config.id} />}
+      <Card variant="base" className="p-6">
+        <form action={formAction} className="flex flex-col gap-4">
+          {config && <input type="hidden" name="id" value={config.id} />}
 
-        <div className="flex flex-col gap-4">
-          <div>
-            <h3 className="text-default-700 mb-2 text-lg font-semibold">
-              Advanced Mutelist Configuration
-            </h3>
-            <ul className="text-default-600 mb-4 list-disc pl-5 text-sm">
-              <li>
-                <strong>
-                  This Mutelist configuration will take effect on the next scan.
-                </strong>
-              </li>
-              <li>
-                Use this for pattern-based muting with wildcards, regions, and
-                tags.
-              </li>
-              <li>
-                Learn more about configuring the Mutelist{" "}
-                <CustomLink
-                  size="sm"
-                  href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-mute-findings"
-                >
-                  here
-                </CustomLink>
-                .
-              </li>
-              <li>
-                A default Mutelist is used to exclude certain predefined
-                resources if no Mutelist is provided.
-              </li>
-            </ul>
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <label
-              htmlFor="configuration"
-              className="text-default-700 text-sm font-medium"
-            >
-              Mutelist Configuration (YAML)
-            </label>
+          <div className="flex flex-col gap-4">
             <div>
-              <Textarea
-                id="configuration"
-                name="configuration"
-                placeholder={defaultMutedFindingsConfig}
-                variant="bordered"
-                value={configText}
-                onChange={(e) => handleConfigChange(e.target.value)}
-                minRows={20}
-                maxRows={20}
-                isInvalid={
-                  (!hasUserStartedTyping && !!state?.errors?.configuration) ||
-                  !yamlValidation.isValid
-                }
-                errorMessage={
-                  (!hasUserStartedTyping && state?.errors?.configuration) ||
-                  (!yamlValidation.isValid ? yamlValidation.error : "")
-                }
-                classNames={{
-                  input: fontMono.className + " text-sm",
-                  base: "min-h-[400px]",
-                  errorMessage: "whitespace-pre-wrap",
-                }}
-              />
-              {yamlValidation.isValid && configText && hasUserStartedTyping && (
-                <div className="text-tiny text-success my-1 flex items-center px-1">
-                  <span>Valid YAML format</span>
-                </div>
-              )}
+              <h3 className="text-default-700 mb-2 text-lg font-semibold">
+                Advanced Mutelist Configuration
+              </h3>
+              <ul className="text-default-600 mb-4 list-disc pl-5 text-sm">
+                <li>
+                  <strong>
+                    This Mutelist configuration will take effect on the next
+                    scan.
+                  </strong>
+                </li>
+                <li>
+                  Use this for pattern-based muting with wildcards, regions, and
+                  tags.
+                </li>
+                <li>
+                  Learn more about configuring the Mutelist{" "}
+                  <CustomLink
+                    size="sm"
+                    href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-mute-findings"
+                  >
+                    here
+                  </CustomLink>
+                  .
+                </li>
+                <li>
+                  A default Mutelist is used to exclude certain predefined
+                  resources if no Mutelist is provided.
+                </li>
+              </ul>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <label
+                htmlFor="configuration"
+                className="text-default-700 text-sm font-medium"
+              >
+                Mutelist Configuration (YAML)
+              </label>
+              <div>
+                <Textarea
+                  id="configuration"
+                  name="configuration"
+                  placeholder={defaultMutedFindingsConfig}
+                  variant="bordered"
+                  value={configText}
+                  onChange={(e) => handleConfigChange(e.target.value)}
+                  minRows={20}
+                  maxRows={20}
+                  isInvalid={
+                    (!hasUserStartedTyping && !!state?.errors?.configuration) ||
+                    !yamlValidation.isValid
+                  }
+                  errorMessage={
+                    (!hasUserStartedTyping && state?.errors?.configuration) ||
+                    (!yamlValidation.isValid ? yamlValidation.error : "")
+                  }
+                  classNames={{
+                    input: fontMono.className + " text-sm",
+                    base: "min-h-[400px]",
+                    errorMessage: "whitespace-pre-wrap",
+                  }}
+                />
+                {yamlValidation.isValid &&
+                  configText &&
+                  hasUserStartedTyping && (
+                    <div className="text-tiny text-success my-1 flex items-center px-1">
+                      <span>Valid YAML format</span>
+                    </div>
+                  )}
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="flex flex-col gap-4">
           <div className="flex w-full justify-end gap-4">
+            {config && (
+              <Button
+                type="button"
+                aria-label="Delete Configuration"
+                variant="outline"
+                size="lg"
+                onClick={() => setShowDeleteConfirmation(true)}
+                disabled={isPending || isDeleting}
+              >
+                <Trash2 className="size-4" />
+                Delete
+              </Button>
+            )}
             <Button
               type="submit"
               size="lg"
@@ -268,23 +290,8 @@ export function AdvancedMutelistForm() {
               {isPending ? "Saving..." : config ? "Update" : "Save"}
             </Button>
           </div>
-
-          {config && (
-            <Button
-              type="button"
-              aria-label="Delete Configuration"
-              className="w-full"
-              variant="outline"
-              size="default"
-              onClick={() => setShowDeleteConfirmation(true)}
-              disabled={isPending}
-            >
-              <DeleteIcon size={20} />
-              Delete Configuration
-            </Button>
-          )}
-        </div>
-      </form>
-    </Card>
+        </form>
+      </Card>
+    </>
   );
 }
diff --git a/ui/components/filters/custom-checkbox-muted-findings.tsx b/ui/components/filters/custom-checkbox-muted-findings.tsx
index ee092a4227..d21bda2877 100644
--- a/ui/components/filters/custom-checkbox-muted-findings.tsx
+++ b/ui/components/filters/custom-checkbox-muted-findings.tsx
@@ -1,44 +1,57 @@
 "use client";
 
-import { Checkbox } from "@heroui/checkbox";
-import { useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
-import { useUrlFilters } from "@/hooks/use-url-filters";
+import { Checkbox } from "@/components/shadcn";
 
 export const CustomCheckboxMutedFindings = () => {
-  const { updateFilter, clearFilter } = useUrlFilters();
+  const router = useRouter();
+  const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [excludeMuted, setExcludeMuted] = useState(
-    searchParams.get("filter[muted]") === "false",
-  );
 
-  const handleMutedChange = (value: boolean) => {
-    setExcludeMuted(value);
+  // Get the current muted filter value from URL
+  // Middleware ensures filter[muted] is always present when navigating to /findings
+  const mutedFilterValue = searchParams.get("filter[muted]");
 
-    // Only URL  update if value is false else remove filter
-    if (value) {
-      updateFilter("muted", "false");
+  // URL states:
+  // - filter[muted]=false → Exclude muted (checkbox UNCHECKED)
+  // - filter[muted]=include → Include muted (checkbox CHECKED)
+  const includeMuted = mutedFilterValue === "include";
+
+  const handleMutedChange = (checked: boolean | "indeterminate") => {
+    const isChecked = checked === true;
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (isChecked) {
+      // Include muted: set special value (API will ignore invalid value and show all)
+      params.set("filter[muted]", "include");
     } else {
-      clearFilter("muted");
+      // Exclude muted: apply filter to show only non-muted
+      params.set("filter[muted]", "false");
     }
+
+    // Reset to page 1 when changing filter
+    if (params.has("page")) {
+      params.set("page", "1");
+    }
+
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
   };
 
   return (
-    <div className="flex h-full text-nowrap">
+    <div className="flex h-full items-center gap-2 text-nowrap">
       <Checkbox
-        classNames={{
-          label: "text-small",
-          wrapper: "checkbox-update",
-        }}
-        size="md"
-        color="primary"
-        aria-label="Include Mutelist"
-        isSelected={excludeMuted}
-        onValueChange={handleMutedChange}
+        id="include-muted"
+        checked={includeMuted}
+        onCheckedChange={handleMutedChange}
+        aria-label="Include muted findings"
+      />
+      <label
+        htmlFor="include-muted"
+        className="cursor-pointer text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
-        Exclude muted findings
-      </Checkbox>
+        Include muted findings
+      </label>
     </div>
   );
 };
diff --git a/ui/components/integrations/saml/saml-integration-card.tsx b/ui/components/integrations/saml/saml-integration-card.tsx
index 8cafd10d87..ca5c752154 100644
--- a/ui/components/integrations/saml/saml-integration-card.tsx
+++ b/ui/components/integrations/saml/saml-integration-card.tsx
@@ -14,6 +14,7 @@ import { SamlConfigForm } from "./saml-config-form";
 
 export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
   const [isSamlModalOpen, setIsSamlModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const { toast } = useToast();
   const id = samlConfig?.id;
@@ -30,6 +31,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
           title: "SAML configuration removed",
           description: result.success,
         });
+        setIsDeleteModalOpen(false);
       } else if (result.errors?.general) {
         toast({
           variant: "destructive",
@@ -37,7 +39,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
           description: result.errors.general,
         });
       }
-    } catch (error) {
+    } catch {
       toast({
         variant: "destructive",
         title: "Error",
@@ -50,6 +52,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
 
   return (
     <>
+      {/* Configure SAML Modal */}
       <CustomAlertModal
         isOpen={isSamlModalOpen}
         onOpenChange={setIsSamlModalOpen}
@@ -61,6 +64,42 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
         />
       </CustomAlertModal>
 
+      {/* Delete Confirmation Modal */}
+      <CustomAlertModal
+        isOpen={isDeleteModalOpen}
+        onOpenChange={setIsDeleteModalOpen}
+        title="Remove SAML Configuration"
+        size="md"
+      >
+        <div className="flex flex-col gap-4">
+          <p className="text-default-600 text-sm">
+            Are you sure you want to remove the SAML SSO configuration? Users
+            will no longer be able to sign in using SAML.
+          </p>
+          <div className="flex w-full justify-end gap-4">
+            <Button
+              type="button"
+              variant="ghost"
+              size="lg"
+              onClick={() => setIsDeleteModalOpen(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              size="lg"
+              disabled={isDeleting}
+              onClick={handleRemoveSaml}
+            >
+              <Trash2Icon className="size-4" />
+              {isDeleting ? "Removing..." : "Remove"}
+            </Button>
+          </div>
+        </div>
+      </CustomAlertModal>
+
       <Card variant="base" padding="lg">
         <CardHeader>
           <div className="flex flex-col gap-1">
@@ -98,11 +137,10 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
                 <Button
                   size="sm"
                   variant="destructive"
-                  disabled={isDeleting}
-                  onClick={handleRemoveSaml}
+                  onClick={() => setIsDeleteModalOpen(true)}
                 >
-                  {!isDeleting && <Trash2Icon size={16} />}
-                  {isDeleting ? "Removing..." : "Remove"}
+                  <Trash2Icon size={16} />
+                  Remove
                 </Button>
               )}
             </div>
diff --git a/ui/lib/menu-list.ts b/ui/lib/menu-list.ts
index 46381d4522..70cd4400f2 100644
--- a/ui/lib/menu-list.ts
+++ b/ui/lib/menu-list.ts
@@ -70,7 +70,7 @@ export const getMenuList = ({ pathname }: MenuListOptions): GroupProps[] => {
       groupLabel: "",
       menus: [
         {
-          href: "/findings",
+          href: "/findings?filter[muted]=false",
           label: "Findings",
           icon: Tag,
         },
diff --git a/ui/middleware.ts b/ui/middleware.ts
index 83e5bb9c92..603810c8ee 100644
--- a/ui/middleware.ts
+++ b/ui/middleware.ts
@@ -49,6 +49,20 @@ export default auth((req: NextRequest & { auth: any }) => {
     }
   }
 
+  // Redirect /findings to include default muted filter if not present
+  if (
+    pathname === "/findings" &&
+    !req.nextUrl.searchParams.has("filter[muted]")
+  ) {
+    const findingsUrl = new URL("/findings", req.url);
+    // Preserve existing search params
+    req.nextUrl.searchParams.forEach((value, key) => {
+      findingsUrl.searchParams.set(key, value);
+    });
+    findingsUrl.searchParams.set("filter[muted]", "false");
+    return NextResponse.redirect(findingsUrl);
+  }
+
   return NextResponse.next();
 });