From 43918cc947fae3746416a52aa7797a2e8d885d1d Mon Sep 17 00:00:00 2001 From: Toni de la Fuente Date: Wed, 7 Jan 2026 22:33:04 +0100 Subject: [PATCH] feat(ui): add SNS integration UI components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add complete UI implementation for Amazon SNS integration with comprehensive management interface for sending email alerts. Features: - SNS integration form with topic ARN configuration - AWS credentials support (access keys, role ARN, session tokens) - Custom credentials toggle for tenant/integration-level auth - CRUD operations (create, edit, delete, toggle enable/disable) - Connection testing with real-time feedback - Integration manager with pagination support - Filter support (severity, provider, region, resource name/tags) UI Components: - sns-integration-form.tsx: Form component with AWS credentials config - sns-integration-card.tsx: Card for main integrations page - sns-integrations-manager.tsx: Manager with list view and actions - sns/page.tsx: Dedicated SNS integrations management page Updates: - Add SNS schemas to ui/types/integrations.ts with Zod validation - Export SNS components from ui/components/integrations/index.ts - Add SNS card to main integrations page - Fix IntegrationType to use const-based approach per AGENTS.md line 13 - Fix Jira email validation to use correct Zod v4 syntax (z.email) - Use proper TypeScript types (removed any types per AGENTS.md) - Fix session_duration to use z.coerce.number() for string-to-number conversion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- ui/app/(prowler)/integrations/page.tsx | 4 + ui/app/(prowler)/integrations/sns/page.tsx | 93 +++++ ui/components/integrations/index.ts | 3 + .../integrations/sns/sns-integration-card.tsx | 61 +++ .../integrations/sns/sns-integration-form.tsx | 386 +++++++++++++++++ .../sns/sns-integrations-manager.tsx | 393 ++++++++++++++++++ ui/types/integrations.ts | 90 +++- 7 files changed, 1029 insertions(+), 1 deletion(-) create mode 100644 ui/app/(prowler)/integrations/sns/page.tsx create mode 100644 ui/components/integrations/sns/sns-integration-card.tsx create mode 100644 ui/components/integrations/sns/sns-integration-form.tsx create mode 100644 ui/components/integrations/sns/sns-integrations-manager.tsx diff --git a/ui/app/(prowler)/integrations/page.tsx b/ui/app/(prowler)/integrations/page.tsx index d3f733d658..810898cb41 100644 --- a/ui/app/(prowler)/integrations/page.tsx +++ b/ui/app/(prowler)/integrations/page.tsx @@ -3,6 +3,7 @@ import { JiraIntegrationCard, S3IntegrationCard, SecurityHubIntegrationCard, + SNSIntegrationCard, SsoLinkCard, } from "@/components/integrations"; import { ContentLayout } from "@/components/ui"; @@ -25,6 +26,9 @@ export default async function Integrations() { {/* AWS Security Hub Integration */} + {/* Amazon SNS Integration */} + + {/* Jira Integration */} diff --git a/ui/app/(prowler)/integrations/sns/page.tsx b/ui/app/(prowler)/integrations/sns/page.tsx new file mode 100644 index 0000000000..695248d67e --- /dev/null +++ b/ui/app/(prowler)/integrations/sns/page.tsx @@ -0,0 +1,93 @@ +import { getIntegrations } from "@/actions/integrations"; +import { SNSIntegrationsManager } from "@/components/integrations/sns/sns-integrations-manager"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/shadcn"; +import { ContentLayout } from "@/components/ui"; + +interface SNSIntegrationsProps { + searchParams: Promise<{ [key: string]: string | string[] | undefined }>; +} + +export default async function SNSIntegrations({ + searchParams, +}: SNSIntegrationsProps) { + const resolvedSearchParams = await searchParams; + const page = parseInt(resolvedSearchParams.page?.toString() || "1", 10); + const pageSize = parseInt( + resolvedSearchParams.pageSize?.toString() || "10", + 10, + ); + const sort = resolvedSearchParams.sort?.toString(); + + // Extract all filter parameters + const filters = Object.fromEntries( + Object.entries(resolvedSearchParams).filter(([key]) => + key.startsWith("filter["), + ), + ); + + const urlSearchParams = new URLSearchParams(); + urlSearchParams.set("filter[integration_type]", "sns"); + urlSearchParams.set("page[number]", page.toString()); + urlSearchParams.set("page[size]", pageSize.toString()); + + if (sort) { + urlSearchParams.set("sort", sort); + } + + // Add any additional filters + Object.entries(filters).forEach(([key, value]) => { + if (value !== undefined && key !== "filter[integration_type]") { + const stringValue = Array.isArray(value) ? value[0] : String(value); + urlSearchParams.set(key, stringValue); + } + }); + + const [integrations] = await Promise.all([getIntegrations(urlSearchParams)]); + + const snsIntegrations = integrations?.data || []; + const metadata = integrations?.meta; + + return ( + +
+
+

+ Configure Amazon SNS integration to send email alerts for security + findings via SNS topics. +

+ + + + Features + + +
    +
  • + + Email alert notifications +
    • +
  • + + Multi-Cloud support +
    • +
  • + + Severity-based filtering +
    • +
  • + + Region and tag filtering +
    • +
+ + +
+ + +
+ + ); +} diff --git a/ui/components/integrations/index.ts b/ui/components/integrations/index.ts index d46942d57c..90497118ed 100644 --- a/ui/components/integrations/index.ts +++ b/ui/components/integrations/index.ts @@ -12,4 +12,7 @@ export * from "./security-hub/security-hub-integration-card"; export * from "./security-hub/security-hub-integration-form"; export * from "./security-hub/security-hub-integrations-manager"; export * from "./shared"; +export * from "./sns/sns-integration-card"; +export * from "./sns/sns-integration-form"; +export * from "./sns/sns-integrations-manager"; export * from "./sso/sso-link-card"; diff --git a/ui/components/integrations/sns/sns-integration-card.tsx b/ui/components/integrations/sns/sns-integration-card.tsx new file mode 100644 index 0000000000..297512de17 --- /dev/null +++ b/ui/components/integrations/sns/sns-integration-card.tsx @@ -0,0 +1,61 @@ +"use client"; + +import { MailIcon, SettingsIcon } from "lucide-react"; +import Link from "next/link"; + +import { Button } from "@/components/shadcn"; +import { CustomLink } from "@/components/ui/custom/custom-link"; + +import { Card, CardContent, CardHeader } from "../../shadcn"; + +export const SNSIntegrationCard = () => { + return ( + + +
+
+
+ +
+
+

+ Amazon SNS +

+
+

+ Send email alerts for security findings via SNS. +

+ + Learn more + +
+
+
+
+ +
+
+ + +

+ Configure Amazon SNS topics to send formatted email alerts for + security findings with support for filtering by severity, provider, + region, and resource tags. +

+ + + ); +}; diff --git a/ui/components/integrations/sns/sns-integration-form.tsx b/ui/components/integrations/sns/sns-integration-form.tsx new file mode 100644 index 0000000000..892b6f1008 --- /dev/null +++ b/ui/components/integrations/sns/sns-integration-form.tsx @@ -0,0 +1,386 @@ +"use client"; + +import { Checkbox } from "@heroui/checkbox"; +import { Divider } from "@heroui/divider"; +import { Radio, RadioGroup } from "@heroui/radio"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useSession } from "next-auth/react"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +import { createIntegration, updateIntegration } from "@/actions/integrations"; +import { AWSRoleCredentialsForm } from "@/components/providers/workflow/forms/select-credentials-type/aws/credentials-type/aws-role-credentials-form"; +import { useToast } from "@/components/ui"; +import { CustomInput } from "@/components/ui/custom"; +import { CustomLink } from "@/components/ui/custom/custom-link"; +import { Form, FormControl, FormField } from "@/components/ui/form"; +import { FormButtons } from "@/components/ui/form/form-buttons"; +import { getAWSCredentialsTemplateLinks } from "@/lib"; +import { + editSNSIntegrationFormSchema, + IntegrationProps, + snsIntegrationFormSchema, + type SNSCredentialsPayload, +} from "@/types/integrations"; + +interface SNSIntegrationFormProps { + integration?: IntegrationProps | null; + onSuccess: (integrationId?: string, shouldTestConnection?: boolean) => void; + onCancel: () => void; + editMode?: "configuration" | "credentials" | null; +} + +export const SNSIntegrationForm = ({ + integration, + onSuccess, + onCancel, + editMode = null, +}: SNSIntegrationFormProps) => { + const { data: session } = useSession(); + const { toast } = useToast(); + const isEditing = !!integration; + const isCreating = !isEditing; + const isEditingConfig = editMode === "configuration"; + const isEditingCredentials = editMode === "credentials"; + + const form = useForm({ + resolver: zodResolver( + isEditingCredentials || isCreating + ? snsIntegrationFormSchema + : editSNSIntegrationFormSchema, + ), + defaultValues: { + integration_type: "sns" as const, + topic_arn: integration?.attributes.configuration.topic_arn || "", + use_custom_credentials: false, + enabled: integration?.attributes.enabled ?? true, + credentials_type: "access-secret-key" as const, + aws_access_key_id: "", + aws_secret_access_key: "", + aws_session_token: "", + role_arn: "", + external_id: session?.tenantId || "", + role_session_name: "", + session_duration: "", + show_role_section: false, + }, + }); + + const isLoading = form.formState.isSubmitting; + const useCustomCredentials = form.watch("use_custom_credentials"); + + const buildCredentials = ( + values: z.infer, + ): SNSCredentialsPayload => { + const credentials: SNSCredentialsPayload = {}; + + if (values.role_arn && values.role_arn.trim() !== "") { + credentials.role_arn = values.role_arn; + credentials.external_id = values.external_id; + + if (values.role_session_name) + credentials.role_session_name = values.role_session_name; + if (values.session_duration) + credentials.session_duration = + parseInt(values.session_duration, 10) || 3600; + } + + if (values.credentials_type === "access-secret-key") { + credentials.aws_access_key_id = values.aws_access_key_id; + credentials.aws_secret_access_key = values.aws_secret_access_key; + + if (values.aws_session_token) + credentials.aws_session_token = values.aws_session_token; + } + + return credentials; + }; + + const onSubmit = async (values: z.infer) => { + try { + const formData = new FormData(); + + // Add integration type + formData.append("integration_type", "sns"); + + // Configuration (topic ARN) + if (!isEditingCredentials) { + const configuration = { + topic_arn: values.topic_arn, + }; + formData.append("configuration", JSON.stringify(configuration)); + } + + // Credentials + if (!isEditingConfig) { + const credentials: SNSCredentialsPayload = + useCustomCredentials || isCreating || isEditingCredentials + ? buildCredentials(values) + : {}; + + if (Object.keys(credentials).length > 0) { + formData.append("credentials", JSON.stringify(credentials)); + } + } + + // For creation, we need to provide providers (empty array for SNS) + if (isCreating) { + formData.append("providers", JSON.stringify([])); + formData.append("enabled", JSON.stringify(values.enabled)); + } + + let result; + if (isEditing) { + result = await updateIntegration(integration.id, formData); + } else { + result = await createIntegration(formData); + } + + if (result.success && result.data) { + toast({ + title: isEditing + ? "SNS Integration Updated" + : "SNS Integration Created", + description: isEditing + ? "Your SNS integration has been updated successfully." + : "Your SNS integration has been created successfully.", + variant: "success", + }); + onSuccess(result.data.id, !isEditing); + } else { + toast({ + variant: "destructive", + title: "Error", + description: result.error || "Failed to save SNS integration.", + }); + } + } catch (error) { + console.error("SNS Integration form error:", error); + toast({ + variant: "destructive", + title: "Error", + description: "An unexpected error occurred. Please try again.", + }); + } + }; + + return ( +
+ + {/* Configuration Section */} + {!isEditingCredentials && ( +
+
+

Configuration

+

+ Configure your Amazon SNS topic for sending email alerts +

+
+ + ( + + + + )} + /> + + {isCreating && ( + ( + + + Enable integration + + + )} + /> + )} +
+ )} + + {/* Credentials Section */} + {!isEditingConfig && ( +
+ + +
+

AWS Credentials

+

+ Configure AWS credentials to access the SNS topic +

+
+ + {(isCreating || isEditingCredentials) && ( + ( + + + + Use custom AWS credentials + + + + )} + /> + )} + + {(useCustomCredentials || isEditingCredentials) && ( +
+ ( + + + + AWS SDK Default Credentials + + + Access Key & Secret Key + + + + )} + /> + + {form.watch("credentials_type") === "access-secret-key" && ( +
+ ( + + + + )} + /> + + ( + + + + )} + /> + + ( + + + + )} + /> +
+ )} + + + + + form.setValue("show_role_section", value) + } + /> +
+ )} + + {!useCustomCredentials && isCreating && ( +
+

+ The integration will use the default AWS credentials from the + provider configuration. Make sure the provider has access to + the SNS topic. +

+
+ )} + +
+

Need help setting up AWS credentials?

+
+ {getAWSCredentialsTemplateLinks("sns").map((link) => ( + + {link.label} + + ))} +
+
+
+ )} + + + + + ); +}; diff --git a/ui/components/integrations/sns/sns-integrations-manager.tsx b/ui/components/integrations/sns/sns-integrations-manager.tsx new file mode 100644 index 0000000000..49d2553424 --- /dev/null +++ b/ui/components/integrations/sns/sns-integrations-manager.tsx @@ -0,0 +1,393 @@ +"use client"; + +import { format } from "date-fns"; +import { MailIcon, PlusIcon, Trash2Icon } from "lucide-react"; +import { useState } from "react"; + +import { + deleteIntegration, + testIntegrationConnection, + updateIntegration, +} from "@/actions/integrations"; +import { + IntegrationActionButtons, + IntegrationCardHeader, + IntegrationSkeleton, +} from "@/components/integrations/shared"; +import { Button } from "@/components/shadcn"; +import { useToast } from "@/components/ui"; +import { CustomAlertModal } from "@/components/ui/custom"; +import { DataTablePagination } from "@/components/ui/table/data-table-pagination"; +import { triggerTestConnectionWithDelay } from "@/lib/integrations/test-connection-helper"; +import { MetaDataProps } from "@/types"; +import { IntegrationProps } from "@/types/integrations"; + +import { Card, CardContent, CardHeader } from "../../shadcn"; +import { SNSIntegrationForm } from "./sns-integration-form"; + +interface SNSIntegrationsManagerProps { + integrations: IntegrationProps[]; + metadata?: MetaDataProps; +} + +export const SNSIntegrationsManager = ({ + integrations, + metadata, +}: SNSIntegrationsManagerProps) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [editingIntegration, setEditingIntegration] = + useState(null); + const [editMode, setEditMode] = useState< + "configuration" | "credentials" | null + >(null); + const [isDeleting, setIsDeleting] = useState(null); + const [isTesting, setIsTesting] = useState(null); + const [isOperationLoading, setIsOperationLoading] = useState(false); + const [isDeleteOpen, setIsDeleteOpen] = useState(false); + const [integrationToDelete, setIntegrationToDelete] = + useState(null); + const { toast } = useToast(); + + const handleAddIntegration = () => { + setEditingIntegration(null); + setEditMode(null); + setIsModalOpen(true); + }; + + const handleEditConfiguration = (integration: IntegrationProps) => { + setEditingIntegration(integration); + setEditMode("configuration"); + setIsModalOpen(true); + }; + + const handleEditCredentials = (integration: IntegrationProps) => { + setEditingIntegration(integration); + setEditMode("credentials"); + setIsModalOpen(true); + }; + + const handleOpenDeleteModal = (integration: IntegrationProps) => { + setIntegrationToDelete(integration); + setIsDeleteOpen(true); + }; + + const handleDeleteIntegration = async (id: string) => { + setIsDeleting(id); + try { + const result = await deleteIntegration(id, "sns"); + + if (result.success) { + toast({ + title: "Success!", + description: "SNS integration deleted successfully.", + }); + } else if (result.error) { + toast({ + variant: "destructive", + title: "Delete Failed", + description: result.error, + }); + } + } catch (error) { + toast({ + variant: "destructive", + title: "Error", + description: "Failed to delete SNS integration. Please try again.", + }); + } finally { + setIsDeleting(null); + setIsDeleteOpen(false); + setIntegrationToDelete(null); + } + }; + + const handleTestConnection = async (id: string) => { + setIsTesting(id); + try { + const result = await testIntegrationConnection(id); + + if (result.success) { + toast({ + title: "Connection test successful!", + description: + result.message || "Connection test completed successfully.", + }); + } else if (result.error) { + toast({ + variant: "destructive", + title: "Connection test failed", + description: result.error, + }); + } + } catch (error) { + toast({ + variant: "destructive", + title: "Error", + description: "Failed to test connection. Please try again.", + }); + } finally { + setIsTesting(null); + } + }; + + const handleToggleEnabled = async (integration: IntegrationProps) => { + try { + const newEnabledState = !integration.attributes.enabled; + const formData = new FormData(); + formData.append( + "integration_type", + integration.attributes.integration_type, + ); + formData.append("enabled", JSON.stringify(newEnabledState)); + + const result = await updateIntegration(integration.id, formData); + + if (result && "success" in result) { + toast({ + title: "Success!", + description: `Integration ${newEnabledState ? "enabled" : "disabled"} successfully.`, + }); + + // If enabling, trigger test connection automatically + if (newEnabledState) { + setIsTesting(integration.id); + + triggerTestConnectionWithDelay( + integration.id, + true, + "sns", + toast, + 500, + () => { + setIsTesting(null); + }, + ); + } + } else if (result && "error" in result) { + toast({ + variant: "destructive", + title: "Toggle Failed", + description: result.error, + }); + } + } catch (error) { + toast({ + variant: "destructive", + title: "Error", + description: "Failed to toggle integration. Please try again.", + }); + } + }; + + const handleModalClose = () => { + setIsModalOpen(false); + setEditingIntegration(null); + setEditMode(null); + }; + + const handleFormSuccess = async ( + integrationId?: string, + shouldTestConnection?: boolean, + ) => { + // Close the modal immediately + setIsModalOpen(false); + setEditingIntegration(null); + setEditMode(null); + setIsOperationLoading(true); + + // Set testing state for server-triggered test connections + if (integrationId && shouldTestConnection) { + setIsTesting(integrationId); + } + + // Trigger test connection if needed + triggerTestConnectionWithDelay( + integrationId, + shouldTestConnection, + "sns", + toast, + 200, + () => { + // Clear testing state when server-triggered test completes + setIsTesting(null); + setIsOperationLoading(false); + }, + ); + }; + + return ( +
+
+
+

+ Manage SNS Integrations +

+

+ Configure Amazon SNS topics to send email alerts for security + findings +

+
+ +
+ +
+ {integrations.length === 0 ? ( + + +
+ +

+ No SNS integrations configured +

+

+ Add your first SNS integration to start sending email alerts + for security findings +

+ +
+ + + ) : ( + <> + {integrations.map((integration) => ( + + + + } + title="Amazon SNS Integration" + onToggle={() => handleToggleEnabled(integration)} + isTesting={isTesting === integration.id} + /> + + +
+
+
+

+ SNS Topic ARN +

+

+ {integration.attributes.configuration.topic_arn || + "Not configured"} +

+
+
+

+ Last Checked +

+

+ {integration.attributes.connection_last_checked_at + ? format( + new Date( + integration.attributes + .connection_last_checked_at, + ), + "MMM d, yyyy HH:mm", + ) + : "Never"} +

+
+
+ + + handleTestConnection(integration.id) + } + onEditConfiguration={() => + handleEditConfiguration(integration) + } + onEditCredentials={() => + handleEditCredentials(integration) + } + onDelete={() => handleOpenDeleteModal(integration)} + isTesting={isTesting === integration.id} + isDeleting={isDeleting === integration.id} + /> +
+ + + ))} + + {metadata && ( + + )} + + )} +
+ + {/* Add/Edit Modal */} + + + + + {/* Delete Confirmation Modal */} + setIsDeleteOpen(false)} + title="Delete SNS Integration" + description="Are you sure you want to delete this SNS integration? This action cannot be undone." + maxWidth="md" + > +
+ + +
+ +
+ ); +}; diff --git a/ui/types/integrations.ts b/ui/types/integrations.ts index 4f579847e3..767b227ffa 100644 --- a/ui/types/integrations.ts +++ b/ui/types/integrations.ts @@ -2,7 +2,15 @@ import { z } from "zod"; import type { TaskState } from "@/types/tasks"; -export type IntegrationType = "amazon_s3" | "aws_security_hub" | "jira"; +export const IntegrationType = { + AMAZON_S3: "amazon_s3", + AWS_SECURITY_HUB: "aws_security_hub", + JIRA: "jira", + SNS: "sns", +} as const; + +export type IntegrationType = + (typeof IntegrationType)[keyof typeof IntegrationType]; export interface IntegrationProps { type: "integrations"; @@ -310,3 +318,83 @@ export interface JiraCredentialsPayload { user_mail?: string; api_token?: string; } + +// SNS Integration Schemas +export const snsIntegrationFormSchema = z + .object({ + integration_type: z.literal("sns"), + topic_arn: z + .string() + .min(1, "SNS topic ARN is required") + .regex( + /^arn:(aws|aws-cn|aws-us-gov):sns:[a-z0-9-]+:\d{12}:[a-zA-Z0-9_-]+$/, + "Invalid SNS topic ARN format. Expected: arn:partition:sns:region:account-id:topic-name", + ), + enabled: z.boolean().default(true), + use_custom_credentials: z.boolean().default(false), + credentials_type: z.enum(["aws-sdk-default", "access-secret-key"]).optional(), + role_arn: z.string().optional(), + external_id: z.string().optional(), + role_session_name: z.string().optional(), + session_duration: z.coerce + .number() + .min(900, "Session duration must be at least 900 seconds") + .max(43200, "Session duration cannot exceed 43200 seconds") + .optional(), + aws_access_key_id: z.string().optional(), + aws_secret_access_key: z.string().optional(), + aws_session_token: z.string().optional(), + }) + .superRefine((data, ctx) => { + if (data.use_custom_credentials) { + validateAwsCredentialsCreate(data, ctx); + validateIamRole(data, ctx); + } + // Always validate role if role_arn is provided + if (!data.use_custom_credentials && data.role_arn) { + validateIamRole(data, ctx, false); + } + }); + +export const editSNSIntegrationFormSchema = z + .object({ + integration_type: z.literal("sns"), + topic_arn: z + .string() + .min(1, "SNS topic ARN is required") + .regex( + /^arn:(aws|aws-cn|aws-us-gov):sns:[a-z0-9-]+:\d{12}:[a-zA-Z0-9_-]+$/, + "Invalid SNS topic ARN format", + ) + .optional(), + use_custom_credentials: z.boolean().optional(), + credentials_type: z.enum(["aws-sdk-default", "access-secret-key"]).optional(), + role_arn: z.string().optional(), + external_id: z.string().optional(), + role_session_name: z.string().optional(), + session_duration: z.coerce + .number() + .min(900) + .max(43200) + .optional(), + aws_access_key_id: z.string().optional(), + aws_secret_access_key: z.string().optional(), + aws_session_token: z.string().optional(), + }) + .superRefine((data, ctx) => { + if (data.use_custom_credentials !== false) { + validateAwsCredentialsEdit(data, ctx); + } + // Always validate role if role_arn is provided + validateIamRole(data, ctx, false); + }); + +export interface SNSCredentialsPayload { + role_arn?: string; + external_id?: string; + role_session_name?: string; + session_duration?: number; + aws_access_key_id?: string; + aws_secret_access_key?: string; + aws_session_token?: string; +}