Migrate ha-paper-dialog to ha-dialog in system options dialog (#7455)

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -1,5 +1,4 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-input/paper-input";
+import "@material/mwc-button/mwc-button";
 import {
   css,
   CSSResult,
@@ -10,16 +9,16 @@ import {
   internalProperty,
   TemplateResult,
 } from "lit-element";
-import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-dialog";
 import "../../components/ha-circular-progress";
 import "../../components/ha-switch";
 import "../../components/ha-formfield";
+import { fireEvent } from "../../common/dom/fire_event";
 import type { HaSwitch } from "../../components/ha-switch";
 import {
   getConfigEntrySystemOptions,
   updateConfigEntrySystemOptions,
 } from "../../data/config_entries";
-import type { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
@@ -35,9 +34,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
 
   @internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
 
-  @internalProperty() private _loading?: boolean;
+  @internalProperty() private _loading = false;
 
-  @internalProperty() private _submitting?: boolean;
+  @internalProperty() private _submitting = false;
 
   public async showDialog(
     params: ConfigEntrySystemOptionsDialogParams
@@ -51,7 +50,12 @@ class DialogConfigEntrySystemOptions extends LitElement {
     );
     this._loading = false;
     this._disableNewEntities = systemOptions.disable_new_entities;
-    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._error = "";
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
@@ -60,21 +64,17 @@ class DialogConfigEntrySystemOptions extends LitElement {
     }
 
     return html`
-      <ha-paper-dialog
-        with-backdrop
-        opened
-        @opened-changed="${this._openedChanged}"
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${this.hass.localize(
+          "ui.dialogs.config_entry_system_options.title",
+          "integration",
+          this.hass.localize(`component.${this._params.entry.domain}.title`) ||
+            this._params.entry.domain
+        )}
       >
-        <h2>
-          ${this.hass.localize(
-            "ui.dialogs.config_entry_system_options.title",
-            "integration",
-            this.hass.localize(
-              `component.${this._params.entry.domain}.title`
-            ) || this._params.entry.domain
-          )}
-        </h2>
-        <paper-dialog-scrollable>
+        <div>
           ${this._loading
             ? html`
                 <div class="init-spinner">
@@ -112,22 +112,22 @@ class DialogConfigEntrySystemOptions extends LitElement {
                   </ha-formfield>
                 </div>
               `}
-        </paper-dialog-scrollable>
-        ${!this._loading
-          ? html`
-              <div class="paper-dialog-buttons">
-                <mwc-button
-                  @click="${this._updateEntry}"
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass.localize(
-                    "ui.dialogs.config_entry_system_options.update"
-                  )}
-                </mwc-button>
-              </div>
-            `
-          : ""}
-      </ha-paper-dialog>
+        </div>
+        <mwc-button
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+          .disabled=${this._submitting}
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </mwc-button>
+        <mwc-button
+          slot="primaryAction"
+          @click="${this._updateEntry}"
+          .disabled=${this._submitting || this._loading}
+        >
+          ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
+        </mwc-button>
+      </ha-dialog>
     `;
   }
 
@@ -154,19 +154,10 @@ class DialogConfigEntrySystemOptions extends LitElement {
     }
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    if (!(ev.detail as any).value) {
-      this._params = undefined;
-    }
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,
       css`
-        ha-paper-dialog {
-          max-width: 500px;
-        }
         .init-spinner {
           padding: 50px 100px;
           text-align: center;