Drag & drop for groups

[TheBestPartOfMe]

❗ Important Announcements

Click here for more details:

⚠️ Please Note: We do not accept all types of pull requests, and we want to ensure we don’t waste your time. Before submitting, make sure you have read our pull request guidelines: Pull Request Rules

🚫 Please Avoid Unnecessary Pinging of Maintainers

We kindly ask you to refrain from pinging maintainers unless absolutely necessary. Pings are for critical/urgent pull requests that require immediate attention.

📋 Overview

• What problem does this pull request address?
  • Existing monitoring entities cannot be sorted into groups using drag and drop.
• What features or functionality does this pull request introduce or enhance?
  • Elements should be able to be dragged and dropped into and out of groups to enable intuitive sorting and restructuring.

• Resolves Drag & drop feature for groups #6196

🛠️ Type of change

• 🐛 Bugfix (a non-breaking change that resolves an issue)
• ✨ New feature (a non-breaking change that adds new functionality)
• ⚠️ Breaking change (a fix or feature that alters existing functionality in a way that could cause issues)
• 🎨 User Interface (UI) updates
• 📄 New Documentation (addition of new documentation)
• 📄 Documentation Update (modification of existing documentation)
• 📄 Documentation Update Required (the change requires updates to related documentation)
• 🔧 Other (please specify):
  • Provide additional details here.

📄 Checklist

• 🔍 My code adheres to the style guidelines of this project.
• 🦿 I have indicated where (if any) I used an LLM for the contributions
• ✅ I ran ESLint and other code linters for modified files.
• 🛠️ I have reviewed and tested my code.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• ⚠️ My changes generate no new warnings.
• 🤖 My code needed automated testing. I have added them (this is an optional task).
• 📄 Documentation updates are included (if applicable).
• 🔒 I have considered potential security impacts and mitigated risks.
• 🧰 Dependency updates are listed and explained.
• 📚 I have read and understood the Pull Request guidelines.

📷 Screenshots or Visual Changes

[TheBestPartOfMe]

I hope it's okay if I add the screenshots once I've implemented the issue.

I'm also unsure whether I should have marked the request as a draft and whether the correct branch has been selected as the target, but according to the contributing guidelines, I understand that I should have done so.

Issue #6196 describes the whole thing very clearly in my opinion, but I am open to further comments.

[TheBestPartOfMe]

I used GitHub Copilot to assist with parts of the code implementation, and ChatGPT for refining comments.
Where should I indicate that? Directly as comments in code or should I list the comments in the pull request? I'm sorry, this is my first time and I don't want to post this unmarked here.

[CommanderStorm]

The empty draft pr is only necessary for larger scale changes (where a short discussion saves lots of Dev time on both sides).
This PR does not require it.

The "have you used AI" is to give a reviewer a heads up what to look out for.
Humans make much different messes than LLMs.
It was primarily designed to cut down on slop, but I don't think it is as effective as we hoped.

Both parts could be worded clearer, I do not have the best technical writing skills yet

[cyril59310]

I tested the PR and didn’t encounter any particular issues with its functionality.
However, I’d like to suggest an improvement to the visual effect, because in its current state, it’s not very intuitive. If you don’t already know that this feature exists, it’s not obvious that you can drag and drop into another group

[TheBestPartOfMe]

I tested the PR and didn’t encounter any particular issues with its functionality. However, I’d like to suggest an improvement to the visual effect, because in its current state, it’s not very intuitive. If you don’t already know that this feature exists, it’s not obvious that you can drag and drop into another group

Thank you for the feedback!
I agree that the current visual effect may not be intuitive enough for users who are unfamiliar with the drag-and-drop grouping feature.
A helpful next step might be to add a tooltip or subtle help text visible to the user during the drag operation.
This would likely also require i18n support.
Would this be worth a new issue in terms of scope, or should I implement it here?

[cyril59310]

I agree that the current visual effect may not be intuitive enough for users who are unfamiliar with the drag-and-drop grouping feature.
A helpful next step might be to add a tooltip or subtle help text visible to the user during the drag operation.
This would likely also require i18n support.
Would this be worth a new issue in terms of scope, or should I implement it here?

Here’s an example of something that could make the visuals nicer:

When you pick up a monitor, the groups could be slightly highlighted.

And when hovering over a group with the monitor, that group could be emphasized with a small tooltip saying 'Drop here' to indicate to the user that it can be dropped into that group

[TheBestPartOfMe]

All right, I'll try to implement it something like that. Should I just ping you when I've made the commit? It'll probably be tonight :D

[cyril59310]

All right, I'll try to implement it something like that. Should I just ping you when I've made the commit? It'll probably be tonight :D

You can just make the commit, I’ll be notified 😉

[CommanderStorm]

Nice work!

lets add the correct pointer.
Otherwise people won't know this is draggable and this fixes 95% of the "knowing the feature exists" issue 😉

I would merge with the pointers fixed.
The dropzone being highlighted like @cyril59310 noted would be going above and beyond and improve the UX a ton.
(no need to spend tons of time on the tooltip if this turns out being difficult, the highlighting should not be so difficult likely)

[CommanderStorm]

I think something broke here in the previous commits.

I don't think this part of the styling currently works, or?
If it does not, lets rather remove this as it is seems a bit buggy.

At least, I can't make out any change in color except a bit of flickering when I start hovering over a group, which is kind of weird..

This does also mean removing the accounting regarding dragOver and dragging.

Obviously, fixing this to work as expected (with the dash-lined border) would be the preferred approach 😉

Suggested change

	.drag-over {
	background-color: rgba($primary, 0.05);
	}