Release 0.25.0

RELEASE.rst

@@ -1,6 +1,22 @@
 Release Notes
 =============
 
+Version 0.25.0
+--------------
+
+- Fixes to address scim-form-keycloak weirdness (#1789)
+- Maintain API instructor order (#1783)
+- Fix DST issue (#1788)
+- Update Node.js to v22 (#1786)
+- Update dependency ruff to v0.7.2 (#1785)
+- Image and video optimizations (#1769)
+- Upgrade to Next.js v15 (#1776)
+- Fix issue with hero image causing horizontal scroll (#1777)
+- add new learning resource drawer layout (#1711)
+- Change frontend to use resource_prices field instead of prices field (#1737)
+- move facets first in tab order (#1751)
+- Card Accessibility Improvements (#1778)
+
 Version 0.24.1 (Released October 30, 2024)
 --------------
 

docker-compose.apps.yml

@@ -28,7 +28,7 @@ services:
     profiles:
       - frontend
     working_dir: /src
-    image: node:20.18
+    image: node:22.11
     entrypoint: ["/bin/sh", "-c"]
     command:
       - |

frontends/main/package.json

@@ -15,12 +15,12 @@
     "@mitodl/course-search-utils": "^3.3.1",
     "@next/bundle-analyzer": "^14.2.15",
     "@remixicon/react": "^4.2.0",
-    "@sentry/nextjs": "^8",
+    "@sentry/nextjs": "^8.36.0",
     "@tanstack/react-query": "^4.36.1",
     "api": "workspace:*",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",
-    "next": "^14.2.15",
+    "next": "^15.0.2",
     "ol-ckeditor": "0.0.0",
     "ol-components": "0.0.0",
     "ol-utilities": "0.0.0",
@@ -40,7 +40,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^20",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-slick": "^0.23.13",

frontends/main/src/app-pages/AboutPage/AboutPage.tsx

@@ -10,6 +10,7 @@ import {
 import * as urls from "@/common/urls"
 import React from "react"
 import domeImage from "@/public/mit-dome-2.jpg"
+import Image from "next/image"
 
 const WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER = "what-is-mit-learn"
 const NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER = "non-degree-learning"
@@ -81,13 +82,15 @@ const SubHeaderTextContainer = styled.div({
   alignSelf: "flex-start",
 })
 
-const SubHeaderImage = styled.img({
+const SubHeaderImageContainer = styled.div({
   flexGrow: 1,
   alignSelf: "stretch",
+  position: "relative",
+})
+
+const SubHeaderImage = styled(Image)({
   borderRadius: "8px",
-  backgroundSize: "cover",
-  backgroundPosition: "center",
-  backgroundImage: `url(${domeImage.src})`,
+  objectFit: "cover",
   [theme.breakpoints.down("md")]: {
     height: "300px",
   },
@@ -165,7 +168,13 @@ const AboutPage: React.FC = () => {
               <li>Continue your education at your own pace</li>
             </List>
           </SubHeaderTextContainer>
-          <SubHeaderImage />
+          <SubHeaderImageContainer>
+            <SubHeaderImage
+              src={domeImage}
+              alt="A view of the entablature of MIT's Great Dome"
+              fill
+            />
+          </SubHeaderImageContainer>
         </SubHeaderContainer>
         <BodySection>
           <HighlightContainer>

frontends/main/src/app-pages/ChannelPage/ChannelPage.test.tsx

@@ -316,8 +316,8 @@ describe.each(NON_UNIT_CHANNEL_TYPES)(
         assertHeadings([
           { level: 1, name: channel.title },
           { level: 2, name: `Search within ${channel.title}` },
-          { level: 3, name: "Filter" },
           { level: 3, name: "Search Results" },
+          { level: 3, name: "Filter" },
         ])
       })
     }, 10000)
@@ -379,7 +379,7 @@ describe("Channel Pages, Topic only", () => {
 })
 
 describe("Channel Pages, Unit only", () => {
-  it("Displays the channel title, banner, and avatar", async () => {
+  it("Displays the channel title, banner", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",
       channel_type: "unit",
@@ -388,9 +388,24 @@ describe("Channel Pages, Unit only", () => {
       url: `/c/${channel.channel_type}/${channel.name}`,
     })
 
-    const title = await screen.findByRole("heading", { name: channel.title })
-    getByImageSrc(title, `${window.origin}${channel.configuration.logo}`)
+    await screen.findByRole("heading", { name: channel.title })
   })
+
+  it("Displays the channel logo", async () => {
+    const { channel } = setupApis({
+      name: "ocw",
+      channel_type: "unit",
+    })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
+
+    const images = await screen.findAllByRole("img", {
+      name: "MIT OpenCourseWare",
+    })
+    expect(images[0]).toHaveAttribute("src", "/images/unit_logos/ocw.svg")
+  })
+
   it("Displays a featured carousel if the channel type is 'unit'", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",
@@ -436,8 +451,8 @@ describe("Channel Pages, Unit only", () => {
         { level: 2, name: "Featured Courses" },
         { level: 2, name: "What Learners Say" },
         { level: 2, name: `Search within ${channel.title}` },
-        { level: 3, name: "Filter" },
         { level: 3, name: "Search Results" },
+        { level: 3, name: "Filter" },
       ])
     })
   })

frontends/main/src/app-pages/ChannelPage/DefaultChannelTemplate.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { styled, Breadcrumbs, Banner } from "ol-components"
+import { backgroundSrcSetCSS } from "ol-utilities"
 import { SearchSubscriptionToggle } from "@/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelMenu from "@/components/ChannelMenu/ChannelMenu"
@@ -10,6 +11,7 @@ import {
   CHANNEL_TYPE_BREADCRUMB_TARGETS,
   ChannelControls,
 } from "./ChannelPageTemplate"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -57,6 +59,7 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
   const channel = useChannelDetail(String(channelType), String(name))
   const urlParams = new URLSearchParams(channel.data?.search_filter)
   const displayConfiguration = channel.data?.configuration
+
   return (
     <>
       <Banner
@@ -87,7 +90,10 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
         title={channel.data?.title}
         header={displayConfiguration?.heading}
         subHeader={displayConfiguration?.sub_heading}
-        backgroundUrl={displayConfiguration?.banner_background}
+        backgroundUrl={
+          displayConfiguration?.banner_background ??
+          backgroundSrcSetCSS(backgroundSteps)
+        }
         extraActions={
           <ChannelControlsContainer>
             <ChannelControls>

frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx

@@ -23,8 +23,9 @@ import {
   useLearningResourceTopic,
   useLearningResourceTopics,
 } from "api/hooks/learningResources"
-import { propsNotNil } from "ol-utilities"
+import { propsNotNil, backgroundSrcSetCSS } from "ol-utilities"
 import invariant from "tiny-invariant"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -222,6 +223,7 @@ const TopicChannelTemplateInternal: React.FC<
   ) : (
     <BreadcrumbsInternal current={channel.title} />
   )
+
   return (
     <>
       <Banner
@@ -249,7 +251,7 @@ const TopicChannelTemplateInternal: React.FC<
         extraHeader={<TopicChips topic={topic} />}
         backgroundUrl={
           displayConfiguration?.banner_background ??
-          "/images/backgrounds/background_steps.jpg"
+          backgroundSrcSetCSS(backgroundSteps)
         }
         extraActions={
           <ChannelControlsContainer>

frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx

@@ -8,15 +8,16 @@ import {
   BannerBackground,
   Typography,
   VisuallyHidden,
+  UnitLogo,
 } from "ol-components"
+import { OfferedByEnum, SourceTypeEnum } from "api"
 import { SearchSubscriptionToggle } from "@/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle"
 import { ChannelDetails } from "@/page-components/ChannelDetails/ChannelDetails"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelMenu from "@/components/ChannelMenu/ChannelMenu"
 import ResourceCarousel, {
   ResourceCarouselProps,
 } from "@/page-components/ResourceCarousel/ResourceCarousel"
-import { SourceTypeEnum } from "api"
 import { getSearchParamMap } from "@/common/utils"
 import { HOME as HOME_URL, UNITS as UNITS_URL } from "../../common/urls"
 import { ChannelTypeEnum } from "api/v0"
@@ -38,13 +39,13 @@ const FeaturedCoursesCarousel = styled(ResourceCarousel)(({ theme }) => ({
   },
 }))
 
-const UnitLogo = styled.img(({ theme }) => ({
+const UnitLogoInverted = styled(UnitLogo)(({ theme }) => ({
   filter: "saturate(0%) invert(100%)",
+  height: 50,
   maxWidth: "100%",
-  width: "auto",
-  height: "50px",
   [theme.breakpoints.down("md")]: {
-    height: "40px",
+    height: 40,
+    width: "auto",
   },
 }))
 
@@ -126,7 +127,10 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
               <ChannelHeader>
                 <VisuallyHidden>{channel.data?.title}</VisuallyHidden>
                 {channel.data ? (
-                  <UnitLogo alt="" src={displayConfiguration.logo} />
+                  <UnitLogoInverted
+                    unitCode={name as OfferedByEnum}
+                    height={50}
+                  />
                 ) : null}
               </ChannelHeader>
               <Stack gap={{ xs: "16px", lg: "32px" }}>

frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx

@@ -13,7 +13,7 @@ import {
   Banner,
   Breadcrumbs,
 } from "ol-components"
-import { pluralize } from "ol-utilities"
+import { pluralize, backgroundSrcSetCSS } from "ol-utilities"
 import type { LearningResourceSchool } from "api"
 import { useSchoolsList } from "api/hooks/learningResources"
 import {
@@ -27,7 +27,7 @@ import {
   RiTerminalBoxLine,
 } from "@remixicon/react"
 import { HOME } from "@/common/urls"
-
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 import { useChannelCounts } from "api/hooks/channels"
 
@@ -201,7 +201,6 @@ const DepartmentListingPage: React.FC = () => {
   return (
     <>
       <Banner
-        backgroundUrl="/images/backgrounds/background_steps.jpg"
         title="Browse by Academic Department"
         header="At MIT, academic departments span a wide range of disciplines, from science and engineering to humanities. Select a department below to explore all of its non-degree learning offerings."
         navText={
@@ -211,6 +210,7 @@ const DepartmentListingPage: React.FC = () => {
             current="Departments"
           />
         }
+        backgroundUrl={backgroundSrcSetCSS(backgroundSteps)}
       />
       <Container>
         <Grid container>

frontends/main/src/app-pages/HomePage/HomePage.test.tsx

@@ -57,15 +57,15 @@ const setupAPIs = () => {
       limit: 6,
       sortby: "-news_date",
     }),
-    {},
+    newsEvents.newsItems({ count: 0 }),
   )
   setMockResponse.get(
     urls.newsEvents.list({
       feed_type: ["events"],
       limit: 5,
       sortby: "event_date",
     }),
-    {},
+    newsEvents.eventItems({ count: 0 }),
   )
 
   setMockResponse.get(urls.topics.list({ is_toplevel: true }), {

frontends/main/src/app-pages/HomePage/HomePage.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { Suspense } from "react"
 import { Container, styled, theme } from "ol-components"
 import HeroSearch from "@/page-components/HeroSearch/HeroSearch"
 import BrowseTopicsSection from "./BrowseTopicsSection"
@@ -38,29 +38,39 @@ const MediaCarousel = styled(ResourceCarousel)(({ theme }) => ({
   },
 }))
 
+const StyledContainer = styled(Container)({
+  "@media (max-width: 1365px)": {
+    overflow: "hidden",
+  },
+})
+
 const HomePage: React.FC = () => {
   return (
     <>
       <LearningResourceDrawer />
       <FullWidthBackground>
-        <Container>
+        <StyledContainer>
           <HeroSearch />
           <section>
-            <FeaturedCoursesCarousel
-              titleComponent="h2"
-              title="Featured Courses"
-              config={carousels.FEATURED_RESOURCES_CAROUSEL}
-            />
+            <Suspense>
+              <FeaturedCoursesCarousel
+                titleComponent="h2"
+                title="Featured Courses"
+                config={carousels.FEATURED_RESOURCES_CAROUSEL}
+              />
+            </Suspense>
           </section>
-        </Container>
+        </StyledContainer>
       </FullWidthBackground>
       <PersonalizeSection />
       <Container component="section">
-        <MediaCarousel
-          titleComponent="h2"
-          title="Media"
-          config={carousels.MEDIA_CAROUSEL}
-        />
+        <Suspense>
+          <MediaCarousel
+            titleComponent="h2"
+            title="Media"
+            config={carousels.MEDIA_CAROUSEL}
+          />
+        </Suspense>
       </Container>
       <BrowseTopicsSection />
       <TestimonialsSection />