diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 7e78bd5ead..a02f9ac082 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to the **Prowler UI** are documented in this file. ### 🚀 Added +- SSO and API Key link cards to Integrations page for better discoverability [(#9570)](https://github.com/prowler-cloud/prowler/pull/9570) - Risk Radar component with category-based severity breakdown to Overview page [(#9532)](https://github.com/prowler-cloud/prowler/pull/9532) - More extensive resource details (partition, details and metadata) within Findings detail and Resources detail view [(#9515)](https://github.com/prowler-cloud/prowler/pull/9515) - Integrated Prowler MCP server with Lighthouse AI for dynamic tool execution [(#9255)](https://github.com/prowler-cloud/prowler/pull/9255) diff --git a/ui/app/(prowler)/integrations/page.tsx b/ui/app/(prowler)/integrations/page.tsx index dacdf0761d..d3f733d658 100644 --- a/ui/app/(prowler)/integrations/page.tsx +++ b/ui/app/(prowler)/integrations/page.tsx @@ -1,9 +1,9 @@ -import React from "react"; - import { + ApiKeyLinkCard, JiraIntegrationCard, S3IntegrationCard, SecurityHubIntegrationCard, + SsoLinkCard, } from "@/components/integrations"; import { ContentLayout } from "@/components/ui"; @@ -27,6 +27,12 @@ export default async function Integrations() { {/* Jira Integration */} + + {/* SSO Configuration - redirects to Profile */} + + + {/* API Keys - redirects to Profile */} + diff --git a/ui/components/integrations/api-key/api-key-link-card.tsx b/ui/components/integrations/api-key/api-key-link-card.tsx new file mode 100644 index 0000000000..84f87a0ef1 --- /dev/null +++ b/ui/components/integrations/api-key/api-key-link-card.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { KeyRoundIcon } from "lucide-react"; + +import { LinkCard } from "../shared/link-card"; + +export const ApiKeyLinkCard = () => { + return ( + + ); +}; diff --git a/ui/components/integrations/index.ts b/ui/components/integrations/index.ts index 388ea2fa0f..d46942d57c 100644 --- a/ui/components/integrations/index.ts +++ b/ui/components/integrations/index.ts @@ -1,4 +1,5 @@ export * from "../providers/enhanced-provider-selector"; +export * from "./api-key/api-key-link-card"; export * from "./jira/jira-integration-card"; export * from "./jira/jira-integration-form"; export * from "./jira/jira-integrations-manager"; @@ -11,3 +12,4 @@ 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 "./sso/sso-link-card"; diff --git a/ui/components/integrations/shared/index.ts b/ui/components/integrations/shared/index.ts index 499b38677a..b20c1cd114 100644 --- a/ui/components/integrations/shared/index.ts +++ b/ui/components/integrations/shared/index.ts @@ -1,3 +1,4 @@ export { IntegrationActionButtons } from "./integration-action-buttons"; export { IntegrationCardHeader } from "./integration-card-header"; export { IntegrationSkeleton } from "./integration-skeleton"; +export { LinkCard } from "./link-card"; diff --git a/ui/components/integrations/shared/link-card.tsx b/ui/components/integrations/shared/link-card.tsx new file mode 100644 index 0000000000..5721f3a3b5 --- /dev/null +++ b/ui/components/integrations/shared/link-card.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { ExternalLinkIcon, LucideIcon } 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"; + +interface LinkCardProps { + icon: LucideIcon; + title: string; + description: string; + learnMoreUrl: string; + learnMoreAriaLabel: string; + bodyText: string; + linkHref: string; + linkText: string; +} + +export const LinkCard = ({ + icon: Icon, + title, + description, + learnMoreUrl, + learnMoreAriaLabel, + bodyText, + linkHref, + linkText, +}: LinkCardProps) => { + return ( + + +
+
+
+ +
+
+

+ {title} +

+
+

+ {description} +

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

{bodyText}

+
+
+ ); +}; diff --git a/ui/components/integrations/sso/sso-link-card.tsx b/ui/components/integrations/sso/sso-link-card.tsx new file mode 100644 index 0000000000..768c373591 --- /dev/null +++ b/ui/components/integrations/sso/sso-link-card.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { ShieldCheckIcon } from "lucide-react"; + +import { LinkCard } from "../shared/link-card"; + +export const SsoLinkCard = () => { + return ( + + ); +};