Refactor device editor endpoints and move under ee code tree

[knolleary]

Description

This is the result of my code review of #2042

It makes a number of changes around the underlying API endpoints and some UI tweaks.

API Changes

This summaries the admin api changes that #2042 and this PR combined apply. I have highlighted how this PR changes what is in #2042:

• GET /api/v1/devices/:id - adds tunnel info if enabled. Changed structure of tunnel info
• GET /api/v1/projects/:projectId/devices - add tunnel info if enabled Removed
• GET /api/v1/team/:teamId/devices - add tunnel info if enabled Removed
• GET /api/v1/devices/:deviceId/editor - get editor state. Moved under ee code tree
• PUT /api/v1/devices/:deviceId/editor - enable/disable the editor. Moved under ee code tree
• POST /api/v1/devices/:deviceId/snapshot - create a snapshot for the device
• PUT /api/v1/devices/:deviceId/mode - Modify device mode. I want to roll this under the existing 'update device' endpoint, rather than introduce a new one. But time is running out.

The following endpoints have been moved (both in code tree, but also the url). The corresponding changes to the Device Agent have already been made via FlowFuse/device-agent#81

• Inbound websocket endpoint
  was GET /api/v1/remote/editor/inboundWS/:deviceId/:access_token
  now GET /api/v1/devices/:deviceId/editor/comms/:access_token
•  Verify adminAuth token
  was GET /api/v1/remote/editor/
  now GET /api/v1/devices/:deviceId/editor/token
•  Handle editor requests
  was * /api/v1/remote/editor/:deviceId/*
  now * /api/v1/devices/:deviceId/editor/proxy/*

This puts all of the editor access routes under /api/v1/devices/:deviceId/editor/**. These routes are only added if running with an EE license.

Tunnel status response

The GET /api/v1/devices/:deviceId endpoint includes a mode property to indicate if the device is in autonomous (default) or developer mode.

If in developer mode, the response include an editor property with meta data about the current editor state:

"editor": {
    "url": "http://localhost:3000/api/v1/devices/O65j9Yj8e2/editor/proxy/?access_token=XYZ",
    "enabled": true,
    "connected": true
}

This replaces the multiple tunnelUrl tunnelUrlWithToken tunnelExists etc top-level properties. I've reduced them to the minimum required. I could see no reason for having both url and urlwithtoken - in fact, tunnelUrl was unused in the frontend code. Now we just have a url property that can be used to access the editor.

UI Changes

Having played with the UI, I've made some tweaks.

1. The 'mode' button in the top right corner has been relabelled 'Developer Mode' and reuses the Beaker icon. The button uses secondary state when not in developer mode, primary state when in developer mode. This acts as a visual cue to the state.
   
   

2. The Mode dialog has now an enable/disable dialog. When we had multiple possible modes a list of options made sense. Having a single option makes less sense. So now it presents as either an 'enable dev mode' or 'disable dev mode' - allowing for more explanation as to what each means:
   
   

3. When in developer mode, I've relabelled the 'Device Options' to be 'Developer Mode Options' and changes the icon to a Beaker - reinforcing these are dev mode options only. I've also shrunk the buttons; the 'create snapshot' button was wrapping across multiple lines and looking distractingly huge. I've lower-cased the enabled/disabled status badge to be consistent with how we present text in these status pills throughout.

Related Issue(s)

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on flowforge/helm to update ConfigMap Template
  • Issue/PR raised on flowforge/CloudProject to update values for Staging/Production

Labels

• Backport needed? -> add the backport label
• Includes a DB migration? -> add the area:migration label