Improve merging of tags by simple drag and drop

[kamtschatka]

Currently merging of tags requires a lot of clicking, which can get tiresome, when you have to merge a lot (i guess the most common reason is, because inference creates a lot of tags)

I think a good way to allow merging in a fast way, would be drag and drop on the "Tags" page.
You see a list of all the tags and if you want to merge one with the other, you simple drag the one you want to get rid of onto the one that should stay and it gets merged right away.

[MohamedBassem]

I like the idea :) I'll guess it's time for me to learn how make things draggable :D

[kamtschatka]

I have spent quite some time looking at react-beautiful-dnd and hello-pangea, but seems like they only allows dragging in horizontal or vertical lists, so that does not work for the tags as they are in both directions (gave me some weird hover effects)
I also had a look at dndkit, but that seems to not support combining. I am checking out react-draggable soon, unless someone else knows a library that can be used for dragging/dropping tags onto each other to combine them.

[kamtschatka]

OK, i got it to work with react-draggable (merged a tag just before taking the screenshot, that is why the toast is open):

Basically I added the "Allow Dragging" checkbox to enable dragging. The reason is that having a link in the TagPill does not really work with the drag and drop and additionally I want to prevent people from merging tags accidentally, so I added the checkbox.

So a few questions:

• Is the use of react-draggable OK?
• Any suggestions for the feature/how the UI should look like?

Currently the code is quite messy, since it involved a lot of trial and error, so I have to first clean it up, but if you give some feedback, I'd clean it up and create a PR.

Disclaimer: I'm not a UI developer, I work on real user monitoring during the day, so I hope it won't shock you too much^^

[MohamedBassem]

@kamtschatka implemented it in #154!