Filter filtering

hashicorp · May 23, 2024 · 2c6d679 · 2c6d679
1 parent f8beead
commit 2c6d679
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 1 deletion.
diff --git a/ui/app/controllers/jobs/index.js b/ui/app/controllers/jobs/index.js
@@ -391,6 +391,22 @@ export default class JobsIndexController extends Controller {
     };
   }
 
+  @tracked namespaceFilter = '';
+
+  get shownNamespaces() {
+    return this.namespaceFacet.options.filter((option) =>
+      option.label.toLowerCase().includes(this.namespaceFilter)
+    );
+  }
+
+  /**
+   * Pares down the list of namespaces
+   * @param {InputEvent & { target: HTMLInputElement }} event - The input event
+   */
+  @action filterNamespaces(event) {
+    this.namespaceFilter = event.target.value.toLowerCase();
+  }
+
   get filterFacets() {
     let facets = [this.statusFacet, this.typeFacet];
     if (this.system.shouldShowNodepools) {

diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
@@ -50,7 +50,17 @@
                 @color="secondary"
                 @badge={{get (find-by "checked" true this.namespaceFacet.options) "label"}}
               />
-              {{#each this.namespaceFacet.options as |option|}}
+              <dd.Header @hasDivider={{true}}>
+                <Hds::Form::TextInput::Base
+                  @type="search"
+                  placeholder="Filter Namespaces"
+                  @value={{this.namespaceFilter}}
+                  {{autofocus}}
+                  {{on "input" (action this.filterNamespaces )}}
+                  data-test-namespace-filter-searchbox
+                />
+              </dd.Header>
+              {{#each this.shownNamespaces as |option|}}
                 <dd.Radio
                   name={{option.key}}
                   {{on "change" (fn this.toggleNamespaceOption option dd)}}

diff --git a/ui/tests/acceptance/jobs-list-test.js b/ui/tests/acceptance/jobs-list-test.js
@@ -9,6 +9,7 @@ import {
   settled,
   click,
   triggerKeyEvent,
+  typeIn,
 } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
@@ -1378,6 +1379,68 @@ module('Acceptance | jobs list', function (hooks) {
 
         localStorage.removeItem('nomadPageSize');
       });
+      test('Namespace filter options can be filtered', async function (assert) {
+        localStorage.setItem('nomadPageSize', '10');
+        server.create('namespace', {
+          id: 'default',
+          name: 'default',
+        });
+        server.create('namespace', {
+          id: 'Bonderman',
+          name: 'Bonderman',
+        });
+        server.create('namespace', {
+          id: 'Robertson',
+          name: 'Robertson',
+        });
+        server.create('namespace', {
+          id: 'Rogers',
+          name: 'Rogers',
+        });
+        server.create('namespace', {
+          id: 'Verlander',
+          name: 'Verlander',
+        });
+        server.create('namespace', {
+          id: 'Miner',
+          name: 'Miner',
+        });
+        server.createList('job', 3, {
+          createAllocations: false,
+          namespaceId: 'default',
+          modifyIndex: 10,
+        });
+        server.createList('job', 3, {
+          createAllocations: false,
+          namespaceId: 'Bonderman',
+          modifyIndex: 10,
+        });
+        server.createList('job', 2, {
+          createAllocations: false,
+          namespaceId: 'Verlander',
+          modifyIndex: 10,
+        });
+        server.createList('job', 2, {
+          createAllocations: false,
+          namespaceId: 'Rogers',
+          modifyIndex: 10,
+        });
+        await JobsList.visit();
+
+        await JobsList.facets.namespace.toggle();
+        assert.dom('[data-test-namespace-filter-searchbox]').exists();
+        // and it should be focused
+        assert.dom('[data-test-namespace-filter-searchbox]').isFocused();
+        // and there should be 7 things there
+        assert.dom('[data-test-dropdown-option]').exists({ count: 7 });
+        await typeIn('[data-test-namespace-filter-searchbox]', 'Bonderman');
+        assert.dom('[data-test-dropdown-option]').exists({ count: 1 });
+        document.querySelector('[data-test-namespace-filter-searchbox]').value =
+          ''; // clear
+        await typeIn('[data-test-namespace-filter-searchbox]', 'n');
+        assert.dom('[data-test-dropdown-option]').exists({ count: 4 });
+        await percySnapshot(assert);
+      });
       test('Namespace filter only shows up if the server has more than one namespace', async function (assert) {
         localStorage.setItem('nomadPageSize', '10');