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

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"
+    />
+  );
+};