Teams: Support paginating and filtering more then 1000 teams (#58761)

* TeamList: break out rows to its own component

* TeamsState: Add total count

* TeamList: Remove teamsCount prop

* TeamList: Restructure code and use count from backend response

* TeamList: calculate total pages using totalCount

* TeamList: Rename to state to currentPage and the reducer to
setCurrentPage

* TeamList: remove wrapper functions

* TeamList: rewrite as a functional component

* TeamList: export components for test

* TeamList: pass limit, page and query to backend

* TeamList: Rename properties in state and create actions for page and
query change

* TeamList: Add flag to control if EmptyList banner should render

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

@@ -1,3 +1,5 @@
+import { debounce } from 'lodash';
+
 import { getBackendSrv } from '@grafana/runtime';
 import { updateNavIndex } from 'app/core/actions';
 import { contextSrv } from 'app/core/core';
@@ -5,24 +7,35 @@ import { accessControlQueryParam } from 'app/core/utils/accessControl';
 import { AccessControlAction, TeamMember, ThunkResult } from 'app/types';
 
 import { buildNavModel } from './navModel';
-import { teamGroupsLoaded, teamLoaded, teamMembersLoaded, teamsLoaded } from './reducers';
+import { teamGroupsLoaded, queryChanged, pageChanged, teamLoaded, teamMembersLoaded, teamsLoaded } from './reducers';
 
-export function loadTeams(): ThunkResult<void> {
-  return async (dispatch) => {
+export function loadTeams(initial = false): ThunkResult<void> {
+  return async (dispatch, getState) => {
+    const { query, page, perPage } = getState().teams;
     // Early return if the user cannot list teams
     if (!contextSrv.hasPermission(AccessControlAction.ActionTeamsRead)) {
-      dispatch(teamsLoaded([]));
+      dispatch(teamsLoaded({ teams: [], totalCount: 0, page: 1, perPage, noTeams: true }));
       return;
     }
 
     const response = await getBackendSrv().get(
       '/api/teams/search',
-      accessControlQueryParam({ perpage: 1000, page: 1 })
+      accessControlQueryParam({ query, page, perpage: perPage })
     );
-    dispatch(teamsLoaded(response.teams));
+
+    // We only want to check if there is no teams on the initial request.
+    // A query that returns no teams should not render the empty list banner.
+    let noTeams = false;
+    if (initial) {
+      noTeams = response.teams.length === 0;
+    }
+
+    dispatch(teamsLoaded({ noTeams, ...response }));
   };
 }
 
+const loadTeamsWithDebounce = debounce((dispatch) => dispatch(loadTeams()), 500);
+
 export function loadTeam(id: number): ThunkResult<void> {
   return async (dispatch) => {
     const response = await getBackendSrv().get(`/api/teams/${id}`, accessControlQueryParam());
@@ -31,6 +44,29 @@ export function loadTeam(id: number): 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());
+  };
+}
+
+export function changeQuery(query: string): ThunkResult<void> {
+  return async (dispatch) => {
+    dispatch(queryChanged(query));
+    loadTeamsWithDebounce(dispatch);
+  };
+}
+
+export function changePage(page: number): ThunkResult<void> {
+  return async (dispatch) => {
+    dispatch(pageChanged(page));
+    dispatch(loadTeams());
+  };
+}
+
 export function loadTeamMembers(): ThunkResult<void> {
   return async (dispatch, getStore) => {
     const team = getStore().team.team;
@@ -87,15 +123,6 @@ 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());
-  };
-}
-
 export function updateTeamMember(member: TeamMember): ThunkResult<void> {
   return async (dispatch) => {
     await getBackendSrv().put(`/api/teams/${member.teamId}/members/${member.userId}`, {