Add ToggleableDeviceList Component to TopNav & Live Device Status

Merge Request Template

What

This MR implements and adds the ToggleableDeviceList component to the TopNav component. For now, toggling the component would hit connect and disconnect endpoints for devices. Post POC, this will be improved upon to enable or disable devices during flight without disconnecting the wifi connection. Additionally, live status will be updated as part of #321 (closed).

Additionally, integrates live device status.

Why

#292 (closed) & #321 (closed)

Related MRs

• whitebox-plugin-device-manager!15 (merged)
• whitebox-plugin-icons!7 (merged)

How

• A new component was implemented and exposed via whitebox-plugin-device-manager.
• A new slot was added to TopNav to render this new component.

Testing

Sandbox Hosting [auto-managed section, do not edit manually]

• Frontend: http://95.216.218.214:41513
• Backend: http://95.216.218.214:41363

Sandbox Testing Instructions (if applicable)

• Testing Steps:
  • Common Testing Instructions ->

Developer Testing Instructions

• Setup Instructions:

  # Build dev containers with required args & temporary-dependencies
  CONTINENT='asia' COUNTRY='india' TEMPORARY_DEPENDENCIES=1 docker compose -f compose.dev.yml up -d --build
  
  # Run backend-dev
  docker exec -it backend-dev make run
  
  # Run frontend-dev
  docker exec -it frontend-dev make run
  
  # Run workers
  docker exec -it backend-dev make run-worker

• Testing Steps:

  • Common Testing Instructions ->

Common Testing Instructions

• Add a new device through Device Wizard
• Clicking the settings icon should open a small pop-up that will have the added devices listed
• Open network tab and enable disable these devices, it should call the appropriate endpoint and the new state should reflect on the UI
• When everything is connected, turn Insta360 off and see if the status automatically reflects on the device wizard and the pop-up
• Turn the device back on again to see if the status automatically reflects

Screenshots (if applicable)

[1] Disabled

[2] Enabled

Before Merge Checklist

• Test all new code (unit & integration)
• Update the documentation (if applicable).
• Pass 2 code reviews (get two 👍 and no outstanding comment)
• Pass 1 product review (if the code change affects users)
• Bump versions of internal dependencies from related MRs that were merged (if applicable)