Migrate onboarding dialogs to wa (#29601)

* Migrate onboarding dialog(s) to wa

* Remove hass

* Allow hass to be uninitialised in wa dialog

* Use standard width for overflowing text

src/components/ha-wa-dialog.ts

@@ -75,7 +75,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  */
 @customElement("ha-wa-dialog")
 export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: "aria-labelledby" })
   public ariaLabelledBy?: string;
@@ -198,13 +198,13 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (isIosApp(this.hass)) {
+      if (this.hass && isIosApp(this.hass)) {
         const element = this.querySelector("[autofocus]");
         if (element !== null) {
           if (!element.id) {
             element.id = "ha-wa-dialog-autofocus";
           }
-          this.hass.auth.external!.fireMessage({
+          this.hass?.auth.external?.fireMessage({
             type: "focus_element",
             payload: {
               element_id: element.id,

src/onboarding/dialogs/app-dialog.ts

@@ -1,18 +1,25 @@
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../../common/translations/localize";
 import { fireEvent } from "../../common/dom/fire_event";
-import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-wa-dialog";
 
 @customElement("app-dialog")
 class DialogApp extends LitElement {
   @property({ attribute: false }) public localize?: LocalizeFunc;
 
-  public async showDialog(params): Promise<void> {
+  @state() private _open = false;
+
+  public async showDialog(params: { localize: LocalizeFunc }): Promise<void> {
     this.localize = params.localize;
+    this._open = true;
   }
 
-  public async closeDialog(): Promise<void> {
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.localize = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -21,15 +28,12 @@ class DialogApp extends LitElement {
     if (!this.localize) {
       return nothing;
     }
-    return html`<ha-dialog
+    return html`<ha-wa-dialog
-      open
+      .open=${this._open}
-      hideActions
+      header-title=${this.localize(
-      @closed=${this.closeDialog}
+        "ui.panel.page-onboarding.welcome.download_app"
-      .heading=${createCloseHeading(
+      ) || "Click here to download the app"}
-        undefined,
+      @closed=${this._dialogClosed}
-        this.localize("ui.panel.page-onboarding.welcome.download_app") ||
-          "Click here to download the app"
-      )}
     >
       <div>
         <div class="app-qr">
@@ -69,13 +73,10 @@ class DialogApp extends LitElement {
           </a>
         </div>
       </div>
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 
   static styles = css`
-    ha-dialog {
-      --mdc-dialog-min-width: min(500px, 90vw);
-    }
     .app-qr {
       display: flex;
       justify-content: space-between;

src/onboarding/dialogs/community-dialog.ts

@@ -1,9 +1,9 @@
 import { mdiOpenInNew } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../common/translations/localize";
-import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-list";
 import "../../components/ha-list-item";
 
@@ -11,11 +11,18 @@ import "../../components/ha-list-item";
 class DialogCommunity extends LitElement {
   @property({ attribute: false }) public localize?: LocalizeFunc;
 
+  @state() private _open = false;
+
   public async showDialog(params): Promise<void> {
     this.localize = params.localize;
+    this._open = true;
   }
 
-  public async closeDialog(): Promise<void> {
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.localize = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -24,14 +31,12 @@ class DialogCommunity extends LitElement {
     if (!this.localize) {
       return nothing;
     }
-    return html`<ha-dialog
+    return html`<ha-wa-dialog
-      open
+      .open=${this._open}
-      hideActions
+      header-title=${this.localize(
-      @closed=${this.closeDialog}
+        "ui.panel.page-onboarding.welcome.community"
-      .heading=${createCloseHeading(
-        undefined,
-        this.localize("ui.panel.page-onboarding.welcome.community")
       )}
+      @closed=${this._dialogClosed}
     >
       <ha-list>
         <a
@@ -97,12 +102,11 @@ class DialogCommunity extends LitElement {
           </ha-list-item>
         </a>
       </ha-list>
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 
   static styles = css`
-    ha-dialog {
+    ha-wa-dialog {
-      --mdc-dialog-min-width: min(400px, 90vw);
       --dialog-content-padding: 0;
     }
     ha-list-item {

src/onboarding/onboarding-welcome-links.ts

@@ -4,16 +4,12 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
-import { documentationUrl } from "../util/documentation-url";
-import type { HomeAssistant } from "../types";
 import { showAppDialog } from "./dialogs/show-app-dialog";
 import { showCommunityDialog } from "./dialogs/show-community-dialog";
 import "./onboarding-welcome-link";
 
 @customElement("onboarding-welcome-links")
 class OnboardingWelcomeLinks extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public localize!: LocalizeFunc<any>;
 
   @property({ attribute: "mobile-app", type: Boolean })
@@ -23,10 +19,7 @@ class OnboardingWelcomeLinks extends LitElement {
     return html`<a
         target="_blank"
         rel="noreferrer noopener"
-        href=${documentationUrl(
+        href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
-          this.hass,
-          "/blog/2016/01/19/perfect-home-automation/"
-        )}
       >
         <onboarding-welcome-link
           noninteractive