feat: add duplicate flow functionality

packages/web/src/components/FlowContextMenu/index.tsx

@@ -7,6 +7,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useSnackbar } from 'notistack';
 
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
+import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 
@@ -22,8 +23,26 @@ export default function ContextMenu(
   const { flowId, onClose, anchorEl } = props;
   const { enqueueSnackbar } = useSnackbar();
   const [deleteFlow] = useMutation(DELETE_FLOW);
+  const [duplicateFlow] = useMutation(
+    DUPLICATE_FLOW,
+    {
+      refetchQueries: ['GetFlows'],
+    }
+  );
   const formatMessage = useFormatMessage();
 
+  const onFlowDuplicate = React.useCallback(async () => {
+    await duplicateFlow({
+      variables: { input: { id: flowId } },
+    });
+
+    enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
+      variant: 'success',
+    });
+
+    onClose();
+  }, [flowId, onClose, duplicateFlow]);
+
   const onFlowDelete = React.useCallback(async () => {
     await deleteFlow({
       variables: { input: { id: flowId } },
@@ -42,7 +61,9 @@ export default function ContextMenu(
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });
-  }, [flowId, deleteFlow]);
+
+    onClose();
+  }, [flowId, onClose, deleteFlow]);
 
   return (
     <Menu
@@ -55,6 +76,8 @@ export default function ContextMenu(
         {formatMessage('flow.view')}
       </MenuItem>
 
+      <MenuItem onClick={onFlowDuplicate}>{formatMessage('flow.duplicate')}</MenuItem>
+
       <MenuItem onClick={onFlowDelete}>{formatMessage('flow.delete')}</MenuItem>
     </Menu>
   );

packages/web/src/graphql/mutations/duplicate-flow.ts

@@ -0,0 +1,28 @@
+import { gql } from '@apollo/client';
+
+export const DUPLICATE_FLOW = gql`
+  mutation DuplicateFlow($input: DuplicateFlowInput) {
+    duplicateFlow(input: $input) {
+      id
+      name
+      active
+      status
+      steps {
+        id
+        type
+        key
+        appKey
+        iconUrl
+        webhookUrl
+        status
+        position
+        connection {
+          id
+          verified
+          createdAt
+        }
+        parameters
+      }
+    }
+  }
+`;

packages/web/src/locales/en.json

@@ -46,6 +46,7 @@
   "flow.paused": "Paused",
   "flow.draft": "Draft",
   "flow.successfullyDeleted": "The flow and associated executions have been deleted.",
+  "flow.successfullyDuplicated": "The flow has been successfully duplicated.",
   "flowEditor.publish": "PUBLISH",
   "flowEditor.unpublish": "UNPUBLISH",
   "flowEditor.publishedFlowCannotBeUpdated": "To edit this flow, you must first unpublish it.",
@@ -68,6 +69,7 @@
   "flow.createdAt": "created {datetime}",
   "flow.updatedAt": "updated {datetime}",
   "flow.view": "View",
+  "flow.duplicate": "Duplicate",
   "flow.delete": "Delete",
   "flowStep.triggerType": "Trigger",
   "flowStep.actionType": "Action",