feat: course outline sidebar #2731

rpenido · 2025-12-04T20:22:50Z

Description

This PR implements the new sidebar design for the Course Outline.

Which user roles will this change impact?
"Course Author" and "Developer"

Supporting information

Related to Course Outline: Info Sidebar & Navbar - Basics #2623

Testing instructions

Make sure that the ENABLE_COURSE_OUTLINE_NEW_DESIGN flag is enabled
Open the Course Outline
Check that the new sidebar is shown, with the Info page as default
Change the page using the sidebar icons
Change the page using the dropdown menu in the sidebar
Change the page using the dropdown button in the header
Set ENABLE_COURSE_OUTLINE_NEW_DESIGN flag to False and check if the old Help Sidebar is shown

Best Practices Checklist

We're trying to move away from some deprecated patterns in this codebase. Please
check if your PR meets these recommendations before asking for a review:

Any new files are using TypeScript (.ts, .tsx).
Avoid propTypes and defaultProps in any new or modified code.
Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
All new i18n messages in messages.ts files have a description for translators to use.
Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

Private ref: FAL-4291

openedx-webhooks · 2025-12-04T20:22:55Z

Thanks for the pull request, @rpenido!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2025-12-18T01:48:14Z

Codecov Report

❌ Patch coverage is 99.04306% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.96%. Comparing base (c2592a7) to head (c607da0).
⚠️ Report is 9 commits behind head on master.

Files with missing lines	Patch %	Lines
src/content-tags-drawer/data/api.ts	97.87%	1 Missing ⚠️
src/generic/sidebar/SidebarContent.tsx	87.50%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2731      +/-   ##
==========================================
+ Coverage   94.92%   94.96%   +0.03%     
==========================================
  Files        1239     1251      +12     
  Lines       28452    28691     +239     
  Branches     6481     6542      +61     
==========================================
+ Hits        27009    27246     +237     
- Misses       1372     1374       +2     
  Partials       71       71

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Co-authored-by: Navin Karkera <navin@opencraft.com>

src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx

…d-navbar

ChrisChV

Looks good, by this #2622 (comment) some changes will likely be needed. I'll keep the pull requests open until I have those designs.

ChrisChV · 2025-12-22T19:59:38Z

src/course-outline/outline-sidebar/OutlineHelpSidebar.tsx

+  courseId: string;
+}
+
+const OutlineHelpSideBar = ({ courseId }: OutlineHelpSidebarProps) => {


@rpenido you can use:

const { courseId } = useCourseAuthoringContext();

instead of passing it into the props

Thanks @ChrisChV!
Fixed here: f970c84

ChrisChV · 2025-12-22T20:00:23Z

src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx

+
+import messages from './messages';
+
+export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {


Same, you can use:

const { courseId } = useCourseAuthoringContext();

instead of passing it into the props

Fixed here: f970c84

ChrisChV · 2025-12-22T20:02:33Z

src/course-outline/outline-sidebar/OutlineSidebar.tsx

+  courseId: string;
+}
+
+const OutlineSideBar = ({ courseId }: OutlineSideBarProps) => {


Same, you can use:

const { courseId } = useCourseAuthoringContext();

instead of passing it into the props

Fixed here: f970c84

ChrisChV · 2025-12-22T20:04:16Z

src/course-outline/outline-sidebar/messages.ts

+  sidebarButtonHelp: {
+    id: 'course-authoring.course-outline.sidebar.sidebar-button-help',
+    defaultMessage: 'Help',
+  },
+  sidebarButtonInfo: {
+    id: 'course-authoring.course-outline.sidebar.sidebar-button-info',
+    defaultMessage: 'Info',
+  },


It is necessary to add the descriptions here

Fixed here: f970c84

ChrisChV · 2025-12-22T20:12:49Z

src/generic/sidebar/SidebarContent.tsx

+import { Stack } from '@openedx/paragon';
+
+interface SidebarContentProps {
+  children: React.ReactNode[];


@rpenido This needs to be updated to accept content from a single SidebarSection

Fixed here: f970c84

ChrisChV

The code looks good! 👍

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Dec 4, 2025

openedx-webhooks added this to Contributions Dec 4, 2025

github-project-automation bot moved this to Needs Triage in Contributions Dec 4, 2025

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch from 3f73530 to 3813afd Compare December 10, 2025 20:51

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Dec 11, 2025

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch 10 times, most recently from 8e36e8a to b9d3ab5 Compare December 18, 2025 01:36

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch 3 times, most recently from d33b151 to 9ebe024 Compare December 18, 2025 03:28

rpenido changed the title ~~feat: wip~~ feat: course outline sidebar Dec 18, 2025

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch 7 times, most recently from 71fe4af to 7a844c0 Compare December 18, 2025 05:57

feat: course outline sidebar

9fe1b28

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch from 7a844c0 to 9fe1b28 Compare December 18, 2025 06:05

rpenido and others added 3 commits December 19, 2025 17:59

fix: sidebar width

dede130

fix: dropdown alignment

b714549

Co-authored-by: Navin Karkera <navin@opencraft.com>

fix: item size

f459b92

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch from 5d9da91 to 874e90e Compare December 19, 2025 21:52

navinkarkera suggested changes Dec 22, 2025

View reviewed changes

src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx Show resolved Hide resolved

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch from 874e90e to 98c2e51 Compare December 22, 2025 12:00

fix: change order and style buttons

8531fea

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch 6 times, most recently from 000c4f1 to 0e5468a Compare December 22, 2025 14:26

rpenido added 4 commits December 22, 2025 11:27

fix: hardcoded course name

d9c08b9

feat: add manage tags action

c47dafa

Merge branch 'master' into rpenido/fal-4291/course-outline-sidebar-an…

f36dc74

…d-navbar

revert: package-lock.json

32fd819

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch from 0e5468a to 32fd819 Compare December 22, 2025 14:27

rpenido requested a review from ChrisChV December 22, 2025 17:49

ChrisChV requested changes Dec 22, 2025

View reviewed changes

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch 2 times, most recently from e24ee8c to f970c84 Compare December 22, 2025 22:21

fix: fixes from review

c607da0

rpenido force-pushed the rpenido/fal-4291/course-outline-sidebar-and-navbar branch from f970c84 to c607da0 Compare December 22, 2025 22:51

ChrisChV approved these changes Dec 22, 2025

View reviewed changes

navinkarkera mentioned this pull request Dec 30, 2025

feat: Add Sidebar for course outline [FC-0114] #2775

Closed

7 tasks

ChrisChV approved these changes Jan 6, 2026

View reviewed changes

ChrisChV merged commit 2209242 into openedx:master Jan 6, 2026
7 checks passed

github-project-automation bot moved this from Waiting on Author to Done in Contributions Jan 6, 2026

bradenmacdonald deleted the rpenido/fal-4291/course-outline-sidebar-and-navbar branch January 9, 2026 19:03


		import messages from './messages';

		export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {

feat: course outline sidebar #2731

feat: course outline sidebar #2731

Uh oh!

Conversation

rpenido commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Supporting information

Testing instructions

Best Practices Checklist

Uh oh!

openedx-webhooks commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

ChrisChV left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChrisChV left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rpenido commented Dec 4, 2025 •

edited

Loading

openedx-webhooks commented Dec 4, 2025 •

edited

Loading

codecov bot commented Dec 18, 2025 •

edited

Loading