Migrate config-cloud dialog(s) to wa

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -8,7 +8,7 @@ import { computeStateDomain } from "../../../../common/entity/compute_state_doma
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-button";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-select";
 import type {
   HaSelectOption,
@@ -16,6 +16,7 @@ import type {
 } from "../../../../components/ha-select";
 import "../../../../components/ha-textarea";
 import type { HaTextArea } from "../../../../components/ha-textarea";
+import "../../../../components/ha-wa-dialog";
 import { showAutomationEditor } from "../../../../data/automation";
 import { MediaPlayerEntityFeature } from "../../../../data/media-player";
 import { convertTextToSpeech } from "../../../../data/tts";
@@ -30,6 +31,8 @@ export class DialogTryTts extends LitElement {
 
   @state() private _loadingExample = false;
 
+  @state() private _open = false;
+
   @state() private _params?: TryTtsDialogParams;
 
   @query("#message") private _messageInput?: HaTextArea;
@@ -50,9 +53,14 @@ export class DialogTryTts extends LitElement {
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -82,20 +90,20 @@ export class DialogTryTts extends LitElement {
     });
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.cloud.account.tts.dialog.header")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.cloud.account.tts.dialog.header"
         )}
+        width="medium"
+        @closed=${this._dialogClosed}
       >
         <div>
           <ha-textarea
             autogrow
             id="message"
+            autofocus
             .label=${this.hass.localize(
               "ui.panel.config.cloud.account.tts.dialog.message"
             )}
@@ -118,26 +126,33 @@ export class DialogTryTts extends LitElement {
           >
           </ha-select>
         </div>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._playExample}
-          .disabled=${this._loadingExample}
-        >
-          <ha-svg-icon slot="start" .path=${mdiPlayCircleOutline}></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")}
-        </ha-button>
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          .disabled=${target === "browser"}
-          @click=${this._createAutomation}
-        >
-          <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.cloud.account.tts.dialog.create_automation"
-          )}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            slot="secondaryAction"
+            .disabled=${target === "browser"}
+            @click=${this._createAutomation}
+          >
+            <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.tts.dialog.create_automation"
+            )}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._playExample}
+            .disabled=${this._loadingExample}
+          >
+            <ha-svg-icon
+              slot="start"
+              .path=${mdiPlayCircleOutline}
+            ></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.tts.dialog.play"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -223,9 +238,6 @@ export class DialogTryTts extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-        }
         ha-textarea,
         ha-select {
           display: block;

src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts

@@ -6,8 +6,9 @@ import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 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-wa-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { obfuscateUrl } from "../../../../util/url";
@@ -19,13 +20,21 @@ class DialogCloudAlreadyConnected extends LitElement {
 
   @state() private _params?: CloudAlreadyConnectedDialogParams;
 
+  @state() private _open = false;
+
   @state() private _obfuscateIp = true;
 
   public showDialog(params: CloudAlreadyConnectedDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._params?.closeDialog?.();
     this._params = undefined;
     this._obfuscateIp = true;
@@ -39,15 +48,14 @@ class DialogCloudAlreadyConnected extends LitElement {
     const { details } = this._params;
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.cloud.dialog_already_connected.heading"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.cloud.dialog_already_connected.heading"
         )}
+        @closed=${this._dialogClosed}
+        width="medium"
       >
         <div class="intro">
           <span>
@@ -131,19 +139,21 @@ class DialogCloudAlreadyConnected extends LitElement {
           )}
         </ha-alert>
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="secondaryAction"
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button @click=${this._logInHere} slot="primaryAction">
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_already_connected.login_here"
-          )}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass!.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button slot="primaryAction" @click=${this._logInHere}>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_already_connected.login_here"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -160,9 +170,6 @@ class DialogCloudAlreadyConnected extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 535px;
-        }
         .intro b {
           display: block;
           margin-top: 16px;

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -3,10 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../../../components/ha-button";
+import "../../../../components/ha-wa-dialog";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
 
 @customElement("dialog-cloud-certificate")
@@ -15,11 +16,19 @@ class DialogCloudCertificate extends LitElement {
 
   @state() private _params?: CloudCertificateDialogParams;
 
+  @state() private _open = false;
+
   public showDialog(params: CloudCertificateDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -31,16 +40,14 @@ class DialogCloudCertificate extends LitElement {
     const { certificateInfo } = this._params;
 
     return html`
-      <ha-dialog
-        open
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.cloud.dialog_certificate.certificate_information"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.cloud.dialog_certificate.certificate_information"
         )}
+        @closed=${this._dialogClosed}
+        width="medium"
       >
         <div>
           <p>
@@ -74,12 +81,14 @@ class DialogCloudCertificate extends LitElement {
           </ul>
         </div>
 
-        <ha-button @click=${this.closeDialog} slot="primaryAction">
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_certificate.close"
-          )}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button slot="primaryAction" @click=${this.closeDialog}>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_certificate.close"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -87,9 +96,6 @@ class DialogCloudCertificate extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 535px;
-        }
         .break-word {
           overflow-wrap: break-word;
         }

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -3,7 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -12,6 +12,7 @@ import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 
 import "../../../../components/ha-button";
 import "../../../../components/ha-copy-textfield";
+import "../../../../components/ha-wa-dialog";
 
 @customElement("dialog-manage-cloudhook")
 export class DialogManageCloudhook extends LitElement {
@@ -19,11 +20,19 @@ export class DialogManageCloudhook extends LitElement {
 
   @state() private _params?: WebhookDialogParams;
 
+  @state() private _open = false;
+
   public showDialog(params: WebhookDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -41,17 +50,15 @@ export class DialogManageCloudhook extends LitElement {
           )
         : documentationUrl(this.hass!, `/integrations/${webhook.domain}/`);
     return html`
-      <ha-dialog
-        open
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass!,
-          this.hass!.localize(
-            "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
-            { name: webhook.name }
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass!.localize(
+          "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
+          { name: webhook.name }
         )}
+        @closed=${this._dialogClosed}
+        width="large"
       >
         <div>
           <p>
@@ -87,21 +94,25 @@ export class DialogManageCloudhook extends LitElement {
           ></ha-copy-textfield>
         </div>
 
-        <ha-button
-          href=${docsUrl}
-          target="_blank"
-          rel="noreferrer"
-          slot="secondaryAction"
-          appearance="plain"
-        >
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
-          )}
-        </ha-button>
-        <ha-button @click=${this.closeDialog} slot="primaryAction">
-          ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            href=${docsUrl}
+            target="_blank"
+            rel="noreferrer"
+            appearance="plain"
+          >
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+            )}
+          </ha-button>
+          <ha-button slot="primaryAction" @click=${this.closeDialog}>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.close"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -129,9 +140,6 @@ export class DialogManageCloudhook extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog {
-          width: 650px;
-        }
         button.link {
           color: var(--primary-color);
           text-decoration: none;

src/panels/config/developer-tools/statistics/developer-tools-statistics.ts

@@ -30,6 +30,7 @@ import type {
 import { showDataTableSettingsDialog } from "../../../../components/data-table/show-dialog-data-table-settings";
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import type { HaMdMenu } from "../../../../components/ha-md-menu";

src/panels/config/developer-tools/statistics/dialog-statistics-adjust-sum.ts

@@ -6,8 +6,7 @@ import memoizeOne from "memoize-one";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-spinner";
-import "../../../../components/ha-dialog-footer";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-form/ha-form";
 import "../../../../components/ha-icon-next";
@@ -42,8 +41,6 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
 
   @state() private _params?: DialogStatisticsAdjustSumParams;
 
-  @state() private _open = false;
-
   @state() private _busy = false;
 
   @state() private _moment?: string;
@@ -74,7 +71,6 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
 
   public showDialog(params: DialogStatisticsAdjustSumParams): void {
     this._params = params;
-    this._open = true;
     // moment is in format YYYY-MM-DD HH:mm:ss because of selector
     // Here we create a date with minutes set to %5
     const now = new Date();
@@ -84,11 +80,6 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
-    this._open = false;
     this._params = undefined;
     this._moment = undefined;
     this._stats5min = undefined;
@@ -106,59 +97,25 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
     }
 
     let content: TemplateResult;
-    let footer: TemplateResult;
 
     if (!this._chosenStat) {
       content = this._renderPickStatistic();
-      footer = html`
-        <ha-button
-          slot="secondaryAction"
-          appearance="plain"
-          @click=${this._fetchOutliers}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.developer-tools.tabs.statistics.fix_issue.adjust_sum.outliers"
-          )}
-        </ha-button>
-        <ha-button slot="primaryAction" data-dialog="close">
-          ${this.hass.localize("ui.common.close")}
-        </ha-button>
-      `;
     } else {
       content = this._renderAdjustStat();
-      footer = html`
-        <ha-button
-          slot="secondaryAction"
-          .disabled=${this._busy}
-          @click=${this._clearChosenStatistic}
-          appearance="plain"
-        >
-          ${this.hass.localize("ui.common.back")}</ha-button
-        >
-        <ha-button
-          slot="primaryAction"
-          .disabled=${this._busy}
-          @click=${this._fixIssue}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust"
-          )}</ha-button
-        >
-      `;
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        @closed=${this.closeDialog}
+        .heading=${this.hass.localize(
           "ui.panel.config.developer-tools.tabs.statistics.fix_issue.adjust_sum.title"
         )}
-        @closed=${this._dialogClosed}
       >
         ${content}
-        <ha-dialog-footer slot="footer">${footer}</ha-dialog-footer>
-      </ha-wa-dialog>
+      </ha-dialog>
     `;
   }
 
@@ -239,6 +196,18 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         @value-changed=${this._dateTimeSelectorChanged}
       ></ha-selector-datetime>
       <div class="stat-list">${stats}</div>
+      <ha-button
+        appearance="plain"
+        slot="secondaryAction"
+        @click=${this._fetchOutliers}
+      >
+        ${this.hass.localize(
+          "ui.panel.config.developer-tools.tabs.statistics.fix_issue.adjust_sum.outliers"
+        )}
+      </ha-button>
+      <ha-button slot="primaryAction" dialogAction="cancel">
+        ${this.hass.localize("ui.common.close")}
+      </ha-button>
     `;
   }
 
@@ -316,6 +285,24 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         .disabled=${this._busy}
         @value-changed=${this._amountChanged}
       ></ha-selector-number>
+
+      <ha-button
+        slot="secondaryAction"
+        .disabled=${this._busy}
+        @click=${this._clearChosenStatistic}
+        appearance="plain"
+      >
+        ${this.hass.localize("ui.common.back")}</ha-button
+      >
+      <ha-button
+        slot="primaryAction"
+        .disabled=${this._busy}
+        @click=${this._fixIssue}
+      >
+        ${this.hass.localize(
+          "ui.panel.config.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust"
+        )}</ha-button
+      >
     `;
   }
 
@@ -505,6 +492,27 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
       haStyle,
       haStyleDialog,
       css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          ha-dialog {
+            --mdc-dialog-max-height: 100%;
+            height: 100%;
+          }
+        }
+
+        @media all and (min-width: 850px) {
+          ha-dialog {
+            --mdc-dialog-max-height: 80%;
+            --mdc-dialog-max-height: 80%;
+          }
+        }
+
+        @media all and (min-width: 451px) and (min-height: 501px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 480px;
+          }
+        }
+
         .text-content,
         ha-selector-datetime,
         ha-selector-number {
@@ -520,7 +528,6 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
           margin-bottom: var(--ha-space-5);
         }
         .stat-list {
-          margin-top: var(--ha-space-2);
           min-height: 360px;
           display: flex;
           flex-direction: column;

src/panels/config/developer-tools/statistics/dialog-statistics-fix-units-changed.ts

@@ -2,8 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog-footer";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
@@ -22,24 +21,20 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
 
   @state() private _params?: DialogStatisticsUnitsChangedParams;
 
-  @state() private _open = false;
-
   @state() private _action?: "update" | "clear" | "change";
 
   public showDialog(params: DialogStatisticsUnitsChangedParams): void {
     this._params = params;
     this._action = "update";
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
+    this._cancel();
   }
 
-  private _dialogClosed(): void {
+  private _closeDialog(): void {
     this._params = undefined;
     this._action = undefined;
-    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -49,13 +44,14 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        @closed=${this._closeDialog}
+        .heading=${this.hass.localize(
           "ui.panel.config.developer-tools.tabs.statistics.fix_issue.units_changed.title"
         )}
-        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize(
@@ -95,7 +91,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
             name="action"
             .checked=${this._action === "update"}
             @change=${this._handleActionChanged}
-            autofocus
+            dialogInitialFocus
           ></ha-radio>
         </ha-formfield>
         <ha-formfield
@@ -111,21 +107,19 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
           ></ha-radio>
         </ha-formfield>
 
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            appearance="plain"
-            slot="secondaryAction"
-            @click=${this._cancel}
-          >
-            ${this.hass.localize("ui.common.close")}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this._fixIssue}>
-            ${this.hass.localize(
-              "ui.panel.config.developer-tools.tabs.statistics.fix_issue.fix"
-            )}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          appearance="plain"
+          slot="primaryAction"
+          @click=${this._cancel}
+        >
+          ${this.hass.localize("ui.common.close")}
+        </ha-button>
+        <ha-button slot="primaryAction" @click=${this._fixIssue}>
+          ${this.hass.localize(
+            "ui.panel.config.developer-tools.tabs.statistics.fix_issue.fix"
+          )}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -135,7 +129,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
 
   private _cancel(): void {
     this._params?.cancelCallback!();
-    this.closeDialog();
+    this._closeDialog();
   }
 
   private async _fixIssue(): Promise<void> {
@@ -150,7 +144,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
       );
     }
     this._params?.fixedCallback!();
-    this.closeDialog();
+    this._closeDialog();
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/developer-tools/statistics/dialog-statistics-fix.ts

@@ -3,8 +3,7 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
-import "../../../../components/ha-wa-dialog";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-spinner";
 import { clearStatistics, getStatisticLabel } from "../../../../data/recorder";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
@@ -19,23 +18,19 @@ export class DialogStatisticsFix extends LitElement {
 
   @state() private _params?: DialogStatisticsFixParams;
 
-  @state() private _open = false;
-
   @state() private _clearing = false;
 
   public showDialog(params: DialogStatisticsFixParams): void {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
+    this._cancel();
   }
 
-  private _dialogClosed(): void {
+  private _closeDialog(): void {
     this._params = undefined;
     this._clearing = false;
-    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -47,13 +42,14 @@ export class DialogStatisticsFix extends LitElement {
     const issue = this._params.issue;
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        @closed=${this._closeDialog}
+        .heading=${this.hass.localize(
           `ui.panel.config.developer-tools.tabs.statistics.fix_issue.${issue.type}.title`
         )}
-        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize(
@@ -151,36 +147,33 @@ export class DialogStatisticsFix extends LitElement {
                   : nothing}
         </p>
 
-        <ha-dialog-footer slot="footer">
-          ${issue.type !== "entity_not_recorded"
-            ? html`<ha-button
-                  appearance="plain"
-                  slot="secondaryAction"
-                  @click=${this._cancel}
-                >
-                  ${this.hass.localize("ui.common.close")}
-                </ha-button>
-                <ha-button
-                  slot="primaryAction"
-                  appearance="filled"
-                  @click=${this._clearStatistics}
-                  variants="danger"
-                  .disabled=${this._clearing}
-                  .loading=${this._clearing}
-                >
-                  ${this.hass.localize("ui.common.delete")}
-                </ha-button>`
-            : html`<ha-button slot="primaryAction" @click=${this._cancel}>
-                ${this.hass.localize("ui.common.ok")}
-              </ha-button>`}
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        ${issue.type !== "entity_not_recorded"
+          ? html`<ha-button
+                appearance="plain"
+                slot="primaryAction"
+                @click=${this._cancel}
+              >
+                ${this.hass.localize("ui.common.close")}
+              </ha-button>
+              <ha-button
+                slot="primaryAction"
+                @click=${this._clearStatistics}
+                variants="danger"
+                .disabled=${this._clearing}
+                .loading=${this._clearing}
+              >
+                ${this.hass.localize("ui.common.delete")}
+              </ha-button>`
+          : html`<ha-button slot="primaryAction" @click=${this._cancel}>
+              ${this.hass.localize("ui.common.ok")}
+            </ha-button>`}
+      </ha-dialog>
     `;
   }
 
   private _cancel(): void {
     this._params?.cancelCallback!();
-    this.closeDialog();
+    this._closeDialog();
   }
 
   private async _clearStatistics(): Promise<void> {
@@ -207,7 +200,7 @@ export class DialogStatisticsFix extends LitElement {
     } finally {
       this._clearing = false;
       this._params?.fixedCallback!();
-      this.closeDialog();
+      this._closeDialog();
     }
   }