refactor: address feedback

Author: bra-i-am

src/authz-module/index.scss

@@ -75,6 +75,43 @@
   }
 }
 
+.highlighted-users-input {
+  &__layer {
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0.375rem 0.75rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    width: 100%;
+  }
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    background: #fff;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &__textarea {
+    position: relative;
+    z-index: 1;
+    min-height: 100px;
+    resize: vertical;
+    caret-color: #212529;
+
+    &--highlighted {
+      color: transparent;
+      background: transparent;
+    }
+  }
+}
+
 .toast-container {
   // Ensure toast appears above modal
   z-index: 1000;

src/authz-module/index.tsx

@@ -9,7 +9,7 @@ import { ToastManagerProvider } from '@src/components/ToastManager/ToastManagerC
 import { LibrariesUserManager, LibrariesLayout, LibrariesTeamManager } from './libraries-manager';
 import AuthzHome from './authz-home';
 import AuditUserPage from './audit-user';
-import AssignRoleWizardPage from './wizard/AssignRoleWizardPage';
+import AssignRoleWizardPage from './role-assignation-wizard/AssignRoleWizardPage';
 import { ROUTES } from './constants';
 
 import './index.scss';

src/authz-module/libraries-manager/context.tsx

@@ -8,8 +8,9 @@ import { usePermissionsByRole } from '@src/authz-module/data/hooks';
 import { PermissionMetadata, ResourceMetadata, Role } from 'types';
 import { CustomErrors } from '@src/constants';
 import {
-  CONTENT_LIBRARY_PERMISSIONS, libraryPermissions, libraryResourceTypes, libraryRolesMetadata,
+  CONTENT_LIBRARY_PERMISSIONS, libraryPermissions, libraryResourceTypes,
 } from '../constants';
+import { libraryRolesMetadata } from '../roles-permissions/library/constants';
 
 const LIBRARY_TEAM_PERMISSIONS = [
   CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM,

…-module/wizard/AssignRoleWizard.test.tsx …gnation-wizard/AssignRoleWizard.test.tsxsrc/authz-module/wizard/AssignRoleWizard.test.tsx renamed to src/authz-module/role-assignation-wizard/AssignRoleWizard.test.tsx src/authz-module/wizard/AssignRoleWizard.test.tsx renamed to src/authz-module/role-assignation-wizard/AssignRoleWizard.test.tsx

@@ -34,6 +34,20 @@ interface AssignRoleWizardProps {
   roles?: RoleMetadata[];
 }
 
+const parseUsers = (input: string): string[] => input
+  .split(',')
+  .map((u) => u.trim())
+  .filter(Boolean);
+
+const getInitialState = (initialUsers: string) => ({
+  activeStep: STEPS.SELECT_USERS_AND_ROLE as StepKey,
+  users: initialUsers,
+  selectedRole: null as string | null,
+  selectedScopes: new Set<string>(),
+  invalidUsers: [] as string[],
+  validatedUsers: [] as string[],
+});
+
 const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata }: AssignRoleWizardProps) => {
   const intl = useIntl();
   const { showErrorToast } = useToastManager();
@@ -42,7 +56,6 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
   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 [validatedUsers, setValidatedUsers] = useState<string[]>([]);
 
@@ -52,31 +65,25 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
 
   const handleUsersChange = useCallback((value: string) => {
     setInvalidUsers((prev) => (prev.length > 0 ? [] : prev));
-    setValidationError(null);
     setUsers(value);
   }, []);
 
   const handleClose = () => {
-    setActiveStep(STEPS.SELECT_USERS_AND_ROLE);
-    setUsers('');
-    setSelectedRole(null);
-    setSelectedScopes(new Set());
-    setValidationError(null);
-    setInvalidUsers([]);
-    setValidatedUsers([]);
+    const initialState = getInitialState(initialUsers);
+    setActiveStep(initialState.activeStep);
+    setUsers(initialState.users);
+    setSelectedRole(initialState.selectedRole);
+    setSelectedScopes(initialState.selectedScopes);
+    setInvalidUsers(initialState.invalidUsers);
+    setValidatedUsers(initialState.validatedUsers);
     onClose();
   };
 
-  const parseUsers = (input: string): string[] => input
-    .split(',')
-    .map((u) => u.trim())
-    .filter(Boolean);
-
   const validateUsersAndProceed = async () => {
+    if (validateUsersMutation.isPending) { return; }
     const usersList = parseUsers(users);
     if (usersList.length === 0 || !selectedRole) { return; }
 
-    setValidationError(null);
     setInvalidUsers([]);
 
     try {
@@ -88,7 +95,6 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
         setActiveStep(STEPS.DEFINE_APPLICATION_SCOPE);
       }
     } catch (error) {
-      setValidationError(intl.formatMessage(messages['wizard.validate.error']));
       showErrorToast(error, validateUsersAndProceed);
     }
   };
@@ -107,15 +113,14 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
     handleClose();
   };
 
-  const isError = invalidUsers.length > 0 || !!validationError;
-
   useEffect(() => {
-    if (isError && usersInputRef.current) {
+    if (invalidUsers.length && usersInputRef.current) {
       usersInputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
-  }, [isError]);
+  }, [invalidUsers]);
 
-  const canProceed = !!users.trim() && !!selectedRole;
+  const parsedUsers = parseUsers(users);
+  const canProceed = parsedUsers.length > 0 && !!selectedRole;
   const canSave = selectedScopes.size > 0;
 
   return (
@@ -126,6 +131,9 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
         <Stepper.Step
           eventKey={STEPS.SELECT_USERS_AND_ROLE}
           title={intl.formatMessage(messages['wizard.step.selectUsersAndRole.title'])}
+          hasError={invalidUsers.length > 0}
+          description={invalidUsers.length > 0 ? intl.formatMessage(messages['wizard.step.selectUsersAndRole.error']) : ''}
+          index={0}
         >
           <SelectUsersAndRoleStep
             users={users}
@@ -141,6 +149,7 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
         <Stepper.Step
           eventKey={STEPS.DEFINE_APPLICATION_SCOPE}
           title={intl.formatMessage(messages['wizard.step.defineScope.title'])}
+          index={1}
         >
           <DefineApplicationScopeStep
             selectedRole={selectedRole}
@@ -162,7 +171,7 @@ const AssignRoleWizard = ({ onClose, initialUsers = '', roles = allRolesMetadata
               pending: intl.formatMessage(messages['wizard.button.next.pending']),
             }}
             icons={{ pending: <Icon src={SpinnerSimple} /> }}
-            variant={isError ? 'danger' : 'primary'}
+            variant={invalidUsers.length ? 'danger' : 'primary'}
             state={validateUsersMutation.isPending ? 'pending' : 'default'}
             onClick={validateUsersAndProceed}
             disabled={!canProceed || validateUsersMutation.isPending}

…authz-module/wizard/AssignRoleWizard.tsx …-assignation-wizard/AssignRoleWizard.tsxsrc/authz-module/wizard/AssignRoleWizard.tsx renamed to src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx src/authz-module/wizard/AssignRoleWizard.tsx renamed to src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx

@@ -11,7 +11,7 @@ const AssignRoleWizardPage = () => {
   const [searchParams] = useSearchParams();
   const initialUsers = searchParams.get('users') || '';
   const raw = searchParams.get('from') ?? '';
-  const returnTo = raw.startsWith('/') ? raw : ROUTES.HOME_PATH;
+  const returnTo = (raw.startsWith('/') && !raw.startsWith('//')) ? raw : ROUTES.HOME_PATH;
 
   return (
     <AuthZLayout