feat: add delete step functionality

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import type { PopoverProps } from '@mui/material/Popover';
+
+import { DELETE_STEP } from 'graphql/mutations/delete-step';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type FlowStepContextMenuProps = {
+  stepId: string;
+  onClose: PopoverProps['onClose'];
+  anchorEl: HTMLButtonElement;
+  deletable: boolean;
+};
+
+function FlowStepContextMenu(props: FlowStepContextMenuProps): React.ReactElement {
+  const { stepId, onClose, anchorEl, deletable } = props;
+  const [deleteStep] = useMutation(DELETE_STEP);
+  const formatMessage = useFormatMessage();
+
+  const deleteActionHandler = React.useCallback(async (event: React.SyntheticEvent) => {
+    event.stopPropagation();
+    await deleteStep({ variables: { id: stepId }});
+  }, [stepId]);
+
+  return (
+    <Menu
+      open={true}
+      onClose={onClose}
+      hideBackdrop={false}
+      anchorEl={anchorEl}
+    >
+      {deletable && <MenuItem onClick={deleteActionHandler}>
+        {formatMessage('connection.delete')}
+      </MenuItem>}
+    </Menu>
+  );
+};
+
+export default FlowStepContextMenu;