fix: validate user manage team action and scopes

Author: dcoa

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

@@ -2,7 +2,9 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useNavigate } from 'react-router-dom';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
-import { renderWrapper } from '@src/setupTest';
+import { renderWithAllProviders } from '@src/setupTest';
+import { useValidateUserPermissionsNonSuspense } from '@src/data/hooks';
+import { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } from '../roles-permissions';
 import AddRoleButton from './AddRoleButton';
 
 // Mock react-router-dom navigation
@@ -11,6 +13,20 @@ jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
 }));
 
+jest.mock('@src/data/hooks', () => ({
+  ...jest.requireActual('@src/data/hooks'),
+  useValidateUserPermissionsNonSuspense: jest.fn(),
+}));
+
+const mockUseValidatePermissions = useValidateUserPermissionsNonSuspense as jest.Mock;
+const allowAllPermissions = {
+  data: [
+    { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, allowed: true },
+    { action: CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, allowed: true },
+  ],
+  isLoading: false,
+};
+
 describe('AddRoleButton', () => {
   const mockNavigate = jest.fn();
 
@@ -26,6 +42,7 @@ describe('AddRoleButton', () => {
 
   beforeEach(() => {
     (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+    mockUseValidatePermissions.mockReturnValue(allowAllPermissions);
   });
 
   afterEach(() => {
@@ -34,21 +51,21 @@ describe('AddRoleButton', () => {
 
   describe('rendering', () => {
     it('renders the assign role button with correct text', () => {
-      renderWrapper(<AddRoleButton />);
+      renderWithAllProviders(<AddRoleButton />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       expect(button).toBeInTheDocument();
     });
 
     it('displays the plus icon', () => {
-      renderWrapper(<AddRoleButton />);
+      renderWithAllProviders(<AddRoleButton />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       expect(button.querySelector('svg')).toBeInTheDocument();
     });
 
     it('renders correctly when presetUsername is provided', () => {
-      renderWrapper(<AddRoleButton presetUsername="testuser123" />);
+      renderWithAllProviders(<AddRoleButton presetUsername="testuser123" />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       expect(button).toBeInTheDocument();
@@ -58,7 +75,7 @@ describe('AddRoleButton', () => {
   describe('navigation behavior', () => {
     it('navigates to assign role page without username when clicked', async () => {
       const user = userEvent.setup();
-      renderWrapper(<AddRoleButton />);
+      renderWithAllProviders(<AddRoleButton />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       await user.click(button);
@@ -70,7 +87,7 @@ describe('AddRoleButton', () => {
     it('navigates to assign role page with username query parameter when presetUsername is provided', async () => {
       const user = userEvent.setup();
       const presetUsername = 'john.doe';
-      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+      renderWithAllProviders(<AddRoleButton presetUsername={presetUsername} />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       await user.click(button);
@@ -82,7 +99,7 @@ describe('AddRoleButton', () => {
     it('handles special characters in presetUsername correctly', async () => {
       const user = userEvent.setup();
       const presetUsername = 'user@example.com';
-      renderWrapper(<AddRoleButton presetUsername={presetUsername} />);
+      renderWithAllProviders(<AddRoleButton presetUsername={presetUsername} />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       await user.click(button);
@@ -95,7 +112,7 @@ describe('AddRoleButton', () => {
   describe('user interactions', () => {
     it('responds to keyboard navigation', async () => {
       const user = userEvent.setup();
-      renderWrapper(<AddRoleButton />);
+      renderWithAllProviders(<AddRoleButton />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
 
@@ -108,7 +125,7 @@ describe('AddRoleButton', () => {
 
     it('responds to spacebar activation', async () => {
       const user = userEvent.setup();
-      renderWrapper(<AddRoleButton />);
+      renderWithAllProviders(<AddRoleButton />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
       button.focus();
@@ -119,7 +136,7 @@ describe('AddRoleButton', () => {
 
     it('handles multiple clicks gracefully', async () => {
       const user = userEvent.setup();
-      renderWrapper(<AddRoleButton presetUsername="testuser" />);
+      renderWithAllProviders(<AddRoleButton presetUsername="testuser" />);
 
       const button = screen.getByRole('button', { name: /assign role/i });
 
@@ -131,4 +148,39 @@ describe('AddRoleButton', () => {
       expect(mockNavigate).toHaveBeenCalledWith('/authz/assign-role?users=testuser');
     });
   });
+
+  describe('permission gating', () => {
+    it('does not render the button when the user cannot manage any team', () => {
+      mockUseValidatePermissions.mockReturnValue({
+        data: [
+          { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, allowed: false },
+          { action: CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, allowed: false },
+        ],
+        isLoading: false,
+      });
+      renderWithAllProviders(<AddRoleButton />);
+
+      expect(screen.queryByRole('button', { name: /assign role/i })).not.toBeInTheDocument();
+    });
+
+    it('renders the button when at least one team-management permission is allowed', () => {
+      mockUseValidatePermissions.mockReturnValue({
+        data: [
+          { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, allowed: false },
+          { action: CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, allowed: true },
+        ],
+        isLoading: false,
+      });
+      renderWithAllProviders(<AddRoleButton />);
+
+      expect(screen.getByRole('button', { name: /assign role/i })).toBeInTheDocument();
+    });
+
+    it('does not render the button while permissions are loading', () => {
+      mockUseValidatePermissions.mockReturnValue({ data: undefined, isLoading: true });
+      renderWithAllProviders(<AddRoleButton />);
+
+      expect(screen.queryByRole('button', { name: /assign role/i })).not.toBeInTheDocument();
+    });
+  });
 });

src/authz-module/components/AddRoleButton.tsx

@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom';
 
 import baseMessages from '@src/authz-module/messages';
 import { buildWizardPath } from '@src/authz-module/constants';
+import { useValidateUserPermissionsNonSuspense } from '@src/data/hooks';
+import { CONTENT_COURSE_PERMISSIONS, CONTENT_LIBRARY_PERMISSIONS } from '../roles-permissions';
 
 interface AddRoleButtonProps {
   presetUsername?: string;
@@ -15,19 +17,26 @@ const AddRoleButton = ({ presetUsername, from }: AddRoleButtonProps) => {
   const intl = useIntl();
   const navigate = useNavigate();
 
+  const { data: permissionValidationResponse } = useValidateUserPermissionsNonSuspense([
+    { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM },
+    { action: CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM },
+  ]);
+  const canAssignRole = permissionValidationResponse?.some((permission) => permission.allowed);
+
   const handleClick = () => {
     const path = buildWizardPath({ from, users: presetUsername });
     navigate(path);
   };
 
   return (
-    <Button
-      iconBefore={Plus}
-      onClick={handleClick}
-    >
-      {intl.formatMessage(baseMessages['authz.management.assign.role.title'])}
-    </Button>
-  );
+    canAssignRole ? (
+      <Button
+        iconBefore={Plus}
+        onClick={handleClick}
+      >
+        {intl.formatMessage(baseMessages['authz.management.assign.role.title'])}
+      </Button>
+    ) : null);
 };
 
 export default AddRoleButton;

src/authz-module/role-assignation-wizard/AssignRoleWizard.test.tsx

@@ -7,8 +7,11 @@ import {
   useValidateUsers, useAssignTeamMembersRole, useScopes, useOrgs,
 } from '../data/hooks';
 import useScopePermissions from './hooks/useScopePermissions';
+import { courseRolesMetadata, libraryRolesMetadata } from '../roles-permissions';
 import AssignRoleWizard from './AssignRoleWizard';
 
+const allRolesMetadata = [...courseRolesMetadata, ...libraryRolesMetadata];
+
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedUser: jest.fn(),
 }));
@@ -76,7 +79,7 @@ const oneOrg = [
 
 const renderWizard = (props = {}) => renderWrapper(
   <ToastManagerProvider>
-    <AssignRoleWizard onClose={jest.fn()} {...props} />
+    <AssignRoleWizard onClose={jest.fn()} roles={allRolesMetadata} {...props} />
   </ToastManagerProvider>,
 );
 
@@ -117,6 +120,12 @@ describe('AssignRoleWizard — Step 1', () => {
     expect(getNextButton()).toBeDisabled();
   });
 
+  it('renders no role options and keeps Next disabled when roles is empty', () => {
+    renderWizard({ roles: [] });
+    expect(screen.queryByRole('radio')).not.toBeInTheDocument();
+    expect(getNextButton()).toBeDisabled();
+  });
+
   it('selecting a different role replaces the previous selection', async () => {
     const user = userEvent.setup();
     renderWizard();

src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx

@@ -10,14 +10,10 @@ import { RoleMetadata } from '@src/types';
 import { useToastManager } from '@src/components/ToastManager/ToastManagerContext';
 import SelectUsersAndRoleStep from './components/SelectUsersAndRoleStep';
 import DefineApplicationScopeStep from './components/DefineApplicationScopeStep';
-import { libraryRolesMetadata } from '../roles-permissions/library/constants';
-import { courseRolesMetadata } from '../roles-permissions/course/constants';
 import { useValidateUsers, useAssignTeamMembersRole } from '../data/hooks';
 import messages from './messages';
 import { formatRoleAssignmentError } from './utils';
 
-const allRolesMetadata = [...courseRolesMetadata, ...libraryRolesMetadata];
-
 const STEPS = {
   SELECT_USERS_AND_ROLE: 'select-users-and-role',
   DEFINE_APPLICATION_SCOPE: 'define-application-scope',
@@ -28,8 +24,6 @@ type StepKey = typeof STEPS[keyof typeof STEPS];
 interface AssignRoleWizardProps {
   onClose: () => void;
   initialUsers?: string;
-  /** Filtered role list. Defaults to all roles (course + library). Pass a subset
-   *  once a permission-lookup API is available to hide groups the caller cannot assign. */
   roles?: RoleMetadata[];
 }
 
@@ -48,7 +42,7 @@ const getInitialState = (initialUsers: string) => ({
 });
 
 const AssignRoleWizard = ({
-  onClose, initialUsers = '', roles = allRolesMetadata,
+  onClose, initialUsers = '', roles = [],
 }: AssignRoleWizardProps) => {
   const intl = useIntl();
   const { showToast, showErrorToast } = useToastManager();

src/authz-module/role-assignation-wizard/AssignRoleWizardPage.test.tsx

@@ -1,8 +1,15 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderWrapper } from '@src/setupTest';
+import { renderWithAllProviders } from '@src/setupTest';
 import { ToastManagerProvider } from '@src/components/ToastManager/ToastManagerContext';
+import { useValidateUserPermissionsNonSuspense } from '@src/data/hooks';
 import { useValidateUsers } from '../data/hooks';
+import {
+  CONTENT_COURSE_PERMISSIONS,
+  CONTENT_LIBRARY_PERMISSIONS,
+  courseRolesMetadata,
+  libraryRolesMetadata,
+} from '../roles-permissions';
 import AssignRoleWizardPage from './AssignRoleWizardPage';
 
 jest.mock('@edx/frontend-platform/logging');
@@ -27,7 +34,20 @@ jest.mock('@edx/frontend-component-header', () => ({
   StudioHeader: () => null,
 }));
 
+jest.mock('@src/data/hooks', () => ({
+  ...jest.requireActual('@src/data/hooks'),
+  useValidateUserPermissionsNonSuspense: jest.fn(),
+}));
+
 const mockUseValidateUsers = useValidateUsers as jest.Mock;
+const mockUseValidatePermissions = useValidateUserPermissionsNonSuspense as jest.Mock;
+const allowAllPermissions = {
+  data: [
+    { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, allowed: true },
+    { action: CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, allowed: true },
+  ],
+  isLoading: false,
+};
 
 const setupMocks = ({ users = '', from = '' } = {}) => {
   const { useSearchParams, useNavigate } = jest.requireMock('react-router-dom');
@@ -40,7 +60,7 @@ const setupMocks = ({ users = '', from = '' } = {}) => {
   return { navigate };
 };
 
-const renderPage = () => renderWrapper(
+const renderPage = () => renderWithAllProviders(
   <ToastManagerProvider>
     <AssignRoleWizardPage />
   </ToastManagerProvider>,
@@ -53,6 +73,7 @@ describe('AssignRoleWizardPage', () => {
       mutateAsync: jest.fn(),
       isPending: false,
     });
+    mockUseValidatePermissions.mockReturnValue(allowAllPermissions);
   });
 
   it('renders the page with the wizard and title', () => {
@@ -107,4 +128,64 @@ describe('AssignRoleWizardPage', () => {
     await user.click(screen.getByRole('button', { name: /Cancel/i }));
     expect(navigate).toHaveBeenCalledWith('/authz/team');
   });
+
+  describe('assignable roles', () => {
+    // Each entry maps an allowed permission to the role metadata the wizard should
+    // surface for it. Add a row here as more scopes/roles are introduced.
+    const scopeRoles = [
+      { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, roles: libraryRolesMetadata },
+      { action: CONTENT_COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, roles: courseRolesMetadata },
+    ];
+    const allRoles = scopeRoles.flatMap(({ roles }) => roles);
+
+    it('shows the roles for every allowed scope', () => {
+      setupMocks();
+      renderPage();
+      allRoles.forEach((role) => {
+        expect(screen.getByText(role.name)).toBeInTheDocument();
+      });
+    });
+
+    it.each(scopeRoles)('shows only the roles for the allowed scope %#', ({ action, roles }) => {
+      mockUseValidatePermissions.mockReturnValue({
+        data: scopeRoles.map((scope) => ({ action: scope.action, allowed: scope.action === action })),
+        isLoading: false,
+      });
+      setupMocks();
+      renderPage();
+
+      roles.forEach((role) => {
+        expect(screen.getByText(role.name)).toBeInTheDocument();
+      });
+      allRoles
+        .filter((role) => !roles.includes(role))
+        .forEach((role) => {
+          expect(screen.queryByText(role.name)).not.toBeInTheDocument();
+        });
+    });
+
+    it('shows no roles when no scope is allowed', () => {
+      mockUseValidatePermissions.mockReturnValue({
+        data: scopeRoles.map(({ action }) => ({ action, allowed: false })),
+        isLoading: false,
+      });
+      setupMocks();
+      renderPage();
+      allRoles.forEach((role) => {
+        expect(screen.queryByText(role.name)).not.toBeInTheDocument();
+      });
+    });
+
+    it('ignores allowed permissions whose action is not a known role scope', () => {
+      mockUseValidatePermissions.mockReturnValue({
+        data: [{ action: 'some.unrelated.permission', allowed: true }],
+        isLoading: false,
+      });
+      setupMocks();
+      renderPage();
+      allRoles.forEach((role) => {
+        expect(screen.queryByText(role.name)).not.toBeInTheDocument();
+      });
+    });
+  });
 });