[ON HOLD] hide tab when no results

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

@@ -5,6 +5,7 @@ import {
   TabButtonList,
   TabPanel,
   styled,
+  useTabContext,
 } from "ol-components"
 import { ResourceCategoryEnum, LearningResourcesSearchResponse } from "api"
 
@@ -73,13 +74,22 @@ const ResourceCategoryTabList: React.FC<ResourceCategoryTabsProps> = ({
   onTabChange,
   className,
 }) => {
-  const counts = resourceCategoryCounts(aggregations)
+  const tabContext = useTabContext()
+  const activeTab = tabContext?.value
+  const categoryCounts = resourceCategoryCounts(aggregations)
   const allCount = aggregations?.resource_category
     ? (aggregations.resource_category || []).reduce((count, bucket) => {
         count = count + bucket.doc_count
         return count
       }, 0)
     : undefined
+  const counts = categoryCounts
+    ? {
+        ...categoryCounts,
+        all: allCount ?? 0,
+      }
+    : null
+  const countsLoaded = !!counts
 
   return (
     <TabsList
@@ -98,24 +108,24 @@ const ResourceCategoryTabList: React.FC<ResourceCategoryTabsProps> = ({
         onTabChange?.()
       }}
     >
-      {tabs.map((t) => {
-        let count: number | undefined
-        if (t.name === "all") {
-          count = allCount
-        } else {
-          count =
-            counts && t.resource_category
-              ? counts[t.resource_category] ?? 0
-              : undefined
-        }
-        return (
-          <TabButton
-            key={t.name}
-            value={t.name}
-            label={appendCount(t.label, count)}
-          />
-        )
-      })}
+      {tabs
+        .map((tab) => ({
+          tab,
+          count: counts?.[tab.resource_category ?? "all"] ?? 0,
+        }))
+        .filter(({ count, tab }) => {
+          if (!countsLoaded || activeTab === tab.name) return true
+          return count
+        })
+        .map(({ tab, count }) => {
+          return (
+            <TabButton
+              key={tab.name}
+              value={tab.name}
+              label={countsLoaded ? appendCount(tab.label, count) : tab.label}
+            />
+          )
+        })}
     </TabsList>
   )
 }

frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx

@@ -64,9 +64,9 @@ describe("SearchPage", () => {
         count: 1000,
         metadata: {
           aggregations: {
-            resource_type: [
+            resource_category: [
               { key: "course", doc_count: 100 },
-              { key: "podcast", doc_count: 200 },
+              { key: "learning_materials", doc_count: 200 },
               { key: "program", doc_count: 300 },
               { key: "irrelevant", doc_count: 400 },
             ],
@@ -231,9 +231,9 @@ describe("Search Page Tabs", () => {
         count: 1000,
         metadata: {
           aggregations: {
-            resource_type: [
+            resource_category: [
               { key: "course", doc_count: 100 },
-              { key: "podcast", doc_count: 200 },
+              { key: "learning_materials", doc_count: 200 },
               { key: "program", doc_count: 300 },
               { key: "irrelevant", doc_count: 400 },
             ],
@@ -247,13 +247,81 @@ describe("Search Page Tabs", () => {
     expect(tab).toHaveAccessibleName(expectedActive)
   })
 
+  test("Clearing facets does NOT reset tab", async () => {
+    setMockApiResponses({
+      search: {
+        count: 0,
+        metadata: {
+          aggregations: {
+            resource_category: [
+              { key: "course", doc_count: 100 },
+              { key: "program", doc_count: 10 },
+            ],
+          },
+          suggestions: [],
+        },
+      },
+    })
+    const { location } = renderWithProviders(<SearchPage />, {
+      url: "?topic=Physics&resource_category=course",
+    })
+    const activeTab = screen.getByRole("tab", { selected: true })
+    expect(activeTab).toHaveTextContent("Courses")
+    await user.click(screen.getByRole("button", { name: /clear all/i }))
+    expect(location.current.search).toBe("?resource_category=course")
+  })
+
+  test.each([
+    { programCount: 0, programsVisible: false, url: "?" },
+    {
+      programCount: 0,
+      programsVisible: true,
+      url: "?resource_category=program",
+    },
+    { programCount: 123, programsVisible: true, url: "?" },
+  ])(
+    "Tabs only visible if there are results or tab is active (count: $programCount, url: $url, visible: $programsVisible)",
+    async ({ programCount, programsVisible, url }) => {
+      setMockApiResponses({
+        search: {
+          count: 0,
+          metadata: {
+            aggregations: {
+              resource_category: [
+                { key: "course", doc_count: 0 },
+                { key: "learning_material", doc_count: 0 },
+                { key: "program", doc_count: programCount },
+              ],
+            },
+            suggestions: [],
+          },
+        },
+      })
+      renderWithProviders(<SearchPage />, { url })
+
+      // getBy is syncrhonous. The tab is initially visible while API call is pending.
+      const tabPrograms = screen.getByRole("tab", { name: /Programs/ })
+      // Now wait either for the count or for the tab to disappear
+      if (programsVisible) {
+        await waitFor(() => {
+          expect(tabPrograms).toHaveTextContent(`${programCount}`)
+        })
+        expect(tabPrograms).toBeVisible()
+      } else {
+        await waitFor(() => {
+          expect(tabPrograms).not.toBeVisible()
+        })
+      }
+    },
+  )
+
   test("Clicking tabs updates URL", async () => {
     setMockApiResponses({
       search: {
         count: 1000,
         metadata: {
           aggregations: {
-            resource_type: [
+            resource_category: [
               { key: "course", doc_count: 100 },
               { key: "podcast", doc_count: 200 },
               { key: "program", doc_count: 300 },
@@ -329,7 +397,13 @@ describe("Search Page Tabs", () => {
       search: {
         count: 1000,
         metadata: {
-          aggregations: {},
+          aggregations: {
+            resource_category: [
+              { key: "course", doc_count: 100 },
+              { key: "learning_materials", doc_count: 200 },
+              { key: "program", doc_count: 300 },
+            ],
+          },
           suggestions: [],
         },
       },

frontends/ol-components/src/index.ts

@@ -109,7 +109,7 @@ export {
   TabButtonList,
 } from "./components/TabButtons/TabButtonList"
 
-export { default as TabContext } from "@mui/lab/TabContext"
+export { default as TabContext, useTabContext } from "@mui/lab/TabContext"
 export type { TabContextProps } from "@mui/lab/TabContext"
 export { default as TabPanel } from "@mui/lab/TabPanel"
 export type { TabPanelProps } from "@mui/lab/TabPanel"