From aebc17939c66b6985d803e97072fbf65b0e160c7 Mon Sep 17 00:00:00 2001
From: Oluwaseun Olorunsola <seun@oluwaseun.com.ng>
Date: Mon, 4 Dec 2023 11:31:08 +0100
Subject: [PATCH] Update Move to Trash button component on Automation
 statistics page

MAILPOET-5700
---
 .../editor/components/actions/trash-button.tsx         |  9 ++++++++-
 .../mailpoet/analytics/components/header/index.tsx     | 10 ++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx b/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx
index 26650ec566..216e85174a 100644
--- a/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx
+++ b/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx
@@ -7,8 +7,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { storeName } from '../../store';
 
-export function TrashButton(): JSX.Element {
+export function TrashButton({
+  performActionAfterDelete = () => {},
+}): JSX.Element {
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [isBusy, setIsBusy] = useState(false);
   const { automation } = useSelect(
     (select) => ({
       automation: select(storeName).getAutomationData(),
@@ -24,8 +27,11 @@ export function TrashButton(): JSX.Element {
         title={__('Delete automation', 'mailpoet')}
         confirmButtonText={__('Yes, delete', 'mailpoet')}
         onConfirm={async () => {
+          setIsBusy(true);
           trash(() => {
             setShowConfirmDialog(false);
+            setIsBusy(false);
+            performActionAfterDelete();
           });
         }}
         onCancel={() => setShowConfirmDialog(false)}
@@ -40,6 +46,7 @@ export function TrashButton(): JSX.Element {
       </ConfirmDialog>
 
       <Button
+        isBusy={isBusy}
         variant="secondary"
         isDestructive
         onClick={() => setShowConfirmDialog(true)}
diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/header/index.tsx b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/header/index.tsx
index de38bbb4de..b5f7a5c669 100644
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/header/index.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/header/index.tsx
@@ -3,7 +3,6 @@ import {
   ButtonGroup,
   Dropdown,
   MenuGroup,
-  MenuItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
@@ -18,6 +17,7 @@ import {
   DeactivateButton,
   DeactivateNowButton,
 } from '../../../../../editor/components/header';
+import { TrashButton } from '../../../../../editor/components/actions/trash-button';
 
 export function Header(): JSX.Element {
   const { automation } = useSelect((s) => ({
@@ -57,9 +57,11 @@ export function Header(): JSX.Element {
                 <ActivateButton label={__('Update & Activate', 'mailpoet')} />
               </>
             )}
-            <MenuItem isDestructive onClick={() => {}}>
-              {__('Move to Trash', 'mailpoet')}
-            </MenuItem>
+            <TrashButton
+              performActionAfterDelete={() => {
+                window.location.href = MailPoet.urls.automationListing;
+              }}
+            />
           </MenuGroup>
         )}
       />