DEV: {{user-selector}} replacement (#11726)

This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are:

1. It's called `{{user-selector}}`, but in reality in can also select groups and emails.
2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185).
3. We now have select kit which does very similar things but a lot better.

This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. 

Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.

app/assets/javascripts/admin/addon/controllers/admin-api-keys-new.js

@@ -3,6 +3,7 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { isBlank } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { get } from "@ember/object";
 import showModal from "discourse/lib/show-modal";
 
 export default Controller.extend({
@@ -30,6 +31,10 @@ export default Controller.extend({
   },
 
   actions: {
+    updateUsername(selected) {
+      this.set("model.username", get(selected, "firstObject"));
+    },
+
     changeUserMode(value) {
       if (value === "all") {
         this.model.set("username", null);

app/assets/javascripts/admin/addon/controllers/admin-email-preview-digest.js

@@ -2,6 +2,7 @@ import { empty, notEmpty, or } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import EmailPreview from "admin/models/email-preview";
 import bootbox from "bootbox";
+import { get } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Controller.extend({
@@ -14,6 +15,10 @@ export default Controller.extend({
   htmlEmpty: empty("model.html_content"),
 
   actions: {
+    updateUsername(selected) {
+      this.set("username", get(selected, "firstObject"));
+    },
+
     refresh() {
       const model = this.model;
 

app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-prompt.js

@@ -1,6 +1,6 @@
 import Controller, { inject as controller } from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { action } from "@ember/object";
+import { action, get } from "@ember/object";
 import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 
@@ -27,4 +27,9 @@ export default Controller.extend(ModalFunctionality, {
   close() {
     this.send("closeModal");
   },
+
+  @action
+  updateUsername(selected) {
+    this.set("targetUsername", get(selected, "firstObject"));
+  },
 });

app/assets/javascripts/admin/addon/templates/api-keys-new.hbs

@@ -25,10 +25,14 @@
 
     {{#if showUserSelector}}
       {{#admin-form-row label="admin.api.user"}}
-        {{user-selector single="true"
-          usernames=model.username
-          placeholderKey="admin.api.user_placeholder"
-          }}
+        {{email-group-user-chooser
+          value=model.username
+          onChange=(action "updateUsername")
+          options=(hash
+            maximum=1
+            filterPlaceholder="admin.api.user_placeholder"
+          )
+        }}
       {{/admin-form-row}}
     {{/if}}
 

app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs

@@ -5,7 +5,13 @@
     <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
     {{date-picker-past value=lastSeen id="last-seen"}}
     <label>{{i18n "admin.email.user"}}:</label>
-    {{user-selector single="true" usernames=username canReceiveUpdates=true}}
+    {{email-group-user-chooser
+      value=username
+      onChange=(action "updateUsername")
+      options=(hash
+        maximum=1
+      )
+    }}
     {{d-button
       class="btn-primary digest-refresh-button"
       action=(action "refresh")

app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs

@@ -1,10 +1,15 @@
 <div>
   {{#d-modal-body rawTitle=(i18n "admin.user.merge.prompt.title" username=username)}}
     <p>{{html-safe (i18n "admin.user.merge.prompt.description" username=username)}}</p>
-    {{user-selector single=true
-                    placeholderKey="admin.user.merge.prompt.target_username_placeholder"
-                    usernames=targetUsername
-                    autocomplete="discourse"}}
+    {{email-group-user-chooser
+      value=targetUsername
+      autocomplete="discourse"
+      onChange=(action "updateUsername")
+      options=(hash
+        maximum=1
+        filterPlaceholder="admin.user.merge.prompt.target_username_placeholder"
+      )
+    }}
   {{/d-modal-body}}
 
   <div class="modal-footer">