From 9ef390a81b66006fd8ce01ed209c3701d54e9650 Mon Sep 17 00:00:00 2001
From: Eric Leijonmarck <eric.leijonmarck@gmail.com>
Date: Wed, 18 Oct 2023 15:14:07 +0100
Subject: [PATCH] Auth: Update `disabledMessage` to make better use of info box
 (#76687)

* refactor: make better use of info box for basic roles

* linting fix
---
 .../features/admin/Users/OrgUsersTable.tsx    | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app/features/admin/Users/OrgUsersTable.tsx b/public/app/features/admin/Users/OrgUsersTable.tsx
index bc4aceb65f3..bb71f21a66e 100644
--- a/public/app/features/admin/Users/OrgUsersTable.tsx
+++ b/public/app/features/admin/Users/OrgUsersTable.tsx
@@ -30,7 +30,7 @@ import { TableWrapper } from './TableWrapper';
 type Cell<T extends keyof OrgUser = keyof OrgUser> = CellProps<OrgUser, OrgUser[T]>;
 
 const disabledRoleMessage = `This user's role is not editable because it is synchronized from your auth provider.
-  Refer to the Grafana authentication docs for details.`;
+Refer to the Grafana authentication docs for details.`;
 
 const getBasicRoleDisabled = (user: OrgUser) => {
   let basicRoleDisabled = !contextSrv.hasPermissionInMetadata(AccessControlAction.OrgUsersWrite, user);
@@ -151,7 +151,25 @@ export const OrgUsersTable = ({
           return (
             basicRoleDisabled && (
               <Box display={'flex'} alignItems={'center'} marginLeft={1}>
-                <Tooltip content={disabledRoleMessage}>
+                <Tooltip
+                  interactive={true}
+                  content={
+                    <div>
+                      This user&apos;s role is not editable because it is synchronized from your auth provider. Refer to
+                      the&nbsp;
+                      <a
+                        href={
+                          'https://grafana.com/docs/grafana/latest/administration/user-management/manage-org-users/#change-a-users-organization-permissions'
+                        }
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        Grafana authentication docs
+                      </a>
+                      &nbsp;for details.
+                    </div>
+                  }
+                >
                   <Icon name="question-circle" />
                 </Tooltip>
               </Box>