Updated dashboard member activity widget to use fetcher resource

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

- re-uses same fetcher resource used on member activities screen
  - allows for component to be simplified as it no longer needs to care about handling data loading itself
  - drops use of 1-minute data caching as there is no real need for it in typical usage and can be confusing when the dashboard didn't update as expected
- exposed error message on `members-event-fetcher` if one is encountered

ghost/admin/app/components/dashboard/latest-member-activity.hbs

@@ -2,16 +2,22 @@
     <div class="gh-dashboard-box grey activity-feed" data-test-dashboard-member-activity>
         <h4 class="gh-dashboard-header">Activity feed</h4>
         <div class="content">
-            {{#if this.eventsLoading}}
-                Loading...
-            {{else}}
-                {{#if this.eventsError}}
+            {{#let (members-event-fetcher filter=(if (feature "membersActivityFeed") "type:-[email_delivered_event,email_opened_event,email_failed_event]") pageSize=5) as |eventsFetcher|}}
+                {{#if eventsFetcher.isLoading}}
+                    Loading...
+                {{/if}}
+
+                {{#if eventsFetcher.isError}}
                     <p class="error">
                         There was an error loading events
-                        <code>{{this.eventsError.message}}</code>
+                        {{#if eventsFetcher.errorMessage}}
+                            <code>{{eventsFetcher.errorMessage}}</code>
+                        {{/if}}
                     </p>
-                {{else}}
-                    <GhMemberActivityEventParser @events={{this.eventsData}} as |parsedEvents|>
+                {{/if}}
+
+                {{#unless (or eventsFetcher.isLoading eventsFetcher.isError)}}
+                    <GhMemberActivityEventParser @events={{eventsFetcher.data}} as |parsedEvents|>
                         <div class="gh-event-timeline">
                             {{#if parsedEvents}}
                                 <ul class="gh-dashboard-activity-feed">
@@ -42,8 +48,8 @@
                             <LinkTo @route="members-activity">See all activity {{svg-jar "arrow-right"}}</LinkTo>
                         </div>
                     {{/if}}
-                {{/if}}
-            {{/if}}
+                {{/unless}}
+            {{/let}}
         </div>
     </div>
 {{/if}}

ghost/admin/app/components/dashboard/latest-member-activity.js

@@ -1,18 +1,10 @@
 import Component from '@glimmer/component';
 import {inject as service} from '@ember/service';
-import {tracked} from '@glimmer/tracking';
 
 export default class DashboardLatestMemberActivityComponent extends Component {
-    @service dataCache;
-    @service feature;
-    @service membersActivity;
     @service session;
     @service settings;
 
-    @tracked eventsData = null;
-    @tracked eventsError = null;
-    @tracked eventsLoading = false;
-
     get shouldDisplay() {
         const isOwner = this.session.user?.isOwnerOnly;
         const hasCompletedLaunchWizard = this.settings.get('editorIsLaunchComplete');
@@ -23,39 +15,4 @@ export default class DashboardLatestMemberActivityComponent extends Component {
 
         return true;
     }
-
-    constructor() {
-        super(...arguments);
-
-        if (this.shouldDisplay) {
-            this.loadEvents();
-        }
-    }
-
-    async loadEvents() {
-        const limit = 5;
-        const filter = this.feature.membersActivity ?
-            'type:-[email_delivered_event,email_opened_event,email_failed_event]' :
-            '';
-
-        const dataKey = `dashboard-member-activity::${JSON.stringify({limit, filter})}`;
-
-        if (this.dataCache.get(dataKey)) {
-            this.eventsData = this.dataCache.get(dataKey);
-            return;
-        }
-
-        try {
-            this.eventsLoading = true;
-            const {events} = await this.membersActivity.fetchTask.perform({limit, filter});
-            this.eventsData = events;
-
-            const ONE_MINUTE = 1 * 60 * 1000;
-            this.dataCache.set(dataKey, events, ONE_MINUTE);
-        } catch (error) {
-            this.eventsError = error;
-        } finally {
-            this.eventsLoading = false;
-        }
-    }
 }

ghost/admin/app/helpers/members-event-fetcher.js

@@ -13,6 +13,7 @@ export default class MembersEventsFetcher extends Resource {
     @tracked data = new TrackedArray([]);
     @tracked isLoading = false;
     @tracked isError = false;
+    @tracked errorMessage = null;
     @tracked hasReachedEnd = false;
 
     cursor = null;
@@ -21,6 +22,7 @@ export default class MembersEventsFetcher extends Resource {
         return {
             isLoading: this.isLoading,
             isError: this.isError,
+            errorMessage: this.errorMessage,
             data: this.data,
             loadNextPage: this.loadNextPage,
             hasReachedEnd: this.hasReachedEnd
@@ -81,7 +83,12 @@ export default class MembersEventsFetcher extends Resource {
             this.data.push(...events);
         } catch (e) {
             this.isError = true;
-            // TODO: expose error message
+
+            const errorMessage = e.payload?.errors?.[0]?.message;
+            if (errorMessage) {
+                this.errorMessage = errorMessage;
+            }
+
             // TODO: log to Sentry
             console.error(e); // eslint-disable-line
         } finally {