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

@@ -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}
               />
             </>

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 (

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)};
+  `,
+});