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 320642bb97..7ee6cd0db6 100644 --- a/mailpoet/assets/js/src/automation/listing/components/cells/more.tsx +++ b/mailpoet/assets/js/src/automation/listing/components/cells/more.tsx @@ -1,5 +1,7 @@ -import { EllipsisMenu, MenuItem } from '@woocommerce/components/build'; import { __ } from '@wordpress/i18n'; +import { DropdownMenu } from '@wordpress/components'; +import { moreVertical } from '@wordpress/icons'; +import { useDuplicateButton } from '../menu'; import { Workflow } from '../../workflow'; type Props = { @@ -7,19 +9,19 @@ type Props = { }; 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 menuItems = [duplicate].filter((item) => item); + return ( - ( -
- {}}> -

{__('Duplicate', 'mailpoet')}

-
- {}}> -

{__('Move to trash', 'mailpoet')}

-
-
- )} - /> + <> + control)} + /> + ); } diff --git a/mailpoet/assets/js/src/automation/listing/components/menu/duplicate.tsx b/mailpoet/assets/js/src/automation/listing/components/menu/duplicate.tsx new file mode 100644 index 0000000000..1d9a81745c --- /dev/null +++ b/mailpoet/assets/js/src/automation/listing/components/menu/duplicate.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 useDuplicateButton = (workflow: Workflow): Item | undefined => { + const { duplicateWorkflow } = useDispatch(storeName); + + if (workflow.status === WorkflowStatus.TRASH) { + return undefined; + } + + return { + key: 'duplicate', + control: { + title: __('Duplicate', 'mailpoet'), + icon: null, + onClick: () => duplicateWorkflow(workflow), + }, + }; +}; diff --git a/mailpoet/assets/js/src/automation/listing/components/menu/index.ts b/mailpoet/assets/js/src/automation/listing/components/menu/index.ts new file mode 100644 index 0000000000..c6a10f5ed5 --- /dev/null +++ b/mailpoet/assets/js/src/automation/listing/components/menu/index.ts @@ -0,0 +1 @@ +export * from './duplicate'; diff --git a/mailpoet/assets/js/src/automation/listing/components/menu/item.ts b/mailpoet/assets/js/src/automation/listing/components/menu/item.ts new file mode 100644 index 0000000000..41de4bd644 --- /dev/null +++ b/mailpoet/assets/js/src/automation/listing/components/menu/item.ts @@ -0,0 +1,8 @@ +import { DropdownMenu } from '@wordpress/components'; + +import Control = DropdownMenu.Control; + +export type Item = { + key: string; + control: Control; +};