Preferences: Add pagination to org configuration page (#60896)

* Add auth labels and access control metadata to org users search results

* Fix search result JSON model

* Org users: Use API for pagination

* Fix default page size

* Refactor: UsersListPage to functional component

* Refactor: update UsersTable component code style

* Add pagination to the /orgs/{org_id}/users endpoint

* Use pagination on the AdminEditOrgPage

* Add /orgs/{org_id}/users/search endpoint to prevent breaking API

* Use existing search store method

* Remove unnecessary error

* Remove unused

* Add query param to search endpoint

* Fix endpoint docs

* Minor refactor

* Fix number of pages calculation

* Use SearchOrgUsers for all org users methods

* Refactor: GetOrgUsers as a service method

* Minor refactor: rename orgId => orgID

* Fix integration tests

* Fix tests

public/app/features/admin/AdminEditOrgPage.tsx

@@ -1,69 +1,90 @@
-import { css } from '@emotion/css';
 import React, { useState, useEffect } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { NavModelItem, UrlQueryValue } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Form, Field, Input, Button, Legend, Alert } from '@grafana/ui';
+import { Form, Field, Input, Button, Legend, Alert, VerticalGroup, HorizontalGroup, Pagination } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { accessControlQueryParam } from 'app/core/utils/accessControl';
-import { OrgUser, AccessControlAction } from 'app/types';
+import { OrgUser, AccessControlAction, OrgRole } from 'app/types';
 
-import UsersTable from '../users/UsersTable';
+import { UsersTable } from '../users/UsersTable';
+
+const perPage = 30;
 
 interface OrgNameDTO {
   orgName: string;
 }
 
 const getOrg = async (orgId: UrlQueryValue) => {
-  return await getBackendSrv().get('/api/orgs/' + orgId);
+  return await getBackendSrv().get(`/api/orgs/${orgId}`);
 };
 
-const getOrgUsers = async (orgId: UrlQueryValue) => {
+const getOrgUsers = async (orgId: UrlQueryValue, page: number) => {
   if (contextSrv.hasPermission(AccessControlAction.OrgUsersRead)) {
-    return await getBackendSrv().get(`/api/orgs/${orgId}/users`, accessControlQueryParam());
+    return getBackendSrv().get(`/api/orgs/${orgId}/users/search`, accessControlQueryParam({ perpage: perPage, page }));
   }
-  return [];
+  return { orgUsers: [] };
 };
 
-const updateOrgUserRole = async (orgUser: OrgUser, orgId: UrlQueryValue) => {
-  await getBackendSrv().patch('/api/orgs/' + orgId + '/users/' + orgUser.userId, orgUser);
+const updateOrgUserRole = (orgUser: OrgUser, orgId: UrlQueryValue) => {
+  return getBackendSrv().patch(`/api/orgs/${orgId}/users/${orgUser.userId}`, orgUser);
 };
 
-const removeOrgUser = async (orgUser: OrgUser, orgId: UrlQueryValue) => {
-  return await getBackendSrv().delete('/api/orgs/' + orgId + '/users/' + orgUser.userId);
+const removeOrgUser = (orgUser: OrgUser, orgId: UrlQueryValue) => {
+  return getBackendSrv().delete(`/api/orgs/${orgId}/users/${orgUser.userId}`);
 };
 
 interface Props extends GrafanaRouteComponentProps<{ id: string }> {}
 
-export default function AdminEditOrgPage({ match }: Props) {
+const AdminEditOrgPage = ({ match }: Props) => {
   const orgId = parseInt(match.params.id, 10);
   const canWriteOrg = contextSrv.hasPermission(AccessControlAction.OrgsWrite);
   const canReadUsers = contextSrv.hasPermission(AccessControlAction.OrgUsersRead);
 
   const [users, setUsers] = useState<OrgUser[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
 
   const [orgState, fetchOrg] = useAsyncFn(() => getOrg(orgId), []);
-  const [, fetchOrgUsers] = useAsyncFn(() => getOrgUsers(orgId), []);
+  const [, fetchOrgUsers] = useAsyncFn(async (page) => {
+    const result = await getOrgUsers(orgId, page);
+    const totalPages = result?.perPage !== 0 ? Math.ceil(result.totalCount / result.perPage) : 0;
+    setTotalPages(totalPages);
+    setUsers(result.orgUsers);
+    return result.orgUsers;
+  }, []);
 
   useEffect(() => {
     fetchOrg();
-    fetchOrgUsers().then((res) => setUsers(res));
-  }, [fetchOrg, fetchOrgUsers]);
+    fetchOrgUsers(page);
+  }, [fetchOrg, fetchOrgUsers, page]);
 
   const updateOrgName = async (name: string) => {
-    return await getBackendSrv().put('/api/orgs/' + orgId, { ...orgState.value, name });
+    return await getBackendSrv().put(`/api/orgs/${orgId}`, { ...orgState.value, name });
   };
 
-  const renderMissingUserListRightsMessage = () => {
-    return (
-      <Alert severity="info" title="Access denied">
-        You do not have permission to see users in this organization. To update this organization, contact your server
-        administrator.
-      </Alert>
-    );
+  const renderMissingPermissionMessage = () => (
+    <Alert severity="info" title="Access denied">
+      You do not have permission to see users in this organization. To update this organization, contact your server
+      administrator.
+    </Alert>
+  );
+
+  const onPageChange = (toPage: number) => {
+    setPage(toPage);
+  };
+
+  const onRemoveUser = async (orgUser: OrgUser) => {
+    await removeOrgUser(orgUser, orgId);
+    fetchOrgUsers(page);
+  };
+
+  const onRoleChange = async (role: OrgRole, orgUser: OrgUser) => {
+    await updateOrgUserRole({ ...orgUser, role }, orgId);
+    fetchOrgUsers(page);
   };
 
   const pageNav: NavModelItem = {
@@ -81,7 +102,7 @@ export default function AdminEditOrgPage({ match }: Props) {
           {orgState.value && (
             <Form
               defaultValues={{ orgName: orgState.value.name }}
-              onSubmit={async (values: OrgNameDTO) => await updateOrgName(values.orgName)}
+              onSubmit={(values: OrgNameDTO) => updateOrgName(values.orgName)}
             >
               {({ register, errors }) => (
                 <>
@@ -96,39 +117,27 @@ export default function AdminEditOrgPage({ match }: Props) {
             </Form>
           )}
 
-          <div
-            className={css`
-              margin-top: 20px;
-            `}
-          >
+          <div style={{ marginTop: '20px' }}>
             <Legend>Organization users</Legend>
-            {!canReadUsers && renderMissingUserListRightsMessage()}
+            {!canReadUsers && renderMissingPermissionMessage()}
             {canReadUsers && !!users.length && (
-              <UsersTable
-                users={users}
-                orgId={orgId}
-                onRoleChange={(role, orgUser) => {
-                  updateOrgUserRole({ ...orgUser, role }, orgId);
-                  setUsers(
-                    users.map((user) => {
-                      if (orgUser.userId === user.userId) {
-                        return { ...orgUser, role };
-                      }
-                      return user;
-                    })
-                  );
-                  fetchOrgUsers();
-                }}
-                onRemoveUser={(orgUser) => {
-                  removeOrgUser(orgUser, orgId);
-                  setUsers(users.filter((user) => orgUser.userId !== user.userId));
-                  fetchOrgUsers();
-                }}
-              />
+              <VerticalGroup spacing="md">
+                <UsersTable users={users} orgId={orgId} onRoleChange={onRoleChange} onRemoveUser={onRemoveUser} />
+                <HorizontalGroup justify="flex-end">
+                  <Pagination
+                    onNavigate={onPageChange}
+                    currentPage={page}
+                    numberOfPages={totalPages}
+                    hideWhenSinglePage={true}
+                  />
+                </HorizontalGroup>
+              </VerticalGroup>
             )}
           </div>
         </>
       </Page.Contents>
     </Page>
   );
-}
+};
+
+export default AdminEditOrgPage;