[ui] Dropdowns on the jobs index page get a max-height and filtering (#…

…20626)

* Adds a max-height to dropdowns lest they get any funny ideas

* Filter filtering

.changelog/20626.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: namespace dropdown gets a search field and supports many namespaces
+```

ui/app/controllers/jobs/index.js

@@ -392,6 +392,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) {

ui/app/templates/jobs/index.hbs

@@ -20,7 +20,7 @@
           />
 
           {{#each this.filterFacets as |group|}}
-            <S.Dropdown data-test-facet={{group.label}} as |dd|>
+            <S.Dropdown data-test-facet={{group.label}} @height="300px" as |dd|>
               <dd.ToggleButton
                 @text={{group.label}}
                 @color="secondary"
@@ -44,13 +44,23 @@
           {{/each}}
 
           {{#if this.system.shouldShowNamespaces}}
-            <S.Dropdown data-test-facet="Namespace" as |dd|>
+            <S.Dropdown data-test-facet="Namespace" @height="300px" as |dd|>
               <dd.ToggleButton
                 @text="Namespace"
                 @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)}}

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';
@@ -1412,6 +1413,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');