From 1135f88cb7ed6a6dbe01f953129f365a3532e903 Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Mon, 27 Nov 2023 15:31:21 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20debouncing=20for?=
 =?UTF-8?q?=20the=20search=20bar=20(#2008)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11851
---
 addons/core/addon/decorators/debounce.js      | 26 +++++++++++++++++++
 addons/core/app/decorators/debounce.js        |  6 +++++
 .../scopes/scope/projects/targets/index.js    |  5 ++--
 .../scopes/scope/projects/targets/index.js    |  1 +
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 addons/core/addon/decorators/debounce.js
 create mode 100644 addons/core/app/decorators/debounce.js

diff --git a/addons/core/addon/decorators/debounce.js b/addons/core/addon/decorators/debounce.js
new file mode 100644
index 000000000..f7d580c5b
--- /dev/null
+++ b/addons/core/addon/decorators/debounce.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import _debounce from 'lodash/debounce';
+
+/**
+ * Decorates a method whereby calls to the method will be debounced.
+ * @param timeToWait
+ * @param options
+ */
+export function debounce(timeToWait, options) {
+  return function (_target, _propertyKey, desc) {
+    const method = desc.value;
+
+    // Use a normal function to get the correct `this` for the function caller
+    desc.value = _debounce(
+      async function () {
+        return method.apply(this, arguments);
+      },
+      timeToWait,
+      options,
+    );
+  };
+}
diff --git a/addons/core/app/decorators/debounce.js b/addons/core/app/decorators/debounce.js
new file mode 100644
index 000000000..a7411318d
--- /dev/null
+++ b/addons/core/app/decorators/debounce.js
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'core/decorators/debounce';
diff --git a/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js b/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js
index 90bec2a01..f09d900ff 100644
--- a/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js
+++ b/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js
@@ -8,6 +8,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { loading } from 'ember-loading';
 import { tracked } from '@glimmer/tracking';
+import { debounce } from 'core/decorators/debounce';
 
 export default class ScopesScopeProjectsTargetsIndexController extends Controller {
   // =services
@@ -133,11 +134,9 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
    * @param {object} event
    */
   @action
+  @debounce(250)
   handleSearchInput(event) {
     const { value } = event.target;
     this.search = value;
-    this.router.replaceWith({
-      queryParams: { ...this.queryParams, search: this.search },
-    });
   }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
index 5de35665f..2a8018b6e 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
@@ -21,6 +21,7 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
   queryParams = {
     search: {
       refreshModel: true,
+      replace: true,
     },
   };