FEATURE: Split Add Members into Add Users & Invite (#13482)

FEATURE: Split Add Members into Add Users & Invite (#13482)

Add Members could also invite new users via emails, but that was a less known fact. Splitting the previous modal into two more accessible modals should make this feature more discoverable.

diff --git a/app/assets/javascripts/discourse/app/controllers/group-add-members.js b/app/assets/javascripts/discourse/app/controllers/group-add-members.js
index 333060a..6528f10 100644
--- a/app/assets/javascripts/discourse/app/controllers/group-add-members.js
+++ b/app/assets/javascripts/discourse/app/controllers/group-add-members.js
@@ -1,88 +1,49 @@
 import Controller from "@ember/controller";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { action } from "@ember/object";
+import { isEmpty } from "@ember/utils";
 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";
+import ModalFunctionality from "discourse/mixins/modal-functionality";
+import I18n from "I18n";
 
 export default Controller.extend(ModalFunctionality, {
   loading: false,
-  setAsOwner: false,
+
+  usernames: null,
+  setOwner: false,
   notifyUsers: false,
-  usernamesAndEmails: null,
-  emailsPresent: reads("emails.length"),
 
   onShow() {
     this.setProperties({
-      usernamesAndEmails: [],
-      setAsOwner: false,
+      loading: false,
+      setOwner: false,
       notifyUsers: false,
+      usernames: [],
     });
   },
 
-  @discourseComputed("usernamesAndEmails", "loading")
-  disableAddButton(usernamesAndEmails, loading) {
-    return loading || !usernamesAndEmails || !(usernamesAndEmails.length > 0);
-  },
-
-  @discourseComputed("usernamesAndEmails")
-  notifyUsersDisabled() {
-    return this.usernames.length === 0 && this.emails.length > 0;
-  },
-
   @discourseComputed("model.name", "model.full_name")
-  title(name, fullName) {
+  rawTitle(name, fullName) {
     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);
-
-    if (this.emailsPresent) {
-      this.set("setAsOwner", false);
-    }
-
-    if (this.notifyUsersDisabled) {
-      this.set("notifyUsers", false);
-    }
-
-    if (isEmpty(this.usernamesAndEmails)) {
+    if (isEmpty(this.usernames)) {
       return;
     }
 
-    const promise = this.setAsOwner
-      ? this.model.addOwners(this.usernames, true, this.notifyUsers)
-      : this.model.addMembers(
-          this.usernames,
-          true,
-          this.notifyUsers,
-          this.emails
-        );
+    this.set("loading", true);
+
+    const usernames = this.usernames.join(",");
+    const promise = this.setOwner
+      ? this.model.addOwners(usernames, true, this.notifyUsers)
+      : this.model.addMembers(usernames, true, this.notifyUsers);
 
     promise
       .then(() => {
-        let queryParams = {};
-
-        if (this.usernames) {
-          queryParams.filter = this.usernames;
-        }
-
         this.transitionToRoute("group.members", this.get("model.name"), {
-          queryParams,
+          queryParams: usernames ? { filter: usernames } : {},
         });
 
         this.send("closeModal");
diff --git a/app/assets/javascripts/discourse/app/routes/group-index.js b/app/assets/javascripts/discourse/app/routes/group-index.js
index fdd634d..77a4ac1 100644
--- a/app/assets/javascripts/discourse/app/routes/group-index.js
+++ b/app/assets/javascripts/discourse/app/routes/group-index.js
@@ -29,6 +29,15 @@ export default DiscourseRoute.extend({
   },
 
   @action
+  showInviteModal() {
+    const model = this.modelFor("group");
+    const controller = showModal("create-invite");
+    controller.set("showAdvanced", true);
+    controller.buffered.set("groupIds", [model.id]);
+    controller.save({ autogenerated: true });
+  },
+
+  @action
   didTransition() {
     this.controllerFor("group-index").set("filterInput", this._params.filter);
     return true;
diff --git a/app/assets/javascripts/discourse/app/templates/group-index.hbs b/app/assets/javascripts/discourse/app/templates/group-index.hbs
index abe17a0..dd07e01 100644
--- a/app/assets/javascripts/discourse/app/templates/group-index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group-index.hbs
@@ -9,14 +9,25 @@
       }}
     {{/if}}
 
-    <div class="group-members-manage">
-      {{#if canManageGroup}}
-        {{d-button icon="plus"
+    {{#if canManageGroup}}
+      <div class="group-members-manage">
+        {{d-button
+          icon="plus"
           action=(route-action "showAddMembersModal")
           label="groups.manage.add_members"
-        class="btn-default group-members-add"}}
-      {{/if}}
-    </div>
+          class="btn-default group-members-add"
+        }}
+
+        {{#if currentUser.can_invite_to_forum}}
+          {{d-button
+            icon="plus"
+            action=(route-action "showInviteModal")
+            label="groups.manage.invite_members"
+            class="btn-default group-members-add"
+          }}
+        {{/if}}
+      </div>
+    {{/if}}
   </div>
 
   {{#if hasMembers}}
diff --git a/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs b/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs
index 9a7427f..873e20f 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/group-add-members.hbs
@@ -1,47 +1,26 @@
-{{#d-modal-body rawTitle=title}}
+{{#d-modal-body rawTitle=rawTitle}}
   <form class="form-vertical group-add-members">
-    <div class="control-group">
-      <label class="control-label">
-        {{#if currentUser.can_invite_to_forum}}
-          {{i18n "groups.add_members.usernames_or_emails.title"}}
-        {{else}}
-          {{i18n "groups.add_members.usernames.title"}}
-        {{/if}}
-      </label>
-      <p class="description">
-        {{i18n "groups.add_members.description"}}
-      </p>
+    <p>{{i18n "groups.add_members.description"}}</p>
 
+    <div class="input-group">
       {{email-group-user-chooser
-        class="input-xxlarge"
-        value=usernamesAndEmails
-        id="group-add-members-user-selector"
-        onChange=(action (mut usernamesAndEmails))
-        options=(hash
-          allowEmails=currentUser.can_invite_to_forum
-          filterPlaceholder=(if currentUser.can_invite_to_forum "groups.add_members.usernames_or_emails.input_placeholder" "groups.add_members.usernames.input_placeholder")
-        )
+        value=usernames
+        onChange=(action (mut usernames))
       }}
     </div>
 
     {{#if model.can_admin_group}}
-      <div class="control-group group-add-members-make-owner">
+      <div class="input-group">
         <label>
-          {{input type="checkbox"
-              class="inline"
-              checked=setAsOwner
-              disabled=emailsPresent}}
-          {{i18n "admin.groups.add_members.as_owner"}}
+          {{input id="set-owner" type="checkbox" checked=setOwner disabled=emailsPresent}}
+          {{i18n "groups.add_members.set_owner"}}
         </label>
       </div>
     {{/if}}
 
-    <div class="control-group group-add-members-notify-users">
+    <div class="input-group">
       <label>
-        {{input type="checkbox"
-            class="inline"
-            checked=notifyUsers
-            disabled=notifyUsersDisabled}}
+        {{input type="checkbox"  checked=notifyUsers}}
         {{i18n "groups.add_members.notify_users"}}
       </label>
     </div>
@@ -52,6 +31,6 @@
   {{d-button action=(action "addMembers")
       class="add btn-primary"
       icon="plus"
-      disabled=disableAddButton
+      disabled=(or loading (not usernames))

[... diff too long, it was truncated ...]

GitHub sha: 2c2e81486c3428c53e46bbf70a92dbc50d219f60

This commit appears in #13482 which was approved by ZogStriP. It was merged by udan11.