AccessControl: Trigger permission reload with team removal (#45383)

public/app/features/teams/TeamList.tsx

@@ -42,10 +42,7 @@ export class TeamList extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    // Don't fetch teams if the user cannot see any
-    if (contextSrv.hasAccess(AccessControlAction.ActionTeamsRead, true)) {
-      this.fetchTeams();
-    }
+    this.fetchTeams();
     if (contextSrv.licensedAccessControlEnabled() && contextSrv.hasPermission(AccessControlAction.ActionRolesList)) {
       this.fetchRoleOptions();
     }
@@ -198,10 +195,8 @@ export class TeamList extends PureComponent<Props, State> {
 
   renderList() {
     const { teamsCount, hasFetched } = this.props;
-    // If the user cannot read any team, we didn't fetch them
-    let isLoading = !hasFetched && contextSrv.hasAccess(AccessControlAction.ActionTeamsRead, true);
 
-    if (isLoading) {
+    if (!hasFetched) {
       return null;
     }
 
@@ -214,12 +209,10 @@ export class TeamList extends PureComponent<Props, State> {
 
   render() {
     const { hasFetched, navModel } = this.props;
-    // If the user cannot read any team, we didn't fetch them
-    let isLoading = !hasFetched && contextSrv.hasAccess(AccessControlAction.ActionTeamsRead, true);
 
     return (
       <Page navModel={navModel}>
-        <Page.Contents isLoading={isLoading}>{this.renderList()}</Page.Contents>
+        <Page.Contents isLoading={!hasFetched}>{this.renderList()}</Page.Contents>
       </Page>
     );
   }

public/app/features/teams/state/actions.ts

@@ -1,13 +1,20 @@
 import { getBackendSrv } from '@grafana/runtime';
 
-import { TeamMember, ThunkResult } from 'app/types';
+import { AccessControlAction, TeamMember, ThunkResult } from 'app/types';
 import { updateNavIndex } from 'app/core/actions';
 import { buildNavModel } from './navModel';
 import { teamGroupsLoaded, teamLoaded, teamMembersLoaded, teamsLoaded } from './reducers';
 import { accessControlQueryParam } from 'app/core/utils/accessControl';
+import { contextSrv } from 'app/core/core';
 
 export function loadTeams(): ThunkResult<void> {
   return async (dispatch) => {
+    // Early return if the user cannot list teams
+    if (!contextSrv.hasPermission(AccessControlAction.ActionTeamsRead)) {
+      dispatch(teamsLoaded([]));
+      return;
+    }
+
     const response = await getBackendSrv().get(
       '/api/teams/search',
       accessControlQueryParam({ perpage: 1000, page: 1 })
@@ -83,6 +90,8 @@ export function removeTeamGroup(groupId: string): ThunkResult<void> {
 export function deleteTeam(id: number): ThunkResult<void> {
   return async (dispatch) => {
     await getBackendSrv().delete(`/api/teams/${id}`);
+    // Update users permissions in case they lost teams.read with the deletion
+    await contextSrv.fetchUserPermissions();
     dispatch(loadTeams());
   };
 }