feat(pages-and-resources): add read-only access for course_auditor role

- Add VIEW_ADVANCED_SETTINGS and PAGE_AND_RESOURCES permissions
- Add getPagesAndResourcesPermissions helper
- Calculate isEditable and isReadOnly from user permissions
- Propagate isEditable via PagesAndResourcesContext
- Add disabled={!isEditable} to all forms, toggles, and buttons
- Update AppCard and AppListNextButton with isEditable logic
- Change default isEditable to false (fail closed)
- Add unified permission gate showing PermissionDeniedAlert

Author: bra-i-am

plugins/course-apps/progress/Settings.jsx

@@ -1,17 +1,19 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useContext } from 'react';
 import * as Yup from 'yup';
 import { getConfig } from '@edx/frontend-platform';
 import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
 import { useAppSetting } from 'CourseAuthoring/utils';
 import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
 import messages from './messages';
 
 const ProgressSettings = ({ onClose }) => {
   const intl = useIntl();
   const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
   const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';
+  const { isEditable = false } = useContext(PagesAndResourcesContext);
 
   const handleSettingsSave = async (values) => {
     if (showProgressGraphSetting) { await saveSetting(!values.enableProgressGraph); }
@@ -39,6 +41,7 @@ const ProgressSettings = ({ onClose }) => {
             onChange={handleChange}
             onBlur={handleBlur}
             checked={values.enableProgressGraph}
+            disabled={!isEditable}
           />
         )
       )}

src/CourseAuthoringPage.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import {
   useLocation,
 } from 'react-router-dom';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import Header from './header';
 import NotFoundAlert from './generic/NotFoundAlert';
-import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
 import { fetchOnlyStudioHomeData } from './studio-home/data/thunks';
-import { getCourseAppsApiStatus } from './pages-and-resources/data/selectors';
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
 import { useCourseAuthoringContext } from './CourseAuthoringContext';
@@ -30,16 +28,12 @@ const CourseAuthoringPage = ({ children }: Props) => {
   const courseOrg = courseDetails?.org;
   const courseTitle = courseDetails?.name;
   const inProgress = courseDetailStatus === RequestStatus.IN_PROGRESS || courseDetailStatus === RequestStatus.PENDING;
-  const courseAppsApiStatus = useSelector(getCourseAppsApiStatus);
   const { pathname } = useLocation();
   const isEditor = pathname.includes('/editor');
 
   if (courseDetailStatus === RequestStatus.NOT_FOUND && !isEditor) {
     return <NotFoundAlert />;
   }
-  if (courseAppsApiStatus === RequestStatus.DENIED) {
-    return <PermissionDeniedAlert />;
-  }
   return (
     <div>
       {

src/advanced-settings/AdvancedSettings.tsx

@@ -51,6 +51,10 @@ const AdvancedSettings = () => {
       action: COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS,
       scope: courseId,
     },
+    canViewAdvancedSettings: {
+      action: COURSE_PERMISSIONS.VIEW_ADVANCED_SETTINGS,
+      scope: courseId,
+    },
   }, isAuthzEnabled);
 
   const {
@@ -148,15 +152,29 @@ const AdvancedSettings = () => {
     showSaveSettingsPrompt(true);
   };
 
-  // Show permission denied alert when authz is enabled and user doesn't have permission
+  // Show permission denied alert when authz is enabled and user doesn't have VIEW or MANAGE
   const authzIsEnabledAndNoPermission = isAuthzEnabled
     && !isLoadingUserPermissions
+    && !userPermissions?.canViewAdvancedSettings
     && !userPermissions?.canManageAdvancedSettings;
 
   if (authzIsEnabledAndNoPermission) {
     return <PermissionDeniedAlert />;
   }
 
+  // Determine if UI should be disabled (has VIEW but not MANAGE) - auditor sees read-only view
+  const isReadOnly = isAuthzEnabled
+    && !isLoadingUserPermissions
+    && userPermissions?.canViewAdvancedSettings
+    && !userPermissions?.canManageAdvancedSettings;
+
+  // Apply read-only mode for auditors
+  if (isReadOnly) {
+    setIsEditableState(false);
+  }
+
+  // Show the page content (read-only or editable)
+
   return (
     <>
       <Helmet>
@@ -255,6 +273,7 @@ const AdvancedSettings = () => {
                             handleBlur={handleSettingBlur}
                             isEditableState={isEditableState}
                             setIsEditableState={setIsEditableState}
+                            readOnly={isReadOnly}
                           />
                         );
                       })}

src/advanced-settings/setting-card/SettingCard.tsx

@@ -25,6 +25,7 @@ const SettingCard = ({
   saveSettingsPrompt,
   isEditableState,
   setIsEditableState,
+  readOnly = false,
 }) => {
   const intl = useIntl();
   const { deprecated, help, displayName } = settingData;
@@ -99,6 +100,7 @@ const SettingCard = ({
                 onChange={handleSettingChange}
                 aria-label={displayName}
                 onBlur={handleCardBlur}
+                disabled={readOnly}
               />
             </Form.Group>
           </Card.Section>
@@ -133,6 +135,11 @@ SettingCard.propTypes = {
   saveSettingsPrompt: PropTypes.bool.isRequired,
   isEditableState: PropTypes.bool.isRequired,
   setIsEditableState: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+};
+
+SettingCard.defaultProps = {
+  readOnly: false,
 };
 
 export default SettingCard;

src/authz/constants.ts

@@ -17,7 +17,11 @@ export const CONTENT_LIBRARY_PERMISSIONS = {
 
 export const COURSE_PERMISSIONS = {
   MANAGE_ADVANCED_SETTINGS: 'courses.manage_advanced_settings',
+  VIEW_ADVANCED_SETTINGS: 'courses.view_advanced_settings',
 
   VIEW_GRADING_SETTINGS: 'courses.view_grading_settings',
   EDIT_GRADING_SETTINGS: 'courses.edit_grading_settings',
+
+  VIEW_PAGES_AND_RESOURCES: 'courses.view_pages_and_resources',
+  EDIT_PAGES_AND_RESOURCES: 'courses.manage_pages_and_resources',
 };

src/authz/permissionHelpers.ts

@@ -10,3 +10,14 @@ export const getGradingPermissions = (courseId: string) => ({
     scope: courseId,
   },
 });
+
+export const getPagesAndResourcesPermissions = (courseId: string) => ({
+  canViewPagesAndResources: {
+    action: COURSE_PERMISSIONS.VIEW_PAGES_AND_RESOURCES,
+    scope: courseId,
+  },
+  canEditPagesAndResources: {
+    action: COURSE_PERMISSIONS.EDIT_PAGES_AND_RESOURCES,
+    scope: courseId,
+  },
+});

src/pages-and-resources/PagesAndResources.tsx

@@ -14,6 +14,8 @@ import { AdditionalCoursePluginSlot } from '@src/plugin-slots/AdditionalCoursePl
 import { AdditionalCourseContentPluginSlot } from '@src/plugin-slots/AdditionalCourseContentPluginSlot';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { DeprecatedReduxState } from '@src/store';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getPagesAndResourcesPermissions } from '@src/authz/permissionHelpers';
 
 import messages from './messages';
 import DiscussionsSettings from './discussions';
@@ -28,6 +30,13 @@ const PagesAndResources = () => {
   const { courseId, courseDetails } = useCourseAuthoringContext();
   document.title = getPageHeadTitle(courseDetails?.name || '', intl.formatMessage(messages.heading));
 
+  const {
+    isLoading: isLoadingUserPermissions,
+    isAuthzEnabled,
+    canViewPagesAndResources,
+    canEditPagesAndResources,
+  } = useCourseUserPermissions(courseId, getPagesAndResourcesPermissions(courseId));
+
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(fetchCourseApps(courseId));
@@ -56,19 +65,33 @@ const PagesAndResources = () => {
     }
   });
 
-  if (loadingStatus === RequestStatus.IN_PROGRESS) {
+  if (loadingStatus === RequestStatus.IN_PROGRESS || isLoadingUserPermissions) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
   }
 
-  if (courseAppsApiStatus === RequestStatus.DENIED) {
+  // Gate: if user has neither VIEW nor MANAGE permission, show permission denied
+  const hasNoAccess = (!isAuthzEnabled && courseAppsApiStatus === RequestStatus.DENIED)
+    || (isAuthzEnabled && !isLoadingUserPermissions && !canViewPagesAndResources && !canEditPagesAndResources);
+
+  if (hasNoAccess) {
     return <PermissionDeniedAlert />;
   }
 
+  const isEditable = !isLoadingUserPermissions && canEditPagesAndResources;
   const hasAdditionalCoursePlugin = getConfig()?.pluginSlots?.additional_course_plugin != null;
 
+  // Read-only mode: has VIEW permission but not MANAGE (auditor)
+  const isReadOnly = isAuthzEnabled
+    && !isLoadingUserPermissions
+    && canViewPagesAndResources
+    && !canEditPagesAndResources;
+
+  // For the modal: if readOnly, isEditable should be false (show disabled fields)
+  const isEditableForModal = isReadOnly ? false : isEditable;
+
   return (
-    <PagesAndResourcesProvider courseId={courseId}>
+    <PagesAndResourcesProvider courseId={courseId} isEditable={isEditableForModal}>
       <main className="container container-mw-md px-3">
         <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
           <h3 className="m-0">{intl.formatMessage(messages.heading)}</h3>
@@ -81,7 +104,6 @@ const PagesAndResources = () => {
             <Button variant="outline-primary" className="p-2">{intl.formatMessage(messages.viewLiveButton)}</Button>
           </Hyperlink>
         </div>
-
         <Routes>
           <Route
             path="discussion/configure/:appId"
@@ -117,14 +139,23 @@ const PagesAndResources = () => {
           />
         </Routes>
 
-        <PageGrid pages={pages} pluginSlotComponent={<AdditionalCoursePluginSlot />} courseId={courseId} />
+        <PageGrid
+          pages={pages}
+          pluginSlotComponent={<AdditionalCoursePluginSlot />}
+          courseId={courseId}
+          readOnly={isReadOnly}
+        />
         {(contentPermissionsPages.length > 0 || hasAdditionalCoursePlugin)
           && (
             <>
               <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
                 <h3 className="m-0">{intl.formatMessage(messages.contentPermissions)}</h3>
               </div>
-              <PageGrid pages={contentPermissionsPages} pluginSlotComponent={<AdditionalCourseContentPluginSlot />} />
+              <PageGrid
+                pages={contentPermissionsPages}
+                pluginSlotComponent={<AdditionalCourseContentPluginSlot />}
+                readOnly={isReadOnly}
+              />
             </>
           )}
       </main>

src/pages-and-resources/PagesAndResourcesProvider.tsx

@@ -3,19 +3,24 @@ import React, { useMemo } from 'react';
 interface PagesAndResourcesContextData {
   courseId?: string;
   path?: string;
+  isEditable?: boolean;
 }
-export const PagesAndResourcesContext = React.createContext<PagesAndResourcesContextData>({});
+export const PagesAndResourcesContext = React.createContext<PagesAndResourcesContextData>({
+  isEditable: false,
+});
 
 interface PagesAndResourcesProviderProps {
   courseId: string;
+  isEditable?: boolean;
   children: React.ReactNode;
 }
 
-const PagesAndResourcesProvider = ({ courseId, children }: PagesAndResourcesProviderProps) => {
+const PagesAndResourcesProvider = ({ courseId, isEditable = true, children }: PagesAndResourcesProviderProps) => {
   const contextValue = useMemo(() => ({
     courseId,
     path: `/course/${courseId}/pages-and-resources`,
-  }), []);
+    isEditable,
+  }), [courseId, isEditable]);
   return (
     <PagesAndResourcesContext.Provider
       value={contextValue}

src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx

@@ -52,7 +52,7 @@ const AppSettingsModal = ({
   hideAppToggle,
 }) => {
   const { formatMessage } = useIntl();
-  const { courseId } = useContext(PagesAndResourcesContext);
+  const { courseId, isEditable = false } = useContext(PagesAndResourcesContext);
   const loadingStatus = useSelector(getLoadingStatus);
   const updateSettingsRequestStatus = useSelector(getSavingStatus);
   const alertRef = useRef(null);
@@ -139,6 +139,7 @@ const AppSettingsModal = ({
                   }}
                   state={submitButtonState}
                   onClick={handleFormikSubmit(formikProps)}
+                  disabled={!isEditable}
                 />
               }
             >
@@ -157,6 +158,7 @@ const AppSettingsModal = ({
                   onChange={(event) => formikProps.handleChange(event)}
                   onBlur={formikProps.handleBlur}
                   checked={formikProps.values.enabled}
+                  disabled={!isEditable}
                   label={
                     <div className="d-flex align-items-center">
                       {enableAppLabel}

src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx

@@ -42,7 +42,7 @@ const AppConfigForm = ({
   const navigate = useNavigate();
 
   const { formRef } = useContext(AppConfigFormContext);
-  const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
+  const { path: pagesAndResourcesPath, isEditable: contextIsEditable = false } = useContext(PagesAndResourcesContext);
   const { appId: routeAppId } = useParams();
   const [isLoading, setLoading] = useState(true);
   const {
@@ -102,6 +102,7 @@ const AppConfigForm = ({
         formRef={formRef}
         onSubmit={handleSubmit}
         legacy
+        isEditable={contextIsEditable}
       />
     );
   } else if (selectedAppId === 'openedx') {
@@ -110,13 +111,15 @@ const AppConfigForm = ({
         formRef={formRef}
         onSubmit={handleSubmit}
         legacy={false}
+        isEditable={contextIsEditable}
       />
     );
   } else {
     form = (
       <LtiConfigForm
         formRef={formRef}
         onSubmit={handleSubmit}
+        isEditable={contextIsEditable}
       />
     );
   }