feat: [FC-86] Added Course About sidebar #38

PKulkoRaccoonGang · 2025-10-16T09:14:49Z

Dependent PRs:

feat: [FC-86] Added course overview and updated sidebar raccoongang/frontend-app-catalog#21

Note

Additional plugin slots and course overview content sections will be added in upcoming PRs.

Note

Created a DEPR: openedx/openedx-platform#37022 and a new PR in edx-platform for the prerequisites and ocw_links sections.

Description

This PR introduces a sidebar to the Course About page.

Useful information

Initial setup

Clone and install the tutor-mfe plugin from the draft PR that adds support for Catalog MFE.
Go to http://apps.local.openedx.io:1998/catalog/<course_id>/about

How Has This Been Tested?

Open catalog/courses/<course_id>/about Course About page
Ensure the content of the sidebar matches the legacy version
Try changing course information through the Schedule and details page

openedx-webhooks · 2025-10-16T09:14:54Z

Thanks for the pull request, @PKulkoRaccoonGang!

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

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-10-16T09:17:30Z

Codecov Report

❌ Patch coverage is 99.27007% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 98.57%. Comparing base (523b1bb) to head (6f3b11e).
⚠️ Report is 11 commits behind head on master.

Files with missing lines	Patch %	Lines
.../course-sidebar/sidebar-details/SidebarDetails.tsx	96.29%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master      #38      +/-   ##
==========================================
+ Coverage   98.15%   98.57%   +0.42%     
==========================================
  Files          73       89      +16     
  Lines         597      845     +248     
  Branches       79      136      +57     
==========================================
+ Hits          586      833     +247     
- Misses         11       12       +1

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

ihor-romaniuk · 2025-10-22T08:47:12Z

src/course-about/course-overview/index.tsx

@@ -0,0 +1,15 @@
+// TODO: Temporary placeholder for the course overview


[question] You are planning to replace this placeholder with dynamic code in the next pull requests, aren't you?

ihor-romaniuk · 2025-10-22T13:02:25Z

src/utils.ts

+ */
+export const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  const languagePreference = getCookie(getConfig().LANGUAGE_PREFERENCE_COOKIE_NAME);


[nit] Looks good overall, but I’d suggest normalizing the locale before using it in toLocaleDateString.
Short tags like en, uk, or ar can lead to inconsistent formatting across browsers.
Consider mapping them to full locale codes (e.g., en-US, uk-UA, ar-SA) for more predictable output.

I replaced this function with intl.formatDate

refactor: some refactoring refactor: some refactoring test: added tests refactor: added plugin slots refactor: changed page layout test: added some tests refactor: some refactoring refactor: corrected formatDate function

PKulkoRaccoonGang · 2025-10-22T15:02:56Z

src/course-about/course-intro/course-media/CourseMedia.scss

 .course-about-intro-wrapper {
  @media (--pgn-size-breakpoint-max-width-xl) {
    .row {
-      flex-direction: column-reverse;


[inform]: According to the new changes, we no longer need column-reverse, column is enough.

PKulkoRaccoonGang · 2025-10-22T15:26:10Z

src/course-about/course-sidebar/sidebar-details/SidebarDetails.tsx

+    return (
+      <Container className="p-3">
+        {/* eslint-disable-next-line react/no-danger */}
+        <div dangerouslySetInnerHTML={{ __html: courseAboutData.aboutSidebarHtml }} />


During testing, I noticed an issue that I’m not sure should be addressed within this MFE.

On the Schedule & Details page, when saving sidebar content, the following data is sent to the backend: about_sidebar_html: "<p>321</p>"

The sidebar on the legacy Course About page displays this as shown below (most likely because this field originally accepted plain text, and with the introduction of the WYSIWYG editor, the content is no longer rendered correctly):

In the new Catalog MFE, the Course About page renders the same content using dangerouslySetInnerHTML

The issue appears when there is no content in the WYSIWYG editor. In that case, the backend receives: about_sidebar_html: ""
However, the frontend still receives the following value for about_sidebar_html:

So technically, the field still contains data, even though there’s no actual content.

In upcoming PRs, new plugin-slots will be added for the Course About page.
I believe the functionality for adding sidebar content should exist exclusively through the plugin-slots. This would allow us to eventually remove both the use of dangerouslySetInnerHTML and the sidebar content editing functionality from the Schedule & Details page.

It might make sense to create a separate issue or DEPR to track this. Any thoughts about this?

PKulkoRaccoonGang · 2025-10-22T15:28:02Z

src/course-about/course-sidebar/sidebar-details/SidebarDetailsItem.tsx

+
+const SidebarDetailsItem = ({ icon, label, value }: SidebarDetailsItemProps) => (
+  <>
+    <Stack className="justify-content-between flex-wrap p-3" gap={2} direction="horizontal">


If there is a lot of content in the SidebarDetailsItem it will look like this:

brian-smith-tcril

Overall this is looking good!

In my local testing things worked quite well.

I left a few comments:

One about about a way to move away from using some custom styles
One with a question about Price
A couple about the social links slot

Looking forward to hearing your thoughts!

src/course-about/CourseAboutPage.tsx

src/course-about/course-intro/course-media/CourseMedia.scss

src/plugin-slots/CourseAboutSidebarCoursePriceSlot/index.tsx

src/plugin-slots/CourseAboutSidebarSocialSlot/index.tsx

src/plugin-slots/CourseAboutSidebarSocialSlot/README.md

brian-smith-tcril

Thank you so much for working through the review process with me!

This looks great!

PKulkoRaccoonGang self-assigned this Oct 16, 2025

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

openedx-webhooks added this to Contributions Oct 16, 2025

github-project-automation bot moved this to Needs Triage in Contributions Oct 16, 2025

PKulkoRaccoonGang mentioned this pull request Oct 16, 2025

feat: [FC-86] Added Course About sidebar raccoongang/frontend-app-catalog#20

Closed

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Oct 16, 2025

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Oct 16, 2025

PKulkoRaccoonGang force-pushed the Peter_Kulko/added-course-about-sidebar branch 2 times, most recently from 1c757fe to 053f10c Compare October 21, 2025 11:12

PKulkoRaccoonGang marked this pull request as ready for review October 21, 2025 11:55

PKulkoRaccoonGang requested a review from ihor-romaniuk October 21, 2025 13:47

ihor-romaniuk reviewed Oct 22, 2025

View reviewed changes

PKulkoRaccoonGang requested a review from ihor-romaniuk October 22, 2025 14:30

ihor-romaniuk approved these changes Oct 22, 2025

View reviewed changes

feat: [FC-86] Added Course About sidebar

7723355

refactor: some refactoring refactor: some refactoring test: added tests refactor: added plugin slots refactor: changed page layout test: added some tests refactor: some refactoring refactor: corrected formatDate function

PKulkoRaccoonGang force-pushed the Peter_Kulko/added-course-about-sidebar branch from 24c85c4 to 7723355 Compare October 22, 2025 14:57

PKulkoRaccoonGang commented Oct 22, 2025

View reviewed changes

PKulkoRaccoonGang requested a review from brian-smith-tcril October 22, 2025 15:33

PKulkoRaccoonGang mentioned this pull request Oct 27, 2025

feat: Prevent empty wrapper divs for about sections with no content openedx/openedx-platform#37551

Merged

mphilbrick211 moved this from Waiting on Author to Ready for Review in Contributions Oct 29, 2025

brian-smith-tcril reviewed Oct 31, 2025

View reviewed changes

refactor: after review

95640a3

PKulkoRaccoonGang force-pushed the Peter_Kulko/added-course-about-sidebar branch from a60b477 to 95640a3 Compare November 3, 2025 12:20

PKulkoRaccoonGang requested a review from ihor-romaniuk November 3, 2025 12:25

ihor-romaniuk approved these changes Nov 3, 2025

View reviewed changes

PKulkoRaccoonGang requested a review from brian-smith-tcril November 3, 2025 14:32

refactor: after review

6f3b11e

brian-smith-tcril approved these changes Nov 4, 2025

View reviewed changes

brian-smith-tcril merged commit 157da4d into openedx:master Nov 4, 2025
6 checks passed

github-project-automation bot moved this from Ready for Review to Done in Contributions Nov 4, 2025

		@@ -0,0 +1,15 @@
		// TODO: Temporary placeholder for the course overview

feat: [FC-86] Added Course About sidebar #38

feat: [FC-86] Added Course About sidebar #38

Uh oh!

Conversation

PKulkoRaccoonGang commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Useful information

Initial setup

How Has This Been Tested?

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

ihor-romaniuk Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

ihor-romaniuk Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

PKulkoRaccoonGang commented Oct 16, 2025 •

edited

Loading

openedx-webhooks commented Oct 16, 2025 •

edited

Loading

codecov bot commented Oct 16, 2025 •

edited

Loading