Migrate config-developer-tools dialog(s) to wa

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

@@ -30,7 +30,6 @@ 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,7 +6,8 @@ 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";
+import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-form/ha-form";
 import "../../../../components/ha-icon-next";
@@ -41,6 +42,8 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
 
   @state() private _params?: DialogStatisticsAdjustSumParams;
 
+  @state() private _open = false;
+
   @state() private _busy = false;
 
   @state() private _moment?: string;
@@ -71,6 +74,7 @@ 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();
@@ -80,6 +84,11 @@ 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;
@@ -97,25 +106,59 @@ 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-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        @closed=${this.closeDialog}
-        .heading=${this.hass.localize(
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
           "ui.panel.config.developer-tools.tabs.statistics.fix_issue.adjust_sum.title"
         )}
+        @closed=${this._dialogClosed}
       >
         ${content}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">${footer}</ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -196,18 +239,6 @@ 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>
     `;
   }
 
@@ -285,24 +316,6 @@ 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
-      >
     `;
   }
 
@@ -492,27 +505,6 @@ 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 {

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

@@ -2,7 +2,8 @@ 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";
+import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
@@ -21,20 +22,24 @@ 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._cancel();
+    this._open = false;
   }
 
-  private _closeDialog(): void {
+  private _dialogClosed(): void {
     this._params = undefined;
     this._action = undefined;
+    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -44,14 +49,13 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        @closed=${this._closeDialog}
-        .heading=${this.hass.localize(
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
           "ui.panel.config.developer-tools.tabs.statistics.fix_issue.units_changed.title"
         )}
+        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize(
@@ -91,7 +95,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
             name="action"
             .checked=${this._action === "update"}
             @change=${this._handleActionChanged}
-            dialogInitialFocus
+            autofocus
           ></ha-radio>
         </ha-formfield>
         <ha-formfield
@@ -107,19 +111,21 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
           ></ha-radio>
         </ha-formfield>
 
-        <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>
+        <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>
     `;
   }
 
@@ -129,7 +135,7 @@ export class DialogStatisticsFixUnitsChanged extends LitElement {
 
   private _cancel(): void {
     this._params?.cancelCallback!();
-    this._closeDialog();
+    this.closeDialog();
   }
 
   private async _fixIssue(): Promise<void> {
@@ -144,7 +150,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,7 +3,8 @@ 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";
+import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-spinner";
 import { clearStatistics, getStatisticLabel } from "../../../../data/recorder";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
@@ -18,19 +19,23 @@ 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._cancel();
+    this._open = false;
   }
 
-  private _closeDialog(): void {
+  private _dialogClosed(): void {
     this._params = undefined;
     this._clearing = false;
+    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -42,14 +47,13 @@ export class DialogStatisticsFix extends LitElement {
     const issue = this._params.issue;
 
     return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        @closed=${this._closeDialog}
-        .heading=${this.hass.localize(
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
           `ui.panel.config.developer-tools.tabs.statistics.fix_issue.${issue.type}.title`
         )}
+        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize(
@@ -147,33 +151,36 @@ export class DialogStatisticsFix extends LitElement {
                   : nothing}
         </p>
 
-        ${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>
+        <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>
     `;
   }
 
   private _cancel(): void {
     this._params?.cancelCallback!();
-    this._closeDialog();
+    this.closeDialog();
   }
 
   private async _clearStatistics(): Promise<void> {
@@ -200,7 +207,7 @@ export class DialogStatisticsFix extends LitElement {
     } finally {
       this._clearing = false;
       this._params?.fixedCallback!();
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 

src/panels/config/users/dialog-add-user.ts

@@ -1,17 +1,16 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-dialog-footer";
+import "../../../components/ha-spinner";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
 import "../../../components/ha-textfield";
 import type { HaTextField } from "../../../components/ha-textfield";
-import "../../../components/ha-wa-dialog";
 import { createAuthForUser } from "../../../data/auth";
 import type { User } from "../../../data/user";
 import {
@@ -36,8 +35,6 @@ export class DialogAddUser extends LitElement {
 
   @state() private _params?: AddUserDialogParams;
 
-  @state() private _open = false;
-
   @state() private _name?: string;
 
   @state() private _username?: string;
@@ -69,8 +66,6 @@ export class DialogAddUser extends LitElement {
     } else {
       this._allowChangeName = true;
     }
-
-    this._open = true;
   }
 
   protected firstUpdated(changedProperties: PropertyValues) {
@@ -88,14 +83,15 @@ export class DialogAddUser extends LitElement {
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          "ui.panel.config.users.add_user.caption"
+      <ha-dialog
+        open
+        @closed=${this._close}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.users.add_user.caption")
         )}
-        width="medium"
-        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
@@ -113,7 +109,7 @@ export class DialogAddUser extends LitElement {
                 )}
                 @input=${this._handleValueChanged}
                 @blur=${this._maybePopulateUsername}
-                autofocus
+                dialogInitialFocus
               ></ha-textfield>`
             : ""}
           <ha-textfield
@@ -126,7 +122,7 @@ export class DialogAddUser extends LitElement {
             required
             @input=${this._handleValueChanged}
             .validationMessage=${this.hass.localize("ui.common.error_required")}
-            ?autofocus=${!this._allowChangeName}
+            dialogInitialFocus
           ></ha-textfield>
 
           <ha-password-field
@@ -195,37 +191,30 @@ export class DialogAddUser extends LitElement {
             : nothing}
         </div>
 
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this._close}
-          >
-            ${this.hass!.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            slot="primaryAction"
-            .disabled=${!this._name ||
-            !this._username ||
-            !this._password ||
-            this._password !== this._passwordConfirm}
-            @click=${this._createUser}
-            .loading=${this._loading}
-          >
-            ${this.hass.localize("ui.panel.config.users.add_user.create")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          slot="primaryAction"
+          appearance="plain"
+          @click=${this._close}
+        >
+          ${this.hass!.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          slot="primaryAction"
+          .disabled=${!this._name ||
+          !this._username ||
+          !this._password ||
+          this._password !== this._passwordConfirm}
+          @click=${this._createUser}
+          .loading=${this._loading}
+        >
+          ${this.hass.localize("ui.panel.config.users.add_user.create")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
   private _close() {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   private _maybePopulateUsername() {
@@ -308,7 +297,8 @@ export class DialogAddUser extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-wa-dialog {
+        ha-dialog {
+          --mdc-dialog-max-width: 500px;
           --dialog-z-index: 10;
         }
         .row {

src/panels/config/users/dialog-admin-change-password.ts

@@ -3,12 +3,11 @@ import { css, 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 { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
 import "../../../components/ha-textfield";
 import "../../../components/ha-button";
-import "../../../components/ha-wa-dialog";
 import { adminChangePassword } from "../../../data/auth";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -49,8 +48,6 @@ class DialogAdminChangePassword extends LitElement {
 
   @state() private _params?: AdminChangePasswordDialogParams;
 
-  @state() private _open = false;
-
   @state() private _userId?: string;
 
   @state() private _data?: FormData;
@@ -64,24 +61,13 @@ class DialogAdminChangePassword extends LitElement {
   public showDialog(params: AdminChangePasswordDialogParams): void {
     this._params = params;
     this._userId = params.userId;
-    this._data = undefined;
-    this._error = undefined;
-    this._submitting = false;
-    this._success = false;
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
-    this._userId = undefined;
     this._data = undefined;
     this._submitting = false;
     this._success = false;
-    this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -118,13 +104,15 @@ class DialogAdminChangePassword extends LitElement {
     );
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          "ui.panel.config.users.change_password.caption"
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.users.change_password.caption")
         )}
-        @closed=${this._dialogClosed}
       >
         ${this._success
           ? html`
@@ -133,15 +121,12 @@ class DialogAdminChangePassword extends LitElement {
                   "ui.panel.config.users.change_password.password_changed"
                 )}
               </p>
-              <ha-dialog-footer slot="footer">
-                <ha-button slot="primaryAction" @click=${this.closeDialog}>
-                  ${this.hass.localize("ui.common.ok")}
-                </ha-button>
-              </ha-dialog-footer>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.common.ok")}
+              </ha-button>
             `
           : html`
               <ha-form
-                autofocus
                 .hass=${this.hass}
                 .data=${this._data}
                 .error=${this._error}
@@ -151,26 +136,24 @@ class DialogAdminChangePassword extends LitElement {
                 @value-changed=${this._valueChanged}
                 .disabled=${this._submitting}
               ></ha-form>
-              <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._changePassword}
-                  .disabled=${this._submitting || !canSubmit}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.users.change_password.change"
-                  )}
-                </ha-button>
-              </ha-dialog-footer>
+              <ha-button
+                appearance="plain"
+                slot="primaryAction"
+                @click=${this.closeDialog}
+              >
+                ${this.hass.localize("ui.common.cancel")}
+              </ha-button>
+              <ha-button
+                slot="primaryAction"
+                @click=${this._changePassword}
+                .disabled=${this._submitting || !canSubmit}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.users.change_password.change"
+                )}
+              </ha-button>
             `}
-      </ha-wa-dialog>
+      </ha-dialog>
     `;
   }
 

src/panels/config/users/dialog-user-detail.ts

@@ -2,17 +2,15 @@ import { mdiPencil } from "@mdi/js";
 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-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-label";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import "../../../components/ha-textfield";
-import "../../../components/ha-wa-dialog";
 import { adminChangeUsername } from "../../../data/auth";
 import {
   computeUserBadges,
@@ -44,8 +42,6 @@ class DialogUserDetail extends LitElement {
 
   @state() private _params?: UserDetailDialogParams;
 
-  @state() private _open = false;
-
   @state() private _submitting = false;
 
   public async showDialog(params: UserDetailDialogParams): Promise<void> {
@@ -55,7 +51,6 @@ class DialogUserDetail extends LitElement {
     this._isAdmin = params.entry.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
     this._localOnly = params.entry.local_only;
     this._isActive = params.entry.is_active;
-    this._open = true;
     await this.updateComplete;
   }
 
@@ -66,12 +61,12 @@ class DialogUserDetail extends LitElement {
     const user = this._params.entry;
     const badges = computeUserBadges(this.hass, user, true);
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${user.name}
-        width="medium"
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        @closed=${this._close}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(this.hass, user.name)}
       >
         <div>
           ${this._error
@@ -99,7 +94,7 @@ class DialogUserDetail extends LitElement {
             ${!user.system_generated
               ? html`
                   <ha-textfield
-                    autofocus
+                    dialogInitialFocus
                     .value=${this._name}
                     @input=${this._nameChanged}
                     .label=${this.hass!.localize(
@@ -224,36 +219,32 @@ class DialogUserDetail extends LitElement {
             : nothing}
         </div>
 
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            variant="danger"
-            appearance="plain"
-            @click=${this._deleteEntry}
-            .disabled=${this._submitting ||
-            user.system_generated ||
-            user.is_owner}
-          >
-            ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
-          </ha-button>
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this._close}
-          >
-            ${this.hass!.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            slot="primaryAction"
-            @click=${this._updateEntry}
-            .disabled=${!this._name ||
-            this._submitting ||
-            user.system_generated}
-          >
-            ${this.hass!.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          slot="secondaryAction"
+          variant="danger"
+          appearance="plain"
+          @click=${this._deleteEntry}
+          .disabled=${this._submitting ||
+          user.system_generated ||
+          user.is_owner}
+        >
+          ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
+        </ha-button>
+        <ha-button
+          slot="primaryAction"
+          appearance="plain"
+          @click=${this._close}
+        >
+          ${this.hass!.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updateEntry}
+          .disabled=${!this._name || this._submitting || user.system_generated}
+        >
+          ${this.hass!.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -297,7 +288,7 @@ class DialogUserDetail extends LitElement {
     this._submitting = true;
     try {
       if (await this._params!.removeEntry()) {
-        this._close();
+        this._params = undefined;
       }
     } finally {
       this._submitting = false;
@@ -369,18 +360,16 @@ class DialogUserDetail extends LitElement {
   }
 
   private _close(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
+        ha-dialog {
+          --mdc-dialog-max-width: 500px;
+        }
         .form {
           padding-top: 16px;
         }