feat: adding permission checks on course outline page for course content edition

Author: jacobo-dominguez-wgu

plugins/course-apps/proctoring/Settings.test.jsx

@@ -472,7 +472,8 @@ describe('ProctoredExamSettings', () => {
       });
       // (1) for studio settings
       // (2) for course details
-      expect(axiosMock.history.get.length).toBe(2);
+      // (3) for user course permissions
+      expect(axiosMock.history.get.length).toBe(3);
       expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
     });
 

src/CourseAuthoringContext.tsx

@@ -10,6 +10,8 @@ import { type UnitXBlock, type XBlock } from '@src/data/types';
 import { CourseDetailsData } from './data/api';
 import { useCourseDetails } from './data/apiHooks';
 import { RequestStatusType } from './data/constants';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getCourseOutlinePermissions } from '@src/authz/permissionHelpers';
 
 export type ModalState = {
   value?: XBlock | UnitXBlock;
@@ -29,6 +31,9 @@ export type CourseAuthoringContextData = {
   currentUnlinkModalData?: ModalState;
   openUnlinkModal: (value: ModalState) => void;
   closeUnlinkModal: () => void;
+  isLoading: boolean;
+  canEditCourseContent: boolean;
+  canPublishCourseContent: boolean;
 };
 
 /**
@@ -58,7 +63,14 @@ export const CourseAuthoringProvider = ({
     closeUnlinkModal,
   ] = useToggleWithValue<ModalState>();
 
+  const {
+    canEditCourseContent,
+    canPublishCourseContent,
+    isLoading: isUserPermissionsLoading,
+  } = useCourseUserPermissions(courseId, getCourseOutlinePermissions(courseId));
+
   const getUnitUrl = (locator: string) => `/course/${courseId}/container/${locator}`;
+  const isLoading = isUserPermissionsLoading;
 
   /**
    * Open the unit page for a given locator.
@@ -78,6 +90,9 @@ export const CourseAuthoringProvider = ({
     openUnlinkModal,
     closeUnlinkModal,
     currentUnlinkModalData,
+    isLoading,
+    canEditCourseContent,
+    canPublishCourseContent,
   }), [
     courseId,
     courseDetails,
@@ -89,6 +104,9 @@ export const CourseAuthoringProvider = ({
     openUnlinkModal,
     closeUnlinkModal,
     currentUnlinkModalData,
+    canEditCourseContent,
+    canPublishCourseContent,
+    isLoading,
   ]);
 
   return (

src/authz/constants.ts

@@ -17,7 +17,9 @@ export const CONTENT_LIBRARY_PERMISSIONS = {
 
 export const COURSE_PERMISSIONS = {
   VIEW_COURSE: 'courses.view_course',
+  CREATE_COURSE: 'courses.create_course',
   EDIT_COURSE_CONTENT: 'courses.edit_course_content',
+  PUBLISH_COURSE_CONTENT: 'courses.publish_course_content',
 
   MANAGE_ADVANCED_SETTINGS: 'courses.manage_advanced_settings',
 

src/authz/permissionHelpers.test.ts

@@ -164,6 +164,10 @@ describe('permissionHelpers', () => {
           action: COURSE_PERMISSIONS.EDIT_COURSE_CONTENT,
           scope: courseId,
         },
+        canPublishCourseContent: {
+          action: COURSE_PERMISSIONS.PUBLISH_COURSE_CONTENT,
+          scope: courseId,
+        },
       });
     });
   });

src/authz/permissionHelpers.ts

@@ -75,6 +75,10 @@ export const getCourseOutlinePermissions = (courseId: string) => ({
     action: COURSE_PERMISSIONS.EDIT_COURSE_CONTENT,
     scope: courseId,
   },
+  canPublishCourseContent: {
+    action: COURSE_PERMISSIONS.PUBLISH_COURSE_CONTENT,
+    scope: courseId,
+  },
 });
 
 export const getLibraryUpdatesPermissions = (courseId: string) => ({

src/course-outline/CourseOutline.test.tsx

@@ -188,6 +188,16 @@ jest.mock('./data/api', () => ({
   getTagsCount: () => jest.fn().mockResolvedValue({}),
 }));
 
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: jest.fn().mockReturnValue({
+    isLoading: false,
+    isAuthzEnabled: false,
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
+  }),
+}));
+
 jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
 }));

src/course-outline/CourseOutline.tsx

@@ -51,6 +51,8 @@ const CourseOutline = () => {
   const location = useLocation();
   const {
     courseId,
+    canEditCourseContent,
+    isLoading: isLoadingAuthoringContext,
   } = useCourseAuthoringContext();
   const {
     courseUsageKey,
@@ -94,7 +96,14 @@ const CourseOutline = () => {
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
 
   const isInternetConnectionAlertFailed = savingStatus === RequestStatus.FAILED;
-  const isReIndexShow = Boolean(reindexLink);
+  const isReIndexShow = canEditCourseContent && Boolean(reindexLink);
+
+  // The header's "+ Add" button creates course content, so gate its visibility behind the
+  // edit permission. This is scoped to the header actions and leaves the outline tree unaffected.
+  const headerCourseActions = useMemo(
+    () => ({ ...courseActions, childAddable: canEditCourseContent && courseActions.childAddable }),
+    [courseActions, canEditCourseContent],
+  );
 
   const handleAddBlock = useCreateCourseBlock(courseId);
   const pasteMutation = usePasteItem(courseId);
@@ -169,7 +178,7 @@ const CourseOutline = () => {
     }
   }, [location, courseId, courseName]);
 
-  if (isLoading) {
+  if (isLoading || isLoadingAuthoringContext) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (
       <Row className="m-0 mt-4 justify-content-center">
@@ -249,7 +258,7 @@ const CourseOutline = () => {
                 headerNavigationsActions={headerNavigationsActions}
                 isDisabledReindexButton={isDisabledReindexButton}
                 hasSections={Boolean(sections.length)}
-                courseActions={courseActions}
+                courseActions={headerCourseActions}
                 errors={errors}
                 sections={sections}
               />

src/course-outline/OutlineNode.tsx

@@ -105,7 +105,7 @@ const OutlineNode = ({
 
   const { activeId, overId } = useContext(DragContext);
   const { selectedContainerState, openContainerSidebar, setSelectedContainerState } = useOutlineSidebarContext();
-  const { courseId, openUnlinkModal, getUnitUrl } = useCourseAuthoringContext();
+  const { courseId, openUnlinkModal, getUnitUrl, canEditCourseContent } = useCourseAuthoringContext();
   const duplicateMutation = useDuplicateItem(courseId);
   const { openPublishModal } = useCourseOutlineContext();
   const queryClient = useQueryClient();
@@ -236,7 +236,7 @@ const OutlineNode = ({
     else { onOrderChange(effectiveSection, getPossibleMoves!(index, 1)); }
   };
 
-  const isDraggable = model.isDraggable(actions, isHeaderVisible);
+  const isDraggable = canEditCourseContent && model.isDraggable(actions, isHeaderVisible);
 
   const titleComponent = depth < 2 ?
     (
@@ -352,7 +352,7 @@ const OutlineNode = ({
                 data-testid={levelConfig.contentTestId}
                 onClick={(e) => onClickCard(e, false)}
               >
-                {depth === 0 && onOpenHighlightsModal && (
+                {canEditCourseContent && depth === 0 && onOpenHighlightsModal && (
                   <div className="outline-section__status mb-1">
                     <Button
                       className="p-0 bg-transparent"
@@ -381,14 +381,14 @@ const OutlineNode = ({
               })}
             >
               {children}
-              {actions.childAddable && (
+              {canEditCourseContent && actions.childAddable && (
                 <OutlineAddChildButtons
                   childType={levelConfig.containerType!}
                   parentLocator={blk.id}
                   grandParentLocator={depth === 1 ? parentSection?.id : undefined}
                 />
               )}
-              {showPaste && (
+              {canEditCourseContent && showPaste && (
                 <PasteComponent
                   className="mt-4 border-gray-500 rounded-0"
                   text={intl.formatMessage(outlineNodeMessages.pasteButton)}

src/course-outline/OutlineTree.tsx

@@ -17,6 +17,7 @@ import {
 } from './drag-helper/utils';
 import { applyReorderMove } from './drag-helper/utils';
 import { type Depth, LEVEL_NAMES } from './outline-level';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export interface OutlineTreeProps {
   sections: XBlock[];
@@ -81,6 +82,8 @@ const OutlineTree = ({
     await commitSectionReorder(sectionListIds);
   }, [sections, previewSections, commitSectionReorder]);
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   const handleSubsectionOrderChange = useCallback(
     async (section: XBlock, moveDetails: SubsectionMoveDetails | null) => {
       applyReorderMove(moveDetails, section, previewSections, commitSubsectionReorder);
@@ -180,7 +183,7 @@ const OutlineTree = ({
                     )}
                   </SortableContext>
                 </DraggableList>
-                {courseActions.childAddable && (
+                {canEditCourseContent && courseActions.childAddable && (
                   <OutlineAddChildButtons
                     childType={ContainerType.Section}
                     parentLocator={courseUsageKey}
@@ -190,7 +193,7 @@ const OutlineTree = ({
             ) :
             (
               <EmptyPlaceholder>
-                {courseActions.childAddable ?
+                {canEditCourseContent && courseActions.childAddable ?
                   (
                     <OutlineAddChildButtons
                       childType={ContainerType.Section}

src/course-outline/card-header/CardHeader.test.tsx

@@ -8,6 +8,8 @@ import {
   waitFor,
 } from '@src/testUtils';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
 import { userEvent } from '@testing-library/user-event';
 import { renderCard, setupCardTestMocks } from '../__mocks__/testSetup';
@@ -39,6 +41,14 @@ jest.mock('@src/course-outline/data/apiHooks', () => ({
   useUpdateCourseBlockName: () => useUpdateCourseBlockNameMock,
 }));
 
+jest.mock('@src/authz/hooks', () => ({
+  useCourseUserPermissions: jest.fn().mockReturnValue({
+    isLoading: false,
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
+  }),
+}));
+
 const cardHeaderProps = {
   title: 'Some title',
   status: ITEM_BADGE_STATUS.live,
@@ -66,6 +76,11 @@ const cardHeaderProps = {
   },
 };
 
+const mockPermissions = (mockedPermissions) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !!mockedPermissions });
+  jest.mocked(useCourseUserPermissions).mockReturnValue(mockedPermissions);
+};
+
 const renderComponent = (props?: object, entry = '/') => {
   const titleComponent = (
     <TitleButton
@@ -579,4 +594,30 @@ describe('<CardHeader />', () => {
     await act(async () => fireEvent.click(unlinkMenuItem));
     expect(onClickUnlinkMock).toHaveBeenCalled();
   });
+
+  describe('canEditCourseContent permission', () => {
+    it('renders the rename button and actions menu when canEditCourseContent is true', async () => {
+      renderComponent({ canEditCourseContent: true });
+
+      expect(await screen.findByTestId('subsection-edit-button')).toBeInTheDocument();
+      expect(await screen.findByTestId('subsection-card-header__menu')).toBeInTheDocument();
+    });
+
+    it('does not render the rename button when canEditCourseContent is false', async () => {
+      mockPermissions({ canEditCourseContent: false });
+      renderComponent();
+
+      expect(await screen.findByText(cardHeaderProps.title)).toBeInTheDocument();
+      expect(screen.queryByTestId('subsection-edit-button')).not.toBeInTheDocument();
+    });
+
+    it('does not render the actions menu when canEditCourseContent is false', async () => {
+      mockPermissions({ canEditCourseContent: false });
+      renderComponent();
+
+      expect(await screen.findByText(cardHeaderProps.title)).toBeInTheDocument();
+      expect(screen.queryByTestId('subsection-card-header__menu')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('subsection-card-header__menu-button')).not.toBeInTheDocument();
+    });
+  });
 });