fix(supernova): activeFilters are not rendered if value is not an array

.changeset/clean-plums-notice.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-supernova": patch
+---
+
+fix(supernova): non array values in the activeFilter are now ignored and not rendered

.changeset/plenty-windows-check.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-supernova": patch
+---
+
+InitialFilters which value is not an Array are not added to ActiveFilters

apps/supernova/src/components/filters/FilterPills.jsx

@@ -30,10 +30,10 @@ const FilterPills = () => {
   return (
     <Stack gap="2" wrap={true}>
       {Object.entries(activeFilters).map(([key, filterItems]) => {
-        return filterItems.map((item) =>
+        return filterItems?.map((item) =>
           pausedFilters[key]?.includes(item) ? (
             <Pill
-              className="bg-theme-background-lvl-4 opacity-70	"
+              className="bg-theme-background-lvl-4 opacity-70"
               pillKey={key}
               pillValue={item}
               closeable

apps/supernova/src/lib/createFiltersSlice.jsx

@@ -28,11 +28,21 @@ const parsePredefinedFilters = (predefinedFilters) => {
 const parseInitialFilters = (initialFilters, filterLabels) => {
   if (!initialFilters) return initialFiltersState.initialFilters
 
-  if (typeof initialFilters !== "object") {
+  if (typeof initialFilters !== "object" || initialFilters === null) {
     console.warn("[supernova]::parseInitialFilters: initialFilters object is not an object")
     return {}
   }
 
+  // Check if all values are arrays
+  initialFilters = Object.entries(initialFilters).reduce((acc, [key, value]) => {
+    if (Array.isArray(value)) {
+      acc[key] = value // valid key-value pair
+    } else {
+      console.warn(`[supernova]::parseInitialFilters: Value for "${key}" is not an Array.`)
+    }
+    return acc
+  }, {})
+
   // Check if all keys are in filterLabelValues
   if (!Object.keys(initialFilters).every((key) => filterLabels.includes(key))) {
     console.warn(

apps/supernova/src/lib/createFiltersSlice.test.jsx

@@ -310,6 +310,37 @@ describe("createFiltersSlice", () => {
       spy.mockRestore()
     })
 
+    it("warns because some keys are not in filterLabels and filters initialFilters to only include valid keys", () => {
+      const spy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+      const props = {
+        initialFilters: {
+          region: "europe",
+          app: ["frontendapp", "monitoring", "store"],
+        },
+        filterLabels: ["region", "app"],
+      }
+
+      const expectedFilters = {
+        app: ["frontendapp", "monitoring", "store"],
+      } // Only app is a valid filter label, because region is not an array, we except it to be filtered out
+
+      const wrapper = ({ children }) => <StoreProvider options={props}>{children}</StoreProvider>
+
+      const store = renderHook(
+        () => ({
+          activeFilters: useActiveFilters(),
+        }),
+        { wrapper }
+      )
+
+      expect(spy).toHaveBeenCalledWith(
+        expect.stringContaining('[supernova]::parseInitialFilters: Value for "region" is not an Array.')
+      )
+      expect(store.result.current.activeFilters).toEqual(expectedFilters)
+      spy.mockRestore()
+    })
+
     it("warns because initial filters is not a object", () => {
       const spy = vi.spyOn(console, "warn").mockImplementation(() => {})
 
@@ -339,6 +370,35 @@ describe("createFiltersSlice", () => {
       spy.mockRestore()
     })
 
+    it("warns because initial filters is not a object", () => {
+      const spy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+      const props = {
+        initialFilters: undefined,
+        filterLabels: ["region"],
+      }
+
+      const wrapper = ({ children }) => <StoreProvider options={props}>{children}</StoreProvider>
+
+      renderHook(
+        () => ({
+          activeFilters: useActiveFilters(),
+        }),
+        { wrapper }
+      )
+
+      const store = renderHook(
+        () => ({
+          activeFilters: useActiveFilters(),
+        }),
+        { wrapper }
+      )
+
+      expect(store.result.current.activeFilters).toEqual({})
+      expect(spy).toHaveBeenCalledWith("[supernova]::validateExcludedLabels: labels object is not an array of strings")
+      spy.mockRestore()
+    })
+
     it("initialFilters is empty", () => {
       const props = {
         initialFilters: {},