Adding permission checks on course outline page for course content edition part 1

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

@@ -9,6 +9,7 @@ import { getClipboardUrl } from '@src/generic/data/api';
 import { ContainerType } from '@src/generic/key-utils';
 import { getDownstreamApiUrl } from '@src/generic/unlink-modal/data/api';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import {
   act,
   fireEvent,
@@ -552,6 +553,11 @@ const renderComponent = () =>
 describe('<CourseOutline />', () => {
   beforeEach(async () => {
     const mocks = initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+    mocks.validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+      canPublishCourseContent: true,
+    });
     selectedContainerId = undefined;
     // restore index mock — use reorder outline spec (section[0] has 2 subsections for configure/drag tests)
     courseOutlineIndexMock = buildTestOutline({

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 ?
     (
@@ -335,7 +335,6 @@ const OutlineNode = ({
                 {...(depth === 2 ?
                   {
                     isVertical: true,
-                    enableCopyPasteUnits: blk.enableCopyPasteUnits ?? false,
                     onClickCopy: () => copyToClipboard(blk.id),
                     discussionEnabled: blk.discussionEnabled,
                     discussionsSettings,
@@ -352,7 +351,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 +380,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,7 @@ import {
   waitFor,
 } from '@src/testUtils';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
 import { userEvent } from '@testing-library/user-event';
 import { renderCard, setupCardTestMocks } from '../__mocks__/testSetup';
@@ -66,6 +67,13 @@ const cardHeaderProps = {
   },
 };
 
+let validateUserPermissionsMock;
+
+const mockPermissions = (canEditCourseContent = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canEditCourseContent });
+  validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent });
+};
+
 const renderComponent = (props?: object, entry = '/') => {
   const titleComponent = (
     <TitleButton
@@ -99,7 +107,9 @@ const renderComponent = (props?: object, entry = '/') => {
 
 describe('<CardHeader />', () => {
   beforeEach(() => {
-    setupCardTestMocks();
+    const mocks = setupCardTestMocks();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    mockPermissions(true);
     useUpdateCourseBlockNameMock.isPending = false;
     useUpdateCourseBlockNameMock.mutate.mockClear();
     useUpdateCourseBlockNameMock.mutateAsync.mockClear();
@@ -579,4 +589,31 @@ 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 () => {
+      mockPermissions(true);
+      renderComponent();
+
+      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(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(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();
+    });
+  });
 });