REFACTOR: reworks all the search-advanced-options panel (#10661)

* REFACTOR: reworks all the search-advanced-options panel

This commit includes the following changes:
- prevents any mutation of external (to the component) values
- get rid of observers
- uses @action
- minor UI tweaks
- dropped the unecessary debounce
- drops all the legacy code for badges/groups which is not being used
- replaces user-selector by user-chooser and improves multi-select to not show `search` if maximum has been reached

Most importantly this refactor should fix multiple bugs due to _update() being called multiple times if searchTerm was empty and other various bugs where some changes in searchTerm was not applied to the sidebar.

test/javascripts/acceptance/search-full-test.js

@@ -1,5 +1,5 @@
 import selectKit from "helpers/select-kit-helper";
-import { acceptance, waitFor } from "helpers/qunit-helpers";
+import { selectDate, acceptance, waitFor } from "helpers/qunit-helpers";
 
 acceptance("Search - Full Page", {
   settings: { tagging_enabled: true },
@@ -109,7 +109,7 @@ QUnit.test("escape search term", async (assert) => {
 
   assert.ok(
     exists(
-      '.search-advanced-options span:contains("<script>prompt(1337)</script>gmail.com")'
+      '.search-advanced-options span:contains("&lt;script&gt;prompt(1337)&lt;/script&gt;gmail.com")'
     ),
     "it escapes search term"
   );
@@ -355,7 +355,7 @@ QUnit.test("update post time through advanced search ui", async (assert) => {
   await visit("/search");
 
   await fillIn(".search-query", "none");
-  await fillIn("#search-post-date .date-picker", "2016-10-05");
+  await selectDate("#search-post-date .date-picker", "2016-10-05");
 
   const postTimeSelector = selectKit(
     ".search-advanced-options .select-kit#postTime"

test/javascripts/helpers/qunit-helpers.js

@@ -1,3 +1,4 @@
+import { Promise } from "rsvp";
 import { isEmpty } from "@ember/utils";
 import { later } from "@ember/runloop";
 /* global QUnit, resetSite */
@@ -283,3 +284,15 @@ export function waitFor(assert, callback, timeout) {
     done();
   }, timeout);
 }
+
+export async function selectDate(selector, date) {
+  return new Promise((resolve) => {
+    const elem = document.querySelector(selector);
+    elem.value = date;
+    const evt = new Event("input", { bubbles: true, cancelable: false });
+    elem.dispatchEvent(evt);
+    elem.blur();
+
+    resolve();
+  });
+}