Guard against the 'connection issue' flash not closing upon reconnection (#2383)

This approach is heavily inspired by Live Beats.

I've removed the `#server-error` flash as it was sometimes caught in a
race condition with the `#client-error` flash, which already covers the
cases we care about.

Author: joshk

assets/ui-rework/app.js

@@ -27,6 +27,12 @@ import dates from "../js/dates"
 
 TimeAgo.addDefaultLocale(en)
 
+let execJS = (selector, attr) => {
+  document
+    .querySelectorAll(selector)
+    .forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
+}
+
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content")
@@ -81,6 +87,11 @@ window.addEventListener("phx:page-loading-stop", () => {
   topbar.hide()
 })
 
+// borrowed from https://github.com/fly-apps/live_beats/blob/master/assets/js/app.js#L330
+// this guards against the flash not hiding after reconnection, possibly due to the browser
+// not passing along js events.
+liveSocket.getSocket().onOpen(() => execJS("#connection-status", "js-hide"))
+liveSocket.getSocket().onError(() => execJS("#connection-status", "js-show"))
 liveSocket.connect()
 
 // expose liveSocket on window for web console debug logs and latency simulation:

lib/nerves_hub_web/components/core_components.ex

@@ -14,7 +14,7 @@ defmodule NervesHubWeb.CoreComponents do
 
   Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
   """
-  use Phoenix.Component
+  use Phoenix.Component, global_prefixes: ~w(js-)
 
   import NervesHubWeb.Components.Icons
 
@@ -139,12 +139,17 @@ defmodule NervesHubWeb.CoreComponents do
     <div id={@id}>
       <.flash kind={:info} title={gettext("Success")} flash={@flash} phx-mounted={show("#flash-info")} phx-hook="Flash" hidden />
       <.flash kind={:error} title={gettext("Error")} flash={@flash} phx-mounted={show("#flash-error")} hidden />
-      <.flash id="client-error" kind={:error} title={gettext("We can't find the internet")} phx-disconnected={show(".phx-client-error #client-error")} phx-connected={hide("#client-error")} hidden>
-        {gettext("Attempting to reconnect")}
-      </.flash>
 
-      <.flash id="server-error" kind={:error} title={gettext("Something went wrong!")} phx-disconnected={show(".phx-server-error #server-error")} phx-connected={hide("#server-error")} hidden>
-        {gettext("Hang in there while we get back on track")}
+      <.flash
+        id="connection-status"
+        kind={:error}
+        title={gettext("Internet connection lost")}
+        phx-disconnected={show("#connection-status")}
+        js-hide={hide("#connection-status")}
+        js-show={show("#connection-status")}
+        hidden
+      >
+        {gettext("Attempting to reconnect...")}
       </.flash>
     </div>
     """