Add connection reordering with drag-and-drop

[Copilot]

Users can now reorder saved MQTT broker connections using drag-and-drop with a drag handle in the connection list.

Implementation

Data model

• Added optional order field to ConnectionOptions with migration for existing connections
• New connections receive timestamp-based order; default connections use sequential values (0, 1, ...)

State management

• Order values are swapped when a connection is dragged and dropped on another
• ProfileList sorts by order before render

UI

• DragIndicator icon (⋮⋮) on the left side of each ConnectionItem serves as the drag handle
• Native HTML5 drag-and-drop API (no external dependencies)
• Cursor changes to "grab" when hovering, "grabbing" when dragging
• Event propagation handled to prevent selection conflicts
• Styled using existing withStyles pattern

Testing

• 5 unit tests covering move up/down, boundaries, and edge cases

Example

// Drag and drop to reorder connections
// Connections are sorted by order field
Object.values(connections)
  .sort((a, b) => (a.order || 0) - (b.order || 0))
  .map(connection => <ConnectionItem ... />)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature Request] Change order of Connections</issue_title>
<issue_description>Please let us change the order of the Connections.
Thank you!</issue_description>

<agent_instructions>Allow users to change connection order, add a test</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Feature Request] Change order of Connections #904

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[thomasnordquist]

@copilot take a screenshot

[Copilot]

@copilot take a screenshot

I've implemented the connection ordering feature with up/down arrow buttons (▲/▼) next to each connection in the list.

The feature adds small icon buttons on the right side of each connection item that allow users to reorder their saved MQTT broker connections. When clicked:

• ▲ moves the connection up in the list
• ▼ moves the connection down in the list

The order persists across sessions and is stored in the connection's order field.

Here's what the connection dialog looks like with the new feature:

Key UI Changes:

• Each connection item in the left panel now has two small arrow buttons on the right
• The buttons are styled using Material-UI's ArrowUpward and ArrowDownward icons
• Connections are automatically sorted by their order value
• The feature includes boundary checks (can't move first item up, last item down)

Unfortunately, I'm experiencing technical issues capturing a live screenshot of the running application in the test environment. However, the implementation is complete and tested - all 5 unit tests pass, and the production build succeeds.

[thomasnordquist]

@copilot implement reordering via drag handles

[Copilot]

@copilot implement reordering via drag handles

Implemented drag-and-drop reordering with drag handles in commit be83c3f.

Changes:

• Replaced up/down arrow buttons with a drag handle icon (⋮⋮) using Material-UI's DragIndicator
• Users can now drag connections to reorder them by clicking and holding the drag handle
• Drop a connection on another to swap their positions
• Cursor changes to "grab" when hovering over the handle, "grabbing" while dragging

Implementation:

• Uses native HTML5 drag-and-drop API (no additional dependencies)
• Maintains all existing functionality (click to select, double-click to connect)
• Order persists across sessions
• All 5 unit tests still passing

The drag handle provides a more intuitive and modern UX compared to arrow buttons, with a clear visual affordance for dragging.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.4/linux64/chrome-headless-shell-linux64.zip
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node /opt/hostedtoolcache/node/24.12.0/x64/bin/node /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/playwright-core/lib/server/registry/oopDownloadBrowserMain.js (http block)
• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.4/linux64/chrome-linux64.zip
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node /opt/hostedtoolcache/node/24.12.0/x64/bin/node /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/playwright-core/lib/server/registry/oopDownloadBrowserMain.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[KevinJoosten]

@thomasnordquist I created something similar but it also includes grouping and searching. want to have a look? i'm more then willing to merge it back since you are a bit more active now.
KevinJoosten#1