RBAC: Update role picker in team page, fix a bug with roles being removed upon team setting update (#87519)

immediately update team roles through team role picker in team settings page instead of doign apply + update flow

public/app/features/teams/TeamSettings.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useForm } from 'react-hook-form';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { Input, Field, Button, FieldSet, Stack } from '@grafana/ui';
 import { TeamRolePicker } from 'app/core/components/RolePicker/TeamRolePicker';
-import { updateTeamRoles } from 'app/core/components/RolePicker/api';
 import { useRoleOptions } from 'app/core/components/RolePicker/hooks';
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
 import { contextSrv } from 'app/core/services/context_srv';
-import { AccessControlAction, Role, Team } from 'app/types';
+import { AccessControlAction, Team } from 'app/types';
 
 import { updateTeam } from './state/actions';
 
@@ -28,7 +27,6 @@ export const TeamSettings = ({ team, updateTeam }: Props) => {
   const currentOrgId = contextSrv.user.orgId;
 
   const [{ roleOptions }] = useRoleOptions(currentOrgId);
-  const [pendingRoles, setPendingRoles] = useState<Role[]>([]);
   const {
     handleSubmit,
     register,
@@ -44,9 +42,6 @@ export const TeamSettings = ({ team, updateTeam }: Props) => {
     contextSrv.hasPermission(AccessControlAction.ActionRolesList);
 
   const onSubmit = async (formTeam: Team) => {
-    if (contextSrv.licensedAccessControlEnabled() && canUpdateRoles) {
-      await updateTeamRoles(pendingRoles, team.id);
-    }
     updateTeam(formTeam.name, formTeam.email || '');
   };
 
@@ -66,15 +61,7 @@ export const TeamSettings = ({ team, updateTeam }: Props) => {
 
           {contextSrv.licensedAccessControlEnabled() && canListRoles && (
             <Field label="Role">
-              <TeamRolePicker
-                teamId={team.id}
-                roleOptions={roleOptions}
-                disabled={!canUpdateRoles}
-                apply={true}
-                onApplyRoles={setPendingRoles}
-                pendingRoles={pendingRoles}
-                maxWidth="100%"
-              />
+              <TeamRolePicker teamId={team.id} roleOptions={roleOptions} disabled={!canUpdateRoles} maxWidth="100%" />
             </Field>
           )}