Add duplicate workflow action, use dropdown from @wordpress/components

[MAILPOET-4540]

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 (
-    <EllipsisMenu
+    <>
-      label={`Actions for ${workflow.name}`}
+      <DropdownMenu
-      renderContent={() => (
+        label={__('More', 'mailpoet')}
-        <div>
+        icon={moreVertical}
-          <MenuItem onInvoke={() => {}}>
+        controls={menuItems.map(({ control }) => control)}
-            <p>{__('Duplicate', 'mailpoet')}</p>
+      />
-          </MenuItem>
+    </>
-          <MenuItem onInvoke={() => {}}>
-            <p>{__('Move to trash', 'mailpoet')}</p>
-          </MenuItem>
-        </div>
-      )}
-    />
   );
 }

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),
+    },
+  };
+};

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

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

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;
+};