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>
   );