Migrate entity settings dialog (#6349)

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -1,8 +1,9 @@
 import "@material/mwc-button";
+import "@material/mwc-icon-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "../../components/ha-icon-button";
 import "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
 import { computeStateName } from "../../common/entity/compute_state_name";

src/panels/config/entities/dialog-entity-editor.ts

@@ -1,8 +1,7 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "../../../components/ha-icon-button";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
+import "@material/mwc-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -11,27 +10,26 @@ import {
   html,
   LitElement,
   property,
-  query,
   TemplateResult,
 } from "lit-element";
 import { cache } from "lit-html/directives/cache";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import "../../../components/dialog/ha-paper-dialog";
+import "../../../components/ha-dialog";
-import type { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
+import "../../../components/ha-svg-icon";
 import "../../../components/ha-related-items";
 import {
   EntityRegistryEntry,
   ExtEntityRegistryEntry,
   getExtendedEntityRegistryEntry,
 } from "../../../data/entity_registry";
-import type { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { PLATFORMS_WITH_SETTINGS_TAB } from "./const";
 import "./entity-registry-settings";
 import type { EntityRegistryDetailDialogParams } from "./show-dialog-entity-editor";
+import { mdiClose, mdiTune } from "@mdi/js";
 
 interface Tabs {
   [key: string]: Tab;
@@ -59,8 +57,6 @@ export class DialogEntityEditor extends LitElement {
 
   @property() private _settingsElementTag?: string;
 
-  @query("ha-paper-dialog") private _dialog!: HaPaperDialog;
-
   private _curTabIndex = 0;
 
   public async showDialog(
@@ -87,38 +83,38 @@ export class DialogEntityEditor extends LitElement {
     const stateObj: HassEntity | undefined = this.hass.states[entityId];
 
     return html`
-      <ha-paper-dialog
+      <ha-dialog
-        with-backdrop
+        open
-        opened
+        .heading=${true}
-        @opened-changed=${this._openedChanged}
+        hideActions
+        @closed=${this.closeDialog}
         @close-dialog=${this.closeDialog}
       >
+        <div slot="heading">
           <app-toolbar>
-          <ha-icon-button
+            <mwc-icon-button
-            aria-label=${this.hass.localize(
+              .label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
-              "ui.dialogs.entity_registry.dismiss"
+              dialogAction="cancel"
-            )}
+            >
-            icon="hass:close"
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            dialog-dismiss
+            </mwc-icon-button>
-          ></ha-icon-button>
             <div class="main-title" main-title>
               ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
             </div>
             ${stateObj
               ? html`
-                <ha-icon-button
+                  <mwc-icon-button
-                  aria-label=${this.hass.localize(
+                    .label=${this.hass.localize(
                       "ui.dialogs.entity_registry.control"
                     )}
-                  icon="hass:tune"
                     @click=${this._openMoreInfo}
-                ></ha-icon-button>
+                  >
+                    <ha-svg-icon .path=${mdiTune}></ha-svg-icon>
+                  </mwc-icon-button>
                 `
               : ""}
           </app-toolbar>
           <paper-tabs
-          scrollable
-          hide-scroll-buttons
             .selected=${this._curTabIndex}
             @selected-item-changed=${this._handleTabSelected}
           >
@@ -136,40 +132,46 @@ export class DialogEntityEditor extends LitElement {
               ${this.hass.localize("ui.dialogs.entity_registry.related")}
             </paper-tab>
           </paper-tabs>
-        ${cache(
+        </div>
-          this._curTab === "tab-settings"
+        <div class="wrapper">
-            ? entry
+          ${cache(this._renderTab())}
-              ? this._settingsElementTag
+        </div>
-                ? html`
+      </ha-dialog>
+    `;
+  }
+
+  private _renderTab() {
+    switch (this._curTab) {
+      case "tab-settings":
+        if (this._entry) {
+          if (this._settingsElementTag) {
+            return html`
               ${dynamicElement(this._settingsElementTag, {
                 hass: this.hass,
-                      entry,
+                entry: this._entry,
-                      entityId,
+                entityId: this._params!.entity_id,
-                      dialogElement: this._dialog,
               })}
-                  `
+            `;
-                : ""
+          }
-              : html`
+          return html``;
-                  <paper-dialog-scrollable>
+        }
-                    ${this.hass.localize(
+        return html`
-                      "ui.dialogs.entity_registry.no_unique_id"
+          <div class="content">
-                    )}
+            ${this.hass.localize("ui.dialogs.entity_registry.no_unique_id")}
-                  </paper-dialog-scrollable>
+          </div>
-                `
+        `;
-            : this._curTab === "tab-related"
+      case "tab-related":
-            ? html`
+        return html`
-                <paper-dialog-scrollable>
           <ha-related-items
+            class="content"
             .hass=${this.hass}
-                    .itemId=${entityId}
+            .itemId=${this._params!.entity_id}
             itemType="entity"
           ></ha-related-items>
-                </paper-dialog-scrollable>
-              `
-            : html``
-        )}
-      </ha-paper-dialog>
         `;
+      default:
+        return html``;
+    }
   }
 
   private async _getEntityReg() {
@@ -189,12 +191,6 @@ export class DialogEntityEditor extends LitElement {
       return;
     }
     this._curTab = ev.detail.value.id;
-    this._resizeDialog();
-  }
-
-  private async _resizeDialog(): Promise<void> {
-    await this.updateComplete;
-    fireEvent(this._dialog as HTMLElement, "iron-resize");
   }
 
   private async _loadPlatformSettingTabs(): Promise<void> {
@@ -219,12 +215,6 @@ export class DialogEntityEditor extends LitElement {
     this.closeDialog();
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    if (!(ev.detail as any).value) {
-      this._params = undefined;
-    }
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,
@@ -249,16 +239,23 @@ export class DialogEntityEditor extends LitElement {
           text-overflow: ellipsis;
         }
 
+        ha-dialog {
+          --dialog-content-padding: 0;
+        }
+
         @media all and (min-width: 451px) and (min-height: 501px) {
           .main-title {
             pointer-events: auto;
             cursor: default;
           }
+          .wrapper {
+            width: 400px;
+          }
         }
 
-        ha-paper-dialog {
+        .content {
-          width: 450px;
+          display: block;
-          max-height: none !important;
+          padding: 20px 24px;
         }
 
         /* overrule the ha-style-dialog max-height on small screens */
@@ -267,28 +264,6 @@ export class DialogEntityEditor extends LitElement {
             background-color: var(--app-header-background-color);
             color: var(--app-header-text-color, white);
           }
-          ha-paper-dialog {
-            height: 100%;
-            max-height: 100% !important;
-            width: 100% !important;
-            border-radius: 0px;
-            position: fixed !important;
-            margin: 0;
-          }
-          ha-paper-dialog::before {
-            content: "";
-            position: fixed;
-            z-index: -1;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            bottom: 0px;
-            background-color: inherit;
-          }
-        }
-
-        paper-dialog-scrollable {
-          padding-bottom: 16px;
         }
 
         mwc-button.warning {

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -12,7 +12,6 @@ import {
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { HaPaperDialog } from "../../../../../components/dialog/ha-paper-dialog";
 import {
   ExtEntityRegistryEntry,
   removeEntityRegistryEntry,
@@ -87,8 +86,6 @@ export class EntityRegistrySettingsHelper extends LitElement {
 
   @property() public entry!: ExtEntityRegistryEntry;
 
-  @property() public dialogElement!: HaPaperDialog;
-
   @property() private _error?: string;
 
   @property() private _item?: Helper | null;
@@ -120,7 +117,6 @@ export class EntityRegistrySettingsHelper extends LitElement {
     }
     const stateObj = this.hass.states[this.entry.entity_id];
     return html`
-      <paper-dialog-scrollable .dialogElement=${this.dialogElement}>
       ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
       <div class="form">
         ${!this._componentLoaded
@@ -132,20 +128,19 @@ export class EntityRegistrySettingsHelper extends LitElement {
           : this._item === null
           ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
           : html`
-                <div @value-changed=${this._valueChanged}>
+              <span @value-changed=${this._valueChanged}>
                 ${dynamicElement(`ha-${this.entry.platform}-form`, {
                   hass: this.hass,
                   item: this._item,
                   entry: this.entry,
                 })}
-                </div>
+              </span>
             `}
         <ha-registry-basic-editor
           .hass=${this.hass}
           .entry=${this.entry}
         ></ha-registry-basic-editor>
       </div>
-      </paper-dialog-scrollable>
       <div class="buttons">
         <mwc-button
           class="warning"
@@ -173,8 +168,6 @@ export class EntityRegistrySettingsHelper extends LitElement {
   private async _getItem() {
     const items = await HELPERS[this.entry.platform].fetch(this.hass!);
     this._item = items.find((item) => item.id === this.entry.unique_id) || null;
-    await this.updateComplete;
-    fireEvent(this.dialogElement as HTMLElement, "iron-resize");
   }
 
   private async _updateItem(): Promise<void> {
@@ -232,7 +225,7 @@ export class EntityRegistrySettingsHelper extends LitElement {
         padding: 0 !important;
       }
       .form {
-        padding-bottom: 24px;
+        padding: 20px 24px;
       }
       .buttons {
         display: flex;

src/panels/config/entities/entity-registry-settings.ts

@@ -33,8 +33,6 @@ export class EntityRegistrySettings extends LitElement {
 
   @property() public entry!: ExtEntityRegistryEntry;
 
-  @property() public dialogElement!: HTMLElement;
-
   @property() private _name!: string;
 
   @property() private _icon!: string;
@@ -72,7 +70,6 @@ export class EntityRegistrySettings extends LitElement {
       computeDomain(this._entityId.trim()) !==
       computeDomain(this.entry.entity_id);
     return html`
-      <paper-dialog-scrollable .dialogElement=${this.dialogElement}>
       ${!stateObj
         ? html`
             <div>
@@ -87,18 +84,14 @@ export class EntityRegistrySettings extends LitElement {
         <paper-input
           .value=${this._name}
           @value-changed=${this._nameChanged}
-            .label=${this.hass.localize(
+          .label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
-              "ui.dialogs.entity_registry.editor.name"
-            )}
           .placeholder=${this.entry.original_name}
           .disabled=${this._submitting}
         ></paper-input>
         <ha-icon-input
           .value=${this._icon}
           @value-changed=${this._iconChanged}
-            .label=${this.hass.localize(
+          .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
-              "ui.dialogs.entity_registry.editor.icon"
-            )}
           .placeholder=${this.entry.original_icon}
           .disabled=${this._submitting}
           .errorMessage=${this.hass.localize(
@@ -147,7 +140,6 @@ export class EntityRegistrySettings extends LitElement {
           </div>
         </div>
       </div>
-      </paper-dialog-scrollable>
       <div class="buttons">
         <mwc-button
           class="warning"
@@ -237,7 +229,7 @@ export class EntityRegistrySettings extends LitElement {
           padding: 0 !important;
         }
         .form {
-          padding-bottom: 24px;
+          padding: 20px 24px;
         }
         .buttons {
           display: flex;