Migrate config-matter dialog(s) to wa

src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts

@@ -1,14 +1,12 @@
-import { mdiClose } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-dialog-header";
-import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-dialog-footer";
 import "../../../../../components/ha-icon-button-arrow-prev";
 import "../../../../../components/ha-button";
-import "../../../../../components/ha-dialog";
+import "../../../../../components/ha-wa-dialog";
 import {
   commissionMatterDevice,
   redirectOnNewMatterDevice,
@@ -75,6 +73,9 @@ class DialogMatterAddDevice extends LitElement {
 
   public closeDialog(): void {
     this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._step = "main";
     this._pairingCode = "";
     this._unsub?.();
@@ -171,35 +172,28 @@ class DialogMatterAddDevice extends LitElement {
     const actions = this._renderActions();
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${title}
-        ?hideActions=${actions === nothing}
-        scrimClickAction
-        escapeKeyAction
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${title}
+        @closed=${this._dialogClosed}
       >
-        <ha-dialog-header slot="heading">
-          ${hasBackStep
-            ? html`
-                <ha-icon-button-arrow-prev
-                  slot="navigationIcon"
-                  .hass=${this.hass}
-                  @click=${this._back}
-                ></ha-icon-button-arrow-prev>
-              `
-            : html`
-                <ha-icon-button
-                  slot="navigationIcon"
-                  dialogAction="cancel"
-                  .label=${this.hass.localize("ui.common.close")}
-                  .path=${mdiClose}
-                ></ha-icon-button>
-              `}
-          <span slot="title">${title}</span>
-        </ha-dialog-header>
-        ${this._renderStep()} ${actions}
-      </ha-dialog>
+        ${hasBackStep
+          ? html`
+              <ha-icon-button-arrow-prev
+                slot="headerNavigationIcon"
+                .hass=${this.hass}
+                @click=${this._back}
+              ></ha-icon-button-arrow-prev>
+            `
+          : nothing}
+        ${this._renderStep()}
+        ${actions === nothing
+          ? nothing
+          : html`<ha-dialog-footer slot="footer">
+              ${actions}
+            </ha-dialog-footer>`}
+      </ha-wa-dialog>
     `;
   }
 
@@ -209,21 +203,13 @@ class DialogMatterAddDevice extends LitElement {
       :host {
         --horizontal-padding: 24px;
       }
-      ha-dialog {
+      ha-wa-dialog {
         --dialog-content-padding: 0;
       }
-      ha-dialog {
-        --mdc-dialog-min-width: 450px;
-        --mdc-dialog-max-width: 450px;
-      }
       @media all and (max-width: 450px), all and (max-height: 500px) {
         :host {
           --horizontal-padding: 16px;
         }
-        ha-dialog {
-          --mdc-dialog-min-width: 100vw;
-          --mdc-dialog-max-width: 100vw;
-        }
       }
       .loading {
         padding: 24px;

src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts

@@ -3,11 +3,10 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-list";
 import "../../../../../components/ha-list-item";
-import "../../../../../components/ha-qr-code";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-wa-dialog";
 import type {
   MatterFabricData,
   MatterNodeDiagnostics,
@@ -32,10 +31,13 @@ class DialogMatterManageFabrics extends LitElement {
 
   @state() private _nodeDiagnostics?: MatterNodeDiagnostics;
 
+  @state() private _open = false;
+
   public async showDialog(
     params: MatterManageFabricsDialogParams
   ): Promise<void> {
     this.device_id = params.device_id;
+    this._open = true;
     this._fetchNodeDetails();
   }
 
@@ -45,14 +47,13 @@ class DialogMatterManageFabrics extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.matter.manage_fabrics.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.matter.manage_fabrics.title"
         )}
+        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize("ui.panel.config.matter.manage_fabrics.fabrics")}
@@ -81,7 +82,7 @@ class DialogMatterManageFabrics extends LitElement {
           : html`<div class="center">
               <ha-spinner></ha-spinner>
             </div>`}
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -140,6 +141,10 @@ class DialogMatterManageFabrics extends LitElement {
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.device_id = undefined;
     this._nodeDiagnostics = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -149,7 +154,7 @@ class DialogMatterManageFabrics extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
           --mdc-list-side-padding: 24px;
           --mdc-list-side-padding-right: 16px;

src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts

@@ -5,7 +5,8 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 import "../../../../../components/ha-button";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import "../../../../../components/ha-qr-code";
 import "../../../../../components/ha-spinner";
 import { domainToName } from "../../../../../data/integration";
@@ -26,10 +27,13 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
 
   @state() private _commissionParams?: MatterCommissioningParameters;
 
+  @state() private _open = false;
+
   public async showDialog(
     params: MatterOpenCommissioningWindowDialogParams
   ): Promise<void> {
     this.device_id = params.device_id;
+    this._open = true;
   }
 
   protected render() {
@@ -38,15 +42,13 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.matter.open_commissioning_window.title"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.matter.open_commissioning_window.title"
         )}
+        @closed=${this._dialogClosed}
       >
         ${this._commissionParams
           ? html`
@@ -90,11 +92,6 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                   >
                 </div>
               </div>
-              <ha-button slot="primaryAction" @click=${this._copyCode}>
-                ${this.hass.localize(
-                  "ui.panel.config.matter.open_commissioning_window.copy_code"
-                )}
-              </ha-button>
             `
           : this._status === "started"
             ? html`
@@ -110,9 +107,6 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                     </p>
                   </div>
                 </div>
-                <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                  ${this.hass.localize("ui.common.close")}
-                </ha-button>
               `
             : this._status === "failed"
               ? html`
@@ -129,9 +123,6 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                       </p>
                     </div>
                   </div>
-                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                    ${this.hass.localize("ui.common.close")}
-                  </ha-button>
                 `
               : html`
                   <p>
@@ -151,13 +142,31 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                       "ui.panel.config.matter.open_commissioning_window.prevent_misuse_description"
                     )}
                   </p>
+                `}
+        <ha-dialog-footer slot="footer">
+          ${this._commissionParams
+            ? html`
+                <ha-button slot="primaryAction" @click=${this._copyCode}>
+                  ${this.hass.localize(
+                    "ui.panel.config.matter.open_commissioning_window.copy_code"
+                  )}
+                </ha-button>
+              `
+            : this._status === "started" || this._status === "failed"
+              ? html`
+                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                    ${this.hass.localize("ui.common.close")}
+                  </ha-button>
+                `
+              : html`
                   <ha-button slot="primaryAction" @click=${this._start}>
                     ${this.hass.localize(
                       "ui.panel.config.matter.open_commissioning_window.start_commissioning"
                     )}
                   </ha-button>
                 `}
-      </ha-dialog>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -186,6 +195,10 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.device_id = undefined;
     this._status = undefined;
     this._commissionParams = undefined;

src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts

@@ -4,11 +4,12 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-list";
 import "../../../../../components/ha-button";
+import "../../../../../components/ha-dialog-footer";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-wa-dialog";
 import { pingMatterNode } from "../../../../../data/matter";
 import { haStyle, haStyleDialog } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -28,8 +29,11 @@ class DialogMatterPingNode extends LitElement {
     success: boolean,
   ][];
 
+  @state() private _open = false;
+
   public async showDialog(params: MatterPingNodeDialogParams): Promise<void> {
     this.device_id = params.device_id;
+    this._open = true;
   }
 
   private async _copyIpToClipboard(ev) {
@@ -46,13 +50,13 @@ class DialogMatterPingNode extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.matter.ping_node.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.matter.ping_node.title"
         )}
+        @closed=${this._dialogClosed}
       >
         ${this._status === "failed"
           ? html`
@@ -71,9 +75,6 @@ class DialogMatterPingNode extends LitElement {
                   </p>
                 </div>
               </div>
-              <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
-              </ha-button>
             `
           : this._pingResultEntries
             ? html`
@@ -98,9 +99,6 @@ class DialogMatterPingNode extends LitElement {
                       </ha-list-item>`
                   )}
                 </ha-list>
-                <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                  ${this.hass.localize("ui.common.close")}
-                </ha-button>
               `
             : this._status === "started"
               ? html`
@@ -116,9 +114,6 @@ class DialogMatterPingNode extends LitElement {
                       </p>
                     </div>
                   </div>
-                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                    ${this.hass.localize("ui.common.close")}
-                  </ha-button>
                 `
               : html`
                   <p>
@@ -133,13 +128,25 @@ class DialogMatterPingNode extends LitElement {
                       )}
                     </em>
                   </p>
-                  <ha-button slot="primaryAction" @click=${this._startPing}>
-                    ${this.hass.localize(
-                      "ui.panel.config.matter.ping_node.start_ping"
-                    )}
-                  </ha-button>
                 `}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${this._status === "failed" ||
+          this._pingResultEntries ||
+          this._status === "started"
+            ? html`
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                  ${this.hass.localize("ui.common.close")}
+                </ha-button>
+              `
+            : html`
+                <ha-button slot="primaryAction" @click=${this._startPing}>
+                  ${this.hass.localize(
+                    "ui.panel.config.matter.ping_node.start_ping"
+                  )}
+                </ha-button>
+              `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -162,6 +169,10 @@ class DialogMatterPingNode extends LitElement {
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.device_id = undefined;
     this._status = undefined;
     this._pingResultEntries = undefined;

src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts

@@ -5,7 +5,8 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-button";
 import "../../../../../components/ha-spinner";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-dialog-footer";
+import "../../../../../components/ha-wa-dialog";
 import { interviewMatterNode } from "../../../../../data/matter";
 import { haStyleDialog } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -19,10 +20,13 @@ class DialogMatterReinterviewNode extends LitElement {
 
   @state() private _status?: string;
 
+  @state() private _open = false;
+
   public async showDialog(
     params: MatterReinterviewNodeDialogParams
   ): Promise<void> {
     this.device_id = params.device_id;
+    this._open = true;
   }
 
   protected render() {
@@ -31,13 +35,13 @@ class DialogMatterReinterviewNode extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.matter.reinterview_node.title")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.matter.reinterview_node.title"
         )}
+        @closed=${this._dialogClosed}
       >
         ${!this._status
           ? html`
@@ -53,11 +57,6 @@ class DialogMatterReinterviewNode extends LitElement {
                   )}
                 </em>
               </p>
-              <ha-button slot="primaryAction" @click=${this._startReinterview}>
-                ${this.hass.localize(
-                  "ui.panel.config.matter.reinterview_node.start_reinterview"
-                )}
-              </ha-button>
             `
           : this._status === "started"
             ? html`
@@ -78,9 +77,6 @@ class DialogMatterReinterviewNode extends LitElement {
                     </p>
                   </div>
                 </div>
-                <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                  ${this.hass.localize("ui.common.close")}
-                </ha-button>
               `
             : this._status === "failed"
               ? html`
@@ -97,9 +93,6 @@ class DialogMatterReinterviewNode extends LitElement {
                       </p>
                     </div>
                   </div>
-                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                    ${this.hass.localize("ui.common.close")}
-                  </ha-button>
                 `
               : this._status === "finished"
                 ? html`
@@ -116,12 +109,27 @@ class DialogMatterReinterviewNode extends LitElement {
                         </p>
                       </div>
                     </div>
-                    <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                      ${this.hass.localize("ui.common.close")}
-                    </ha-button>
                   `
                 : nothing}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          ${!this._status
+            ? html`
+                <ha-button
+                  slot="primaryAction"
+                  @click=${this._startReinterview}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.matter.reinterview_node.start_reinterview"
+                  )}
+                </ha-button>
+              `
+            : html`
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                  ${this.hass.localize("ui.common.close")}
+                </ha-button>
+              `}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -139,6 +147,10 @@ class DialogMatterReinterviewNode extends LitElement {
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this.device_id = undefined;
     this._status = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });