Release 0.57.2

RELEASE.rst

@@ -1,6 +1,20 @@
 Release Notes
 =============
 
+Version 0.57.2
+--------------
+
+- fix: remove media max-width (#3045)
+- fix: change articles mobile design (#3037)
+- Fix webhook parameters (#3041)
+- chore: update mitxonline api with null default image changes (#3044)
+- Fix child assignment for mitxonline programs w/out courses (#3039)
+- fix: change the banner design (#3032)
+- Advertise parent programs on course product pages (#3029)
+- Make sure x-csrf headers are sent for AI response feedback requests (#3035)
+- handle null values coming back on feature_img_src from mitxonline (#3015)
+- Increase page size to 30 for contract programs (#3036)
+
 Version 0.57.0 (Released March 10, 2026)
 --------------
 

frontends/api/package.json

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

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

@@ -5,7 +5,7 @@ import type {
   ProgramCollectionsApiProgramCollectionsListRequest,
   ProgramsApiProgramsListV2Request,
   ProgramsApiProgramsRetrieveV2Request,
-  V2Program,
+  V2ProgramDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { programCollectionsApi, programsApi } from "../../clients"
 
@@ -30,7 +30,7 @@ const programsQueries = {
   programDetail: (opts: ProgramsApiProgramsRetrieveV2Request) =>
     queryOptions({
       queryKey: programsKeys.programDetail(opts),
-      queryFn: async (): Promise<V2Program> => {
+      queryFn: async (): Promise<V2ProgramDetail> => {
         return programsApi.programsRetrieveV2(opts).then((res) => res.data)
       },
     }),

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.5",
+    "@mitodl/mitxonline-api-axios": "^2026.3.12",
     "@mitodl/smoot-design": "^6.24.0",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",

frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx

@@ -140,6 +140,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         org_id: orgX.id,
         contract_id: contract.id,
+        page_size: 30,
       }),
       {
         results: [programA, programB],
@@ -288,6 +289,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         id: programIds,
         contract_id: orgX.contracts[0].id,
+        page_size: programIds.length,
       }),
       { results: [programB, programA] }, // Return in same order as requested
     )
@@ -366,6 +368,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         id: programIds,
         contract_id: orgX.contracts[0].id,
+        page_size: programIds.length,
       }),
       { results: [programA, programB] }, // API returns A first
     )
@@ -428,6 +431,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         id: [programA.id],
         contract_id: orgX.contracts[0].id,
+        page_size: 1,
       }),
       { results: [programA] },
     )
@@ -491,6 +495,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         id: programIds,
         contract_id: orgX.contracts[0].id,
+        page_size: programIds.length,
       }),
       { results: [programB, programA] },
     )
@@ -644,6 +649,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         id: programIds,
         contract_id: orgX.contracts[0].id,
+        page_size: programIds.length,
       }),
       { results: [programANoCourses, programB] },
     )
@@ -709,6 +715,7 @@ describe("ContractContent", () => {
       urls.programs.programsList({
         org_id: orgX.id,
         contract_id: orgX.contracts[0].id,
+        page_size: 30,
       }),
       {
         results: [programWithCertificate],

frontends/main/src/app-pages/DashboardPage/ContractContent.tsx

@@ -207,6 +207,7 @@ const useProgramCollectionCourses = (
     ...programsQueries.programsList({
       id: programIds,
       contract_id: contractId,
+      page_size: programIds.length,
     }),
     enabled: programIds.length > 0,
   })
@@ -465,7 +466,11 @@ const ContractContentInternal: React.FC<ContractContentInternalProps> = ({
     enrollmentQueries.programEnrollmentsList(),
   )
   const programsQuery = useQuery(
-    programsQueries.programsList({ org_id: orgId, contract_id: contract.id }),
+    programsQueries.programsList({
+      org_id: orgId,
+      contract_id: contract.id,
+      page_size: 30,
+    }),
   )
   const programCollectionsQuery = useQuery(
     programCollectionQueries.programCollectionsList({}),

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts

@@ -166,6 +166,7 @@ const setupProgramsAndCourses = () => {
     urls.programs.programsList({
       org_id: orgX.id,
       contract_id: contract.id,
+      page_size: 30,
     }),
     {
       results: [programA, programB],
@@ -314,6 +315,7 @@ function setupOrgDashboardMocks(
       mitxonline.urls.programs.programsList({
         org_id: org.id,
         contract_id: contracts[0].id,
+        page_size: 30,
       }),
       { results: programs },
     )

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

@@ -5,7 +5,7 @@ import {
   CourseRunV2,
   CourseWithCourseRunsSerializerV2,
 } from "@mitodl/mitxonline-api-axios/v2"
-import { Alert, Button } from "@mitodl/smoot-design"
+import { Alert, Button, ButtonProps } from "@mitodl/smoot-design"
 import CourseEnrollmentDialog from "@/page-components/EnrollmentDialogs/CourseEnrollmentDialog"
 import NiceModal from "@ebay/nice-modal-react"
 import { userQueries } from "api/hooks/user"
@@ -46,9 +46,13 @@ const getButtonText = (nextRun?: CourseRunV2, priceDisplay?: string) => {
 
 type CourseEnrollmentButtonProps = {
   course: CourseWithCourseRunsSerializerV2
+  variant?: ButtonProps["variant"]
+  className?: string
 }
 const CourseEnrollmentButton: React.FC<CourseEnrollmentButtonProps> = ({
   course,
+  variant = "primary",
+  className,
 }) => {
   const [anchor, setAnchor] = React.useState<null | HTMLButtonElement>(null)
   const me = useQuery(userQueries.me())
@@ -106,16 +110,17 @@ const CourseEnrollmentButton: React.FC<CourseEnrollmentButtonProps> = ({
 
   return (
     <>
-      <Stack width="100%" gap="12px">
+      <Stack gap="12px">
         <Button
+          className={className}
           disabled={
             !nextRun ||
             enrollmentType === "none" ||
             isPaidWithoutPrice ||
             isPending
           }
           onClick={handleClick}
-          variant="primary"
+          variant={variant}
           size="large"
           data-testid="course-enrollment-button"
           endIcon={

frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx

@@ -11,7 +11,6 @@ import {
 } from "api/test-utils"
 import { renderWithProviders, waitFor, screen, within } from "@/test-utils"
 import CoursePage from "./CoursePage"
-import { HeadingIds } from "./util"
 import { assertHeadings } from "ol-test-utilities"
 import { notFound } from "next/navigation"
 
@@ -97,7 +96,7 @@ describe("CoursePage", () => {
     await waitFor(() => {
       assertHeadings([
         { level: 1, name: page.title },
-        { level: 2, name: "Course summary" },
+        { level: 2, name: "Course Information" },
         { level: 2, name: "About this Course" },
         { level: 2, name: "What you'll learn" },
         { level: 2, name: "How you'll learn" },
@@ -109,34 +108,6 @@ describe("CoursePage", () => {
     })
   })
 
-  test("Page Navigation", async () => {
-    const course = makeCourse()
-    const page = makePage({ course_details: course })
-    setupApis({ course, page })
-    renderWithProviders(<CoursePage readableId={course.readable_id} />)
-
-    const nav = await screen.findByRole("navigation", {
-      name: "Course Details",
-    })
-    const links = within(nav).getAllByRole("link")
-
-    expect(links[0]).toHaveTextContent("About")
-    expect(links[0]).toHaveAttribute("href", `#${HeadingIds.About}`)
-    expect(document.getElementById(HeadingIds.About)).toBeVisible()
-    expect(links[1]).toHaveTextContent("What you'll learn")
-    expect(links[1]).toHaveAttribute("href", `#${HeadingIds.What}`)
-    expect(document.getElementById(HeadingIds.What)).toBeVisible()
-    expect(links[2]).toHaveTextContent("How you'll learn")
-    expect(links[2]).toHaveAttribute("href", `#${HeadingIds.How}`)
-    expect(document.getElementById(HeadingIds.How)).toBeVisible()
-    expect(links[3]).toHaveTextContent("Prerequisites")
-    expect(links[3]).toHaveAttribute("href", `#${HeadingIds.Prereqs}`)
-    expect(document.getElementById(HeadingIds.Prereqs)).toBeVisible()
-    expect(links[4]).toHaveTextContent("Instructors")
-    expect(links[4]).toHaveAttribute("href", `#${HeadingIds.Instructors}`)
-    expect(document.getElementById(HeadingIds.Instructors)).toBeVisible()
-  })
-
   // Collasping sections tested in AboutSection.test.tsx
   test("About section has expected content", async () => {
     const course = makeCourse()
@@ -192,14 +163,34 @@ describe("CoursePage", () => {
     expectRawContent(section, page.prerequisites)
   })
 
+  test("Renders program bundle upsell when course belongs to a program (content tested in ProgramBundleUpsell.test)", async () => {
+    const baseProgram = factories.programs.baseProgram()
+    const programDetail = factories.programs.program({
+      id: baseProgram.id,
+      readable_id: baseProgram.readable_id,
+      products: [factories.courses.product({ price: "500" })],
+    })
+    const course = makeCourse({ programs: [baseProgram] })
+    const page = makePage({ course_details: course })
+    setupApis({ course, page })
+    setMockResponse.get(urls.programs.programsList({ id: [baseProgram.id] }), {
+      results: [programDetail],
+    })
+    renderWithProviders(<CoursePage readableId={course.readable_id} />)
+
+    expect(
+      await screen.findByTestId("program-bundle-upsell"),
+    ).toBeInTheDocument()
+  })
+
   test("Renders an enrollment button", async () => {
     const course = makeCourse()
     const page = makePage({ course_details: course })
     setupApis({ course, page })
     renderWithProviders(<CoursePage readableId={course.readable_id} />)
 
     const buttons = await screen.findAllByTestId("course-enrollment-button")
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(buttons.length).toBeGreaterThan(0)
   })
 
   test("Shows a YouTube video in the sidebar when video_url is a YouTube URL", async () => {
@@ -232,6 +223,21 @@ describe("CoursePage", () => {
     expect(document.querySelector("img")).toBeInTheDocument()
   })
 
+  test("Uses DEFAULT_RESOURCE_IMG when feature_image_src is falsy", async () => {
+    const course = makeCourse({
+      page: { feature_image_src: "" },
+    })
+    const page = makePage({ course_details: course, video_url: null })
+    setupApis({ course, page })
+    const { view } = renderWithProviders(
+      <CoursePage readableId={course.readable_id} />,
+    )
+
+    await screen.findByRole("heading", { name: page.title })
+    const imgs = Array.from(view.container.querySelectorAll("img"))
+    expect(imgs.some((img) => img.src.includes("default_resource"))).toBe(true)
+  })
+
   test.each([
     { courses: [], pages: [makePage()] },
     { courses: [makeCourse()], pages: [] },