Convert suggest-card dialog to ha-dialog (#10000)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -55,6 +55,7 @@ export class HuiCreateDialogCard
   public closeDialog(): boolean {
     this._params = undefined;
     this._currTabIndex = 0;
+    this._selectedEntities = [];
     fireEvent(this, "dialog-closed", { dialog: this.localName });
     return true;
   }

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -1,7 +1,8 @@
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import deepFreeze from "deep-freeze";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
@@ -47,16 +48,26 @@ export class HuiDialogSuggestCard extends LitElement {
     }
   }
 
+  public closeDialog(): void {
+    this._params = undefined;
+    this._cardConfig = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
     }
     return html`
-      <ha-paper-dialog with-backdrop opened>
-        <h2>
-          ${this.hass!.localize("ui.panel.lovelace.editor.suggest_card.header")}
-        </h2>
-        <paper-dialog-scrollable>
+      <ha-dialog
+        open
+        scrimClickAction
+        @closed=${this.closeDialog}
+        .heading=${this.hass!.localize(
+          "ui.panel.lovelace.editor.suggest_card.header"
+        )}
+      >
+        <div>
           ${this._cardConfig
             ? html`
                 <div class="element-preview">
@@ -80,37 +91,39 @@ export class HuiDialogSuggestCard extends LitElement {
                 </div>
               `
             : ""}
-        </paper-dialog-scrollable>
-        <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._close}">
-            ${this._params.yaml
-              ? this.hass!.localize("ui.common.close")
-              : this.hass!.localize("ui.common.cancel")}
-          </mwc-button>
-          ${!this._params.yaml
-            ? html`
-                <mwc-button @click="${this._pickCard}"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.suggest_card.create_own"
-                  )}</mwc-button
-                >
-                <mwc-button ?disabled="${this._saving}" @click="${this._save}">
-                  ${this._saving
-                    ? html`
-                        <ha-circular-progress
-                          active
-                          title="Saving"
-                          size="small"
-                        ></ha-circular-progress>
-                      `
-                    : this.hass!.localize(
-                        "ui.panel.lovelace.editor.suggest_card.add"
-                      )}
-                </mwc-button>
-              `
-            : ""}
         </div>
-      </ha-paper-dialog>
+        <mwc-button slot="secondaryAction" @click="${this.closeDialog}">
+          ${this._params.yaml
+            ? this.hass!.localize("ui.common.close")
+            : this.hass!.localize("ui.common.cancel")}
+        </mwc-button>
+        ${!this._params.yaml
+          ? html`
+              <mwc-button slot="primaryAction" @click="${this._pickCard}"
+                >${this.hass!.localize(
+                  "ui.panel.lovelace.editor.suggest_card.create_own"
+                )}</mwc-button
+              >
+              <mwc-button
+                slot="primaryAction"
+                .disabled="${this._saving}"
+                @click="${this._save}"
+              >
+                ${this._saving
+                  ? html`
+                      <ha-circular-progress
+                        active
+                        title="Saving"
+                        size="small"
+                      ></ha-circular-progress>
+                    `
+                  : this.hass!.localize(
+                      "ui.panel.lovelace.editor.suggest_card.add"
+                    )}
+              </mwc-button>
+            `
+          : ""}
+      </ha-dialog>
     `;
   }
 
@@ -120,17 +133,17 @@ export class HuiDialogSuggestCard extends LitElement {
       css`
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
-          ha-paper-dialog {
+          ha-dialog {
             max-height: 100%;
             height: 100%;
           }
         }
         @media all and (min-width: 850px) {
-          ha-paper-dialog {
+          ha-dialog {
             width: 845px;
           }
         }
-        ha-paper-dialog {
+        ha-dialog {
           max-width: 845px;
           --dialog-z-index: 5;
         }
@@ -154,11 +167,6 @@ export class HuiDialogSuggestCard extends LitElement {
     ];
   }
 
-  private _close(): void {
-    this._params = undefined;
-    this._cardConfig = undefined;
-  }
-
   private _pickCard(): void {
     if (
       !this._params?.lovelaceConfig ||
@@ -174,7 +182,7 @@ export class HuiDialogSuggestCard extends LitElement {
       path: this._params!.path,
       entities: this._params!.entities,
     });
-    this._close();
+    this.closeDialog();
   }
 
   private async _save(): Promise<void> {
@@ -196,7 +204,7 @@ export class HuiDialogSuggestCard extends LitElement {
     );
     this._saving = false;
     showSaveSuccessToast(this, this.hass);
-    this._close();
+    this.closeDialog();
   }
 }
 

src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts

@@ -68,9 +68,7 @@ export class HuiEntityPickerTable extends LitElement {
           <div @click=${this._handleEntityClicked} style="cursor: pointer;">
             ${name}
             ${narrow
-              ? html`
-                  <div class="secondary">${entity.stateObj.entity_id}</div>
-                `
+              ? html` <div class="secondary">${entity.entity_id}</div> `
               : ""}
           </div>
         `,

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -89,9 +89,9 @@ export class HuiUnusedEntities extends LitElement {
               icon: "",
               entity_id: entity,
               stateObj,
-              name: computeStateName(stateObj),
+              name: stateObj ? computeStateName(stateObj) : "Unavailable",
               domain: computeDomain(entity),
-              last_changed: stateObj!.last_changed,
+              last_changed: stateObj?.last_changed,
             };
           }) as DataTableRowData[]}
           @selected-changed=${this._handleSelectedChanged}