Fix ingress add-on not started dialog showing twice

hassio/src/hassio-main.ts

@@ -30,6 +30,10 @@ import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-pages-with-tabs";
 import { navigate } from "../../src/common/navigate";
+import {
+  showAlertDialog,
+  AlertDialogParams,
+} from "../../src/dialogs/generic/show-dialog-box";
 
 // The register callback of the IronA11yKeysBehavior inside paper-icon-button
 // is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
@@ -158,31 +162,81 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
   }
 
   private async _redirectIngress(addonSlug: string) {
+    // When we trigger a navigation, we sleep to make sure we don't
+    // show the hassio dashboard before navigating away.
+    const awaitAlert = async (
+      alertParams: AlertDialogParams,
+      action: () => void
+    ) => {
+      await new Promise((resolve) => {
+        alertParams.confirm = resolve;
+        showAlertDialog(this, alertParams);
+      });
+      action();
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    };
+
+    const createSessionPromise = createHassioSession(this.hass).then(
+      () => true,
+      () => false
+    );
+
+    let addon;
+
     try {
-      const [addon] = await Promise.all([
-        fetchHassioAddonInfo(this.hass, addonSlug).catch(() => {
-          throw new Error("Failed to fetch add-on info");
-        }),
-        createHassioSession(this.hass).catch(() => {
-          throw new Error("Failed to create an ingress session");
-        }),
-      ]);
-      if (!addon.ingress_url) {
-        alert("Add-on does not support Ingress");
-        return;
-      }
-      if (addon.state !== "started") {
-        alert("Add-on is not running. Please start it first");
-        navigate(this, `/hassio/addon/${addon.slug}`, true);
-        return;
-      }
-      location.assign(addon.ingress_url);
-      // await a promise that doesn't resolve, so we show the loading screen
-      // while we load the next page.
-      await new Promise(() => undefined);
+      addon = await fetchHassioAddonInfo(this.hass, addonSlug);
     } catch (err) {
-      alert("Unable to open ingress connection");
+      await awaitAlert(
+        {
+          text: "Unable to fetch add-on info to start Ingress",
+          title: "Hass.io",
+        },
+        () => history.back()
+      );
+
+      return;
+    }
+
+    if (!addon.ingress_url) {
+      await awaitAlert(
+        {
+          text: "Add-on does not support Ingress",
+          title: addon.name,
+        },
+        () => history.back()
+      );
+
+      return;
+    }
+
+    if (addon.state !== "started") {
+      await awaitAlert(
+        {
+          text: "Add-on is not running. Please start it first",
+          title: addon.name,
+        },
+        () => navigate(this, `/hassio/addon/${addon.slug}`, true)
+      );
+
+      return;
     }
+
+    if (!(await createSessionPromise)) {
+      await awaitAlert(
+        {
+          text: "Unable to create an Ingress session",
+          title: addon.name,
+        },
+        () => history.back()
+      );
+
+      return;
+    }
+
+    location.assign(addon.ingress_url);
+    // await a promise that doesn't resolve, so we show the loading screen
+    // while we load the next page.
+    await new Promise(() => undefined);
   }
 
   private _apiCalled(ev) {

src/dialogs/generic/show-dialog-box.ts

@@ -1,6 +1,6 @@
 import { fireEvent } from "../../common/dom/fire_event";
 
-interface AlertDialogParams {
+export interface AlertDialogParams {
   confirmText?: string;
   text?: string;
   title?: string;