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, }, };