feat: revert muted finding filter checkbox behavior

This commit is contained in:
alejandrobailo
2025-12-18 12:01:58 +01:00
parent 0d0dabe166
commit a20f4bb21f
5 changed files with 221 additions and 149 deletions

View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { Textarea } from "@heroui/input"; import { Textarea } from "@heroui/input";
import { Trash2 } from "lucide-react";
import { useActionState, useEffect, useState } from "react"; import { useActionState, useEffect, useState } from "react";
import { import {
@@ -9,9 +10,9 @@ import {
getMutedFindingsConfig, getMutedFindingsConfig,
updateMutedFindingsConfig, updateMutedFindingsConfig,
} from "@/actions/processors"; } from "@/actions/processors";
import { DeleteIcon } from "@/components/icons";
import { Button, Card, Skeleton } from "@/components/shadcn"; import { Button, Card, Skeleton } from "@/components/shadcn";
import { useToast } from "@/components/ui"; import { useToast } from "@/components/ui";
import { CustomAlertModal } from "@/components/ui/custom";
import { CustomLink } from "@/components/ui/custom/custom-link"; import { CustomLink } from "@/components/ui/custom/custom-link";
import { fontMono } from "@/config/fonts"; import { fontMono } from "@/config/fonts";
import { import {
@@ -36,10 +37,22 @@ export function AdvancedMutelistForm() {
}>({ isValid: true }); }>({ isValid: true });
const [hasUserStartedTyping, setHasUserStartedTyping] = useState(false); 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< const [state, formAction, isPending] = useActionState<
MutedFindingsConfigActionState, MutedFindingsConfigActionState,
FormData FormData
>(config ? updateMutedFindingsConfig : createMutedFindingsConfig, null); >(saveConfig, null);
const { toast } = useToast(); const { toast } = useToast();
@@ -62,6 +75,10 @@ export function AdvancedMutelistForm() {
title: "Configuration saved successfully", title: "Configuration saved successfully",
description: state.success, 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) { } else if (state?.errors?.general) {
toast({ toast({
variant: "destructive", variant: "destructive",
@@ -123,7 +140,7 @@ export function AdvancedMutelistForm() {
<Skeleton className="h-4 w-full" /> <Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" /> <Skeleton className="h-4 w-3/4" />
<Skeleton className="h-[400px] w-full" /> <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" />
<Skeleton className="h-10 w-24" /> <Skeleton className="h-10 w-24" />
</div> </div>
@@ -132,23 +149,24 @@ export function AdvancedMutelistForm() {
); );
} }
if (showDeleteConfirmation) { return (
return ( <>
<Card variant="base" className="p-6"> {/* Delete Confirmation Modal */}
<CustomAlertModal
isOpen={showDeleteConfirmation}
onOpenChange={setShowDeleteConfirmation}
title="Delete Mutelist Configuration"
size="md"
>
<div className="flex flex-col gap-4"> <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"> <p className="text-default-600 text-sm">
Are you sure you want to delete this configuration? This action Are you sure you want to delete this configuration? This action
cannot be undone. cannot be undone.
</p> </p>
<div className="flex w-full justify-center gap-6"> <div className="flex w-full justify-end gap-4">
<Button <Button
type="button" type="button"
aria-label="Cancel" variant="ghost"
className="w-full bg-transparent"
variant="outline"
size="lg" size="lg"
onClick={() => setShowDeleteConfirmation(false)} onClick={() => setShowDeleteConfirmation(false)}
disabled={isDeleting} disabled={isDeleting}
@@ -157,107 +175,111 @@ export function AdvancedMutelistForm() {
</Button> </Button>
<Button <Button
type="button" type="button"
aria-label="Delete"
className="w-full"
variant="destructive" variant="destructive"
size="lg" size="lg"
disabled={isDeleting} disabled={isDeleting}
onClick={handleDelete} onClick={handleDelete}
> >
{isDeleting ? ( <Trash2 className="size-4" />
"Deleting" {isDeleting ? "Deleting..." : "Delete"}
) : (
<>
<DeleteIcon size={24} />
Delete
</>
)}
</Button> </Button>
</div> </div>
</div> </div>
</Card> </CustomAlertModal>
);
}
return ( <Card variant="base" className="p-6">
<Card variant="base" className="p-6"> <form action={formAction} className="flex flex-col gap-4">
<form action={formAction} className="flex flex-col gap-4"> {config && <input type="hidden" name="id" value={config.id} />}
{config && <input type="hidden" name="id" value={config.id} />}
<div className="flex flex-col gap-4"> <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> <div>
<Textarea <h3 className="text-default-700 mb-2 text-lg font-semibold">
id="configuration" Advanced Mutelist Configuration
name="configuration" </h3>
placeholder={defaultMutedFindingsConfig} <ul className="text-default-600 mb-4 list-disc pl-5 text-sm">
variant="bordered" <li>
value={configText} <strong>
onChange={(e) => handleConfigChange(e.target.value)} This Mutelist configuration will take effect on the next
minRows={20} scan.
maxRows={20} </strong>
isInvalid={ </li>
(!hasUserStartedTyping && !!state?.errors?.configuration) || <li>
!yamlValidation.isValid Use this for pattern-based muting with wildcards, regions, and
} tags.
errorMessage={ </li>
(!hasUserStartedTyping && state?.errors?.configuration) || <li>
(!yamlValidation.isValid ? yamlValidation.error : "") Learn more about configuring the Mutelist{" "}
} <CustomLink
classNames={{ size="sm"
input: fontMono.className + " text-sm", href="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-mute-findings"
base: "min-h-[400px]", >
errorMessage: "whitespace-pre-wrap", here
}} </CustomLink>
/> .
{yamlValidation.isValid && configText && hasUserStartedTyping && ( </li>
<div className="text-tiny text-success my-1 flex items-center px-1"> <li>
<span>Valid YAML format</span> A default Mutelist is used to exclude certain predefined
</div> 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>
</div>
<div className="flex flex-col gap-4">
<div className="flex w-full justify-end 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 <Button
type="submit" type="submit"
size="lg" size="lg"
@@ -268,23 +290,8 @@ export function AdvancedMutelistForm() {
{isPending ? "Saving..." : config ? "Update" : "Save"} {isPending ? "Saving..." : config ? "Update" : "Save"}
</Button> </Button>
</div> </div>
</form>
{config && ( </Card>
<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>
); );
} }

View File

@@ -1,44 +1,57 @@
"use client"; "use client";
import { Checkbox } from "@heroui/checkbox"; import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { useState } from "react";
import { useUrlFilters } from "@/hooks/use-url-filters"; import { Checkbox } from "@/components/shadcn";
export const CustomCheckboxMutedFindings = () => { export const CustomCheckboxMutedFindings = () => {
const { updateFilter, clearFilter } = useUrlFilters(); const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [excludeMuted, setExcludeMuted] = useState(
searchParams.get("filter[muted]") === "false",
);
const handleMutedChange = (value: boolean) => { // Get the current muted filter value from URL
setExcludeMuted(value); // 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 // URL states:
if (value) { // - filter[muted]=false → Exclude muted (checkbox UNCHECKED)
updateFilter("muted", "false"); // - 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 { } 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 ( return (
<div className="flex h-full text-nowrap"> <div className="flex h-full items-center gap-2 text-nowrap">
<Checkbox <Checkbox
classNames={{ id="include-muted"
label: "text-small", checked={includeMuted}
wrapper: "checkbox-update", onCheckedChange={handleMutedChange}
}} aria-label="Include muted findings"
size="md" />
color="primary" <label
aria-label="Include Mutelist" htmlFor="include-muted"
isSelected={excludeMuted} className="cursor-pointer text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
onValueChange={handleMutedChange}
> >
Exclude muted findings Include muted findings
</Checkbox> </label>
</div> </div>
); );
}; };

View File

@@ -14,6 +14,7 @@ import { SamlConfigForm } from "./saml-config-form";
export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => { export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
const [isSamlModalOpen, setIsSamlModalOpen] = useState(false); const [isSamlModalOpen, setIsSamlModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const { toast } = useToast(); const { toast } = useToast();
const id = samlConfig?.id; const id = samlConfig?.id;
@@ -30,6 +31,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
title: "SAML configuration removed", title: "SAML configuration removed",
description: result.success, description: result.success,
}); });
setIsDeleteModalOpen(false);
} else if (result.errors?.general) { } else if (result.errors?.general) {
toast({ toast({
variant: "destructive", variant: "destructive",
@@ -37,7 +39,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
description: result.errors.general, description: result.errors.general,
}); });
} }
} catch (error) { } catch {
toast({ toast({
variant: "destructive", variant: "destructive",
title: "Error", title: "Error",
@@ -50,6 +52,7 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
return ( return (
<> <>
{/* Configure SAML Modal */}
<CustomAlertModal <CustomAlertModal
isOpen={isSamlModalOpen} isOpen={isSamlModalOpen}
onOpenChange={setIsSamlModalOpen} onOpenChange={setIsSamlModalOpen}
@@ -61,6 +64,42 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
/> />
</CustomAlertModal> </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"> <Card variant="base" padding="lg">
<CardHeader> <CardHeader>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
@@ -98,11 +137,10 @@ export const SamlIntegrationCard = ({ samlConfig }: { samlConfig?: any }) => {
<Button <Button
size="sm" size="sm"
variant="destructive" variant="destructive"
disabled={isDeleting} onClick={() => setIsDeleteModalOpen(true)}
onClick={handleRemoveSaml}
> >
{!isDeleting && <Trash2Icon size={16} />} <Trash2Icon size={16} />
{isDeleting ? "Removing..." : "Remove"} Remove
</Button> </Button>
)} )}
</div> </div>

View File

@@ -70,7 +70,7 @@ export const getMenuList = ({ pathname }: MenuListOptions): GroupProps[] => {
groupLabel: "", groupLabel: "",
menus: [ menus: [
{ {
href: "/findings", href: "/findings?filter[muted]=false",
label: "Findings", label: "Findings",
icon: Tag, icon: Tag,
}, },

View File

@@ -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(); return NextResponse.next();
}); });