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

Author: jacobo-dominguez-wgu

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

@@ -67,6 +67,7 @@ const CourseOutline = () => {
     isCustomRelativeDatesActive,
     isLoading,
     isLoadingDenied,
+    canEditCourseContent,
     courseName,
     errors,
     loadingStatus,
@@ -94,7 +95,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);
@@ -249,7 +257,7 @@ const CourseOutline = () => {
                 headerNavigationsActions={headerNavigationsActions}
                 isDisabledReindexButton={isDisabledReindexButton}
                 hasSections={Boolean(sections.length)}
-                courseActions={courseActions}
+                courseActions={headerCourseActions}
                 errors={errors}
                 sections={sections}
               />
@@ -285,6 +293,7 @@ const CourseOutline = () => {
                   <OutlineTree
                     sections={sections}
                     courseActions={courseActions}
+                    canEditCourseContent={canEditCourseContent}
                     courseUsageKey={courseUsageKey}
                     hasOutlineIndexError={!!errors?.outlineIndexApi}
                     isCustomRelativeDatesActive={isCustomRelativeDatesActive}

src/course-outline/CourseOutlineContext.tsx

@@ -28,6 +28,8 @@ import {
   getLastEditableSubsection,
 } from './state';
 import { useCourseAuthoringContext, type ModalState } from '@src/CourseAuthoringContext';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getCourseOutlinePermissions } from '@src/authz/permissionHelpers';
 
 import {
   CourseOutline,
@@ -41,6 +43,7 @@ type CourseOutlineContextData = {
   courseUsageKey: string;
   sections: XBlock[];
   courseActions: XBlockActions;
+  canEditCourseContent: boolean;
   statusBarData: CourseOutlineStatusBar;
   savingStatus: string;
   errors: OutlinePageErrors;
@@ -92,6 +95,11 @@ const CourseOutlineContext = createContext<CourseOutlineContextData | undefined>
 export const CourseOutlineProvider = ({ children }: { children?: React.ReactNode; }) => {
   const { courseId } = useCourseAuthoringContext();
 
+  const {
+    canEditCourseContent,
+    isLoading: isEditPermissionLoading,
+  } = useCourseUserPermissions(courseId, getCourseOutlinePermissions(courseId));
+
   // Dismissed error signatures: { [errorKey]: signatureAtTimeOfDismissal }
   // Dismissal applies only while the current error's payload signature matches.
   const [dismissedErrorSignatures, setDismissedErrorSignatures] = useState<Record<string, string>>({});
@@ -237,11 +245,12 @@ export const CourseOutlineProvider = ({ children }: { children?: React.ReactNode
     courseUsageKey: effectiveOutlineIndexData?.courseStructure?.id || courseId,
     sections: visibleSections,
     courseActions,
+    canEditCourseContent,
     statusBarData,
     savingStatus,
     errors: mergedErrors,
     loadingStatus: mergedLoadingStatus,
-    isLoading: mergedLoadingStatus.outlineIndexIsLoading,
+    isLoading: mergedLoadingStatus.outlineIndexIsLoading || isEditPermissionLoading,
     isLoadingDenied: mergedLoadingStatus.outlineIndexIsDenied,
     isCustomRelativeDatesActive,
     enableProctoredExams,
@@ -273,10 +282,12 @@ export const CourseOutlineProvider = ({ children }: { children?: React.ReactNode
     courseId,
     visibleSections,
     courseActions,
+    canEditCourseContent,
     statusBarData,
     savingStatus,
     mergedErrors,
     mergedLoadingStatus,
+    isEditPermissionLoading,
     isCustomRelativeDatesActive,
     enableProctoredExams,
     enableTimedExams,

src/course-outline/OutlineNode.tsx

@@ -107,7 +107,7 @@ const OutlineNode = ({
   const { selectedContainerState, openContainerSidebar, setSelectedContainerState } = useOutlineSidebarContext();
   const { courseId, openUnlinkModal, getUnitUrl } = useCourseAuthoringContext();
   const duplicateMutation = useDuplicateItem(courseId);
-  const { openPublishModal } = useCourseOutlineContext();
+  const { openPublishModal, canEditCourseContent } = useCourseOutlineContext();
   const queryClient = useQueryClient();
   const { sharedClipboardData, showPasteUnit, copyToClipboard } = useClipboard();
   const intl = useIntl();
@@ -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 ?
     (
@@ -328,6 +328,7 @@ const OutlineNode = ({
                 titleComponent={titleComponent}
                 namePrefix={levelConfig.name}
                 actions={actions}
+                canEditCourseContent={canEditCourseContent}
                 extraActionsComponent={extraActionsComponent}
                 {...(depth === 1
                   ? { isSequential: true, proctoringExamConfigurationLink: blk.proctoringExamConfigurationLink }
@@ -352,7 +353,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 +382,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

@@ -21,6 +21,7 @@ import { type Depth, LEVEL_NAMES } from './outline-level';
 export interface OutlineTreeProps {
   sections: XBlock[];
   courseActions: XBlockActions;
+  canEditCourseContent: boolean;
   courseUsageKey: string;
   hasOutlineIndexError: boolean;
   isCustomRelativeDatesActive: boolean;
@@ -57,6 +58,7 @@ interface RenderContext {
 const OutlineTree = ({
   sections,
   courseActions,
+  canEditCourseContent,
   courseUsageKey,
   hasOutlineIndexError,
   isCustomRelativeDatesActive,
@@ -180,7 +182,7 @@ const OutlineTree = ({
                     )}
                   </SortableContext>
                 </DraggableList>
-                {courseActions.childAddable && (
+                {canEditCourseContent && courseActions.childAddable && (
                   <OutlineAddChildButtons
                     childType={ContainerType.Section}
                     parentLocator={courseUsageKey}
@@ -190,7 +192,7 @@ const OutlineTree = ({
             ) :
             (
               <EmptyPlaceholder>
-                {courseActions.childAddable ?
+                {canEditCourseContent && courseActions.childAddable ?
                   (
                     <OutlineAddChildButtons
                       childType={ContainerType.Section}

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

@@ -64,6 +64,7 @@ const cardHeaderProps = {
     duplicable: true,
     unlinkable: true,
   },
+  canEditCourseContent: true,
 };
 
 const renderComponent = (props?: object, entry = '/') => {
@@ -579,4 +580,28 @@ 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 () => {
+      renderComponent({ canEditCourseContent: false });
+
+      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 () => {
+      renderComponent({ canEditCourseContent: false });
+
+      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();
+    });
+  });
 });

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

@@ -57,6 +57,7 @@ interface CardHeaderProps {
   namePrefix: string;
   proctoringExamConfigurationLink?: string;
   actions: XBlockActions;
+  canEditCourseContent: boolean;
   enableCopyPasteUnits?: boolean;
   isVertical?: boolean;
   isSequential?: boolean;
@@ -96,6 +97,7 @@ const CardHeader = ({
   titleComponent,
   namePrefix,
   actions,
+  canEditCourseContent,
   enableCopyPasteUnits,
   isVertical,
   isSequential,
@@ -285,15 +287,17 @@ const CardHeader = ({
           (
             <Stack direction="horizontal" gap={2}>
               {titleComponent}
-              <IconButtonWithTooltip
-                className="item-card-button-icon"
-                data-testid={`${namePrefix}-edit-button`}
-                alt={intl.formatMessage(messages.altButtonRename)}
-                tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
-                iconAs={EditIcon}
-                onClick={onEditClick}
-                disabled={editMutation.isPending}
-              />
+              { canEditCourseContent && 
+                <IconButtonWithTooltip
+                  className="item-card-button-icon"
+                  data-testid={`${namePrefix}-edit-button`}
+                  alt={intl.formatMessage(messages.altButtonRename)}
+                  tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
+                  iconAs={EditIcon}
+                  onClick={onEditClick}
+                  disabled={editMutation.isPending}
+                />
+              }
             </Stack>
           )}
         <div className="ml-auto d-flex">
@@ -313,7 +317,7 @@ const CardHeader = ({
               onClick={onClickSync}
             />
           )}
-          <Dropdown data-testid={`${namePrefix}-card-header__menu`}>
+          {canEditCourseContent && <Dropdown data-testid={`${namePrefix}-card-header__menu`}>
             <Dropdown.Toggle
               className="item-card-header__menu"
               id={`${namePrefix}-card-header__menu`}
@@ -412,6 +416,7 @@ const CardHeader = ({
               )}
             </Dropdown.Menu>
           </Dropdown>
+        }
         </div>
       </div>
     </>