feat: refactor Assign Role Wizard and related components for improved clarity and structure

Author: bra-i-am

src/authz-module/roles-permissions/libraries/constants.ts

@@ -26,10 +26,18 @@ export const CONTENT_LIBRARY_PERMISSIONS = {
 // Note: this information will eventually come from the backend API
 // but for the MVP we decided to manage it in the frontend
 export const libraryRolesMetadata: RoleMetadata[] = [
-  { 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_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_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_user', name: 'Library User', description: 'The Library User can view and reuse content but cannot edit or delete any resource.', contextType: 'library' },
+  {
+    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_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_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_user', name: 'Library User', description: 'The Library User can view and reuse content but cannot edit or delete any resource.', contextType: 'library',
+  },
 ];
 
 export const libraryResourceTypes: ResourceMetadata[] = [

src/authz-module/wizard/AssignRoleWizard.tsx

@@ -1,5 +1,5 @@
 import {
-  useState, useCallback, useMemo, useRef, useEffect,
+  useState, useCallback, useRef, useEffect,
 } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -9,18 +9,12 @@ import { SpinnerSimple } from '@openedx/paragon/icons';
 import SelectUsersAndRoleStep from './SelectUsersAndRoleStep';
 import DefineApplicationScopeStep from './DefineApplicationScopeStep';
 import { useValidateUsers } from '../data/hooks';
-import { CONTENT_LIBRARY_PERMISSIONS, libraryRolesMetadata } from '../roles-permissions/libraries/constants';
-import { COURSE_PERMISSIONS, courseRolesMetadata } from '../constants';
-import { useValidateUserPermissions } from '../../data/hooks';
+import { libraryRolesMetadata } from '../roles-permissions/libraries/constants';
+import { courseRolesMetadata } from '../constants';
 import messages from './messages';
 
 const allRolesMetadata = [...courseRolesMetadata, ...libraryRolesMetadata];
 
-const CONTEXT_BY_ACTION: Record<string, string> = {
-  [CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM]: 'library',
-  [COURSE_PERMISSIONS.MANAGE_COURSE_TEAM]: 'course',
-};
-
 const STEPS = {
   SELECT_USERS_AND_ROLE: 'select-users-and-role',
   DEFINE_APPLICATION_SCOPE: 'define-application-scope',
@@ -30,11 +24,10 @@ type StepKey = typeof STEPS[keyof typeof STEPS];
 
 interface AssignRoleWizardProps {
   onClose: () => void;
-  scope: string;
   initialUsers?: string;
 }
 
-const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizardProps) => {
+const AssignRoleWizard = ({ onClose, initialUsers = '' }: AssignRoleWizardProps) => {
   const intl = useIntl();
   const [activeStep, setActiveStep] = useState<StepKey>(STEPS.SELECT_USERS_AND_ROLE);
   const [users, setUsers] = useState(initialUsers);
@@ -49,29 +42,11 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
 
   const validateUsersMutation = useValidateUsers();
 
-  // Filter role groups based on what the current user is allowed to manage
-  const permissionChecks = useMemo(() => [
-    { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, scope },
-    { action: COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, scope },
-  ], [scope]);
-
-  const { data: permissionsData } = useValidateUserPermissions(permissionChecks);
-
   const handleUsersChange = useCallback((value: string) => {
     setInvalidUsers((prev) => (prev.length > 0 ? [] : prev));
     setUsers(value);
   }, []);
 
-  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('');
@@ -149,7 +124,7 @@ const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizar
             setUsers={handleUsersChange}
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
-            roles={filteredRoles}
+            roles={allRolesMetadata}
             validationError={validationError}
             invalidUsers={invalidUsers}
             inputRef={usersInputRef}

src/authz-module/wizard/AssignRoleWizardPage.tsx

@@ -10,24 +10,21 @@ const AssignRoleWizardPage = () => {
   const intl = useIntl();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const scope = searchParams.get('scope')!;
   const initialUsers = searchParams.get('users') || '';
-  const { data: library } = useLibrary(scope);
 
-  const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', scope)}`;
+  const homePath = '/authz';
 
   return (
     <AuthZLayout
-      context={{ id: scope, title: library.title, org: library.org }}
-      navLinks={[{ label: intl.formatMessage(messages['wizard.page.breadcrumb']), to: teamMembersPath }]}
+      context={{ id: '', title: '', org: '' }}
+      navLinks={[{ label: intl.formatMessage(messages['wizard.page.breadcrumb']), to: homePath }]}
       activeLabel={intl.formatMessage(messages['wizard.page.title'])}
       pageTitle={intl.formatMessage(messages['wizard.page.title'])}
       pageSubtitle=""
       actions={[]}
     >
       <AssignRoleWizard
-        onClose={() => navigate(teamMembersPath)}
-        scope={scope}
+        onClose={() => navigate(homePath)}
         initialUsers={initialUsers}
       />
     </AuthZLayout>