Migrate config-thread dialog(s) to wa

src/panels/config/integrations/integration-panels/thread/dialog-thread-dataset.ts

@@ -4,7 +4,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../../../../../types";
 import type { DialogThreadDatasetParams } from "./show-dialog-thread-dataset";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-wa-dialog";
 
 @customElement("ha-dialog-thread-dataset")
 class DialogThreadDataset extends LitElement implements HassDialog {
@@ -12,16 +12,22 @@ class DialogThreadDataset extends LitElement implements HassDialog {
 
   @state() private _params?: DialogThreadDatasetParams;
 
+  @state() private _open = false;
+
   public async showDialog(
     params: DialogThreadDatasetParams
   ): Promise<Promise<void>> {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -37,10 +43,11 @@ class DialogThreadDataset extends LitElement implements HassDialog {
       dataset.extended_pan_id &&
       otbrInfo.active_dataset_tlvs?.includes(dataset.extended_pan_id);
 
-    return html`<ha-dialog
-      open
-      @closed=${this.closeDialog}
-      .heading=${createCloseHeading(this.hass, network.name)}
+    return html`<ha-wa-dialog
+      .hass=${this.hass}
+      .open=${this._open}
+      header-title=${network.name}
+      @closed=${this._dialogClosed}
     >
       <div>
         Network name: ${dataset.network_name}<br />
@@ -54,7 +61,7 @@ class DialogThreadDataset extends LitElement implements HassDialog {
               Active dataset TLVs: ${otbrInfo.active_dataset_tlvs}`
           : nothing}
       </div>
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 }
 

src/panels/profile/dialog-ha-mfa-module-setup-flow.ts

@@ -1,10 +1,8 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { ifDefined } from "lit/directives/if-defined";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-button";
-import "../../components/ha-dialog-footer";
-import "../../components/ha-wa-dialog";
+import "../../components/ha-dialog";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
 import "../../components/ha-spinner";
@@ -30,7 +28,7 @@ class HaMfaModuleSetupFlow extends LitElement {
 
   @state() private _loading = false;
 
-  @state() private _open = false;
+  @state() private _opened = false;
 
   @state() private _stepData: any = {};
 
@@ -41,7 +39,7 @@ class HaMfaModuleSetupFlow extends LitElement {
   public showDialog({ continueFlowId, mfaModuleId, dialogClosedCallback }) {
     this._instance = instance++;
     this._dialogClosedCallback = dialogClosedCallback;
-    this._open = true;
+    this._opened = true;
 
     const fetchStep = continueFlowId
       ? this.hass.callWS({
@@ -63,29 +61,22 @@ class HaMfaModuleSetupFlow extends LitElement {
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
     // Closed dialog by clicking on the overlay
     if (this._step) {
       this._flowDone();
-      return;
     }
-
-    this._resetDialogState();
+    this._opened = false;
   }
 
   protected render() {
-    if (this._instance === undefined) {
+    if (!this._opened) {
       return nothing;
     }
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._computeStepTitle()}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        .heading=${this._computeStepTitle()}
+        @closed=${this.closeDialog}
       >
         <div>
           ${this._errorMessage
@@ -124,7 +115,6 @@ class HaMfaModuleSetupFlow extends LitElement {
                           )}
                         ></ha-markdown>
                         <ha-form
-                          autofocus
                           .hass=${this.hass}
                           .data=${this._stepData}
                           .schema=${autocompleteLoginFields(
@@ -137,33 +127,31 @@ class HaMfaModuleSetupFlow extends LitElement {
                         ></ha-form>`
                     : ""}`}
         </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot=${this._step?.type === "form"
-              ? "secondaryAction"
-              : "primaryAction"}
-            appearance=${ifDefined(
-              this._step?.type === "form" ? "plain" : undefined
-            )}
-            @click=${this.closeDialog}
-            >${this.hass.localize(
-              ["abort", "create_entry"].includes(this._step?.type || "")
-                ? "ui.panel.profile.mfa_setup.close"
-                : "ui.common.cancel"
-            )}</ha-button
-          >
-          ${this._step?.type === "form"
-            ? html`<ha-button
-                slot="primaryAction"
-                .disabled=${this._loading}
-                @click=${this._submitStep}
-                >${this.hass.localize(
-                  "ui.panel.profile.mfa_setup.submit"
-                )}</ha-button
-              >`
-            : nothing}
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          slot="primaryAction"
+          @click=${this.closeDialog}
+          appearance=${["abort", "create_entry"].includes(
+            this._step?.type || ""
+          )
+            ? "accent"
+            : "plain"}
+          >${this.hass.localize(
+            ["abort", "create_entry"].includes(this._step?.type || "")
+              ? "ui.panel.profile.mfa_setup.close"
+              : "ui.common.cancel"
+          )}</ha-button
+        >
+        ${this._step?.type === "form"
+          ? html`<ha-button
+              slot="primaryAction"
+              .disabled=${this._loading}
+              @click=${this._submitStep}
+              >${this.hass.localize(
+                "ui.panel.profile.mfa_setup.submit"
+              )}</ha-button
+            >`
+          : nothing}
+      </ha-dialog>
     `;
   }
 
@@ -174,6 +162,9 @@ class HaMfaModuleSetupFlow extends LitElement {
         .error {
           color: red;
         }
+        ha-dialog {
+          max-width: 500px;
+        }
         ha-markdown {
           --markdown-svg-background-color: white;
           --markdown-svg-color: black;
@@ -260,15 +251,12 @@ class HaMfaModuleSetupFlow extends LitElement {
     this._dialogClosedCallback!({
       flowFinished,
     });
-    this._resetDialogState();
-  }
 
-  private _resetDialogState() {
     this._errorMessage = undefined;
     this._step = undefined;
     this._stepData = {};
     this._dialogClosedCallback = undefined;
-    this._instance = undefined;
+    this.closeDialog();
   }
 
   private _computeStepTitle() {

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -3,10 +3,10 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textfield";
 import "../../components/ha-button";
 import "../../components/ha-icon-button";
-import "../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { LongLivedAccessTokenDialogParams } from "./show-long-lived-access-token-dialog";
@@ -24,18 +24,11 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
 
   @state() private _qrCode?: TemplateResult;
 
-  @state() private _open = false;
-
   public showDialog(params: LongLivedAccessTokenDialogParams): void {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
     this._params = undefined;
     this._qrCode = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -47,15 +40,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._params.name}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        hideActions
+        .heading=${createCloseHeading(this.hass, this._params.name)}
+        @closed=${this.closeDialog}
       >
         <div>
           <ha-textfield
-            autofocus
+            dialogInitialFocus
             .value=${this._params.token}
             .label=${this.hass.localize(
               "ui.panel.profile.long_lived_access_tokens.prompt_copy_token"
@@ -86,7 +79,7 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
                 `}
           </div>
         </div>
-      </ha-wa-dialog>
+      </ha-dialog>
     `;
   }