Task - implement schedule and details granular permissions

[MaferMazu]

[bra-i-am]

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

[dcoa]

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.