feat(api-keys): add read docs api key (#8947)

ui/AGENTS.md

@@ -1181,6 +1181,38 @@ Each test documentation file (`{page-name}.md`) should follow this structured fo
 - Follow The Scope Rule strictly - used by 2+ features = shared, 1 feature = local
 - Update feature docs and `ui/CHANGELOG.md` when behavior changes
 
+### Documentation Links Pattern (Integrations Only)
+
+For integration features (e.g., API Keys, SAML, S3) that have dedicated documentation, include "Read the docs" links in both the main card/component and related modals:
+
+**Main Card Header** (e.g., API Keys card):
+```tsx
+<p className="text-xs text-gray-500">
+  Manage API keys for programmatic access.{" "}
+  <CustomLink href="https://docs.prowler.com/user-guide/providers/prowler-app-api-keys">
+    Read the docs
+  </CustomLink>
+</p>
+```
+
+**Modal/Form** (e.g., Create API Key modal):
+```tsx
+<p className="text-xs text-gray-500">
+  Need help configuring API Keys?{" "}
+  <CustomLink href="https://docs.prowler.com/user-guide/providers/prowler-app-api-keys">
+    Read the docs
+  </CustomLink>
+</p>
+```
+
+**Rules:**
+- **Only apply to integration components** (API Keys, SAML, S3, Security Hub, etc.)
+- Use the same documentation URL across related components
+- Tailor the helper text to the component context (card = general, modal = action-specific)
+- Apply `text-xs text-gray-500` styling for consistency
+- Place the link in a `<p>` tag or description area within the component
+- Always use `CustomLink` component for documentation links
+
 ## Environment Configuration
 
 ### Required Environment Variables

ui/components/users/profile/api-keys-card-client.tsx

@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { CustomButton } from "@/components/ui/custom/custom-button";
+import { CustomLink } from "@/components/ui/custom/custom-link";
 import { DataTable } from "@/components/ui/table";
 import { MetaDataProps } from "@/types";
 
@@ -70,7 +71,12 @@ export const ApiKeysCardClient = ({
         <CardHeader className="flex flex-row items-center justify-between gap-2">
           <div className="flex flex-col gap-1">
             <h4 className="text-lg font-bold">API Keys</h4>
-            <p className="text-xs">Manage API keys for programmatic access</p>
+            <p className="text-xs text-gray-500">
+              Manage API keys for programmatic access.{" "}
+              <CustomLink href="https://docs.prowler.com/user-guide/providers/prowler-app-api-keys">
+                Read the docs
+              </CustomLink>
+            </p>
           </div>
           <CustomButton
             ariaLabel="Create new API key"

ui/components/users/profile/create-api-key-modal.tsx

@@ -8,6 +8,7 @@ import { createApiKey } from "@/actions/api-keys/api-keys";
 import { useToast } from "@/components/ui";
 import { CustomInput } from "@/components/ui/custom";
 import { CustomAlertModal } from "@/components/ui/custom/custom-alert-modal";
+import { CustomLink } from "@/components/ui/custom/custom-link";
 import { Form, FormButtons } from "@/components/ui/form";
 
 import { DEFAULT_EXPIRY_DAYS } from "./api-keys/constants";
@@ -96,6 +97,13 @@ export const CreateApiKeyModal = ({
           onSubmit={form.handleSubmit(onSubmitClient)}
           className="flex flex-col gap-4"
         >
+          <p className="text-xs text-gray-500">
+            Need help configuring API Keys?{" "}
+            <CustomLink href="https://docs.prowler.com/user-guide/providers/prowler-app-api-keys">
+              Read the docs
+            </CustomLink>
+          </p>
+
           <div className="flex w-full justify-center gap-6">
             <CustomInput
               control={form.control}