Disable only built-in role selector for external users (#42197)

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>

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 &&

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}
     />
   );
 };

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'}