chore: update mitxonline api with null default image changes (#3044)

* upgrade api package

* remove some redundant comments

* set default instructor icon

* remove another redundant comment

* add a test for the default icon

Author: gumaerc

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/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/ProductPages/CoursePage.tsx

@@ -63,8 +63,6 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
     }
   }
 
-  // feature_image_src will be nullable in a future MITx Online API update
-  // (null means no image set). Fall back to our own default image.
   const imageSrc =
     page.course_details.page.feature_image_src || DEFAULT_RESOURCE_IMG
 

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

@@ -59,3 +59,18 @@ test("Changes active instructor content on portrait click", async () => {
 
   expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
 })
+
+test("Shows default icon when instructor has no image", async () => {
+  const instructors = [makeFaculty({ feature_image_src: null })]
+  renderWithProviders(<InstructorsSection instructors={instructors} />)
+
+  const section = await screen.findByRole("region", {
+    name: "Meet your instructors",
+  })
+  const button = within(section).getByRole("button", {
+    name: instructors[0].instructor_name,
+  })
+
+  expect(button.querySelector("img")).not.toBeInTheDocument()
+  expect(button.querySelector("svg")).toBeInTheDocument()
+})

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

@@ -9,6 +9,7 @@ import { CarouselV2 } from "ol-components/CarouselV2"
 import type { Faculty } from "@mitodl/mitxonline-api-axios/v2"
 import { HeadingIds } from "./util"
 import RawHTML from "./RawHTML"
+import { RiAccountCircleFill } from "@remixicon/react"
 
 const InstructorsSectionRoot = styled.section(({ theme }) => ({
   display: "flex",
@@ -56,6 +57,7 @@ const InstructorButton = styled.button(({ theme }) => ({
   flexDirection: "column",
   gap: "8px",
   alignItems: "center",
+  overflow: "hidden",
   width: "100%",
   border: 0,
   padding: 0,
@@ -87,6 +89,9 @@ const InstructorAvatar = styled.div(({ theme }) => ({
     boxShadow: `inset 0 0 0 2px ${theme.custom.colors.red}`,
   },
 }))
+const DefaultInstructorImage = styled(RiAccountCircleFill)(({ theme }) => ({
+  color: theme.custom.colors.silverGrayDark,
+}))
 const InstructorImage = styled(Image)({
   height: "84px",
   width: "84px",
@@ -182,12 +187,16 @@ const InstructorsSection: React.FC<{ instructors: Faculty[] }> = ({
                 onClick={() => setActiveInstructorId(instructor.id)}
               >
                 <InstructorAvatar>
-                  <InstructorImage
-                    width={84}
-                    height={84}
-                    src={instructor.feature_image_src || ""}
-                    alt=""
-                  />
+                  {instructor.feature_image_src ? (
+                    <InstructorImage
+                      width={84}
+                      height={84}
+                      src={instructor.feature_image_src}
+                      alt=""
+                    />
+                  ) : (
+                    <DefaultInstructorImage size={84} aria-hidden="true" />
+                  )}
                 </InstructorAvatar>
                 <InstructorName>{instructor.instructor_name}</InstructorName>
               </InstructorButton>

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

@@ -192,8 +192,6 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
     return null
   }
 
-  // feature_image_src will be nullable in a future MITx Online API update
-  // (null means no image set). Fall back to our own default image.
   const imageSrc =
     page.program_details.page.feature_image_src || DEFAULT_RESOURCE_IMG
 

frontends/main/src/app/(products)/courses/[readable_id]/page.tsx

@@ -26,8 +26,6 @@ export const generateMetadata = async (
     }
     const [course] = coursePages.items
 
-    // feature_image_src will be nullable in a future MITx Online API update
-    // (null means no image set). Fall back to our own default image.
     const image =
       course.course_details.page.feature_image_src || DEFAULT_RESOURCE_IMG
 

frontends/main/src/app/(products)/programs/[readable_id]/page.tsx

@@ -26,8 +26,6 @@ export const generateMetadata = async (
     }
     const [program] = programPages.items
 
-    // feature_image_src will be nullable in a future MITx Online API update
-    // (null means no image set). Fall back to our own default image.
     const image =
       program.program_details.page.feature_image_src || DEFAULT_RESOURCE_IMG