feat: enhance Assign Role Wizard with user validation and navigation improvements

Author: bra-i-am

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

@@ -37,8 +37,9 @@ jest.mock('@openedx/paragon', () => {
 jest.mock('./SelectUsersAndRoleStep', () => ({
   __esModule: true,
   default: ({
-    setUsers, setSelectedRole, invalidUsers, validationError,
+    users, setUsers, setSelectedRole, invalidUsers, validationError,
   }: {
+    users: string;
     setUsers: (v: string) => void;
     setSelectedRole: (v: string) => void;
     invalidUsers: string[];
@@ -47,6 +48,7 @@ jest.mock('./SelectUsersAndRoleStep', () => ({
     <div>
       <input
         data-testid="users-input"
+        value={users}
         onChange={(e) => setUsers(e.target.value)}
       />
       <button type="button" data-testid="select-role" onClick={() => setSelectedRole('library_admin')}>
@@ -250,11 +252,14 @@ describe('AssignRoleWizard', () => {
 
   it('calls assignRole for each scope on Save', async () => {
     const user = userEvent.setup();
+    mockValidateMutateAsync.mockResolvedValue({ invalidUsers: [], validUsers: ['alice'] });
     mockAssignMutateAsync.mockResolvedValue({ completed: [], errors: [] });
 
     renderWizard();
     await user.type(screen.getByTestId('users-input'), 'alice');
     await user.click(screen.getByTestId('select-role'));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await waitFor(() => expect(mockValidateMutateAsync).toHaveBeenCalled());
     await user.click(screen.getByTestId('toggle-scope'));
     await user.click(screen.getByRole('button', { name: /Save/i }));
 
@@ -268,11 +273,14 @@ describe('AssignRoleWizard', () => {
   it('shows success toast and calls onClose after successful save', async () => {
     const user = userEvent.setup();
     const onClose = jest.fn();
+    mockValidateMutateAsync.mockResolvedValue({ invalidUsers: [], validUsers: ['alice'] });
     mockAssignMutateAsync.mockResolvedValue({ completed: [], errors: [] });
 
     renderWizard({ onClose });
     await user.type(screen.getByTestId('users-input'), 'alice');
     await user.click(screen.getByTestId('select-role'));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await waitFor(() => expect(mockValidateMutateAsync).toHaveBeenCalled());
     await user.click(screen.getByTestId('toggle-scope'));
     await user.click(screen.getByRole('button', { name: /Save/i }));
 
@@ -285,11 +293,14 @@ describe('AssignRoleWizard', () => {
   it('shows error toast when save fails', async () => {
     const user = userEvent.setup();
     const saveError = new Error('Server error');
+    mockValidateMutateAsync.mockResolvedValue({ invalidUsers: [], validUsers: ['alice'] });
     mockAssignMutateAsync.mockRejectedValue(saveError);
 
     renderWizard();
     await user.type(screen.getByTestId('users-input'), 'alice');
     await user.click(screen.getByTestId('select-role'));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await waitFor(() => expect(mockValidateMutateAsync).toHaveBeenCalled());
     await user.click(screen.getByTestId('toggle-scope'));
     await user.click(screen.getByRole('button', { name: /Save/i }));
 
@@ -298,11 +309,15 @@ describe('AssignRoleWizard', () => {
     });
   });
 
-  it('initialUsers prop pre-fills the users field', () => {
+  it('initialUsers prop pre-fills the users field', async () => {
+    const user = userEvent.setup();
     renderWizard({ initialUsers: 'prefilled_user' });
-    // The wizard starts with initialUsers set, but our mock input doesn't show it
-    // We verify the Next button state — it's still disabled without role
+    expect(screen.getByTestId('users-input')).toHaveValue('prefilled_user');
+    // Next is still disabled without a role selected
     expect(screen.getByRole('button', { name: /Next/i })).toBeDisabled();
+    // Selecting a role enables Next since users are already pre-filled
+    await user.click(screen.getByTestId('select-role'));
+    expect(screen.getByRole('button', { name: /Next/i })).not.toBeDisabled();
   });
 
   it('filters roles based on user permissions (library allowed, course not)', () => {

src/authz-module/wizard/AssignRoleWizard.tsx

@@ -45,6 +45,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
 
   const [validationError, setValidationError] = useState<string | null>(null);
   const [invalidUsers, setInvalidUsers] = useState<string[]>([]);
+  const [validatedUsers, setValidatedUsers] = useState<string[]>([]);
 
   const validateUsersMutation = useValidateUsers();
   const assignRoleMutation = useAssignTeamMembersRole();
@@ -75,13 +76,20 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
     return allRolesMetadata.filter((r) => allowedContextTypes.has(r.contextType || ''));
   }, [permissionsData]);
 
+  useEffect(() => {
+    if (filteredRoles.length === 0) {
+      onClose();
+    }
+  }, [filteredRoles.length, onClose]);
+
   const handleClose = () => {
     setActiveStep(STEPS.SELECT_USERS_AND_ROLE);
     setUsers('');
     setSelectedRole(null);
     setSelectedScopes(new Set());
     setValidationError(null);
     setInvalidUsers([]);
+    setValidatedUsers([]);
     onClose();
   };
 
@@ -102,6 +110,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
       if (result.invalidUsers?.length > 0) {
         setInvalidUsers(result.invalidUsers);
       } else {
+        setValidatedUsers(usersList);
         setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE);
       }
     } catch {
@@ -118,13 +127,12 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
   }, []);
 
   const handleSave = async () => {
-    if (!selectedRole || selectedScopes.size === 0) { return; }
-    const usersList = parseUsers(users);
+    if (!selectedRole || selectedScopes.size === 0 || validatedUsers.length === 0) { return; }
 
     try {
       await Promise.all(
         Array.from(selectedScopes).map((selectedScope) => assignRoleMutation.mutateAsync({
-          data: { users: usersList, role: selectedRole, scope: selectedScope },
+          data: { users: validatedUsers, role: selectedRole, scope: selectedScope },
         })),
       );
       showToast({ message: intl.formatMessage(messages['wizard.save.success']), type: 'success', delay: 5000 });

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

@@ -98,7 +98,7 @@ describe('AssignRoleWizardPage', () => {
     expect(screen.getByRole('heading', { name: 'Assign Role' })).toBeInTheDocument();
   });
 
-  it('calls navigate(-1) when wizard onClose is triggered', async () => {
+  it('navigates to team members path when wizard onClose is triggered', async () => {
     setupMocks();
     const mockNavigate = jest.fn();
     const { useNavigate } = jest.requireMock('react-router-dom');
@@ -108,6 +108,6 @@ describe('AssignRoleWizardPage', () => {
     renderWrapper(<AssignRoleWizardPage />);
     await user.click(screen.getByTestId('wizard-close'));
 
-    expect(mockNavigate).toHaveBeenCalledWith(-1);
+    expect(mockNavigate).toHaveBeenCalledWith('/authz/libraries/lib:123');
   });
 });

src/authz-module/wizard/AssignRoleWizardPage.tsx

@@ -20,7 +20,7 @@ const AssignRoleWizardPage = () => {
   const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', scope)}`;
 
   const handleCancel = () => {
-    navigate(-1);
+    navigate(teamMembersPath);
   };
 
   return (

src/authz-module/wizard/SelectUsersAndRoleStep.tsx

@@ -85,7 +85,7 @@ const SelectUsersAndRoleStep = ({
             {contextLabels[context] || context}
           </h5>
           <Form.RadioSet
-            name="role-selection"
+            name={`role-selection-${context}`}
             value={selectedRole || ''}
             onChange={(e) => setSelectedRole(e.target.value)}
             className="pl-4"