Access Control: use role groups in role picker (#41912) (#41941)

* use role groups in role picker UI

* Update public/app/core/components/RolePicker/RolePickerMenu.tsx

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
(cherry picked from commit 11f133b406)

Co-authored-by: Ieva <ieva.vasiljeva@grafana.com>

public/app/core/components/RolePicker/RolePickerMenu.tsx

@@ -498,8 +498,7 @@ export const RoleMenuGroupOption = React.forwardRef<HTMLDivElement, RoleMenuGrou
 RoleMenuGroupOption.displayName = 'RoleMenuGroupOption';
 
 const getRoleGroup = (role: Role) => {
-  const parts = role.name.split(':');
-  return parts.length > 1 ? parts[1] : '';
+  return role.group ?? 'Other';
 };
 
 const capitalize = (s: string): string => {

public/app/types/accessControl.ts

@@ -55,6 +55,7 @@ export interface Role {
   name: string;
   displayName: string;
   description: string;
+  group: string;
   global: boolean;
   version: number;
   created: string;