v2 learning resource drawer formats and location (#1826)

* add format info item * display location if format is in_person * add tests * also show location for hybrid courses
mitodl · Nov 15, 2024 · 7f2df1f · 7f2df1f
1 parent b95a184
commit 7f2df1f
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 2 deletions.
diff --git a/frontends/ol-components/src/components/LearningResourceCard/testUtils.ts b/frontends/ol-components/src/components/LearningResourceCard/testUtils.ts
@@ -261,6 +261,43 @@ const courses = {
       ],
     }),
   },
+  multipleFormats: makeResource({
+    resource_type: ResourceTypeEnum.Course,
+    location: "Earth",
+    delivery: [
+      {
+        code: DeliveryEnum.Online,
+        name: DeliveryEnumDescriptions.online,
+      },
+      {
+        code: DeliveryEnum.InPerson,
+        name: DeliveryEnumDescriptions.in_person,
+      },
+    ],
+    runs: [
+      factories.learningResources.run({
+        delivery: sameDataRun.delivery,
+        resource_prices: sameDataRun.resource_prices,
+        location: sameDataRun.location,
+      }),
+    ],
+  }),
+  singleFormat: makeResource({
+    resource_type: ResourceTypeEnum.Course,
+    delivery: [
+      {
+        code: DeliveryEnum.Online,
+        name: DeliveryEnumDescriptions.online,
+      },
+    ],
+    runs: [
+      factories.learningResources.run({
+        delivery: sameDataRun.delivery,
+        resource_prices: sameDataRun.resource_prices,
+        location: sameDataRun.location,
+      }),
+    ],
+  }),
 }
 
 const resourceArgType = {

diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx
@@ -165,14 +165,16 @@ describe("Learning resource info section start date", () => {
     })
   })
 
-  test("If data is different, dates and prices are not shown", () => {
+  test("If data is different then dates, formats, locations and prices are not shown", () => {
     const course = courses.multipleRuns.differentData
     render(<InfoSectionV2 resource={course} />, {
       wrapper: ThemeProvider,
     })
     const section = screen.getByTestId("drawer-info-items")
     expect(within(section).queryByText("Start Date:")).toBeNull()
     expect(within(section).queryByText("Price:")).toBeNull()
+    expect(within(section).queryByText("Format:")).toBeNull()
+    expect(within(section).queryByText("Location:")).toBeNull()
   })
 
   test("Clicking the show more button should show more dates", async () => {
@@ -189,3 +191,34 @@ describe("Learning resource info section start date", () => {
     expect(runDates.children.length).toBe(totalRuns + 1)
   })
 })
+
+describe("Learning resource info section format and location", () => {
+  test("Multiple formats", () => {
+    const course = courses.multipleFormats
+    render(<InfoSectionV2 resource={course} />, {
+      wrapper: ThemeProvider,
+    })
+
+    const section = screen.getByTestId("drawer-info-items")
+    within(section).getAllByText((_content, node) => {
+      // The pipe in this string is followed by a zero width space
+      return node?.textContent === "Format:Online|In person" || false
+    })
+    within(section).getAllByText((_content, node) => {
+      return node?.textContent === "Location:Earth" || false
+    })
+  })
+
+  test("Single format", () => {
+    const course = courses.singleFormat
+    render(<InfoSectionV2 resource={course} />, {
+      wrapper: ThemeProvider,
+    })
+
+    const section = screen.getByTestId("drawer-info-items")
+    within(section).getAllByText((_content, node) => {
+      return node?.textContent === "Format:Online" || false
+    })
+    expect(within(section).queryByText("In person")).toBeNull()
+  })
+})
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx
@@ -14,8 +14,10 @@ import {
   RiPresentationLine,
   RiAwardFill,
   RiAwardLine,
+  RiComputerLine,
+  RiMapPinLine,
 } from "@remixicon/react"
-import { LearningResource, ResourceTypeEnum } from "api"
+import { DeliveryEnum, LearningResource, ResourceTypeEnum } from "api"
 import {
   allRunsAreIdentical,
   formatDurationClockTime,
@@ -232,6 +234,15 @@ const RunDates: React.FC<{ resource: LearningResource }> = ({ resource }) => {
   }
 }
 
+const shouldShowFormat = (resource: LearningResource) => {
+  return (
+    (resource.resource_type === ResourceTypeEnum.Course ||
+      resource.resource_type === ResourceTypeEnum.Program) &&
+    allRunsAreIdentical(resource) &&
+    resource.delivery
+  )
+}
+
 const INFO_ITEMS: InfoItemConfig = [
   {
     label: (resource: LearningResource) => {
@@ -248,6 +259,41 @@ const INFO_ITEMS: InfoItemConfig = [
       } else return null
     },
   },
+  {
+    label: "Format:",
+    Icon: RiComputerLine,
+    selector: (resource: LearningResource) => {
+      if (shouldShowFormat(resource)) {
+        const totalFormats = resource.delivery?.length || 0
+        return resource.delivery.map((format, index) => {
+          return (
+            <InfoItemValue
+              key={`format-${index}`}
+              label={format.name}
+              index={index}
+              total={totalFormats}
+            />
+          )
+        })
+      } else return null
+    },
+  },
+  {
+    label: "Location:",
+    Icon: RiMapPinLine,
+    selector: (resource: LearningResource) => {
+      if (
+        shouldShowFormat(resource) &&
+        resource.delivery?.filter(
+          (d) =>
+            d.code === DeliveryEnum.InPerson || d.code === DeliveryEnum.Hybrid,
+        ).length > 0 &&
+        resource.location
+      ) {
+        return <InfoItemValue label={resource.location} index={1} total={1} />
+      } else return null
+    },
+  },
   {
     label: "Price:",
     Icon: RiPriceTag3Line,