[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

@@ -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>
+<Hds::Form::TextInput::Base
+  @type="search"
+  @id={{@id}}
+  @value={{@value}}
+  {{on "input" this.onInput}}
+  data-test-filter-input
+  ...attributes
+/>

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;

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

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)}}
       />

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

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>

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
         />

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');
-  });
 });