UX: Use group-chooser in invite modal (#10186)

app/assets/javascripts/discourse/app/components/invite-link-panel.js

@@ -14,6 +14,16 @@ export default Component.extend({
   inviteExpiresAt: moment()
     .add(1, "month")
     .format("YYYY-MM-DD"),
+  groupIds: null,
+  allGroups: null,
+
+  init() {
+    this._super(...arguments);
+
+    Group.findAll().then(groups => {
+      this.set("allGroups", groups.filterBy("automatic", false));
+    });
+  },
 
   willDestroyElement() {
     this._super(...arguments);
@@ -37,10 +47,12 @@ export default Component.extend({
   errorMessage: I18n.t("user.invited.invite_link.error"),
 
   reset() {
-    this.set("maxRedemptionAllowed", 5);
+    this.setProperties({
+      maxRedemptionAllowed: 5,
+      groupIds: null
+    });
 
     this.inviteModel.setProperties({
-      groupNames: null,
       error: false,
       saving: false,
       finished: false,
@@ -54,7 +66,9 @@ export default Component.extend({
       return;
     }
 
-    const groupNames = this.get("inviteModel.groupNames");
+    const groupNames = this.allGroups
+      .filter(g => this.groupIds.includes(g.id))
+      .map(g => g.name);
     const maxRedemptionAllowed = this.maxRedemptionAllowed;
     const inviteExpiresAt = this.inviteExpiresAt;
     const userInvitedController = this.userInvitedShow;

app/assets/javascripts/discourse/app/components/invite-panel.js

@@ -12,6 +12,8 @@ import { getNativeContact } from "discourse/lib/pwa-utils";
 
 export default Component.extend({
   tagName: null,
+  groupIds: null,
+  allGroups: null,
 
   inviteModel: alias("panel.model.inviteModel"),
   userInvitedShow: alias("panel.model.userInvitedShow"),
@@ -26,6 +28,14 @@ export default Component.extend({
 
   isAdmin: alias("currentUser.admin"),
 
+  init() {
+    this._super(...arguments);
+
+    Group.findAll().then(groups => {
+      this.set("allGroups", groups.filterBy("automatic", false));
+    });
+  },
+
   willDestroyElement() {
     this._super(...arguments);
 
@@ -37,7 +47,7 @@ export default Component.extend({
     "emailOrUsername",
     "invitingToTopic",
     "isPrivateTopic",
-    "inviteModel.groupNames.[]",
+    "groupIds",
     "inviteModel.saving",
     "inviteModel.details.can_invite_to"
   )
@@ -46,7 +56,7 @@ export default Component.extend({
     emailOrUsername,
     invitingToTopic,
     isPrivateTopic,
-    groupNames,
+    groupIds,
     saving,
     can_invite_to
   ) {
@@ -66,7 +76,7 @@ export default Component.extend({
     }
 
     // when inviting to private topic via email, group name must be specified
-    if (isPrivateTopic && isEmpty(groupNames) && emailValid(emailTrimmed)) {
+    if (isPrivateTopic && isEmpty(groupIds) && emailValid(emailTrimmed)) {
       return true;
     }
 
@@ -80,7 +90,7 @@ export default Component.extend({
     "emailOrUsername",
     "inviteModel.saving",
     "isPrivateTopic",
-    "inviteModel.groupNames.[]",
+    "groupIds",
     "hasCustomMessage"
   )
   disabledCopyLink(
@@ -88,7 +98,7 @@ export default Component.extend({
     emailOrUsername,
     saving,
     isPrivateTopic,
-    groupNames,
+    groupIds,
     hasCustomMessage
   ) {
     if (hasCustomMessage) return true;
@@ -108,7 +118,7 @@ export default Component.extend({
     }
 
     // when inviting to private topic via email, group name must be specified
-    if (isPrivateTopic && isEmpty(groupNames) && emailValid(email)) {
+    if (isPrivateTopic && isEmpty(groupIds) && emailValid(email)) {
       return true;
     }
 
@@ -242,10 +252,6 @@ export default Component.extend({
     return isPrivateTopic ? "required" : "optional";
   },
 
-  groupFinder(term) {
-    return Group.findAll({ term, ignore_automatic: true });
-  },
-
   @discourseComputed("isPM", "emailOrUsername", "invitingExistingUserToTopic")
   successMessage(isPM, emailOrUsername, invitingExistingUserToTopic) {
     if (this.hasGroups) {
@@ -285,11 +291,11 @@ export default Component.extend({
       emailOrUsername: null,
       hasCustomMessage: false,
       customMessage: null,
-      invitingExistingUserToTopic: false
+      invitingExistingUserToTopic: false,
+      groupIds: null
     });
 
     this.inviteModel.setProperties({
-      groupNames: null,
       error: false,
       saving: false,
       finished: false,
@@ -303,7 +309,9 @@ export default Component.extend({
         return;
       }
 
-      const groupNames = this.get("inviteModel.groupNames");
+      const groupNames = this.allGroups
+        .filter(g => this.groupIds.includes(g.id))
+        .map(g => g.name);
       const userInvitedController = this.userInvitedShow;
 
       const model = this.inviteModel;

app/assets/javascripts/discourse/app/templates/components/invite-link-panel.hbs

@@ -13,23 +13,23 @@
       <label class="instructions">
         {{i18n "topic.automatically_add_to_groups"}}
       </label>
-      {{group-selector
+      {{group-chooser
-        fullWidthWrap=true
+        content=allGroups
-        groupFinder=groupFinder
+        value=groupIds
-        groupNames=inviteModel.groupNames
+        labelProperty="name"
-        placeholderKey="topic.invite_private.group_name"}}
+        onChange=(action (mut groupIds))}}
     </div>
 
     <div class="max-redemptions-allowed">
       <label class="instructions">
-        {{i18n 'user.invited.invite_link.max_redemptions_allowed_label'}}
+        {{i18n "user.invited.invite_link.max_redemptions_allowed_label"}}
       </label>
       {{input type="number" value=maxRedemptionAllowed class="max-redemptions-allowed-input" min="2" max=siteSettings.invite_link_max_redemptions_limit}}
     </div>
 
     <div class="invite-link-expires-at">
       <label class="instructions">
-        {{i18n 'user.invited.invite_link.expires_at'}}
+        {{i18n "user.invited.invite_link.expires_at"}}
       </label>
       {{future-date-input
         includeDateTime=true

app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs

@@ -53,11 +53,12 @@
         <label class="instructions {{showGroupsClass}}">
           {{i18n "topic.automatically_add_to_groups"}}
         </label>
-        {{group-selector
+        {{group-chooser
-          fullWidthWrap=true
+          content=allGroups
-          groupFinder=groupFinder
+          value=groupIds
-          groupNames=inviteModel.groupNames
+          labelProperty="name"
-          placeholderKey="topic.invite_private.group_name"}}
+          onChange=(action (mut groupIds))
+        }}
       </div>
     {{/if}}
 

app/assets/stylesheets/common/components/share-and-invite-modal.scss

@@ -76,6 +76,20 @@
       margin-bottom: 8px;
     }
 
+    .invite-user-control input.email-or-username-input {
+      line-height: 1.75em;
+    }
+
+    .group-access-control {
+      .select-kit.multi-select .choices {
+        padding-left: 8px;
+      }
+
+      .group-chooser {
+        width: 100%;
+      }
+    }
+
     .instructions {
       margin-bottom: 8px;
     }