Release 0.13.5

RELEASE.rst

@@ -1,6 +1,12 @@
 Release Notes
 =============
 
+Version 0.13.5
+--------------
+
+- Shanbady/topic channel page header fixes (#1063)
+- Learning Resource cards, list view (#1054)
+
 Version 0.13.4 (Released June 14, 2024)
 --------------
 

frontends/api/src/clients.ts

@@ -25,6 +25,7 @@ import {
 import axiosInstance from "./axios"
 
 const BASE_PATH = process.env.MITOPEN_AXIOS_BASE_PATH?.replace(/\/+$/, "") ?? ""
+
 const learningResourcesApi = new LearningResourcesApi(
   undefined,
   BASE_PATH,

frontends/mit-open/.storybook/main.ts

@@ -37,7 +37,7 @@ const config = {
     PUBLIC_URL: process.env.PUBLIC_URL || "",
     EMBEDLY_KEY: process.env.EMBEDLY_KEY || "",
     APP_SETTINGS: {
-      embedlyKey: "fake-embedly-key",
+      embedlyKey: process.env.EMBEDLY_KEY || "",
     },
   }),
 }

frontends/mit-open/.storybook/preview-head.html

@@ -5,6 +5,6 @@
 <link rel="stylesheet" href="https://use.typekit.net/lbk1xay.css" />
 <script>
   window.APP_SETTINGS = {
-    embedlyKey: 'fake-embedly-key',
+    embedlyKey: null,
   }
 </script>

frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx

@@ -24,6 +24,7 @@ const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
   [ChannelTypeEnum.Unit]: [
     "offerings",
     "audience",
+    "fee",
     "formats",
     "content_types",
     "certifications",
@@ -47,34 +48,42 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
     {
       name: "topic",
       title: "Topic",
+      order: 0,
     },
     {
       name: "formats",
       title: "Formats",
+      order: 0,
     },
     {
       name: "fee",
       title: "Fee",
+      order: 0,
     },
     {
       name: "department",
       title: "Department",
+      order: 0,
     },
     {
       name: "offerings",
       title: "Offerings",
+      order: -1,
     },
     {
       name: "level",
       title: "Level",
+      order: 0,
     },
     {
       name: "content_types",
       title: "Type of Content",
+      order: 0,
     },
     {
       name: "audience",
       title: "Audience",
+      order: 0,
     },
     {
       name: "more_information",
@@ -84,22 +93,27 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
           {channelTitle} website <OpenInNewIcon fontSize="inherit" />
         </a>
       ),
+      order: 1,
     },
     {
       name: "platform",
       title: "Platform",
+      order: 0,
     },
     {
       name: "offered_by",
       title: "Offered By",
+      order: 0,
     },
     {
       name: "certifications",
       title: "Certificate",
+      order: 0,
     },
     {
       name: "learning_format",
       title: "Format",
+      order: 0,
       labelFunction: (key: string) =>
         key
           .split("_")
@@ -127,12 +141,15 @@ const InfoLabel = styled(Typography)(({ theme }) => ({
 const ChannelDetailsCard = styled(Box)(({ theme }) => ({
   borderRadius: "12px",
   backgroundColor: "white",
-  minWidth: "300px",
-  padding: "32px",
+  padding: "36px",
   display: "flex",
   flexDirection: "column",
   gap: "16px",
+  [theme.breakpoints.up("md")]: {
+    minWidth: "408px",
+  },
   [theme.breakpoints.down("md")]: {
+    padding: "16px",
     width: "100%",
   },
 }))
@@ -142,36 +159,45 @@ const ChannelDetails: React.FC<ChannelDetailsProps> = (props) => {
   const channelDetails = getChannelDetails(field)
   const channelType = field.channel_type
   const channelTitle = field.title
+
   const facetManifest = useMemo(
     () => getFacetManifest(channelType),
     [channelType],
   )
 
-  const body = facetManifest.map((value) => {
-    const detailValue = (
-      channelDetails as unknown as { [key: string]: string }
-    )[value.name]
-    if (detailValue) {
-      const label = value?.labelFunction
-        ? value.labelFunction(detailValue, channelTitle)
-        : detailValue
+  const body = facetManifest
+    .sort((a, b) =>
+      a?.order && b?.order && a?.order > b?.order
+        ? 1
+        : a?.order && b?.order && b?.order > a?.order
+          ? -1
+          : 0,
+    )
+    .map((value) => {
+      const detailValue = (
+        channelDetails as unknown as { [key: string]: string }
+      )[value.name]
+      if (detailValue) {
+        const label = value?.labelFunction
+          ? value.labelFunction(detailValue, channelTitle)
+          : detailValue
 
-      return (
-        <Box key={value.title}>
-          <InfoLabel
-            variant="subtitle2"
-            sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
-          >
-            {value.title}:
-          </InfoLabel>
-          <Typography variant="body3" color="text.secondary">
-            {Array.isArray(label) ? label.join(" | ") : label}
-          </Typography>
-        </Box>
-      )
-    }
-    return null
-  })
+        return (
+          <Box key={value.title}>
+            <InfoLabel
+              variant="subtitle2"
+              sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
+            >
+              {value.title}
+            </InfoLabel>
+            <Typography variant="body3" color="text.secondary">
+              {Array.isArray(label) ? label.join(" | ") : label}
+            </Typography>
+          </Box>
+        )
+      }
+      return null
+    })
   return <ChannelDetailsCard>{body}</ChannelDetailsCard>
 }
 

frontends/mit-open/src/page-components/LearningResourceCard/LearningResourceCard.tsx

@@ -1,3 +1,9 @@
+/*
+ * TODO: This has been replaced by the ol-components LearningResourceCard
+ * It is still in use by the LearningPathDetailsPage -> ListDetails -> ItemsListing
+ * though can be removed (and adjacent LearningResourceCardTemplate) once
+ * the sorting functionality has been refactored across
+ */
 import React, { useCallback } from "react"
 import * as NiceModal from "@ebay/nice-modal-react"
 

frontends/mit-open/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx

@@ -93,5 +93,14 @@ const useOpenLearningResourceDrawer = () => {
   return openLearningResourceDrawer
 }
 
+const useResourceDrawerHref = () => {
+  const [search] = useSearchParams()
+
+  return (id: number) => {
+    search.set(RESOURCE_DRAWER_QUERY_PARAM, id.toString())
+    return `?${search.toString()}`
+  }
+}
+
 export default LearningResourceDrawer
-export { useOpenLearningResourceDrawer }
+export { useOpenLearningResourceDrawer, useResourceDrawerHref }

frontends/mit-open/src/page-components/ResourceCarousel/ResourceCarousel.tsx

@@ -27,15 +27,7 @@ import {
   AddToLearningPathDialog,
   AddToUserListDialog,
 } from "../Dialogs/AddToListDialog"
-import { useOpenLearningResourceDrawer } from "../LearningResourceDrawer/LearningResourceDrawer"
-
-const LearningResourceCardStyled = styled(LearningResourceCard)({
-  boxShadow: "none",
-  ":hover": {
-    boxShadow:
-      "0 2px 4px 0 rgb(37 38 43 / 10%), 0 2px 4px 0 rgb(37 38 43 / 10%)",
-  },
-})
+import { useResourceDrawerHref } from "../LearningResourceDrawer/LearningResourceDrawer"
 
 const StyledCarousel = styled(Carousel)({
   /**
@@ -272,6 +264,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
   const { data: user } = useUserMe()
   const [tab, setTab] = React.useState("0")
   const [ref, setRef] = React.useState<HTMLDivElement | null>(null)
+  const getDrawerHref = useResourceDrawerHref()
 
   const showAddToLearningPathDialog =
     user?.is_authenticated && user?.is_learning_path_editor
@@ -286,8 +279,6 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
       }
     : null
 
-  const openLRDrawer = useOpenLearningResourceDrawer()
-
   return (
     <MobileOverflow className={className}>
       <TabContext value={tab}>
@@ -314,21 +305,21 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
             <StyledCarousel arrowsContainer={ref}>
               {isLoading || childrenLoading
                 ? Array.from({ length: 6 }).map((_, index) => (
-                    <LearningResourceCardStyled
+                    <LearningResourceCard
                       isLoading
                       key={index}
                       resource={null}
                       {...tabConfig.cardProps}
                     />
                   ))
                 : resources.map((resource) => (
-                    <LearningResourceCardStyled
+                    <LearningResourceCard
                       key={resource.id}
                       resource={resource}
                       {...tabConfig.cardProps}
+                      href={getDrawerHref(resource.id)}
                       onAddToLearningPathClick={showAddToLearningPathDialog}
                       onAddToUserListClick={showAddToUserListDialog}
-                      onActivate={() => openLRDrawer(resource.id)}
                     />
                   ))}
             </StyledCarousel>

frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -5,23 +5,21 @@ import {
   MuiCard,
   CardContent,
   PlainList,
-  Skeleton,
   Container,
   Typography,
   Button,
   SimpleSelect,
   truncateText,
   css,
+  LearningResourceListCard,
 } from "ol-components"
-
 import TuneIcon from "@mui/icons-material/Tune"
-
+import * as NiceModal from "@ebay/nice-modal-react"
 import {
   LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as LRSearchRequest,
   ResourceTypeEnum,
 } from "api"
 import { useLearningResourcesSearch } from "api/hooks/learningResources"
-
 import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
 import {
   AvailableFacets,
@@ -33,13 +31,16 @@ import type {
   BooleanFacets,
   FacetManifest,
 } from "@mitodl/course-search-utils"
-import LearningResourceCard from "@/page-components/LearningResourceCard/LearningResourceCard"
 import _ from "lodash"
-
 import { ResourceTypeTabs } from "./ResourceTypeTabs"
 import ProfessionalToggle from "./ProfessionalToggle"
-
 import type { TabConfig } from "./ResourceTypeTabs"
+import { useUserMe } from "api/hooks/user"
+import {
+  AddToLearningPathDialog,
+  AddToUserListDialog,
+} from "../Dialogs/AddToListDialog"
+import { useResourceDrawerHref } from "@/page-components/LearningResourceDrawer/LearningResourceDrawer"
 
 export const StyledDropdown = styled(SimpleSelect)`
   margin: 8px;
@@ -201,10 +202,7 @@ export const FacetsTitleContainer = styled.div`
 const PaginationContainer = styled.div`
   display: flex;
   justify-content: end;
-`
-
-const StyledSkeleton = styled(Skeleton)`
-  border-radius: 4px;
+  margin-top: 16px;
 `
 
 const PAGE_SIZE = 10
@@ -293,6 +291,24 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
     },
     { keepPreviousData: true },
   )
+
+  const { data: user } = useUserMe()
+
+  const getDrawerHref = useResourceDrawerHref()
+
+  const showAddToLearningPathDialog =
+    user?.is_authenticated && user?.is_learning_path_editor
+      ? (resourceId: number) => {
+          NiceModal.show(AddToLearningPathDialog, { resourceId })
+        }
+      : null
+
+  const showAddToUserListDialog = user?.is_authenticated
+    ? (resourceId: number) => {
+        NiceModal.show(AddToUserListDialog, { resourceId })
+      }
+    : null
+
   return (
     <Container>
       <GridContainer>
@@ -357,17 +373,19 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                     .fill(null)
                     .map((a, index) => (
                       <li key={index}>
-                        <StyledSkeleton variant="rectangular" height={162} />
+                        <LearningResourceListCard isLoading={isLoading} />
                       </li>
                     ))}
                 </PlainList>
               ) : data && data.count > 0 ? (
                 <PlainList itemSpacing={3}>
                   {data.results.map((resource) => (
                     <li key={resource.id}>
-                      <LearningResourceCard
-                        variant="row-reverse"
+                      <LearningResourceListCard
                         resource={resource}
+                        href={getDrawerHref(resource.id)}
+                        onAddToLearningPathClick={showAddToLearningPathDialog}
+                        onAddToUserListClick={showAddToUserListDialog}
                       />
                     </li>
                   ))}