feat: implement query settings management for team members table with filtering and pagination

Author: bra-i-am

src/authz-module/data/api.ts

@@ -3,6 +3,14 @@ import { LibraryMetadata, TeamMember } from '@src/types';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getApiUrl, getStudioApiUrl } from '@src/data/utils';
 
+export interface QuerySettings {
+  roles: string | null;
+  search: string | null;
+  ordering: string | null;
+  pageSize: number;
+  pageIndex: number;
+}
+
 export interface GetTeamMembersResponse {
   members: TeamMember[];
   totalCount: number;
@@ -15,8 +23,22 @@ export type PermissionsByRole = {
 };
 
 // TODO: replece api path once is created
-export const getTeamMembers = async (object: string): Promise<TeamMember[]> => {
-  const { data } = await getAuthenticatedHttpClient().get(getApiUrl(`/api/authz/v1/roles/users?scope=${object}`));
+export const getTeamMembers = async (object: string, querySettings: QuerySettings): Promise<TeamMember[]> => {
+  const url = new URL(getApiUrl(`/api/authz/v1/roles/users?scope=${object}`));
+
+  if (querySettings.roles) {
+    url.searchParams.set('roles', querySettings.roles);
+  }
+  if (querySettings.search) {
+    url.searchParams.set('search', querySettings.search);
+  }
+  if (querySettings.ordering) {
+    url.searchParams.set('ordering', querySettings.ordering);
+  }
+  url.searchParams.set('page_size', querySettings.pageSize.toString());
+  url.searchParams.set('page', (querySettings.pageIndex + 1).toString());
+
+  const { data } = await getAuthenticatedHttpClient().get(url);
   return camelCaseObject(data.results);
 };
 

src/authz-module/data/hooks.ts

@@ -2,12 +2,21 @@ import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { appId } from '@src/constants';
 import { LibraryMetadata, TeamMember } from '@src/types';
 import {
-  getLibrary, getPermissionsByRole, getTeamMembers, PermissionsByRole,
+  getLibrary, getPermissionsByRole, getTeamMembers, PermissionsByRole, QuerySettings,
 } from './api';
 
 const authzQueryKeys = {
   all: [appId, 'authz'] as const,
-  teamMembers: (object: string) => [...authzQueryKeys.all, 'teamMembers', object] as const,
+  teamMembers: (object: string, querySettings: QuerySettings) => [
+    ...authzQueryKeys.all,
+    'teamMembers',
+    object,
+    querySettings.roles,
+    querySettings.search,
+    querySettings.ordering,
+    querySettings.pageSize,
+    querySettings.pageIndex,
+  ] as const,
   permissionsByRole: (scope: string) => [...authzQueryKeys.all, 'permissionsByRole', scope] as const,
   library: (libraryId: string) => [...authzQueryKeys.all, 'library', libraryId] as const,
 };
@@ -17,17 +26,24 @@ const authzQueryKeys = {
  * It retrieves the full list of members who have access to the given scope.
  *
  * @param object - The unique identifier of the object/scope
+ * @param querySettings - Optional query parameters for filtering, sorting, and pagination
  *
  * @example
  * ```tsx
- * const { data: teamMembers, isLoading, isError } = useTeamMembers('lib:123');
+ * const { data: teamMembers, isLoading, isError } = useTeamMembers('lib:123', querySettings);
  * ```
  */
-export const useTeamMembers = (object: string) => useQuery<TeamMember[], Error>({
-  queryKey: authzQueryKeys.teamMembers(object),
-  queryFn: () => getTeamMembers(object),
-  staleTime: 1000 * 60 * 30, // refetch after 30 minutes
-});
+export const useTeamMembers = (object: string, querySettings: QuerySettings) => {
+  const queryKey = authzQueryKeys.teamMembers(object, querySettings);
+
+  return useQuery<TeamMember[], Error>({
+    queryKey,
+    queryFn: () => getTeamMembers(object, querySettings),
+    staleTime: 1000 * 60 * 5,
+    enabled: !!object,
+    refetchOnWindowFocus: false,
+  });
+};
 
 /**
  * React Query hook to fetch all the roles for the specific object/scope.

src/authz-module/libraries-manager/components/MultipleChoiceFilter.tsx

@@ -47,7 +47,7 @@ const MultipleChoiceFilter: FC<MultipleChoiceFilterProps> = ({
             <Form.Checkbox
               className="m-2"
               key={name}
-              value={name}
+              value={value}
               onChange={() => changeCheckbox(value)}
               aria-label={name}
             >

src/authz-module/libraries-manager/components/TeamTable.tsx

@@ -10,7 +10,11 @@ import { Edit } from '@openedx/paragon/icons';
 import { TableCellValue, TeamMember } from '@src/types';
 import { ROUTES } from '@src/authz-module/constants';
 import { useTeamMembers } from '@src/authz-module/data/hooks';
+import {
+  useMemo,
+} from 'react';
 import { useLibraryAuthZ } from '../context';
+import { useQuerySettings } from '../hooks';
 import messages from './messages';
 import TableControlBar from './TableControlBar';
 
@@ -58,37 +62,30 @@ const RolesCell = ({ row }: CellProps) => (row.original.username === SKELETON_RO
 
 const TeamTable = () => {
   const intl = useIntl();
-  const { libraryId, canManageTeam, username } = useLibraryAuthZ();
+
+  const { querySettings, handleTableFetch } = useQuerySettings();
+
+  const {
+    libraryId, canManageTeam, username, roles,
+  } = useLibraryAuthZ();
 
   // TODO: Display error in the notification system
   const {
     data: teamMembers, isLoading, isError,
-  } = useTeamMembers(libraryId);
+  } = useTeamMembers(libraryId, querySettings);
 
   const rows = isError ? [] : (teamMembers || SKELETON_ROWS);
 
   const navigate = useNavigate();
 
-  const reducedChoices = teamMembers?.reduce((acc, currentObject) => {
-    const { roles } = currentObject;
-    roles.forEach((role) => {
-      if (role in acc) {
-        acc[role].number += 1;
-      } else {
-        acc[role] = {
-          name: role,
-          number: 1,
-          value: role,
-        };
-      }
-    });
-    return acc;
-  }, {}) ?? {};
-
-  const handleFetchData = (querySettings) => {
-    console.log('Filters', querySettings.filters);
-    console.log('Sorting', querySettings.sortBy);
-  };
+  const adaptedFilterChoices = useMemo(
+    () => roles.map((role) => ({
+      name: role.name,
+      number: role.userCount,
+      value: role.role,
+    })),
+    [roles],
+  );
 
   return (
     <DataTable
@@ -100,7 +97,7 @@ const TeamTable = () => {
       manualPagination
       isSortable
       manualSortBy
-      fetchData={debounce(handleFetchData, 1000)}
+      fetchData={debounce(handleTableFetch, 1000)}
       data={rows}
       itemCount={rows?.length}
       additionalColumns={[
@@ -147,7 +144,7 @@ const TeamTable = () => {
             Cell: RolesCell,
             Filter: CheckboxFilter,
             filter: 'includesValue',
-            filterChoices: Object.values(reducedChoices),
+            filterChoices: Object.values(adaptedFilterChoices),
             disableSortBy: true,
           },
           {

src/authz-module/libraries-manager/hooks/index.ts

@@ -0,0 +1 @@
+export { useQuerySettings } from './useQuerySettings';

src/authz-module/libraries-manager/hooks/useQuerySettings.ts

@@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react';
+import { QuerySettings } from '@src/authz-module/data/api';
+
+interface DataTableFilters {
+  pageSize: number;
+  pageIndex: number;
+  sortBy: Array<{ id: string; desc: boolean }>;
+  filters: Array<{ id: string; value: any }>;
+}
+
+interface UseQuerySettingsReturn {
+  querySettings: QuerySettings;
+  handleTableFetch: (tableFilters: DataTableFilters) => void;
+}
+
+/**
+ * Custom hook to manage query settings for table data fetching
+ * Converts DataTable filter/sort/pagination settings to API query parameters
+ * and manages URL synchronization
+ *
+ * @param initialQuerySettings - Initial query settings
+ * @returns Object containing querySettings and handleTableFetch function
+ */
+export const useQuerySettings = (
+  initialQuerySettings: QuerySettings = {
+    roles: null,
+    search: null,
+    pageSize: 10,
+    pageIndex: 0,
+    ordering: null,
+  },
+): UseQuerySettingsReturn => {
+  const [querySettings, setQuerySettings] = useState<QuerySettings>(initialQuerySettings);
+
+  const handleTableFetch = useCallback((tableFilters: DataTableFilters) => {
+    setQuerySettings((prevSettings) => {
+      // Extract filters
+      const rolesFilter = tableFilters.filters.find((filter) => filter.id === 'roles')?.value?.join(',') ?? '';
+      const searchFilter = tableFilters.filters.find((filter) => filter.id === 'username')?.value ?? '';
+
+      // Extract pagination
+      const { pageSize = 10, pageIndex = 0 } = tableFilters;
+
+      // Extract and convert sorting
+      let ordering = '';
+      if (tableFilters.sortBy.length) {
+        const snakeCaseId = tableFilters.sortBy[0].id.replace(/([A-Z])/g, '_$1').toLowerCase();
+
+        if (tableFilters.sortBy[0].desc) {
+          ordering = `-${snakeCaseId}`;
+        } else {
+          ordering = snakeCaseId;
+        }
+      }
+
+      const newQuerySettings: QuerySettings = {
+        roles: rolesFilter || null,
+        search: searchFilter || null,
+        ordering: ordering || null,
+        pageSize,
+        pageIndex,
+      };
+
+      const hasChanged = (
+        prevSettings.roles !== newQuerySettings.roles
+        || prevSettings.search !== newQuerySettings.search
+        || prevSettings.pageSize !== newQuerySettings.pageSize
+        || prevSettings.pageIndex !== newQuerySettings.pageIndex
+        || prevSettings.ordering !== newQuerySettings.ordering
+      );
+
+      if (!hasChanged) {
+        return prevSettings; // No change, prevent unnecessary update
+      }
+
+      return newQuerySettings;
+    });
+  }, []);
+
+  return {
+    querySettings,
+    handleTableFetch,
+  };
+};