[ui] Searching and filtering options (#20459)

* Beginnings of a search box for filter expressions

* jobSearchBox integration test

* jobs list updateFilter initial test

* Basic jobs list filtering tests

* First attempt at side-by-side facets and search with a computed filter

* Weirdly close to an iterative approach but checked isnt tracked properly

* Big rework to make filter composition and decomposition work nicely with the url

* Namespace facet dropdown added

* NodePool facet dropdown added

* hdsFacet for future testing and basic namespace filtering test

* Namespace filter existence test

* Status filtering

* Node pool/dynamic facet test

* Test patchups

* Attempt at optimize test fix

* Allocation re-load on optimize page explainer

* The Big Un-Skip

* Post-PR-review cleanup

ui/app/adapters/job.js

@@ -255,7 +255,12 @@ export default class JobAdapter extends WatchableNamespaceIDs {
   urlForQuery(query, modelName, method) {
     let baseUrl = `/${this.namespace}/jobs/statuses`;
     if (method === 'POST' && query.index) {
-      return `${baseUrl}?index=${query.index}`;
+      baseUrl += baseUrl.includes('?') ? '&' : '?';
+      baseUrl += `index=${query.index}`;
+    }
+    if (method === 'POST' && query.jobs) {
+      baseUrl += baseUrl.includes('?') ? '&' : '?';
+      baseUrl += 'namespace=*';
     }
     return baseUrl;
   }

ui/app/components/job-search-box.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<@S.TextInput
+  @type="search"
+  @value={{@searchText}}
+  aria-label="Job Search"
+  placeholder="Name contains myJob"
+  @icon="search"
+  @width="300px"
+  {{on "input" (action this.updateSearchText)}}
+  {{keyboard-shortcut 
+    label="Search Jobs"
+    pattern=(array "Shift+F")
+    action=(action this.focus)
+  }}
+  data-test-jobs-search
+/>

ui/app/components/job-search-box.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// @ts-check
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debounce } from '@ember/runloop';
+
+const DEBOUNCE_MS = 500;
+
+export default class JobSearchBoxComponent extends Component {
+  @service keyboard;
+
+  element = null;
+
+  @action
+  updateSearchText(event) {
+    debounce(this, this.sendUpdate, event.target.value, DEBOUNCE_MS);
+  }
+
+  sendUpdate(value) {
+    this.args.onSearchTextChange(value);
+  }
+
+  @action
+  focus(element) {
+    element.focus();
+    // Because the element is an input,
+    // and the "hide hints" part of our keynav implementation is on keyUp,
+    // but the focus action happens on keyDown,
+    // and the keynav explicitly ignores key input while focused in a text input,
+    // we need to manually hide the hints here.
+    this.keyboard.displayHints = false;
+  }
+}