add learn more link

src/components/AutoProvisionConfigWidget.tsx

@@ -1,14 +1,12 @@
 "use client";
 
+import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
 import { FormDescription } from "@app/components/ui/form";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { useTranslations } from "next-intl";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import {
-    MappingBuilderRule,
-    RoleMappingMode
-} from "@app/lib/idpRoleMapping";
+import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
 import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
 
 type Role = {
@@ -60,9 +58,6 @@ export default function AutoProvisionConfigWidget({
                     onCheckedChange={onAutoProvisionChange}
                     disabled={!isPaidUser(tierMatrix.autoProvisioning)}
                 />
-                <FormDescription className="text-sm text-muted-foreground">
-                    {t("idpAutoProvisionUsersDescription")}
-                </FormDescription>
             </div>
 
             {autoProvision && (

src/components/IdpAutoProvisionUsersDescription.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+const AUTO_PROVISION_DOCS_URL =
+    "https://docs.pangolin.net/manage/identity-providers/auto-provisioning";
+
+type IdpAutoProvisionUsersDescriptionProps = {
+    className?: string;
+};
+
+export default function IdpAutoProvisionUsersDescription({
+    className
+}: IdpAutoProvisionUsersDescriptionProps) {
+    const t = useTranslations();
+    return (
+        <span className={className}>
+            {t("idpAutoProvisionUsersDescription")}{" "}
+            <a
+                href={AUTO_PROVISION_DOCS_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+            >
+                {t("learnMore")}
+            </a>
+        </span>
+    );
+}

src/components/IdpCreateWizard.tsx

@@ -27,6 +27,7 @@ import { Checkbox } from "@app/components/ui/checkbox";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon, ExternalLink } from "lucide-react";
 import { StrategySelect } from "@app/components/StrategySelect";
+import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { Badge } from "@app/components/ui/badge";
 import { useTranslations } from "next-intl";
@@ -163,9 +164,6 @@ export function IdpCreateWizard({
                                         disabled={loading}
                                     />
                                 </div>
-                                <span className="text-sm text-muted-foreground">
-                                    {t("idpAutoProvisionUsersDescription")}
-                                </span>
                             </form>
                         </Form>
                     </SettingsSectionForm>