Activity

1. MaferMazu

   added a parent issue on Jun 2, 2026

   • Frontend: Implement Granular Permissions in Authoring UI (Course Editor/Auditor) #284
2. MaferMazu

   added this to RBAC AuthZ Boardon Jun 2, 2026
3. MaferMazu

   assigned

   bra-i-am

   on Jun 2, 2026
4. bra-i-am commented on Jun 4, 2026

   

   bra-i-am

   on Jun 4, 2026

   Last edited by BryanttV

   More actions

   Refinement

   https://www.figma.com/design/onU2END2OXaF7RRLWEHsZI/AuthZ---v2?node-id=9144-5762&t=OrmroEXprX0NyD7D-4

   Permissions used:

   • courses.edit_schedule
   • courses.edit_details

   Already in src/authz/constants.ts as COURSE_PERMISSIONS.EDIT_SCHEDULE / COURSE_PERMISSIONS.EDIT_DETAILS and in src/authz/permissionHelpers.ts as getScheduleAndDetailsPermissions(courseId).

   Already fetched in schedule-and-details/index.jsx as canEditSchedule and canEditDetails; already forwarded to every subsection via isEditable. No new constants or helpers needed.

   Role matrix:

   • Course Auditor (edit schedule ❌, edit details ❌)
   • Course Editor (edit schedule ❌, edit details ✅).

   All inputs are already blocked via the existing isEditable props. The only missing element is the view-only banner shown when the user cannot edit anything on the page.

   ---

   UI location 1 — Schedule & Details page: view-only banner for Course Auditor

   Files: schedule-and-details/messages.ts → schedule-and-details/index.jsx

   schedule-and-details/messages.ts — add view-only alert message:

     viewOnlyAlert: {
       id: 'course-authoring.schedule.alert.view-only',
       defaultMessage: 'You have view-only access to this page. Contact your organization admin to request editing permissions.',
       description: 'Alert shown to users who can view but cannot edit schedule or details',
     },

   schedule-and-details/index.jsx — add Alert to paragon imports, add Lock icon, show view-only banner between the page header and the settings section:

   // paragon import — add Alert
   import {
     Alert,
     Container,
     Button,
     Layout,
     StatefulButton,
   } from '@openedx/paragon';
   
   // icons import — add Lock
   import {
     CheckCircle as CheckCircleIcon,
     ErrorOutline as ErrorOutlineIcon,
     Lock as LockIcon,
     Warning as WarningIcon,
   } from '@openedx/paragon/icons';
   
   ...
   
               <h2 className="mb-4 pb-1">
                 {intl.formatMessage(messages.headingTitle)}
               </h2>
             </header>
             {!canEditSchedule && !canEditDetails && (
               <Alert variant="info" icon={LockIcon}>
                 {intl.formatMessage(messages.viewOnlyAlert)}
               </Alert>
             )}
           </div>
           <section className="setting-items mb-4">

   ---

   UI location 2 — Schedule & Details page: read-only alert inside Course Schedule section for Course Editor

   Files: schedule-and-details/schedule-section/messages.ts → schedule-and-details/schedule-section/index.jsx → schedule-and-details/index.jsx

   schedule-and-details/schedule-section/messages.ts — add read-only alert message:

     scheduleReadOnlyAlert: {
       id: 'course-authoring.schedule.schedule-section.read-only-alert',
       defaultMessage: 'You don\'t have permission to edit the "Course Schedule". Contact your organization admin to request access.',
       description: 'Alert shown inside the Course Schedule section when the user cannot edit schedule fields',
     },

   schedule-and-details/schedule-section/index.jsx — import Alert + LockIcon, accept showReadOnlyAlert prop, render alert between SectionSubHeader and the date list:

   import { Alert } from '@openedx/paragon';
   import { Lock as LockIcon } from '@openedx/paragon/icons';
   
   const ScheduleSection = ({
     ...
     isEditable = true,
     showReadOnlyAlert = false,
     onChange,
   }) => {
     ...
     return (
       <section className="section-container schedule-section" id="schedule">
         <SectionSubHeader ... />
         {showReadOnlyAlert && (
           <Alert variant="info" icon={LockIcon}>
             {intl.formatMessage(messages.scheduleReadOnlyAlert)}
           </Alert>
         )}
         <ul className="schedule-date-list">
   
   // propTypes — add:
     showReadOnlyAlert: PropTypes.bool,

   schedule-and-details/index.jsx — pass prop; condition is !canEditSchedule && canEditDetails (Course Editor only — Course Auditor already sees the page-level banner):

                     <ScheduleSection
                       ...
                       isEditable={canEditSchedule}
                       showReadOnlyAlert={!canEditSchedule && canEditDetails}
                       onChange={handleValuesChange}
                     />

   ---

   This implementation was tested at https://github.com/eduNEXT/frontend-app-authoring/tree/bc/improve-schedule-and-details-permissions

   Course Auditor

   

   Course Editor

   
5. BryanttV

   moved this to Ready for Development in RBAC AuthZ Boardon Aug 4, 2026
6. BryanttV

   assigned

   dcoa

   and unassigned

   bra-i-am

   on Aug 4, 2026
7. dcoa

   moved this from Ready for Development to In Progress in RBAC AuthZ Boardon Aug 10, 2026
8. dcoa commented on Aug 10, 2026

   

   dcoa

   on Aug 10, 2026

   Contributor

   More actions

   Most of the implementation has been done previously. I am going to open a same PR for those that have the View Only Alert including this one.
9. dcoa

   moved this from In Progress to Ready for Review in RBAC AuthZ Boardon Aug 10, 2026
10. bradenmacdonald

    closed this as completedin frontend-app-authoring#3193on Aug 24, 2026
11. github-project-automation

    moved this from Ready for Review to Done in RBAC AuthZ Boardon Aug 24, 2026