feat: enhance Assign Role Wizard with scope management and user validation improvements

Author: bra-i-am

src/authz-module/constants.ts

@@ -34,16 +34,16 @@ export const CONTENT_LIBRARY_PERMISSIONS = {
 // but for the MVP we decided to manage it in the frontend
 export const libraryRolesMetadata = [
   {
-    role: 'library_admin', name: 'Library Admin', description: 'The Library Admin has full control over the library, including managing users, modifying content, and handling publishing workflows. They ensure content is properly maintained and accessible as needed.', contextType: 'library',
+    role: 'library_admin', name: 'Library Admin', description: 'Can create and manage content libraries, including access and structure.', contextType: 'library',
   },
   {
-    role: 'library_author', name: 'Library Author', description: 'The Library Author is responsible for creating, editing, and publishing content within a library. They can manage tags and collections but cannot delete libraries or manage users.', contextType: 'library',
+    role: 'library_author', name: 'Library Author', description: 'Can create and edit library content, but cannot manage access.', contextType: 'library',
   },
   {
-    role: 'library_contributor', name: 'Library Contributor', description: 'The Library Contributor can create and edit content within a library but cannot publish it. They support the authoring process while leaving final publishing to Authors or Admins.', contextType: 'library',
+    role: 'library_contributor', name: 'Library Contributor', description: 'Can contribute and update library content shared with them.', contextType: 'library',
   },
   {
-    role: 'library_user', name: 'Library User', description: 'The Library User can view and reuse content but cannot edit or delete any resource.', contextType: 'library',
+    role: 'library_user', name: 'Library User', description: 'Can view and use library content, but cannot edit it.', contextType: 'library',
   },
 ];
 

src/authz-module/data/api.ts

@@ -50,7 +50,7 @@ export interface AssignTeamMembersRoleRequest {
   scope: string;
 }
 
-// Validate Users API
+// TODO: Validate Users API
 export type ValidateUsersRequest = {
   users: string[];
 };

src/authz-module/data/hooks.ts

@@ -102,8 +102,8 @@ export const useAssignTeamMembersRole = () => {
  */
 export const useValidateUsers = () => useMutation({
   mutationFn: async ({ data }: {
-      data: ValidateUsersRequest
-    }) => validateUsers(data),
+    data: ValidateUsersRequest
+  }) => validateUsers(data),
 });
 
 /**

src/authz-module/wizard/AssignRoleWizard.tsx

@@ -1,16 +1,24 @@
-import { useState } from 'react';
 import {
-  Stepper, Button, Container, StatefulButton,
-  Icon,
+  useState, useCallback, useEffect, useMemo,
+} from 'react';
+import {
+  Stepper, Button, Container, StatefulButton, Icon,
 } from '@openedx/paragon';
 import { SpinnerSimple } from '@openedx/paragon/icons';
 import SelectUsersAndRoleStep from './SelectUsersAndRoleStep';
 import DefineApplicationScopeStep from './DefineApplicationScopeStep';
-import { useValidateUsers } from '../data/hooks';
+import { useValidateUsers, useAssignTeamMembersRole } from '../data/hooks';
 import { courseRolesMetadata, libraryRolesMetadata } from '../constants';
+import { useToastManager } from '../libraries-manager/ToastManagerContext';
+import { useValidateUserPermissions } from '../../data/hooks';
 
 const allRolesMetadata = [...courseRolesMetadata, ...libraryRolesMetadata];
 
+const CONTEXT_BY_ACTION: Record<string, string> = {
+  'content_libraries.manage_library_team': 'library',
+  'courses.manage_course_team': 'course',
+};
+
 const STEPS = {
   SELECT_USERS_AND_ROLE: 'select-users-and-role',
   DEFINE_APPLICATION_SCOPE: 'define-application-scope',
@@ -20,68 +28,114 @@ type StepKey = typeof STEPS[keyof typeof STEPS];
 
 interface AssignRoleWizardProps {
   onClose: () => void;
+  scope: string;
 }
 
-const AssignRoleWizard = ({ onClose }: AssignRoleWizardProps) => {
+const AssignRoleWizard = ({ onClose, scope }: AssignRoleWizardProps) => {
   const [activeStep, setActiveStep] = useState<StepKey>(STEPS.SELECT_USERS_AND_ROLE);
   const [users, setUsers] = useState('');
   const [selectedRole, setSelectedRole] = useState<string | null>(null);
+  const [selectedScopes, setSelectedScopes] = useState<Set<string>>(new Set());
 
   const [validationError, setValidationError] = useState<string | null>(null);
   const [invalidUsers, setInvalidUsers] = useState<string[]>([]);
 
   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(() => [
+    { action: 'content_libraries.manage_library_team', scope },
+    { action: 'courses.manage_course_team', scope },
+  ], [scope]);
+
+  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 filteredRoles = useMemo(() => {
+    const allowedContextTypes = new Set(
+      permissionsData
+        .filter((p) => p.allowed)
+        .map((p) => CONTEXT_BY_ACTION[p.action])
+        .filter(Boolean),
+    );
+    return allRolesMetadata.filter((r) => allowedContextTypes.has(r.contextType || ''));
+  }, [permissionsData]);
 
   const handleClose = () => {
     setActiveStep(STEPS.SELECT_USERS_AND_ROLE);
     setUsers('');
     setSelectedRole(null);
+    setSelectedScopes(new Set());
     setValidationError(null);
     setInvalidUsers([]);
     onClose();
   };
 
   const parseUsers = (input: string): string[] => input
     .split(',')
-    .map(u => u.trim())
+    .map((u) => u.trim())
     .filter(Boolean);
 
   const validateUsersAndProceed = async () => {
     const usersList = parseUsers(users);
-    if (usersList.length === 0 || !selectedRole) {
-      return;
-    }
+    if (usersList.length === 0 || !selectedRole) { return; }
 
     setValidationError(null);
     setInvalidUsers([]);
 
     try {
-      await validateUsersMutation.mutateAsync({
-        data: {
-          users: usersList,
-        },
-      });
-
-      setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE);
-    } catch (error: any) {
-      const errorData = error?.response?.data;
-      if (errorData?.invalidUsers) {
-        setInvalidUsers(errorData.invalidUsers);
-        setValidationError('Some users were not found. Please review the highlighted names below.');
+      const result = await validateUsersMutation.mutateAsync({ data: { users: usersList } });
+      if (result.invalidUsers?.length > 0) {
+        setInvalidUsers(result.invalidUsers);
       } else {
-        setValidationError('An error occurred while validating users. Please try again.');
+        setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE);
       }
+    } catch {
+      setValidationError('An error occurred while validating users. Please try again.');
+    }
+  };
+
+  const handleScopeToggle = useCallback((scopeId: string) => {
+    setSelectedScopes((prev) => {
+      const next = new Set(prev);
+      if (next.has(scopeId)) { next.delete(scopeId); } else { next.add(scopeId); }
+      return next;
+    });
+  }, []);
+
+  const handleSave = async () => {
+    if (!selectedRole || selectedScopes.size === 0) { return; }
+    const usersList = parseUsers(users);
+
+    try {
+      await Promise.all(
+        Array.from(selectedScopes).map((selectedScope) => assignRoleMutation.mutateAsync({
+          data: { users: usersList, role: selectedRole, scope: selectedScope },
+        })),
+      );
+      showToast({ message: 'Role assigned successfully.', type: 'success', delay: 5000 });
+      handleClose();
+    } catch (error: any) {
+      showErrorToast(error, handleSave);
     }
   };
 
   const canProceed = users.trim() && selectedRole && !validateUsersMutation.isPending;
+  const canSave = selectedScopes.size > 0 && !assignRoleMutation.isPending;
 
   return (
     <Stepper activeKey={activeStep}>
       <Stepper.Header className="bg-info-100" />
 
       <Container className="p-5">
-        {/* Step 1: Who and Role */}
         <Stepper.Step
           onClick={() => setActiveStep(STEPS.SELECT_USERS_AND_ROLE)}
           eventKey={STEPS.SELECT_USERS_AND_ROLE}
@@ -92,21 +146,21 @@ const AssignRoleWizard = ({ onClose }: AssignRoleWizardProps) => {
             setUsers={setUsers}
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
-            roles={allRolesMetadata}
+            roles={filteredRoles}
             validationError={validationError}
             invalidUsers={invalidUsers}
           />
         </Stepper.Step>
 
-        {/* Step 2: Where it applies */}
         <Stepper.Step
           onClick={() => setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE)}
           eventKey={STEPS.DEFINE_APPLICATION_SCOPE}
           title="Where it applies"
         >
           <DefineApplicationScopeStep
-            users={users}
             selectedRole={selectedRole}
+            selectedScopes={selectedScopes}
+            onScopeToggle={handleScopeToggle}
           />
         </Stepper.Step>
       </Container>
@@ -118,27 +172,29 @@ const AssignRoleWizard = ({ onClose }: AssignRoleWizardProps) => {
           </Button>
           <Stepper.ActionRow.Spacer />
           <StatefulButton
-            labels={{
-              default: 'Next',
-              pending: 'Validating...',
-            }}
-            icons={{
-			  pending: <Icon src={SpinnerSimple} />,
-            }}
+            labels={{ default: 'Next', pending: 'Validating...' }}
+            icons={{ pending: <Icon src={SpinnerSimple} /> }}
             state={validateUsersMutation.isPending ? 'pending' : 'default'}
             onClick={validateUsersAndProceed}
-            disabled={!canProceed | validateUsersMutation.isPending}
+            disabled={!canProceed || validateUsersMutation.isPending}
           />
         </Stepper.ActionRow>
 
         <Stepper.ActionRow eventKey={STEPS.DEFINE_APPLICATION_SCOPE}>
-          <Button variant="outline-primary" onClick={() => setActiveStep(STEPS.SELECT_USERS_AND_ROLE)}>
-            Previous
+          <Button variant="outline-primary" onClick={handleClose}>
+            Cancel
           </Button>
-          <Stepper.ActionRow.Spacer />
-          <Button onClick={handleClose}>
-            Apply
+          <Button variant="tertiary" onClick={() => setActiveStep(STEPS.SELECT_USERS_AND_ROLE)}>
+            Back
           </Button>
+          <Stepper.ActionRow.Spacer />
+          <StatefulButton
+            labels={{ default: 'Save', pending: 'Saving...' }}
+            icons={{ pending: <Icon src={SpinnerSimple} /> }}
+            state={assignRoleMutation.isPending ? 'pending' : 'default'}
+            onClick={handleSave}
+            disabled={!canSave}
+          />
         </Stepper.ActionRow>
       </div>
     </Stepper>

src/authz-module/wizard/AssignRoleWizardPage.tsx

@@ -13,11 +13,7 @@ const AssignRoleWizardPage = () => {
   const { data: library, isLoading, error } = useLibrary(scope);
 
   if (isLoading) {
-    return (
-      <div className="assign-role-wizard-page p-4">
-        <p>Loading...</p>
-      </div>
-    );
+    return null;
   }
 
   if (error || !library) {
@@ -48,6 +44,7 @@ const AssignRoleWizardPage = () => {
     >
       <AssignRoleWizard
         onClose={handleCancel}
+        scope={scope}
       />
     </AuthZLayout>
   );

src/authz-module/wizard/HighlightedUsersInput.tsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react';
+
+// Shared styles between overlay and textarea to keep text positions in sync
+const INPUT_STYLE: React.CSSProperties = {
+  fontFamily: 'inherit',
+  fontSize: '1rem',
+  lineHeight: '1.5',
+  padding: '0.375rem 0.75rem',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+  overflowWrap: 'break-word',
+  boxSizing: 'border-box',
+  width: '100%',
+};
+
+interface HighlightedUsersInputProps {
+  value: string;
+  onChange: (val: string) => void;
+  invalidUsers: string[];
+  placeholder?: string;
+  hasNetworkError?: boolean;
+}
+
+const HighlightedUsersInput = ({
+  value, onChange, invalidUsers, placeholder, hasNetworkError = false,
+}: HighlightedUsersInputProps) => {
+  const invalidSet = useMemo(
+    () => new Set(invalidUsers.map((u) => u.trim())),
+    [invalidUsers],
+  );
+  const hasHighlights = invalidSet.size > 0;
+
+  const renderedParts = useMemo(() => {
+    if (!hasHighlights) { return null; }
+    let offset = 0;
+    return value.split(/(,)/).map((part) => {
+      const key = offset;
+      offset += part.length;
+      if (part === ',') { return <span key={`comma-${key}`}>,</span>; }
+      const trimmed = part.trim();
+      const isInvalid = trimmed.length > 0 && invalidSet.has(trimmed);
+      return (
+        <span key={`part-${key}`} style={{ color: isInvalid ? '#c62828' : '#212529' }}>
+          {part}
+        </span>
+      );
+    });
+  }, [value, invalidSet, hasHighlights]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Highlight layer — sits behind the transparent textarea */}
+      {hasHighlights && (
+        <div
+          aria-hidden="true"
+          style={{
+            ...INPUT_STYLE,
+            position: 'absolute',
+            inset: 0,
+            background: '#fff',
+            border: '1px solid transparent',
+            borderRadius: '0.25rem',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 0,
+          }}
+        >
+          {renderedParts}
+        </div>
+      )}
+
+      {/* Actual textarea — text is transparent when overlay is active */}
+      <textarea
+        id="users-input"
+        rows={4}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={hasHighlights ? undefined : placeholder}
+        className={`form-control${hasNetworkError ? ' is-invalid' : ''}`}
+        style={{
+          ...INPUT_STYLE,
+          position: 'relative',
+          zIndex: 1,
+          color: hasHighlights ? 'transparent' : undefined,
+          caretColor: '#212529',
+          background: hasHighlights ? 'transparent' : undefined,
+          resize: 'vertical',
+          display: 'block',
+          minHeight: '100px',
+        }}
+      />
+    </div>
+  );
+};
+
+export default HighlightedUsersInput;