Migrate config-apps 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,37 +52,32 @@ class AppsRegistriesDialog extends LitElement {
     password?: string;
   } = {};
 
-  @state() private _opened = false;
+  @state() private _open = false;
 
   @state() private _addingRegistry = false;
 
   protected render(): TemplateResult {
     return html`
-      <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"
-              )
-        )}
+      <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"
+            )}
       >
         ${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
@@ -134,7 +129,7 @@ class AppsRegistriesDialog extends LitElement {
               <div class="action">
                 <ha-button
                   @click=${this._addRegistry}
-                  dialogInitialFocus
+                  autofocus
                   appearance="filled"
                   size="small"
                 >
@@ -144,7 +139,7 @@ class AppsRegistriesDialog extends LitElement {
                   )}
                 </ha-button>
               </div> `}
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -158,24 +153,20 @@ class AppsRegistriesDialog extends LitElement {
   }
 
   public async showDialog(): Promise<void> {
-    this._opened = true;
+    this._open = true;
     this._input = {};
     await this._loadRegistries();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    this._addingRegistry = false;
-    this._opened = false;
-    this._input = {};
+    this._open = false;
   }
 
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
-    );
+  private _dialogClosed(): void {
+    this._open = false;
+    this._addingRegistry = false;
+    this._input = {};
   }
 
   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 { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
@@ -15,6 +15,7 @@ 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,
@@ -42,7 +43,7 @@ class AppsRepositoriesDialog extends LitElement {
 
   @state() private _addon?: HassioAddonsInfo;
 
-  @state() private _opened = false;
+  @state() private _open = false;
 
   @state() private _processing = false;
 
@@ -51,15 +52,20 @@ class AppsRepositoriesDialog extends LitElement {
   public async showDialog(dialogParams: RepositoryDialogParams): Promise<void> {
     this._dialogParams = dialogParams;
     this._addon = dialogParams.addon;
-    this._opened = true;
+    this._open = true;
     await this._loadData();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._dialogParams?.closeCallback?.();
     this._dialogParams = undefined;
-    this._opened = false;
+    this._addon = undefined;
+    this._open = false;
     this._error = "";
   }
 
@@ -97,14 +103,12 @@ class AppsRepositoriesDialog extends LitElement {
       this._addon.addons
     );
     return html`
-      <ha-dialog
-        .open=${this._opened}
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.apps.dialog.repositories.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        @closed=${this._dialogClosed}
+        header-title=${this.hass.localize(
+          "ui.panel.config.apps.dialog.repositories.title"
         )}
       >
         ${this._error
@@ -161,7 +165,7 @@ class AppsRepositoriesDialog extends LitElement {
                 "ui.panel.config.apps.dialog.repositories.add"
               )}
               @keydown=${this._handleKeyAdd}
-              dialogInitialFocus
+              autofocus
             ></ha-textfield>
             <ha-button
               .loading=${this._processing}
@@ -176,10 +180,12 @@ class AppsRepositoriesDialog extends LitElement {
             </ha-button>
           </div>
         </div>
-        <ha-button slot="primaryAction" @click=${this.closeDialog}>
-          ${this.hass.localize("ui.common.close")}
-        </ha-button>
-      </ha-dialog>
+        <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>
     `;
   }
 
@@ -188,9 +194,6 @@ class AppsRepositoriesDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog.button-left {
-          --justify-action-buttons: flex-start;
-        }
         .form {
           color: var(--primary-text-color);
         }
@@ -215,14 +218,6 @@ 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") {