Migrate config-thread dialog(s) to wa

src/panels/config/apps/dialogs/registries/dialog-registries.ts

@@ -3,12 +3,12 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-button";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
-import "../../../../../components/ha-wa-dialog";
 import { extractApiErrorMessage } from "../../../../../data/hassio/common";
 import {
   addHassioDockerRegistry,
@@ -52,32 +52,37 @@ class AppsRegistriesDialog extends LitElement {
     password?: string;
   } = {};
 
-  @state() private _open = false;
+  @state() private _opened = false;
 
   @state() private _addingRegistry = false;
 
   protected render(): TemplateResult {
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        @closed=${this._dialogClosed}
-        header-title=${this._addingRegistry
-          ? this.hass.localize(
-              "ui.panel.config.apps.dialog.registries.title_add"
-            )
-          : this.hass.localize(
-              "ui.panel.config.apps.dialog.registries.title_manage"
-            )}
+      <ha-dialog
+        .open=${this._opened}
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        hideActions
+        .heading=${createCloseHeading(
+          this.hass,
+          this._addingRegistry
+            ? this.hass.localize(
+                "ui.panel.config.apps.dialog.registries.title_add"
+              )
+            : this.hass.localize(
+                "ui.panel.config.apps.dialog.registries.title_manage"
+              )
+        )}
       >
         ${this._addingRegistry
           ? html`
               <ha-form
-                autofocus
                 .data=${this._input}
                 .schema=${SCHEMA}
                 @value-changed=${this._valueChanged}
                 .computeLabel=${this._computeLabel}
+                dialogInitialFocus
               ></ha-form>
               <div class="action">
                 <ha-button
@@ -129,7 +134,7 @@ class AppsRegistriesDialog extends LitElement {
               <div class="action">
                 <ha-button
                   @click=${this._addRegistry}
-                  autofocus
+                  dialogInitialFocus
                   appearance="filled"
                   size="small"
                 >
@@ -139,7 +144,7 @@ class AppsRegistriesDialog extends LitElement {
                   )}
                 </ha-button>
               </div> `}
-      </ha-wa-dialog>
+      </ha-dialog>
     `;
   }
 
@@ -153,20 +158,24 @@ class AppsRegistriesDialog extends LitElement {
   }
 
   public async showDialog(): Promise<void> {
-    this._open = true;
+    this._opened = true;
     this._input = {};
     await this._loadRegistries();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    this._open = false;
+    this._addingRegistry = false;
+    this._opened = false;
+    this._input = {};
   }
 
-  private _dialogClosed(): void {
-    this._open = false;
-    this._addingRegistry = false;
-    this._input = {};
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (
+        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+      )?.focus()
+    );
   }
 
   private async _loadRegistries(): Promise<void> {

src/panels/config/apps/dialogs/repositories/dialog-repositories.ts

@@ -7,7 +7,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../../../common/string/compare";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-button";
-import "../../../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
@@ -15,7 +15,6 @@ import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-textfield";
 import type { HaTextField } from "../../../../../components/ha-textfield";
 import "../../../../../components/ha-tooltip";
-import "../../../../../components/ha-wa-dialog";
 import type {
   HassioAddonInfo,
   HassioAddonsInfo,
@@ -43,7 +42,7 @@ class AppsRepositoriesDialog extends LitElement {
 
   @state() private _addon?: HassioAddonsInfo;
 
-  @state() private _open = false;
+  @state() private _opened = false;
 
   @state() private _processing = false;
 
@@ -52,20 +51,15 @@ class AppsRepositoriesDialog extends LitElement {
   public async showDialog(dialogParams: RepositoryDialogParams): Promise<void> {
     this._dialogParams = dialogParams;
     this._addon = dialogParams.addon;
-    this._open = true;
+    this._opened = true;
     await this._loadData();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._dialogParams?.closeCallback?.();
     this._dialogParams = undefined;
-    this._addon = undefined;
-    this._open = false;
+    this._opened = false;
     this._error = "";
   }
 
@@ -103,12 +97,14 @@ class AppsRepositoriesDialog extends LitElement {
       this._addon.addons
     );
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        @closed=${this._dialogClosed}
-        header-title=${this.hass.localize(
-          "ui.panel.config.apps.dialog.repositories.title"
+      <ha-dialog
+        .open=${this._opened}
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.apps.dialog.repositories.title")
         )}
       >
         ${this._error
@@ -165,7 +161,7 @@ class AppsRepositoriesDialog extends LitElement {
                 "ui.panel.config.apps.dialog.repositories.add"
               )}
               @keydown=${this._handleKeyAdd}
-              autofocus
+              dialogInitialFocus
             ></ha-textfield>
             <ha-button
               .loading=${this._processing}
@@ -180,12 +176,10 @@ class AppsRepositoriesDialog extends LitElement {
             </ha-button>
           </div>
         </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button slot="primaryAction" @click=${this.closeDialog}>
-            ${this.hass.localize("ui.common.close")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button slot="primaryAction" @click=${this.closeDialog}>
+          ${this.hass.localize("ui.common.close")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -194,6 +188,9 @@ class AppsRepositoriesDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
+        ha-dialog.button-left {
+          --justify-action-buttons: flex-start;
+        }
         .form {
           color: var(--primary-text-color);
         }
@@ -218,6 +215,14 @@ class AppsRepositoriesDialog extends LitElement {
     ];
   }
 
+  public focus() {
+    this.updateComplete.then(() =>
+      (
+        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
+      )?.focus()
+    );
+  }
+
   private _handleKeyAdd(ev: KeyboardEvent) {
     ev.stopPropagation();
     if (ev.key !== "Enter") {

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>`;
   }
 }