UX: Consolidation group manangement into a single tab.

app/assets/javascripts/admin/templates/group.hbs

@@ -11,8 +11,8 @@
 
   {{#unless model.automatic}}
     <div>
-      <label for='full_name'>{{i18n 'groups.edit.full_name'}}</label>
-      {{input type='text' name='full_name' value=model.full_name class='group-edit-full-name'}}
+      <label for='full_name'>{{i18n 'groups.manage.full_name'}}</label>
+      {{input type='text' name='full_name' value=model.full_name class='group-manage-full-name'}}
     </div>
 
     <div>

app/assets/javascripts/discourse/components/group-manage-logs-filter.js.es6

@@ -5,7 +5,7 @@ export default Ember.Component.extend({
 
   @computed('type')
   label(type) {
-    return I18n.t(`groups.logs.${type}`);
+    return I18n.t(`groups.manage.logs.${type}`);
   },
 
   @computed('value', 'type')

app/assets/javascripts/discourse/components/group-members-input.js.es6

@@ -55,7 +55,7 @@ export default Ember.Component.extend({
     },
 
     removeMember(member) {
-      const message = I18n.t("groups.edit.delete_member_confirm",{
+      const message = I18n.t("groups.manage.delete_member_confirm",{
         username: member.get("username"),
         group: this.get("model.name")
       });

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

@@ -1,25 +0,0 @@
-import DropdownSelectBox from "select-kit/components/dropdown-select-box";
-
-export default DropdownSelectBox.extend({
-  classNames: ["group-navigation-dropdown", "pull-right"],
-  nameProperty: "label",
-  headerIcon: ["bars"],
-  showFullTitle: false,
-
-  computeContent() {
-    const content = [];
-
-    content.push({
-      id: "manageMembership",
-      icon: "user-plus",
-      label: I18n.t("groups.add_members.title"),
-      description:  I18n.t("groups.add_members.description"),
-    });
-
-    return content;
-  },
-
-  mutateValue(value) {
-    this.get(value)(this.get('model'));
-  }
-});

app/assets/javascripts/discourse/controllers/group-manage-members.js.es6

@@ -1,18 +1,19 @@
-import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import computed from 'ember-addons/ember-computed-decorators';
-import { extractError } from 'discourse/lib/ajax-error';
+import { popupAjaxError } from 'discourse/lib/ajax-error';
 
-export default Ember.Controller.extend(ModalFunctionality, {
+export default Ember.Controller.extend({
   loading: false,
   setAsOwner: false,
 
-  @computed('model.usernames')
-  disableAddButton(usernames) {
-    return !usernames || !(usernames.length > 0);
+  @computed('model.usernames', 'loading')
+  disableAddButton(usernames, loading) {
+    return loading || !usernames || !(usernames.length > 0);
   },
 
   actions: {
     addMembers() {
+      this.set('loading', true);
+
       const model = this.get('model');
       const usernames = model.get('usernames');
       if (Em.isEmpty(usernames)) { return; }
@@ -33,7 +34,8 @@ export default Ember.Controller.extend(ModalFunctionality, {
         model.set("usernames", null);
         this.send('closeModal');
       })
-      .catch(error => this.flash(extractError(error), 'error'));
+      .catch(popupAjaxError)
+      .finally(() => this.set('loading', false));
     },
   },
 });

app/assets/javascripts/discourse/controllers/group-manage-profile.js.es6

@@ -13,11 +13,11 @@ export default Ember.Controller.extend({
     save() {
       this.set('saving', true);
 
-      this.get('model').save().catch(error => {
-        popupAjaxError(error);
-      }).finally(() => {
-        this.set('saving', false);
-      });
+      this.get('model').save()
+        .catch(popupAjaxError)
+        .finally(() => {
+          this.set('saving', false);
+        });
     }
   }
 });

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

@@ -0,0 +1,9 @@
+export default Ember.Controller.extend({
+  application: Ember.inject.controller(),
+
+  tabs: [
+    { route: 'group.manage.profile', title: 'groups.manage.profile.title' },
+    { route: 'group.manage.members', title: 'groups.manage.members.title' },
+    { route: 'group.manage.logs', title: 'groups.manage.logs.title' },
+  ],
+});

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

@@ -37,14 +37,11 @@ export default Ember.Controller.extend({
     }
 
     if (this.currentUser && this.currentUser.canManageGroup(this.model)) {
-      defaultTabs.push(...[
+      defaultTabs.push(
         Tab.create({
-          name: 'edit', i18nKey: 'edit.title', icon: 'pencil'
-        }),
-        Tab.create({
-          name: 'logs', i18nKey: 'logs.title', icon: 'list-alt'
+          name: 'manage', i18nKey: 'manage.title', icon: 'wrench'
         })
-      ]);
+      );
     }
 
     return defaultTabs;

app/assets/javascripts/discourse/routes/app-route-map.js.es6

@@ -60,8 +60,11 @@ export default function() {
       this.route('mentions');
     });
 
-    this.route('logs');
-    this.route('edit');
+    this.route('manage', function() {
+      this.route('profile');
+      this.route('members');
+      this.route('logs');
+    });
 
     this.route('messages', function() {
       this.route('inbox');

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

@@ -0,0 +1,5 @@
+export default Discourse.Route.extend({
+  beforeModel() {
+    this.transitionTo("group.manage.profile");
+  }
+});

app/assets/javascripts/discourse/routes/group-manage-logs.js.es6

@@ -1,6 +1,6 @@
 export default Discourse.Route.extend({
   titleToken() {
-    return I18n.t('groups.logs.title');
+    return I18n.t('groups.manage.logs.title');
   },
 
   model() {
@@ -8,13 +8,12 @@ export default Discourse.Route.extend({
   },
 
   setupController(controller, model) {
-    this.controllerFor('group-logs').setProperties({ model });
-    this.controllerFor("group").set("showing", 'logs');
+    this.controllerFor('group-manage-logs').setProperties({ model });
   },
 
   actions: {
     willTransition() {
-      this.controllerFor('group-logs').reset();
+      this.controllerFor('group-manage-logs').reset();
     }
   }
 });

app/assets/javascripts/discourse/routes/group-manage-members.js.es6

@@ -0,0 +1,9 @@
+export default Discourse.Route.extend({
+  titleToken() {
+    return I18n.t('groups.manage.members.title');
+  },
+
+  model() {
+    return this.modelFor('group');
+  },
+});

app/assets/javascripts/discourse/routes/group-manage-profile.js.es6

@@ -0,0 +1,9 @@
+export default Discourse.Route.extend({
+  titleToken() {
+    return I18n.t('groups.manage.profile.title');
+  },
+
+  model() {
+    return this.modelFor('group');
+  },
+});

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

@@ -1,6 +1,6 @@
 export default Discourse.Route.extend({
   titleToken() {
-    return I18n.t('groups.edit.title');
+    return I18n.t('groups.manage.title');
   },
 
   model() {
@@ -14,8 +14,7 @@ export default Discourse.Route.extend({
   },
 
   setupController(controller, model) {
-    this.controllerFor('group-edit').setProperties({ model });
-    this.controllerFor("group").set("showing", 'edit');
-    model.findMembers();
+    this.controllerFor('group-manage').setProperties({ model });
+    this.controllerFor("group").set("showing", 'manage');
   }
 });

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

@@ -1,5 +1,4 @@
 import Group from 'discourse/models/group';
-import showModal from 'discourse/lib/show-modal';
 
 export default Discourse.Route.extend({
 
@@ -17,12 +16,5 @@ export default Discourse.Route.extend({
 
   setupController(controller, model) {
     controller.setProperties({ model, counts: this.get('counts') });
-  },
-
-  actions: {
-    showGroupMembershipModal(model) {
-      showModal('group-membership', { model });
-      this.controllerFor('modal').set('modalClass', 'group-membership-modal');
-    },
   }
 });

app/assets/javascripts/discourse/templates/components/group-manage-logs-filter.hbs

@@ -1,5 +1,5 @@
 {{#if value}}
-  {{#d-button class="btn-small group-logs-filter" action="clearFilter" actionParam=type}}
+  {{#d-button class="btn-small group-manage-logs-filter" action="clearFilter" actionParam=type}}
     <span>{{label}}</span>: {{filterText}}
     {{d-icon "times-circle"}}
   {{/d-button}}

app/assets/javascripts/discourse/templates/components/group-manage-logs-row.hbs

@@ -1,4 +1,4 @@
-<tr class="group-logs-row">
+<tr class="group-manage-logs-row">
   <td>
     {{#d-button class="btn-small" action="filter" actionParam=(hash value=log.action key="action")}}
       {{log.actionTitle}}
@@ -33,7 +33,7 @@
 
   <td>{{bound-date log.created_at}}</td>
 
-  <td {{action "toggleDetails"}} class="group-logs-expand-details">
+  <td {{action "toggleDetails"}} class="group-manage-logs-expand-details">
     {{#if log.prev_value}}
       {{#if expandDetails}}
         {{d-icon 'ellipsis-v'}}
@@ -48,11 +48,11 @@
   <tr>
     <td colspan='6'>
       <p>
-        <strong>{{i18n 'groups.logs.from'}}</strong>: <code>{{log.prev_value}}</code>
+        <strong>{{i18n 'groups.manage.logs.from'}}</strong>: <code>{{log.prev_value}}</code>
       </p>
 
       <p>
-        <strong>{{i18n 'groups.logs.to'}}</strong>: <code>{{log.new_value}}</code>
+        <strong>{{i18n 'groups.manage.logs.to'}}</strong>: <code>{{log.new_value}}</code>
       </p>
     </td>
   </tr>

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

@@ -24,7 +24,7 @@
           class="add"
           icon="plus"
           disabled=disableAddButton
-          label="groups.edit.add_members"}}
+          label="groups.manage.add_members"}}
     {{/if}}
   </div>
 {{/unless}}

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

@@ -1,66 +0,0 @@
-<div class='group-edit'>
-  <form class="form-horizontal">
-    <div class="control-group">
-      <label for='full_name'>{{i18n 'groups.edit.full_name'}}</label>
-      {{input type='text' name='full_name' value=model.full_name class='group-edit-full-name'}}
-    </div>
-
-    <div class="control-group">
-      <label for='bio'>{{i18n 'groups.bio'}}</label>
-      {{d-editor value=model.bio_raw class="group-edit-bio"}}
-    </div>
-
-    <div class="control-group">
-      {{group-flair-inputs model=model}}
-    </div>
-
-    <div class="control-group">
-      <label>
-        {{input type='checkbox'
-            checked=model.public_admission
-            class="group-edit-public-admission"
-            disabled=model.allow_membership_requests}}
-
-        {{i18n 'groups.public_admission'}}
-      </label>
-    </div>
-
-    <div class="control-group">
-      <label>
-        {{input type='checkbox'
-            checked=model.public_exit
-            class="group-edit-public-exit"}}
-
-        {{i18n 'groups.public_exit'}}
-      </label>
-    </div>
-
-    <div class="control-group">
-      <label>
-        {{input type='checkbox'
-            checked=model.allow_membership_requests
-            class="group-edit-allow-membership-requests"
-            disabled=model.public_admission}}
-
-        {{i18n 'groups.allow_membership_requests'}}
-      </label>
-    </div>
-
-    {{#if model.allow_membership_requests}}
-      <div>
-        <label for="membership-request-template">
-          {{i18n 'groups.membership_request_template'}}
-        </label>
-
-        {{expanding-text-area name="membership-request-template"
-            value=model.membership_request_template
-            class="group-edit-membership-request-template"}}
-      </div>
-    {{/if}}
-
-    {{plugin-outlet name="group-edit" args=(hash group=model)}}
-
-    {{d-button action="save" class="btn-primary" disabled=saving label="save"}}
-    {{savingText}}
-  </form>
-</div>

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

@@ -1,33 +0,0 @@
-{{#if model.logs}}
-  <div class="group-logs-controls">
-    {{group-logs-filter clearFilter="clearFilter" value=filters.action type="action"}}
-    {{group-logs-filter clearFilter="clearFilter" value=filters.acting_user type="acting_user"}}
-    {{group-logs-filter clearFilter="clearFilter" value=filters.target_user type="target_user"}}
-    {{group-logs-filter clearFilter="clearFilter" value=filters.subject type="subject"}}
-  </div>
-
-  {{#load-more selector=".group-logs .group-logs-row" action="loadMore"}}
-    <table class="group-logs">
-      <thead>
-        <th>{{i18n 'groups.logs.action'}}</th>
-        <th>{{i18n 'groups.logs.acting_user'}}</th>
-        <th>{{i18n 'groups.logs.target_user'}}</th>
-        <th>{{i18n 'groups.logs.subject'}}</th>
-        <th>{{i18n 'groups.logs.when'}}</th>
-        <th></th>
-      </thead>
-
-      <tbody>
-        {{#each model.logs as |log|}}
-          {{group-logs-row
-              log=log
-              filters=filters}}
-        {{/each}}
-      </tbody>
-    </table>
-  {{/load-more}}
-
-  {{conditional-loading-spinner condition=loading}}
-{{else}}
-  <div>{{i18n "groups.empty.logs"}}</div>
-{{/if}}

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

@@ -42,12 +42,6 @@
     <div class="container">
       {{group-navigation group=model currentPath=application.currentPath tabs=tabs}}
 
-      {{#if canManageGroup}}
-        {{group-navigation-dropdown
-            model=model
-            manageMembership=(route-action "showGroupMembershipModal")}}
-      {{/if}}
-
       {{#if displayGroupMessageButton}}
         {{d-button
             action="messageGroup"

app/assets/javascripts/discourse/templates/group/manage.hbs

@@ -0,0 +1,15 @@
+<div class='group-manage container'>
+  {{#mobile-nav class='group-manage-nav' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
+    {{#each tabs as |tab|}}
+      <li>
+        {{#link-to tab.route model.name}}
+          {{i18n tab.title}}
+        {{/link-to}}
+      </li>
+    {{/each}}
+  {{/mobile-nav}}
+
+  <div class="{{if site.mobileView "" "pull-left"}} group-manage-outlet">
+    {{outlet}}
+  </div>
+</div>

app/assets/javascripts/discourse/templates/group/manage/logs.hbs

@@ -0,0 +1,33 @@
+{{#if model.logs}}
+  <div class="group-manage-logs-controls">
+    {{group-manage-logs-filter clearFilter="clearFilter" value=filters.action type="action"}}
+    {{group-manage-logs-filter clearFilter="clearFilter" value=filters.acting_user type="acting_user"}}
+    {{group-manage-logs-filter clearFilter="clearFilter" value=filters.target_user type="target_user"}}
+    {{group-manage-logs-filter clearFilter="clearFilter" value=filters.subject type="subject"}}
+  </div>
+
+  {{#load-more selector=".group-manage-logs .group-manage-logs-row" action="loadMore"}}
+    <table class="group-manage-logs">
+      <thead>
+        <th>{{i18n 'groups.manage.logs.action'}}</th>
+        <th>{{i18n 'groups.manage.logs.acting_user'}}</th>
+        <th>{{i18n 'groups.manage.logs.target_user'}}</th>
+        <th>{{i18n 'groups.manage.logs.subject'}}</th>
+        <th>{{i18n 'groups.manage.logs.when'}}</th>
+        <th></th>
+      </thead>
+
+      <tbody>
+        {{#each model.logs as |log|}}
+          {{group-manage-logs-row
+              log=log
+              filters=filters}}
+        {{/each}}
+      </tbody>
+    </table>
+  {{/load-more}}
+
+  {{conditional-loading-spinner condition=loading}}
+{{else}}
+  <div>{{i18n "groups.empty.logs"}}</div>
+{{/if}}

app/assets/javascripts/discourse/templates/group/manage/members.hbs

@@ -0,0 +1,25 @@
+<form class="form-horizontal group-manage-members">
+  <div class="control-group">
+    <label>{{i18n "groups.manage.members.usernames"}}</label>
+
+    {{user-selector
+        usernames=model.usernames
+        placeholderKey="groups.selector_placeholder"
+        id="group-manage-members-user-selector"}}
+  </div>
+
+  {{#if this.currentUser.admin}}
+    <div class="control-group group-manage-members-make-owner">
+      <label>
+        {{input type="checkbox" class="inline" checked=setAsOwner}}
+        {{i18n "groups.manage.members.as_owner"}}
+      </label>
+    </div>
+  {{/if}}
+
+  {{d-button action="addMembers"
+      class="add btn-primary"
+      icon="plus"
+      disabled=disableAddButton
+      label="groups.add"}}
+</form>

app/assets/javascripts/discourse/templates/group/manage/profile.hbs

@@ -0,0 +1,71 @@
+<form class="form-horizontal">
+  {{#if this.currentUser.admin}}
+    <div class="control-group">
+      <label for='name'>{{i18n 'groups.manage.name'}}</label>
+      {{input type='text' name='name' value=model.name class='group-manage-name'}}
+    </div>
+  {{/if}}
+
+  <div class="control-group">
+    <label for='full_name'>{{i18n 'groups.manage.full_name'}}</label>
+    {{input type='text' name='full_name' value=model.full_name class='group-manage-full-name'}}
+  </div>
+
+  <div class="control-group">
+    <label for='bio'>{{i18n 'groups.bio'}}</label>
+    {{d-editor value=model.bio_raw class="group-manage-bio"}}
+  </div>
+
+  <div class="control-group">
+    {{group-flair-inputs model=model}}
+  </div>
+
+  <div class="control-group">
+    <label>
+      {{input type='checkbox'
+          checked=model.public_admission
+          class="group-manage-public-admission"
+          disabled=model.allow_membership_requests}}
+
+      {{i18n 'groups.public_admission'}}
+    </label>
+  </div>
+
+  <div class="control-group">
+    <label>
+      {{input type='checkbox'
+          checked=model.public_exit
+          class="group-manage-public-exit"}}
+
+      {{i18n 'groups.public_exit'}}
+    </label>
+  </div>
+
+  <div class="control-group">
+    <label>
+      {{input type='checkbox'
+          checked=model.allow_membership_requests
+          class="group-manage-allow-membership-requests"
+          disabled=model.public_admission}}
+
+      {{i18n 'groups.allow_membership_requests'}}
+    </label>
+  </div>
+
+  {{#if model.allow_membership_requests}}
+    <div>
+      <label for="membership-request-template">
+        {{i18n 'groups.membership_request_template'}}
+      </label>
+
+      {{expanding-text-area name="membership-request-template"
+          value=model.membership_request_template
+          class="group-manage-membership-request-template"}}
+    </div>
+  {{/if}}
+
+  {{plugin-outlet name="group-manage" args=(hash group=model)}}
+
+  {{d-button action="save" class="btn-primary" disabled=saving label="save"}}
+  {{savingText}}
+</form>

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

@@ -1,25 +0,0 @@
-{{#d-modal-body class='group-membership' title="groups.add_members.title"}}
-  <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">
-  {{d-button action="addMembers"
-      class="add btn-primary"
-      icon="plus"
-      disabled=disableAddButton
-      label="groups.add"}}
-</div>