FIX: Display empty message when no groups can be shown.

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

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

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

@@ -1,5 +1,5 @@
 <div class="container group">
-  {{#link-to "groups" class='group-breadcrumb'}}{{fa-icon 'arrow-left'}} {{i18n 'groups.index'}}{{/link-to}}
+  {{#link-to "groups" class='group-breadcrumb'}}{{fa-icon 'arrow-left'}} {{i18n 'groups.index.title'}}{{/link-to}}
 
   <div class='group-details-container'>
     <div class='group-info'>

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

@@ -1,61 +1,65 @@
 {{#d-section pageClass="groups"}}
-  {{#load-more selector=".groups-table .groups-table-row" action="loadMore"}}
+  <h1>{{i18n "groups.index.title"}}</h1>
-    <h1>{{i18n "groups.index"}}</h1>
 
-    <div class='container'>
+  {{#if groups}}
-      <table class="groups-table">
+    {{#load-more selector=".groups-table .groups-table-row" action="loadMore"}}
-        <thead>
+      <div class='container'>
-          <th></th>
+        <table class="groups-table">
-          <th>{{i18n "groups.user_count"}}</th>
+          <thead>
-          <th>{{i18n "groups.membership"}}</th>
+            <th></th>
-        </thead>
+            <th>{{i18n "groups.user_count"}}</th>
+            <th>{{i18n "groups.membership"}}</th>
+          </thead>
 
-        <tbody>
+          <tbody>
-          {{#each groups as |group|}}
+            {{#each groups as |group|}}
-            <tr class="groups-table-row">
+              <tr class="groups-table-row">
-              <td class="groups-info">
+                <td class="groups-info">
-                {{#link-to "group.members" group.name}}
+                  {{#link-to "group.members" group.name}}
-                  {{#if group.flair_url}}
+                    {{#if group.flair_url}}
-                    <span class='group-avatar-flair'>
+                      <span class='group-avatar-flair'>
-                      {{avatar-flair
+                        {{avatar-flair
-                        flairURL=group.flair_url
+                          flairURL=group.flair_url
-                        flairBgColor=group.flair_bg_color
+                          flairBgColor=group.flair_bg_color
-                        flairColor=group.flair_color
+                          flairColor=group.flair_color
-                        groupName=group.name}}
+                          groupName=group.name}}
+                      </span>
+                    {{/if}}
+
+                    <span>
+                      <span class='groups-info-name'>{{group.name}}</span>
+
+                      {{#if group.full_name}}
+                        <span class='groups-info-full-name'>{{group.full_name}}</span>
+                      {{/if}}
+
+                      {{#if group.title}}
+                        <div>
+                          <span class='groups-info-title'>{{group.title}}</span>
+                        </div>
+                      {{/if}}
                     </span>
-                  {{/if}}
+                  {{/link-to}}
+                </td>
 
-                  <span>
+                <td class="groups-user-count">{{group.user_count}}</td>
-                    <span class='groups-info-name'>{{group.name}}</span>
 
-                    {{#if group.full_name}}
+                <td>
-                      <span class='groups-info-full-name'>{{group.full_name}}</span>
+                  {{#group-membership-button model=group createNewMessageViaParams='createNewMessageViaParams'}}
-                    {{/if}}
+                    {{d-button icon="ban"
+                        label=(if group.automatic 'groups.automatic_group' 'groups.closed_group')
+                        disabled=true}}
+                  {{/group-membership-button}}
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    {{/load-more}}
 
-                    {{#if group.title}}
+    {{conditional-loading-spinner condition=groups.loadingMore}}
-                      <div>
+  {{else}}
-                        <span class='groups-info-title'>{{group.title}}</span>
+    <p>{{i18n "groups.index.empty"}}</p>
-                      </div>
+  {{/if}}
-                    {{/if}}
-                  </span>
-                {{/link-to}}
-              </td>
-
-              <td class="groups-user-count">{{group.user_count}}</td>
-
-              <td>
-                {{#group-membership-button model=group createNewMessageViaParams='createNewMessageViaParams'}}
-                  {{d-button icon="ban"
-                      label=(if group.automatic 'groups.automatic_group' 'groups.closed_group')
-                      disabled=true}}
-                {{/group-membership-button}}
-              </td>
-            </tr>
-          {{/each}}
-        </tbody>
-      </table>
-    </div>
-  {{/load-more}}
-
-  {{conditional-loading-spinner condition=groups.loadingMore}}
 {{/d-section}}

app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6

@@ -103,7 +103,7 @@ export default createWidget('hamburger-menu', {
       links.push({ route: 'users', className: 'user-directory-link', label: 'directory.title' });
     }
 
-    links.push({ route: 'groups', className: 'groups-link', label: 'groups.index' });
+    links.push({ route: 'groups', className: 'groups-link', label: 'groups.index.title' });
 
     if (this.siteSettings.tagging_enabled) {
       links.push({ route: 'tags', label: 'tagging.tags' });

config/locales/client.en.yml

@@ -425,7 +425,9 @@ en:
       selector_placeholder: "Add members"
       owner: "owner"
       visible: "Group is visible to all users"
-      index: "Groups"
+      index:
+        title: "Groups"
+        empty: "There are no visible groups."
       title:
         one: "group"
         other: "groups"