Merge pull request #2315 from Particular/john/small_improvements

Fixing typescript typings

Author: johnsimons

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,16 +1,23 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
+import debounce from "lodash/debounce";
+
 const model = defineModel<string>({ required: true });
-defineProps({
-  placeholder: {
-    type: String,
-    default: "Filter by name...", // Default value
-  },
+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="placeholder" 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

@@ -28,7 +28,7 @@ const filteredHeaders = computed(() => {
         <div class="text-search-container">
           <div class="text-search">
             <div class="filter-group">
-              <FilterInput v-model="searchTerm" aria-label="Filter by name" :placeholder="'Search for a header key or value...'" />
+              <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
             </div>
           </div>
         </div>

src/Frontend/src/components/messages/HeadersView.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", () => {
     [