feat(frontend): add hover state to edge delete button in FlowEditor

[Abhi1992002]

The delete button on flow editor edges is always visible, which creates visual clutter. This change makes the button only appear on hover, improving the UI while keeping it accessible.

Changes 🏗️

• Added hover state management using useState to track when the edge delete button is hovered
• Applied opacity transition to the delete button (fades in on hover, fades out when not hovered)
• Added onMouseEnter and onMouseLeave handlers to the button to control hover state
• Used cn utility for conditional className management
• Button remains interactive even when opacity-0 (still clickable for better UX)

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • Hover over an edge in the flow editor and verify the delete button fades in smoothly
  • Move mouse away from edge and verify the delete button fades out smoothly
  • Click the delete button while hovered to verify it still removes the edge connection
  • Test with multiple edges to ensure hover state is independent per edge

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch abhimanyuyadav/open-2898-connection-delete-button-x-is-always-visible-instead-of

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	795db93
🔍 Latest deploy log	https://app.netlify.com/projects/auto-gpt-docs/deploys/693a4307c733d00008cdb83f

[netlify]

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name	Link
🔨 Latest commit	795db93
🔍 Latest deploy log	https://app.netlify.com/projects/auto-gpt-docs-dev/deploys/693a430723bea2000826346f

[deepsource-io]

Here's the code health analysis summary for commits bd37fe9..795db93. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗
Python	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[AutoGPT-Agent]

Thank you for enhancing the CustomEdge component with hover effects! The implementation looks good, but there's an issue with your PR description:

Your PR description has a custom checklist at the top, followed by an unfilled template at the bottom. Instead, you should fill out the template checklist completely.

Please update your PR description to:

1. Remove the duplicate "### Changes 🏗️" section
2. Complete the template checklist for code changes, specifically:
   • Check off "I have clearly listed my changes in the PR description" (which you have done)
   • Check off "I have made a test plan"
   • Include and check off items in your test plan (e.g., "Verified hover effect works correctly when mousing over edges")

Once you've updated the description with a properly filled out checklist, we can proceed with the review.

[qodo-code-review]

You are nearing your monthly Qodo Merge usage quota. For more information, please visit here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Usability With the button at opacity-0 when not hovered, it may be effectively invisible and harder to discover. Confirm this aligns with accessibility/UX guidelines and that there’s an alternate discoverability cue (e.g., edge hover also reveals the button or adds focus styles for keyboard users). className={cn( "absolute h-fit min-w-0 p-1 transition-opacity", isHovered ? "opacity-100" : "opacity-0", )} Accessibility The hover state is mouse-centric. Ensure keyboard and touch users can reveal and activate the delete button (e.g., focus-visible styles, tab focusability, aria-label). Consider using focus/aria states in addition to mouse enter/leave. onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

[AutoGPT-Agent]

Thanks for adding this UI improvement to the edge delete button! The hover state will definitely enhance the user experience.

I noticed you've included both your own custom checklist (which is properly filled out) and the PR template checklist (which is not checked off). For future PRs, please either complete the template checklist or remove it entirely when you're using a custom format.

The code changes look good and focused on the stated goal. Nice work with the transition effect implementation!

[0ubbe]

I would use hidden / block. With opacity, the button is still there. A quick misclick on that area will trigger the delete action, making the user think it is a bug 🐛