From 1412e65bbd351e554c64fb2f082e9b5dc1f8f0b1 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Wed, 29 May 2024 21:01:57 -0400
Subject: [PATCH] [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                  |  3 ++
 ui/app/controllers/jobs/index.js      | 16 +++++++
 ui/app/templates/jobs/index.hbs       | 16 +++++--
 ui/tests/acceptance/jobs-list-test.js | 63 +++++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 .changelog/20626.txt

diff --git a/.changelog/20626.txt b/.changelog/20626.txt
new file mode 100644
index 000000000000..09451912634b
--- /dev/null
+++ b/.changelog/20626.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: namespace dropdown gets a search field and supports many namespaces
+```
diff --git a/ui/app/controllers/jobs/index.js b/ui/app/controllers/jobs/index.js
index a2d612472b59..733eb89ce164 100644
--- a/ui/app/controllers/jobs/index.js
+++ b/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) {
diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
index edcd8ff89ee7..3a953ebad66b 100644
--- a/ui/app/templates/jobs/index.hbs
+++ b/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)}}
diff --git a/ui/tests/acceptance/jobs-list-test.js b/ui/tests/acceptance/jobs-list-test.js
index 928cf5d28bba..a93ac3ddb3bf 100644
--- 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';
@@ -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');