feat: implement schedule and details permissions

Author: bra-i-am

src/authz/constants.ts

@@ -20,4 +20,8 @@ export const COURSE_PERMISSIONS = {
 
   VIEW_GRADING_SETTINGS: 'courses.view_grading_settings',
   EDIT_GRADING_SETTINGS: 'courses.edit_grading_settings',
+
+  VIEW_SCHEDULE_AND_DETAILS: 'courses.view_schedule_and_details',
+  EDIT_SCHEDULE: 'courses.edit_schedule',
+  EDIT_DETAILS: 'courses.edit_details',
 };

src/authz/permissionHelpers.ts

@@ -1,5 +1,20 @@
 import { COURSE_PERMISSIONS } from './constants';
 
+export const getScheduleAndDetailsPermissions = (courseId: string) => ({
+  canViewScheduleAndDetails: {
+    action: COURSE_PERMISSIONS.VIEW_SCHEDULE_AND_DETAILS,
+    scope: courseId,
+  },
+  canEditSchedule: {
+    action: COURSE_PERMISSIONS.EDIT_SCHEDULE,
+    scope: courseId,
+  },
+  canEditDetails: {
+    action: COURSE_PERMISSIONS.EDIT_DETAILS,
+    scope: courseId,
+  },
+});
+
 export const getGradingPermissions = (courseId: string) => ({
   canViewGradingSettings: {
     action: COURSE_PERMISSIONS.VIEW_GRADING_SETTINGS,

src/generic/WysiwygEditor.jsx

@@ -14,6 +14,7 @@ export const WysiwygEditor = ({
   editorType,
   onChange,
   minHeight,
+  disabled,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
   const { courseId } = useCourseAuthoringContext();
@@ -64,6 +65,7 @@ export const WysiwygEditor = ({
       images={{}}
       enableImageUpload={false}
       onEditorChange={() => ({})}
+      disabled={disabled}
     />
   );
 };
@@ -72,11 +74,13 @@ WysiwygEditor.defaultProps = {
   initialValue: '',
   editorType: SUPPORTED_TEXT_EDITORS.text,
   minHeight: 200,
+  disabled: false,
 };
 
 WysiwygEditor.propTypes = {
   initialValue: PropTypes.string,
   editorType: PropTypes.oneOf(Object.values(SUPPORTED_TEXT_EDITORS)),
   onChange: PropTypes.func.isRequired,
   minHeight: PropTypes.number,
+  disabled: PropTypes.bool,
 };

src/generic/course-upload-image/index.jsx

@@ -27,6 +27,7 @@ const CourseUploadImage = ({
   identifierFieldText,
   showImageBodyText,
   customInputPlaceholder,
+  disabled,
   onChange,
 }) => {
   const { courseId } = useParams();
@@ -113,13 +114,16 @@ const CourseUploadImage = ({
       <Form.Label>{label}</Form.Label>
       <Card>
         <Card.Body className="image-body">
-          <Dropzone
-            onProcessUpload={handleProcessUpload}
-            inputComponent={inputComponent}
-            accept={{
-              'image/*': ['.png', '.jpeg'],
-            }}
-          />
+          <div style={disabled ? { pointerEvents: 'none' } : undefined}>
+            <Dropzone
+              onProcessUpload={handleProcessUpload}
+              inputComponent={inputComponent}
+              accept={{
+                'image/*': ['.png', '.jpeg'],
+              }}
+              disabled={disabled}
+            />
+          </div>
           {showImageBodyText && cardImageTextBody}
         </Card.Body>
         <Card.Divider />
@@ -130,7 +134,9 @@ const CourseUploadImage = ({
             placeholder={customInputPlaceholder
               || intl.formatMessage(messages.uploadImageInputPlaceholder, {
                 identifierFieldText,
-              })}
+              })
+            }
+            disabled={disabled}
           />
         </Card.Footer>
       </Card>
@@ -152,6 +158,7 @@ CourseUploadImage.defaultProps = {
   showImageBodyText: false,
   identifierFieldText: '',
   customInputPlaceholder: '',
+  disabled: false,
 };
 
 CourseUploadImage.propTypes = {
@@ -163,6 +170,7 @@ CourseUploadImage.propTypes = {
   showImageBodyText: PropTypes.bool,
   identifierFieldText: PropTypes.string,
   customInputPlaceholder: PropTypes.string,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 

src/schedule-and-details/ScheduleAndDetails.test.jsx

@@ -10,6 +10,8 @@ import { executeThunk } from '@src/utils';
 import genericMessages from '@src/generic/help-sidebar/messages';
 import { DATE_FORMAT } from '@src/constants';
 import { getCourseSettingsApiUrl } from '@src/data/api';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useUserPermissionsWithAuthzCourse } from '@src/authz/hooks';
 
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { courseDetailsMock, courseSettingsMock } from './__mocks__';
@@ -22,6 +24,18 @@ import scheduleMessages from './schedule-section/messages';
 import messages from './messages';
 import ScheduleAndDetails from '.';
 
+jest.mock('@src/authz/hooks', () => ({
+  useUserPermissionsWithAuthzCourse: jest.fn().mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    permissions: {
+      canViewScheduleAndDetails: true,
+      canEditSchedule: true,
+      canEditDetails: true,
+    },
+  }),
+}));
+
 let axiosMock;
 let store;
 const courseId = '123';
@@ -169,3 +183,97 @@ describe('<ScheduleAndDetails />', () => {
     expect(getByText(messages.alertFail.defaultMessage)).toBeInTheDocument();
   });
 });
+
+describe('<ScheduleAndDetails /> permissions', () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    store = mocks.reduxStore;
+    axiosMock.onGet(getCourseDetailsApiUrl(courseId)).reply(200, courseDetailsMock);
+    axiosMock.onGet(getCourseSettingsApiUrl(courseId)).reply(200, courseSettingsMock);
+    axiosMock.onPut(getCourseDetailsApiUrl(courseId)).reply(200);
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      permissions: {
+        canViewScheduleAndDetails: true,
+        canEditSchedule: true,
+        canEditDetails: true,
+      },
+    });
+  });
+
+  it('renders normally when authz flag is disabled (no regression)', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    const { getAllByText } = renderComponent();
+    await waitFor(() => {
+      expect(getAllByText(messages.headingTitle.defaultMessage).length).toBeGreaterThan(0);
+    });
+  });
+
+  it('renders normally when user has all permissions', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    const { getAllByText } = renderComponent();
+    await waitFor(() => {
+      expect(getAllByText(messages.headingTitle.defaultMessage).length).toBeGreaterThan(0);
+    });
+  });
+
+  it('shows PermissionDeniedAlert when user lacks view permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      permissions: { canViewScheduleAndDetails: false, canEditSchedule: false, canEditDetails: false },
+    });
+    const { getByTestId } = renderComponent();
+    await waitFor(() => {
+      expect(getByTestId('permissionDeniedAlert')).toBeInTheDocument();
+    });
+  });
+
+  it('disables schedule date inputs when user lacks edit_schedule permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      permissions: { canViewScheduleAndDetails: true, canEditSchedule: false, canEditDetails: true },
+    });
+    const { getAllByPlaceholderText } = renderComponent();
+    await waitFor(() => {
+      const dateInputs = getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
+      dateInputs.forEach((input) => expect(input).toBeDisabled());
+    });
+  });
+
+  it('disables pacing and details inputs when user lacks edit_details permission', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      permissions: { canViewScheduleAndDetails: true, canEditSchedule: true, canEditDetails: false },
+    });
+    const { getAllByRole } = renderComponent();
+    await waitFor(() => {
+      const radios = getAllByRole('radio');
+      radios.forEach((radio) => expect(radio).toBeDisabled());
+    });
+  });
+
+  it('save button cannot be triggered when user has no edit permissions', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    jest.mocked(useUserPermissionsWithAuthzCourse).mockReturnValue({
+      isLoading: false,
+      isAuthzEnabled: true,
+      permissions: { canViewScheduleAndDetails: true, canEditSchedule: false, canEditDetails: false },
+    });
+    const { getAllByPlaceholderText, queryByText } = renderComponent();
+    // Wait for page to load
+    const dateInputs = await waitFor(() => getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase()));
+    // All date inputs must be disabled (no edit_schedule permission)
+    dateInputs.forEach((input) => expect(input).toBeDisabled());
+    // No changes can be made so the save button never appears
+    expect(queryByText(messages.buttonSaveText.defaultMessage)).not.toBeInTheDocument();
+  });
+});

src/schedule-and-details/details-section/DetailsSection.test.jsx

@@ -57,4 +57,26 @@ describe('<DetailsSection />', () => {
       getByRole('button', { name: messages.dropdownEmpty.defaultMessage }),
     ).toBeInTheDocument();
   });
+
+  it('disables the language dropdown toggle when isEditable is false', () => {
+    const { getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    const toggle = getByRole('button', { name: courseSettingsMock.languageOptions[1][1] });
+    expect(toggle).toBeDisabled();
+  });
+
+  it('does not call onChange when dropdown item clicked while isEditable is false', () => {
+    onChangeMock.mockClear();
+    const { getByRole } = render(<RootWrapper {...props} isEditable={false} />);
+    // Toggle is disabled, so clicking it does not open the dropdown
+    const toggle = getByRole('button', { name: courseSettingsMock.languageOptions[1][1] });
+    expect(toggle).toBeDisabled();
+    fireEvent.click(toggle);
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+
+  it('enables the language dropdown when isEditable is true', () => {
+    const { getByRole } = render(<RootWrapper {...props} isEditable />);
+    const toggle = getByRole('button', { name: courseSettingsMock.languageOptions[1][1] });
+    expect(toggle).not.toBeDisabled();
+  });
 });

src/schedule-and-details/details-section/index.jsx

@@ -10,6 +10,7 @@ const DetailsSection = ({
   language,
   languageOptions,
   onChange,
+  isEditable,
 }) => {
   const intl = useIntl();
   const formattedLanguage = () => {
@@ -26,14 +27,14 @@ const DetailsSection = ({
       <Form.Group className="form-group-custom dropdown-language">
         <Form.Label>{intl.formatMessage(messages.dropdownLabel)}</Form.Label>
         <Dropdown className="bg-white">
-          <Dropdown.Toggle variant="outline-primary" id="languageDropdown">
+          <Dropdown.Toggle variant="outline-primary" id="languageDropdown" disabled={!isEditable}>
             {formattedLanguage()}
           </Dropdown.Toggle>
           <Dropdown.Menu>
             {languageOptions.map((option) => (
               <Dropdown.Item
                 key={option[0]}
-                onClick={() => onChange(option[0], 'language')}
+                onClick={isEditable ? () => onChange(option[0], 'language') : undefined}
               >
                 {option[1]}
               </Dropdown.Item>
@@ -50,13 +51,15 @@ const DetailsSection = ({
 
 DetailsSection.defaultProps = {
   language: '',
+  isEditable: true,
 };
 
 DetailsSection.propTypes = {
   language: PropTypes.string,
   languageOptions: PropTypes.arrayOf(
     PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   ).isRequired,
+  isEditable: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };