From 58290a61348a17f9db6ed120cf7550dd548f5406 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 20 Apr 2022 11:08:48 +0100
Subject: [PATCH] Added confirmation dialog when archiving newsletter

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

- added confirmation modal that uses passed in archive task when confirming to provide feedback on progress
- switched archive link from immediately triggering the archive task to an action that launches the confirm modal
---
 .../admin/app/components/gh-nav-menu/main.hbs |  2 +-
 .../edit-newsletter/confirm-archive.hbs       | 32 +++++++++++++++++++
 .../modals/edit-newsletter/confirm-create.hbs |  2 +-
 .../newsletter-management.hbs                 |  2 +-
 .../newsletter-management.js                  | 16 +++++++++-
 5 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 ghost/admin/app/components/modals/edit-newsletter/confirm-archive.hbs

diff --git a/ghost/admin/app/components/gh-nav-menu/main.hbs b/ghost/admin/app/components/gh-nav-menu/main.hbs
index 65d697561a..a29ab0a403 100644
--- a/ghost/admin/app/components/gh-nav-menu/main.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/main.hbs
@@ -1,5 +1,5 @@
 <div class="flex flex-column h-100" {{css-transition (unless @firstRender "gh-nav-main")}} data-test-nav-menu="main" ...attributes>
-    
+
     {{#unless this.session.user.isContributor}}
         <header class="gh-nav-menu">
             <div class="gh-nav-menu-details">
diff --git a/ghost/admin/app/components/modals/edit-newsletter/confirm-archive.hbs b/ghost/admin/app/components/modals/edit-newsletter/confirm-archive.hbs
new file mode 100644
index 0000000000..919a187bac
--- /dev/null
+++ b/ghost/admin/app/components/modals/edit-newsletter/confirm-archive.hbs
@@ -0,0 +1,32 @@
+<div class="modal-content">
+    <header class="modal-header" data-test-modal="confirm-newsletter-archive">
+        <h1>Are you sure?</h1>
+    </header>
+    <button type="button" class="close" role="button" title="Close" {{on "click" (fn @close false)}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <p>
+            Your newsletter <strong>{{@data.newsletter.name}}</strong> will be
+            immediately archived and no longer be visible to your members.
+        </p>
+    </div>
+
+    <div class="modal-footer" {{on-key "Enter" (perform @data.archiveNewsletterTask @data.newsletter)}}>
+        <button
+            type="button"
+            class="gh-btn"
+            {{on "click" (fn @close false)}}
+        >
+            <span>Cancel</span>
+        </button>
+
+        <GhTaskButton
+            @buttonText="Archive"
+            @runningText="Archiving"
+            @successText="Archived"
+            @task={{@data.archiveNewsletterTask}}
+            @taskArgs={{@data.newsletter}}
+            @class="gh-btn gh-btn-black gh-btn-icon"
+        />
+    </div>
+</div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/modals/edit-newsletter/confirm-create.hbs b/ghost/admin/app/components/modals/edit-newsletter/confirm-create.hbs
index 8bc2c6c373..3b47504df2 100644
--- a/ghost/admin/app/components/modals/edit-newsletter/confirm-create.hbs
+++ b/ghost/admin/app/components/modals/edit-newsletter/confirm-create.hbs
@@ -1,5 +1,5 @@
 <div class="modal-content">
-    <header class="modal-header" data-test-modal="confirm-newsletter-email">
+    <header class="modal-header" data-test-modal="confirm-newsletter-create">
         <h1>All set? Here's what happens next</h1>
     </header>
     <button type="button" class="close" role="button" title="Close" {{on "click" (fn @close false)}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
diff --git a/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs
index 6dedd919d0..7e9360ce27 100644
--- a/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs
+++ b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.hbs
@@ -97,7 +97,7 @@
                                                 </li>
                                                 {{#if (eq newsletter.status "active")}}
                                                     <li>
-                                                        <button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
+                                                        <button class="mr2" type="button" {{on "click" (fn this.archiveNewsletter newsletter)}}>
                                                             <span>Archive</span>
                                                         </button>
                                                     </li>
diff --git a/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js
index 9cf8ed50fb..5bfb276066 100644
--- a/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js
+++ b/ghost/admin/app/components/settings/members-email-labs/newsletter-management.js
@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
+import ConfirmArchiveModal from '../../modals/edit-newsletter/confirm-archive';
 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;
+    @service modals;
     @service router;
+    @service store;
 
     @tracked statusFilter = 'active';
     @tracked filteredNewsletters = [];
@@ -24,6 +26,8 @@ export default class NewsletterManagementComponent extends Component {
     willDestroy() {
         super.willDestroy(...arguments);
         this.router.off('routeDidChange', this.handleNewRouteChange);
+
+        this.confirmArchiveModal?.close();
     }
 
     get activeNewsletters() {
@@ -64,6 +68,14 @@ export default class NewsletterManagementComponent extends Component {
         }
     }
 
+    @action
+    archiveNewsletter(newsletter) {
+        this.confirmArchiveModal = this.modals.open(ConfirmArchiveModal, {
+            newsletter,
+            archiveNewsletterTask: this.archiveNewsletterTask
+        });
+    }
+
     @task
     *archiveNewsletterTask(newsletter) {
         newsletter.status = 'archived';
@@ -71,6 +83,8 @@ export default class NewsletterManagementComponent extends Component {
 
         this.updateFilteredNewsletters();
 
+        this.confirmArchiveModal?.close();
+
         return result;
     }