feat: enhance Assign Role Wizard with initial user handling and permission constants

Author: bra-i-am

.eslintrc.js

@@ -1,4 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint', {
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
+  },
+});

src/authz-module/constants.ts

@@ -71,6 +71,52 @@ export const libraryPermissions = [
   { key: CONTENT_LIBRARY_PERMISSIONS.VIEW_LIBRARY_TEAM, resource: 'library_team', description: 'Add, remove, and assign roles to users within the library.' },
 ];
 
+// Course Permission Keys
+export const COURSE_PERMISSIONS = {
+  // View permissions (Course Auditor)
+  VIEW_COURSE: 'courses.view_course',
+  VIEW_COURSE_UPDATES: 'courses.view_course_updates',
+  VIEW_PAGES_AND_RESOURCES: 'courses.view_pages_and_resources',
+  VIEW_FILES: 'courses.view_files',
+  VIEW_GRADING_SETTINGS: 'courses.view_grading_settings',
+  VIEW_CHECKLISTS: 'courses.view_checklists',
+  VIEW_COURSE_TEAM: 'courses.view_course_team',
+  VIEW_SCHEDULE_AND_DETAILS: 'courses.view_schedule_and_details',
+
+  // Edit permissions (Course Editor)
+  EDIT_COURSE_CONTENT: 'courses.edit_course_content',
+  MANAGE_LIBRARY_UPDATES: 'courses.manage_library_updates',
+  MANAGE_COURSE_UPDATES: 'courses.manage_course_updates',
+  MANAGE_PAGES_AND_RESOURCES: 'courses.manage_pages_and_resources',
+  CREATE_FILES: 'courses.create_files',
+  EDIT_FILES: 'courses.edit_files',
+  EDIT_GRADING_SETTINGS: 'courses.edit_grading_settings',
+  MANAGE_GROUP_CONFIGURATIONS: 'courses.manage_group_configurations',
+  EDIT_DETAILS: 'courses.edit_details',
+  MANAGE_TAGS: 'courses.manage_tags',
+
+  // Publish & lifecycle permissions (Course Staff)
+  PUBLISH_COURSE_CONTENT: 'courses.publish_course_content',
+  DELETE_FILES: 'courses.delete_files',
+  EDIT_SCHEDULE: 'courses.edit_schedule',
+  MANAGE_ADVANCED_SETTINGS: 'courses.manage_advanced_settings',
+  MANAGE_CERTIFICATES: 'courses.manage_certificates',
+  IMPORT_COURSE: 'courses.import_course',
+  EXPORT_COURSE: 'courses.export_course',
+  EXPORT_TAGS: 'courses.export_tags',
+
+  // Team & taxonomy permissions (Course Admin only)
+  MANAGE_COURSE_TEAM: 'courses.manage_course_team',
+  MANAGE_TAXONOMIES: 'courses.manage_taxonomies',
+
+  // Legacy role permissions
+  LEGACY_STAFF_ROLE_PERMISSIONS: 'courses.legacy_staff_role_permissions',
+  LEGACY_INSTRUCTOR_ROLE_PERMISSIONS: 'courses.legacy_instructor_role_permissions',
+  LEGACY_LIMITED_STAFF_ROLE_PERMISSIONS: 'courses.legacy_limited_staff_role_permissions',
+  LEGACY_DATA_RESEARCHER_PERMISSIONS: 'courses.legacy_data_researcher_permissions',
+  LEGACY_BETA_TESTER_PERMISSIONS: 'courses.legacy_beta_tester_permissions',
+};
+
 // Resource Type Definitions
 export const RESOURCE_TYPES = {
   LIBRARY: 'library',
@@ -94,16 +140,13 @@ export const courseRolesMetadata = [
   },
 ];
 
-// Course roles placeholder for future implementation
-export const COURSE_ROLES_METADATA = courseRolesMetadata;
-
 // Get roles metadata by resource type
 export const getRolesMetadata = (resourceType: ResourceType) => {
   switch (resourceType) {
     case RESOURCE_TYPES.LIBRARY:
       return libraryRolesMetadata;
     case RESOURCE_TYPES.COURSE:
-      return COURSE_ROLES_METADATA;
+      return courseRolesMetadata;
     default:
       return [];
   }

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

@@ -64,7 +64,7 @@ const LibrariesTeamManager = () => {
                 onClick={handleNavigateToWizard}
                 key="add-new-role"
               >
-                {intl.formatMessage(messages['library.authz.manage.add.role.button']) || 'New Role'}
+                {intl.formatMessage(messages['library.authz.manage.add.role.button'])}
               </Button>,
             ]
             : []

src/authz-module/wizard/AssignRoleWizard.tsx

@@ -8,15 +8,17 @@ import { SpinnerSimple } from '@openedx/paragon/icons';
 import SelectUsersAndRoleStep from './SelectUsersAndRoleStep';
 import DefineApplicationScopeStep from './DefineApplicationScopeStep';
 import { useValidateUsers, useAssignTeamMembersRole } from '../data/hooks';
-import { courseRolesMetadata, libraryRolesMetadata } from '../constants';
+import {
+  CONTENT_LIBRARY_PERMISSIONS, COURSE_PERMISSIONS, 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',
+  [CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM]: 'library',
+  [COURSE_PERMISSIONS.MANAGE_COURSE_TEAM]: 'course',
 };
 
 const STEPS = {
@@ -29,11 +31,12 @@ type StepKey = typeof STEPS[keyof typeof STEPS];
 interface AssignRoleWizardProps {
   onClose: () => void;
   scope: string;
+  initialUsers?: string;
 }
 
-const AssignRoleWizard = ({ onClose, scope }: AssignRoleWizardProps) => {
+const AssignRoleWizard = ({ onClose, scope, initialUsers = '' }: AssignRoleWizardProps) => {
   const [activeStep, setActiveStep] = useState<StepKey>(STEPS.SELECT_USERS_AND_ROLE);
-  const [users, setUsers] = useState('');
+  const [users, setUsers] = useState(initialUsers);
   const [selectedRole, setSelectedRole] = useState<string | null>(null);
   const [selectedScopes, setSelectedScopes] = useState<Set<string>>(new Set());
 
@@ -46,8 +49,8 @@ const AssignRoleWizard = ({ onClose, scope }: AssignRoleWizardProps) => {
 
   // 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 },
+    { action: CONTENT_LIBRARY_PERMISSIONS.MANAGE_LIBRARY_TEAM, scope },
+    { action: COURSE_PERMISSIONS.MANAGE_COURSE_TEAM, scope },
   ], [scope]);
 
   const { data: permissionsData } = useValidateUserPermissions(permissionChecks);

src/authz-module/wizard/AssignRoleWizardPage.tsx

@@ -1,5 +1,4 @@
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Button } from '@openedx/paragon';
 import AssignRoleWizard from './AssignRoleWizard';
 import AuthZLayout from '../components/AuthZLayout';
 import { useLibrary } from '../data/hooks';
@@ -9,23 +8,11 @@ const AssignRoleWizardPage = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const scope = searchParams.get('scope') || '';
+  const initialUsers = searchParams.get('users') || '';
 
-  const { data: library, isLoading, error } = useLibrary(scope);
+  const { data: library, isLoading } = useLibrary(scope);
 
-  if (isLoading) {
-    return null;
-  }
-
-  if (error || !library) {
-    return (
-      <div className="assign-role-wizard-page p-4">
-        <p>Library not found. Please go back and try again.</p>
-        <Button variant="secondary" onClick={() => navigate(-1)}>
-          Go Back
-        </Button>
-      </div>
-    );
-  }
+  if (isLoading) { return null; }
 
   const teamMembersPath = `/authz${ROUTES.LIBRARIES_TEAM_PATH.replace(':libraryId', scope)}`;
 
@@ -45,6 +32,7 @@ const AssignRoleWizardPage = () => {
       <AssignRoleWizard
         onClose={handleCancel}
         scope={scope}
+        initialUsers={initialUsers}
       />
     </AuthZLayout>
   );

src/authz-module/wizard/DefineApplicationScopeStep.tsx

@@ -1,38 +1,17 @@
 interface DefineApplicationScopeStepProps {
-  users: string;
   selectedRole: string | null;
-  onBack?: () => void;
+  selectedScopes: Set<string>;
+  onScopeToggle: (scopeId: string) => void;
 }
 
-const DefineApplicationScopeStep = ({ users, selectedRole }: DefineApplicationScopeStepProps) => {
+const DefineApplicationScopeStep = (
+  { selectedRole, selectedScopes, onScopeToggle }: DefineApplicationScopeStepProps,
+) => {
   // Placeholder for Step 2 - "Define Application Scope"
   // This will be implemented in future iterations
+  console.log(selectedRole, selectedScopes, onScopeToggle);
 
-  const usersList = users.split(',').map(u => u.trim()).filter(Boolean);
-
-  return (
-    <div className="assign-role-step-2">
-      <h4>Review and Confirm</h4>
-
-      <div className="mb-4">
-        <h5>Selected Role</h5>
-        <p>{selectedRole || 'No role selected'}</p>
-      </div>
-
-      <div className="mb-4">
-        <h5>Users ({usersList.length})</h5>
-        <ul>
-          {usersList.map((user, index) => (
-            <li key={index}>{user}</li>
-          ))}
-        </ul>
-      </div>
-
-      <p className="text-muted">
-        Step 2 content - "Define Application Scope" will be implemented in future iterations.
-      </p>
-    </div>
-  );
+  return <h1>Step 2</h1>;
 };
 
 export default DefineApplicationScopeStep;