Migrate config-lovelace dialog(s) to wa

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-configure-strategy.ts

@@ -3,8 +3,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
-import { createCloseHeading } from "../../../../components/ha-dialog";
-import "../../../../components/ha-form/ha-form";
+import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-wa-dialog";
 import type { LovelaceStrategyConfig } from "../../../../data/lovelace/config/strategy";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -17,6 +17,8 @@ export class DialogLovelaceDashboardConfigureStrategy extends LitElement {
 
   @state() private _params?: LovelaceDashboardConfigureStrategyDialogParams;
 
+  @state() private _open = false;
+
   @state() private _submitting = false;
 
   @state() private _data?: LovelaceStrategyConfig;
@@ -26,9 +28,14 @@ export class DialogLovelaceDashboardConfigureStrategy extends LitElement {
   ): void {
     this._params = params;
     this._data = params.config.strategy;
+    this._open = true;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     this._data = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -40,17 +47,13 @@ export class DialogLovelaceDashboardConfigureStrategy extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.lovelace.dashboards.detail.new_dashboard"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.lovelace.dashboards.detail.new_dashboard"
         )}
+        @closed=${this._dialogClosed}
       >
         <div>
           <hui-dashboard-strategy-element-editor
@@ -58,18 +61,20 @@ export class DialogLovelaceDashboardConfigureStrategy extends LitElement {
             .lovelace=${this._params.config}
             .value=${this._data}
             @config-changed=${this._handleConfigChanged}
-            dialogInitialFocus
+            autofocus
           ></hui-dashboard-strategy-element-editor>
         </div>
 
-        <ha-button
-          slot="primaryAction"
-          @click=${this._save}
-          .disabled=${this._submitting}
-        >
-          ${this.hass.localize("ui.common.next")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="primaryAction"
+            @click=${this._save}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.common.next")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -5,8 +5,9 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
 import "../../../../components/ha-button";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-form/ha-form";
+import "../../../../components/ha-wa-dialog";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type {
   LovelaceDashboard,
@@ -23,6 +24,8 @@ export class DialogLovelaceDashboardDetail extends LitElement {
 
   @state() private _params?: LovelaceDashboardDetailsDialogParams;
 
+  @state() private _open = false;
+
   @state() private _urlPathChanged = false;
 
   @state() private _data?: Partial<LovelaceDashboard>;
@@ -35,6 +38,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     this._params = params;
     this._error = undefined;
     this._urlPathChanged = false;
+    this._open = true;
     if (this._params.dashboard) {
       this._data = this._params.dashboard;
     } else {
@@ -49,6 +53,10 @@ export class DialogLovelaceDashboardDetail extends LitElement {
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     this._data = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -62,22 +70,18 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this._params.urlPath
-            ? this._data.title ||
-                this.hass.localize(
-                  "ui.panel.config.lovelace.dashboards.detail.edit_dashboard"
-                )
-            : this.hass.localize(
-                "ui.panel.config.lovelace.dashboards.detail.new_dashboard"
-              )
-        )}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.urlPath
+          ? this._data.title ||
+            this.hass.localize(
+              "ui.panel.config.lovelace.dashboards.detail.edit_dashboard"
+            )
+          : this.hass.localize(
+              "ui.panel.config.lovelace.dashboards.detail.new_dashboard"
+            )}
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._params.dashboard?.mode === "yaml"
@@ -86,6 +90,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
               )
             : html`
                 <ha-form
+                  autofocus
                   .schema=${this._schema(this._params)}
                   .data=${this._data}
                   .hass=${this.hass}
@@ -95,44 +100,46 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                 ></ha-form>
               `}
         </div>
-        ${this._params.urlPath
-          ? html`
-              ${this._params.dashboard?.mode === "storage"
-                ? html`
-                    <ha-button
-                      slot="secondaryAction"
-                      variant="danger"
-                      appearance="plain"
-                      @click=${this._deleteDashboard}
-                      .disabled=${this._submitting}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.lovelace.dashboards.detail.delete"
-                      )}
-                    </ha-button>
-                  `
-                : nothing}
-            `
-          : nothing}
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateDashboard}
-          .disabled=${(this._error && "url_path" in this._error) ||
-          titleInvalid ||
-          this._submitting}
-          dialogInitialFocus
-        >
+        <ha-dialog-footer slot="footer">
           ${this._params.urlPath
-            ? this._params.dashboard?.mode === "storage"
-              ? this.hass.localize(
-                  "ui.panel.config.lovelace.dashboards.detail.update"
-                )
-              : this.hass.localize("ui.common.close")
-            : this.hass.localize(
-                "ui.panel.config.lovelace.dashboards.detail.create"
-              )}
-        </ha-button>
-      </ha-dialog>
+            ? html`
+                ${this._params.dashboard?.mode === "storage"
+                  ? html`
+                      <ha-button
+                        slot="secondaryAction"
+                        variant="danger"
+                        appearance="plain"
+                        @click=${this._deleteDashboard}
+                        .disabled=${this._submitting}
+                      >
+                        ${this.hass.localize(
+                          "ui.panel.config.lovelace.dashboards.detail.delete"
+                        )}
+                      </ha-button>
+                    `
+                  : nothing}
+              `
+            : nothing}
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateDashboard}
+            .disabled=${(this._error && "url_path" in this._error) ||
+            titleInvalid ||
+            this._submitting}
+            ?autofocus=${this._params.dashboard?.mode === "yaml"}
+          >
+            ${this._params.urlPath
+              ? this._params.dashboard?.mode === "storage"
+                ? this.hass.localize(
+                    "ui.panel.config.lovelace.dashboards.detail.update"
+                  )
+                : this.hass.localize("ui.common.close")
+              : this.hass.localize(
+                  "ui.panel.config.lovelace.dashboards.detail.create"
+                )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }