DEV: Deprecate {{user-selector}} and replace it with {{email-group-user-chooser}} (#12042)

`{{user-selector}}` is now deprecated and it will be removed from core in Discourse 2.8. All instances of `{{user-selector}}` has been replaced with `{{email-group-user-chooser}}`.

app/assets/javascripts/discourse/app/components/user-selector.js

@@ -3,6 +3,7 @@ import TextField from "discourse/components/text-field";
 import { findRawTemplate } from "discourse-common/lib/raw-templates";
 import { isEmpty } from "@ember/utils";
 import userSearch from "discourse/lib/user-search";
+import deprecated from "discourse-common/lib/deprecated";
 
 export default TextField.extend({
   autocorrect: false,
@@ -12,6 +13,14 @@ export default TextField.extend({
   single: false,
   fullWidthWrap: false,
 
+  @on("init")
+  deprecateComponent() {
+    deprecated(
+      "`{{user-selector}}` is deprecated. Please use `{{email-group-user-chooser}}` instead.",
+      { since: "2.7", dropFrom: "2.8" }
+    );
+  },
+
   @bind
   _paste(event) {
     let pastedText = "";

app/assets/javascripts/discourse/app/controllers/change-owner.js

@@ -12,12 +12,12 @@ export default Controller.extend(ModalFunctionality, {
   topicController: inject("topic"),
 
   saving: false,
-  new_user: null,
+  newOwner: null,
 
   selectedPostsCount: alias("topicController.selectedPostsCount"),
   selectedPostsUsername: alias("topicController.selectedPostsUsername"),
 
-  @discourseComputed("saving", "new_user")
+  @discourseComputed("saving", "newOwner")
   buttonDisabled(saving, newUser) {
     return saving || isEmpty(newUser);
   },
@@ -25,7 +25,7 @@ export default Controller.extend(ModalFunctionality, {
   onShow() {
     this.setProperties({
       saving: false,
-      new_user: "",
+      newOwner: null,
     });
   },
 
@@ -35,7 +35,7 @@ export default Controller.extend(ModalFunctionality, {
 
       const options = {
         post_ids: this.get("topicController.selectedPostIds"),
-        username: this.new_user,
+        username: this.newOwner,
       };
 
       Topic.changeOwners(this.get("topicController.model.id"), options).then(
@@ -57,5 +57,9 @@ export default Controller.extend(ModalFunctionality, {
 
       return false;
     },
+
+    updateNewOwner(selected) {
+      this.set("newOwner", selected.firstObject);
+    },
   },
 });

app/assets/javascripts/discourse/app/controllers/group-add-members.js

@@ -6,20 +6,18 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { emailValid } from "discourse/lib/utilities";
 import { extractError } from "discourse/lib/ajax-error";
 import { isEmpty } from "@ember/utils";
+import { reads } from "@ember/object/computed";
 
 export default Controller.extend(ModalFunctionality, {
   loading: false,
   setAsOwner: false,
   notifyUsers: false,
   usernamesAndEmails: null,
-  usernames: null,
-  emails: null,
+  emailsPresent: reads("emails.length"),
 
   onShow() {
     this.setProperties({
-      usernamesAndEmails: "",
-      usernames: [],
-      emails: [],
+      usernamesAndEmails: [],
       setAsOwner: false,
       notifyUsers: false,
     });
@@ -30,15 +28,8 @@ export default Controller.extend(ModalFunctionality, {
     return loading || !usernamesAndEmails || !(usernamesAndEmails.length > 0);
   },
 
-  @discourseComputed("usernamesAndEmails")
-  emailsPresent() {
-    this._splitEmailsAndUsernames();
-    return this.emails.length;
-  },
-
   @discourseComputed("usernamesAndEmails")
   notifyUsersDisabled() {
-    this._splitEmailsAndUsernames();
     return this.usernames.length === 0 && this.emails.length > 0;
   },
 
@@ -47,6 +38,16 @@ export default Controller.extend(ModalFunctionality, {
     return I18n.t("groups.add_members.title", { group_name: fullName || name });
   },
 
+  @discourseComputed("usernamesAndEmails.[]")
+  emails(usernamesAndEmails) {
+    return usernamesAndEmails.filter(emailValid).join(",");
+  },
+
+  @discourseComputed("usernamesAndEmails.[]")
+  usernames(usernamesAndEmails) {
+    return usernamesAndEmails.reject(emailValid).join(",");
+  },
+
   @action
   addMembers() {
     this.set("loading", true);
@@ -89,16 +90,4 @@ export default Controller.extend(ModalFunctionality, {
       .catch((error) => this.flash(extractError(error), "error"))
       .finally(() => this.set("loading", false));
   },
-
-  _splitEmailsAndUsernames() {
-    let emails = [];
-    let usernames = [];
-
-    this.usernamesAndEmails.split(",").forEach((u) => {
-      emailValid(u) ? emails.push(u) : usernames.push(u);
-    });
-
-    this.set("emails", emails.join(","));
-    this.set("usernames", usernames.join(","));
-  },
 });

app/assets/javascripts/discourse/app/controllers/groups-new.js

@@ -4,6 +4,7 @@ import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import bootbox from "bootbox";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export function popupAutomaticMembershipAlert(group_id, email_domains) {
   if (!email_domains) {
@@ -37,6 +38,16 @@ export function popupAutomaticMembershipAlert(group_id, email_domains) {
 export default Controller.extend({
   saving: null,
 
+  @discourseComputed("model.ownerUsernames")
+  splitOwnerUsernames(owners) {
+    return owners && owners.length ? owners.split(",") : [];
+  },
+
+  @discourseComputed("model.usernames")
+  splitUsernames(usernames) {
+    return usernames && usernames.length ? usernames.split(",") : [];
+  },
+
   @action
   save() {
     this.set("saving", true);
@@ -55,4 +66,14 @@ export default Controller.extend({
       .catch(popupAjaxError)
       .finally(() => this.set("saving", false));
   },
+
+  @action
+  updateOwnerUsernames(selected) {
+    this.set("model.ownerUsernames", selected.join(","));
+  },
+
+  @action
+  updateUsernames(selected) {
+    this.set("model.usernames", selected.join(","));
+  },
 });

app/assets/javascripts/discourse/app/controllers/ignore-duration-with-username.js

@@ -29,5 +29,9 @@ export default Controller.extend(ModalFunctionality, {
           .finally(() => this.set("loading", false));
       });
     },
+
+    updateIgnoredUsername(selected) {
+      this.set("ignoredUsername", selected.firstObject);
+    },
   },
 });

app/assets/javascripts/discourse/app/controllers/move-to-topic.js

@@ -80,7 +80,7 @@ export default Controller.extend(ModalFunctionality, {
       categoryId: null,
       topicName: "",
       tags: null,
-      participants: null,
+      participants: [],
     });
 
     const isPrivateMessage = this.get("model.isPrivateMessage");
@@ -133,7 +133,7 @@ export default Controller.extend(ModalFunctionality, {
       } else if (type === "existingMessage") {
         mergeOptions = {
           destination_topic_id: this.selectedTopicId,
-          participants: this.participants,
+          participants: this.participants.join(","),
           archetype: "private_message",
         };
         moveOptions = Object.assign(

app/assets/javascripts/discourse/app/controllers/review-index.js

@@ -170,5 +170,13 @@ export default Controller.extend({
     toggleFilters() {
       this.toggleProperty("filtersExpanded");
     },
+
+    updateFilterReviewedBy(selected) {
+      this.set("filterReviewedBy", selected.firstObject);
+    },
+
+    updateFilterUsername(selected) {
+      this.set("filterUsername", selected.firstObject);
+    },
   },
 });

app/assets/javascripts/discourse/app/templates/groups/new.hbs

@@ -8,19 +8,29 @@
       <div class="control-group">
         <label class="control-label" for="owner-selector">{{i18n "admin.groups.add_owners"}}</label>
 
-        {{user-selector usernames=model.ownerUsernames
-            class="input-xxlarge"
-            placeholderKey="groups.selector_placeholder"
-            id="owner-selector"}}
+        {{email-group-user-chooser
+          class="input-xxlarge"
+          id="owner-selector"
+          value=splitOwnerUsernames
+          onChange=(action "updateOwnerUsernames")
+          options=(hash
+            filterPlaceholder="groups.selector_placeholder"
+          )
+        }}
       </div>
 
       <div class="control-group">
         <label class="control-label" for="member-selector">{{i18n "groups.members.title"}}</label>
 
-        {{user-selector usernames=model.usernames
-            class="input-xxlarge"
-            placeholderKey="groups.selector_placeholder"
-            id="member-selector"}}
+        {{email-group-user-chooser
+          class="input-xxlarge"
+          id="member-selector"
+          value=splitUsernames
+          onChange=(action "updateUsernames")
+          options=(hash
+            filterPlaceholder="groups.selector_placeholder"
+          )
+        }}
       </div>
     {{/groups-form-profile-fields}}
 

app/assets/javascripts/discourse/app/templates/modal/change-owner.hbs

@@ -9,11 +9,16 @@
 
   <form>
     <label></label>
-    {{user-selector single="true"
-                    usernames=new_user
-                    placeholderKey="topic.change_owner.placeholder"
-                    autocomplete="discourse"
-                    autofocus=true}}
+    {{email-group-user-chooser
+      value=newOwner
+      autocomplete="discourse"
+      autofocus=true
+      onChange=(action "updateNewOwner")
+      options=(hash
+        maximum=1
+        filterPlaceholder="topic.change_owner.placeholder"
+      )
+    }}
   </form>
 {{/d-modal-body}}
 

app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs

@@ -8,12 +8,16 @@
         {{i18n "groups.add_members.description"}}
       </p>
 
-      {{user-selector
-          class="input-xxlarge"
-          usernames=usernamesAndEmails
+      {{email-group-user-chooser
+        class="input-xxlarge"
+        value=usernamesAndEmails
+        id="group-add-members-user-selector"
+        onChange=(action (mut usernamesAndEmails))
+        options=(hash
           allowEmails=true
-          placeholderKey="groups.add_members.input_placeholder"
-          id="group-add-members-user-selector"}}
+          filterPlaceholder="groups.add_members.input_placeholder"
+        )
+      }}
     </div>
 
     {{#if model.can_admin_group}}

app/assets/javascripts/discourse/app/templates/modal/ignore-duration-with-username.hbs

@@ -1,10 +1,14 @@
 {{#d-modal-body title="user.user_notifications.ignore_duration_title" autoFocus="false"}}
   <div class="controls tracking-controls">
     <label>{{d-icon "far-eye-slash" class="icon"}} {{i18n "user.user_notifications.ignore_duration_username"}}</label>
-    {{user-selector excludeCurrentUser=true
-                    single=true
-                    class="user-selector"
-                    usernames=ignoredUsername}}
+    {{email-group-user-chooser
+      value=ignoredUsername
+      onChange=(action "updateIgnoredUsername")
+      options=(hash
+        excludeCurrentUser=true
+        maximum=1
+      )
+    }}
   </div>
   {{future-date-input
     label="user.user_notifications.ignore_duration_when"

app/assets/javascripts/discourse/app/templates/modal/move-to-topic.hbs

@@ -36,7 +36,11 @@
         {{choose-message currentTopicId=model.id selectedTopicId=selectedTopicId}}
 
         <label>{{i18n "topic.move_to_new_message.participants"}}</label>
-        {{user-selector usernames=participants class="participant-selector"}}
+        {{email-group-user-chooser
+          class="participant-selector"
+          value=participants
+          onChange=(action (mut participants))
+        }}
       </form>
     {{/if}}
 

app/assets/javascripts/discourse/app/templates/review-index.hbs

@@ -60,24 +60,29 @@
 
       <div class="reviewable-filter topic-filter">
         {{i18n "review.filtered_reviewed_by"}}
-        {{user-selector
-          excludeCurrentUser=false
-          usernames=filterReviewedBy
-          fullWidthWrap=true
-          single=true
-          class="user-selector"
-          canReceiveUpdates=true}}
+        {{email-group-user-chooser
+          value=filterReviewedBy
+          onChange=(action "updateFilterReviewedBy")
+          options=(hash
+            maximum=1
+            excludeCurrentUser=false
+            fullWidthWrap=true
+          )
+        }}
       </div>
 
       <div class="reviewable-filter topic-filter">
         {{i18n "review.filtered_user"}}
-        {{user-selector
-          excludeCurrentUser=false
-          usernames=filterUsername
-          fullWidthWrap=true
-          single=true
+        {{email-group-user-chooser
+          value=filterUsername
+          onChange=(action "updateFilterUsername")
           class="user-selector"
-          canReceiveUpdates=true}}
+          options=(hash
+            maximum=1
+            excludeCurrentUser=false
+            fullWidthWrap=true
+          )
+        }}
       </div>
 
       {{#if filterTopic}}

app/assets/javascripts/select-kit/addon/components/email-group-user-chooser.js

@@ -3,6 +3,7 @@ import UserChooserComponent from "select-kit/components/user-chooser";
 export default UserChooserComponent.extend({
   pluginApiIdentifiers: ["email-group-user-chooser"],
   classNames: ["email-group-user-chooser"],
+  classNameBindings: ["selectKit.options.fullWidthWrap:full-width-wrap"],
   valueProperty: "id",
   nameProperty: "name",
 
@@ -13,6 +14,7 @@ export default UserChooserComponent.extend({
   selectKitOptions: {
     headerComponent: "email-group-user-chooser-header",
     filterComponent: "email-group-user-chooser-filter",
+    fullWidthWrap: false,
     autoWrap: false,
   },
 

app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss

@@ -1,4 +1,8 @@
 .select-kit.email-group-user-chooser {
+  &.full-width-wrap {
+    width: unset;
+  }
+
   .select-kit-row.email-group-user-chooser-row {
     .identifier {
       color: var(--primary);