feat: implement view and edit permission checks for pages and resources (#3031)

* 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
* feat(pages-and-resources): add permission tests for grading and pages/resources access
* feat(pages-and-resources): implement advanced settings permissions and refactor related components
* feat(pages-and-resources): update permissions terminology and enhance related components
* feat(pages-and-resources): refactor isEditable context usage and improve accessibility attributes
* test(pages-and-resources): remove unnecessary blank lines in OpenedXConfigForm and PageCard tests
* refactor: change readOnly to isEditable to keep consistency
* feat(pages-and-resources): remove isEditable prop from forms and related components
* feat(pages-and-resources): remove isEditable prop and clean up related components
* fix(lti-config-form): remove unnecessary blank line in consumerSecret input
* feat: implement user permissions in menu items
* feat(tests): update waffle flags for authorization in settings menu tests
* refactor: remove advanced settings read only related things
* feat: simplify permissions handling by removing advanced settings management
* feat: replace useUserPermissions with useCourseUserPermissions for improved permission handling
* refactor: address feedback

Author: bra-i-am

src/CourseAuthoringPage.test.tsx

@@ -108,14 +108,20 @@ describe('Course authoring page', () => {
 
     axiosMock.onGet(
       `${courseAppsApiUrl}/${courseId}`,
-    ).reply(403);
+    ).reply(403, { response: { status: 403 } });
     await executeThunk(fetchCourseApps(courseId), store.dispatch);
   };
   test('renders PermissionDeniedAlert when courseAppsApiStatus is DENIED', async () => {
     mockPathname = '/editor/';
     await mockStoreDenied();
 
-    const wrapper = renderComponent(<CourseAuthoringPage />);
+    // Test PagesAndResources (which has the PermissionDeniedAlert logic),
+    // not CourseAuthoringPage which is just the layout wrapper
+    const wrapper = renderComponent(
+      <CourseAuthoringPage>
+        <PagesAndResources />
+      </CourseAuthoringPage>,
+    );
     expect(await wrapper.findByTestId('permissionDeniedAlert')).toBeInTheDocument();
   });
 });

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/authz/constants.ts

@@ -24,4 +24,7 @@ export const COURSE_PERMISSIONS = {
   VIEW_SCHEDULE_AND_DETAILS: 'courses.view_schedule_and_details',
   EDIT_SCHEDULE: 'courses.edit_schedule',
   EDIT_DETAILS: 'courses.edit_details',
+
+  VIEW_PAGES_AND_RESOURCES: 'courses.view_pages_and_resources',
+  MANAGE_PAGES_AND_RESOURCES: 'courses.manage_pages_and_resources',
 };

src/authz/permissionHelpers.test.ts

@@ -0,0 +1,48 @@
+import {
+  getGradingPermissions,
+  getPagesAndResourcesPermissions,
+  getAdvancedSettingsPermissions,
+} from './permissionHelpers';
+import { COURSE_PERMISSIONS } from './constants';
+
+describe('permissionHelpers', () => {
+  const courseId = 'course-v1:org+course+run';
+
+  describe('getGradingPermissions', () => {
+    it('returns VIEW and EDIT permissions with the correct actions and scope', () => {
+      const result = getGradingPermissions(courseId);
+
+      expect(result.canViewGradingSettings.action).toBe(COURSE_PERMISSIONS.VIEW_GRADING_SETTINGS);
+      expect(result.canViewGradingSettings.scope).toBe(courseId);
+      expect(result.canEditGradingSettings.action).toBe(COURSE_PERMISSIONS.EDIT_GRADING_SETTINGS);
+      expect(result.canEditGradingSettings.scope).toBe(courseId);
+    });
+  });
+
+  describe('getPagesAndResourcesPermissions', () => {
+    it('returns VIEW and MANAGE permissions with the correct actions and scope', () => {
+      const result = getPagesAndResourcesPermissions(courseId);
+
+      expect(result.canViewPagesAndResources.action).toBe(COURSE_PERMISSIONS.VIEW_PAGES_AND_RESOURCES);
+      expect(result.canViewPagesAndResources.scope).toBe(courseId);
+      expect(result.canManagePagesAndResources.action).toBe(COURSE_PERMISSIONS.MANAGE_PAGES_AND_RESOURCES);
+      expect(result.canManagePagesAndResources.scope).toBe(courseId);
+    });
+  });
+
+  describe('getAdvancedSettingsPermissions', () => {
+    it('returns MANAGE permission with the correct action and scope', () => {
+      const result = getAdvancedSettingsPermissions(courseId);
+
+      expect(result.canManageAdvancedSettings.action).toBe(COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS);
+      expect(result.canManageAdvancedSettings.scope).toBe(courseId);
+    });
+
+    it('uses the provided courseId as scope', () => {
+      const otherId = 'course-v1:another+test+run';
+      const result = getAdvancedSettingsPermissions(otherId);
+
+      expect(result.canManageAdvancedSettings.scope).toBe(otherId);
+    });
+  });
+});

src/authz/permissionHelpers.ts

@@ -25,3 +25,21 @@ export const getGradingPermissions = (courseId: string) => ({
     scope: courseId,
   },
 });
+
+export const getPagesAndResourcesPermissions = (courseId: string) => ({
+  canViewPagesAndResources: {
+    action: COURSE_PERMISSIONS.VIEW_PAGES_AND_RESOURCES,
+    scope: courseId,
+  },
+  canManagePagesAndResources: {
+    action: COURSE_PERMISSIONS.MANAGE_PAGES_AND_RESOURCES,
+    scope: courseId,
+  },
+});
+
+export const getAdvancedSettingsPermissions = (courseId: string) => ({
+  canManageAdvancedSettings: {
+    action: COURSE_PERMISSIONS.MANAGE_ADVANCED_SETTINGS,
+    scope: courseId,
+  },
+});

src/header/hooks.test.tsx

@@ -3,7 +3,7 @@ import { getConfig, setConfig } from '@edx/frontend-platform';
 import { renderHook, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode } from 'react';
-import { useUserPermissions } from '@src/authz/data/apiHooks';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import messages from './messages';
 import {
@@ -34,8 +34,9 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
-jest.mock('@src/authz/data/apiHooks', () => ({
-  useUserPermissions: jest.fn(),
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: jest.fn(),
 }));
 
 const createWrapper = () => {
@@ -56,6 +57,15 @@ const createWrapper = () => {
 
 describe('header utils', () => {
   describe('getContentMenuItems', () => {
+    beforeEach(() => {
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
+        isLoading: false,
+        isAuthzEnabled: false,
+        canViewPagesAndResources: true,
+        canManagePagesAndResources: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
+    });
+
     it('when video upload page enabled should include Video Uploads option', () => {
       jest.mocked(useSelector).mockReturnValue({
         librariesV2Enabled: false,
@@ -88,17 +98,49 @@ describe('header utils', () => {
         renderHook(() => useContentMenuItems('course-123'), { wrapper: createWrapper() }).result.current;
       expect(actualItems[1]).toEqual({ href: '/course/course-123/libraries', title: 'Library Updates' });
     });
+    it('when authz enabled and user has canViewPagesAndResources should include pages and resources option', async () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+      jest.mocked(useSelector).mockReturnValue({ librariesV2Enabled: false });
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
+        isLoading: false,
+        isAuthzEnabled: true,
+        canViewPagesAndResources: true,
+        canManagePagesAndResources: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
+      const { result } = renderHook(() => useContentMenuItems('course-123'), { wrapper: createWrapper() });
+      await waitFor(() => {
+        expect(result.current.map((item) => item.title)).toContain('Pages & Resources');
+      });
+    });
+    it('when authz enabled and user lacks canViewPagesAndResources should not include pages and resources option', async () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+      jest.mocked(useSelector).mockReturnValue({ librariesV2Enabled: false });
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
+        isLoading: false,
+        isAuthzEnabled: true,
+        canViewPagesAndResources: false,
+        canManagePagesAndResources: false,
+      } as ReturnType<typeof useCourseUserPermissions>);
+      const { result } = renderHook(() => useContentMenuItems('course-123'), { wrapper: createWrapper() });
+      await waitFor(() => {
+        expect(result.current.map((item) => item.title)).not.toContain('Pages & Resources');
+      });
+    });
   });
 
   describe('getSettingsMenuitems', () => {
     beforeEach(() => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: false, useNewCertificatesPage: false });
       jest.mocked(useSelector).mockReturnValue({
         canAccessAdvancedSettings: true,
       });
-      jest.mocked(useUserPermissions).mockReturnValue({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canManageAdvancedSettings: true },
-      } as any);
+        isAuthzEnabled: false,
+        canManageAdvancedSettings: true,
+        canViewGradingSettings: true,
+        canViewScheduleAndDetails: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
     });
 
     it('when certificate page enabled should include certificates option', () => {
@@ -132,27 +174,29 @@ describe('header utils', () => {
     });
 
     it('when the authz.enable_course_authoring flag is enabled and user has access to advanced settings should include advanced settings option', async () => {
-      // Mock feature flag
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-      // Mock the useUserPermissions hook to return true for the authz.enable_course_authoring permission
-      jest.mocked(useUserPermissions).mockReturnValue({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canManageAdvancedSettings: true },
-      } as any);
+        isAuthzEnabled: true,
+        canManageAdvancedSettings: true,
+        canViewGradingSettings: true,
+        canViewScheduleAndDetails: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
         expect(actualItemsTitle).toContain('Advanced Settings');
       });
     });
     it('when authz.enable_course_authoring flag is enabled and user has no access to advanced settings should not include advanced settings option', async () => {
-      // Mock feature flag
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-      // Mock the useUserPermissions hook to return true for the authz.enable_course_authoring permission
-      jest.mocked(useUserPermissions).mockReturnValue({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canManageAdvancedSettings: false },
-      } as any);
+        isAuthzEnabled: true,
+        canManageAdvancedSettings: false,
+        canViewGradingSettings: true,
+        canViewScheduleAndDetails: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
@@ -161,13 +205,11 @@ describe('header utils', () => {
     });
 
     it('when authz.enable_course_authoring flag is enabled and the permission request is still loading, should not include advanced settings option', async () => {
-      // Mock feature flag
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-      // Mock the useUserPermissions hook to return true for the authz.enable_course_authoring permission
-      jest.mocked(useUserPermissions).mockReturnValue({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: true,
-        data: undefined,
-      } as any);
+        isAuthzEnabled: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
@@ -177,10 +219,13 @@ 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({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canViewScheduleAndDetails: true },
-      } as any);
+        isAuthzEnabled: true,
+        canViewScheduleAndDetails: true,
+        canManageAdvancedSettings: true,
+        canViewGradingSettings: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
@@ -190,10 +235,13 @@ describe('header utils', () => {
 
     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({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canViewScheduleAndDetails: false },
-      } as any);
+        isAuthzEnabled: true,
+        canViewScheduleAndDetails: false,
+        canManageAdvancedSettings: true,
+        canViewGradingSettings: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
@@ -203,10 +251,13 @@ describe('header utils', () => {
 
     it('when authz flag is enabled and user has canViewGradingSettings should include grading option', async () => {
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-      jest.mocked(useUserPermissions).mockReturnValue({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canViewGradingSettings: true },
-      } as any);
+        isAuthzEnabled: true,
+        canViewGradingSettings: true,
+        canManageAdvancedSettings: true,
+        canViewScheduleAndDetails: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
@@ -216,10 +267,13 @@ describe('header utils', () => {
 
     it('when authz flag is enabled and user lacks canViewGradingSettings should not include grading option', async () => {
       mockWaffleFlags({ enableAuthzCourseAuthoring: true });
-      jest.mocked(useUserPermissions).mockReturnValue({
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
         isLoading: false,
-        data: { canViewGradingSettings: false },
-      } as any);
+        isAuthzEnabled: true,
+        canViewGradingSettings: false,
+        canManageAdvancedSettings: true,
+        canViewScheduleAndDetails: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       const { result } = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() });
       await waitFor(() => {
         const actualItemsTitle = result.current.map((item) => item.title);
@@ -228,6 +282,14 @@ describe('header utils', () => {
     });
 
     it('should include roles and permissions option', () => {
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true, useNewCertificatesPage: false });
+      jest.mocked(useCourseUserPermissions).mockReturnValue({
+        isLoading: false,
+        isAuthzEnabled: true,
+        canManageAdvancedSettings: true,
+        canViewGradingSettings: true,
+        canViewScheduleAndDetails: true,
+      } as ReturnType<typeof useCourseUserPermissions>);
       setConfig({
         ...getConfig(),
         ADMIN_CONSOLE_URL: 'http://admin-console.example.com',