From 98201ecc24d5e5c262f1292f416dc6dd11f82d3e Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Mon, 1 Feb 2021 13:07:11 +0300 Subject: [PATCH] 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. --- .../addon/controllers/admin-api-keys-new.js | 5 + .../controllers/admin-email-preview-digest.js | 5 + .../modals/admin-merge-users-prompt.js | 7 +- .../admin/addon/templates/api-keys-new.hbs | 12 +- .../addon/templates/email-preview-digest.hbs | 8 +- .../modal/admin-merge-users-prompt.hbs | 13 +- .../app/components/composer-user-selector.js | 101 ++++---------- .../discourse/app/components/invite-panel.js | 97 +++++++------ .../components/composer-user-selector.hbs | 34 ++--- .../app/templates/components/invite-panel.hbs | 25 ++-- .../discourse/app/templates/composer.hbs | 12 +- .../tests/acceptance/composer-actions-test.js | 10 +- .../tests/acceptance/composer-test.js | 4 +- .../discourse/tests/acceptance/group-test.js | 2 +- .../tests/acceptance/new-message-test.js | 4 +- .../discourse/tests/acceptance/topic-test.js | 11 +- .../email-group-user-chooser-header.js | 76 +++++++++++ .../email-group-user-chooser-row.js | 7 + .../components/email-group-user-chooser.js | 46 +++++++ .../select-kit/addon/components/select-kit.js | 129 +++++++++++------- .../select-kit/select-kit-filter.js | 20 ++- .../addon/components/user-chooser.js | 1 + .../email-group-user-chooser-header.hbs | 22 +++ .../email-group-user-chooser-row.hbs | 12 ++ .../select-kit/select-kit-filter.hbs | 1 + app/assets/stylesheets/common/admin/api.scss | 3 +- .../stylesheets/common/select-kit/_index.scss | 1 + .../select-kit/email-group-user-chooser.scss | 37 +++++ config/locales/client.en.yml | 3 + 29 files changed, 481 insertions(+), 227 deletions(-) create mode 100644 app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-header.js create mode 100644 app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.js create mode 100644 app/assets/javascripts/select-kit/addon/components/email-group-user-chooser.js create mode 100644 app/assets/javascripts/select-kit/addon/templates/components/email-group-user-chooser-header.hbs create mode 100644 app/assets/javascripts/select-kit/addon/templates/components/email-group-user-chooser-row.hbs create mode 100644 app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss diff --git a/app/assets/javascripts/admin/addon/controllers/admin-api-keys-new.js b/app/assets/javascripts/admin/addon/controllers/admin-api-keys-new.js index 8d56042a676..c90316369a8 100644 --- a/app/assets/javascripts/admin/addon/controllers/admin-api-keys-new.js +++ b/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); diff --git a/app/assets/javascripts/admin/addon/controllers/admin-email-preview-digest.js b/app/assets/javascripts/admin/addon/controllers/admin-email-preview-digest.js index 4210f9cff28..1a6fbf21847 100644 --- a/app/assets/javascripts/admin/addon/controllers/admin-email-preview-digest.js +++ b/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; diff --git a/app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-prompt.js b/app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-prompt.js index 2a088dff314..98f60d23951 100644 --- a/app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-prompt.js +++ b/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")); + }, }); diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs b/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs index 7d6219ffac6..a8957262df3 100644 --- a/app/assets/javascripts/admin/addon/templates/api-keys-new.hbs +++ b/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}} diff --git a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs index 8d10ac3a8b7..c93d048ba6d 100644 --- a/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs +++ b/app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs @@ -5,7 +5,13 @@ {{date-picker-past value=lastSeen id="last-seen"}} - {{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") diff --git a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs index 71f7a404bc4..6fea5ee4f0e 100644 --- a/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs +++ b/app/assets/javascripts/admin/addon/templates/modal/admin-merge-users-prompt.hbs @@ -1,10 +1,15 @@
{{#d-modal-body rawTitle=(i18n "admin.user.merge.prompt.title" username=username)}}

{{html-safe (i18n "admin.user.merge.prompt.description" username=username)}}

- {{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}}
diff --git a/app/assets/javascripts/discourse/app/components/composer-user-selector.js b/app/assets/javascripts/discourse/app/components/composer-user-selector.js index dc0bc42cfe0..1633794f1f4 100644 --- a/app/assets/javascripts/discourse/app/components/composer-user-selector.js +++ b/app/assets/javascripts/discourse/app/components/composer-user-selector.js @@ -1,13 +1,12 @@ -import discourseComputed, { observes } from "discourse-common/utils/decorators"; import Component from "@ember/component"; -import I18n from "I18n"; +import discourseComputed from "discourse-common/utils/decorators"; import putCursorAtEnd from "discourse/lib/put-cursor-at-end"; -import { schedule } from "@ember/runloop"; export default Component.extend({ - showSelector: true, - shouldHide: false, - defaultUsernameCount: 0, + init() { + this._super(...arguments); + this.set("_groups", []); + }, didInsertElement() { this._super(...arguments); @@ -17,78 +16,34 @@ export default Component.extend({ } }, - @observes("usernames") - _checkWidth() { - let width = 0; - const $acWrap = $(this.element).find(".ac-wrap"); - const limit = $acWrap.width(); - this.set("defaultUsernameCount", 0); - - $acWrap - .find(".item") - .toArray() - .forEach((item) => { - width += $(item).outerWidth(true); - const result = width < limit; - - if (result) { - this.incrementProperty("defaultUsernameCount"); - } - return result; - }); - - if (width >= limit) { - this.set("shouldHide", true); - } else { - this.set("shouldHide", false); - } + @discourseComputed("recipients") + splitRecipients(recipients) { + return recipients ? recipients.split(",").filter(Boolean) : []; }, - @observes("shouldHide") - _setFocus() { - const selector = - "#reply-control #reply-title, #reply-control .d-editor-input"; - - if (this.shouldHide) { - $(selector).on("focus.composer-user-selector", () => { - this.set("showSelector", false); - this.appEvents.trigger("composer:resize"); - }); - } else { - $(selector).off("focus.composer-user-selector"); - } - }, - - @discourseComputed("usernames") - splitUsernames(usernames) { - return usernames.split(","); - }, - - @discourseComputed("splitUsernames", "defaultUsernameCount") - limitedUsernames(splitUsernames, count) { - return splitUsernames.slice(0, count).join(", "); - }, - - @discourseComputed("splitUsernames", "defaultUsernameCount") - hiddenUsersCount(splitUsernames, count) { - return `${splitUsernames.length - count} ${I18n.t("more")}`; + _updateGroups(selected, newGroups) { + const groups = []; + this._groups.forEach((existing) => { + if (selected.includes(existing)) { + groups.addObject(existing); + } + }); + newGroups.forEach((newGroup) => { + if (!groups.includes(newGroup)) { + groups.addObject(newGroup); + } + }); + this.setProperties({ + _groups: groups, + hasGroups: groups.length > 0, + }); }, actions: { - toggleSelector() { - this.set("showSelector", true); - - schedule("afterRender", () => { - $(this.element).find("input").focus(); - }); - }, - - triggerResize() { - this.appEvents.trigger("composer:resize"); - const $this = $(this.element).find(".ac-wrap"); - if ($this.height() >= 150) { - $this.scrollTop($this.height()); - } + updateRecipients(selected, content) { + const newGroups = content.filterBy("isGroup").mapBy("id"); + this._updateGroups(selected, newGroups); + this.set("recipients", selected.join(",")); }, }, }); diff --git a/app/assets/javascripts/discourse/app/components/invite-panel.js b/app/assets/javascripts/discourse/app/components/invite-panel.js index 0578836b38e..949ce17842a 100644 --- a/app/assets/javascripts/discourse/app/components/invite-panel.js +++ b/app/assets/javascripts/discourse/app/components/invite-panel.js @@ -20,9 +20,9 @@ export default Component.extend({ isStaff: readOnly("currentUser.staff"), isAdmin: readOnly("currentUser.admin"), - // If this isn't defined, it will proxy to the user topic on the preferences - // page which is wrong. - emailOrUsername: null, + // invitee is either a user, group or email + invitee: null, + isInviteeGroup: false, hasCustomMessage: false, customMessage: null, inviteIcon: "envelope", @@ -41,7 +41,7 @@ export default Component.extend({ @discourseComputed( "isAdmin", - "emailOrUsername", + "invitee", "invitingToTopic", "isPrivateTopic", "groupIds", @@ -50,7 +50,7 @@ export default Component.extend({ ) disabled( isAdmin, - emailOrUsername, + invitee, invitingToTopic, isPrivateTopic, groupIds, @@ -60,24 +60,22 @@ export default Component.extend({ if (saving) { return true; } - if (isEmpty(emailOrUsername)) { + if (isEmpty(invitee)) { return true; } - const emailTrimmed = emailOrUsername.trim(); - // when inviting to forum, email must be valid - if (!invitingToTopic && !emailValid(emailTrimmed)) { + if (!invitingToTopic && !emailValid(invitee)) { return true; } // normal users (not admin) can't invite users to private topic via email - if (!isAdmin && isPrivateTopic && emailValid(emailTrimmed)) { + if (!isAdmin && isPrivateTopic && emailValid(invitee)) { return true; } // when inviting to private topic via email, group name must be specified - if (isPrivateTopic && isEmpty(groupIds) && emailValid(emailTrimmed)) { + if (isPrivateTopic && isEmpty(groupIds) && emailValid(invitee)) { return true; } @@ -90,7 +88,7 @@ export default Component.extend({ @discourseComputed( "isAdmin", - "emailOrUsername", + "invitee", "inviteModel.saving", "isPrivateTopic", "groupIds", @@ -98,7 +96,7 @@ export default Component.extend({ ) disabledCopyLink( isAdmin, - emailOrUsername, + invitee, saving, isPrivateTopic, groupIds, @@ -110,24 +108,22 @@ export default Component.extend({ if (saving) { return true; } - if (isEmpty(emailOrUsername)) { + if (isEmpty(invitee)) { return true; } - const email = emailOrUsername.trim(); - // email must be valid - if (!emailValid(email)) { + if (!emailValid(invitee)) { return true; } // normal users (not admin) can't invite users to private topic via email - if (!isAdmin && isPrivateTopic && emailValid(email)) { + if (!isAdmin && isPrivateTopic && emailValid(invitee)) { return true; } // when inviting to private topic via email, group name must be specified - if (isPrivateTopic && isEmpty(groupIds) && emailValid(email)) { + if (isPrivateTopic && isEmpty(groupIds) && emailValid(invitee)) { return true; } @@ -179,7 +175,7 @@ export default Component.extend({ // Show Groups? (add invited user to private group) @discourseComputed( "isGroupOwnerOrAdmin", - "emailOrUsername", + "invitee", "isPrivateTopic", "isPM", "invitingToTopic", @@ -187,7 +183,7 @@ export default Component.extend({ ) showGroups( isGroupOwnerOrAdmin, - emailOrUsername, + invitee, isPrivateTopic, isPM, invitingToTopic, @@ -197,20 +193,20 @@ export default Component.extend({ isGroupOwnerOrAdmin && canInviteViaEmail && !isPM && - (emailValid(emailOrUsername) || isPrivateTopic || !invitingToTopic) + (emailValid(invitee) || isPrivateTopic || !invitingToTopic) ); }, - @discourseComputed("emailOrUsername") - showCustomMessage(emailOrUsername) { - return this.inviteModel === this.currentUser || emailValid(emailOrUsername); + @discourseComputed("invitee") + showCustomMessage(invitee) { + return this.inviteModel === this.currentUser || emailValid(invitee); }, // Instructional text for the modal. @discourseComputed( "isPM", "invitingToTopic", - "emailOrUsername", + "invitee", "isPrivateTopic", "isAdmin", "canInviteViaEmail" @@ -218,7 +214,7 @@ export default Component.extend({ inviteInstructions( isPM, invitingToTopic, - emailOrUsername, + invitee, isPrivateTopic, isAdmin, canInviteViaEmail @@ -236,9 +232,9 @@ export default Component.extend({ return I18n.t("topic.invite_reply.to_username"); } else { // when inviting to a topic, display instructions based on provided entity - if (isEmpty(emailOrUsername)) { + if (isEmpty(invitee)) { return I18n.t("topic.invite_reply.to_topic_blank"); - } else if (emailValid(emailOrUsername)) { + } else if (emailValid(invitee)) { this.set("inviteIcon", "envelope"); return I18n.t("topic.invite_reply.to_topic_email"); } else { @@ -257,18 +253,18 @@ export default Component.extend({ return isPrivateTopic ? "required" : "optional"; }, - @discourseComputed("isPM", "emailOrUsername", "invitingExistingUserToTopic") - successMessage(isPM, emailOrUsername, invitingExistingUserToTopic) { - if (this.hasGroups) { + @discourseComputed("isPM", "invitee", "invitingExistingUserToTopic") + successMessage(isPM, invitee, invitingExistingUserToTopic) { + if (this.isInviteeGroup) { return I18n.t("topic.invite_private.success_group"); } else if (isPM) { return I18n.t("topic.invite_private.success"); } else if (invitingExistingUserToTopic) { return I18n.t("topic.invite_reply.success_existing_email", { - emailOrUsername, + invitee, }); - } else if (emailValid(emailOrUsername)) { - return I18n.t("topic.invite_reply.success_email", { emailOrUsername }); + } else if (emailValid(invitee)) { + return I18n.t("topic.invite_reply.success_email", { invitee }); } else { return I18n.t("topic.invite_reply.success_username"); } @@ -295,7 +291,8 @@ export default Component.extend({ // Reset the modal to allow a new user to be invited. reset() { this.setProperties({ - emailOrUsername: null, + invitee: null, + isInviteeGroup: false, hasCustomMessage: false, customMessage: null, invitingExistingUserToTopic: false, @@ -346,9 +343,9 @@ export default Component.extend({ model.setProperties({ saving: false, error: true }); }; - if (this.hasGroups) { + if (this.isInviteeGroup) { return this.inviteModel - .createGroupInvite(this.emailOrUsername.trim()) + .createGroupInvite(this.invitee.trim()) .then((data) => { model.setProperties({ saving: false, finished: true }); this.get("inviteModel.details.allowed_groups").pushObject( @@ -359,7 +356,7 @@ export default Component.extend({ .catch(onerror); } else { return this.inviteModel - .createInvite(this.emailOrUsername.trim(), groupIds, this.customMessage) + .createInvite(this.invitee.trim(), groupIds, this.customMessage) .then((result) => { model.setProperties({ saving: false, finished: true }); if (!this.invitingToTopic && userInvitedController) { @@ -379,7 +376,7 @@ export default Component.extend({ this.appEvents.trigger("post-stream:refresh", { force: true }); } else if ( this.invitingToTopic && - emailValid(this.emailOrUsername.trim()) && + emailValid(this.invitee.trim()) && result && result.user ) { @@ -407,7 +404,7 @@ export default Component.extend({ } return model - .generateInviteLink(this.emailOrUsername.trim(), groupIds, topicId) + .generateInviteLink(this.invitee.trim(), groupIds, topicId) .then((result) => { model.setProperties({ saving: false, @@ -465,7 +462,23 @@ export default Component.extend({ @action searchContact() { getNativeContact(this.capabilities, ["email"], false).then((result) => { - this.set("emailOrUsername", result[0].email[0]); + this.set("invitee", result[0].email[0]); }); }, + + @action + updateInvitee(selected, content) { + const invitee = content.findBy("id", selected[0]); + if (invitee) { + this.setProperties({ + invitee: invitee.id.trim(), + isInviteeGroup: invitee.isGroup || false, + }); + } else { + this.setProperties({ + invitee: null, + isInviteeGroup: false, + }); + } + }, }); diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs index 8b4170f9f21..cb6198778b1 100644 --- a/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/composer-user-selector.hbs @@ -1,22 +1,14 @@ -{{#if showSelector}} - {{user-selector +{{email-group-user-chooser + id="private-message-users" + tabindex="1" + autocomplete="discourse" + value=splitRecipients + onChange=(action "updateRecipients") + options=(hash topicId=topicId - onChangeCallback=(action "triggerResize") - id="private-message-users" - includeMessageableGroups="true" - placeholderKey="composer.users_placeholder" - tabindex="1" - usernames=usernames - hasGroups=hasGroups - allowEmails="true" - autocomplete="discourse" - canReceiveUpdates=true - }} -{{else}} - -
- {{limitedUsernames}} - {{hiddenUsersCount}} -
- -{{/if}} + filterPlaceholder="composer.users_placeholder" + includeMessageableGroups=true + allowEmails=true + autoWrap=true + ) +}} diff --git a/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs b/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs index 8a655640e91..fa808f6ac89 100644 --- a/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs @@ -7,7 +7,7 @@
{{#if inviteModel.finished}} {{#if inviteModel.inviteLink}} - {{generated-invite-link link=inviteModel.inviteLink email=emailOrUsername}} + {{generated-invite-link link=inviteModel.inviteLink email=invitee}} {{else}}
{{html-safe successMessage}} @@ -18,24 +18,23 @@
{{#if allowExistingMembers}} - {{user-selector - fullWidthWrap=true - single=true - allowAny=true - excludeCurrentUser=true - includeMessageableGroups=isPM - hasGroups=hasGroups - usernames=emailOrUsername - placeholderKey=placeholderKey - allowEmails=canInviteViaEmail + {{email-group-user-chooser class="invite-user-input" autocomplete="discourse" - value=emailOrUsername + value=invitee + onChange=(action "updateInvitee") + options=(hash + maximum=1 + allowEmails=canInviteViaEmail + excludeCurrentUser=true + includeMessageableGroups=isPM + filterPlaceholder=placeholderKey + ) }} {{else}} {{text-field class="email-or-username-input" - value=emailOrUsername + value=invitee placeholderKey="topic.invite_reply.email_placeholder"}} {{/if}} {{#if capabilities.hasContactPicker}} diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs index 0d53c253b14..dac189f5898 100644 --- a/app/assets/javascripts/discourse/app/templates/composer.hbs +++ b/app/assets/javascripts/discourse/app/templates/composer.hbs @@ -52,11 +52,13 @@ {{#if model.canEditTitle}} {{#if model.creatingPrivateMessage}}
- {{composer-user-selector topicId=topicModel.id - usernames=model.targetRecipients - hasGroups=model.hasTargetGroups - focusTarget=focusTarget - class="users-input"}} + {{composer-user-selector + topicId=topicModel.id + recipients=model.targetRecipients + hasGroups=model.hasTargetGroups + focusTarget=focusTarget + class="users-input" + }} {{#if showWarning}}