UX: Allow admins to set users as owners while adding users.

https://meta.discourse.org/t/adding-owners-members-ux-is-inconsistent-and-misleading/58084/9

app/assets/javascripts/discourse/controllers/group-membership.js.es6

@@ -4,6 +4,7 @@ import { extractError } from 'discourse/lib/ajax-error';
 
 export default Ember.Controller.extend(ModalFunctionality, {
   loading: false,
+  setAsOwner: false,
 
   @computed('model.usernames')
   disableAddButton(usernames) {
@@ -12,19 +13,27 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   actions: {
     addMembers() {
-      if (Em.isEmpty(this.get("model.usernames"))) { return; }
+      const model = this.get('model');
+      const usernames = model.get('usernames');
+      if (Em.isEmpty(usernames)) { return; }
+      let promise;
 
-      this.get("model").addMembers(this.get("model.usernames"))
-        .then(() => {
-          this.transitionToRoute(
-            "group.members",
-            this.get('model.name'),
-            { queryParams: { filter: this.get('model.usernames') } }
-          );
-          this.set("model.usernames", null);
-          this.send('closeModal');
-        })
-        .catch(error => this.flash(extractError(error), 'error'));
+      if (this.get('setAsOwner')) {
+        promise = model.addOwners(usernames, true);
+      } else {
+        promise = model.addMembers(usernames, true);
+      }
+
+      promise.then(() => {
+        this.transitionToRoute(
+          "group.members",
+          this.get('model.name'),
+          { queryParams: { filter: usernames } }
+        );
+        model.set("usernames", null);
+        this.send('closeModal');
+      })
+      .catch(error => this.flash(extractError(error), 'error'));
     },
   },
 });

app/assets/javascripts/discourse/models/group.js.es6

@@ -74,24 +74,36 @@ const Group = RestModel.extend({
     });
   },
 
-  addMembers(usernames) {
+  addMembers(usernames, filter) {
     return ajax('/groups/' + this.get('id') + '/members.json', {
       type: "PUT",
       data: { usernames: usernames }
     }).then(response => {
-      this.findMembers({ filter: response.usernames.join(',') });
+      if (filter) {
+        this._filterMembers(response);
+      } else {
+        this.findMembers();
+      }
     });
   },
 
-  addOwners(usernames) {
+  addOwners(usernames, filter) {
     return ajax(`/admin/groups/${this.get('id')}/owners.json`, {
       type: "PUT",
       data: { group: { usernames: usernames } }
-    }).then(() => {
-      this.findMembers();
+    }).then(response => {
+      if (filter) {
+        this._filterMembers(response);
+      } else {
+        this.findMembers();
+      }
     });
   },
 
+  _filterMembers(response) {
+    return this.findMembers({ filter: response.usernames.join(",") });
+  },
+
   @computed("display_name", "name")
   displayName(groupDisplayName, name) {
     return groupDisplayName || name;

app/assets/javascripts/discourse/templates/modal/group-membership.hbs

@@ -1,7 +1,19 @@
 {{#d-modal-body class='group-membership' title="groups.add_members.title"}}
-  {{user-selector usernames=model.usernames
-      placeholderKey="groups.selector_placeholder"
-      id="group-membership-user-selector"}}
+  <div class="control-group">
+    <label>{{i18n "groups.add_members.usernames"}}</label>
+
+    {{user-selector
+        usernames=model.usernames
+        placeholderKey="groups.selector_placeholder"
+        id="group-membership-user-selector"}}
+  </div>
+
+  {{#if this.currentUser.admin}}
+    <div class="control-group group-membership-make-owner">
+      <label class="inline">{{i18n "groups.add_members.as_owner"}}</label>
+      {{input type="checkbox" class="inline" checked=setAsOwner}}
+    </div>
+  {{/if}}
 {{/d-modal-body}}
 
 <div class="modal-footer">