From 691248d8e4c5ae5dcbf239959ca7e343403b8fda Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 12 May 2023 12:17:52 +0100
Subject: [PATCH] [v10.0.x] SAML UI: Adds documentation link to the
 Authentication UI (#68363)

SAML UI: Adds documentation link to the Authentication UI (#68062)

* adds documentation link to the saml ui

* add correct link

* add link to docuemntation

* add documentation etxt

* documentation update wordings

(cherry picked from commit 09d7d25c9f9aa52ff47e2e865b8276804a734c67)

Co-authored-by: Eric Leijonmarck <eric.leijonmarck@gmail.com>
---
 .../features/auth-config/AuthConfigPage.tsx   | 25 ++++++++++++++++++-
 .../ServiceAccountsListPage.tsx               |  5 ++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/public/app/features/auth-config/AuthConfigPage.tsx b/public/app/features/auth-config/AuthConfigPage.tsx
index 792074cc3cc..2628ef2c599 100644
--- a/public/app/features/auth-config/AuthConfigPage.tsx
+++ b/public/app/features/auth-config/AuthConfigPage.tsx
@@ -50,8 +50,22 @@ export const AuthConfigPageUnconnected = ({ providerStatuses, isLoading, loadSet
   );
   const firstAvailableProvider = availableProviders?.length ? availableProviders[0] : null;
 
+  {
+    /* TODO: make generic for the provider of the configuration or make the documentation point to a collection of all our providers */
+  }
+  const docsLink = (
+    <a
+      className="external-link"
+      href="https://grafana.com/docs/grafana/next/setup-grafana/configure-security/configure-authentication/saml-ui/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      documentation.
+    </a>
+  );
+  const subTitle = <span>Manage your auth settings and configure single sign-on. Find out more in our {docsLink}</span>;
   return (
-    <Page navId="authentication">
+    <Page navId="authentication" subTitle={subTitle}>
       <Page.Contents isLoading={isLoading}>
         <h3 className={styles.sectionHeader}>Configured authentication</h3>
         {!!enabledProviders?.length && (
@@ -118,6 +132,15 @@ const getStyles = (theme: GrafanaTheme2) => {
     settingName: css`
       padding-left: 25px;
     `,
+    doclink: css`
+      padding-bottom: 5px;
+      padding-top: -5px;
+      font-size: ${theme.typography.bodySmall.fontSize};
+      a {
+        color: ${theme.colors.info.name}; // use theme link color or any other color
+        text-decoration: underline; // underline or none, as you prefer
+      }
+    `,
     settingValue: css`
       white-space: break-spaces;
     `,
diff --git a/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx b/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
index a696c82af20..cc9b9f37fa5 100644
--- a/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
@@ -154,12 +154,13 @@ export const ServiceAccountsListPageUnconnected = ({
       target="_blank"
       rel="noopener noreferrer"
     >
-      here.
+      documentation.
     </a>
   );
   const subTitle = (
     <span>
-      Service accounts and their tokens can be used to authenticate against the Grafana API. Find out more {docsLink}
+      Service accounts and their tokens can be used to authenticate against the Grafana API. Find out more in our{' '}
+      {docsLink}
     </span>
   );