Hacktoberfest Week 4 – Improving DataMapper Logic in Kaoto

As Hacktoberfest comes to an end, I decided to take on one more interesting challenge, this time in the Kaoto project. Kaoto is an open-source low-code integration platform that allows users to visually design and configure integrations. It’s built on top of Apache Camel, which makes it powerful but also quite complex.

After spending my previous week working on a core backend issue in Kestra, I wanted to dive deeper into something that touched core logic and UI behavior at the same time. I chose to work on a drag-and-drop (DnD) bug in Kaoto’s DataMapper UI, a component that lets users visually map data sources to targets.

The Issue

The problem Issue #2637 was that users could drag and drop a primitive source Body (without a schema) and create a mapping. This looked fine in the UI, but it actually caused runtime failures because the backend engine (camel-xslt-saxon) expected the body to be an XML Document, not a primitive type.

So in short, users could make an invalid mapping that would always fail later. My goal was to prevent this from happening at the UI level.

My Approach

At first, I tried to fix the issue by checking for primitive types and blocking the mapping when users tried to drop it. However, the project maintainer suggested a cleaner and more reliable approach — disable the drag-and-drop action altogether for primitive source bodies.

This was a great learning moment. Instead of fixing the problem after it happens, it’s better to prevent it from happening in the first place, a core principle of good UX and system design.

So, I updated the NodeContainer.tsx component to skip attaching the DnDContainer for primitive source body nodes. This ensured that users simply could not drag them at all, while still allowing parameters (even primitive ones) to be draggable and valid.

The Fix

The final fix included PR:

• Disabling drag-and-drop for primitive source Body nodes.
• Keeping Parameters draggable even if they’re primitive.
• Refactoring the code to use a more readable flag (hasDnD instead of noDnD) for clarity.
• Testing all drag-and-drop actions to ensure no regressions or console errors.

Once I submitted the PR, the maintainers reviewed it quickly. After a few small suggestions (like simplifying logic and improving flag naming), the changes were approved and merged.

Challenges & Learnings

This contribution felt different from my earlier ones. It wasn’t just about fixing a bug, it was about understanding core UI logic and improving how users interact with the system.

Here’s what I learned:

• How drag-and-drop logic is implemented in React-based UIs.
• Why preventing invalid user actions early leads to better software design.
• How to interpret and implement maintainer feedback effectively.

Reflection

This last week of Hacktoberfest has been a great wrap-up. I started the month working on documentation in HUD, then explored backend issues in large systems like Kestra, and finally ended it by improving UI logic in Kaoto — connecting both worlds.

Every PR taught me something new. The whole experience reminded me that open-source is not just about writing code, it’s about learning, collaborating, and growing as a developer.

Hacktoberfest 2025 has definitely been a crazy but rewarding experience. I’m excited to continue contributing to open source beyond October and keep pushing myself toward more challenging issues in the future.