Program Page basic layout #2556

ChristopherChudzicki · 2025-09-30T20:12:35Z

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/8715

Description (What does it do?)

Adds program pages at /program/{readable_id}.

Screenshots (if appropriate):

Desktop:

Mobile:

How can this be tested?

Prerequisites:

I will assume you have integrated MITxOnline and Learn locally. If not, see directions in, e.g., redirect attach to org dashboard #2498 (comment)
- alternatively, mock API responses as described below. Even if you have MITxOnline integrated, mocking some API responses might be desirable.
Using local posthog, set up a feature flag named product-page-course.
Set up data as described below.

Setting up course data: To set up mock data:

programsList.queryFn in frontends/api/src/mitxonline/hooks/programs/queries.ts; e.g., use a response from https://api.learn.mit.edu/mitxonline/api/v2/programs/?readable_id=program-v1%3AMITx%2BDEDP
programPageDetail.queryFn in frontends/api/src/mitxonline/hooks/pages/queries.ts, e.g., use a response from https://api.learn.mit.edu/mitxonline/api/v2/pages/?fields=*&type=cms.ProgramPage&readable_id=program-v1%3AMITx%2BDEDP

To set up real local data:

Create a program with ./manage.py create_courseware; Use --help for details.
- ⚠️ : Some mitxonline functionality expets readable ids for programs start with program-
Create a corresponding courseware CMS page with ./manage.py create_courseware_page; use --help option for details.
Navigate to http://mitxonline.odl.local:8013/cms/ and find your programpage. Fill in relevant fields.
- You will need to create instructor pages, too.

Testing Steps:

Visit http://learn.odl.local:8062/programs/readable-id, where readable_id is like program-v1:MITx+DEDP.
- With feature flag ON, the page should be visible.
- With feature flag OFF, the page should be empty
- In all cases, the page should have a noindex tag.
Designs should roughly match those in https://github.com/mitodl/hq/issues/8414, though some things are not implemented as part of this PR:
- no courses carousels
- no summary card
- no enrollment dialog
Check the "About" section:
- If the about section includes multiple HTML elements, a "Show More" / "Show Less" button should appear.
- If it includes only one HTML element, no "Show More" / "Show less" button should appear.
Click instructors. That should open a dialog with details.
- Instructors section will not show if instructors list is empty

ChristopherChudzicki · 2025-09-30T20:35:04Z

frontends/ol-utilities/src/index.ts

@@ -1,5 +1,3 @@
-"use client"


Marking all of ol-utilities with "use client" means that none of it can be used in server components. In particular, DEFAULT_RESOURCE_IMG constant couldn't be used in server components.

jonkafton

An excellent addition to the site! I left some questions/observations.

jonkafton · 2025-10-01T17:32:20Z

frontends/main/src/app-pages/ProductPages/RawHTML.tsx

+    <Component
+      className={classnames("raw-html", className)}
+      data-testid="raw"
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }}


Not in this PR directly, but I notice the mitxonline API / Wagtail escapes html, including the list tags we're styling for.

<h2>Key Points</h2> <ul> <li>Ut enim ad minim veniam</li> <li>Quis nostrud exercitation ullamco laboris</li> <li><strong>Nisi ut aliquip ex ea commodo consequat</strong></li> </ul>

is sanitized/escaped to:

<p data-block-key="6pl3h"><h2>Key Points</h2></p><p data-block-key="cjts8"> <ul></p><p data-block-key="133r9"> <li>Ut enim ad minim veniam</li></p><p data-block-key="9163i"> <li>Quis nostrud exercitation ullamco laboris</li></p><p data-block-key="4pdjt"> <li><strong>Nisi ut aliquip ex ea commodo consequat</strong></li></p><p data-block-key="bn25k"> </ul></p>

and rendered:

You should be able to use the editor's rich text menu / markdown-like shortcuts to produce HTML lists, links, bold, etc (probably more styles than we want to allow, frankly):

If you paste HTML characters in directly, I'd expect what you showed. It's a WYSIWYG editor

jonkafton · 2025-10-01T17:38:59Z

frontends/main/src/app-pages/ProductPages/ProductSummary.tsx

This file now deserving of a rename, ProductSummary.tsx?

jonkafton · 2025-10-01T17:58:15Z

frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx

+      <BottomContainer>
+        <SidebarCol>
+          <SidebarImageWrapper>
+            <SidebarImage width={410} height={230} src={imageSrc} alt="" />


Observation that locally this image (page.program_details.page.feature_image_src) does not load. We get a URL for the Learn backend on the programs list API:

http://open.odl.local:8065/media/original_images/IMG_20250928_135213707.jpg

The image loads correctly from:

http://mitxonline.odl.local:8065/media/original_images/IMG_20250928_135213707.jpg

I'm not sure if this is an issue with my local environment setup / API gateway routing or if it's something we need to handle.

Same issue for the instructor image from the programs detail, items[0].faculty[0].feature_image_src.

I think this should be fixed on a more recent version of mitxonline (after mitodl/mitxonline#2946 + mitodl/mitxonline#2950). I shouldve mentioned to up-to-date main branch of that...should fix some potential permission issues, too.

jonkafton · 2025-10-01T18:02:18Z

frontends/api/src/mitxonline/hooks/pages/queries.ts

          .then((res) => res.data)
      },
    }),
+  programsDetail: (readableId: string) =>


Can we rename this programPageDetail to match the key. I had some moments of confusion as to why neighboring programsQueries.programDetail() was not being called. Same for courseDetail from previous.

I decided to change the keys and the queries to coursePages and programPages. They are listing endpoints, though we only use them to fetch 1 entry.

I considered originally trying to fake the detail endpoint and returning only a single object from the query, but decided to leave it as explicitly returning the list—I thought a proper detail endpoint should return 404 for missing objects, and trying to simulate a 404 with an AxiosError seemed like too much shenanigans.

So, since they are listings, coursePages and programPages seemed more accurate

pdpinch · 2025-10-02T11:59:17Z

Just confirming: this is a product page for a program, suitable as a landing page for marketing campaigns? Can you give me an example of the route?

ChristopherChudzicki · 2025-10-02T14:18:25Z

@pdpinch

Just confirming: this is a product page for a program, suitable as a landing page for marketing campaigns? Can you give me an example of the route?

Yep (once it's done).

Example routes:

# For programs
https://learn.mit.edu/programs/program-v1:MITx+DEDP/
https://learn.mit.edu/programs/program-v1:MITxT+18.01x/
# For courses (previous PR)
https://learn.mit.edu/courses/course-v1:MITxT+10.50.CH04x

jonkafton

👍

ChristopherChudzicki commented Sep 30, 2025

View reviewed changes

ChristopherChudzicki changed the title ~~Cc/program page~~ Program Page basic layout Sep 30, 2025

ChristopherChudzicki added the Needs Review An open Pull Request that is ready for review label Sep 30, 2025

jonkafton reviewed Oct 1, 2025

View reviewed changes

ChristopherChudzicki added 7 commits October 3, 2025 10:50

extremely minimal program page

54a93e2

reorganize productpage dir

cbebdf2

set default images

1f97979

restore who-can-take copy

6e0025f

cover whole page

8909b78

slightly larger gap

aca56ae

rename courseDetail and programsDetail queries/keys

e29d758

ChristopherChudzicki force-pushed the cc/program-page branch from d43abb5 to e29d758 Compare October 3, 2025 14:50

jonkafton approved these changes Oct 3, 2025

View reviewed changes

ChristopherChudzicki merged commit f824eec into main Oct 3, 2025
13 checks passed

ChristopherChudzicki deleted the cc/program-page branch October 3, 2025 15:36

This was referenced Oct 7, 2025

Release 0.45.5 #2572

Closed

Release 0.45.5 #2573

Closed

Release 0.45.6 #2582

Closed

Release 0.45.7 #2583

Merged

Program Page basic layout #2556

Program Page basic layout #2556

Uh oh!

Conversation

ChristopherChudzicki commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Uh oh!

ChristopherChudzicki Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

jonkafton left a comment

Choose a reason for hiding this comment

Uh oh!

jonkafton Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonkafton Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

jonkafton Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

jonkafton Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pdpinch commented Oct 2, 2025

Uh oh!

ChristopherChudzicki commented Oct 2, 2025

Uh oh!

jonkafton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ChristopherChudzicki commented Sep 30, 2025 •

edited

Loading

ChristopherChudzicki Oct 2, 2025 •

edited

Loading

ChristopherChudzicki Oct 2, 2025 •

edited

Loading