show more button for v2 drawer dates (#1809)

* break out learning resource run comparison into a utility function

* add show more functionality for start dates

* remove separator at the end before show more / show less button

* don't wrap dates

* don't wrap show more button

* fix test

* fix cta image, use aspect-ratio and relative position

* put aspect on img element instead of containing div so it works in chrome and safari

* fix tests

* remove start date comparison as it's not supposed to work that way

* don't show dates info item at all if there are differning runs

* show less link should be on its own line

* remove unnecessary line break

* optimize the code a bit

* better name

* fix column widths in differing runs table

* refactor logic surrounding run dates

* filter out null start dates

* adjust padding above "Show less"

Author: gumaerc

frontends/ol-components/src/components/LearningResourceCard/testUtils.ts

@@ -42,6 +42,12 @@ const resources = {
 }
 
 const sameDataRun = factories.learningResources.run({
+  delivery: [
+    {
+      code: DeliveryEnum.Online,
+      name: DeliveryEnumDescriptions.online,
+    },
+  ],
   resource_prices: [
     { amount: "0", currency: "USD" },
     { amount: "100", currency: "USD" },
@@ -161,6 +167,7 @@ const courses = {
   multipleRuns: {
     sameData: makeResource({
       resource_type: ResourceTypeEnum.Course,
+      free: true,
       runs: [
         factories.learningResources.run({
           delivery: sameDataRun.delivery,

frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx

@@ -1,8 +1,9 @@
 import React from "react"
 import styled from "@emotion/styled"
 import { theme } from "../ThemeProvider/ThemeProvider"
-import { LearningResource, LearningResourcePrice } from "api"
+import { LearningResource } from "api"
 import {
+  allRunsAreIdentical,
   formatRunDate,
   getDisplayPrice,
   getRunPrices,
@@ -33,7 +34,6 @@ const DifferingRunHeader = styled.div({
   display: "flex",
   alignSelf: "stretch",
   alignItems: "center",
-  flex: "1 0 0",
   gap: "16px",
   padding: "12px",
   color: theme.custom.colors.darkGray2,
@@ -43,17 +43,46 @@ const DifferingRunHeader = styled.div({
 
 const DifferingRunData = styled.div({
   display: "flex",
-  flexShrink: 0,
-  flex: "1 0 0",
   color: theme.custom.colors.darkGray2,
   ...theme.typography.body3,
 })
 
 const DifferingRunLabel = styled.strong({
   display: "flex",
-  flex: "1 0 0",
 })
 
+const dateColumnStyle = {
+  width: "130px",
+  [theme.breakpoints.down("sm")]: {
+    width: "auto",
+    flex: "2 0 0",
+  },
+}
+
+const priceColumnStyle = {
+  width: "110px",
+  [theme.breakpoints.down("sm")]: {
+    width: "auto",
+    flex: "1 0 0",
+  },
+}
+
+const formatStyle = {
+  flex: "1 0 0",
+}
+
+const DateLabel = styled(DifferingRunLabel)(dateColumnStyle)
+
+const PriceLabel = styled(DifferingRunLabel)(priceColumnStyle)
+
+const FormatLabel = styled(DifferingRunLabel)(formatStyle)
+
+const DateData = styled(DifferingRunData)(dateColumnStyle)
+
+const PriceData = styled(DifferingRunData)(priceColumnStyle)
+
+const FormatData = styled(DifferingRunData)(formatStyle)
+
 const DifferingRunLocation = styled(DifferingRunData)({
   flex: "1 0 100%",
   flexDirection: "column",
@@ -63,62 +92,27 @@ const DifferingRunLocation = styled(DifferingRunData)({
 const DifferingRunsTable: React.FC<{ resource: LearningResource }> = ({
   resource,
 }) => {
-  if (!resource.runs) {
-    return null
-  }
-  if (resource.runs.length === 1) {
-    return null
-  }
   const asTaughtIn = resource ? showStartAnytime(resource) : false
-  const prices: LearningResourcePrice[] = []
-  const deliveryMethods = []
-  const locations = []
-  for (const run of resource.runs) {
-    if (run.resource_prices) {
-      run.resource_prices.forEach((price) => {
-        if (price.amount !== "0") {
-          prices.push(price)
-        }
-      })
-    }
-    if (run.delivery) {
-      deliveryMethods.push(run.delivery)
-    }
-    if (run.location) {
-      locations.push(run.location)
-    }
-  }
-  const distinctPrices = [...new Set(prices.map((p) => p.amount).flat())]
-  const distinctDeliveryMethods = [
-    ...new Set(deliveryMethods.flat().map((dm) => dm?.code)),
-  ]
-  const distinctLocations = [...new Set(locations.flat().map((l) => l))]
-  if (
-    distinctPrices.length > 1 ||
-    distinctDeliveryMethods.length > 1 ||
-    distinctLocations.length > 1
-  ) {
+  if (!allRunsAreIdentical(resource)) {
     return (
       <DifferingRuns data-testid="differing-runs-table">
         <DifferingRunHeader>
-          <DifferingRunLabel>Date</DifferingRunLabel>
-          <DifferingRunLabel>Price</DifferingRunLabel>
-          <DifferingRunLabel>Format</DifferingRunLabel>
+          <DateLabel>Date</DateLabel>
+          <PriceLabel>Price</PriceLabel>
+          <FormatLabel>Format</FormatLabel>
         </DifferingRunHeader>
-        {resource.runs.map((run, index) => (
+        {resource.runs?.map((run, index) => (
           <DifferingRun key={index}>
-            <DifferingRunData>
-              {formatRunDate(run, asTaughtIn)}
-            </DifferingRunData>
+            <DateData>{formatRunDate(run, asTaughtIn)}</DateData>
             {run.resource_prices && (
-              <DifferingRunData>
+              <PriceData>
                 <span>{getDisplayPrice(getRunPrices(run)["course"])}</span>
-              </DifferingRunData>
+              </PriceData>
             )}
             {run.delivery && (
-              <DifferingRunData>
+              <FormatData>
                 <span>{run.delivery?.map((dm) => dm?.name).join(", ")}</span>
-              </DifferingRunData>
+              </FormatData>
             )}
             {run.delivery.filter((d) => d.code === "in_person").length > 0 &&
               run.location && (

frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.test.tsx

@@ -5,6 +5,7 @@ import InfoSectionV2 from "./InfoSectionV2"
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
 import { formatRunDate } from "ol-utilities"
 import invariant from "tiny-invariant"
+import user from "@testing-library/user-event"
 
 // This is a pipe followed by a zero-width space
 const SEPARATOR = "|​"
@@ -134,25 +135,49 @@ describe("Learning resource info section start date", () => {
     within(section).getByText(runDate)
   })
 
-  test("Multiple Runs", () => {
-    const course = courses.free.multipleRuns
-    const expectedDateText = course.runs
+  test("Multiple run dates", () => {
+    const course = courses.multipleRuns.sameData
+    const expectedDateText = `${course.runs
       ?.sort((a, b) => {
         if (a?.start_date && b?.start_date) {
           return Date.parse(a.start_date) - Date.parse(b.start_date)
         }
         return 0
       })
       .map((run) => formatRunDate(run, false))
-      .join(SEPARATOR)
+      .slice(0, 2)
+      .join(SEPARATOR)}Show more`
     invariant(expectedDateText)
     render(<InfoSectionV2 resource={course} />, {
       wrapper: ThemeProvider,
     })
 
     const section = screen.getByTestId("drawer-info-items")
-    within(section).getByText((_content, node) => {
+    within(section).getAllByText((_content, node) => {
       return node?.textContent === expectedDateText || false
     })
   })
+
+  test("If data is different, dates 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()
+  })
+
+  test("Clicking the show more button should show more dates", async () => {
+    const course = courses.multipleRuns.sameData
+    const totalRuns = course.runs?.length ? course.runs.length : 0
+    render(<InfoSectionV2 resource={course} />, {
+      wrapper: ThemeProvider,
+    })
+
+    const runDates = screen.getByTestId("drawer-run-dates")
+    expect(runDates.children.length).toBe(3)
+    const showMoreLink = within(runDates).getByText("Show more")
+    await user.click(showMoreLink)
+    expect(runDates.children.length).toBe(totalRuns + 1)
+  })
 })

frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import styled from "@emotion/styled"
 import ISO6391 from "iso-639-1"
 import {
@@ -16,13 +16,15 @@ import {
 } from "@remixicon/react"
 import { LearningResource, ResourceTypeEnum } from "api"
 import {
+  allRunsAreIdentical,
   formatDurationClockTime,
   formatRunDate,
   getLearningResourcePrices,
   showStartAnytime,
 } from "ol-utilities"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import DifferingRunsTable from "./DifferingRunsTable"
+import { Link } from "../Link/Link"
 
 const SeparatorContainer = styled.span({
   padding: "0 8px",
@@ -87,6 +89,19 @@ const InfoValue = styled.div({
   ...theme.typography.body3,
 })
 
+const NoWrap = styled.span({
+  whiteSpace: "nowrap",
+})
+
+const ShowMoreLink = styled(Link)({
+  paddingLeft: "12px",
+})
+
+const ShowLessLink = styled(Link)({
+  display: "flex",
+  paddingTop: "4px",
+})
+
 const PriceDisplay = styled.div({
   display: "flex",
   alignItems: "center",
@@ -145,6 +160,77 @@ const InfoItemValue: React.FC<InfoItemValueProps> = ({
   )
 }
 
+const RunDates: React.FC<{ resource: LearningResource }> = ({ resource }) => {
+  const [showingMore, setShowingMore] = useState(false)
+  const asTaughtIn = showStartAnytime(resource)
+  const sortedDates = resource.runs
+    ?.sort((a, b) => {
+      if (a?.start_date && b?.start_date) {
+        return Date.parse(a.start_date) - Date.parse(b.start_date)
+      }
+      return 0
+    })
+    .map((run) => formatRunDate(run, asTaughtIn))
+  const totalDates = sortedDates?.length || 0
+  const showMore = totalDates > 2
+  if (showMore) {
+    const ShowHideLink = showingMore ? ShowLessLink : ShowMoreLink
+    const showMoreLink = (
+      <NoWrap>
+        <ShowHideLink
+          color="red"
+          size="small"
+          onClick={() => setShowingMore(!showingMore)}
+        >
+          {showingMore ? "Show less" : "Show more"}
+        </ShowHideLink>
+      </NoWrap>
+    )
+    return (
+      <span data-testid="drawer-run-dates">
+        {sortedDates?.slice(0, 2).map((runDate, index) => {
+          return (
+            <NoWrap key={`run-${index}`}>
+              <InfoItemValue
+                label={runDate}
+                index={index}
+                total={showingMore ? 3 : 2}
+              />
+            </NoWrap>
+          )
+        })}
+        {!showingMore && showMoreLink}
+        {showingMore &&
+          sortedDates?.slice(2).map((runDate, index) => {
+            return (
+              <NoWrap key={`run-${index + 2}`}>
+                <InfoItemValue
+                  label={runDate}
+                  index={index}
+                  total={sortedDates.length - 2}
+                />
+              </NoWrap>
+            )
+          })}
+        {showingMore && showMoreLink}
+      </span>
+    )
+  } else {
+    const runDates = sortedDates?.map((runDate, index) => {
+      return (
+        <NoWrap key={`run-${index}`}>
+          <InfoItemValue
+            label={runDate}
+            index={index}
+            total={sortedDates.length}
+          />
+        </NoWrap>
+      )
+    })
+    return <span data-testid="drawer-run-dates">{runDates}</span>
+  }
+}
+
 const INFO_ITEMS: InfoItemConfig = [
   {
     label: (resource: LearningResource) => {
@@ -154,33 +240,10 @@ const INFO_ITEMS: InfoItemConfig = [
     },
     Icon: RiCalendarLine,
     selector: (resource: LearningResource) => {
-      const asTaughtIn = resource ? showStartAnytime(resource) : false
-      if (
-        [ResourceTypeEnum.Course, ResourceTypeEnum.Program].includes(
-          resource.resource_type as "course" | "program",
-        )
-      ) {
-        const sortedDates =
-          resource.runs
-            ?.sort((a, b) => {
-              if (a?.start_date && b?.start_date) {
-                return Date.parse(a.start_date) - Date.parse(b.start_date)
-              }
-              return 0
-            })
-            .map((run) => formatRunDate(run, asTaughtIn)) ?? []
-        const runDates =
-          sortedDates.map((runDate, index) => {
-            return (
-              <InfoItemValue
-                key={`run-${index}`}
-                label={runDate}
-                index={index}
-                total={sortedDates.length}
-              />
-            )
-          }) ?? []
-        return runDates
+      const totalDatesWithRuns =
+        resource.runs?.filter((run) => run.start_date !== null).length || 0
+      if (allRunsAreIdentical(resource) && totalDatesWithRuns > 0) {
+        return <RunDates resource={resource} />
       } else return null
     },
   },
@@ -396,9 +459,11 @@ const InfoSectionV2 = ({ resource }: { resource?: LearningResource }) => {
     <>
       <DifferingRunsTable resource={resource} />
       <InfoItems data-testid="drawer-info-items">
-        {infoItems.map((props, index) => (
-          <InfoItem key={index} {...props} />
-        ))}
+        {infoItems
+          .filter((props) => props.value !== null)
+          .map((props, index) => (
+            <InfoItem key={index} {...props} />
+          ))}
       </InfoItems>
     </>
   )