feat(Canvas): Drag and drop support on Edges

[shivamG640]

Fixes: #2770

Changes introduced:

1. Added drop support on edges by making edges static while dragging associated nodes.
2. Restricted drop support on step nodes (collapsed When containers can still be dragged and dropped onto other When containers).
3. Introduced a static ghost node in place of the dragged node to fill the gap between edges during drag operations.
4. Added placeholders as the last node in every step, removing the floating quick append-step icon from the final node.
5. Reintroduced Move Before/After buttons in step toolbar.
6. Made drop targets coloring consistent for edge and placeholder nodes.

Above changes can be tested here: https://shivamg640.github.io/kaoto/

[codecov]

Codecov Report

❌ Patch coverage is 86.27451% with 14 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.08%. Comparing base (c53f02c) to head (a976a74).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...omponents/Visualization/Custom/Node/CustomNode.tsx	63.63%	8 Missing ⚠️
...ents/Visualization/Custom/Node/PlaceholderNode.tsx	16.66%	5 Missing ⚠️
...omponents/Visualization/Custom/Edge/CustomEdge.tsx	96.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2808      +/-   ##
==========================================
+ Coverage   86.80%   87.08%   +0.28%     
==========================================
  Files         523      524       +1     
  Lines       17941    17984      +43     
  Branches     4037     4045       +8     
==========================================
+ Hits        15573    15662      +89     
+ Misses       2364     2319      -45     
+ Partials        4        3       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[lordrip]

Code-wise looks good, just pending fixing a situation where 2 edges are highlighted when dragging over a node.

[lordrip]

Good catch 🙆‍♂️

[lordrip]

Food for thought:

There was a recent PR to use an additional visualization controller to render the graph before exporting. Considering we are gonna show placeholders always, seems necessary to implement a way to conditionally enable this placeholder rendering, this way, we can skip rendering them when exporting the image.

[lordrip]

I think we're almost done, just a matter of covering the missing component and to think about what to do about showing the placeholder after a kamelet:sink and stop nodes.

[lordrip]

@shivamG640 I think this is a great feature, I tested it myself and it feel way more intuitive to drop over the edges, and in combination with the placeholders, make the whole experience simpler, good job 💪 (Definitively worth a blog post 😄)

Afterthoughts: I notice that for the most part, codecov complains about we lacking coverage for the drag and drop related functions.

The problem is that we can't extract those functions right away because they need elements from the context, so I think we could use the "currying" technique here.

Here's what I'm thinking, one of the functions use element from the React component context, so we could extract the DnD function into a separate file (perhaps even reuse it in the containers?) and wrap it with the currying function like this:

export const curriedDnDFn = (element: ElementTypeHere) => EXISTING_DND_FUNCTION_GOES_HERE

This way, we can pass a mock element and carry it inside of the function to test it.

[lordrip]

I don't see a reasonable way to increase the coverage through unit tests for the CustomNode component, we can move this coverage to e2e instead.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud