feat: implement internationalization for Assign Role Wizard and update user role management messages

Author: bra-i-am

src/authz-module/constants.ts

@@ -67,8 +67,8 @@ export const libraryPermissions = [
   { key: CONTENT_LIBRARY_PERMISSIONS.EDIT_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Add or remove content from existing collections.' },
   { key: CONTENT_LIBRARY_PERMISSIONS.DELETE_LIBRARY_COLLECTION, resource: 'library_collection', description: 'Delete entire collections from the library.' },
 
-  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, resource: 'library_team', description: 'View the list of users who have access to the library.' },
-  { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, resource: 'library_team', description: 'Add, remove, and assign roles to users within the library.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, resource: 'library_team', description: 'Add, remove, and assign roles to users within the library.' },
+  { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, resource: 'library_team', description: 'View the list of users who have access to the library.' },
 ];
 
 // Course Permission Keys

src/authz-module/libraries-manager/LibrariesTeamManager.test.tsx

@@ -29,11 +29,6 @@ jest.mock('./components/TeamTable', () => ({
   default: () => <div role="table" aria-label="Team Members Table">Team member list</div>,
 }));
 
-jest.mock('./components/AddNewTeamMemberModal', () => ({
-  __esModule: true,
-  AddNewTeamMemberTrigger: () => <button type="button">Add Team Member</button>,
-}));
-
 jest.mock('../components/RoleCard', () => ({
   __esModule: true,
   default: ({ title, description, permissionsByResource }: {
@@ -111,8 +106,8 @@ describe('LibrariesTeamManager', () => {
     // TeamTable is rendered
     expect(screen.getByRole('table', { name: 'Team Members Table' })).toBeInTheDocument();
 
-    // AddNewTeamMemberTrigger is rendered
-    expect(screen.getByRole('button', { name: 'Add Team Member' })).toBeInTheDocument();
+    // Assign Role button is rendered
+    expect(screen.getByRole('button', { name: 'Assign Role' })).toBeInTheDocument();
   });
 
   it('renders role cards when "Roles" tab is selected', async () => {

src/authz-module/wizard/AssignRoleWizard.tsx

@@ -1,6 +1,7 @@
 import {
   useState, useCallback, useEffect, useMemo,
 } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Stepper, Button, Container, StatefulButton, Icon,
 } from '@openedx/paragon';
@@ -13,6 +14,7 @@ import {
 } from '../constants';
 import { useToastManager } from '../libraries-manager/ToastManagerContext';
 import { useValidateUserPermissions } from '../../data/hooks';
+import messages from './messages';
 
 const allRolesMetadata = [...courseRolesMetadata, ...libraryRolesMetadata];
 
@@ -35,6 +37,7 @@ interface AssignRoleWizardProps {
 }
 
 const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizardProps) => {
+  const intl = useIntl();
   const [activeStep, setActiveStep] = useState<StepKey>(STEPS.SELECT_USERS_AND_ROLE);
   const [users, setUsers] = useState(initialUsers);
   const [selectedRole, setSelectedRole] = useState<string | null>(null);
@@ -102,7 +105,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
         setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE);
       }
     } catch {
-      setValidationError('An error occurred while validating users. Please try again.');
+      setValidationError(intl.formatMessage(messages['wizard.validate.error']));
     }
   };
 
@@ -124,9 +127,9 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
           data: { users: usersList, role: selectedRole, scope: selectedScope },
         })),
       );
-      showToast({ message: 'Role assigned successfully.', type: 'success', delay: 5000 });
+      showToast({ message: intl.formatMessage(messages['wizard.save.success']), type: 'success', delay: 5000 });
       handleClose();
-    } catch (error: any) {
+    } catch (error: unknown) {
       showErrorToast(error, handleSave);
     }
   };
@@ -142,7 +145,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
         <Stepper.Step
           onClick={() => setActiveStep(STEPS.SELECT_USERS_AND_ROLE)}
           eventKey={STEPS.SELECT_USERS_AND_ROLE}
-          title="Who and Role"
+          title={intl.formatMessage(messages['wizard.step.selectUsersAndRole.title'])}
         >
           <SelectUsersAndRoleStep
             users={users}
@@ -158,7 +161,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
         <Stepper.Step
           onClick={() => setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE)}
           eventKey={STEPS.DEFINE_APPLICATION_SCOPE}
-          title="Where it applies"
+          title={intl.formatMessage(messages['wizard.step.defineScope.title'])}
         >
           <DefineApplicationScopeStep
             selectedRole={selectedRole}
@@ -171,11 +174,14 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
       <div className="p-5">
         <Stepper.ActionRow eventKey={STEPS.SELECT_USERS_AND_ROLE}>
           <Button variant="outline-primary" onClick={handleClose}>
-            Cancel
+            {intl.formatMessage(messages['wizard.button.cancel'])}
           </Button>
           <Stepper.ActionRow.Spacer />
           <StatefulButton
-            labels={{ default: 'Next', pending: 'Validating...' }}
+            labels={{
+              default: intl.formatMessage(messages['wizard.button.next']),
+              pending: intl.formatMessage(messages['wizard.button.next.pending']),
+            }}
             icons={{ pending: <Icon src={SpinnerSimple} /> }}
             state={validateUsersMutation.isPending ? 'pending' : 'default'}
             onClick={validateUsersAndProceed}
@@ -185,14 +191,17 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
 
         <Stepper.ActionRow eventKey={STEPS.DEFINE_APPLICATION_SCOPE}>
           <Button variant="outline-primary" onClick={handleClose}>
-            Cancel
+            {intl.formatMessage(messages['wizard.button.cancel'])}
           </Button>
           <Button variant="tertiary" onClick={() => setActiveStep(STEPS.SELECT_USERS_AND_ROLE)}>
-            Back
+            {intl.formatMessage(messages['wizard.button.back'])}
           </Button>
           <Stepper.ActionRow.Spacer />
           <StatefulButton
-            labels={{ default: 'Save', pending: 'Saving...' }}
+            labels={{
+              default: intl.formatMessage(messages['wizard.button.save']),
+              pending: intl.formatMessage(messages['wizard.button.save.pending']),
+            }}
             icons={{ pending: <Icon src={SpinnerSimple} /> }}
             state={assignRoleMutation.isPending ? 'pending' : 'default'}
             onClick={handleSave}

src/authz-module/wizard/AssignRoleWizardPage.tsx

@@ -1,18 +1,21 @@
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import AssignRoleWizard from './AssignRoleWizard';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibrary } from '../data/hooks';
 import { ROUTES } from '../constants';
+import messages from './messages';
 
 const AssignRoleWizardPage = () => {
   const navigate = useNavigate();
+  const intl = useIntl();
   const [searchParams] = useSearchParams();
   const scope = searchParams.get('scope') || '';
   const initialUsers = searchParams.get('users') || '';
 
-  const { data: library, isLoading } = useLibrary(scope);
+  const { data: library } = useLibrary(scope);
 
-  if (isLoading) { return null; }
+  if (!scope || !library) { return null; }
 
   const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', scope)}`;
 
@@ -23,9 +26,9 @@ const AssignRoleWizardPage = () => {
   return (
     <AuthZLayout
       context={{ id: scope, title: library.title, org: library.org }}
-      navLinks={[{ label: 'Roles and Permissions Management', to: teamMembersPath }]}
-      activeLabel="Assign Role"
-      pageTitle="Assign Role"
+      navLinks={[{ label: intl.formatMessage(messages['wizard.page.breadcrumb']), to: teamMembersPath }]}
+      activeLabel={intl.formatMessage(messages['wizard.page.title'])}
+      pageTitle={intl.formatMessage(messages['wizard.page.title'])}
       pageSubtitle=""
       actions={[]}
     >

src/authz-module/wizard/HighlightedUsersInput.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
 // Shared styles between overlay and textarea to keep text positions in sync
 const INPUT_STYLE: React.CSSProperties = {
@@ -24,6 +24,8 @@ interface HighlightedUsersInputProps {
 const HighlightedUsersInput = ({
   value, onChange, invalidUsers, placeholder, hasNetworkError = false,
 }: HighlightedUsersInputProps) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
   const invalidSet = useMemo(
     () => new Set(invalidUsers.map((u) => u.trim())),
     [invalidUsers],
@@ -47,11 +49,18 @@ const HighlightedUsersInput = ({
     });
   }, [value, invalidSet, hasHighlights]);
 
+  const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
+    if (overlayRef.current) {
+      overlayRef.current.scrollTop = e.currentTarget.scrollTop;
+    }
+  };
+
   return (
     <div style={{ position: 'relative' }}>
       {/* Highlight layer — sits behind the transparent textarea */}
       {hasHighlights && (
         <div
+          ref={overlayRef}
           aria-hidden="true"
           style={{
             ...INPUT_STYLE,
@@ -75,6 +84,7 @@ const HighlightedUsersInput = ({
         rows={4}
         value={value}
         onChange={(e) => onChange(e.target.value)}
+        onScroll={handleScroll}
         placeholder={hasHighlights ? undefined : placeholder}
         className={`form-control${hasNetworkError ? ' is-invalid' : ''}`}
         style={{

src/authz-module/wizard/SelectUsersAndRoleStep.tsx

@@ -1,8 +1,11 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Form, Stack, OverlayTrigger,
   Tooltip,
 } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import HighlightedUsersInput from './HighlightedUsersInput';
+import messages from './messages';
 
 interface RoleMetadata {
   role: string;
@@ -24,11 +27,6 @@ interface SelectUsersAndRoleStepProps {
 
 const CONTEXT_ORDER = ['course', 'library'];
 
-const contextLabels: Record<string, string> = {
-  library: 'Libraries',
-  course: 'Courses',
-};
-
 const SelectUsersAndRoleStep = ({
   users,
   setUsers,
@@ -38,6 +36,13 @@ const SelectUsersAndRoleStep = ({
   validationError,
   invalidUsers,
 }: SelectUsersAndRoleStepProps) => {
+  const intl = useIntl();
+
+  const contextLabels: Record<string, string> = {
+    library: intl.formatMessage(messages['wizard.step1.roles.contextLabel.library']),
+    course: intl.formatMessage(messages['wizard.step1.roles.contextLabel.course']),
+  };
+
   const rolesByContext = roles.reduce<Record<string, RoleMetadata[]>>((acc, role) => {
     const context = role.contextType || 'library';
     if (!acc[context]) { acc[context] = []; }
@@ -47,31 +52,33 @@ const SelectUsersAndRoleStep = ({
 
   const orderedContexts = CONTEXT_ORDER.filter((ctx) => rolesByContext[ctx]);
 
+  const adminUrl = `${getConfig().LMS_BASE_URL}/admin`;
+
   return (
     <div className="select-users-and-role-step">
       {/* Users Section */}
-      <h3 className="mb-2">Users</h3>
+      <h3 className="mb-2">{intl.formatMessage(messages['wizard.step1.users.heading'])}</h3>
       <Form.Group controlId="users-input">
-        <Form.Label>Add users by username or email</Form.Label>
+        <Form.Label>{intl.formatMessage(messages['wizard.step1.users.label'])}</Form.Label>
         <HighlightedUsersInput
           value={users}
           onChange={setUsers}
           invalidUsers={invalidUsers}
-          placeholder="Enter one or more email addresses or usernames"
+          placeholder={intl.formatMessage(messages['wizard.step1.users.placeholder'])}
           hasNetworkError={!!validationError || invalidUsers.length > 0}
         />
         <Form.Text className={invalidUsers.length > 0 ? 'text-danger' : ''}>
           {invalidUsers.length > 0
-            ? 'This email is not associated with an account in this platform.'
-            : 'The user must already have an account.'}
+            ? intl.formatMessage(messages['wizard.step1.users.invalid'], { count: invalidUsers.length })
+            : intl.formatMessage(messages['wizard.step1.users.hint'])}
         </Form.Text>
         {validationError && (
           <div className="text-danger small mt-1">{validationError}</div>
         )}
       </Form.Group>
 
       {/* Roles Section */}
-      <h3 className="mt-4 mb-2">Roles</h3>
+      <h3 className="mt-4 mb-2">{intl.formatMessage(messages['wizard.step1.roles.heading'])}</h3>
       {orderedContexts.map((context) => (
         <div key={context} className="role-group mb-4">
           <h5 className="role-group-header mb-3 pl-4">
@@ -102,8 +109,7 @@ const SelectUsersAndRoleStep = ({
                     placement="right"
                     overlay={(
                       <Tooltip variant="light" id={`tooltip-disabled-${role.role}`}>
-                        We are expanding our permissions system. This role is currently
-                        unavailable but will be part of an upcoming update.
+                        {intl.formatMessage(messages['wizard.step1.roles.disabled.tooltip'])}
                       </Tooltip>
                     )}
                   >
@@ -120,11 +126,11 @@ const SelectUsersAndRoleStep = ({
 
       {/* Documentation Link */}
       <div className="mt-3">
-        <p className="mb-1 font-weight-bold small">Can&apos;t find the role you want to assign?</p>
+        <p className="mb-1 font-weight-bold small">{intl.formatMessage(messages['wizard.step1.docs.heading'])}</p>
         <p className="mb-0 small">
-          Some roles are managed outside this console{' '}
-          <a href="/admin" target="_blank" rel="noopener noreferrer">
-            View roles managed in LMS and Django Admin
+          {intl.formatMessage(messages['wizard.step1.docs.body'])}{' '}
+          <a href={adminUrl} target="_blank" rel="noopener noreferrer">
+            {intl.formatMessage(messages['wizard.step1.docs.link'])}
           </a>
         </p>
       </div>