From 177a0d69d18155daaf53a00e759732d28812512b Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 24 Nov 2021 17:25:28 +0300
Subject: [PATCH] Disable only built-in role selector for external users
 (#42197)

---
 public/app/core/components/RolePicker/RolePicker.tsx     | 3 +++
 public/app/core/components/RolePicker/RolePickerMenu.tsx | 3 +++
 public/app/core/components/RolePicker/UserRolePicker.tsx | 3 +++
 public/app/features/admin/UserOrgs.tsx                   | 5 +++--
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/RolePicker/RolePicker.tsx b/public/app/core/components/RolePicker/RolePicker.tsx
index 10d2ec9b276..c50288fc720 100644
--- a/public/app/core/components/RolePicker/RolePicker.tsx
+++ b/public/app/core/components/RolePicker/RolePicker.tsx
@@ -12,6 +12,7 @@ export interface Props {
   onRolesChange: (newRoles: string[]) => void;
   onBuiltinRoleChange: (newRole: OrgRole) => void;
   disabled?: boolean;
+  builtinRolesDisabled?: boolean;
 }
 
 export const RolePicker = ({
@@ -22,6 +23,7 @@ export const RolePicker = ({
   onRolesChange,
   onBuiltinRoleChange,
   disabled,
+  builtinRolesDisabled,
 }: Props): JSX.Element | null => {
   const [isOpen, setOpen] = useState(false);
   const [roleOptions, setRoleOptions] = useState<Role[]>([]);
@@ -133,6 +135,7 @@ export const RolePicker = ({
             onSelect={onSelect}
             onUpdate={onUpdate}
             showGroups={query.length === 0 || query.trim() === ''}
+            builtinRolesDisabled={builtinRolesDisabled}
           />
         )}
       </ClickOutsideWrapper>
diff --git a/public/app/core/components/RolePicker/RolePickerMenu.tsx b/public/app/core/components/RolePicker/RolePickerMenu.tsx
index 6fd057806d1..ce573bc869b 100644
--- a/public/app/core/components/RolePicker/RolePickerMenu.tsx
+++ b/public/app/core/components/RolePicker/RolePickerMenu.tsx
@@ -35,6 +35,7 @@ interface RolePickerMenuProps {
   options: Role[];
   appliedRoles: Role[];
   showGroups?: boolean;
+  builtinRolesDisabled?: boolean;
   onSelect: (roles: Role[]) => void;
   onBuiltInRoleSelect?: (role: OrgRole) => void;
   onUpdate: (newBuiltInRole: OrgRole, newRoles: string[]) => void;
@@ -47,6 +48,7 @@ export const RolePickerMenu = ({
   options,
   appliedRoles,
   showGroups,
+  builtinRolesDisabled,
   onSelect,
   onBuiltInRoleSelect,
   onUpdate,
@@ -181,6 +183,7 @@ export const RolePickerMenu = ({
               value={selectedBuiltInRole}
               onChange={onSelectedBuiltinRoleChange}
               fullWidth={true}
+              disabled={builtinRolesDisabled}
             />
           </div>
           {!!fixedRoles.length &&
diff --git a/public/app/core/components/RolePicker/UserRolePicker.tsx b/public/app/core/components/RolePicker/UserRolePicker.tsx
index 22da13a1413..57400f845df 100644
--- a/public/app/core/components/RolePicker/UserRolePicker.tsx
+++ b/public/app/core/components/RolePicker/UserRolePicker.tsx
@@ -11,6 +11,7 @@ export interface Props {
   getRoleOptions?: () => Promise<Role[]>;
   getBuiltinRoles?: () => Promise<{ [key: string]: Role[] }>;
   disabled?: boolean;
+  builtinRolesDisabled?: boolean;
 }
 
 export const UserRolePicker: FC<Props> = ({
@@ -21,6 +22,7 @@ export const UserRolePicker: FC<Props> = ({
   getRoleOptions,
   getBuiltinRoles,
   disabled,
+  builtinRolesDisabled,
 }) => {
   return (
     <RolePicker
@@ -31,6 +33,7 @@ export const UserRolePicker: FC<Props> = ({
       getRoles={() => fetchUserRoles(userId, orgId)}
       getBuiltinRoles={() => (getBuiltinRoles ? getBuiltinRoles() : fetchBuiltinRoles(orgId))}
       disabled={disabled}
+      builtinRolesDisabled={builtinRolesDisabled}
     />
   );
 };
diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx
index f58bf24f3c2..8cff0b30c8c 100644
--- a/public/app/features/admin/UserOrgs.tsx
+++ b/public/app/features/admin/UserOrgs.tsx
@@ -185,7 +185,7 @@ class UnThemedOrgRow extends PureComponent<OrgRowProps> {
                   orgId={org.orgId}
                   builtInRole={org.role}
                   onBuiltinRoleChange={this.onBuiltinRoleChange}
-                  disabled={rolePickerDisabled}
+                  builtinRolesDisabled={rolePickerDisabled}
                 />
               </div>
               {isExternalUser && <ExternalUserTooltip />}
@@ -391,7 +391,8 @@ const ExternalUserTooltip: React.FC = () => {
         placement="right-end"
         content={
           <div>
-            This user&apos;s role is not editable because it is synchronized from your auth provider. Refer to the&nbsp;
+            This user&apos;s built-in role is not editable because it is synchronized from your auth provider. Refer to
+            the&nbsp;
             <a
               className={styles.tooltipItemLink}
               href={'https://grafana.com/docs/grafana/latest/auth'}