From 1bf94058dbcbef0017f83a8fcad78355afcd9492 Mon Sep 17 00:00:00 2001
From: Ieva <ieva.vasiljeva@grafana.com>
Date: Wed, 2 Aug 2023 18:06:54 +0100
Subject: [PATCH] Auth: add a lock message for Grafana Admin role (#72724)

* add a lock message for Grafana admin role sync

* Update public/app/features/admin/UserAdminPage.tsx

Co-authored-by: Misi <mgyongyosi@users.noreply.github.com>

* linting

* use theme for spacing

---------

Co-authored-by: Misi <mgyongyosi@users.noreply.github.com>
---
 public/app/features/admin/UserAdminPage.tsx   |  3 +++
 public/app/features/admin/UserOrgs.tsx        |  2 +-
 public/app/features/admin/UserPermissions.tsx | 24 +++++++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/public/app/features/admin/UserAdminPage.tsx b/public/app/features/admin/UserAdminPage.tsx
index 7dfa4ad8728..f1409bc1c7b 100644
--- a/public/app/features/admin/UserAdminPage.tsx
+++ b/public/app/features/admin/UserAdminPage.tsx
@@ -105,6 +105,8 @@ export class UserAdminPage extends PureComponent<Props> {
     const isLDAPUser = user?.isExternal && user?.authLabels?.includes('LDAP');
     const canReadSessions = contextSrv.hasPermission(AccessControlAction.UsersAuthTokenList);
     const canReadLDAPStatus = contextSrv.hasPermission(AccessControlAction.LDAPStatusRead);
+    const authSource = user?.authLabels?.[0];
+    const lockMessage = authSource ? `Synced via ${authSource}` : '';
 
     const pageNav: NavModelItem = {
       text: user?.login ?? '',
@@ -135,6 +137,7 @@ export class UserAdminPage extends PureComponent<Props> {
               <UserPermissions
                 isGrafanaAdmin={user.isGrafanaAdmin}
                 isExternalUser={user?.isGrafanaAdminExternallySynced}
+                lockMessage={lockMessage}
                 onGrafanaAdminChange={this.onGrafanaAdminChange}
               />
             </>
diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx
index 76f348d50a0..4e2865e764d 100644
--- a/public/app/features/admin/UserOrgs.tsx
+++ b/public/app/features/admin/UserOrgs.tsx
@@ -488,7 +488,7 @@ interface ExternalUserTooltipProps {
   lockMessage?: string;
 }
 
-const ExternalUserTooltip = ({ lockMessage }: ExternalUserTooltipProps) => {
+export const ExternalUserTooltip = ({ lockMessage }: ExternalUserTooltipProps) => {
   const styles = useStyles2(getTooltipStyles);
 
   return (
diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx
index 2eef2449dc1..30cc4c798d5 100644
--- a/public/app/features/admin/UserPermissions.tsx
+++ b/public/app/features/admin/UserPermissions.tsx
@@ -1,12 +1,16 @@
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
-import { ConfirmButton, RadioButtonGroup, Icon } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { ConfirmButton, RadioButtonGroup, Icon, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
+import { ExternalUserTooltip } from 'app/features/admin/UserOrgs';
 import { AccessControlAction } from 'app/types';
 
 interface Props {
   isGrafanaAdmin: boolean;
   isExternalUser?: boolean;
+  lockMessage?: string;
 
   onGrafanaAdminChange: (isGrafanaAdmin: boolean) => void;
 }
@@ -16,7 +20,7 @@ const adminOptions = [
   { label: 'No', value: false },
 ];
 
-export function UserPermissions({ isGrafanaAdmin, isExternalUser, onGrafanaAdminChange }: Props) {
+export function UserPermissions({ isGrafanaAdmin, isExternalUser, lockMessage, onGrafanaAdminChange }: Props) {
   const [isEditing, setIsEditing] = useState(false);
   const [currentAdminOption, setCurrentAdminOption] = useState(isGrafanaAdmin);
 
@@ -31,6 +35,8 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, onGrafanaAdmin
 
   const canChangePermissions = contextSrv.hasPermission(AccessControlAction.UsersPermissionsUpdate) && !isExternalUser;
 
+  const styles = useStyles2(getTooltipStyles);
+
   return (
     <>
       <h3 className="page-heading">Permissions</h3>
@@ -71,6 +77,11 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, onGrafanaAdmin
                       Change
                     </ConfirmButton>
                   )}
+                  {isExternalUser && (
+                    <div className={styles.lockMessageClass}>
+                      <ExternalUserTooltip lockMessage={lockMessage} />
+                    </div>
+                  )}
                 </td>
               </tr>
             </tbody>
@@ -80,3 +91,12 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, onGrafanaAdmin
     </>
   );
 }
+
+const getTooltipStyles = (theme: GrafanaTheme2) => ({
+  lockMessageClass: css`
+    display: flex;
+    justify-content: flex-end;
+    font-style: italic;
+    margin-right: ${theme.spacing(0.6)};
+  `,
+});