Added engagement chart status dropdown

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

Switch between all members, paid members and free members in the engagement (last seen) chart, in Dashboard 5.0.

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -5,7 +5,7 @@
         </section>
 
         <section class="prototype-section">
-            <div class="prototype-day-selection">
+            <div class="prototype-selection">
                 <PowerSelect
                     @selected={{this.selectedDaysOption}}
                     @options={{this.daysOptions}}

ghost/admin/app/components/dashboard/v5/chart-engagement.hbs

@@ -1,4 +1,20 @@
-<h2>Engagement ({{this.status}})</h2>
+<h2>Engagement</h2>
+
+<div class="prototype-selection">
+    <PowerSelect
+        @selected={{this.selectedStatusOption}}
+        @options={{this.statusOptions}}
+        @searchEnabled={{false}}
+        @onChange={{this.onSwitchStatus}}
+        @triggerComponent="gh-power-select/trigger"
+        @triggerClass="gh-contentfilter-menu-trigger"
+        @dropdownClass="gh-contentfilter-menu-dropdown"
+        @matchTriggerWidth={{false}}
+        as |option|
+    >
+        {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+    </PowerSelect>
+</div>
 
 <div class="prototype-counts">
     <div class="prototype-box">

ghost/admin/app/components/dashboard/v5/chart-engagement.js

@@ -1,5 +1,18 @@
 import Component from '@glimmer/component';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
+
+const STATUS_OPTIONS = [{
+    name: 'All members',
+    value: 'total'
+}, {
+    name: 'Paid members',
+    value: 'paid'
+}, {
+    name: 'Free members',
+    value: 'free'
+}];
 
 export default class ChartEngagement extends Component {
     @service dashboardStats;
@@ -14,10 +27,17 @@ export default class ChartEngagement extends Component {
         this.dashboardStats.loadMembersCounts();
     }
 
-    get status() {
+    @tracked status = 'total';
-        // todo: this should come from a dropdown
+    statusOptions = STATUS_OPTIONS;
-        // + reload stats after changing this value
+
-        return 'total';
+    get selectedStatusOption() {
+        return this.statusOptions.find(option => option.value === this.status);
+    }
+
+    @action 
+    onSwitchStatus(selected) {
+        this.status = selected.value;
+        this.dashboardStats.loadLastSeen(this.status);
     }
 
     get loading() {

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

@@ -1088,7 +1088,7 @@ a.gh-dashboard-container {
     gap: 10px;
 }
 
-.prototype-day-selection {
+.prototype-selection {
     display: flex;
     justify-content: flex-end;
 }