feat(ui): add SSO and API Key link cards to Integrations page (#9570)

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)

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 */}
           <JiraIntegrationCard />
+
+          {/* SSO Configuration - redirects to Profile */}
+          <SsoLinkCard />
+
+          {/* API Keys - redirects to Profile */}
+          <ApiKeyLinkCard />
         </div>
       </div>
     </ContentLayout>

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 (
+    <LinkCard
+      icon={KeyRoundIcon}
+      title="API Keys"
+      description="Manage API keys for programmatic access."
+      learnMoreUrl="https://docs.prowler.com/user-guide/providers/prowler-app-api-keys"
+      learnMoreAriaLabel="Learn more about API Keys"
+      bodyText="API Key management is available in your User Profile. Create and manage API keys to authenticate with the Prowler API for automation and integrations."
+      linkHref="/profile"
+      linkText="Go to Profile"
+    />
+  );
+};

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";

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";

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 (
+    <Card variant="base" padding="lg">
+      <CardHeader>
+        <div className="flex w-full flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-3">
+            <div className="dark:bg-prowler-blue-800 flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100">
+              <Icon size={24} className="text-gray-700 dark:text-gray-200" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <h4 className="text-lg font-bold text-gray-900 dark:text-gray-100">
+                {title}
+              </h4>
+              <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
+                <p className="text-xs text-nowrap text-gray-500 dark:text-gray-300">
+                  {description}
+                </p>
+                <CustomLink
+                  href={learnMoreUrl}
+                  aria-label={learnMoreAriaLabel}
+                  size="xs"
+                >
+                  Learn more
+                </CustomLink>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 self-end sm:self-center">
+            <Button asChild size="sm">
+              <Link href={linkHref}>
+                <ExternalLinkIcon size={14} />
+                {linkText}
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-gray-600 dark:text-gray-300">{bodyText}</p>
+      </CardContent>
+    </Card>
+  );
+};

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 (
+    <LinkCard
+      icon={ShieldCheckIcon}
+      title="SSO Configuration"
+      description="Configure SAML Single Sign-On for your organization."
+      learnMoreUrl="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app-sso/"
+      learnMoreAriaLabel="Learn more about SSO configuration"
+      bodyText="SSO configuration is available in your User Profile. Enable SAML Single Sign-On to allow users to authenticate using your organization's identity provider."
+      linkHref="/profile"
+      linkText="Go to Profile"
+    />
+  );
+};