Support cross-builder drag and drop

[duclm278]

Description of the feature

This feature allows users to drag and drop rules and rule groups across different query builders under one DnD provider. After the new position is highlighted, the DnD provider should move the existing element to this new position.

Use case

Anything that displays 2 or more builders on the same screen.
The use case driving this request was a nested query builder as the value of another query builder. Watch the screencast for this specific use case. Each Metric field has a query builder of a default group LABELS attached.

Related to: #515

DnD.webm

[jakeboone02]

I've done some work on this in #713, but I've only got drag-and-drop working across independent query builders, not nested. Can you share the relevant code you used for that screencast? A sandbox would be really nice but the render code alone would be helpful.

[duclm278]

Sure! Sorry for the rather heavy sandbox. It's faster for me to trim down the code than creating a new vanilla one: https://codesandbox.io/p/devbox/naughty-estrela-sqlncd. I hope it provides enough info and not too much irrelevant stuff.

[jakeboone02]

No worries about the size. That's very helpful! Thanks.

[jakeboone02]

Drag-and-drop across nested query builders is going to be tough, so I took a closer look at your sandbox and tried to reimplement the functionality without using nested query builders. I had to add a "replace" feature to the insert method. Here's what I came up with:

https://codesandbox.io/p/devbox/f23v58?file=%2Fsrc%2FApp.tsx

I think it works about the same, although the "Metric" value will be recorded on the group object itself and not as part of the value of the rule with a nested query builder. And drag-and-drop should work well of course, since it's all one query builder.

Let me know what you think!

[duclm278]

Can you check the sandbox? It doesn't seem to be running on my side.

I like the idea of representing a rule with a group attached as a special group with top-level values. On reflection, the nested query builder itself is just another group.

That was also my initial take on the problem, though at that time I wasn't sure how to still represent it as a field because I still needed some input for the group itself. Something like field, operator, and value but for the group. That's why I went for a nested query builder instead.

With your suggestion, it might require a little more work to enforce the Metric field to be pinned at the top of the group and not be draggable inside the group without affecting other draggable elements. But yep I think it's easier to implement something like this than DnD across nested query builders.

Updated: Just saw your answer to solving the input on the group part: #710. I can see the same technique is also being used here.

[jakeboone02]

Can you check the sandbox? It doesn't seem to be running on my side.

The sandbox should be working now. Sorry about that!

[duclm278]

With your suggestion, it might require a little more work to enforce the Metric field to be pinned at the top of the group and not be draggable inside the group without affecting other draggable elements.

Your sandbox has already done this! Great work! I can already see myself refactoring a lot of my code with the dispatchQuery and the new insert utility.

[jakeboone02]

That's great to hear! I think I'll go ahead and merge that PR. I may take another look at nested query builders again in the future but I think #713 is probably good for now.