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,91 +83,97 @@ 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}
       >
-        <app-toolbar>
+        <div slot="heading">
-          <ha-icon-button
+          <app-toolbar>
-            aria-label=${this.hass.localize(
+            <mwc-icon-button
-              "ui.dialogs.entity_registry.dismiss"
+              .label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
-            )}
+              dialogAction="cancel"
-            icon="hass:close"
+            >
-            dialog-dismiss
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-          ></ha-icon-button>
+            </mwc-icon-button>
-          <div class="main-title" main-title>
+            <div class="main-title" main-title>
-            ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
+              ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
-          </div>
+            </div>
-          ${stateObj
+            ${stateObj
-            ? html`
+              ? html`
-                <ha-icon-button
+                  <mwc-icon-button
-                  aria-label=${this.hass.localize(
+                    .label=${this.hass.localize(
-                    "ui.dialogs.entity_registry.control"
+                      "ui.dialogs.entity_registry.control"
-                  )}
-                  icon="hass:tune"
-                  @click=${this._openMoreInfo}
-                ></ha-icon-button>
-              `
-            : ""}
-        </app-toolbar>
-        <paper-tabs
-          scrollable
-          hide-scroll-buttons
-          .selected=${this._curTabIndex}
-          @selected-item-changed=${this._handleTabSelected}
-        >
-          <paper-tab id="tab-settings">
-            ${this.hass.localize("ui.dialogs.entity_registry.settings")}
-          </paper-tab>
-          ${Object.entries(this._extraTabs).map(
-            ([key, tab]) => html`
-              <paper-tab id=${key}>
-                ${this.hass.localize(tab.translationKey) || key}
-              </paper-tab>
-            `
-          )}
-          <paper-tab id="tab-related">
-            ${this.hass.localize("ui.dialogs.entity_registry.related")}
-          </paper-tab>
-        </paper-tabs>
-        ${cache(
-          this._curTab === "tab-settings"
-            ? entry
-              ? this._settingsElementTag
-                ? html`
-                    ${dynamicElement(this._settingsElementTag, {
-                      hass: this.hass,
-                      entry,
-                      entityId,
-                      dialogElement: this._dialog,
-                    })}
-                  `
-                : ""
-              : html`
-                  <paper-dialog-scrollable>
-                    ${this.hass.localize(
-                      "ui.dialogs.entity_registry.no_unique_id"
                     )}
-                  </paper-dialog-scrollable>
+                    @click=${this._openMoreInfo}
+                  >
+                    <ha-svg-icon .path=${mdiTune}></ha-svg-icon>
+                  </mwc-icon-button>
                 `
-            : this._curTab === "tab-related"
+              : ""}
-            ? html`
+          </app-toolbar>
-                <paper-dialog-scrollable>
+          <paper-tabs
-                  <ha-related-items
+            .selected=${this._curTabIndex}
-                    .hass=${this.hass}
+            @selected-item-changed=${this._handleTabSelected}
-                    .itemId=${entityId}
+          >
-                    itemType="entity"
+            <paper-tab id="tab-settings">
-                  ></ha-related-items>
+              ${this.hass.localize("ui.dialogs.entity_registry.settings")}
-                </paper-dialog-scrollable>
+            </paper-tab>
+            ${Object.entries(this._extraTabs).map(
+              ([key, tab]) => html`
+                <paper-tab id=${key}>
+                  ${this.hass.localize(tab.translationKey) || key}
+                </paper-tab>
               `
-            : html``
+            )}
-        )}
+            <paper-tab id="tab-related">
-      </ha-paper-dialog>
+              ${this.hass.localize("ui.dialogs.entity_registry.related")}
+            </paper-tab>
+          </paper-tabs>
+        </div>
+        <div class="wrapper">
+          ${cache(this._renderTab())}
+        </div>
+      </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: this._entry,
+                entityId: this._params!.entity_id,
+              })}
+            `;
+          }
+          return html``;
+        }
+        return html`
+          <div class="content">
+            ${this.hass.localize("ui.dialogs.entity_registry.no_unique_id")}
+          </div>
+        `;
+      case "tab-related":
+        return html`
+          <ha-related-items
+            class="content"
+            .hass=${this.hass}
+            .itemId=${this._params!.entity_id}
+            itemType="entity"
+          ></ha-related-items>
+        `;
+      default:
+        return html``;
+    }
+  }
+
   private async _getEntityReg() {
     try {
       this._entry = await getExtendedEntityRegistryEntry(
@@ -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,32 +117,30 @@ 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> ` : ""}
-        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+      <div class="form">
-        <div class="form">
+        ${!this._componentLoaded
-          ${!this._componentLoaded
+          ? this.hass.localize(
-            ? this.hass.localize(
+              "ui.dialogs.helper_settings.platform_not_loaded",
-                "ui.dialogs.helper_settings.platform_not_loaded",
+              "platform",
-                "platform",
+              this.entry.platform
-                this.entry.platform
+            )
-              )
+          : this._item === null
-            : this._item === null
+          ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
-            ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
+          : html`
-            : html`
+              <span @value-changed=${this._valueChanged}>
-                <div @value-changed=${this._valueChanged}>
+                ${dynamicElement(`ha-${this.entry.platform}-form`, {
-                  ${dynamicElement(`ha-${this.entry.platform}-form`, {
+                  hass: this.hass,
-                    hass: this.hass,
+                  item: this._item,
-                    item: this._item,
+                  entry: this.entry,
-                    entry: this.entry,
+                })}
-                  })}
+              </span>
-                </div>
+            `}
-              `}
+        <ha-registry-basic-editor
-          <ha-registry-basic-editor
+          .hass=${this.hass}
-            .hass=${this.hass}
+          .entry=${this.entry}
-            .entry=${this.entry}
+        ></ha-registry-basic-editor>
-          ></ha-registry-basic-editor>
+      </div>
-        </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,82 +70,76 @@ export class EntityRegistrySettings extends LitElement {
       computeDomain(this._entityId.trim()) !==
       computeDomain(this.entry.entity_id);
     return html`
-      <paper-dialog-scrollable .dialogElement=${this.dialogElement}>
+      ${!stateObj
-        ${!stateObj
+        ? html`
-          ? html`
-              <div>
-                ${this.hass!.localize(
-                  "ui.dialogs.entity_registry.editor.unavailable"
-                )}
-              </div>
-            `
-          : ""}
-        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
-        <div class="form">
-          <paper-input
-            .value=${this._name}
-            @value-changed=${this._nameChanged}
-            .label=${this.hass.localize(
-              "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(
-              "ui.dialogs.entity_registry.editor.icon"
-            )}
-            .placeholder=${this.entry.original_icon}
-            .disabled=${this._submitting}
-            .errorMessage=${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.icon_error"
-            )}
-          ></ha-icon-input>
-          <paper-input
-            .value=${this._entityId}
-            @value-changed=${this._entityIdChanged}
-            .label=${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.entity_id"
-            )}
-            error-message="Domain needs to stay the same"
-            .invalid=${invalidDomainUpdate}
-            .disabled=${this._submitting}
-          ></paper-input>
-          <div class="row">
-            <ha-switch
-              .checked=${!this._disabledBy}
-              @change=${this._disabledByChanged}
-            >
-            </ha-switch>
             <div>
-              <div>
+              ${this.hass!.localize(
-                ${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.unavailable"
-                  "ui.dialogs.entity_registry.editor.enabled_label"
+              )}
-                )}
+            </div>
-              </div>
+          `
-              <div class="secondary">
+        : ""}
-                ${this._disabledBy && this._disabledBy !== "user"
+      ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
-                  ? this.hass.localize(
+      <div class="form">
-                      "ui.dialogs.entity_registry.editor.enabled_cause",
+        <paper-input
-                      "cause",
+          .value=${this._name}
-                      this.hass.localize(
+          @value-changed=${this._nameChanged}
-                        `config_entry.disabled_by.${this._disabledBy}`
+          .label=${this.hass.localize("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("ui.dialogs.entity_registry.editor.icon")}
+          .placeholder=${this.entry.original_icon}
+          .disabled=${this._submitting}
+          .errorMessage=${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.icon_error"
+          )}
+        ></ha-icon-input>
+        <paper-input
+          .value=${this._entityId}
+          @value-changed=${this._entityIdChanged}
+          .label=${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.entity_id"
+          )}
+          error-message="Domain needs to stay the same"
+          .invalid=${invalidDomainUpdate}
+          .disabled=${this._submitting}
+        ></paper-input>
+        <div class="row">
+          <ha-switch
+            .checked=${!this._disabledBy}
+            @change=${this._disabledByChanged}
+          >
+          </ha-switch>
+          <div>
+            <div>
+              ${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.enabled_label"
+              )}
+            </div>
+            <div class="secondary">
+              ${this._disabledBy && this._disabledBy !== "user"
+                ? this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.enabled_cause",
+                    "cause",
+                    this.hass.localize(
+                      `config_entry.disabled_by.${this._disabledBy}`
                     )
-                  : ""}
+                  )
-                ${this.hass.localize(
+                : ""}
-                  "ui.dialogs.entity_registry.editor.enabled_description"
+              ${this.hass.localize(
-                )}
+                "ui.dialogs.entity_registry.editor.enabled_description"
-                <br />${this.hass.localize(
+              )}
-                  "ui.dialogs.entity_registry.editor.note"
+              <br />${this.hass.localize(
-                )}
+                "ui.dialogs.entity_registry.editor.note"
-              </div>
+              )}
             </div>
           </div>
         </div>
-      </paper-dialog-scrollable>
+      </div>
       <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;