fix: filter roles displays only the user scope related

Author: dcoa

src/authz-module/components/TableControlBar/RolesFilter.test.tsx

@@ -1,7 +1,21 @@
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
+import { useValidateUserPermissionsNonSuspense } from '@src/data/hooks';
+import { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } from '@src/authz-module/roles-permissions';
 import RolesFilter from './RolesFilter';
 
+jest.mock('@src/data/hooks', () => ({
+  useValidateUserPermissionsNonSuspense: jest.fn(),
+}));
+
+const mockUsePermissions = useValidateUserPermissionsNonSuspense as jest.Mock;
+
+const permissionsData = ({ library, course }: { library?: boolean; course?: boolean }) => [
+  { action: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, allowed: !!library },
+  { action: CONTENT_COURSE_PERMISSIONS.VIEW_COURSE_TEAM, allowed: !!course },
+];
+
 describe('RolesFilter', () => {
   const defaultProps = {
     filterButtonText: 'Roles',
@@ -10,11 +24,17 @@ describe('RolesFilter', () => {
     disabled: false,
   };
 
+  const openDropdown = async (user: ReturnType<typeof userEvent.setup>) => {
+    await user.click(screen.getByRole('button', { name: /Roles/i }));
+    return within(await screen.findByRole('group', { name: 'Roles' }));
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUsePermissions.mockReturnValue({ data: permissionsData({ library: true, course: true }) });
   });
 
-  it('renders without crashing', () => {
+  it('renders the filter toggle', () => {
     renderWrapper(<RolesFilter {...defaultProps} />);
     expect(screen.getByText('Roles')).toBeInTheDocument();
   });
@@ -29,9 +49,52 @@ describe('RolesFilter', () => {
     expect(screen.getByText('Select Roles')).toBeInTheDocument();
   });
 
-  it('calls setFilter when filter changes', () => {
-    const mockSetFilter = jest.fn();
-    renderWrapper(<RolesFilter {...defaultProps} setFilter={mockSetFilter} />);
-    expect(screen.getByText('Roles')).toBeInTheDocument();
+  it('calls setFilter with the selected role when a role is checked', async () => {
+    const user = userEvent.setup();
+    const setFilter = jest.fn();
+    renderWrapper(<RolesFilter {...defaultProps} setFilter={setFilter} />);
+    const menu = await openDropdown(user);
+    await user.click(menu.getByLabelText('Course Admin'));
+    expect(setFilter).toHaveBeenCalledWith(
+      ['course_admin'],
+      expect.objectContaining({ value: 'course_admin', displayName: 'Course Admin' }),
+    );
+  });
+
+  it('shows only library roles when the user can view the library scope only', async () => {
+    const user = userEvent.setup();
+    mockUsePermissions.mockReturnValue({ data: permissionsData({ library: true }) });
+    renderWrapper(<RolesFilter {...defaultProps} />);
+    const menu = await openDropdown(user);
+    expect(menu.getByText('Libraries')).toBeInTheDocument();
+    expect(menu.getByLabelText('Library Admin')).toBeInTheDocument();
+    expect(menu.queryByText('Courses')).not.toBeInTheDocument();
+    expect(menu.queryByLabelText('Course Admin')).not.toBeInTheDocument();
+  });
+
+  it('shows both course and library roles when the user can view both scopes', async () => {
+    const user = userEvent.setup();
+    renderWrapper(<RolesFilter {...defaultProps} />);
+    const menu = await openDropdown(user);
+    expect(menu.getByText('Courses')).toBeInTheDocument();
+    expect(menu.getByText('Libraries')).toBeInTheDocument();
+  });
+
+  it('shows no role options when the user cannot view any scope', async () => {
+    const user = userEvent.setup();
+    mockUsePermissions.mockReturnValue({ data: permissionsData({}) });
+    renderWrapper(<RolesFilter {...defaultProps} />);
+    const menu = await openDropdown(user);
+    expect(menu.queryByText('Courses')).not.toBeInTheDocument();
+    expect(menu.queryByText('Libraries')).not.toBeInTheDocument();
+  });
+
+  it('shows no role options while permissions are still loading', async () => {
+    const user = userEvent.setup();
+    mockUsePermissions.mockReturnValue({ data: undefined });
+    renderWrapper(<RolesFilter {...defaultProps} />);
+    const menu = await openDropdown(user);
+    expect(menu.queryByText('Courses')).not.toBeInTheDocument();
+    expect(menu.queryByText('Libraries')).not.toBeInTheDocument();
   });
 });

src/authz-module/components/TableControlBar/RolesFilter.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Person } from '@openedx/paragon/icons';
+import { useValidateUserPermissionsNonSuspense } from '@src/data/hooks';
+import { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } from '@src/authz-module/roles-permissions';
 import MultipleChoiceFilter from './MultipleChoiceFilter';
 import { MultipleChoiceFilterProps } from './types';
 import { getRolesFiltersOptions } from '../constants';
@@ -11,7 +13,27 @@ const RolesFilter = ({
   filterButtonText, filterValue, setFilter, disabled,
 }: RolesFilterProps) => {
   const intl = useIntl();
-  const rolesOptions = useMemo(() => getRolesFiltersOptions(intl), [intl]);
+  const { data: permissions } = useValidateUserPermissionsNonSuspense([
+    { action: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM },
+    { action: CONTENT_COURSE_PERMISSIONS.VIEW_COURSE_TEAM },
+  ]);
+
+  // Only show role groups for the domains the user can view. Global roles stay
+  // hidden until a platform-wide permission is available to gate them on.
+  const allowedContexts = useMemo(() => {
+    const contexts = new Set<string>();
+    permissions?.forEach((p) => {
+      if (!p.allowed) { return; }
+      if (p.action === CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM) { contexts.add('library'); }
+      if (p.action === CONTENT_COURSE_PERMISSIONS.VIEW_COURSE_TEAM) { contexts.add('course'); }
+    });
+    return contexts;
+  }, [permissions]);
+
+  const rolesOptions = useMemo(
+    () => getRolesFiltersOptions(intl).filter((option) => allowedContexts.has(option.contextType)),
+    [intl, allowedContexts],
+  );
   return (
     <MultipleChoiceFilter
       filterButtonText={filterButtonText}

src/authz-module/components/TableControlBar/TableControlBar.test.tsx

@@ -43,6 +43,20 @@ jest.mock('@src/authz-module/data/hooks', () => ({
   useScopes: () => ({ data: { results: [] } }),
 }));
 
+// RolesFilter validates view-team permissions to decide which role groups to show.
+// Grant both so the full course/library role set renders for these wiring tests.
+jest.mock('@src/data/hooks', () => {
+  const { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } = jest.requireActual('@src/authz-module/roles-permissions');
+  return {
+    useValidateUserPermissionsNonSuspense: () => ({
+      data: [
+        { action: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, allowed: true },
+        { action: CONTENT_COURSE_PERMISSIONS.VIEW_COURSE_TEAM, allowed: true },
+      ],
+    }),
+  };
+});
+
 describe('TableControlBar', () => {
   const mockDataTableContext = {
     columns: mockColumns,
@@ -90,9 +104,9 @@ describe('TableControlBar', () => {
     const rolesButton = screen.getByText('Select Roles');
     expect(rolesButton).toBeInTheDocument();
     await user.click(rolesButton);
-    const superAdminOption = screen.getByRole('checkbox', { name: /Super Admin/i });
-    expect(superAdminOption).toBeInTheDocument();
-    await user.click(superAdminOption);
+    const courseAdminOption = screen.getByRole('checkbox', { name: /Course Admin/i });
+    expect(courseAdminOption).toBeInTheDocument();
+    await user.click(courseAdminOption);
     expect(contextWithRolesFilter.columns[0].setFilter).toHaveBeenCalled();
   });
 

src/authz-module/components/constants.ts

@@ -8,62 +8,72 @@ export const getRolesFiltersOptions = (intl: IntlShape) => [
     groupIcon: Language,
     displayName: 'Super Admin',
     value: 'super_admin',
+    contextType: 'global',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.global']),
     groupIcon: Language,
     displayName: 'Global Staff',
     value: 'global_staff',
+    contextType: 'global',
   },
 
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
     groupIcon: School,
     displayName: 'Course Admin',
     value: 'course_admin',
+    contextType: 'course',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
     groupIcon: School,
     displayName: 'Course Staff',
     value: 'course_staff',
+    contextType: 'course',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
     groupIcon: School,
     displayName: 'Course Editor',
     value: 'course_editor',
+    contextType: 'course',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.courses']),
     groupIcon: School,
     displayName: 'Course Auditor',
     value: 'course_auditor',
+    contextType: 'course',
   },
 
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
     groupIcon: LibraryBooks,
     displayName: 'Library Admin',
     value: 'library_admin',
+    contextType: 'library',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
     groupIcon: LibraryBooks,
     displayName: 'Library Author',
     value: 'library_author',
+    contextType: 'library',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
     groupIcon: LibraryBooks,
     displayName: 'Library Contributor',
     value: 'library_contributor',
+    contextType: 'library',
   },
   {
     groupName: intl.formatMessage(messages['authz.team.members.table.group.libraries']),
     groupIcon: LibraryBooks,
     displayName: 'Library User',
     value: 'library_user',
+    contextType: 'library',
   },
 ];