UX: Allow group owners to manage members from group members page.

app/assets/javascripts/discourse/components/group-member-dropdown.js.es6

@@ -0,0 +1,32 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
+import DropdownButton from 'discourse/components/dropdown-button';
+import computed from "ember-addons/ember-computed-decorators";
+
+export default DropdownButton.extend({
+  buttonExtraClasses: 'no-text',
+  title: '',
+  text: iconHTML('ellipsis-h'),
+  classNames: ['group-member-dropdown'],
+
+  @computed()
+  dropDownContent() {
+    const items = [
+      {
+        id: 'removeMember',
+        title: I18n.t('groups.members.remove_member'),
+        description: I18n.t('groups.members.remove_member_description'),
+        icon: 'user-times'
+      }
+    ];
+
+    return items;
+  },
+
+  clicked(id) {
+    switch (id) {
+      case 'removeMember':
+        this.sendAction('removeMember', this.get('member'));
+        break;
+    }
+  }
+});

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

@@ -27,6 +27,11 @@ export default Ember.Controller.extend({
     return members && members.length > 0;
   },
 
+  @computed
+  canManageGroup() {
+    return this.currentUser && this.currentUser.canManageGroup(this.get('model'));
+  },
+
   actions: {
     toggleActions() {
       this.toggleProperty("showActions");

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

@@ -19,7 +19,8 @@ export default Ember.Controller.extend({
     const membersTab = Tab.create({
       name: 'members',
       route: 'group.index',
-      icon: 'users'
+      icon: 'users',
+      i18nKey: "members.title"
     });
 
     membersTab.set('count', userCount);

app/assets/javascripts/discourse/routes/group-index.js.es6

@@ -1,6 +1,6 @@
 export default Discourse.Route.extend({
   titleToken() {
-    return I18n.t('groups.members');
+    return I18n.t('groups.members.title');
   },
 
   model() {

app/assets/javascripts/discourse/templates/components/group-members-input.hbs

@@ -1,4 +1,4 @@
-<label>{{i18n 'groups.members'}} ({{model.user_count}})</label>
+<label>{{i18n 'groups.members.title'}} ({{model.user_count}})</label>
 
 {{#if model.members}}
   <div>

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

@@ -5,6 +5,7 @@
         {{group-index-toggle order=order desc=desc field='username_lower' i18nKey='username'}}
         {{group-index-toggle order=order desc=desc field='last_posted_at' i18nKey='last_post'}}
         {{group-index-toggle order=order desc=desc field='last_seen_at'  i18nKey='last_seen'}}
+        <th></th>
       </thead>
 
       <tbody>
@@ -21,6 +22,14 @@
             <td>
               <span class="text">{{bound-date m.last_seen_at}}</span>
             </td>
+
+            <td>
+              {{#if canManageGroup}}
+                {{group-member-dropdown
+                    removeMember="removeMember"
+                    member=m}}
+              {{/if}}
+            </td>
           </tr>
         {{/each}}
       </tbody>

app/assets/stylesheets/common/base/group.scss

@@ -124,6 +124,10 @@ table.group-members {
     text-align: left;
   }
 
+  th:last-child {
+    width: 5%;
+  }
+
   th.group-members-actions {
     width: 5%;
   }

app/assets/stylesheets/common/components/group-member-dropdown.scss

@@ -0,0 +1,9 @@
+.group-member-dropdown {
+  ul {
+    width: 250px;
+    top: 27px;
+    bottom: auto;
+    left: -217px;
+    text-align: left;
+  }
+}