Added fallback for top members (#1856)

* Added fallback for top members

refs https://github.com/TryGhost/Team/issues/469

We do not have open rates for a member until we've sent at least 5
emails. In order to still display a top members section for sites which
have not sent that many newsletters, we fallback to paid members,
ordered by created_at. This effectively gives us our oldest members,
which are currently paid.

ghost/admin/app/controllers/dashboard.js

@@ -54,8 +54,10 @@ export default class DashboardController extends Controller {
     @tracked
     whatsNewEntriesError = null;
 
-    get showTopMembers() {
-        return this.feature.get('emailAnalytics') && this.settings.get('emailTrackOpens');
+    get topMembersDataHasOpenRates() {
+        return this.topMembersData && this.topMembersData.find((member) => {
+            return member.emailOpenRate !== null;
+        });
     }
 
     initialise() {
@@ -208,9 +210,18 @@ export default class DashboardController extends Controller {
             limit: 10
         };
         this.store.query('member', query).then((result) => {
+            if (!result.length) {
+                return this.store.query('member', {
+                    filter: 'status:paid',
+                    order: 'created_at asc',
+                    limit: 10
+                });
+            }
+            return result;
+        }).then((result) => {
             this.topMembersData = result;
             this.topMembersLoading = false;
-        }, (error) => {
+        }).catch((error) => {
             this.topMembersError = error;
             this.topMembersLoading = false;
         });

ghost/admin/app/styles/layouts/dashboard.css

@@ -440,7 +440,8 @@
     line-height: 1;
 }
 
-.gh-dashboard-top-member .name {
+.gh-dashboard-top-member .name,
+.gh-dashboard-top-member .email {
     font-size: 1.4rem;
     font-weight: 500;
     color: var(--black);
@@ -451,6 +452,13 @@
     margin-left: 12px;
     color: var(--midgrey);
     font-size: 1.3rem;
+    text-align: right;
+    line-height: 1.35em;
+}
+
+.gh-dashboard-top-member .open-rate span {
+    color: var(--midlightgrey);
+    font-size: 1.2rem;
 }
 
 .gh-dashboard-top-members-footer {

ghost/admin/app/templates/dashboard.hbs

@@ -170,20 +170,24 @@
         </section>
 
         <section class="gh-dashboard-area members-activity">
-            {{#if (and this.showTopMembers this.topMembersData)}}
+            {{#if this.topMembersData}}
                 <div class="gh-dashboard-box grey top-members">
                     <div class="gh-dashboard-header-container">
                         <h4 class="gh-dashboard-header">Top members</h4>
+                        {{#if this.topMembersDataHasOpenRates}}
                         <h4 class="gh-dashboard-header secondary">Open rate</h4>
+                        {{else}}
+                        <h4 class="gh-dashboard-header secondary">Member since</h4>
+                        {{/if}}
                     </div>
                     <div class="gh-dashboard-list">
                         {{#if this.topMembersLoading}}
                             Loading...
                         {{else}}
                             {{#if this.topMembersError}}
-                                <p class="error">
-                                    There was an error loading events
-                                    <code>{{this.events.error.message}}</code>
+                                <p class="tc">
+                                    There was an error loading member events.
+                                    <code class="hidden">{{this.events.error.message}}</code>
                                 </p>
                             {{else}}
                             <ul class="gh-dashboard-top-members">
@@ -191,9 +195,20 @@
                                     <li class="gh-dashboard-top-member">
                                         <LinkTo class="member-details" @route="member" @model="{{member.id}}">
                                             <GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
+                                            {{#if member.name}}
                                                 <span class="name">{{member.name}}</span>
+                                            {{else}}
+                                                <span class="email">{{member.email}}</span>
+                                            {{/if}}
                                         </LinkTo>
+                                        {{#if member.emailOpenRate}}
                                             <span class="open-rate">{{member.emailOpenRate}}%</span>
+                                        {{else}}
+                                            <span class="open-rate">
+                                                {{moment-format @member.createdAtUTC "D MMM YYYY"}}<br>
+                                                <span>{{moment-from-now @member.createdAtUTC}}</span>
+                                            </span>
+                                        {{/if}}
                                     </li>
                                 {{/each}}
                             </ul>