Add SAML doc links to Org Settings

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -20,6 +20,8 @@ import { useToggle } from "@app/hooks";
 import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { SSOModalHeader } from "./SSOModalHeader";
+
 enum AuthProvider {
   OKTA_SAML = "okta-saml",
   AZURE_SAML = "azure-saml",
@@ -30,12 +32,32 @@ enum AuthProvider {
 }
 
 const ssoAuthProviders = [
-  { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
-  { label: "Azure / Entra SAML", value: AuthProvider.AZURE_SAML },
-  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
-  { label: "Keycloak SAML", value: AuthProvider.KEYCLOAK_SAML },
-  { label: "Google SAML", value: AuthProvider.GOOGLE_SAML },
-  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML }
+  { label: "Okta SAML", value: AuthProvider.OKTA_SAML, image: "Okta.png", docsUrl: "okta" },
+  {
+    label: "Azure / Entra SAML",
+    value: AuthProvider.AZURE_SAML,
+    image: "Microsoft Azure.png",
+    docsUrl: "azure"
+  },
+  {
+    label: "JumpCloud SAML",
+    value: AuthProvider.JUMPCLOUD_SAML,
+    image: "JumpCloud.png",
+    docsUrl: "jumpcloud"
+  },
+  {
+    label: "Keycloak SAML",
+    value: AuthProvider.KEYCLOAK_SAML,
+    image: "Keycloak.png",
+    docsUrl: "keycloak-saml"
+  },
+  {
+    label: "Google SAML",
+    value: AuthProvider.GOOGLE_SAML,
+    image: "Google.png",
+    docsUrl: "google-saml"
+  },
+  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML, image: "Auth0.png", docsUrl: "auth0-saml" }
 ];
 
 const schema = z
@@ -231,6 +253,10 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
         }}
       >
         <ModalContent title="Manage SAML configuration">
+          <SSOModalHeader
+            providerDetails={ssoAuthProviders.find((provider) => provider.value === authProvider)!}
+            isConnected={Boolean(data)}
+          />
           <form onSubmit={handleSubmit(onSSOModalSubmit)}>
             <Controller
               control={control}

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/SSOModalHeader.tsx

@@ -0,0 +1,53 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type ProviderDetails = {
+  label: string;
+  image: string;
+  value: string;
+  docsUrl: string;
+};
+
+type Props = {
+  providerDetails: ProviderDetails;
+  isConnected: boolean;
+};
+
+const docsBaseUrl = "https://infisical.com/docs/documentation/platform/sso";
+
+export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
+  return (
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+      <img
+        alt={`${providerDetails.label} logo`}
+        src={`/images/sso/${providerDetails.image}`}
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+      />
+      <div>
+        <div className="flex items-center text-mineshaft-300">
+          {providerDetails.label}
+          <a
+            href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
+            target="_blank"
+            className="mb-1 ml-1"
+            rel="noopener noreferrer"
+          >
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <span>Docs</span>
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.07rem] ml-1 text-[10px]"
+              />
+            </div>
+          </a>
+        </div>
+        <p className="text-sm leading-4 text-mineshaft-400">
+          {isConnected
+            ? `${providerDetails.label} Connection`
+            : `Connect to ${providerDetails.label}`}
+        </p>
+      </div>
+    </div>
+  );
+};