Wired up active/archived newsletter filter

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

- added dropdown for switching between active and archived newsletters
- modified the "default" newsletter display so it's only activated when a single active newsletter is shown
- added ability to un-archive a newsletter with a switch between "archive" and "un-archive" actions based on newsletter status
  - if all archived newsletters are un-archived, automatically switches to "active" filter so you're not left with an empty list

ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs

@@ -3,22 +3,20 @@
         <h4 class="gh-main-section-header small bn">Newsletters</h4>
         {{#if this.archivedNewsletters}}
             <div>
-                <div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
+                <div>
-                    {{!-- <PowerSelect
+                    <PowerSelect
-                        @selected={{this.selectedType}}
+                        @selected={{this.statusFilter}}
-                        @options={{this.availableTypes}}
+                        @options={{this.statusFilters}}
                         @searchEnabled={{false}}
-                        @onChange={{this.onTypeChange}}
+                        @onChange={{this.changeStatusFilter}}
                         @triggerComponent="gh-power-select/trigger"
-                        @triggerClass="gh-contentfilter-menu-trigger gh-contentfilter-menu-trigger-tiers"
+                        @triggerClass="ember-power-select-inline"
                         @dropdownClass="gh-contentfilter-menu-dropdown"
                         @matchTriggerWidth={{false}}
-                        as |type|
+                        as |status|
                     >
-                        {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
+                        {{titleize status}}
-                    </PowerSelect> --}}
+                    </PowerSelect>
-                    <span>Active</span>
-                    <span>{{svg-jar "arrow-down-small" class="w2"}}</span>
                 </div>
             </div>
         {{/if}}
@@ -28,8 +26,8 @@
             {{#if this.loadNewslettersTask.isRunning}}
                 <div class="gh-main-content">... loading</div>
             {{else}}
-                {{#each this.activeNewsletters as |newsletter|}}
+                {{#each this.filteredNewsletters as |newsletter|}}
-                    <div class="gh-main-content-card gh-newsletter-card {{if this.hasMultiple "multiple"}}">
+                    <div class="gh-main-content-card gh-newsletter-card {{unless this.displayingDefault "multiple"}}">
                         {{svg-jar "grab" class="grab-newsletter"}}
                         <div class="gh-newsletter-card-block title-block">
                             <h3 class="gh-newsletter-card-name">
@@ -39,7 +37,7 @@
                                 {{newsletter.description}}
                             </p>
                         </div>
-                        <div class="gh-newsletter-card-block stats-block {{if this.hasMultiple "multiple"}}">
+                        <div class="gh-newsletter-card-block stats-block {{unless this.displayingDefault "multiple"}}">
                             <div>
                                 <h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
                                 <p class="gh-newsletter-card-description">Subscribers</p>
@@ -50,7 +48,9 @@
                             </div>
                         </div>
                         <div class="gh-newsletter-card-block cta-block">
-                            {{#if this.hasMultiple}}
+                            {{#if this.displayingDefault}}
+                                <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize &rarr;</span></LinkTo>
+                            {{else}}
                                 <span class="dropdown">
                                     <GhDropdownButton
                                         @dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
@@ -69,15 +69,22 @@
                                         <li>
                                             <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="mr2"><span>Edit</span></LinkTo>
                                         </li>
-                                        <li>
+                                        {{#if (eq newsletter.status "active")}}
-                                            <button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
+                                            <li>
-                                                <span>Archive</span>
+                                                <button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
-                                            </button>
+                                                    <span>Archive</span>
-                                        </li>
+                                                </button>
+                                            </li>
+                                        {{/if}}
+                                        {{#if (eq newsletter.status "archived")}}
+                                            <li>
+                                                <button class="mr2" type="button" {{on "click" (perform this.unarchiveNewsletterTask newsletter)}}>
+                                                    <span>Un-archive</span>
+                                                </button>
+                                            </li>
+                                        {{/if}}
                                     </GhDropdown>
                                 </span>
-                            {{else}}
-                                <LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize &rarr;</span></LinkTo>
                             {{/if}}
                         </div>
                     </div>

ghost/admin/app/components/settings/members-email-labs/newsletter-management.js

@@ -1,10 +1,15 @@
 import Component from '@glimmer/component';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
 
 export default class NewsletterManagementComponent extends Component {
     @service store;
 
+    @tracked statusFilter = 'active';
+
+    statusFilters = ['active', 'archived'];
     newsletters = this.store.peekAll('newsletter');
 
     constructor() {
@@ -20,8 +25,17 @@ export default class NewsletterManagementComponent extends Component {
         return this.newsletters.filter(n => n.status === 'archived');
     }
 
-    get hasMultiple() {
+    get filteredNewsletters() {
-        return this.activeNewsletters.length > 1;
+        return this.newsletters.filter(n => n.status === this.statusFilter);
+    }
+
+    get displayingDefault() {
+        return this.statusFilter === 'active' && this.activeNewsletters.length === 1;
+    }
+
+    @action
+    changeStatusFilter(newFilter) {
+        this.statusFilter = newFilter;
     }
 
     @task
@@ -30,6 +44,18 @@ export default class NewsletterManagementComponent extends Component {
         return yield newsletter.save();
     }
 
+    @task
+    *unarchiveNewsletterTask(newsletter) {
+        newsletter.status = 'active';
+        const result = yield newsletter.save();
+
+        if (this.statusFilter === 'archived' && !this.archivedNewsletters.length) {
+            this.statusFilter = 'active';
+        }
+
+        return result;
+    }
+
     @task
     *loadNewslettersTask() {
         return yield this.store.findAll('newsletter');