fix learning path count, increase item page size

frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx

@@ -310,7 +310,7 @@ interface UserListDetailsTabProps {
 
 const UserListDetailsTab: React.FC<UserListDetailsTabProps> = (props) => {
   const { userListId } = props
-  const pathQuery = useUserListsDetail(userListId)
+  const listQuery = useUserListsDetail(userListId)
   const itemsQuery = useInfiniteUserListItems({ userlist_id: userListId })
   const items = useMemo(() => {
     const pages = itemsQuery.data?.pages
@@ -319,12 +319,11 @@ const UserListDetailsTab: React.FC<UserListDetailsTabProps> = (props) => {
   return (
     <ListDetailsComponent
       listType={ListType.UserList}
-      title={pathQuery?.data?.title}
-      description={pathQuery.data?.description}
+      list={listQuery.data}
       items={items}
       isLoading={itemsQuery.isLoading}
       isFetching={itemsQuery.isFetching}
-      handleEdit={() => manageListDialogs.upsertUserList(pathQuery.data)}
+      handleEdit={() => manageListDialogs.upsertUserList(listQuery.data)}
     />
   )
 }

frontends/mit-open/src/pages/ListDetailsPage/LearningPathDetailsPage.tsx

@@ -18,17 +18,29 @@ type RouteParams = {
 const LearningPathDetailsPage: React.FC = () => {
   const id = Number(useParams<RouteParams>().id)
   const pathQuery = useLearningPathsDetail(id)
-  const itemsQuery = useInfiniteLearningPathItems({ learning_resource_id: id })
+  const itemsQuery = useInfiniteLearningPathItems({
+    learning_resource_id: id,
+    limit: 100,
+  })
   const items = useMemo(() => {
     const pages = itemsQuery.data?.pages
     return pages?.flatMap((p) => p.results ?? []) ?? []
   }, [itemsQuery.data])
+  const list = useMemo(() => {
+    if (!pathQuery.data) {
+      return undefined
+    }
+    return {
+      title: pathQuery.data.title,
+      description: pathQuery.data.description,
+      item_count: pathQuery.data.learning_path.item_count,
+    }
+  }, [pathQuery.data])
 
   return (
     <ListDetailsPage
       listType={ListType.LearningPath}
-      title={pathQuery?.data?.title}
-      description={pathQuery.data?.description}
+      list={list}
       items={items}
       isLoading={itemsQuery.isLoading}
       isFetching={itemsQuery.isFetching}

frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.test.ts

@@ -37,19 +37,27 @@ const spyItemsListing = jest.mocked(ItemsListing)
 const setup = ({
   userSettings,
   path,
+  ...opts
 }: {
   userSettings?: Partial<User>
   path: LearningPathResource
+  pageSize?: number
 }) => {
   invariant(path.learning_path, "Must pass a learning path")
+  const pageSize = opts.pageSize ?? path.learning_path.item_count
   const paginatedRelationships =
     factories.learningResources.learningPathRelationships({
-      count: path.learning_path.item_count,
+      count: Math.min(path.learning_path.item_count, pageSize),
       parent: path.id,
     })
   const detailsUrl = urls.learningPaths.details({ id: path.id })
   const pathResourcesUrl = urls.learningPaths.resources({
     learning_resource_id: path.id,
+    /**
+     * This is not paginated yet. It's a staff-only view, so let's just increase
+     * the pagesize to 100 for now.
+     */
+    limit: 100,
   })
   setMockResponse.get(detailsUrl, path)
   setMockResponse.get(pathResourcesUrl, paginatedRelationships)
@@ -118,7 +126,7 @@ describe("ListDetailsPage", () => {
       canReorder: false,
     },
     {
-      itemCount: faker.number.int({ min: 1, max: 10 }),
+      itemCount: faker.number.int({ min: 1, max: 20 }),
       canReorder: true,
     },
   ])(
@@ -149,6 +157,16 @@ describe("ListDetailsPage", () => {
     expect(editList).toHaveBeenCalledWith(path)
   })
 
+  test("Displays list count", async () => {
+    const path = factories.learningResources.learningPath({
+      learning_path: {
+        item_count: 30,
+      },
+    })
+    setup({ path, pageSize: 3 })
+    await screen.findByText("30 items")
+  })
+
   test("Passes appropriate props to ItemsListing", async () => {
     const path = factories.learningResources.learningPath()
     const { paginatedRelationships } = setup({ path })

frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx

@@ -9,42 +9,37 @@ import ItemsListing from "./ItemsListing"
 import type { LearningResourceListItem } from "./ItemsListing"
 
 type OnEdit = () => void
+type ListData = {
+  title: string
+  description?: string | null
+  item_count: number
+}
 type ListDetailsPageProps = {
   listType: string
-  title: string | undefined
-  description: string | null | undefined
+  list?: ListData
   items: LearningResourceListItem[]
   isLoading: boolean
   isFetching: boolean
   handleEdit: OnEdit
 }
 
 const ListDetailsComponent: React.FC<ListDetailsPageProps> = (props) => {
-  const {
-    listType,
-    title,
-    description,
-    items,
-    isLoading,
-    isFetching,
-    handleEdit,
-  } = props
+  const { listType, list, items, isLoading, isFetching, handleEdit } = props
   const { data: user } = useUserMe()
   const [isSorting, toggleIsSorting] = useToggle(false)
 
   const canEdit = user?.is_learning_path_editor
   const showSort = canEdit && !!items.length
-  const count = items.length
-
+  const count = list?.item_count
   return (
     <GridContainer>
       <GridColumn variant="single-full">
         <Grid container>
           <Grid item xs={12}>
             <Typography variant="h3" component="h1">
-              {title}
+              {list?.title}
             </Typography>
-            {description && <p>{description}</p>}
+            {list?.description && <p>{list.description}</p>}
           </Grid>
           <Grid
             item
@@ -101,8 +96,7 @@ const ListDetailsComponent: React.FC<ListDetailsPageProps> = (props) => {
 
 const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
   listType,
-  title,
-  description,
+  list,
   items,
   isLoading,
   isFetching,
@@ -113,12 +107,11 @@ const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
       src="/static/images/course_search_banner.png"
       className="learningpaths-page"
     >
-      <MetaTags title={title} />
+      <MetaTags title={list?.title} />
       <Container maxWidth="sm">
         <ListDetailsComponent
           listType={listType}
-          title={title}
-          description={description}
+          list={list}
           items={items}
           isLoading={isLoading}
           isFetching={isFetching}

frontends/mit-open/src/pages/ListDetailsPage/UserListDetailsPage.tsx

@@ -17,7 +17,7 @@ type RouteParams = {
 
 const UserListDetailsPage: React.FC = () => {
   const id = Number(useParams<RouteParams>().id)
-  const pathQuery = useUserListsDetail(id)
+  const listQuery = useUserListsDetail(id)
   const itemsQuery = useInfiniteUserListItems({ userlist_id: id })
   const items = useMemo(() => {
     const pages = itemsQuery.data?.pages
@@ -27,12 +27,11 @@ const UserListDetailsPage: React.FC = () => {
   return (
     <ListDetailsPage
       listType={ListType.UserList}
-      title={pathQuery?.data?.title}
-      description={pathQuery.data?.description}
+      list={listQuery.data}
       items={items}
       isLoading={itemsQuery.isLoading}
       isFetching={itemsQuery.isFetching}
-      handleEdit={() => manageListDialogs.upsertUserList(pathQuery.data)}
+      handleEdit={() => manageListDialogs.upsertUserList(listQuery.data)}
     />
   )
 }