feat: implement "schedule and details" permissions (#2991)

* feat: implement schedule and details permissions
* feat: set default value for isEditable prop in multiple components
* refactor: streamline permission handling in ScheduleAndDetails component and tests
* fix: ensure isAuthzEnabled is consistently set in permissions mock
* feat: add authorization checks for viewing schedule and grading settings in menu items

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 = false,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
   const { courseId } = useCourseAuthoringContext();
@@ -64,6 +65,7 @@ export const WysiwygEditor = ({
       images={{}}
       enableImageUpload={false}
       onEditorChange={() => ({})}
+      disabled={disabled}
     />
   );
 };

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

@@ -27,6 +27,7 @@ const CourseUploadImage = ({
   identifierFieldText,
   showImageBodyText,
   customInputPlaceholder,
+  disabled = false,
   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 />
@@ -131,6 +135,7 @@ const CourseUploadImage = ({
               || intl.formatMessage(messages.uploadImageInputPlaceholder, {
                 identifierFieldText,
               })}
+            disabled={disabled}
           />
         </Card.Footer>
       </Card>

src/header/hooks.test.tsx

@@ -175,6 +175,58 @@ describe('header utils', () => {
       });
     });
 
+    it('when authz flag is enabled and user has canViewScheduleAndDetails should include schedule and details option', async () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+      jest.mocked(useUserPermissions).mockReturnValue({
+        isLoading: false,
+        data: { canViewScheduleAndDetails: true },
+      } as any);
+      const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
+      await waitFor(() => {
+        const actualItemsTitle = result.current.map((item) => item.title);
+        expect(actualItemsTitle).toContain('Schedule & Details');
+      });
+    });
+
+    it('when authz flag is enabled and user lacks canViewScheduleAndDetails should not include schedule and details option', async () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+      jest.mocked(useUserPermissions).mockReturnValue({
+        isLoading: false,
+        data: { canViewScheduleAndDetails: false },
+      } as any);
+      const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
+      await waitFor(() => {
+        const actualItemsTitle = result.current.map((item) => item.title);
+        expect(actualItemsTitle).not.toContain('Schedule & Details');
+      });
+    });
+
+    it('when authz flag is enabled and user has canViewGradingSettings should include grading option', async () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+      jest.mocked(useUserPermissions).mockReturnValue({
+        isLoading: false,
+        data: { canViewGradingSettings: true },
+      } as any);
+      const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
+      await waitFor(() => {
+        const actualItemsTitle = result.current.map((item) => item.title);
+        expect(actualItemsTitle).toContain('Grading');
+      });
+    });
+
+    it('when authz flag is enabled and user lacks canViewGradingSettings should not include grading option', async () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+      jest.mocked(useUserPermissions).mockReturnValue({
+        isLoading: false,
+        data: { canViewGradingSettings: false },
+      } as any);
+      const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
+      await waitFor(() => {
+        const actualItemsTitle = result.current.map((item) => item.title);
+        expect(actualItemsTitle).not.toContain('Grading');
+      });
+    });
+
     it('should include roles and permissions option', () => {
       setConfig({
         ...getConfig(),

src/header/hooks.tsx

@@ -73,6 +73,14 @@ export const useSettingMenuItems = (courseId: string) => {
       action: COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS,
       scope: courseId,
     },
+    canViewScheduleAndDetails: {
+      action: COURSE_PERMISSIONS.VIEW_SCHEDULE_AND_DETAILS,
+      scope: courseId,
+    },
+    canViewGradingSettings: {
+      action: COURSE_PERMISSIONS.VIEW_GRADING_SETTINGS,
+      scope: courseId,
+    },
   }, isAuthzEnabled);
 
   const authzCanManageAdvancedSettings = isLoadingUserPermissions
@@ -83,15 +91,27 @@ export const useSettingMenuItems = (courseId: string) => {
     ? authzCanManageAdvancedSettings
     : legacyCanAccessAdvancedSettings;
 
+  const canViewScheduleAndDetails = isAuthzEnabled
+    ? (!isLoadingUserPermissions && (userPermissions?.canViewScheduleAndDetails || false))
+    : true;
+
+  const canViewGradingSettings = isAuthzEnabled
+    ? (!isLoadingUserPermissions && (userPermissions?.canViewGradingSettings || false))
+    : true;
+
   const items = [
-    {
-      href: `/course/${courseId}/settings/details`,
-      title: intl.formatMessage(messages['header.links.scheduleAndDetails']),
-    },
-    {
-      href: `/course/${courseId}/settings/grading`,
-      title: intl.formatMessage(messages['header.links.grading']),
-    },
+    ...(canViewScheduleAndDetails
+      ? [{
+        href: `/course/${courseId}/settings/details`,
+        title: intl.formatMessage(messages['header.links.scheduleAndDetails']),
+      }]
+      : []),
+    ...(canViewGradingSettings
+      ? [{
+        href: `/course/${courseId}/settings/grading`,
+        title: intl.formatMessage(messages['header.links.grading']),
+      }]
+      : []),
     ...(isAuthzEnabled
       ? [{
         href: `${getConfig().ADMIN_CONSOLE_URL}/authz?scope=${encodeURIComponent(courseId)}`,

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 { useCourseUserPermissions } from '@src/authz/hooks';
 
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { courseDetailsMock, courseSettingsMock } from './__mocks__';
@@ -22,6 +24,26 @@ import scheduleMessages from './schedule-section/messages';
 import messages from './messages';
 import ScheduleAndDetails from '.';
 
+jest.mock('@src/authz/hooks', () => ({
+  useCourseUserPermissions: jest.fn().mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    canViewScheduleAndDetails: true,
+    canEditSchedule: true,
+    canEditDetails: true,
+  }),
+}));
+
+const mockPermissions = (overrides = {}) =>
+  jest.mocked(useCourseUserPermissions).mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: true,
+    canViewScheduleAndDetails: true,
+    canEditSchedule: true,
+    canEditDetails: true,
+    ...overrides,
+  });
+
 let axiosMock;
 let store;
 const courseId = '123';
@@ -169,3 +191,73 @@ 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);
+    mockPermissions();
+  });
+
+  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 });
+    mockPermissions({ 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 });
+    mockPermissions({ canEditSchedule: false });
+    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 });
+    mockPermissions({ 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 });
+    mockPermissions({ 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 = true,
 }) => {
   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>