Migrate dialog-device-registry-detail to ha-wa-dialog (#27668)

Author: timmo001

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -5,7 +5,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../common/entity/compute_device_name";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
-import "../../../../components/ha-dialog";
+import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-button";
 import "../../../../components/ha-labels-picker";
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -19,6 +20,8 @@ import type { DeviceRegistryDetailDialogParams } from "./show-dialog-device-regi
 class DialogDeviceRegistryDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state() private _open = false;
+
   @state() private _nameByUser!: string;
 
   @state() private _error?: string;
@@ -42,10 +45,15 @@ class DialogDeviceRegistryDetail extends LitElement {
     this._areaId = this._params.device.area_id || "";
     this._labels = this._params.device.labels || [];
     this._disabledBy = this._params.device.disabled_by;
+    this._open = true;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._error = "";
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -57,25 +65,27 @@ class DialogDeviceRegistryDetail extends LitElement {
     }
     const device = this._params.device;
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${computeDeviceNameDisplay(device, this.hass)}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${computeDeviceNameDisplay(device, this.hass)}
+        prevent-scrim-close
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
             : ""}
           <div class="form">
             <ha-textfield
+              autofocus
               .value=${this._nameByUser}
               @input=${this._nameChanged}
               .label=${this.hass.localize(
                 "ui.dialogs.device-registry-detail.name"
               )}
               .placeholder=${device.name || ""}
               .disabled=${this._submitting}
-              dialogInitialFocus
             ></ha-textfield>
             <ha-area-picker
               .hass=${this.hass}
@@ -131,22 +141,25 @@ class DialogDeviceRegistryDetail extends LitElement {
             </div>
           </div>
         </div>
-        <ha-button
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-          .disabled=${this._submitting}
-          appearance="plain"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-          .disabled=${this._submitting}
-        >
-          ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
-        </ha-button>
-      </ha-dialog>
+
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            @click=${this.closeDialog}
+            .disabled=${this._submitting}
+            appearance="plain"
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }