UI bug fix: Kubernetes Role filter replace with explicit input filter (#27178)

* initial changes for new component template only handle actions in parent

* add changelog

* fix current kubernetes test

* component test

* remove concurrency task

* make div and not form due to testing things

* address pr feedback

* Update ui/tests/integration/components/filter-input-explicit-test.js

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>

* Update filter-input-explicit-test.js

* fix tests

* make it a form and fix test:

---------

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>

ui/lib/kubernetes/addon/components/page/roles.hbs

@@ -6,8 +6,11 @@
 <TabPageHeader
   @model={{@backend}}
   @filterRoles={{not @promptConfig}}
-  @rolesFilterValue={{@filterValue}}
+  @query={{this.query}}
   @breadcrumbs={{@breadcrumbs}}
+  @handleSearch={{this.handleSearch}}
+  @handleInput={{this.handleInput}}
+  @handleKeyDown={{this.handleKeyDown}}
 >
   {{#unless @promptConfig}}
     <ToolbarLink @route="roles.create" @type="add" data-test-toolbar-roles-action>

ui/lib/kubernetes/addon/components/page/roles.js

@@ -9,24 +9,58 @@ import { action } from '@ember/object';
 import { getOwner } from '@ember/application';
 import errorMessage from 'vault/utils/error-message';
 import { tracked } from '@glimmer/tracking';
+import keys from 'core/utils/key-codes';
 
 /**
  * @module Roles
- * RolesPage component is a child component to show list of roles
+ * RolesPage component is a child component to show list of roles.
+ * It also handles the filtering actions of roles.
  *
  * @param {array} roles - array of roles
  * @param {boolean} promptConfig - whether or not to display config cta
- * @param {array} pageFilter - array of filtered roles
+ * @param {string} filterValue - value of queryParam pageFilter
  * @param {array} breadcrumbs - breadcrumbs as an array of objects that contain label and route
  */
 export default class RolesPageComponent extends Component {
   @service flashMessages;
+  @service router;
+  @tracked query;
   @tracked roleToDelete = null;
 
+  constructor() {
+    super(...arguments);
+    this.query = this.args.filterValue;
+  }
+
   get mountPoint() {
     return getOwner(this).mountPoint;
   }
 
+  navigate(pageFilter) {
+    const route = `${this.mountPoint}.roles.index`;
+    const args = [route, { queryParams: { pageFilter: pageFilter || null } }];
+    this.router.transitionTo(...args);
+  }
+
+  @action
+  handleKeyDown(event) {
+    if (event.keyCode === keys.ESC) {
+      // On escape, transition to roles index route.
+      this.navigate();
+    }
+    // ignore all other key events
+  }
+
+  @action handleInput(evt) {
+    this.query = evt.target.value;
+  }
+
+  @action
+  handleSearch(evt) {
+    evt.preventDefault();
+    this.navigate(this.query);
+  }
+
   @action
   async onDelete(model) {
     try {

ui/lib/kubernetes/addon/components/tab-page-header.hbs

@@ -28,10 +28,12 @@
 <Toolbar aria-label="items for managing kubernetes items">
   {{#if @filterRoles}}
     <ToolbarFilters>
-      <NavigateInput
-        @filter={{@rolesFilterValue}}
+      <FilterInputExplicit
+        @query={{@query}}
         @placeholder="Filter roles"
-        @urls={{hash list="vault.cluster.secrets.backend.kubernetes.roles"}}
+        @handleSearch={{@handleSearch}}
+        @handleInput={{@handleInput}}
+        @handleKeyDown={{@handleKeyDown}}
       />
     </ToolbarFilters>
   {{/if}}