chore(doop): prevent mutations form original violationGroups when filtering improve debouncing of search filter (#1199)

* chore(doop): remove headline to allign with the other plugins

* chore(doop): debounce filter correctly and clean timouts

* chore(doop): No mutate original violationGroups

* chore(doop): added changeset

* chore(doop): added headers

* chore(doop): removed log line

Author: ArtieReus

.changeset/lovely-hats-hammer.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-doop": patch
+---
+
+Prevent mutations form original violationGroups data when filtering and improved debouncing of search filter

.gitignore

@@ -20,3 +20,5 @@ vite.config.*.timestamp-*
 .env
 act_*.json
 .secret
+
+.out-of-code-insights

apps/doop/src/App.tsx

@@ -107,10 +107,6 @@ const App = (props: AppProps = {}) => {
   return (
     <MessagesProvider>
       <AppShell pageHeader={`Doop`} embedded={props.embedded === true}>
-        <ContentHeading
-          // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '{}'... Remove this comment to see the full error message
-          heading={`Decentralized Observer of Policies  ${props.displayName ? ` - ${props.displayName}` : ""}`}
-        />
         <QueryClientProvider client={queryClient}>
           <StrictMode>
             <RouterProvider basepath={props.basePath || "/"} router={router} />

apps/doop/src/components/filters/FilterSelect.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from "react"
+import React, { useState, useRef } from "react"
 
 import {
   Button,
@@ -30,22 +30,23 @@ const FilterSelect = () => {
   const { add: addFilter, removeAll, setSearchTerm } = useFiltersActions()
   const searchValue = useFiltersSearchTerm()
   const activeFilters = useFiltersActive() || []
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  const handleSearchChange = (value: any) => {
-    // debounce setSearchTerm to avoid unnecessary re-renders
-    const debouncedSearchTerm = setTimeout(() => {
-      setSearchTerm(value.target.value.trim())
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const term = e.target.value.trim()
+
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+
+    debounceRef.current = setTimeout(() => {
+      setSearchTerm(term)
       navigate({
         to: "/violations",
         search: (prev) => ({
           ...prev,
-          searchTerm: value.target.value.trim(),
+          searchTerm: term,
         }),
       })
     }, 500)
-
-    // clear timeout if we have a new value
-    return () => clearTimeout(debouncedSearchTerm)
   }
 
   const handleFilterValueChange = (value: string) => {

apps/doop/src/lib/filterViolations.test.ts

@@ -0,0 +1,131 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { filterViolations } from "./filterViolations"
+
+describe("filterViolations", () => {
+  let originalViolationGroups: any[]
+  let clusterIdentities: any[]
+
+  beforeEach(() => {
+    originalViolationGroups = [
+      {
+        id: "vg1",
+        constraints: [
+          {
+            metadata: { severity: "debug", name: "cpu" },
+            violation_groups: [{ pattern: { object_identity: { service: "alpha" } }, instances: [{ cluster: "c1" }] }],
+          },
+          {
+            metadata: { severity: "critical", name: "memory" },
+            violation_groups: [{ pattern: { object_identity: { service: "beta" } }, instances: [{ cluster: "c2" }] }],
+          },
+        ],
+      },
+      {
+        id: "vg2",
+        constraints: [
+          {
+            metadata: { severity: "warning", name: "disk" },
+            violation_groups: [{ pattern: { object_identity: { service: "gamma" } }, instances: [{ cluster: "c1" }] }],
+          },
+        ],
+      },
+    ]
+
+    clusterIdentities = [
+      { cluster: "c1", region: "eu" },
+      { cluster: "c2", region: "us" },
+    ]
+  })
+
+  it("filters out debug severities when showDebugSeverities is false", () => {
+    const inputCopy = JSON.parse(JSON.stringify(originalViolationGroups))
+    const result = filterViolations({
+      violationGroups: inputCopy,
+      clusterIdentities,
+      activeFilters: [],
+      searchTerm: "",
+      showDebugSeverities: false,
+    })
+
+    expect(result).toHaveLength(2)
+    expect(result[0].constraints).toHaveLength(1)
+    expect(result[0].constraints[0].metadata.severity).toBe("critical")
+
+    // Check original input is not modified
+    expect(inputCopy[0].constraints).toHaveLength(2)
+  })
+
+  it("filters by active filters (severity and check)", () => {
+    const activeFilters = [
+      { key: "violation_group:severity", value: "warning" },
+      { key: "check:service", value: "gamma" },
+    ]
+
+    const inputCopy = JSON.parse(JSON.stringify(originalViolationGroups))
+    const result = filterViolations({
+      violationGroups: inputCopy,
+      clusterIdentities,
+      activeFilters,
+      searchTerm: "",
+      showDebugSeverities: true,
+    })
+
+    expect(result).toHaveLength(1)
+    expect(result[0].id).toBe("vg2")
+    expect(result[0].constraints[0].metadata.name).toBe("disk")
+
+    // Original input is intact
+    expect(inputCopy[1].constraints[0].metadata.name).toBe("disk")
+  })
+
+  it("filters by search term", () => {
+    const inputCopy = JSON.parse(JSON.stringify(originalViolationGroups))
+    const result = filterViolations({
+      violationGroups: inputCopy,
+      clusterIdentities,
+      activeFilters: [],
+      searchTerm: "memory",
+      showDebugSeverities: true,
+    })
+
+    expect(result).toHaveLength(1)
+    expect(result[0].constraints[0].metadata.name).toBe("memory")
+
+    // Original input unchanged
+    expect(inputCopy[0].constraints).toHaveLength(2)
+  })
+
+  it("applies all filters together", () => {
+    const activeFilters = [{ key: "check:service", value: "beta" }]
+    const inputCopy = JSON.parse(JSON.stringify(originalViolationGroups))
+    const result = filterViolations({
+      violationGroups: inputCopy,
+      clusterIdentities,
+      activeFilters,
+      searchTerm: "memory",
+      showDebugSeverities: false,
+    })
+
+    expect(result).toHaveLength(1)
+    expect(result[0].constraints[0].metadata.name).toBe("memory")
+
+    // Original input unchanged !!!
+    expect(inputCopy[0].constraints.map((c: any) => c.metadata.name)).toEqual(["cpu", "memory"])
+  })
+
+  it("returns empty array if nothing matches", () => {
+    const result = filterViolations({
+      violationGroups: JSON.parse(JSON.stringify(originalViolationGroups)),
+      clusterIdentities,
+      activeFilters: [{ key: "check:service", value: "nonexistent" }],
+      searchTerm: "nope",
+      showDebugSeverities: false,
+    })
+
+    expect(result).toEqual([])
+  })
+})