mirror of
https://github.com/prowler-cloud/prowler.git
synced 2025-12-19 05:17:47 +00:00
feat: revert muted finding filter checkbox behavior
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -70,7 +70,7 @@ export const getMenuList = ({ pathname }: MenuListOptions): GroupProps[] => {
|
||||
groupLabel: "",
|
||||
menus: [
|
||||
{
|
||||
href: "/findings",
|
||||
href: "/findings?filter[muted]=false",
|
||||
label: "Findings",
|
||||
icon: Tag,
|
||||
},
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user