diff --git a/mailpoet/assets/js/src/automation/listing/components/cells/more.tsx b/mailpoet/assets/js/src/automation/listing/components/cells/more.tsx index 7ee6cd0db6..f5fe6a89a6 100644 --- a/mailpoet/assets/js/src/automation/listing/components/cells/more.tsx +++ b/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 ( <> diff --git a/mailpoet/assets/js/src/automation/listing/components/menu/index.ts b/mailpoet/assets/js/src/automation/listing/components/menu/index.ts index c6a10f5ed5..40a5045910 100644 --- a/mailpoet/assets/js/src/automation/listing/components/menu/index.ts +++ b/mailpoet/assets/js/src/automation/listing/components/menu/index.ts @@ -1 +1,2 @@ export * from './duplicate'; +export * from './trash'; diff --git a/mailpoet/assets/js/src/automation/listing/components/menu/trash.tsx b/mailpoet/assets/js/src/automation/listing/components/menu/trash.tsx new file mode 100644 index 0000000000..cb558d3881 --- /dev/null +++ b/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), + }, + }; +};