chore(heureka): load filters asynchrounously

taymoor89 · taymoor89 · commit 35f27b8afa65 · 2025-10-28T17:09:43.000+01:00
diff --git a/apps/heureka/src/api/fetchServicesFilters.tsx b/apps/heureka/src/api/fetchServicesFilters.tsx
@@ -3,17 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ApolloQueryResult } from "@apollo/client"
-import { GetServiceFiltersDocument, GetServiceFiltersQuery } from "../generated/graphql"
+import { GetServiceFiltersDocument } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
+import { getNormalizedFilters } from "../components/Services/utils"
 
 type FetchServicesFiltersParams = Pick<RouteContext, "queryClient" | "apiClient">
 
-export const fetchServicesFilters = ({
-  queryClient,
-  apiClient,
-}: FetchServicesFiltersParams): Promise<ApolloQueryResult<GetServiceFiltersQuery>> =>
+export const fetchServicesFilters = ({ queryClient, apiClient }: FetchServicesFiltersParams) =>
   queryClient.ensureQueryData({
     queryKey: ["serviceFilters"],
-    queryFn: () => apiClient.query({ query: GetServiceFiltersDocument }),
+    queryFn: () => apiClient.query({ query: GetServiceFiltersDocument }).then((res) => getNormalizedFilters(res.data)),
   })
diff --git a/apps/heureka/src/api/fetchVulnerabilityFilters.tsx b/apps/heureka/src/api/fetchVulnerabilityFilters.tsx
@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ApolloQueryResult } from "@apollo/client"
-import { GetVulnerabilityFiltersDocument, GetVulnerabilityFiltersQuery } from "../generated/graphql"
+import { GetVulnerabilityFiltersDocument } from "../generated/graphql"
 import { RouteContext } from "../routes/-types"
+import { getNormalizedFilters } from "../components/Vulnerabilities/utils"
 
 type FetchVulnerabilityFiltersParams = Pick<RouteContext, "queryClient" | "apiClient">
 
-export const fetchVulnerabilityFilters = ({
-  queryClient,
-  apiClient,
-}: FetchVulnerabilityFiltersParams): Promise<ApolloQueryResult<GetVulnerabilityFiltersQuery>> =>
+export const fetchVulnerabilityFilters = ({ queryClient, apiClient }: FetchVulnerabilityFiltersParams) =>
   queryClient.ensureQueryData({
     queryKey: ["vulnerabilityFilters"],
-    queryFn: () => apiClient.query({ query: GetVulnerabilityFiltersDocument }),
+    queryFn: () =>
+      apiClient.query({ query: GetVulnerabilityFiltersDocument }).then((res) => getNormalizedFilters(res.data)),
   })
diff --git a/apps/heureka/src/components/Services/ServicesFilters.tsx b/apps/heureka/src/components/Services/ServicesFilters.tsx
@@ -12,7 +12,7 @@ import { SELECTED_FILTER_PREFIX } from "../../constants"
 
 export const ServicesFilters = () => {
   const navigate = useNavigate()
-  const { filters, filterSettings } = useLoaderData({ from: "/services/" })
+  const { filtersPromise, filterSettings } = useLoaderData({ from: "/services/" })
 
   const handleFilterChange = useCallback(
     (updatedFilterSettings: FilterSettings) => {
@@ -35,7 +35,7 @@ export const ServicesFilters = () => {
 
   return (
     <Filters
-      filters={filters}
+      filtersPromise={filtersPromise}
       filterSettings={filterSettings}
       onFilterChange={handleFilterChange}
       searchInputPlaceholder="search term for services name"
diff --git a/apps/heureka/src/components/Vulnerabilities/VulnerabilitiesFilters.tsx b/apps/heureka/src/components/Vulnerabilities/VulnerabilitiesFilters.tsx
@@ -12,7 +12,7 @@ import { SELECTED_FILTER_PREFIX } from "../../constants"
 
 export const VulnerabilitiesFilters = () => {
   const navigate = useNavigate()
-  const { filters, filterSettings } = useLoaderData({ from: "/vulnerabilities/" })
+  const { filtersPromise, filterSettings } = useLoaderData({ from: "/vulnerabilities/" })
 
   const handleFilterChange = useCallback(
     (updatedFilterSettings: FilterSettings) => {
@@ -40,7 +40,7 @@ export const VulnerabilitiesFilters = () => {
 
   return (
     <Filters
-      filters={filters}
+      filtersPromise={filtersPromise}
       filterSettings={filterSettings}
       onFilterChange={handleFilterChange}
       searchInputPlaceholder="search term for vulnerabilities name"
diff --git a/apps/heureka/src/components/Vulnerabilities/utils.ts b/apps/heureka/src/components/Vulnerabilities/utils.ts
@@ -1,11 +1,12 @@
 // SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { FilterSettings } from "../common/Filters/types"
+import { Filter, FilterSettings } from "../common/Filters/types"
 import { GetVulnerabilityFiltersQuery, Page, GetVulnerabilitiesQuery } from "../../generated/graphql"
 import { SELECTED_FILTER_PREFIX } from "../../constants"
 import { VulnerabilitiesSearchParams } from "../../routes/vulnerabilities"
 import { IssuesCountsType } from "../types"
+import { isEmpty, omit } from "../../utils"
 
 const DEFAULT_COUNT = 0
 
@@ -37,17 +38,14 @@ export function extractFilterSettingsFromSearchParams(searchParams: Vulnerabilit
   }
 }
 
-export function getNormalizedFilters(data: GetVulnerabilityFiltersQuery | undefined) {
-  if (!data?.VulnerabilityFilterValues) return []
-  const filterValues = data.VulnerabilityFilterValues
-  return Object.entries(filterValues)
-    .filter(([, v]) => v && (v as any).values?.length)
-    .map(([filterName, v]: any) => ({
-      filterName,
-      displayName: (v as any).displayName,
-      values: (v as any).values?.filter((value: any) => value !== null) || [],
-    }))
-}
+export const getNormalizedFilters = (data: GetVulnerabilityFiltersQuery | undefined | null): Filter[] =>
+  isEmpty(data) || isEmpty(data?.VulnerabilityFilterValues)
+    ? []
+    : Object.values(omit(data!.VulnerabilityFilterValues!, ["__typename"])).map((filter) => ({
+        displayName: filter?.displayName || "",
+        filterName: filter?.filterName || "",
+        values: filter?.values?.filter((value) => value !== null) || [],
+      }))
 
 export function sanitizeFilterSettings(filters: any, filterSettings: FilterSettings) {
   // Only keep filters that are supported by the backend
diff --git a/apps/heureka/src/components/common/Filters/FilterSelect.test.tsx b/apps/heureka/src/components/common/Filters/FilterSelect.test.tsx
@@ -7,10 +7,10 @@ import React from "react"
 import { describe, it, expect, vi } from "vitest"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { FilterSelect } from "./FilterSelect"
 import { AppShellProvider } from "@cloudoperators/juno-ui-components/index"
+import { FilterSelect } from "./FilterSelect"
 
-const mockFilters = [
+const mockFiltersPromise = Promise.resolve([
   {
     displayName: "Category",
     filterName: "category",
@@ -26,7 +26,7 @@ const mockFilters = [
     filterName: "region",
     values: ["America", "Europe", "Asia"],
   },
-]
+])
 
 const mockOnChange = vi.fn()
 
@@ -38,7 +38,7 @@ describe("FiltersSelect", () => {
   it.skip("should render the component with filter select dropdown", async () => {
     render(
       <AppShellProvider shadowRoot={false}>
-        <FilterSelect filters={mockFilters} onChange={mockOnChange} />
+        <FilterSelect filtersPromise={mockFiltersPromise} onChange={mockOnChange} />
       </AppShellProvider>
     )
 
@@ -52,7 +52,7 @@ describe("FiltersSelect", () => {
   it.skip("displays all filter options in the select dropdown", async () => {
     render(
       <AppShellProvider shadowRoot={false}>
-        <FilterSelect filters={mockFilters} onChange={mockOnChange} />
+        <FilterSelect filtersPromise={mockFiltersPromise} onChange={mockOnChange} />
       </AppShellProvider>
     )
 
@@ -65,7 +65,7 @@ describe("FiltersSelect", () => {
     const user = userEvent.setup({ delay: 0 })
     render(
       <AppShellProvider shadowRoot={false}>
-        <FilterSelect filters={mockFilters} onChange={mockOnChange} />
+        <FilterSelect filtersPromise={mockFiltersPromise} onChange={mockOnChange} />
       </AppShellProvider>
     )
 
diff --git a/apps/heureka/src/components/common/Filters/FilterSelect.tsx b/apps/heureka/src/components/common/Filters/FilterSelect.tsx
@@ -3,22 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState } from "react"
+import React, { use, useCallback, useState } from "react"
 import { isEmpty } from "../../../utils"
 import { InputGroup, ComboBox, ComboBoxOption, SelectOption, Select, Stack } from "@cloudoperators/juno-ui-components"
 import { Filter, SelectedFilter } from "./types"
 
 type FilterSelectProps = {
-  filters: Filter[]
+  filtersPromise: Promise<Filter[]>
   onChange: (filter: SelectedFilter) => void
 }
 
-export const FilterSelect = ({ filters, onChange }: FilterSelectProps) => {
+export const FilterSelect = ({ filtersPromise, onChange }: FilterSelectProps) => {
   const [selectedFilterName, setSelectedFilterName] = useState<string>("")
   const [selectedFilterValue, setSelectedFilterValue] = useState<string>("")
-
+  const filters = use(filtersPromise)
   // first filter gets the values, second one filters emtpy values
-  const filterValues: string[] | undefined = filters
+  const filterValues = filters
     .find((filter) => filter.filterName === selectedFilterName)
     ?.values?.filter((value) => value)
 
diff --git a/apps/heureka/src/components/common/Filters/LoadingFilterSelect.test.tsx b/apps/heureka/src/components/common/Filters/LoadingFilterSelect.test.tsx
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { LoadingFilterSelect } from "./LoadingFilterSelect"
+import { AppShellProvider } from "@cloudoperators/juno-ui-components/index"
+
+const renderComponent = () => {
+  return render(
+    <AppShellProvider shadowRoot={false}>
+      <LoadingFilterSelect />
+    </AppShellProvider>
+  )
+}
+
+describe("LoadingFilterSelect", () => {
+  it("renders the loading filter select component", () => {
+    renderComponent()
+    expect(screen.getByRole("combobox")).toBeInTheDocument()
+  })
+})
diff --git a/apps/heureka/src/components/common/Filters/LoadingFilterSelect.tsx b/apps/heureka/src/components/common/Filters/LoadingFilterSelect.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { Stack, InputGroup, Select, ComboBox } from "@cloudoperators/juno-ui-components/index"
+
+export const LoadingFilterSelect = () => (
+  <Stack alignment="center" gap="8">
+    <InputGroup>
+      <Select
+        loading
+        className="filter-label-select w-64 mb-0"
+        name="filter"
+        data-testid="select-filterValue"
+        label="Filter"
+      ></Select>
+      <ComboBox
+        disabled
+        className="filter-value-select w-64 bg-theme-background-lvl-0"
+        name="filterValue"
+        data-testid="combobox-filterValue"
+      ></ComboBox>
+    </InputGroup>
+  </Stack>
+)
diff --git a/apps/heureka/src/components/common/Filters/index.test.tsx b/apps/heureka/src/components/common/Filters/index.test.tsx
@@ -6,8 +6,8 @@
 import React from "react"
 import { cleanup, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { Filters, FiltersProps } from "./index"
 import { AppShellProvider } from "@cloudoperators/juno-ui-components/index"
+import { Filters, FiltersProps } from "./index"
 
 const filters = [
   {
@@ -27,16 +27,18 @@ const filters = [
   },
 ]
 
+const filtersPromise = Promise.resolve(filters)
+
 const filterSettings = {
   selectedFilters: [],
   searchTerm: "",
 }
 
-const renderShell = ({ filters, filterSettings, onFilterChange }: FiltersProps) => ({
+const renderShell = ({ filtersPromise, filterSettings, onFilterChange }: FiltersProps) => ({
   user: userEvent.setup({ delay: 0 }),
   ...render(
     <AppShellProvider shadowRoot={false}>
-      <Filters filters={filters} filterSettings={filterSettings} onFilterChange={onFilterChange} />
+      <Filters filtersPromise={filtersPromise} filterSettings={filterSettings} onFilterChange={onFilterChange} />
     </AppShellProvider>
   ),
 })
@@ -48,15 +50,15 @@ describe("Filters", () => {
   })
 
   it.skip("renders the component with search, select and combobox", async () => {
-    renderShell({ filters, filterSettings, onFilterChange: vi.fn() })
+    renderShell({ filtersPromise, filterSettings, onFilterChange: vi.fn() })
     expect(await screen.findByTestId("select-filterValue")).toBeInTheDocument()
     expect(await screen.findByTestId("combobox-filterValue")).toBeInTheDocument()
     expect(await screen.findByTestId("searchbar")).toBeInTheDocument()
   })
 
   it.skip("should allow filtering by text", async () => {
     const onFilterChangeSpy = vi.fn()
-    const { user } = renderShell({ filters, filterSettings, onFilterChange: onFilterChangeSpy })
+    const { user } = renderShell({ filtersPromise, filterSettings, onFilterChange: onFilterChangeSpy })
     const searchbox = await screen.findByRole("searchbox")
     await user.type(searchbox, "Europe")
     const searchButton = await screen.findByRole("button", { name: "Search" })
@@ -71,7 +73,7 @@ describe("Filters", () => {
 
   it.skip("should select filter and filter value", async () => {
     const onFilterChangeSpy = vi.fn()
-    const { user } = renderShell({ filters, filterSettings, onFilterChange: onFilterChangeSpy })
+    const { user } = renderShell({ filtersPromise, filterSettings, onFilterChange: onFilterChangeSpy })
 
     const filterSelect = await screen.findByTestId("select-filterValue")
     await user.click(filterSelect)
diff --git a/apps/heureka/src/components/common/Filters/index.tsx b/apps/heureka/src/components/common/Filters/index.tsx
@@ -3,20 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from "react"
+import React, { useCallback, Suspense } from "react"
 import { Button, InputGroup, SearchInput, Stack } from "@cloudoperators/juno-ui-components"
 import { FilterSelect } from "./FilterSelect"
 import { Filter, FilterSettings, SelectedFilter } from "./types"
 import { SelectedFilters } from "./SelectedFilters"
+import { LoadingFilterSelect } from "./LoadingFilterSelect"
+import { ErrorBoundary } from "../ErrorBoundary"
 
 export type FiltersProps = {
   searchInputPlaceholder?: string
-  filters: Filter[]
+  filtersPromise: Promise<Filter[]>
   filterSettings: FilterSettings
   onFilterChange: (filterSettings: FilterSettings) => void
 }
 
-export const Filters = ({ filters, filterSettings, onFilterChange, searchInputPlaceholder }: FiltersProps) => {
+export const Filters = ({ filtersPromise, filterSettings, onFilterChange, searchInputPlaceholder }: FiltersProps) => {
   const handleFilterDelete = useCallback(
     (filterToRemove: SelectedFilter) => {
       onFilterChange({
@@ -33,21 +35,25 @@ export const Filters = ({ filters, filterSettings, onFilterChange, searchInputPl
     <Stack direction="vertical" gap="4" className="bg-theme-background-lvl-1 py-2 px-4 ">
       <Stack alignment="center" gap="4">
         <InputGroup>
-          <FilterSelect
-            filters={filters}
-            onChange={(selectedFilter) => {
-              const filterExists = filterSettings.selectedFilters?.some(
-                (filter) => filter.name === selectedFilter.name && filter.value === selectedFilter.value
-              )
-              //only add the filter if it does not already exist
-              if (!filterExists) {
-                onFilterChange({
-                  ...filterSettings,
-                  selectedFilters: [...(filterSettings.selectedFilters || []), selectedFilter],
-                })
-              }
-            }}
-          />
+          <ErrorBoundary displayErrorMessage>
+            <Suspense fallback={<LoadingFilterSelect />}>
+              <FilterSelect
+                filtersPromise={filtersPromise}
+                onChange={(selectedFilter) => {
+                  const filterExists = filterSettings.selectedFilters?.some(
+                    (filter) => filter.name === selectedFilter.name && filter.value === selectedFilter.value
+                  )
+                  //only add the filter if it does not already exist
+                  if (!filterExists) {
+                    onFilterChange({
+                      ...filterSettings,
+                      selectedFilters: [...(filterSettings.selectedFilters || []), selectedFilter],
+                    })
+                  }
+                }}
+              />
+            </Suspense>
+          </ErrorBoundary>
         </InputGroup>
         <Button
           label="Clear all"
diff --git a/apps/heureka/src/components/common/Navigation.tsx b/apps/heureka/src/components/common/Navigation.tsx
diff --git a/apps/heureka/src/generated/graphql.ts b/apps/heureka/src/generated/graphql.ts
diff --git a/apps/heureka/src/routes/services/index.tsx b/apps/heureka/src/routes/services/index.tsx
diff --git a/apps/heureka/src/routes/vulnerabilities/index.tsx b/apps/heureka/src/routes/vulnerabilities/index.tsx
