Update join beta dialog (#13847)

hassio/src/system/hassio-supervisor-info.ts

@@ -23,6 +23,7 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
+import { showJoinBetaDialog } from "../../../src/panels/config/core/updates/show-dialog-join-beta";
 import {
   UNHEALTHY_REASON_URL,
   UNSUPPORTED_REASON_URL,
@@ -230,36 +231,27 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     if (this.supervisor.supervisor.channel === "stable") {
-      const confirmed = await showConfirmationDialog(this, {
-        title: this.supervisor.localize("system.supervisor.warning"),
-        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
-          <br />
-          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
-          <br /><br />
-          ${this.supervisor.localize("system.supervisor.beta_release_items")}
-          <ul>
-            <li>Home Assistant Core</li>
-            <li>Home Assistant Supervisor</li>
-            <li>Home Assistant Operating System</li>
-          </ul>
-          <br />
-          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
-        confirmText: this.supervisor.localize(
-          "system.supervisor.join_beta_action"
-        ),
-        dismissText: this.supervisor.localize("common.cancel"),
+      showJoinBetaDialog(this, {
+        join: async () => {
+          await this._setChannel("beta");
+          button.progress = false;
+        },
+        cancel: () => {
+          button.progress = false;
+        },
       });
-
-      if (!confirmed) {
-        button.progress = false;
-        return;
-      }
+    } else {
+      await this._setChannel("stable");
+      button.progress = false;
     }
+  }
 
+  private async _setChannel(
+    channel: SupervisorOptions["channel"]
+  ): Promise<void> {
     try {
       const data: Partial<SupervisorOptions> = {
-        channel:
-          this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
+        channel,
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
@@ -270,8 +262,6 @@ class HassioSupervisorInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
-    } finally {
-      button.progress = false;
     }
   }
 

src/panels/config/core/ha-config-section-updates.ts

@@ -24,13 +24,11 @@ import {
   checkForEntityUpdates,
   filterUpdateEntitiesWithInstall,
 } from "../../../data/update";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
+import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -46,9 +44,7 @@ class HaConfigSectionUpdates extends LitElement {
     super.firstUpdated(changedProps);
 
     if (isComponentLoaded(this.hass, "hassio")) {
-      fetchHassioSupervisorInfo(this.hass).then((data) => {
-        this._supervisorInfo = data;
-      });
+      this._refreshSupervisorInfo();
     }
   }
 
@@ -126,6 +122,10 @@ class HaConfigSectionUpdates extends LitElement {
     `;
   }
 
+  private async _refreshSupervisorInfo() {
+    this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+  }
+
   private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
     if (ev.detail.source !== "property") {
       return;
@@ -142,35 +142,23 @@ class HaConfigSectionUpdates extends LitElement {
     }
 
     if (this._supervisorInfo!.channel === "stable") {
-      const confirmed = await showConfirmationDialog(this, {
-        title: this.hass.localize("ui.dialogs.join_beta_channel.title"),
-        text: html`${this.hass.localize("ui.dialogs.join_beta_channel.warning")}
-          <br />
-          <b> ${this.hass.localize("ui.dialogs.join_beta_channel.backup")} </b>
-          <br /><br />
-          ${this.hass.localize("ui.dialogs.join_beta_channel.release_items")}
-          <ul>
-            <li>Home Assistant Core</li>
-            <li>Home Assistant Supervisor</li>
-            <li>Home Assistant Operating System</li>
-          </ul>
-          <br />
-          ${this.hass.localize("ui.dialogs.join_beta_channel.confirm")}`,
-        confirmText: this.hass.localize("ui.panel.config.updates.join_beta"),
-        dismissText: this.hass.localize("ui.common.cancel"),
+      showJoinBetaDialog(this, {
+        join: async () => this._setChannel("beta"),
       });
-
-      if (!confirmed) {
-        return;
-      }
+    } else {
+      this._setChannel("stable");
     }
+  }
 
+  private async _setChannel(
+    channel: SupervisorOptions["channel"]
+  ): Promise<void> {
     try {
-      const data: Partial<SupervisorOptions> = {
-        channel: this._supervisorInfo!.channel === "stable" ? "beta" : "stable",
-      };
-      await setSupervisorOption(this.hass, data);
+      await setSupervisorOption(this.hass, {
+        channel,
+      });
       await reloadSupervisor(this.hass);
+      await this._refreshSupervisorInfo();
     } catch (err: any) {
       showAlertDialog(this, {
         text: extractApiErrorMessage(err),

src/panels/config/core/updates/dialog-join-beta.ts

@@ -0,0 +1,108 @@
+import "@material/mwc-button/mwc-button";
+import { mdiOpenInNew } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-header-bar";
+import { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import { documentationUrl } from "../../../../util/documentation-url";
+import { JoinBetaDialogParams } from "./show-dialog-join-beta";
+
+@customElement("dialog-join-beta")
+export class DialogJoinBeta
+  extends LitElement
+  implements HassDialog<JoinBetaDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: JoinBetaDialogParams;
+
+  public showDialog(dialogParams: JoinBetaDialogParams): void {
+    this._dialogParams = dialogParams;
+  }
+
+  public closeDialog(): void {
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.dialogs.join_beta_channel.title")
+        )}
+      >
+        <ha-alert alert-type="warning">
+          ${this.hass.localize("ui.dialogs.join_beta_channel.backup")}
+        </ha-alert>
+        <p>
+          ${this.hass.localize("ui.dialogs.join_beta_channel.warning")}
+          ${this.hass.localize("ui.dialogs.join_beta_channel.release_items")}
+        </p>
+        <ul>
+          <li>Home Assistant Core</li>
+          <li>Home Assistant Supervisor</li>
+          <li>Home Assistant Operating System</li>
+        </ul>
+        <a
+          href=${documentationUrl(this.hass!, "/faq/release/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          ${this.hass!.localize(
+            "ui.dialogs.join_beta_channel.view_documentation"
+          )}
+          <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+        </a>
+        <mwc-button slot="primaryAction" @click=${this._cancel}>
+          ${this.hass.localize("ui.common.cancel")}
+        </mwc-button>
+        <mwc-button slot="primaryAction" @click=${this._join}>
+          ${this.hass.localize("ui.dialogs.join_beta_channel.join")}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _cancel() {
+    this._dialogParams?.cancel?.();
+    this.closeDialog();
+  }
+
+  private _join() {
+    this._dialogParams?.join?.();
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        a {
+          text-decoration: none;
+        }
+        a ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-join-beta": DialogJoinBeta;
+  }
+}

src/panels/config/core/updates/show-dialog-join-beta.ts

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "./dialog-join-beta";
+
+export interface JoinBetaDialogParams {
+  join?: () => any;
+  cancel?: () => any;
+}
+
+export const showJoinBetaDialog = (
+  element: HTMLElement,
+  dialogParams: JoinBetaDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-join-beta",
+    dialogImport: () => import("./dialog-join-beta"),
+    dialogParams,
+  });
+};

src/translations/en.json

@@ -1090,10 +1090,11 @@
       },
       "join_beta_channel": {
         "title": "Join the beta channel",
-        "warning": "[%key:supervisor::system::supervisor::beta_warning%]",
-        "backup": "[%key:supervisor::system::supervisor::beta_backup%]",
-        "release_items": "[%key:supervisor::system::supervisor::beta_release_items%]",
-        "confirm": "[%key:supervisor::system::supervisor::beta_join_confirm%]"
+        "backup": "Make sure you have backups of your data before you activate this feature.",
+        "warning": "Beta releases are for testers and early adopters and can contain unstable code changes",
+        "release_items": "This includes beta releases for:",
+        "view_documentation": "View documentation",
+        "join": "Join"
       }
     },
     "duration": {
@@ -4999,10 +5000,6 @@
         "reload_supervisor": "Reload Supervisor",
         "warning": "WARNING",
         "search": "Search",
-        "beta_warning": "Beta releases are for testers and early adopters and can contain unstable code changes",
-        "beta_backup": "Make sure you have backups of your data before you activate this feature.",
-        "beta_release_items": "This includes beta releases for:",
-        "beta_join_confirm": "Do you want to join the beta channel?",
         "share_diagonstics_title": "Help Improve Home Assistant",
         "share_diagonstics_description": "Would you want to automatically share crash reports and diagnostic information when the Supervisor encounters unexpected errors? {line_break} This will allow us to fix the problems, the information is only accessible to the Home Assistant Core team and will not be shared with others.{line_break} The data does not include any private/sensitive information and you can disable this in settings at any time you want.",
         "unsupported_reason": {