Add trash workflow action

[MAILPOET-4540]

mailpoet/assets/js/src/automation/listing/components/cells/more.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { DropdownMenu } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
-import { useDuplicateButton } from '../menu';
+import { useDuplicateButton, useTrashButton } from '../menu';
 import { Workflow } from '../../workflow';
 
 type Props = {
@@ -12,8 +12,9 @@ export function More({ workflow }: Props): JSX.Element {
   // Menu items are using custom hooks because the "DropdownMenu" component uses the "controls"
   // attribute rather than child components, but we need to render modal confirmation dialogs.
   const duplicate = useDuplicateButton(workflow);
+  const trash = useTrashButton(workflow);
 
-  const menuItems = [duplicate].filter((item) => item);
+  const menuItems = [duplicate, trash].filter((item) => item);
 
   return (
     <>

mailpoet/assets/js/src/automation/listing/components/menu/index.ts

@@ -1 +1,2 @@
 export * from './duplicate';
+export * from './trash';

mailpoet/assets/js/src/automation/listing/components/menu/trash.tsx

@@ -0,0 +1,22 @@
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { Item } from './item';
+import { storeName } from '../../store';
+import { Workflow, WorkflowStatus } from '../../workflow';
+
+export const useTrashButton = (workflow: Workflow): Item | undefined => {
+  const { trashWorkflow } = useDispatch(storeName);
+
+  if (workflow.status === WorkflowStatus.TRASH) {
+    return undefined;
+  }
+
+  return {
+    key: 'trash',
+    control: {
+      title: __('Trash', 'mailpoet'),
+      icon: null,
+      onClick: () => trashWorkflow(workflow),
+    },
+  };
+};