Added member details and hid member column on activity feed when filtered by member

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

- extracted member details display into a `<GhMemberDetails>` component for re-use in the member details and members-activity screens
- added loading of member record from the member id query param and displayed the member details above the table when a member filter is present
- hid the member column in the events table when a member filter is present
  - it's useless/repeated info at that point

ghost/admin/app/components/gh-member-details.hbs

@@ -0,0 +1,48 @@
+<section class="gh-member-detail-overview" ...attributes>
+    <div class="gh-main-section-block">
+        <div class="gh-main-section-content">
+            <div class="flex items-center">
+                {{#if (or @member.name @member.email)}}
+                    <GhMemberAvatar
+                        @member={{@member}}
+                        @sizeClass={{if @member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-subheadline fw4 lh-zero tracked-1'}}
+                        @containerClass="w20 h20 mr4 gh-member-detail-avatar"
+                    />
+                {{else}}
+                    <div class="flex items-center justify-center br-100 mr4 gh-new-member-avatar">
+                        <span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
+                    </div>
+                {{/if}}
+                <div>
+                    <h3>
+                        {{or @member.name @member.email}}
+                        {{#unless (or @member.name @member.email)}}
+                            {{#if @member.isNew}}
+                            <span class="midgrey">New member</span>
+                            {{/if}}
+                        {{/unless}}
+                    </h3>
+                    <p>
+                        {{#if (and @member.name @member.email)}}
+                            <a href="mailto:{{@member.email}}">{{@member.email}}</a>
+                        {{/if}}
+                    </p>
+                    {{#unless @member.isNew}}
+                    <p class="{{if @member.name "nudge-bottom--2"}}">
+                        {{#if @member.geolocation}}
+                            {{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
+                                {{@member.geolocation.region}}, US
+                            {{else}}
+                                {{or @member.geolocation.country "Unknown location"}}
+                            {{/if}}
+                        {{else}}
+                            Unknown location
+                        {{/if}}
+                        – Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
+                    </p>
+                    {{/unless}}
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

ghost/admin/app/components/gh-member-settings-form.hbs

@@ -1,53 +1,6 @@
 <div class="gh-member-settings" ...attributes>
 
-    <section class="gh-main-section no-heading gh-member-detail-overview">
+    <GhMemberDetails class="gh-main-section no-heading" @member={{@member}} />
-        <div class="gh-main-section-block">
-            <div class="gh-main-section-content">
-                <div class="flex items-center">
-                    {{#if (or this.member.name this.member.email)}}
-                        <GhMemberAvatar
-                            @member={{this.member}}
-                            @sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-subheadline fw4 lh-zero tracked-1'}}
-                            @containerClass="w20 h20 mr4 gh-member-detail-avatar"
-                        />
-                    {{else}}
-                        <div class="flex items-center justify-center br-100 mr4 gh-new-member-avatar">
-                            <span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
-                        </div>
-                    {{/if}}
-                    <div>
-                        <h3>
-                            {{or this.member.name this.member.email}}
-                            {{#unless (or this.member.name this.member.email)}}
-                                {{#if this.member.isNew}}
-                                <span class="midgrey">New member</span>
-                                {{/if}}
-                            {{/unless}}
-                        </h3>
-                        <p>
-                            {{#if (and this.member.name this.member.email)}}
-                                <a href="mailto:{{this.member.email}}">{{this.member.email}}</a>
-                            {{/if}}
-                        </p>
-                        {{#unless this.member.isNew}}
-                        <p class="{{if this.member.name "nudge-bottom--2"}}">
-                            {{#if this.member.geolocation}}
-                                {{#if (and (eq this.member.geolocation.country_code "US") @member.geolocation.region)}}
-                                    {{this.member.geolocation.region}}, US
-                                {{else}}
-                                    {{or this.member.geolocation.country "Unknown location"}}
-                                {{/if}}
-                            {{else}}
-                                Unknown location
-                            {{/if}}
-                            – Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
-                        </p>
-                        {{/unless}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <section class="gh-main-section columns-3">
         <div class="gh-main-section-block span-2">

ghost/admin/app/components/members-activity/no-events.hbs

@@ -3,7 +3,7 @@
         {{svg-jar "members-placeholder" class="gh-members-placeholder"}}
         {{#if @filter}}
             <h3>No activities match the current filter</h3>
-            <LinkTo @route="members-activity" @query={{hash filter=null}} class="gh-btn gh-btn-lg">
+            <LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}} class="gh-btn gh-btn-lg">
                 <span>Show all activity</span>
             </LinkTo>
         {{else}}

ghost/admin/app/components/members-activity/table-row.hbs

@@ -1,12 +1,14 @@
 {{#let (parse-member-event @event) as |event|}}
     <tr>
-        <div class="gh-list-data">
+        {{#unless @hideMemberColumn}}
-            <LinkTo @route="member" @model={{event.memberId}}>
+            <div class="gh-list-data">
-                <strong>{{event.member.name}}</strong>
+                <LinkTo @route="member" @model={{event.memberId}}>
-                <br>
+                    <strong>{{event.member.name}}</strong>
-                {{event.member.email}}
+                    <br>
-            </LinkTo>
+                    {{event.member.email}}
-        </div>
+                </LinkTo>
+            </div>
+        {{/unless}}
         <div class="gh-list-data">
             {{event.action}}
             {{event.object}}

ghost/admin/app/components/members-activity/table.hbs

@@ -1,14 +1,14 @@
 <table class="gh-list">
     <thead>
         <tr>
-            <th>Member</th>
+            {{#unless @hideMemberColumn}}<th>Member</th>{{/unless}}
             <th>Event</th>
             <th>Time</th>
         </tr>
     </thead>
     <tbody>
         {{#each @events as |event|}}
-            <MembersActivity::TableRow @event={{event}} />
+            <MembersActivity::TableRow @hideMemberColumn={{@hideMemberColumn}} @event={{event}} />
         {{/each}}
     </tbody>
 </table>

ghost/admin/app/controllers/members-activity.js

@@ -5,6 +5,7 @@ import {tracked} from '@glimmer/tracking';
 
 export default class MembersActivityController extends Controller {
     @service router;
+    @service store;
 
     queryParams = ['excludedEvents', 'member'];
 
@@ -20,6 +21,16 @@ export default class MembersActivityController extends Controller {
         return filterParts.filter(p => !!p).join('+');
     }
 
+    get memberRecord() {
+        if (!this.member) {
+            return null;
+        }
+
+        // TODO: {reload: true} here shouldn't be needed but without it
+        // the template renders nothing if the record is already in the store
+        return this.store.findRecord('member', this.member, {reload: true});
+    }
+
     @action
     updateExcludedEvents(newList) {
         this.router.transitionTo({queryParams: {excludedEvents: newList}});

ghost/admin/app/templates/members-activity.hbs

@@ -13,10 +13,14 @@
     </GhCanvasHeader>
 
     <div class="view-container">
+        {{#if this.memberRecord}}
+            <GhMemberDetails @member={{this.memberRecord}} />
+        {{/if}}
+
         {{#let (members-event-fetcher filter=this.filter pageSize=50) as |eventsFetcher|}}
             <div class="gh-list-scrolling">
                 {{#if eventsFetcher.data}}
-                    <MembersActivity::Table @events={{eventsFetcher.data}} />
+                    <MembersActivity::Table @hideMemberColumn={{if this.member true}} @events={{eventsFetcher.data}} />
 
                     {{#unless (or eventsFetcher.isLoading eventsFetcher.hasReachedEnd)}}
                         <GhScrollTrigger @enter={{eventsFetcher.loadNextPage}} @triggerOffset={{250}} />