fix: sidebar not showing sections on pending courses

[wgu-jesse-stewart]

Fixes #1403

Description

When Course Schedule > Course start date is set to a future date or when Course Requirements > Prerequisite course is set the Course outline is now shown on the front-end.

Expected behavior:

Actual behavior:

Cause

isDisplaySequenceLevel is default to true when the page loads which prevents the UI from displaying the sectionsIds list. I don't believe this is the desired behavior because const sequenceIds = sections[selectedSection || activeSectionId]?.sequenceIds || [] will always be an empty array because selectedSection || activeSectionId are not set unless the course has been started.

if we set the default value for isDisplaySequenceLevel to false, then the sectionsIds will display as expected. However, we need to be sure to set setDisplaySequenceLevel() if sequenceIds are available. This will ensure users that have started the course are given the correct navigation items.

Test coverage did not change.

Demo and explanation of changes:
https://github.com/user-attachments/assets/8c54df49-3cef-4da7-a729-dd28941b8e40

[openedx-webhooks]

Thanks for the pull request, @wgu-jesse-stewart!

This repository is currently maintained by @openedx/committers-frontend-app-learning.

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:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

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]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.38%. Comparing base (73406fb) to head (710a67d).
Report is 9 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1679   +/-   ##
=======================================
  Coverage   90.38%   90.38%           
=======================================
  Files         341      341           
  Lines        5752     5754    +2     
  Branches     1345     1387   +42     
=======================================
+ Hits         5199     5201    +2     
+ Misses        536      534    -2     
- Partials       17       19    +2     

☔ 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.

[sarina]

Hi @wgu-jesse-stewart - I'm not a frontend engineer so I'm not the person to request for review.

Generally reviews can take a bit of time, and we're under pressure for the Teak cut next Thursday so people may be short on time right now.

[sarina]

Also could you add a test for this change so that future changes don't revert the fix?

[wgu-jesse-stewart]

Also could you add a test for this change so that future changes don't revert the fix?

I will look at the existing tests and see if they can be expanded. Right now we see 100% coverage, but we could possibly find a way to test for this specifically.

[wgu-jesse-stewart]

This is ready for review

[itsjeyd]

@wgu-jesse-stewart, thank you for this contribution! Since it's a user-facing change, it will need to go through product review as a first step.

Please have a look at the instructions from the bot to get that process started.

[wgu-jesse-stewart]

@wgu-jesse-stewart - I just had one follow-up question for you on this before I approve this on the product side - I sent you a slack, but so this is captured in the ticket. Could you let me know how this looks on the learner side if they're in a course with units locked behind a prerequisite? What does the nav look like for locked units? What does it look like for the learner when they try to navigate to a page that is locked behind incomplete pre-requisites? Once I have this info, I'll be ready to review/approve. Thanks!

Here is a demonstration of what a student sees when a course is locked. I did see some unexpected behavior unrelated to my changes that I outlined in this video.

Screen.Recording.2025-05-07.at.5.43.33.PM.mov

[crathbun428]

Thanks, @wgu-jesse-stewart ! This is helpful to see that this works as expected. And great that you were able to highlight an additional (separate) bug - we can capture this. I wanted to make sure that the learner continues to be barred from content within a course that is locked by prerequisite content:

Here is a link to the learner-facing doc about this functionality: here

Here is a link to the doc showing you how to set up this functionality for a course: here(the one nitpick I have with this documentation is that after step 5 of create a prerequisite subsection, you need to make sure all of your course sections are published in order to be able to configure the content that is locked behind the prerequisite (I've made a note to update this documentation).

I was able to capture a recording of how this works currently on our Teak testing sandbox - I'd expect this would be exactly how this functionality should work for your learner on the environment you currently have that has the fix on it. Can you confirm that is the case? If so, I can mark this bug fix as passing product review. The only thing we're going to update with the product proposal is the padlock icon (which I highlight in the video - I'll add this video to our product proposal now).

[wgu-jesse-stewart]

Thanks, @wgu-jesse-stewart ! This is helpful to see that this works as expected. And great that you were able to highlight an additional (separate) bug - we can capture this. I wanted to make sure that the learner continues to be barred from content within a course that is locked by prerequisite content:

Here is a link to the learner-facing doc about this functionality: here

Here is a link to the doc showing you how to set up this functionality for a course: here(the one nitpick I have with this documentation is that after step 5 of create a prerequisite subsection, you need to make sure all of your course sections are published in order to be able to configure the content that is locked behind the prerequisite (I've made a note to update this documentation).

I was able to capture a recording of how this works currently on our Teak testing sandbox - I'd expect this would be exactly how this functionality should work for your learner on the environment you currently have that has the fix on it. Can you confirm that is the case? If so, I can mark this bug fix as passing product review. The only thing we're going to update with the product proposal is the padlock icon (which I highlight in the video - I'll add this video to our product proposal now).

Thank you for finding this edge case which we had not previously tested. I'm happy to show that this PR fixes this unexpected sidebar behavior. During our testing we did find some unrelated issues that we are documenting and reporting as separate issues.

course-sidebar-issue-1403-pr-1679-locked-unit.mp4

[crathbun428]

Amazing. Thank you, @wgu-jesse-stewart ! This looks great and passes product review from my standpoint. Because you were able to update the lock icon, we can delete the product proposal to update this functionality.

[mariajgrimaldi]

Hi there! Thank you for fixing this :))

I'd be happy to review it, but I'm not familiar with this codebase, nor do I have merge rights. In any case, I could give it a go, test it locally, and validate that it's working correctly.

Can we also deploy this so that @crathbun428 or others can test it remotely? @arbrandes

FYI @e0d

[open-craft-grove]

Sandbox deployment failed 💥
Please check the settings and requirements.
Retry deployment by pushing a new commit or updating the requirements/settings in the pull request's description.
📜 Failure Logs
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[open-craft-grove]

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[crathbun428]

@wgu-jesse-stewart - when you have a moment, could you mark me as active, staff, superuser in the django admin of this sandbox? My account is: crathbun428, crathbun@axim.org

[wgu-jesse-stewart]

@wgu-jesse-stewart - when you have a moment, could you mark me as active, staff, superuser in the django admin of this sandbox? My account is: crathbun428, crathbun@axim.org

done! Sorry it took me a bit to find the admin.

[crathbun428]

@wgu-jesse-stewart - Thank you - this looks great to me!

[crathbun428]

LGTM!

[tonybusa]

@openedx/committers-frontend-app-learning this was approved by product if anyone has a chance to do a code review. Thanks!

[Copilot]

Pull Request Overview

This PR fixes the sidebar issue where sections on pending courses won't display by adjusting the logic that resolves the section id for obtaining the sequence IDs.

• Replaces the prior reliance on useModel for active section detection with a new "resolvedSectionId" computation.
• Updates sequenceIds and backButtonTitle extraction to use the newly computed identifier.
• Removes the now-unused useModel import.

Comments suppressed due to low confidence (2)

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx:37

• [nitpick] Consider renaming 'resolvedSectionId' to a more descriptive name like 'activeOrSelectedSectionId' to more clearly indicate its purpose.

const resolvedSectionId = selectedSection || Object.keys(sections).find((sectionId) => sections[sectionId].sequenceIds.includes(activeSequenceId));

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx:9

• The removal of the unused 'useModel' import appears correct; please ensure that none of the remaining code relies on it elsewhere.

import { useModel } from '@src/generic/model-store';

[brian-smith-tcril]

The code changes and detailed video explanation of this are wonderful! Thank you so much for your patience, I'm happy to land this!

[mariajgrimaldi]

@wgu-jesse-stewart: thank you so much again! Can you help us backporting this to the release/teak branch? Thank you!