Merge branch 'master' into reverse_local_events_timeout

# Conflicts:
#	src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue
#	src/Frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue
#	src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue
#	src/Frontend/src/resources/SequenceDiagram/RoutedMessage.ts
#	src/Frontend/src/stores/SequenceDiagramStore.ts

Author: PhilBastian

src/Frontend/package-lock.json

@@ -26,6 +26,7 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
     "memoize-one": "^6.0.0",
     "moment": "^2.30.1",
@@ -48,6 +49,7 @@
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/bootstrap": "^5.2.10",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitest/coverage-v8": "^3.0.9",

src/Frontend/package.json

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Tippy, TippyComponent } from "vue-tippy";
-import { useTemplateRef } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -11,14 +11,16 @@ const props = withDefaults(
 );
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
-let timeoutId: number;
+const timeoutId = ref(0);
 
 async function copyToClipboard() {
   await navigator.clipboard.writeText(props.value);
-  window.clearTimeout(timeoutId);
+
   tippyRef.value?.show();
-  timeoutId = window.setTimeout(() => tippyRef.value?.hide(), 3000);
+  timeoutId.value = window.setTimeout(() => tippyRef.value?.hide(), 3000);
 }
+
+watch(timeoutId, (_, previousTimeoutId) => window.clearTimeout(previousTimeoutId));
 </script>
 
 <template>

src/Frontend/src/components/CopyToClipboard.vue

@@ -1,10 +1,23 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
+import debounce from "lodash/debounce";
+
 const model = defineModel<string>({ required: true });
+const props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "filter by name" });
+const localInput = ref<string>(model.value);
+
+const debounceUpdateModel = debounce((value: string) => {
+  model.value = value;
+}, 600);
+
+watch(localInput, (newValue) => {
+  debounceUpdateModel(newValue);
+});
 </script>
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" placeholder="Filter by name..." aria-label="filter by name" class="form-control-static filter-input" v-model="model" />
+    <input type="search" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control-static filter-input" v-model="localInput" />
   </div>
 </template>
 

src/Frontend/src/components/FilterInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
+import FilterInput from "@/components/FilterInput.vue";
 import { computed, ref } from "vue";
 const props = defineProps<{
   message: ExtendedFailedMessage;
@@ -26,7 +27,9 @@ const filteredHeaders = computed(() => {
       <div class="col">
         <div class="text-search-container">
           <div class="text-search">
-            <input type="search" aria-label="Filter by name" v-model="searchTerm" class="form-control format-text" placeholder="Search for a header key or value..." />
+            <div class="filter-group">
+              <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
+            </div>
           </div>
         </div>
       </div>
@@ -76,11 +79,7 @@ const filteredHeaders = computed(() => {
   width: 100%;
   max-width: 40rem;
 }
-.format-text {
-  font-weight: unset;
-  font-size: 14px;
-  min-width: 120px;
-}
+
 .filters {
   background-color: #f3f3f3;
   margin-top: 5px;

src/Frontend/src/components/messages/HeadersView.vue

@@ -22,6 +22,7 @@ interface EndpointSurround {
   stroke: string;
 }
 
+const Endpoint_Width = 260;
 const Endpoint_Gap = 30;
 const Endpoint_Image_Width = 20;
 
@@ -91,7 +92,7 @@ function setEndpointRef(el: SVGTextElement, index: number) {
       :stroke-width="endpoint.surround.strokeWidth"
       :stroke="endpoint.surround.stroke"
     ></rect>
-    <g :transform="`translate(${(endpoint.x ?? Endpoint_Width / 2) - ((endpoint.textWidth ?? 0) + Endpoint_Image_Width) / 2},0)`">
+    <g :transform="`translate(${(endpoint.x ?? Endpoint_Width / 2) - ((endpoint.textWidth ?? 0) + Endpoint_Image_Width) / 2}, 0)`">
       <path fill="var(--gray40)" d="M 0,0 M 18,18 M 0,2 v 14 h 14 v -4 h -6 v -6 h 6 v -4 h -14 M 9,7 v 4 h 9 v -4"></path>
       <text :x="Endpoint_Image_Width" y="10" alignment-baseline="middle" text-anchor="start" :ref="(el) => setEndpointRef(el as SVGTextElement, i)">{{ endpoint.name }}</text>
     </g>

src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue

@@ -1,6 +1,6 @@
 import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
-import { expect } from "vitest";
+import { expect, vi } from "vitest";
 import { getNothingToConfigureStatus } from "./questions/getNothingToConfigureStatus";
 import { navigateToHeartbeatsConfiguration, navigateToUnHealthyHeartbeats } from "./actions/navigateToHeartbeatsTabs";
 import { getEndpointsForConfiguration } from "./questions/getEndpointsForConfiguration";
@@ -12,6 +12,11 @@ import { healthyEndpointTemplate } from "../../mocks/heartbeat-endpoint-template
 import { setHeartbeatFilter } from "./actions/setHeartbeatFilter";
 import { getHeartbeatFilterValue } from "./questions/getHeartbeatFilterValue";
 
+vi.mock("lodash/debounce", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  default: (fn: Function) => fn,
+}));
+
 describe("FEATURE: Heartbeats configuration", () => {
   describe("RULE: A list of all endpoints with the heartbeats plug-in installed should be displayed", () => {
     test("EXAMPLE: With no endpoints, the text 'Nothing to configure' should be displayed", async ({ driver }) => {

src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from "vitest";
+import { vi, expect } from "vitest";
 import { test, describe } from "../../drivers/vitest/driver";
 import { enterFilterString } from "./actions/enterFilterString";
 import { groupEndpointsBy } from "./actions/groupEndpointsBy";
@@ -8,6 +8,11 @@ import { currentFilterValueToBe } from "./questions/currentFilterValueToBe";
 import { endpointsNames } from "./questions/endpointsNames";
 import * as precondition from "../../preconditions";
 
+vi.mock("lodash/debounce", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  default: (fn: Function) => fn,
+}));
+
 describe("FEATURE: Endpoint filtering", () => {
   describe("RULE: List of monitoring endpoints should be filterable by the name", () => {
     [