API connection status notifications

[alexcjohnson]

Closes #920 - turn _reload-hash fetch failures into a status indicator rather than recurring errors.

When the back end is connected and the debug menu is closed there are no extra indicators, but an indicator appears where the error count would be if disconnected:

And next to the error count if there are errors too:

With the debug menu open, we show both connected and disconnected states:

Styling could use some work - I feel like the small 🚫 icon is pretty good, but the large 🚫 and ✅ are a bit ugly and out of place with the rest of the debug menu, probably we want dedicated svg icons for this purpose?

I also put the connection status in the heading of the error display:

Note that callbacks that fail to fetch still show up in the error log, because these go through their own fetch call.

I think this makes sense, but it raise the question whether we should do something different if hot reloading is disabled but the error UI is enabled. Callback fetch failures don't currently show as backEndConnected: false, but without hot reloading to provide a heartbeat any "connected" status would be out of date most of the time. Maybe without hot reloading we just shouldn't show connection status at all?

Contributor Checklist

• I have broken down my PR scope into the following TODO tasks
  • Decide on styling
• I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
• I have added entry in the CHANGELOG.md

[rpkyle]

@alexcjohnson I love the idea of capturing the state of the backend connection in an unobtrusive way, rather than silencing the notifications altogether.

I think this makes sense, but it raise the question whether we should do something different if hot reloading is disabled but the error UI is enabled. Callback fetch failures don't currently show as backEndConnected: false, but without hot reloading to provide a heartbeat any "connected" status would be out of date most of the time. Maybe without hot reloading we just shouldn't show connection status at all?

I'd be inclined to either silence it when hot reloading is disabled, or consider adding a parameter to the the dev tools UI set of options which disables the "heartbeat" upon request (keeping it active if debug mode is on).

[nicolaskruchten]

Do we want to use “connected” or “reachable” or “available” or something like that instead? I want to avoid confusing people into thinking there is a live “connection” like a web socket or whatever.

Also re “backend” should we talk about “hot reload” instead?

[alexcjohnson]

Good point @nicolaskruchten - also as we've discussed "back end" doesn't mean the same thing to everyone. But I don't think we want to just describe it as about "hot reload" as then people may not connect it to "the server has crashed and needs to be restarted"

How about "server available / unavailable"?

[alexcjohnson]

Updated styling - with help from @angeladaodao 🎉
All happy:

With tooltip on hover:

Failure (while hovering):

Hot reload disabled:

Error box, showing status in the header (ONLY when unavailable), an updated error message when a callback tries to reach a dead server, and a regular error:

[nicolaskruchten]

Feedback on the new images: the check and cross look too similar in my view... They do or indicate very different things so they should look different. We have 4 things there now, two of which pop things up (callback graph, error list), two of which indicate something (error list, backend-status) and one of which closes the panel. The close button should probably look quite different from the other three, and maybe the backend-status can be the same size as the other two?

[alexcjohnson]

The new one is just an indicator, not a toggle button like the callback graph and errors. And the close button for that matter, which toggles the menu itself, so if anything it seems like the new status indicator is the one odd one out. Now I'm thinking of maybe having the blue <> stick around when the debug menu appears, and just have the debug menu grow out of it with the three pieces (callback graph, errors, and status indicator) appearing. Then the blue <> can be both the open and the close button. Maybe it rotates when the menu appears? I'll fiddle...

[alexcjohnson]

A little more compact perhaps?

[nicolaskruchten]

Now it looks odd to have a small one... I say make it the same size and maybe pop up a little explanation on click instead of just on hover?

[alexcjohnson]

latest variant - all icons the same size, turned the deselected icons grey and removed the border, some light open/close animation

[nicolaskruchten]

I like it a lot! Maybe some text on the new icon like “Server” to match the others?

[alexcjohnson]

Yeah that's better - also switched back to X for server unavailable, since we don't have another x now and the circle can't be centered with the label. Anything else? Any code comments??

[chriddyp]

💃 beautiful!