Update Move to Trash button component on Automation statistics page

MAILPOET-5700

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)}

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>
         )}
       />