feat: enhance Assign Role Wizard

Author: bra-i-am

src/authz-module/constants.ts

@@ -162,7 +162,7 @@ export const getPermissions = (resourceType: ResourceType) => {
   }
 };
 
-// Get resource types by resource type
+// Get the resource sub-types (e.g. library, content, collection) for the given resource type
 export const getResourceTypes = (resourceType: ResourceType) => {
   switch (resourceType) {
     case RESOURCE_TYPES.LIBRARY:

src/authz-module/data/api.ts

@@ -50,14 +50,18 @@ export interface AssignTeamMembersRoleRequest {
   scope: string;
 }
 
-// TODO: Validate Users API
 export type ValidateUsersRequest = {
   users: string[];
 };
 
 export type ValidateUsersResponse = {
   validUsers: string[];
   invalidUsers: string[];
+  summary: {
+    total: number;
+    validCount: number;
+    invalidCount: number;
+  };
 };
 
 export const getTeamMembers = async (object: string, querySettings: QuerySettings): Promise<GetTeamMembersResponse> => {

src/authz-module/libraries-manager/components/AddNewTeamMemberModal/AddNewTeamMemberTrigger.tsx

@@ -138,37 +138,30 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
         .filter(Boolean),
     )];
 
-    let usersToAssign = normalizedUsers;
-
-    try {
-      const { invalidUsers } = await validateUsersAsync({ data: { users: normalizedUsers } });
-
-      if (invalidUsers.length > 0) {
-        const notFoundMessage = intl.formatMessage(
-          messages['libraries.authz.manage.add.member.failure.not.found'],
-          {
-            count: invalidUsers.length,
-            userIds: invalidUsers.join(', '),
-            Bold,
-            Br,
-          },
-        );
-        showToast({ message: notFoundMessage, type: 'error', delay: DEFAULT_TOAST_DELAY });
-        setErrorUsers(invalidUsers);
-        setIsError(true);
-        setFormValues((prev) => ({ ...prev, users: invalidUsers.join(', ') }));
-        return;
-      }
-
-      usersToAssign = normalizedUsers.filter((u) => !invalidUsers.includes(u));
-    } catch (validationError) {
-      // If validation endpoint fails, fall through and let assignTeamMembersRole handle errors
+    const { invalidUsers } = await validateUsersAsync({ data: { users: normalizedUsers } })
+      .catch(() => ({ invalidUsers: [] }));
+
+    if (invalidUsers.length > 0) {
+      const notFoundMessage = intl.formatMessage(
+        messages['libraries.authz.manage.add.member.failure.not.found'],
+        {
+          count: invalidUsers.length,
+          userIds: invalidUsers.join(', '),
+          Bold,
+          Br,
+        },
+      );
+      showToast({ message: notFoundMessage, type: 'error', delay: DEFAULT_TOAST_DELAY });
+      setErrorUsers(invalidUsers);
+      setIsError(true);
+      setFormValues((prev) => ({ ...prev, users: invalidUsers.join(', ') }));
+      return;
     }
 
-    if (usersToAssign.length === 0) { return; }
+    if (normalizedUsers.length === 0) { return; }
 
     const payload = {
-      users: usersToAssign,
+      users: normalizedUsers,
       role: formValues.role,
       scope: libraryId,
     };
@@ -198,7 +191,7 @@ const AddNewTeamMemberTrigger = ({ libraryId }: AddNewTeamMemberTriggerProps) =>
               ...roleAlreadyAssignedUsers.map(r => r.userIdentifier),
             ];
 
-            const errorUserIds = usersToAssign.filter((user) => !successUserIds.includes(user));
+            const errorUserIds = normalizedUsers.filter((user) => !successUserIds.includes(user));
             setErrorUsers(errorUserIds);
             setIsError(true);
             setFormValues((prev) => ({

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

@@ -4,7 +4,7 @@ import { renderWrapper } from '@src/setupTest';
 import { useTeamMembers } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from '@src/authz-module/libraries-manager/context';
 import { ToastManagerProvider } from '@src/authz-module/libraries-manager/ToastManagerContext';
-import { CONTENT_LIBRARY_PERMISSIONS } from '@src/authz-module/libraries-manager/constants';
+import { CONTENT_LIBRARY_PERMISSIONS } from '@src/authz-module/constants';
 import TeamTable from './index';
 
 const mockNavigate = jest.fn();

src/authz-module/wizard/AssignRoleWizard.tsx

@@ -1,5 +1,5 @@
 import {
-  useState, useCallback, useEffect, useMemo,
+  useState, useCallback, useMemo, useRef, useEffect,
 } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -8,11 +8,10 @@ import {
 import { SpinnerSimple } from '@openedx/paragon/icons';
 import SelectUsersAndRoleStep from './SelectUsersAndRoleStep';
 import DefineApplicationScopeStep from './DefineApplicationScopeStep';
-import { useValidateUsers, useAssignTeamMembersRole } from '../data/hooks';
+import { useValidateUsers } from '../data/hooks';
 import {
   CONTENT_LIBRARY_PERMISSIONS, COURSE_PERMISSIONS, courseRolesMetadata, libraryRolesMetadata,
 } from '../constants';
-import { useToastManager } from '../libraries-manager/ToastManagerContext';
 import { useValidateUserPermissions } from '../../data/hooks';
 import messages from './messages';
 
@@ -47,9 +46,9 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
   const [invalidUsers, setInvalidUsers] = useState<string[]>([]);
   const [validatedUsers, setValidatedUsers] = useState<string[]>([]);
 
+  const usersInputRef = useRef<HTMLTextAreaElement>(null);
+
   const validateUsersMutation = useValidateUsers();
-  const assignRoleMutation = useAssignTeamMembersRole();
-  const { showToast, showErrorToast } = useToastManager();
 
   // Filter role groups based on what the current user is allowed to manage
   const permissionChecks = useMemo(() => [
@@ -59,12 +58,10 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
 
   const { data: permissionsData } = useValidateUserPermissions(permissionChecks);
 
-  // Clear highlights as soon as the user edits the input
-  useEffect(() => {
-    if (invalidUsers.length > 0) {
-      setInvalidUsers([]);
-    }
-  }, [users]); // eslint-disable-line react-hooks/exhaustive-deps
+  const handleUsersChange = useCallback((value: string) => {
+    setInvalidUsers((prev) => (prev.length > 0 ? [] : prev));
+    setUsers(value);
+  }, []);
 
   const filteredRoles = useMemo(() => {
     const allowedContextTypes = new Set(
@@ -76,12 +73,6 @@ 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('');
@@ -126,43 +117,44 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
     });
   }, []);
 
-  const handleSave = async () => {
+  // TODO: replace with real assignment API call
+  const handleSave = () => {
     if (!selectedRole || selectedScopes.size === 0 || validatedUsers.length === 0) { return; }
 
-    try {
-      await Promise.all(
-        Array.from(selectedScopes).map((selectedScope) => assignRoleMutation.mutateAsync({
-          data: { users: validatedUsers, role: selectedRole, scope: selectedScope },
-        })),
-      );
-      showToast({ message: intl.formatMessage(messages['wizard.save.success']), type: 'success', delay: 5000 });
-      handleClose();
-    } catch (error: unknown) {
-      showErrorToast(error, handleSave);
-    }
+    // eslint-disable-next-line no-console
+    console.log('[AssignRoleWizard] handleSave', { users: validatedUsers, role: selectedRole, scopes: Array.from(selectedScopes) });
+    handleClose();
   };
 
-  const canProceed = users.trim() && selectedRole && !validateUsersMutation.isPending;
-  const canSave = selectedScopes.size > 0 && !assignRoleMutation.isPending;
+  const isError = invalidUsers.length > 0 || !!validationError;
+
+  useEffect(() => {
+    if (isError && usersInputRef.current) {
+      usersInputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [isError]);
+
+  const canProceed = !!users.trim() && !!selectedRole;
+  const canSave = selectedScopes.size > 0;
 
   return (
     <Stepper activeKey={activeStep}>
       <Stepper.Header className="bg-info-100" />
 
       <Container className="p-5">
         <Stepper.Step
-          onClick={() => setActiveStep(STEPS.SELECT_USERS_AND_ROLE)}
           eventKey={STEPS.SELECT_USERS_AND_ROLE}
           title={intl.formatMessage(messages['wizard.step.selectUsersAndRole.title'])}
         >
           <SelectUsersAndRoleStep
             users={users}
-            setUsers={setUsers}
+            setUsers={handleUsersChange}
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
             roles={filteredRoles}
             validationError={validationError}
             invalidUsers={invalidUsers}
+            inputRef={usersInputRef}
           />
         </Stepper.Step>
 
@@ -191,6 +183,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
               pending: intl.formatMessage(messages['wizard.button.next.pending']),
             }}
             icons={{ pending: <Icon src={SpinnerSimple} /> }}
+            variant={isError ? 'danger' : 'primary'}
             state={validateUsersMutation.isPending ? 'pending' : 'default'}
             onClick={validateUsersAndProceed}
             disabled={!canProceed || validateUsersMutation.isPending}
@@ -211,7 +204,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
               pending: intl.formatMessage(messages['wizard.button.save.pending']),
             }}
             icons={{ pending: <Icon src={SpinnerSimple} /> }}
-            state={assignRoleMutation.isPending ? 'pending' : 'default'}
+            state="default"
             onClick={handleSave}
             disabled={!canSave}
           />

src/authz-module/wizard/AssignRoleWizardPage.tsx

@@ -7,22 +7,15 @@ import { ROUTES } from '../constants';
 import messages from './messages';
 
 const AssignRoleWizardPage = () => {
-  const navigate = useNavigate();
   const intl = useIntl();
+  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const scope = searchParams.get('scope') || '';
+  const scope = searchParams.get('scope')!;
   const initialUsers = searchParams.get('users') || '';
-
   const { data: library } = useLibrary(scope);
 
-  if (!scope || !library) { return null; }
-
   const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', scope)}`;
 
-  const handleCancel = () => {
-    navigate(teamMembersPath);
-  };
-
   return (
     <AuthZLayout
       context={{ id: scope, title: library.title, org: library.org }}
@@ -33,7 +26,7 @@ const AssignRoleWizardPage = () => {
       actions={[]}
     >
       <AssignRoleWizard
-        onClose={handleCancel}
+        onClose={() => navigate(teamMembersPath)}
         scope={scope}
         initialUsers={initialUsers}
       />

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import HighlightedUsersInput from './HighlightedUsersInput';
 
 const defaultProps = {
+  id: 'users-input',
   value: '',
   onChange: jest.fn(),
   invalidUsers: [],
@@ -33,23 +34,20 @@ describe('HighlightedUsersInput', () => {
     const { container } = render(
       <HighlightedUsersInput {...defaultProps} value="jdoe, baduser" invalidUsers={['baduser']} />,
     );
-    const overlay = container.querySelector('[aria-hidden="true"]');
-    const spans = overlay!.querySelectorAll('span');
-    const redSpan = Array.from(spans).find((s) => (s as HTMLElement).style.color === 'rgb(198, 40, 40)');
-    expect(redSpan).toBeDefined();
-    expect(redSpan!.textContent).toContain('baduser');
+    const invalidSpan = container.querySelector('[data-invalid]');
+    expect(invalidSpan).toBeInTheDocument();
+    expect(invalidSpan!.textContent).toContain('baduser');
   });
 
   it('renders valid user parts in dark color', () => {
     const { container } = render(
       <HighlightedUsersInput {...defaultProps} value="jdoe, baduser" invalidUsers={['baduser']} />,
     );
     const overlay = container.querySelector('[aria-hidden="true"]');
-    const spans = overlay!.querySelectorAll('span');
-    const darkSpan = Array.from(spans).find(
-      (s) => (s as HTMLElement).style.color === 'rgb(33, 37, 41)' && s.textContent?.includes('jdoe'),
+    const validSpan = Array.from(overlay!.querySelectorAll('span:not([data-invalid])')).find(
+      (s) => s.textContent?.includes('jdoe'),
     );
-    expect(darkSpan).toBeDefined();
+    expect(validSpan).toBeDefined();
   });
 
   it('shows placeholder when no invalid users', () => {

src/authz-module/wizard/HighlightedUsersInput.tsx

@@ -1,4 +1,6 @@
-import { useMemo, useRef } from 'react';
+import {
+  useMemo, useRef, useCallback, forwardRef,
+} from 'react';
 
 // Shared styles between overlay and textarea to keep text positions in sync
 const INPUT_STYLE: React.CSSProperties = {
@@ -14,16 +16,17 @@ const INPUT_STYLE: React.CSSProperties = {
 };
 
 interface HighlightedUsersInputProps {
+  id: string;
   value: string;
   onChange: (val: string) => void;
   invalidUsers: string[];
   placeholder?: string;
   hasNetworkError?: boolean;
 }
 
-const HighlightedUsersInput = ({
-  value, onChange, invalidUsers, placeholder, hasNetworkError = false,
-}: HighlightedUsersInputProps) => {
+const HighlightedUsersInput = forwardRef<HTMLTextAreaElement, HighlightedUsersInputProps>(({
+  id, value, onChange, invalidUsers, placeholder, hasNetworkError = false,
+}, ref) => {
   const overlayRef = useRef<HTMLDivElement>(null);
 
   const invalidSet = useMemo(
@@ -42,18 +45,26 @@ const HighlightedUsersInput = ({
       const trimmed = part.trim();
       const isInvalid = trimmed.length > 0 && invalidSet.has(trimmed);
       return (
-        <span key={`part-${key}`} style={{ color: isInvalid ? '#c62828' : '#212529' }}>
+        <span
+          key={`part-${key}`}
+          data-invalid={isInvalid || undefined}
+          style={{
+            color: isInvalid
+              ? 'var(--pgn-color-danger-500)'
+              : 'var(--pgn-color-gray-700)',
+          }}
+        >
           {part}
         </span>
       );
     });
   }, [value, invalidSet, hasHighlights]);
 
-  const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
+  const handleScroll = useCallback((e: { currentTarget: HTMLTextAreaElement }) => {
     if (overlayRef.current) {
       overlayRef.current.scrollTop = e.currentTarget.scrollTop;
     }
-  };
+  }, []);
 
   return (
     <div style={{ position: 'relative' }}>
@@ -80,7 +91,8 @@ const HighlightedUsersInput = ({
 
       {/* Actual textarea — text is transparent when overlay is active */}
       <textarea
-        id="users-input"
+        ref={ref}
+        id={id}
         rows={4}
         value={value}
         onChange={(e) => onChange(e.target.value)}
@@ -101,6 +113,8 @@ const HighlightedUsersInput = ({
       />
     </div>
   );
-};
+});
+
+HighlightedUsersInput.displayName = 'HighlightedUsersInput';
 
 export default HighlightedUsersInput;