Release 0.65.2

.pre-commit-config.yaml

@@ -53,7 +53,7 @@ repos:
         pass_filenames: false
         always_run: true
   - repo: https://github.com/scop/pre-commit-shfmt
-    rev: v3.12.0-2
+    rev: v3.13.1-1
     hooks:
       - id: shfmt
   - repo: https://github.com/adrienverge/yamllint.git
@@ -90,7 +90,7 @@ repos:
           - "config/keycloak/realms/ol-local-realm.json"
         additional_dependencies: ["gibberish-detector"]
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: "v0.15.1"
+    rev: "v0.15.12"
     hooks:
       - id: ruff-format
       - id: ruff

RELEASE.rst

@@ -1,6 +1,19 @@
 Release Notes
 =============
 
+Version 0.65.2
+--------------
+
+- feat: implement the video series page design (#3258)
+- fix: improvements in podcast player and removal of video player from drawer  (#3241)
+- Add support for dynamically displaying the How You'll Learn cards (#3198)
+- MITxOnline program published status should consider include_in_learn_catalog (#3250)
+- do not promote ocw page contentfiles to resources (#3261)
+- dashboard b2c series certificate display (#3256)
+- flaky test test_learning_resources_serializer (#3252)
+- [pre-commit.ci] pre-commit autoupdate (#2973)
+- Update dependency sharp to v0.34.5 (#2707)
+
 Version 0.65.0 (Released April 28, 2026)
 --------------
 

frontends/api/package.json

@@ -29,7 +29,7 @@
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@mitodl/mitxonline-api-axios": "^2026.3.26",
+    "@mitodl/mitxonline-api-axios": "^2026.4.23",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.12.2",
     "tiny-invariant": "^1.3.3"

frontends/api/src/mitxonline/test-utils/factories/enrollment.ts

@@ -88,7 +88,11 @@ const programEnrollmentV3: PartialFactory<V3UserProgramEnrollment> = (
           link: `/certificate/program/${faker.string.uuid()}/`,
         }
       : null,
-    enrollment_mode: faker.helpers.arrayElement(["audit", "verified", null]),
+    enrollment_mode: faker.helpers.arrayElement([
+      "audit",
+      "verified",
+      undefined,
+    ]),
     program: program,
   }
   return mergeOverrides<V3UserProgramEnrollment>(defaults, overrides)

frontends/api/src/mitxonline/test-utils/factories/orders.ts

@@ -13,6 +13,7 @@ const transactionLine = (
   total_paid: faker.commerce.price({ min: 50, max: 500 }),
   discount: "0.00",
   price: faker.commerce.price({ min: 50, max: 500 }),
+  content_type: "",
   ...overrides,
 })
 

frontends/api/src/mitxonline/test-utils/factories/pages.ts

@@ -164,6 +164,32 @@ const coursePageItem: PartialFactory<CoursePageItem> = (override) => {
     ],
     video_url: faker.internet.url(),
     what_you_learn: makeHTMLList(5),
+    how_youll_learn: [
+      {
+        key: "learn_by_doing",
+        icon: "IconComputerBulb",
+        title: "Learn by doing",
+        text: "Apply what you learn with interactive exercises, projects, and real-world case studies.",
+      },
+      {
+        key: "realworld_learning",
+        icon: "IconConnectedPeople",
+        title: "Real-world learning",
+        text: "Engage with real-world scenarios and examples to understand how concepts apply in practice.",
+      },
+      {
+        key: "learn_from_others",
+        icon: "IconConnectedPeople",
+        title: "Learn from others",
+        text: "Collaborate with peers and learn from their perspectives through group projects and discussions.",
+      },
+      {
+        key: "learn_on_demand",
+        icon: "IconComputerBulb",
+        title: "Learn on demand",
+        text: "Access course materials anytime, anywhere, and learn at your own pace.",
+      },
+    ],
   }
   return mergeOverrides<CoursePageItem>(defaults, override)
 }
@@ -215,6 +241,32 @@ const programPageItem: PartialFactory<ProgramPageItem> = (override) => {
     faq_url: faker.internet.url(),
     about: makeHTMLParagraph(3),
     what_you_learn: makeHTMLList(5),
+    how_youll_learn: [
+      {
+        key: "learn_by_doing",
+        icon: "IconComputerBulb",
+        title: "Learn by doing",
+        text: "Apply what you learn with interactive exercises, projects, and real-world case studies.",
+      },
+      {
+        key: "realworld_learning",
+        icon: "IconConnectedPeople",
+        title: "Real-world learning",
+        text: "Engage with real-world scenarios and examples to understand how concepts apply in practice.",
+      },
+      {
+        key: "learn_from_others",
+        icon: "IconConnectedPeople",
+        title: "Learn from others",
+        text: "Collaborate with peers and learn from their perspectives through group projects and discussions.",
+      },
+      {
+        key: "learn_on_demand",
+        icon: "IconComputerBulb",
+        title: "Learn on demand",
+        text: "Access course materials anytime, anywhere, and learn at your own pace.",
+      },
+    ],
     feature_image: featureImage(),
     video_url: faker.datatype.boolean() ? faker.internet.url() : null,
     faculty_section_title: "Meet your instructors",

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.27.16",
     "@mitodl/course-search-utils": "^3.5.2",
-    "@mitodl/mitxonline-api-axios": "^2026.3.26",
+    "@mitodl/mitxonline-api-axios": "^2026.4.23",
     "@mitodl/smoot-design": "^6.24.0",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",
@@ -63,7 +63,7 @@
     "react-hotkeys-hook": "^5.2.1",
     "react-markdown": "^10.0.0",
     "react-slick": "^0.31.0",
-    "sharp": "0.34.4",
+    "sharp": "0.34.5",
     "slick-carousel": "^1.8.1",
     "tiny-invariant": "^1.3.3",
     "video.js": "^8.23.7",

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx

@@ -157,7 +157,7 @@ describe("UnenrollProgramDialog", () => {
 
     const programEnrollment =
       mitxonline.factories.enrollment.programEnrollmentV3({
-        enrollment_mode: enrollmentMode,
+        enrollment_mode: enrollmentMode ? enrollmentMode : undefined,
         program: { display_mode: displayMode } as never,
       })
 

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx

@@ -2291,5 +2291,103 @@ describe("EnrollmentDisplay", () => {
       expect(cards[1]).toHaveTextContent(courseA.title)
       expect(cards[2]).toHaveTextContent(courseB.title)
     })
+
+    test("displays certificate button when program enrollment has a certificate", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const certUuid = "test-program-cert-uuid"
+      const program = mitxonline.factories.programs.program({
+        id: 456,
+        title: "Program With Certificate",
+        courses: [10, 11],
+      })
+      const programEnrollment =
+        mitxonline.factories.enrollment.programEnrollmentV3({
+          program: {
+            id: program.id,
+            title: program.title,
+            live: program.live,
+            program_type: program.program_type,
+            readable_id: program.readable_id,
+          },
+          certificate: {
+            uuid: certUuid,
+            link: `/certificate/program/${certUuid}/`,
+          },
+        })
+      const courses = mitxonline.factories.courses.courses({ count: 2 })
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV3(),
+        [programEnrollment],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(456), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({
+          id: program.courses,
+          page_size: program.courses.length,
+        }),
+        courses,
+      )
+
+      renderWithProviders(<EnrollmentDisplay programId={456} />)
+
+      await screen.findByText("Program With Certificate")
+      const certButton = screen.getByRole("link", { name: "Certificate" })
+      const expectedCertHref = programEnrollment.certificate?.link?.replace(
+        /\/$/,
+        "",
+      )
+      expect(certButton).toBeInTheDocument()
+      expect(certButton).toHaveAttribute("href", expectedCertHref)
+      expect(certButton).not.toHaveAttribute("target")
+    })
+
+    test("does not display certificate button when program enrollment has no certificate", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 457,
+        title: "Program Without Certificate",
+        courses: [12, 13],
+      })
+      const programEnrollment =
+        mitxonline.factories.enrollment.programEnrollmentV3({
+          program: {
+            id: program.id,
+            title: program.title,
+            live: program.live,
+            program_type: program.program_type,
+            readable_id: program.readable_id,
+          },
+          certificate: null,
+        })
+      const courses = mitxonline.factories.courses.courses({ count: 2 })
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV3(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV3(),
+        [programEnrollment],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(457), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({
+          id: program.courses,
+          page_size: program.courses.length,
+        }),
+        courses,
+      )
+
+      renderWithProviders(<EnrollmentDisplay programId={457} />)
+
+      await screen.findByText("Program Without Certificate")
+      const certButton = screen.queryByRole("link", { name: "Certificate" })
+      expect(certButton).not.toBeInTheDocument()
+    })
   })
 })

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx

@@ -13,7 +13,7 @@
   styled,
   theme,
 } from "ol-components"
-import { Alert } from "@mitodl/smoot-design"
+import { Alert, ButtonLink } from "@mitodl/smoot-design"
 import { keepPreviousData, useQuery } from "@tanstack/react-query"
 import {
   EnrollmentStatus,
@@ -43,6 +43,7 @@
 import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
 import { ProgramAsCourseCard } from "./ProgramAsCourseCard"
 import { getIdsFromReqTree } from "@/common/mitxonline"
+import { RiAwardFill } from "@remixicon/react"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -107,6 +108,11 @@
   },
 }))
 
+export const ProgramCertificateButton = styled(ButtonLink)(({ theme }) => ({
+  color: theme.custom.colors.red,
+  width: "120px",
+}))
+
 const alphabeticalSort = (a: CourseRunEnrollmentV3, b: CourseRunEnrollmentV3) =>
   a.run.course.title.localeCompare(b.run.course.title)
 
@@ -417,7 +423,7 @@
       enabled: Boolean(enrolledInProgram && requiredProgramIds.length > 0),
     })
 
   const requiredProgramList = requiredPrograms?.results ?? []
 
   const programAsCourseCourseIds = React.useMemo(() => {
     const uniqueIds = new Set<number>()
@@ -550,6 +556,8 @@
       programEnrollmentsById,
     )
 
+  const programCertificateUrl = programEnrollment?.certificate?.link ?? null
+
   if (isLoading) {
     return (
       <Stack direction="column">
@@ -578,14 +586,26 @@
         <Typography component="h1" variant="h3" paddingBottom="32px">
           {program?.title}
         </Typography>
-        <Typography variant="body2">
-          You have completed
-          <Typography component="span" variant="subtitle2">
-            {" "}
-            {completedCount} of {totalCount} courses{" "}
+        <Stack direction="row" justifyContent="space-between">
+          <Typography variant="body2">
+            You have completed
+            <Typography component="span" variant="subtitle2">
+              {" "}
+              {completedCount} of {totalCount} courses{" "}
+            </Typography>
+            for this program.
           </Typography>
-          for this program.
-        </Typography>
+          {programCertificateUrl && (
+            <ProgramCertificateButton
+              variant="bordered"
+              size="small"
+              startIcon={<RiAwardFill />}
+              href={programCertificateUrl}
+            >
+              Certificate
+            </ProgramCertificateButton>
+          )}
+        </Stack>
       </Stack>
       {requirementSections.map((section, index) => {
         const { completed: sectionCompleted, total: sectionTotal } =