Added last seen at column to members list when filtered

closes https://github.com/TryGhost/Team/issues/1388

- added `lastSeenAtUTC` property to member model
- added `last_seen_at` filter column handling to `<GhMembersListItemColumn>`
  - uses same format as the "Created" column showing the date only and a "days ago" string

ghost/admin/app/components/gh-members-list-item-column.hbs

@@ -1,10 +1,10 @@
 {{#if (eq @filterColumn 'label')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data wrap middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data wrap middarkgrey f8" data-test-table-data={{@filterColumn}}>
         <span class="gh-members-list-labels">{{this.labels}}</span>
     </LinkTo>
 
 {{else if (eq @filterColumn 'status')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
         {{#if (not (is-empty @member.status))}}
             <span>{{capitalize @member.status}}</span>
         {{else}}
@@ -12,8 +12,18 @@
         {{/if}}
     </LinkTo>
 
+{{else if (eq @filterColumn 'last_seen_at')}}
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
+        {{#if (not (is-empty @member.lastSeenAtUTC))}}
+            {{moment-format @member.lastSeenAtUTC "D MMM YYYY"}}
+            <div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.lastSeenAtUTC}}</div>
+        {{else}}
+            <span class="midlightgrey">-</span>
+        {{/if}}
+    </LinkTo>
+
 {{else if (eq @filterColumn 'email_count')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
         {{#if (not (is-empty @member.emailCount))}}
             <span>{{@member.emailCount}}</span>
         {{else}}
@@ -22,7 +32,7 @@
     </LinkTo>
 
 {{else if (eq @filterColumn 'email_opened_count')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
         {{#if (not (is-empty @member.emailOpenedCount))}}
             <span>{{@member.emailOpenedCount}}</span>
         {{else}}
@@ -31,23 +41,25 @@
     </LinkTo>
 
 {{else if (eq @filterColumn 'subscribed')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
         {{#if (not (is-empty @member.subscribed))}}
             <span>{{if @member.subscribed "Yes" "No"}}</span>
         {{else}}
             <span class="midlightgrey">-</span>
         {{/if}}
     </LinkTo>
+
 {{else if (eq @filterColumn 'subscriptions.status')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
         {{#if (not (is-empty this.subscriptionStatus))}}
             <span>{{capitalize this.subscriptionStatus}}</span>
         {{else}}
             <span class="midlightgrey">-</span>
         {{/if}}
     </LinkTo>
+
 {{else if (eq @filterColumn 'subscriptions.plan_interval')}}
-    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+    <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data={{@filterColumn}}>
         {{#if (not (is-empty this.billingPeriod))}}
             <span>{{capitalize this.billingPeriod}}</span>
         {{else}}

ghost/admin/app/components/gh-members-list-item.hbs

@@ -11,7 +11,7 @@
         <div class="gh-list-data"></div>
         {{/each}}
     {{else}}
-        <LinkTo @route="member" @model={{@member}} class="gh-list-data">
+        <LinkTo @route="member" @model={{@member}} class="gh-list-data" data-test-table-data="details">
             <div class="flex items-center">
                 <GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
                 <div class="w-80">
@@ -36,7 +36,7 @@
         {{/if}}
         {{#if @newsletterEnabled}}
             {{#if (feature "emailAnalytics")}}
-                <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8 {{unless @member.name "gh-members-list-open-rate-noname"}}">
+                <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8 {{unless @member.name "gh-members-list-open-rate-noname"}}" data-test-table-data="open-rate">
                     {{#if (not (is-empty @member.emailOpenRate))}}
                         <span>{{@member.emailOpenRate}}%</span>
                     {{else}}
@@ -46,7 +46,7 @@
             {{/if}}
         {{/if}}
 
-        <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8 {{unless @member.name "gh-members-geolocation-noname"}}">
+        <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8 {{unless @member.name "gh-members-geolocation-noname"}}" data-test-table-data="location">
             {{#if (and @member.geolocation @member.geolocation.country)}}
                 {{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
                     {{@member.geolocation.region}}, US
@@ -62,7 +62,7 @@
             {{/if}}
         </LinkTo>
 
-        <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8">
+        <LinkTo @route="member" @model={{@member}} class="gh-list-data middarkgrey f8" data-test-table-data="created-at">
             {{#if @member.createdAtUTC}}
                 <div>{{moment-format @member.createdAtUTC "D MMM YYYY"}}</div>
                 <div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>

ghost/admin/app/models/member.js

@@ -11,6 +11,7 @@ export default Model.extend(ValidationEngine, {
     note: attr('string'),
     status: attr('string'),
     createdAtUTC: attr('moment-utc'),
+    lastSeenAtUTC: attr('moment-utc'),
     subscriptions: attr('member-subscription'),
     subscribed: attr('boolean', {defaultValue: true}),
     comped: attr('boolean', {defaultValue: false}),

ghost/admin/app/serializers/member.js

@@ -5,6 +5,7 @@ import {EmbeddedRecordsMixin} from '@ember-data/serializer/rest';
 export default class MemberSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
     attrs = {
         createdAtUTC: {key: 'created_at'},
+        lastSeenAtUTC: {key: 'last_seen_at'},
         labels: {embedded: 'always'},
         emailRecipients: {embedded: 'always'}
     };

ghost/admin/tests/acceptance/members/filter-test.js

@@ -520,6 +520,12 @@ describe('Acceptance: Members filtering', function () {
             expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - last seen less than 6 days ago')
                 .to.equal(4);
 
+            // table shows last seen column+data
+            expect(find('[data-test-table-column="last_seen_at"]')).to.exist;
+            expect(findAll('[data-test-table-data="last_seen_at"]').length).to.equal(4);
+            expect(find('[data-test-table-data="last_seen_at"]')).to.contain.text('5 Feb 2022');
+            expect(find('[data-test-table-data="last_seen_at"]')).to.contain.text('5 days ago');
+
             await fillIn(valueInput, '11'); // last seen less than 11 days ago
             await blur(valueInput);
             expect(findAll('[data-test-list="members-list-item"]').length, '# of filtered member rows - last seen less than 11 days ago')