refactor: update sorting and group all in a Table

Author: dcoa

src/authz-module/data/api.ts

@@ -6,14 +6,15 @@ import { getApiUrl, getStudioApiUrl } from '@src/data/utils';
 export interface QuerySettings {
   roles: string | null;
   search: string | null;
-  ordering: string | null;
+  order: string | null;
+  sortBy: string | null;
   pageSize: number;
   pageIndex: number;
 }
 
 export interface GetTeamMembersResponse {
-  members: TeamMember[];
-  totalCount: number;
+  results: TeamMember[];
+  count: number;
 }
 
 export type PermissionsByRole = {
@@ -23,7 +24,7 @@ export type PermissionsByRole = {
 };
 
 // TODO: replece api path once is created
-export const getTeamMembers = async (object: string, querySettings: QuerySettings): Promise<TeamMember[]> => {
+export const getTeamMembers = async (object: string, querySettings: QuerySettings): Promise<GetTeamMembersResponse> => {
   const url = new URL(getApiUrl(`/api/authz/v1/roles/users/?scope=${object}`));
 
   if (querySettings.roles) {
@@ -32,14 +33,15 @@ export const getTeamMembers = async (object: string, querySettings: QuerySetting
   if (querySettings.search) {
     url.searchParams.set('search', querySettings.search);
   }
-  if (querySettings.ordering) {
-    url.searchParams.set('ordering', querySettings.ordering);
+  if (querySettings.sortBy && querySettings.order) {
+    url.searchParams.set('sort_by', querySettings.sortBy);
+    url.searchParams.set('order', querySettings.order);
   }
   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);
+  return camelCaseObject(data);
 };
 
 // TODO: this should be replaced in the future with Console API

src/authz-module/data/hooks.test.tsx

@@ -8,20 +8,23 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedHttpClient: jest.fn(),
 }));
 
-const mockMembers = [
-  {
-    fullName: 'Alice',
-    username: 'user1',
-    email: '[email protected]',
-    roles: ['admin', 'author'],
-  },
-  {
-    fullName: 'Bob',
-    username: 'user2',
-    email: '[email protected]',
-    roles: ['collaborator'],
-  },
-];
+const mockMembers = {
+  count: 2,
+  results: [
+    {
+      fullName: 'Alice',
+      username: 'user1',
+      email: '[email protected]',
+      roles: ['admin', 'author'],
+    },
+    {
+      fullName: 'Bob',
+      username: 'user2',
+      email: '[email protected]',
+      roles: ['collaborator'],
+    },
+  ],
+};
 
 const mockLibrary = {
   id: 'lib:123',
@@ -30,6 +33,15 @@ const mockLibrary = {
   slug: 'test-library',
 };
 
+const mockQuerySettings = {
+  roles: null,
+  search: null,
+  order: null,
+  sortBy: null,
+  pageSize: 10,
+  pageIndex: 0,
+};
+
 const createWrapper = () => {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -56,17 +68,9 @@ describe('useTeamMembers', () => {
 
   it('returns data when API call succeeds', async () => {
     getAuthenticatedHttpClient.mockReturnValue({
-      get: jest.fn().mockResolvedValue({ data: { results: mockMembers } }),
+      get: jest.fn().mockResolvedValue({ data: mockMembers }),
     });
 
-    const mockQuerySettings = {
-      roles: null,
-      search: null,
-      ordering: null,
-      pageSize: 10,
-      pageIndex: 0,
-    };
-
     const { result } = renderHook(() => useTeamMembers('lib:123', mockQuerySettings), {
       wrapper: createWrapper(),
     });
@@ -82,14 +86,6 @@ describe('useTeamMembers', () => {
       get: jest.fn().mockRejectedValue(new Error('API failure')),
     });
 
-    const mockQuerySettings = {
-      roles: null,
-      search: null,
-      ordering: null,
-      pageSize: 10,
-      pageIndex: 0,
-    };
-
     const { result } = renderHook(() => useTeamMembers('lib:123', mockQuerySettings), {
       wrapper: createWrapper(),
     });

src/authz-module/data/hooks.ts

@@ -1,22 +1,15 @@
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { appId } from '@src/constants';
-import { LibraryMetadata, TeamMember } from '@src/types';
+import { LibraryMetadata } from '@src/types';
 import {
-  getLibrary, getPermissionsByRole, getTeamMembers, PermissionsByRole, QuerySettings,
+  getLibrary, getPermissionsByRole, getTeamMembers, GetTeamMembersResponse, PermissionsByRole, QuerySettings,
 } from './api';
 
 const authzQueryKeys = {
   all: [appId, 'authz'] as const,
-  teamMembers: (object: string, querySettings?: QuerySettings) => [
-    ...authzQueryKeys.all,
-    'teamMembers',
-    object,
-    querySettings?.roles ?? null,
-    querySettings?.search ?? null,
-    querySettings?.ordering ?? null,
-    querySettings?.pageSize ?? 10,
-    querySettings?.pageIndex ?? 0,
-  ] as const,
+  teamMembersAll: (scope: string) => [...authzQueryKeys.all, 'teamMembers', scope] as const,
+  teamMembers: (scope: string, querySettings?: QuerySettings) => [
+    ...authzQueryKeys.teamMembersAll(scope), querySettings] as const,
   permissionsByRole: (scope: string) => [...authzQueryKeys.all, 'permissionsByRole', scope] as const,
   library: (libraryId: string) => [...authzQueryKeys.all, 'library', libraryId] as const,
 };
@@ -25,24 +18,20 @@ const authzQueryKeys = {
  * React Query hook to fetch all team members for a specific object/scope.
  * It retrieves the full list of members who have access to the given scope.
  *
- * @param object - The unique identifier of the object/scope
+ * @param scope - 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', querySettings);
  * ```
  */
-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 * 30, // refetch after 30 minutes
-    refetchOnWindowFocus: false,
-  });
-};
+export const useTeamMembers = (scope: string, querySettings: QuerySettings) => useQuery<GetTeamMembersResponse, Error>({
+  queryKey: authzQueryKeys.teamMembers(scope, querySettings),
+  queryFn: () => getTeamMembers(scope, querySettings),
+  staleTime: 1000 * 60 * 30, // refetch after 30 minutes
+  refetchOnWindowFocus: false,
+});
 
 /**
  * React Query hook to fetch all the roles for the specific object/scope.

…components/MultipleChoiceFilter.test.tsx …components/MultipleChoiceFilter.test.tsxsrc/authz-module/libraries-manager/components/MultipleChoiceFilter.test.tsx renamed to src/authz-module/libraries-manager/components/TeamTable/components/MultipleChoiceFilter.test.tsx src/authz-module/libraries-manager/components/MultipleChoiceFilter.test.tsx renamed to src/authz-module/libraries-manager/components/TeamTable/components/MultipleChoiceFilter.test.tsx

@@ -56,8 +56,6 @@ describe('SortDropdown', () => {
 
     expect(screen.getByText('Name A-Z')).toBeInTheDocument();
     expect(screen.getByText('Name Z-A')).toBeInTheDocument();
-    expect(screen.getByText('Newest')).toBeInTheDocument();
-    expect(screen.getByText('Oldest')).toBeInTheDocument();
   });
 
   it('should display current sort when a sort is active', () => {
@@ -86,32 +84,6 @@ describe('SortDropdown', () => {
     expect(screen.getByText('Name Z-A')).toBeInTheDocument();
   });
 
-  it('should display newest sort correctly', () => {
-    const contextWithSort = {
-      state: {
-        ...defaultDataTableState,
-        sortBy: [{ id: 'createdAt', desc: true }],
-      },
-    };
-
-    renderSortDropdown(contextWithSort);
-
-    expect(screen.getByText('Newest')).toBeInTheDocument();
-  });
-
-  it('should display oldest sort correctly', () => {
-    const contextWithSort = {
-      state: {
-        ...defaultDataTableState,
-        sortBy: [{ id: 'createdAt', desc: false }],
-      },
-    };
-
-    renderSortDropdown(contextWithSort);
-
-    expect(screen.getByText('Oldest')).toBeInTheDocument();
-  });
-
   it('should handle sort selection and call toggleSortBy', () => {
     renderSortDropdown();
 
@@ -133,14 +105,6 @@ describe('SortDropdown', () => {
     });
 
     expect(mockToggleSortBy).toHaveBeenCalledWith('username', true);
-
-    const newestOption = screen.getByText('Newest');
-
-    act(() => {
-      fireEvent.click(newestOption);
-    });
-
-    expect(mockToggleSortBy).toHaveBeenCalledWith('createdAt', true);
   });
 
   it('should mark the active sort option as active', () => {

…ager/components/MultipleChoiceFilter.tsx …able/components/MultipleChoiceFilter.tsxsrc/authz-module/libraries-manager/components/MultipleChoiceFilter.tsx renamed to src/authz-module/libraries-manager/components/TeamTable/components/MultipleChoiceFilter.tsx src/authz-module/libraries-manager/components/MultipleChoiceFilter.tsx renamed to src/authz-module/libraries-manager/components/TeamTable/components/MultipleChoiceFilter.tsx

@@ -25,8 +25,6 @@ interface SortByOptions {
 const SORT_BY_OPTIONS: SortByOptions = {
   'name-a-z': { id: 'username', desc: false },
   'name-z-a': { id: 'username', desc: true },
-  newest: { id: 'createdAt', desc: true },
-  oldest: { id: 'createdAt', desc: false },
 };
 
 const SortDropdown: FC = () => {
@@ -37,8 +35,6 @@ const SortDropdown: FC = () => {
   const SORT_LABELS: Record<string, string> = useMemo(() => ({
     'name-a-z': intl.formatMessage({ id: 'authz.libraries.team.table.sort.name-a-z', defaultMessage: 'Name A-Z' }),
     'name-z-a': intl.formatMessage({ id: 'authz.libraries.team.table.sort.name-z-a', defaultMessage: 'Name Z-A' }),
-    newest: intl.formatMessage({ id: 'authz.libraries.team.table.sort.newest', defaultMessage: 'Newest' }),
-    oldest: intl.formatMessage({ id: 'authz.libraries.team.table.sort.oldest', defaultMessage: 'Oldest' }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);