Migrate system information and startup time dialogs to wa (#29532)

src/panels/config/repairs/dialog-integration-startup.ts

@@ -2,8 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-card";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import "./integrations-startup-time";
@@ -12,44 +11,47 @@ import "./integrations-startup-time";
 class DialogIntegrationStartup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _opened = false;
+  @state() private _open = false;
 
   public showDialog(): void {
-    this._opened = true;
+    this._open = true;
   }
 
   public closeDialog() {
-    this._opened = false;
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
+    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render() {
-    if (!this._opened) {
+    if (!this._open) {
       return nothing;
     }
 
     return html`
-      <ha-dialog
-        open
-        hideActions
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.repairs.integration_startup_time")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.repairs.integration_startup_time"
         )}
-        @closed=${this.closeDialog}
+        @closed=${this._dialogClosed}
       >
         <integrations-startup-time
           .hass=${this.hass}
           narrow
         ></integrations-startup-time>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
   static styles: CSSResultGroup = [
     haStyleDialog,
     css`
-      ha-dialog {
+      ha-wa-dialog {
         --dialog-content-padding: 0;
       }
     `,

src/panels/config/repairs/dialog-system-information.ts

@@ -9,8 +9,8 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-card";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-metric";
 import "../../../components/ha-spinner";
 import type { HassioStats } from "../../../data/hassio/common";
@@ -62,20 +62,24 @@ class DialogSystemInformation extends LitElement {
 
   @state() private _coreStats?: HassioStats;
 
-  @state() private _opened = false;
+  @state() private _open = false;
 
   private _systemHealthSubscription?: Promise<UnsubscribeFunc>;
 
   private _hassIOSubscription?: UnsubscribeFunc;
 
   public showDialog(): void {
-    this._opened = true;
+    this._open = true;
     this.hass!.loadBackendTranslation("system_health");
     this._subscribe();
   }
 
   public closeDialog() {
-    this._opened = false;
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
+    this._open = false;
     this._unsubscribe();
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -126,20 +130,20 @@ class DialogSystemInformation extends LitElement {
   }
 
   protected render() {
-    if (!this._opened) {
+    if (!this._open) {
       return nothing;
     }
 
     const sections = this._getSections();
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.repairs.system_information")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.repairs.system_information"
         )}
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._resolutionInfo
@@ -224,10 +228,12 @@ class DialogSystemInformation extends LitElement {
                 </div>
               `}
         </div>
-        <ha-button slot="primaryAction" @click=${this._copyInfo}>
-          ${this.hass.localize("ui.panel.config.repairs.copy")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button slot="primaryAction" @click=${this._copyInfo}>
+            ${this.hass.localize("ui.panel.config.repairs.copy")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }