Adding UX Feedback For Failed Device Connections Over HTTP/s

[James9074]

Description

The UI doesn't gracefully handle failed connections via HTTP/s, either due to a bad URL/IP, or TLS issues (the device's self-cert hasn't been accepted). The UI doesn't give you much, in fact it will simply hang forever on connecting if a connection fails for any reason:

This PR adds in visual feedback letting the user know the connection wasn't possible, gives them a common troubleshooting step to try, and points them to the official documentation:

Related Issues

Relates to #316

Changes Made

• Added a simple warning message upon connection failure when adding a device via HTTP
• Moved const device = addDevice(id); under the initial device fetch, preventing the UNK device from being added until contact with the device can be successfully made. Without this, a user can (And will) close the popup window and be confused that the device was "added", yet has no information.

Testing Done

• Ensured that this only affects HTTP, not Bluetooth or Serial.
• Ensured this does not block valid device additions
• Attempted to close this popup on failure, ensured the device was not incorrectly added despite not being reachable
• Turned local dev tools speed to dial up speeds, ensured that a long-running fetch to a device would not incorrectly trigger this due to a local timeout
• Ensured valid devices that can be contacted load as expected
• Ensured HTTP (non TLS) connections load as expected
• Ensured (both with HTTP and HTTPS) that invalid URLs and IPs show this error

Screenshots (if applicable)

Dark Mode:

Light Mode:

Checklist

• Code follows project style guidelines
• Documentation has been updated or added
• Tests have been added or updated
• All CI checks pass
• Dependent changes have been merged

Additional Notes

[danditomaso]

This is a great change! Love it and I need to learn your trick to making animated gif's. I like the yellow you are using on the light theme screenshot, I'd prefer we used that for the dark theme due to its higher contrast ratio.

[danditomaso]

Looks good, just a couple of changes needed.

[James9074]

https://gifox.app :) Worth the 15 bucks, I've used it for years without problem.

Good call on the colors, it didn't even cross my mind that the popup BG is white in both modes. They are both yellow now, and I've swapped out <a> for the existing <Link>

[danditomaso]

Can you update this branch from master it should the resolve the failing tests

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web-test	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 2, 2025 0:32am