From 2679c42e5616ddea635e7ba10ca4cd5e622669ee Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 19 Mar 2025 20:06:16 +0000
Subject: [PATCH] [VAULT-34704] UI: update `FilterInput` component to use
 `Hds::Form::TextInput` (#29946)

* [UI] replaced internal implementation of `FilterInput` with equivalent `Hds::Form::TextInput::Base` (#34704)

* [UI] updated `FilterInput` instances to use correct `Hds::Form::TextInput::Base` arguments/API (#34704)

* [UI] updated `FilterInput` integration tests (#34704)
---
 ui/lib/core/addon/components/filter-input.hbs | 14 ++++++-----
 ui/lib/core/addon/components/filter-input.ts  | 11 +--------
 .../addon/components/kv-suggestion-input.hbs  |  5 ++--
 .../ldap/addon/components/page/libraries.hbs  |  2 +-
 ui/lib/ldap/addon/components/page/roles.hbs   |  3 +--
 .../components/secrets/page/destinations.hbs  |  5 ++--
 .../page/destinations/destination/sync.hbs    |  4 ++--
 .../components/filter-input-test.js           | 23 +------------------
 8 files changed, 18 insertions(+), 49 deletions(-)

diff --git a/ui/lib/core/addon/components/filter-input.hbs b/ui/lib/core/addon/components/filter-input.hbs
index 172b822109..9782e10120 100644
--- a/ui/lib/core/addon/components/filter-input.hbs
+++ b/ui/lib/core/addon/components/filter-input.hbs
@@ -3,9 +3,11 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<div class="control {{unless @hideIcon 'has-icons-left'}}" data-test-filter-input-container>
-  <input class="filter input" ...attributes {{on "input" this.onInput}} {{did-insert this.focus}} data-test-filter-input />
-  {{#unless @hideIcon}}
-    <Icon @name="search" class="search-icon has-text-grey-light" data-test-filter-input-icon />
-  {{/unless}}
-</div>
\ No newline at end of file
+<Hds::Form::TextInput::Base
+  @type="search"
+  @id={{@id}}
+  @value={{@value}}
+  {{on "input" this.onInput}}
+  data-test-filter-input
+  ...attributes
+/>
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/filter-input.ts b/ui/lib/core/addon/components/filter-input.ts
index 00ba0bf585..3cbddda1ef 100644
--- a/ui/lib/core/addon/components/filter-input.ts
+++ b/ui/lib/core/addon/components/filter-input.ts
@@ -5,25 +5,16 @@
 
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { debounce, next } from '@ember/runloop';
+import { debounce } from '@ember/runloop';
 
 import type { HTMLElementEvent } from 'vault/forms';
 
 interface Args {
   wait?: number; // defaults to 500
-  autofocus?: boolean; // initially focus the input on did-insert
-  hideIcon?: boolean; // hide the search icon in the input
   onInput(value: string): void; // invoked with input value after debounce timer expires
 }
 
 export default class FilterInputComponent extends Component<Args> {
-  @action
-  focus(elem: HTMLElement) {
-    if (this.args.autofocus) {
-      next(() => elem.focus());
-    }
-  }
-
   @action
   onInput(event: HTMLElementEvent<HTMLInputElement>) {
     const wait = this.args.wait || 500;
diff --git a/ui/lib/core/addon/components/kv-suggestion-input.hbs b/ui/lib/core/addon/components/kv-suggestion-input.hbs
index 83b67c8a1d..37e66737e2 100644
--- a/ui/lib/core/addon/components/kv-suggestion-input.hbs
+++ b/ui/lib/core/addon/components/kv-suggestion-input.hbs
@@ -7,11 +7,10 @@
     <FormFieldLabel for={{this.inputId}} @label={{@label}} @subText={{@subText}} />
   {{/if}}
   <FilterInput
-    id={{this.inputId}}
+    @id={{this.inputId}}
     placeholder="Path to secret"
-    value={{@value}}
+    @value={{@value}}
     disabled={{not @mountPath}}
-    @hideIcon={{true}}
     @onInput={{this.onInput}}
     {{! used to trigger dropdown to open }}
     {{on "click" this.onInputClick}}
diff --git a/ui/lib/ldap/addon/components/page/libraries.hbs b/ui/lib/ldap/addon/components/page/libraries.hbs
index 635442a6e8..138d5945fd 100644
--- a/ui/lib/ldap/addon/components/page/libraries.hbs
+++ b/ui/lib/ldap/addon/components/page/libraries.hbs
@@ -9,7 +9,7 @@
       <FilterInput
         aria-label="Filter libraries"
         placeholder="Filter libraries"
-        value={{this.filterValue}}
+        @value={{this.filterValue}}
         @wait={{200}}
         @onInput={{fn (mut this.filterValue)}}
       />
diff --git a/ui/lib/ldap/addon/components/page/roles.hbs b/ui/lib/ldap/addon/components/page/roles.hbs
index 4b5c65f7a9..80047da5ff 100644
--- a/ui/lib/ldap/addon/components/page/roles.hbs
+++ b/ui/lib/ldap/addon/components/page/roles.hbs
@@ -9,8 +9,7 @@
       <FilterInput
         aria-label="Filter roles"
         placeholder="Filter roles"
-        value={{@pageFilter}}
-        @autofocus={{true}}
+        @value={{@pageFilter}}
         @onInput={{this.onFilterChange}}
       />
     {{/if}}
diff --git a/ui/lib/sync/addon/components/secrets/page/destinations.hbs b/ui/lib/sync/addon/components/secrets/page/destinations.hbs
index 94352d973f..d5c5214f4d 100644
--- a/ui/lib/sync/addon/components/secrets/page/destinations.hbs
+++ b/ui/lib/sync/addon/components/secrets/page/destinations.hbs
@@ -32,12 +32,11 @@
     />
     <div class="has-left-margin-s">
       <FilterInput
-        id="name-filter"
+        @id="name-filter"
         aria-label="Filter by name"
         placeholder="Filter by name"
-        value={{@nameFilter}}
+        @value={{@nameFilter}}
         data-test-filter="name"
-        @autofocus={{true}}
         @onInput={{fn this.onFilterChange "name"}}
       />
     </div>
diff --git a/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs b/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs
index 53a608a226..521faffa4a 100644
--- a/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs
+++ b/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs
@@ -59,9 +59,9 @@
       {{else}}
         <FormFieldLabel for="kv-mount-input" @label="Enter an existing KV engine mount" />
         <FilterInput
-          id="kv-mount-input"
+          @id="kv-mount-input"
           placeholder="KV engine mount path"
-          value={{this.mountPath}}
+          @value={{this.mountPath}}
           @onInput={{fn (mut this.mountPath)}}
           data-test-sync-mount-input
         />
diff --git a/ui/tests/integration/components/filter-input-test.js b/ui/tests/integration/components/filter-input-test.js
index 1760e9c8ba..879e87ace2 100644
--- a/ui/tests/integration/components/filter-input-test.js
+++ b/ui/tests/integration/components/filter-input-test.js
@@ -17,7 +17,7 @@ module('Integration | Component | filter-input', function (hooks) {
     this.onClick = () => assert.ok(true, 'on click modifier passed to input element');
 
     await render(
-      hbs`<FilterInput aria-label="test-component" placeholder="Filter roles" value="foo" {{on "click" this.onClick}} />`
+      hbs`<FilterInput aria-label="test-component" placeholder="Filter roles" @value="foo" {{on "click" this.onClick}} />`
     );
     await click('[data-test-filter-input]');
     assert
@@ -26,11 +26,6 @@ module('Integration | Component | filter-input', function (hooks) {
     assert.dom('[data-test-filter-input]').hasValue('foo', 'Value passed to input element');
   });
 
-  test('it should focus input on insert', async function (assert) {
-    await render(hbs`<FilterInput id="hello" aria-label="test-component" @autofocus={{true}} />`);
-    assert.dom('[data-test-filter-input]').isFocused('Input is focussed');
-  });
-
   test('it should send input event', async function (assert) {
     assert.expect(1);
 
@@ -41,20 +36,4 @@ module('Integration | Component | filter-input', function (hooks) {
     await render(hbs`<FilterInput aria-label="test-component" @wait={{0}} @onInput={{this.onInput}} />`);
     await fillIn('[data-test-filter-input]', 'foo');
   });
-
-  test('it should render icon', async function (assert) {
-    await render(hbs`<FilterInput aria-label="test-component" />`);
-    assert
-      .dom('[data-test-filter-input-container]')
-      .hasClass('has-icons-left', 'Icon class exists on container');
-    assert.dom('[data-test-filter-input-icon]').exists('Icon renders');
-  });
-
-  test('it should hide icon', async function (assert) {
-    await render(hbs`<FilterInput aria-label="test-component" @hideIcon={{true}} />`);
-    assert
-      .dom('[data-test-filter-input-container]')
-      .doesNotHaveClass('has-icons-left', 'Icon class does not exist on container');
-    assert.dom('[data-test-filter-input-icon]').doesNotExist('Icon is hidden');
-  });
 });