UX: Display button to add a group when no group has been selected.

https://meta.discourse.org/t/new-button-on-groups/44546

app/assets/javascripts/admin/controllers/admin-groups-type-index.js.es6

@@ -0,0 +1,11 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Controller.extend({
+  adminGroupsType: Ember.inject.controller(),
+  sortedGroups: Ember.computed.alias("adminGroupsType.sortedGroups"),
+
+  @computed("sortedGroups")
+  messageKey(sortedGroups) {
+    return `admin.groups.${sortedGroups.length > 0 ? 'none_selected' : 'no_custom_groups'}`;
+  }
+});

app/assets/javascripts/admin/templates/groups-type-index.hbs

@@ -0,0 +1,9 @@
+<div class="groups-type-index">
+  <p>{{i18n messageKey}}</p>
+
+  <div>
+    {{#link-to 'adminGroup' 'new' class="btn"}}
+      {{fa-icon "plus"}} {{i18n 'admin.groups.new'}}
+    {{/link-to}}
+  </div>
+</div>

app/assets/javascripts/admin/templates/groups-type.hbs

@@ -1,29 +1,31 @@
 <div class='row groups'>
-  <div class='content-list span6'>
-    <h3>{{i18n 'admin.groups.edit'}}</h3>
-    <ul>
-      {{#each sortedGroups as |group|}}
-        <li>
-          {{#link-to "adminGroup" group.type group.name}}{{group.name}}
-            {{#if group.userCountDisplay}}
-              <span class="count">{{number group.userCountDisplay}}</span>
-            {{/if}}
+  {{#if sortedGroups}}
+    <div class='content-list span6'>
+      <h3>{{i18n 'admin.groups.edit'}}</h3>
+      <ul>
+        {{#each sortedGroups as |group|}}
+          <li>
+            {{#link-to "adminGroup" group.type group.name}}{{group.name}}
+              {{#if group.userCountDisplay}}
+                <span class="count">{{number group.userCountDisplay}}</span>
+              {{/if}}
+            {{/link-to}}
+          </li>
+        {{/each}}
+      </ul>
+      <div class='controls'>
+        {{#if isAuto}}
+          {{d-button action="refreshAutoGroups" icon="refresh" label="admin.groups.refresh" disabled=refreshingAutoGroups}}
+        {{else}}
+          {{#link-to 'adminGroup' 'new' class="btn"}}
+            {{fa-icon "plus"}} {{i18n 'admin.groups.new'}}
           {{/link-to}}
-        </li>
-      {{/each}}
-    </ul>
-    <div class='controls'>
-      {{#if isAuto}}
-        {{d-button action="refreshAutoGroups" icon="refresh" label="admin.groups.refresh" disabled=refreshingAutoGroups}}
-      {{else}}
-        {{#link-to 'adminGroup' 'new' class="btn"}}
-          {{fa-icon "plus"}} {{i18n 'admin.groups.new'}}
-        {{/link-to}}
-      {{/if}}
+        {{/if}}
+      </div>
     </div>
-  </div>
+  {{/if}}
 
-  <div class='content-editor'>
+  <div class="span13">
     {{outlet}}
   </div>
 </div>

app/assets/stylesheets/common/admin/admin_base.scss

@@ -696,6 +696,10 @@ section.details {
     width: 100%;
     border-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
   }
+
+  .content-list {
+    margin-right: 20px;
+  }
 }
 
 // Customise area

config/locales/client.en.yml

@@ -2568,6 +2568,8 @@ en:
         add_owners: Add owners
         incoming_email: "Custom incoming email address"
         incoming_email_placeholder: "enter email address"
+        none_selected: "Select a group to get started"
+        no_custom_groups: "Create a new custom group"
 
       api:
         generate_master: "Generate Master API Key"