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,4 +1,5 @@
 <div class='row groups'>
+  {{#if sortedGroups}}
     <div class='content-list span6'>
       <h3>{{i18n 'admin.groups.edit'}}</h3>
       <ul>
@@ -22,8 +23,9 @@
         {{/if}}
       </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"