From 5e312c599b798b0ce609511a4d0ea73a5d79701a Mon Sep 17 00:00:00 2001
From: jacobo-dominguez-wgu <jacobo.dominguez@wgu.edu>
Date: Mon, 17 Aug 2026 09:30:23 -0600
Subject: [PATCH 1/3] feat: adding permissions checks related to course section
 and units

---
 .../course-apps/proctoring/Settings.test.jsx  |  12 +-
 .../info-sidebar/InfoSidebar.test.tsx         |   2 +
 .../sharedSettings/VisibilitySection.test.tsx |  52 +++-
 .../sharedSettings/VisibilitySection.tsx      |   5 +
 src/course-unit/CourseUnit.test.tsx           | 113 ++++++-
 src/course-unit/CourseUnit.tsx                |   7 +-
 .../SequenceNavigationDropdown.jsx            |  27 +-
 .../SequenceNavigationTabs.jsx                |   6 +-
 .../HeaderNavigations.test.tsx                |  49 ++-
 .../header-navigations/HeaderNavigations.tsx  |   8 +-
 .../header-title/HeaderTitle.test.tsx         |  70 ++++-
 src/course-unit/header-title/HeaderTitle.tsx  |  17 +-
 .../sidebar-footer/ActionButtons.test.jsx     |  76 ++++-
 .../sidebar-footer/ActionButtons.tsx          |   9 +-
 .../unit-sidebar/UnitAlignSidebar.test.tsx    |  15 +-
 .../UnitSidebarPagesContext.test.tsx          | 120 +++++++
 .../unit-sidebar/UnitSidebarPagesContext.tsx  |  11 +-
 .../unit-info/ComponentInfoSidebar.test.tsx   |   2 +
 .../GenericUnitInfoSettings.test.tsx          |  45 ++-
 .../unit-info/GenericUnitInfoSettings.tsx     |   4 +
 .../unit-info/UnitInfoSidebar.test.tsx        |   2 +
 .../unit-info/UnitVisibilityInfo.test.tsx     | 114 +++++++
 .../unit-info/UnitVisibilityInfo.tsx          |  19 +-
 .../configure-modal/ConfigureModal.test.tsx   | 292 ++++++++++--------
 .../configure-modal/ConfigureModal.tsx        |  30 +-
 src/generic/configure-modal/UnitTab.tsx       |  30 +-
 src/generic/sidebar/SidebarTitle.test.tsx     | 118 +++++++
 src/generic/sidebar/SidebarTitle.tsx          |   4 +-
 28 files changed, 1007 insertions(+), 252 deletions(-)
 create mode 100644 src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx
 create mode 100644 src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx
 create mode 100644 src/generic/sidebar/SidebarTitle.test.tsx

diff --git a/plugins/course-apps/proctoring/Settings.test.jsx b/plugins/course-apps/proctoring/Settings.test.jsx
index 4ee6953dad..4d137efc98 100644
--- a/plugins/course-apps/proctoring/Settings.test.jsx
+++ b/plugins/course-apps/proctoring/Settings.test.jsx
@@ -470,11 +470,13 @@ describe('ProctoredExamSettings', () => {
       await waitFor(() => {
         screen.getByDisplayValue('mockproc');
       });
-      // (1) for studio settings
-      // (2) for course details
-      // (3) for user course permissions
-      expect(axiosMock.history.get.length).toBe(3);
-      expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
+      // With no exam service URL configured, no request should be made to the exams
+      // service for provider options. (Total GET count is not asserted because the
+      // CourseAuthoringProvider also fetches course details and waffle flags.)
+      const examProvidersRequested = axiosMock.history.get.some((req) => req.url.includes('/api/v1/providers'));
+      expect(examProvidersRequested).toBe(false);
+      const studioSettingsRequested = axiosMock.history.get.some((req) => req.url.includes('proctored_exam_settings'));
+      expect(studioSettingsRequested).toBe(true);
     });
 
     it('Selected LTI proctoring provider is shown on page load', async () => {
diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
index 9f79791c92..2db6461454 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
@@ -56,6 +56,8 @@ jest.mock('@src/CourseAuthoringContext', () => ({
     courseId,
     openUnlinkModal,
     getUnitUrl: jest.fn(),
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
   }),
 }));
 
diff --git a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx
index 3ec946a0cc..9607073fef 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx
@@ -7,7 +7,9 @@ import {
 import userEvent from '@testing-library/user-event';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import { VisibilityTypes } from '@src/data/constants';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { VisibilitySection } from './VisibilitySection';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   ...jest.requireActual('@src/course-outline/data/apiHooks'),
@@ -22,14 +24,30 @@ const defaultProps = {
   onChange: jest.fn(),
 };
 
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+const renderWithWrapper = (children) => {
+  render(children, {
+    extraWrapper: WrapperProvider,
+  });
+};
+
+let validateUserPermissionsMock;
+
 describe('VisibilitySection component', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
     mockUseCourseItemData.mockReturnValue({ data: undefined });
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
   });
 
   it('renders title and buttons', async () => {
-    render(<VisibilitySection {...defaultProps} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} />);
     expect(await screen.findByText('Visibility')).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeInTheDocument();
@@ -38,7 +56,7 @@ describe('VisibilitySection component', () => {
   it('clicking staff only calls onChange with staff and hideAfterDue false', async () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
 
     await user.click(await screen.findByRole('button', { name: 'Staff Only' }));
     await waitFor(async () => {
@@ -50,7 +68,7 @@ describe('VisibilitySection component', () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: VisibilityTypes.STAFF_ONLY } });
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
 
     await user.click(await screen.findByRole('button', { name: 'Student Visible' }));
     await waitFor(async () => {
@@ -63,7 +81,7 @@ describe('VisibilitySection component', () => {
     const onChange = jest.fn();
     // initial data not staff only
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: false } });
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
 
     const checkbox = await screen.findByRole('checkbox');
     await user.click(checkbox);
@@ -76,7 +94,7 @@ describe('VisibilitySection component', () => {
     const user = userEvent.setup();
     const onChange = jest.fn();
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: true } });
-    render(<VisibilitySection {...defaultProps} isSubsection={false} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} isSubsection={false} onChange={onChange} />);
 
     await user.click(await screen.findByRole('button', { name: 'Staff Only' }));
     await waitFor(async () => {
@@ -88,7 +106,27 @@ describe('VisibilitySection component', () => {
     const onChange = jest.fn();
     // when item is staff only, checkbox should not be present
     mockUseCourseItemData.mockReturnValue({ data: { visibilityState: VisibilityTypes.STAFF_ONLY } });
-    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    renderWithWrapper(<VisibilitySection {...defaultProps} onChange={onChange} />);
     expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
   });
+
+  it('disables both visibility buttons when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderWithWrapper(<VisibilitySection {...defaultProps} />);
+
+    expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeDisabled();
+    expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeDisabled();
+  });
+
+  it('disables the hide-after-due checkbox when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: false } });
+    renderWithWrapper(<VisibilitySection {...defaultProps} />);
+
+    expect(await screen.findByRole('checkbox')).toBeDisabled();
+  });
 });
diff --git a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx
index 75793104fb..fc69365bd8 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.tsx
@@ -7,6 +7,7 @@ import { SidebarSection } from '@src/generic/sidebar';
 import { useFieldDraft } from '@src/hooks/useFieldDraft';
 import { useMemo } from 'react';
 import messages from '../messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface Props<T = Partial<ConfigureSubsectionData>> {
   itemId: string;
@@ -22,6 +23,7 @@ interface State {
 export const VisibilitySection = ({ itemId, isSubsection, onChange }: Props) => {
   const intl = useIntl();
   const { data: itemData } = useCourseItemData(itemId);
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const serverState = useMemo<State>(() => ({
     isVisibleToStaffOnly: itemData?.visibilityState === VisibilityTypes.STAFF_ONLY,
@@ -42,12 +44,14 @@ export const VisibilitySection = ({ itemId, isSubsection, onChange }: Props) =>
     >
       <ButtonGroup toggle>
         <Button
+          disabled={!canEditCourseContent}
           variant={localState?.isVisibleToStaffOnly ? 'outline-primary' : 'primary'}
           onClick={() => setLocalState((prev) => ({ ...prev, isVisibleToStaffOnly: false }))}
         >
           <FormattedMessage {...messages.subsectionVisibilityStudentVisible} />
         </Button>
         <Button
+          disabled={!canEditCourseContent}
           variant={localState?.isVisibleToStaffOnly ? 'primary' : 'outline-primary'}
           onClick={() =>
             setLocalState((prev) => ({
@@ -61,6 +65,7 @@ export const VisibilitySection = ({ itemId, isSubsection, onChange }: Props) =>
       </ButtonGroup>
       {isSubsection && !localState?.isVisibleToStaffOnly && (
         <Form.Checkbox
+          disabled={!canEditCourseContent}
           checked={localState?.hideAfterDue}
           className="mt-2"
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/src/course-unit/CourseUnit.test.tsx b/src/course-unit/CourseUnit.test.tsx
index b8fe42485b..e8f6332b7e 100644
--- a/src/course-unit/CourseUnit.test.tsx
+++ b/src/course-unit/CourseUnit.test.tsx
@@ -1,5 +1,7 @@
 import fetchMock from 'fetch-mock-jest';
 import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   camelCaseObject,
   getConfig,
@@ -57,7 +59,7 @@ import {
   clipboardMockResponse,
   courseOutlineInfoMock,
 } from './__mocks__';
-import { clipboardUnit } from '../__mocks__';
+import { clipboardUnit, clipboardXBlock } from '../__mocks__';
 import { executeThunk } from '../utils';
 import pasteNotificationsMessages from './clipboard/paste-notification/messages';
 import headerTitleMessages from './header-title/messages';
@@ -84,6 +86,7 @@ let axiosMock;
 let store;
 let mockShowToast;
 let mockCloseToast;
+let validateUserPermissionsMock;
 const courseId = '123';
 const blockId = courseSectionVerticalMock.xblock_info.id;
 const sequenceId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5';
@@ -156,6 +159,14 @@ describe('<CourseUnit />', () => {
     mockShowToast = mocks.mockShowToast;
     mockCloseToast = mocks.mockCloseToast;
     axiosMock = mocks.axiosMock;
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      isLoading: false,
+      canViewCourse: true,
+      canEditCourseContent: true,
+      canPublishCourseContent: true,
+    });
     axiosMock
       .onGet(getClipboardUrl())
       .reply(200, clipboardUnit);
@@ -939,7 +950,7 @@ describe('<CourseUnit />', () => {
 
     const unitHeaderTitle = screen.getByTestId('unit-header-title');
 
-    const editTitleButton = within(unitHeaderTitle).getByRole('button', {
+    const editTitleButton = await within(unitHeaderTitle).findByRole('button', {
       name: headerTitleMessages.altButtonEdit.defaultMessage,
     });
     await user.click(editTitleButton);
@@ -1589,7 +1600,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -1650,7 +1661,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
 
       await waitFor(() => {
@@ -1716,7 +1727,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -1777,7 +1788,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -1840,7 +1851,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
       await user.click(
-        screen.getByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
+        await screen.findByRole('button', { name: legacySidebarMessages.actionButtonCopyUnitTitle.defaultMessage }),
       );
       await user.click(screen.getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
@@ -2573,6 +2584,92 @@ describe('<CourseUnit />', () => {
     });
   });
 
+  describe('Add component authorization (authz)', () => {
+    let waffleFlagsSpy;
+
+    beforeEach(() => {
+      // Enable authz so `canEditCourseContent` is driven by the mocked permissions API
+      // rather than falling back to `true`.
+      waffleFlagsSpy = mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    });
+
+    afterEach(() => {
+      // Restore the real `useWaffleFlags` so the spy doesn't leak into later tests
+      // (jest is not configured to restore mocks automatically).
+      waffleFlagsSpy?.mockRestore();
+    });
+
+    it('renders the add-component strip when authz grants edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: true,
+        canPublishCourseContent: true,
+      });
+
+      render(<RootWrapper />);
+
+      expect(
+        await screen.findByRole('heading', { name: addComponentMessages.title.defaultMessage }),
+      ).toBeInTheDocument();
+    });
+
+    it('hides the add-component strip when authz denies edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: false,
+        canPublishCourseContent: false,
+      });
+
+      render(<RootWrapper />);
+
+      // Wait for the unit to finish rendering (the xblock iframe is always present)...
+      await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
+      // ...then confirm the add-component strip is gated out by the missing permission.
+      expect(
+        screen.queryByRole('heading', { name: addComponentMessages.title.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders the paste-component button when authz grants edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: true,
+        canPublishCourseContent: true,
+      });
+      // Put a component (a non-structural block) on the clipboard so the paste button can appear.
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock.onGet(getClipboardUrl()).reply(200, clipboardXBlock);
+      axiosMock.onGet(getCourseSectionVerticalApiUrl(blockId)).reply(200, courseSectionVerticalMock);
+      axiosMock.onGet(getCourseVerticalChildrenApiUrl(blockId)).reply(200, courseVerticalChildrenMock);
+
+      render(<RootWrapper />);
+
+      expect(
+        await screen.findByRole('button', { name: messages.pasteButtonText.defaultMessage }),
+      ).toBeInTheDocument();
+    });
+
+    it('hides the paste-component button when authz denies edit permission', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canViewCourse: true,
+        canEditCourseContent: false,
+        canPublishCourseContent: false,
+      });
+      // Same clipboard setup as the granted case, so only the missing permission can hide the button.
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock.onGet(getClipboardUrl()).reply(200, clipboardXBlock);
+      axiosMock.onGet(getCourseSectionVerticalApiUrl(blockId)).reply(200, courseSectionVerticalMock);
+      axiosMock.onGet(getCourseVerticalChildrenApiUrl(blockId)).reply(200, courseVerticalChildrenMock);
+
+      render(<RootWrapper />);
+
+      await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
+      expect(
+        screen.queryByRole('button', { name: messages.pasteButtonText.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it('renders and navigates to the new HTML XBlock editor after xblock duplicating', async () => {
     const updatedCourseVerticalChildrenMock = JSON.parse(JSON.stringify(courseVerticalChildrenMock));
     // Convert the second child from drag and drop to HTML:
@@ -2636,7 +2733,7 @@ describe('<CourseUnit />', () => {
 
     // Edit button should be enabled even for library imported units
     const unitHeaderTitle = screen.getByTestId('unit-header-title');
-    const editButton = within(unitHeaderTitle).getByRole(
+    const editButton = await within(unitHeaderTitle).findByRole(
       'button',
       { name: 'Edit' },
     );
diff --git a/src/course-unit/CourseUnit.tsx b/src/course-unit/CourseUnit.tsx
index 6a558de793..c162a3c0f6 100644
--- a/src/course-unit/CourseUnit.tsx
+++ b/src/course-unit/CourseUnit.tsx
@@ -164,7 +164,7 @@ const StatusBar = ({ courseUnit }: { courseUnit: any; }) => {
 const CourseUnit = () => {
   const intl = useIntl();
   const { blockId } = useParams();
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, canEditCourseContent } = useCourseAuthoringContext();
   const urls = useHelpUrls(['syncLibraryUpdates']);
 
   if (courseId === undefined) {
@@ -359,7 +359,8 @@ const CourseUnit = () => {
                     courseVerticalChildren={courseVerticalChildren.children}
                   />
                 )}
-                {!readOnly && showPasteXBlock && canPasteComponent && isUnitVerticalType && sharedClipboardData
+                {canEditCourseContent && !readOnly && showPasteXBlock && canPasteComponent && isUnitVerticalType &&
+                  sharedClipboardData
                   && /* istanbul ignore next */ (
                     <PasteComponent
                       clipboardData={sharedClipboardData}
@@ -370,7 +371,7 @@ const CourseUnit = () => {
                       text={intl.formatMessage(messages.pasteButtonText)}
                     />
                   )}
-                {!readOnly && blockId && (
+                {canEditCourseContent && !readOnly && blockId && (
                   <AddComponent
                     parentLocator={blockId}
                     isSplitTestType={isSplitTestType}
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
index 2e2923d272..6405826d1f 100644
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import { Button, Dropdown } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Plus as PlusIcon, ContentPasteGo as ContentPasteGoIcon } from '@openedx/paragon/icons/';
 
 import messages from '../messages';
 import UnitButton from './UnitButton';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 const SequenceNavigationDropdown = ({
   unitId,
@@ -14,6 +15,7 @@ const SequenceNavigationDropdown = ({
   showPasteUnit,
 }) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   return (
     <Dropdown className="sequence-navigation-dropdown">
@@ -34,22 +36,25 @@ const SequenceNavigationDropdown = ({
             unitId={buttonUnitId}
           />
         ))}
-        <Button
-          as={Dropdown.Item}
-          variant="outline-primary"
-          iconBefore={PlusIcon}
-          onClick={handleAddNewSequenceUnit}
-        >
-          {intl.formatMessage(messages.newUnitBtnText)}
-        </Button>
-        {showPasteUnit && (
+        {canEditCourseContent &&
+          (
+            <Button
+              as={Dropdown.Item}
+              variant="outline-primary"
+              iconBefore={PlusIcon}
+              onClick={handleAddNewSequenceUnit}
+            >
+              <FormattedMessage {...messages.newUnitBtnText} />
+            </Button>
+          )}
+        {canEditCourseContent && showPasteUnit && (
           <Button
             as={Dropdown.Item}
             variant="outline-primary"
             iconBefore={ContentPasteGoIcon}
             onClick={handlePasteNewSequenceUnit}
           >
-            {intl.formatMessage(messages.pasteAsNewUnitLink)}
+            <FormattedMessage {...messages.pasteAsNewUnitLink} />
           </Button>
         )}
       </Dropdown.Menu>
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
index 0f4ca66bff..b57deff504 100644
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
@@ -23,7 +23,7 @@ const SequenceNavigationTabs = ({
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const sequenceId = useSelector(getSequenceId);
-  const { courseId } = useCourseAuthoringContext();
+  const { courseId, canEditCourseContent } = useCourseAuthoringContext();
   const courseUnit = useSelector(getCourseUnitData);
   const sequenceChildAddable = courseUnit?.ancestorInfo?.ancestors?.[0]?.actions?.childAddable;
 
@@ -67,7 +67,7 @@ const SequenceNavigationTabs = ({
               isActive={unitId === buttonUnitId}
             />
           ))}
-          {sequenceChildAddable && (
+          {canEditCourseContent && sequenceChildAddable && (
             <Button
               className="sequence-navigation-tabs-action-btn"
               variant="outline-primary"
@@ -77,7 +77,7 @@ const SequenceNavigationTabs = ({
               {intl.formatMessage(messages.newUnitBtnText)}
             </Button>
           )}
-          {showPasteUnit && (
+          {canEditCourseContent && showPasteUnit && (
             <Button
               className="sequence-navigation-tabs-action-btn"
               variant="outline-primary"
diff --git a/src/course-unit/header-navigations/HeaderNavigations.test.tsx b/src/course-unit/header-navigations/HeaderNavigations.test.tsx
index 12394aa3fb..b9d9838322 100644
--- a/src/course-unit/header-navigations/HeaderNavigations.test.tsx
+++ b/src/course-unit/header-navigations/HeaderNavigations.test.tsx
@@ -1,11 +1,18 @@
 import userEvent from '@testing-library/user-event';
 import { getConfig, setConfig } from '@edx/frontend-platform';
-import { render, initializeMocks, screen } from '@src/testUtils';
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import HeaderNavigations from './HeaderNavigations';
 import messages from './messages';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 const handleViewLiveFn = jest.fn();
 const handlePreviewFn = jest.fn();
@@ -18,6 +25,10 @@ const headerNavigationsActions = {
   handleEdit: handleEditFn,
 };
 
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
 const renderComponent = (props) =>
   render(
     <IntlProvider locale="en">
@@ -27,6 +38,9 @@ const renderComponent = (props) =>
         {...props}
       />
     </IntlProvider>,
+    {
+      extraWrapper: WrapperProvider,
+    },
   );
 
 jest.mock('../unit-sidebar/UnitSidebarContext', () => ({
@@ -36,9 +50,15 @@ jest.mock('../unit-sidebar/UnitSidebarContext', () => ({
   }),
 }));
 
+let validateUserPermissionsMock;
 describe('<HeaderNavigations />', () => {
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
   });
 
   it('render HeaderNavigations component correctly', () => {
@@ -111,10 +131,33 @@ describe('<HeaderNavigations />', () => {
     const user = userEvent.setup();
     renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
 
-    const addButton = screen.getByRole('button', { name: /add/i });
+    // The Add button is gated behind `canEditCourseContent`, which is only known once
+    // the (async) permissions query resolves, so wait for it rather than querying synchronously.
+    const addButton = await screen.findByRole('button', { name: /add/i });
     expect(addButton).toBeInTheDocument();
     await user.click(addButton);
 
     expect(mockSetCurrentPageKey).toHaveBeenCalledWith('add', null);
   });
+
+  it('hides the Add button on the unit page when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
+    expect(await screen.findByRole('button', { name: messages.previewButton.defaultMessage })).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.addButton.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  ['libraryContent', 'splitTest'].forEach((category) => {
+    it(`hides the Edit button on the ${category} page when the user cannot edit course content`, async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canEditCourseContent: false,
+      });
+      renderComponent({ category: COURSE_BLOCK_NAMES[category].id });
+      await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+      expect(screen.queryByRole('button', { name: messages.editButton.defaultMessage })).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/course-unit/header-navigations/HeaderNavigations.tsx b/src/course-unit/header-navigations/HeaderNavigations.tsx
index a8e41153a3..ae92939a33 100644
--- a/src/course-unit/header-navigations/HeaderNavigations.tsx
+++ b/src/course-unit/header-navigations/HeaderNavigations.tsx
@@ -15,6 +15,7 @@ import { COURSE_BLOCK_NAMES } from '@src/constants';
 import messages from './messages';
 import { isUnitPageNewDesignEnabled } from '../utils';
 import { useUnitSidebarContext } from '../unit-sidebar/UnitSidebarContext';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type HeaderNavigationActions = {
   handleViewLive: () => void;
@@ -46,6 +47,8 @@ const HeaderNavigations = ({
     handleEdit,
   } = headerNavigationsActions;
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   const { setCurrentPageKey, readOnly } = useUnitSidebarContext();
 
   const showNewDesignButtons = isUnitPageNewDesignEnabled();
@@ -68,7 +71,7 @@ const HeaderNavigations = ({
               >
                 {intl.formatMessage(messages.infoButton)}
               </Button>
-              {!readOnly && (
+              {canEditCourseContent && !readOnly && (
                 <Button
                   variant="outline-primary"
                   iconBefore={Add}
@@ -103,7 +106,8 @@ const HeaderNavigations = ({
          * Action buttons used in legacy libraries content page and split test page
          */
       }
-      {[COURSE_BLOCK_NAMES.libraryContent.id, COURSE_BLOCK_NAMES.splitTest.id].includes(category) && (
+      {canEditCourseContent &&
+        [COURSE_BLOCK_NAMES.libraryContent.id, COURSE_BLOCK_NAMES.splitTest.id].includes(category) && (
         <Button
           iconBefore={EditIcon}
           variant="outline-primary"
diff --git a/src/course-unit/header-title/HeaderTitle.test.tsx b/src/course-unit/header-title/HeaderTitle.test.tsx
index ef7511e3bf..2a900a257b 100644
--- a/src/course-unit/header-title/HeaderTitle.test.tsx
+++ b/src/course-unit/header-title/HeaderTitle.test.tsx
@@ -1,7 +1,12 @@
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig, setConfig } from '@edx/frontend-platform';
-import { initializeMocks, render, screen } from '@src/testUtils';
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
 import userEvent from '@testing-library/user-event';
 import { executeThunk } from '@src/utils';
 
@@ -11,6 +16,8 @@ import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { courseSectionVerticalMock } from '../__mocks__';
 import HeaderTitle from './HeaderTitle';
 import messages from './messages';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 const blockId = '123';
 const unitTitle = 'Getting Started';
@@ -21,8 +28,12 @@ const handleConfigureSubmit = jest.fn();
 let store;
 let axiosMock;
 
-const renderComponent = (props?: any) =>
-  render(
+const renderComponent = (props?: any) => {
+  const WrapperProvider = ({ children }) => (
+    <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+  );
+
+  return render(
     <IframeProvider>
       <HeaderTitle
         unitTitle={unitTitle}
@@ -33,12 +44,20 @@ const renderComponent = (props?: any) =>
         {...props}
       />,
     </IframeProvider>,
+    {
+      extraWrapper: WrapperProvider,
+    },
   );
-
+};
 describe('<HeaderTitle />', () => {
+  let validateUserPermissionsMock;
   beforeEach(async () => {
     const mocks = initializeMocks();
-
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
     store = mocks.reduxStore;
     axiosMock = mocks.axiosMock;
     axiosMock
@@ -47,7 +66,7 @@ describe('<HeaderTitle />', () => {
     await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
   });
 
-  it('render HeaderTitle component correctly', () => {
+  it('render HeaderTitle component correctly', async () => {
     setConfig({
       ...getConfig(),
       ENABLE_UNIT_PAGE_NEW_DESIGN: false,
@@ -55,11 +74,11 @@ describe('<HeaderTitle />', () => {
     renderComponent();
 
     expect(screen.getByText(unitTitle)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
   });
 
-  it('render HeaderTitle with open edit form', () => {
+  it('render HeaderTitle with open edit form', async () => {
     setConfig({
       ...getConfig(),
       ENABLE_UNIT_PAGE_NEW_DESIGN: false,
@@ -70,7 +89,7 @@ describe('<HeaderTitle />', () => {
 
     expect(screen.getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toBeInTheDocument();
     expect(screen.getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toHaveValue(unitTitle);
-    expect(screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
+    expect(await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
     expect(screen.getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeEnabled();
   });
 
@@ -97,7 +116,7 @@ describe('<HeaderTitle />', () => {
 
     renderComponent();
 
-    expect(screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
+    expect(await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeEnabled();
     expect(screen.getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeEnabled();
   });
 
@@ -105,7 +124,7 @@ describe('<HeaderTitle />', () => {
     const user = userEvent.setup();
     renderComponent();
 
-    const editTitleButton = screen.getByRole('button', { name: messages.altButtonEdit.defaultMessage });
+    const editTitleButton = await screen.findByRole('button', { name: messages.altButtonEdit.defaultMessage });
     await user.click(editTitleButton);
     expect(handleTitleEdit).toHaveBeenCalledTimes(1);
   });
@@ -127,4 +146,33 @@ describe('<HeaderTitle />', () => {
     expect(titleField).toHaveValue(`${unitTitle} 1 2`);
     expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
   });
+
+  it('hides the Edit button when the user cannot edit course content (legacy design)', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: false,
+    });
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent();
+    expect(
+      await screen.findByRole('button', { name: messages.altButtonSettings.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: messages.altButtonEdit.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('hides the Edit button when the user cannot edit course content (new design)', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent();
+    expect(screen.getByText(unitTitle)).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.altButtonEdit.defaultMessage })).not.toBeInTheDocument();
+  });
 });
diff --git a/src/course-unit/header-title/HeaderTitle.tsx b/src/course-unit/header-title/HeaderTitle.tsx
index 67991c98b5..0cf31bf5f5 100644
--- a/src/course-unit/header-title/HeaderTitle.tsx
+++ b/src/course-unit/header-title/HeaderTitle.tsx
@@ -21,6 +21,7 @@ import { getCourseUnitData } from '../data/selectors';
 import { updateQueryPendingStatus } from '../data/slice';
 import messages from './messages';
 import { isUnitPageNewDesignEnabled } from '../utils';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 type HeaderTitleProps = {
   unitTitle: string;
@@ -47,6 +48,7 @@ const HeaderTitle = ({
   const [titleValue, setTitleValue] = useState(unitTitle);
   const currentItemData = useSelector(getCourseUnitData);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const isXBlockComponent = [
     COURSE_BLOCK_NAMES.libraryContent.id,
@@ -97,12 +99,15 @@ const HeaderTitle = ({
           </Form.Group>
         ) :
         unitTitle}
-      <IconButton
-        alt={intl.formatMessage(messages.altButtonEdit)}
-        className="ml-1 flex-shrink-0 edit-button"
-        iconAs={EditIcon}
-        onClick={handleTitleEdit}
-      />
+      {canEditCourseContent &&
+        (
+          <IconButton
+            alt={intl.formatMessage(messages.altButtonEdit)}
+            className="ml-1 flex-shrink-0 edit-button"
+            iconAs={EditIcon}
+            onClick={handleTitleEdit}
+          />
+        )}
       {!isUnitPageNewDesignEnabled() && (
         <>
           <IconButton
diff --git a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx
index 56cd476610..d3ca2d7c56 100644
--- a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx
+++ b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.test.jsx
@@ -1,11 +1,17 @@
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { render } from '@testing-library/react';
+import {
+  initializeMocks,
+  render,
+  screen,
+} from '@src/testUtils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import userEvent from '@testing-library/user-event';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 import initializeStore from '../../../../store';
 import { executeThunk } from '../../../../utils';
@@ -22,19 +28,28 @@ let axiosMock;
 let queryClient;
 const courseId = '123';
 
-const renderComponent = (props = {}) =>
-  render(
-    <AppProvider store={store}>
+const renderComponent = (props = {}) => {
+  const WrapperProvider = ({ children }) => (
+    <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+  );
+  return render(
+    <AppProvider store={store} wrapWithRouter={false}>
       <IntlProvider locale="en">
         <QueryClientProvider client={queryClient}>
           <ActionButtons {...props} />
         </QueryClientProvider>
       </IntlProvider>
     </AppProvider>,
+    {
+      extraWrapper: WrapperProvider,
+    },
   );
+};
 
 describe('<ActionButtons />', () => {
+  let validateUserPermissionsMock;
   beforeEach(async () => {
+    const mocks = initializeMocks();
     initializeMockApp({
       authenticatedUser: {
         userId: 3,
@@ -44,6 +59,13 @@ describe('<ActionButtons />', () => {
       },
     });
 
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+      canPublishCourseContent: true,
+    });
+
     store = initializeStore();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
@@ -67,24 +89,58 @@ describe('<ActionButtons />', () => {
     await executeThunk(fetchCourseSectionVerticalData(courseId), store.dispatch);
   });
 
-  it('render ActionButtons component with Copy to clipboard', () => {
-    const { getByRole } = renderComponent();
+  it('render ActionButtons component with Copy to clipboard', async () => {
+    renderComponent();
 
-    const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
+    const copyXBlockBtn = await screen.findByRole('button', {
+      name: messages.actionButtonCopyUnitTitle.defaultMessage,
+    });
     expect(copyXBlockBtn).toBeInTheDocument();
   });
 
   it('click on the Copy to clipboard button updates clipboardData', async () => {
     const user = userEvent.setup();
-    const { getByRole } = renderComponent();
+    renderComponent();
 
-    const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
+    const copyXBlockBtn = await screen.findByRole('button', {
+      name: messages.actionButtonCopyUnitTitle.defaultMessage,
+    });
 
     await user.click(copyXBlockBtn);
     expect(axiosMock.history.post.length).toBe(1);
     expect(axiosMock.history.post[0].data).toBe(
       JSON.stringify({ usage_key: courseSectionVerticalMock.xblock_info.id }),
     );
-    jest.resetAllMocks();
+  });
+
+  it('hides the Publish button when the user cannot publish course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+      canPublishCourseContent: false,
+    });
+    renderComponent();
+    expect(
+      await screen.findByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.actionButtonPublishTitle.defaultMessage }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('hides the Discard changes and Copy buttons when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+      canPublishCourseContent: true,
+    });
+    renderComponent();
+    expect(
+      await screen.findByRole('button', { name: messages.actionButtonPublishTitle.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.actionButtonDiscardChangesTitle.defaultMessage }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage }),
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx
index c86636d577..1738feec3c 100644
--- a/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx
+++ b/src/course-unit/legacy-sidebar/components/sidebar-footer/ActionButtons.tsx
@@ -6,6 +6,7 @@ import { Divider } from '@src/generic/divider';
 import { getCanEdit, getCourseUnitData } from '@src/course-unit/data/selectors';
 import { useClipboard } from '@src/generic/clipboard';
 import messages from '../../messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface ActionButtonsProps {
   openDiscardModal: () => void;
@@ -23,14 +24,14 @@ const ActionButtons = ({
     id,
     published,
     hasChanges,
-    enableCopyPasteUnits,
   } = useSelector(getCourseUnitData);
   const canEdit = useSelector(getCanEdit);
   const { copyToClipboard } = useClipboard();
+  const { canPublishCourseContent, canEditCourseContent } = useCourseAuthoringContext();
 
   return (
     <>
-      {(!published || hasChanges) && (
+      {(!published || hasChanges) && canPublishCourseContent && (
         <Button
           size="sm"
           className="mt-3.5"
@@ -40,7 +41,7 @@ const ActionButtons = ({
           {intl.formatMessage(messages.actionButtonPublishTitle)}
         </Button>
       )}
-      {(published && hasChanges) && (
+      {(published && hasChanges) && canEditCourseContent && (
         <Button
           size="sm"
           variant="link"
@@ -50,7 +51,7 @@ const ActionButtons = ({
           {intl.formatMessage(messages.actionButtonDiscardChangesTitle)}
         </Button>
       )}
-      {enableCopyPasteUnits && canEdit && !hideCopyButton && (
+      {canEdit && !hideCopyButton && canEditCourseContent && (
         <>
           <Divider className="course-unit-sidebar-footer__divider" />
           <Button
diff --git a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
index a90ad0bd43..6902cc70de 100644
--- a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
@@ -1,5 +1,7 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { UnitAlignSidebar } from './UnitAlignSidebar';
 import { UnitSidebarProvider } from './UnitSidebarContext';
 
@@ -18,16 +20,19 @@ jest.mock('react-router-dom', () => ({
 
 const renderComponent = () =>
   render(
-    <IframeProvider>
-      <UnitSidebarProvider readOnly={false}>
-        <UnitAlignSidebar />
-      </UnitSidebarProvider>
-    </IframeProvider>,
+    <CourseAuthoringProvider courseId={'courseId'}>
+      <IframeProvider>
+        <UnitSidebarProvider readOnly={false}>
+          <UnitAlignSidebar />
+        </UnitSidebarProvider>
+      </IframeProvider>
+    </CourseAuthoringProvider>,
   );
 
 describe('OutlineAlignSidebar', () => {
   beforeEach(() => {
     initializeMocks();
+    mockWaffleFlags();
   });
 
   it('renders ContentTagsDrawer with the correct id and variant', () => {
diff --git a/src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx
new file mode 100644
index 0000000000..2b57ea4268
--- /dev/null
+++ b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.test.tsx
@@ -0,0 +1,120 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { useUnitSidebarContext } from './UnitSidebarContext';
+import { UnitSidebarPagesProvider, useUnitSidebarPagesContext } from './UnitSidebarPagesContext';
+
+jest.mock('./UnitSidebarContext', () => ({
+  useUnitSidebarContext: jest.fn(),
+}));
+
+const mockUseUnitSidebarContext = useUnitSidebarContext as jest.Mock;
+
+/**
+ * Test consumer that renders one node per available sidebar page so the tests can assert
+ * which pages the provider exposes (and whether they are disabled).
+ */
+const PagesConsumer = () => {
+  const pages = useUnitSidebarPagesContext();
+  return (
+    <div>
+      {Object.entries(pages).map(([key, page]) => (
+        <div
+          key={key}
+          data-testid={`page-${key}`}
+          data-disabled={page?.disabled ? 'true' : 'false'}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderComponent = () =>
+  render(
+    <UnitSidebarPagesProvider>
+      <PagesConsumer />
+    </UnitSidebarPagesProvider>,
+    { extraWrapper: WrapperProvider },
+  );
+
+describe('<UnitSidebarPagesProvider />', () => {
+  let validateUserPermissionsMock;
+
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    mockUseUnitSidebarContext.mockReturnValue({
+      readOnly: false,
+      selectedComponentId: undefined,
+      currentItemCategory: 'vertical',
+    });
+    // Authz must be enabled for the mocked permissions to take effect; otherwise
+    // `useCourseUserPermissions` falls back to granting every permission (`true`).
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
+  });
+
+  it('always exposes the info page', async () => {
+    renderComponent();
+
+    expect(await screen.findByTestId('page-info')).toBeInTheDocument();
+  });
+
+  it('includes the add page when the user can edit course content and it is not read-only', async () => {
+    renderComponent();
+
+    // The add page is gated behind `canEditCourseContent`, which is only known once the (async)
+    // permissions query resolves, so wait for it rather than querying synchronously.
+    expect(await screen.findByTestId('page-add')).toBeInTheDocument();
+  });
+
+  it('excludes the add page when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent();
+
+    // Info always renders; wait for the permissions query to settle, then confirm the add page is gone.
+    expect(await screen.findByTestId('page-info')).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByTestId('page-add')).not.toBeInTheDocument();
+  });
+
+  it('excludes the add page when the sidebar is read-only even if the user can edit', async () => {
+    mockUseUnitSidebarContext.mockReturnValue({
+      readOnly: true,
+      selectedComponentId: undefined,
+      currentItemCategory: 'vertical',
+    });
+    renderComponent();
+
+    expect(await screen.findByTestId('page-info')).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByTestId('page-add')).not.toBeInTheDocument();
+  });
+
+  it('marks the add page as disabled when a component is selected', async () => {
+    mockUseUnitSidebarContext.mockReturnValue({
+      readOnly: false,
+      selectedComponentId: 'block-v1:org+course+run+type@html+block@test',
+      currentItemCategory: 'vertical',
+    });
+    renderComponent();
+
+    const addPage = await screen.findByTestId('page-add');
+    expect(addPage).toHaveAttribute('data-disabled', 'true');
+  });
+});
diff --git a/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx
index 18b821a841..f5fd8a3652 100644
--- a/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx
+++ b/src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx
@@ -9,6 +9,7 @@ import { AddSidebar } from './AddSidebar';
 import { UnitAlignSidebar } from './UnitAlignSidebar';
 import { useUnitSidebarContext } from './UnitSidebarContext';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type UnitSidebarPages = {
   info: SidebarPage;
@@ -16,7 +17,7 @@ export type UnitSidebarPages = {
   align?: SidebarPage;
 };
 
-const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean) => {
+const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean, canEditCourseContent: boolean) => {
   const showAlignSidebar = getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true';
 
   return {
@@ -25,7 +26,7 @@ const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean) => {
       icon: Info,
       title: messages.sidebarButtonInfo,
     },
-    ...(!readOnly && {
+    ...(!readOnly && canEditCourseContent && {
       add: {
         component: AddSidebar,
         icon: Plus,
@@ -87,13 +88,15 @@ export const UnitSidebarPagesProvider = ({ children }: UnitSidebarPagesProviderP
     currentItemCategory,
   } = useUnitSidebarContext();
 
+  const { canEditCourseContent } = useCourseAuthoringContext();
+
   const hasComponentSelected = selectedComponentId !== undefined;
   const isSplitTest = currentItemCategory === 'split_test';
   const disableAdd = hasComponentSelected || isSplitTest;
 
   const sidebarPages = useMemo(
-    () => getUnitSidebarPages(readOnly, disableAdd),
-    [readOnly, disableAdd],
+    () => getUnitSidebarPages(readOnly, disableAdd, canEditCourseContent),
+    [readOnly, disableAdd, canEditCourseContent],
   );
 
   return (
diff --git a/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx b/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx
index 1f286e7f24..88071f8166 100644
--- a/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/ComponentInfoSidebar.test.tsx
@@ -47,6 +47,8 @@ jest.mock('@src/course-unit/data/selectors', () => ({
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 'course-v1:UNIX+UX1+2025_T3',
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
   }),
 }));
 
diff --git a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx
index 1ff11800bd..6d44cbede2 100644
--- a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.test.tsx
@@ -5,6 +5,8 @@ import {
   waitFor,
 } from '@src/testUtils';
 import userEvent from '@testing-library/user-event';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { GenericUnitInfoSettings } from './GenericUnitInfoSettings';
 
 // Mock UnitTab subcomponents: Access is irrelevant here; Discussion becomes a simple
@@ -33,16 +35,31 @@ const baseProps = {
   configureHook: useFakeConfigure as any,
 };
 
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderWithWrapper = (children) =>
+  render(children, {
+    extraWrapper: WrapperProvider,
+  });
+
 describe('GenericUnitInfoSettings', () => {
+  let validateUserPermissionsMock;
+
   beforeEach(() => {
-    initializeMocks();
+    const mocks = initializeMocks();
     mutate.mockClear();
+    // Leave authz disabled by default so `canEditCourseContent` synchronously falls back to
+    // `true` and the visibility buttons are enabled/clickable. Gating tests re-enable authz.
+    mockWaffleFlags();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
   });
 
   it('commits staff-only visibility when "Staff Only" is clicked', async () => {
     const user = userEvent.setup();
     const updateCallback = jest.fn();
-    render(<GenericUnitInfoSettings {...baseProps} updateCallback={updateCallback} />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} updateCallback={updateCallback} />);
 
     await user.click(screen.getByRole('button', { name: 'Staff Only' }));
 
@@ -57,7 +74,7 @@ describe('GenericUnitInfoSettings', () => {
 
   it('opens the confirmation modal and commits student-visible on confirm', async () => {
     const user = userEvent.setup();
-    render(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
 
     await user.click(screen.getByRole('button', { name: 'Student Visible' }));
     // Modal opens; confirm.
@@ -73,7 +90,7 @@ describe('GenericUnitInfoSettings', () => {
 
   it('does not commit when the confirmation modal is cancelled', async () => {
     const user = userEvent.setup();
-    render(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} visibilityState="staff_only" />);
 
     await user.click(screen.getByRole('button', { name: 'Student Visible' }));
     await user.click(screen.getByRole('button', { name: 'Cancel' }));
@@ -83,7 +100,7 @@ describe('GenericUnitInfoSettings', () => {
 
   it('commits the discussion toggle', async () => {
     const user = userEvent.setup();
-    render(<GenericUnitInfoSettings {...baseProps} />);
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} />);
 
     await user.click(screen.getByRole('checkbox', { name: 'discussion' }));
 
@@ -94,4 +111,22 @@ describe('GenericUnitInfoSettings', () => {
       )
     );
   });
+
+  it('disables both visibility buttons when the user cannot edit course content', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} />);
+
+    expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeDisabled();
+    expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeDisabled();
+  });
+
+  it('enables both visibility buttons when the user can edit course content', async () => {
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: true });
+    renderWithWrapper(<GenericUnitInfoSettings {...baseProps} />);
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Student Visible' })).not.toBeDisabled());
+    expect(screen.getByRole('button', { name: 'Staff Only' })).not.toBeDisabled();
+  });
 });
diff --git a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx
index deadec5cd6..1630c980e9 100644
--- a/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx
@@ -12,6 +12,7 @@ import { useFieldDraft } from '@src/hooks/useFieldDraft';
 import ModalNotification from '@src/generic/modal-notification';
 import { InfoOutline } from '@openedx/paragon/icons';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface UnitInfoSettingsProps {
   id: string;
@@ -44,6 +45,7 @@ export const GenericUnitInfoSettings = (props: UnitInfoSettingsProps) => {
   const visibleToStaffOnly = visibilityState === UNIT_VISIBILITY_STATES.staffOnly;
   const mutateFn = configureHook();
   const [isVisibleModalOpen, openVisibleModal, closeVisibleModal] = useToggle(false);
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const handleUpdate = (
     isVisible: boolean,
@@ -121,12 +123,14 @@ export const GenericUnitInfoSettings = (props: UnitInfoSettingsProps) => {
         >
           <ButtonGroup toggle>
             <Button
+              disabled={!canEditCourseContent}
               variant={localState?.isVisible ? 'outline-primary' : 'primary'}
               onClick={openVisibleModal}
             >
               <FormattedMessage {...messages.sidebarInfoVisibilityStudentLabel} />
             </Button>
             <Button
+              disabled={!canEditCourseContent}
               variant={localState?.isVisible ? 'primary' : 'outline-primary'}
               onClick={() => setLocalState((prev) => ({ ...prev, isVisible: true }))}
             >
diff --git a/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx b/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx
index 554680082e..ef978703cb 100644
--- a/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx
@@ -53,6 +53,8 @@ jest.mock('@src/course-unit/data/selectors', () => ({
 jest.mock('@src/CourseAuthoringContext', () => ({
   useCourseAuthoringContext: () => ({
     courseId: 'course-v1:UNIX+UX1+2025_T3',
+    canEditCourseContent: true,
+    canPublishCourseContent: true,
   }),
 }));
 
diff --git a/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx
new file mode 100644
index 0000000000..47d316bfc2
--- /dev/null
+++ b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.test.tsx
@@ -0,0 +1,114 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+import { getConfig, setConfig } from '@edx/frontend-platform';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import UnitVisibilityInfo from './UnitVisibilityInfo';
+import messages from './messages';
+
+const mockSetCurrentTabKey = jest.fn();
+
+jest.mock('../UnitSidebarContext', () => ({
+  useUnitSidebarContext: () => ({
+    setCurrentTabKey: mockSetCurrentTabKey,
+  }),
+}));
+
+const defaultProps = {
+  openVisibleModal: jest.fn(),
+  visibleToStaffOnly: false,
+};
+
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderComponent = (props = {}) =>
+  render(<UnitVisibilityInfo {...defaultProps} {...props} />, {
+    extraWrapper: WrapperProvider,
+  });
+
+describe('<UnitVisibilityInfo />', () => {
+  let validateUserPermissionsMock;
+
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    // Authz must be enabled for the mocked permissions to take effect; otherwise
+    // `useCourseUserPermissions` falls back to granting every permission (`true`).
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
+  });
+
+  describe('new design', () => {
+    beforeEach(() => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+      });
+    });
+
+    it('renders the edit visibility button and navigates to settings when the user can edit', async () => {
+      const user = userEvent.setup();
+      renderComponent();
+
+      // The edit button is gated behind `canEditCourseContent`, which is only known once the
+      // (async) permissions query resolves, so wait for it rather than querying synchronously.
+      const editButton = await screen.findByRole('button', { name: messages.visibilityEditButton.defaultMessage });
+      await user.click(editButton);
+      expect(mockSetCurrentTabKey).toHaveBeenCalledWith('settings');
+    });
+
+    it('does not render the edit visibility button when the user cannot edit course content', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canEditCourseContent: false,
+      });
+      renderComponent();
+
+      // The visibility label always renders; wait for the permissions query to settle, then
+      // confirm the gated edit button never appears.
+      expect(await screen.findByText(messages.visibilityAllLearnersTitle.defaultMessage)).toBeInTheDocument();
+      await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+      expect(
+        screen.queryByRole('button', { name: messages.visibilityEditButton.defaultMessage }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('legacy design', () => {
+    beforeEach(() => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_UNIT_PAGE_NEW_DESIGN: false,
+      });
+    });
+
+    it('disables the visibility checkbox when the user cannot edit course content', async () => {
+      validateUserPermissionsMock.mockResolvedValue({
+        canEditCourseContent: false,
+      });
+      renderComponent();
+
+      expect(
+        await screen.findByRole('checkbox', { name: messages.visibilityCheckboxTitle.defaultMessage }),
+      ).toBeDisabled();
+    });
+
+    it('enables the visibility checkbox when the user can edit course content', async () => {
+      renderComponent();
+
+      await waitFor(() =>
+        expect(
+          screen.getByRole('checkbox', { name: messages.visibilityCheckboxTitle.defaultMessage }),
+        ).not.toBeDisabled()
+      );
+    });
+  });
+});
diff --git a/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx
index b013f76850..3126245c77 100644
--- a/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx
+++ b/src/course-unit/unit-sidebar/unit-info/UnitVisibilityInfo.tsx
@@ -15,6 +15,7 @@ import { Edit, Groups, Lock } from '@openedx/paragon/icons';
 import { useConfigureUnitWithPageUpdates } from '@src/course-unit/data/apiHooks';
 import messages from './messages';
 import { useUnitSidebarContext } from '../UnitSidebarContext';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface UnitVisibilityInfoProps {
   openVisibleModal: () => void;
@@ -46,6 +47,7 @@ const LegacyVisibilityInfo = ({
 
   const { blockId } = useParams();
   const publishMutation = useConfigureUnitWithPageUpdates();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const handleCourseUnitVisibility = () => {
     /* istanbul ignore next */
@@ -87,6 +89,7 @@ const LegacyVisibilityInfo = ({
         checked={hasExplicitStaffLock}
         onChange={hasExplicitStaffLock ? null : handleCourseUnitVisibility}
         onClick={hasExplicitStaffLock ? openVisibleModal : null}
+        disabled={!canEditCourseContent}
       >
         <FormattedMessage {...messages.visibilityCheckboxTitle} />
       </Form.Checkbox>
@@ -100,6 +103,7 @@ const UnitVisibilityInfoContent = ({
 }: UnitVisibilityInfoContentProps) => {
   const intl = useIntl();
   const { setCurrentTabKey } = useUnitSidebarContext();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   const { selectedPartitionIndex, selectedGroupsLabel } = userPartitionInfo ?? {};
   const hasGroups = selectedPartitionIndex !== -1 && !Number.isNaN(selectedPartitionIndex) && selectedGroupsLabel;
@@ -135,12 +139,15 @@ const UnitVisibilityInfoContent = ({
         <span className="font-weight-bold text-primary-700">
           {labelMessages}
         </span>
-        <IconButton
-          src={Edit}
-          alt={intl.formatMessage(messages.visibilityEditButton)}
-          size="inline"
-          onClick={() => setCurrentTabKey('settings')}
-        />
+        {canEditCourseContent &&
+          (
+            <IconButton
+              src={Edit}
+              alt={intl.formatMessage(messages.visibilityEditButton)}
+              size="inline"
+              onClick={() => setCurrentTabKey('settings')}
+            />
+          )}
       </Stack>
       {secondLabelMessages}
     </>
diff --git a/src/generic/configure-modal/ConfigureModal.test.tsx b/src/generic/configure-modal/ConfigureModal.test.tsx
index 941f4350ad..e002202d5b 100644
--- a/src/generic/configure-modal/ConfigureModal.test.tsx
+++ b/src/generic/configure-modal/ConfigureModal.test.tsx
@@ -1,10 +1,14 @@
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { AccessManagedXBlockDataTypes } from '@src/data/types';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import * as authzApi from '@src/authz/data/api';
 import initializeStore from '../../store';
 import ConfigureModal from './ConfigureModal';
 import {
@@ -16,6 +20,7 @@ import {
 import messages from './messages';
 
 let store;
+let queryClient;
 const mockPathname = '/foo-bar';
 
 jest.mock('react-redux', () => ({
@@ -33,33 +38,54 @@ jest.mock('react-router-dom', () => ({
 const onCloseMock = jest.fn();
 const onConfigureSubmitMock = jest.fn();
 
+/**
+ * Common setup. Note `mockWaffleFlags()` leaves authz disabled, so
+ * `useCourseUserPermissions` synchronously falls back to granting every permission
+ * (`canEditCourseContent === true`). Tests that need the denied path re-enable authz
+ * and mock `validateUserPermissions` explicitly.
+ */
+const setupMocks = () => {
+  initializeMockApp({
+    authenticatedUser: {
+      userId: 3,
+      username: 'abc123',
+      administrator: true,
+      roles: [],
+    },
+  });
+  store = initializeStore();
+  queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  mockWaffleFlags();
+};
+
+// AppProvider supplies the Router that CourseAuthoringProvider (useNavigate) needs; the
+// QueryClientProvider is required for the course-details/permissions queries it runs.
+const withProviders = (ui: React.ReactNode) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <QueryClientProvider client={queryClient}>
+        <CourseAuthoringProvider courseId={'courseId'}>
+          {ui}
+        </CourseAuthoringProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
 const renderComponent = () =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentSectionMock as unknown as AccessManagedXBlockDataTypes}
-          isSelfPaced={false}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentSectionMock as unknown as AccessManagedXBlockDataTypes}
+      isSelfPaced={false}
+    />,
+  ));
 
 describe('<ConfigureModal /> for Section', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders ConfigureModal component correctly', () => {
@@ -85,33 +111,20 @@ describe('<ConfigureModal /> for Section', () => {
 });
 
 const renderSubsectionComponent = (props?: object) =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
-          isSelfPaced={false}
-          {...props}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
+      isSelfPaced={false}
+      {...props}
+    />,
+  ));
 
 describe('<ConfigureModal /> for Subsection', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders subsection ConfigureModal component correctly', () => {
@@ -176,32 +189,19 @@ describe('<ConfigureModal /> for Subsection', () => {
 });
 
 const renderUnitComponent = (props?: object) =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentUnitMock as unknown as AccessManagedXBlockDataTypes}
-          {...props}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentUnitMock as unknown as AccessManagedXBlockDataTypes}
+      {...props}
+    />,
+  ));
 
 describe('<ConfigureModal /> for Unit', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders unit ConfigureModal component correctly', async () => {
@@ -246,33 +246,20 @@ describe('<ConfigureModal /> for Unit', () => {
 });
 
 const renderXBlockComponent = (props?: object) =>
-  render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <ConfigureModal
-          isOpen
-          isXBlockComponent
-          onClose={onCloseMock}
-          onConfigureSubmit={onConfigureSubmitMock}
-          currentItemData={currentXBlockMock as unknown as AccessManagedXBlockDataTypes}
-          {...props}
-        />
-      </IntlProvider>,
-    </AppProvider>,
-  );
+  render(withProviders(
+    <ConfigureModal
+      isOpen
+      isXBlockComponent
+      onClose={onCloseMock}
+      onConfigureSubmit={onConfigureSubmitMock}
+      currentItemData={currentXBlockMock as unknown as AccessManagedXBlockDataTypes}
+      {...props}
+    />,
+  ));
 
 describe('<ConfigureModal /> for XBlock', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
+    setupMocks();
   });
 
   it('renders unit ConfigureModal component correctly', async () => {
@@ -315,36 +302,78 @@ describe('<ConfigureModal /> for XBlock', () => {
   });
 });
 
-describe('<ConfigureModal /> with enableTimedExams prop', () => {
+describe('<ConfigureModal /> permission gating', () => {
+  let validateUserPermissionsMock;
+
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
+    setupMocks();
+    // Enable authz so `canEditCourseContent` is driven by the mocked permissions API.
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = jest.spyOn(authzApi, 'validateUserPermissions');
+  });
+
+  it('disables the unit visibility, access and discussion controls when the user cannot edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    const { getByTestId, getByRole } = renderUnitComponent();
+
+    await waitFor(() => expect(getByTestId('unit-visibility-checkbox')).toBeDisabled());
+    expect(getByTestId('group-type-select')).toBeDisabled();
+    expect(
+      getByRole('checkbox', { name: messages.discussionEnabledCheckbox.defaultMessage }),
+    ).toBeDisabled();
+  });
+
+  it('enables the unit visibility and access controls when the user can edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: true });
+    const { getByTestId } = renderUnitComponent();
+
+    await waitFor(() => expect(getByTestId('unit-visibility-checkbox')).not.toBeDisabled());
+    expect(getByTestId('group-type-select')).not.toBeDisabled();
+  });
+
+  it('disables the group type select for an xblock when the user cannot edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    const { getByTestId } = renderXBlockComponent();
 
-    store = initializeStore();
+    await waitFor(() => expect(getByTestId('group-type-select')).toBeDisabled());
+  });
+
+  it('hides the footer Cancel and Save buttons when the user cannot edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: false });
+    const { getByTestId, queryByRole } = renderUnitComponent();
+
+    // Wait for the modal body to render (the visibility checkbox is always present), then
+    // confirm the permission-gated footer actions are absent.
+    await waitFor(() => expect(getByTestId('unit-visibility-checkbox')).toBeInTheDocument());
+    expect(queryByRole('button', { name: messages.cancelButton.defaultMessage })).not.toBeInTheDocument();
+    expect(queryByRole('button', { name: messages.saveButton.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('shows the footer Cancel and Save buttons when the user can edit', async () => {
+    validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent: true });
+    const { findByRole, getByRole } = renderUnitComponent();
+
+    expect(await findByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+  });
+});
+
+describe('<ConfigureModal /> with enableTimedExams prop', () => {
+  beforeEach(() => {
+    setupMocks();
   });
 
   const renderWithTimedExamsProps = (enableTimedExams = true) =>
-    render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <ConfigureModal
-            isOpen
-            onClose={onCloseMock}
-            onConfigureSubmit={onConfigureSubmitMock}
-            currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
-            enableTimedExams={enableTimedExams}
-            isSelfPaced={false}
-          />
-        </IntlProvider>
-        ,
-      </AppProvider>,
-    );
+    render(withProviders(
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
+        enableTimedExams={enableTimedExams}
+        isSelfPaced={false}
+      />,
+    ));
 
   it('passes enableTimedExams=true to AdvancedTab', async () => {
     const user = userEvent.setup();
@@ -412,20 +441,15 @@ describe('<ConfigureModal /> with enableTimedExams prop', () => {
   it('defaults enableTimedExams to false when not provided', async () => {
     const user = userEvent.setup();
 
-    const { getByRole } = render(
-      <AppProvider store={store}>
-        <IntlProvider locale="en">
-          <ConfigureModal
-            isOpen
-            onClose={onCloseMock}
-            onConfigureSubmit={onConfigureSubmitMock}
-            currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
-            isSelfPaced={false}
-          />
-        </IntlProvider>
-        ,
-      </AppProvider>,
-    );
+    const { getByRole } = render(withProviders(
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentSubsectionMock as unknown as AccessManagedXBlockDataTypes}
+        isSelfPaced={false}
+      />,
+    ));
 
     const advancedTab = getByRole('tab', {
       name: messages.advancedTabTitle.defaultMessage,
diff --git a/src/generic/configure-modal/ConfigureModal.tsx b/src/generic/configure-modal/ConfigureModal.tsx
index d8c46b8003..04bbdb5e64 100644
--- a/src/generic/configure-modal/ConfigureModal.tsx
+++ b/src/generic/configure-modal/ConfigureModal.tsx
@@ -19,6 +19,7 @@ import VisibilityTab from './VisibilityTab';
 import AdvancedTab from './AdvancedTab';
 import { UnitTab } from './UnitTab';
 import { PUBLISH_TYPES } from '@src/course-unit/constants';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface Props {
   isOpen: boolean;
@@ -44,6 +45,7 @@ const ConfigureModal = ({
   isOverflowVisible = false,
 }: Props) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
 
   if (!currentItemData) {
     return null;
@@ -337,19 +339,21 @@ const ConfigureModal = ({
                   {renderModalBody(values, setFieldValue)}
                 </Form.Group>
               </ModalDialog.Body>
-              <ModalDialog.Footer className="pt-1">
-                <ActionRow>
-                  <ModalDialog.CloseButton variant="tertiary">
-                    {intl.formatMessage(messages.cancelButton)}
-                  </ModalDialog.CloseButton>
-                  <Button
-                    data-testid="configure-save-button"
-                    type="submit"
-                  >
-                    {intl.formatMessage(messages.saveButton)}
-                  </Button>
-                </ActionRow>
-              </ModalDialog.Footer>
+              {canEditCourseContent && (
+                <ModalDialog.Footer className="pt-1">
+                  <ActionRow>
+                    <ModalDialog.CloseButton variant="tertiary">
+                      {intl.formatMessage(messages.cancelButton)}
+                    </ModalDialog.CloseButton>
+                    <Button
+                      data-testid="configure-save-button"
+                      type="submit"
+                    >
+                      {intl.formatMessage(messages.saveButton)}
+                    </Button>
+                  </ActionRow>
+                </ModalDialog.Footer>
+              )}
             </Form>
           )}
         </Formik>
diff --git a/src/generic/configure-modal/UnitTab.tsx b/src/generic/configure-modal/UnitTab.tsx
index 852e9c9b99..83b01004ea 100644
--- a/src/generic/configure-modal/UnitTab.tsx
+++ b/src/generic/configure-modal/UnitTab.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import messages from './messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 export type UserPartitionInfo = {
   selectablePartitions: {
@@ -45,16 +46,19 @@ export const DiscussionEditComponent = ({
 }: {
   discussionEnabled: boolean;
   handleDiscussionChange: (e: any) => void;
-}) => (
-  <>
-    <Form.Checkbox checked={discussionEnabled} onChange={handleDiscussionChange}>
-      <FormattedMessage {...messages.discussionEnabledCheckbox} />
-    </Form.Checkbox>
-    <p className="x-small font-weight-bold">
-      <FormattedMessage {...messages.discussionEnabledDescription} />
-    </p>
-  </>
-);
+}) => {
+  const { canEditCourseContent } = useCourseAuthoringContext();
+  return (
+    <>
+      <Form.Checkbox checked={discussionEnabled} onChange={handleDiscussionChange} disabled={!canEditCourseContent}>
+        <FormattedMessage {...messages.discussionEnabledCheckbox} />
+      </Form.Checkbox>
+      <p className="x-small font-weight-bold">
+        <FormattedMessage {...messages.discussionEnabledDescription} />
+      </p>
+    </>
+  );
+};
 
 export interface AccessEditComponentProps {
   selectedPartitionIndex?: number;
@@ -70,6 +74,7 @@ export const AccessEditComponent = ({
   selectedGroups,
 }: AccessEditComponentProps) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
   const checkIsDeletedGroup = (group) => {
     const isGroupSelected = selectedGroups.includes(group.id.toString());
 
@@ -92,6 +97,7 @@ export const AccessEditComponent = ({
         value={selectedPartitionIndex}
         onChange={handleSelect}
         data-testid="group-type-select"
+        disabled={!canEditCourseContent}
       >
         <option value="-1" key="-1">
           {userPartitionInfo?.selectedPartitionIndex === -1
@@ -132,6 +138,7 @@ export const AccessEditComponent = ({
                   type="checkbox"
                   value={`${group.id}`}
                   name="selectedGroups"
+                  disabled={!canEditCourseContent}
                 />
                 <div>
                   <Form.Label
@@ -169,7 +176,7 @@ export const UnitTab = ({
     selectedGroups,
     discussionEnabled,
   } = values;
-
+  const { canEditCourseContent } = useCourseAuthoringContext();
   const handleVisibilityChange = (e) => {
     setFieldValue('isVisibleToStaffOnly', e.target.checked);
   };
@@ -201,6 +208,7 @@ export const UnitTab = ({
             checked={isVisibleToStaffOnly}
             onChange={handleVisibilityChange}
             data-testid="unit-visibility-checkbox"
+            disabled={!canEditCourseContent}
           >
             <FormattedMessage {...messages.hideFromLearners} />
           </Form.Checkbox>
diff --git a/src/generic/sidebar/SidebarTitle.test.tsx b/src/generic/sidebar/SidebarTitle.test.tsx
new file mode 100644
index 0000000000..3de7d666b4
--- /dev/null
+++ b/src/generic/sidebar/SidebarTitle.test.tsx
@@ -0,0 +1,118 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+import { Newsstand } from '@openedx/paragon/icons';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
+import { SidebarTitle } from './SidebarTitle';
+import messages from './messages';
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  useCourseItemData: jest.fn(),
+}));
+
+const mockUseCourseItemData = useCourseItemData as jest.Mock;
+
+const menuProps = {
+  itemId: 'block-v1:org+course+run+type@vertical+block@test',
+  index: 0,
+  actions: {
+    deletable: true,
+    draggable: false,
+    childAddable: false,
+    duplicable: true,
+  },
+  onClickUnlink: jest.fn(),
+  onClickDelete: jest.fn(),
+  onClickViewLibrary: jest.fn(),
+};
+
+const defaultProps = {
+  title: 'Section title',
+  icon: Newsstand,
+};
+
+const WrapperProvider = ({ children }) => (
+  <CourseAuthoringProvider courseId={'courseId'}>{children}</CourseAuthoringProvider>
+);
+
+const renderComponent = (props = {}) =>
+  render(<SidebarTitle {...defaultProps} {...props} />, {
+    extraWrapper: WrapperProvider,
+  });
+
+describe('<SidebarTitle />', () => {
+  let validateUserPermissionsMock;
+
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    // InfoSidebarMenu renders `null` until this returns data, so provide a minimal item.
+    mockUseCourseItemData.mockReturnValue({ data: { id: menuProps.itemId } });
+    // Authz must be enabled for the mocked permissions to take effect; otherwise
+    // `useCourseUserPermissions` falls back to granting every permission (`true`).
+    mockWaffleFlags({ enableAuthzCourseAuthoring: true });
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: true,
+    });
+  });
+
+  it('renders the title', () => {
+    renderComponent();
+
+    expect(screen.getByRole('heading', { name: defaultProps.title })).toBeInTheDocument();
+  });
+
+  it('does not render the back button when onBackBtnClick is not provided', () => {
+    renderComponent();
+
+    expect(screen.queryByRole('button', { name: messages.backBtnText.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('renders the back button and calls onBackBtnClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onBackBtnClick = jest.fn();
+    renderComponent({ onBackBtnClick });
+
+    const backBtn = screen.getByRole('button', { name: messages.backBtnText.defaultMessage });
+    expect(backBtn).toBeInTheDocument();
+    await user.click(backBtn);
+    expect(onBackBtnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the menu when the user can edit course content and menuProps are provided', async () => {
+    renderComponent({ menuProps });
+
+    // The menu is gated behind `canEditCourseContent`, which is only known once the (async)
+    // permissions query resolves, so wait for it rather than querying synchronously.
+    expect(
+      await screen.findByRole('button', { name: messages.itemMenuAlt.defaultMessage }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render the menu when the user cannot edit course content', async () => {
+    validateUserPermissionsMock.mockResolvedValue({
+      canEditCourseContent: false,
+    });
+    renderComponent({ menuProps });
+
+    // The title always renders; wait for the permissions query to settle, then confirm the
+    // gated menu never appears.
+    expect(screen.getByRole('heading', { name: defaultProps.title })).toBeInTheDocument();
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.itemMenuAlt.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('does not render the menu when menuProps are not provided', async () => {
+    renderComponent();
+
+    await waitFor(() => expect(validateUserPermissionsMock).toHaveBeenCalled());
+    expect(screen.queryByRole('button', { name: messages.itemMenuAlt.defaultMessage })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx
index 16c0ca4233..68bb2f3a87 100644
--- a/src/generic/sidebar/SidebarTitle.tsx
+++ b/src/generic/sidebar/SidebarTitle.tsx
@@ -3,6 +3,7 @@ import { Icon, IconButton, Stack } from '@openedx/paragon';
 import { ArrowBack } from '@openedx/paragon/icons';
 import messages from './messages';
 import { InfoSidebarMenu, InfoSidebarMenuProps } from './InfoSidebarMenu';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface SidebarTitleProps {
   /** Title of the section */
@@ -29,6 +30,7 @@ export const SidebarTitle = ({
   menuProps,
 }: SidebarTitleProps) => {
   const intl = useIntl();
+  const { canEditCourseContent } = useCourseAuthoringContext();
   return (
     <>
       <div className="d-flex justify-content-between">
@@ -44,7 +46,7 @@ export const SidebarTitle = ({
           <Icon src={icon} className="mr-2 text-primary" />
           <h2 className="text-primary h3 mb-0">{title}</h2>
         </Stack>
-        {menuProps && <InfoSidebarMenu {...menuProps} />}
+        {canEditCourseContent && menuProps && <InfoSidebarMenu {...menuProps} />}
       </div>
       <hr className="border" style={{ marginLeft: '-1rem', marginRight: '-1rem' }} />
     </>

From 31b21c288ed423e78b305f154215129afcadb171 Mon Sep 17 00:00:00 2001
From: jacobo-dominguez-wgu <jacobo.dominguez@wgu.edu>
Date: Thu, 3 Sep 2026 15:04:26 -0600
Subject: [PATCH 2/3] fix: unit footer overflow issue

---
 src/course-outline/OutlineNode.tsx  | 7 ++++++-
 src/course-outline/outline-level.ts | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/course-outline/OutlineNode.tsx b/src/course-outline/OutlineNode.tsx
index 625233e705..934b0cdf0a 100644
--- a/src/course-outline/OutlineNode.tsx
+++ b/src/course-outline/OutlineNode.tsx
@@ -347,7 +347,12 @@ const OutlineNode = ({
                 readyToSync={blk.upstreamInfo?.readyToSync}
               />
               <div
-                className={levelConfig.contentClass}
+                className={classNames(levelConfig.contentClass, {
+                  // `item-children` pulls the content 2.75rem to the right so it spans
+                  // under the drag handle column. Without the handle there is no column
+                  // to fill, and the negative margin would overflow the card.
+                  'item-children': isDraggable,
+                })}
                 data-testid={levelConfig.contentTestId}
                 onClick={(e) => onClickCard(e, false)}
               >
diff --git a/src/course-outline/outline-level.ts b/src/course-outline/outline-level.ts
index aea3ad9e0a..15ae1587fc 100644
--- a/src/course-outline/outline-level.ts
+++ b/src/course-outline/outline-level.ts
@@ -89,7 +89,7 @@ export const LEVEL_CONFIG: Record<Depth, LevelConfig> = {
   },
   1: {
     name: 'subsection',
-    contentClass: 'subsection-card__content item-children',
+    contentClass: 'subsection-card__content',
     contentTestId: 'subsection-card__content',
     childContainerClass: 'subsection-card__units',
     childContainerTestId: 'subsection-card__units',
@@ -99,7 +99,7 @@ export const LEVEL_CONFIG: Record<Depth, LevelConfig> = {
   },
   2: {
     name: 'unit',
-    contentClass: 'unit-card__content item-children',
+    contentClass: 'unit-card__content',
     contentTestId: 'unit-card__content',
     iconSize: 'xs',
     background: { background: '#fdfdfd' },

From e0a39300bf750fe9e436877e7b02597e1280c19b Mon Sep 17 00:00:00 2001
From: jacobo-dominguez-wgu <jacobo.dominguez@wgu.edu>
Date: Tue, 8 Sep 2026 15:23:30 -0600
Subject: [PATCH 3/3] feat: adding permission check on publish button

---
 .../info-sidebar/PublishButon.test.tsx        | 56 +++++++++++++++++++
 .../info-sidebar/PublishButon.tsx             | 35 +++++++-----
 2 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx

diff --git a/src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx
new file mode 100644
index 0000000000..d9f81857a8
--- /dev/null
+++ b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.test.tsx
@@ -0,0 +1,56 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+} from '@src/testUtils';
+
+import messages from '../messages';
+import { PublishButon } from './PublishButon';
+
+const mockCourseAuthoringContext = {
+  canPublishCourseContent: true,
+};
+
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => mockCourseAuthoringContext,
+}));
+
+const onClickMock = jest.fn();
+
+// The button's accessible name is the publish label plus the draft status,
+// e.g. "Publish Changes (Draft)".
+const publishButtonName = new RegExp(messages.publishContainerButton.defaultMessage, 'i');
+
+describe('<PublishButon />', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockCourseAuthoringContext.canPublishCourseContent = true;
+    onClickMock.mockClear();
+  });
+
+  it('renders the publish button when the user can publish course content', async () => {
+    render(<PublishButon onClick={onClickMock} />);
+
+    expect(
+      await screen.findByRole('button', { name: publishButtonName }),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onClick when the button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<PublishButon onClick={onClickMock} />);
+
+    await user.click(await screen.findByRole('button', { name: publishButtonName }));
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render the button when the user cannot publish course content', () => {
+    mockCourseAuthoringContext.canPublishCourseContent = false;
+    render(<PublishButon onClick={onClickMock} />);
+
+    expect(
+      screen.queryByRole('button', { name: publishButtonName }),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
index c932a577d1..eaab37d8dc 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/PublishButon.tsx
@@ -1,22 +1,29 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import messages from '../messages';
 
 interface Props {
   onClick: () => void;
 }
 
-export const PublishButon = ({ onClick }: Props) => (
-  <Button
-    variant="outline-primary w-100 rounded status-button draft-status"
-    className="m-1"
-    onClick={onClick}
-  >
-    <strong className="mr-1">
-      <FormattedMessage
-        {...messages.publishContainerButton}
-      />
-    </strong>
-    <FormattedMessage {...messages.draftText} />
-  </Button>
-);
+export const PublishButon = ({ onClick }: Props) => {
+  const { canPublishCourseContent } = useCourseAuthoringContext();
+
+  if (!canPublishCourseContent) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline-primary w-100 rounded status-button draft-status"
+      className="m-1"
+      onClick={onClick}
+    >
+      <strong className="mr-1">
+        <FormattedMessage {...messages.publishContainerButton} />
+      </strong>
+      <FormattedMessage {...messages.draftText} />
+    </Button>
+  );
+};