include entities not in entity registry in config entities

src/components/data-table/ha-data-table.ts

@@ -80,6 +80,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
 
 export interface DataTableRowData {
   [key: string]: any;
+  selectable?: boolean;
 }
 
 @customElement("ha-data-table")
@@ -249,6 +250,7 @@ export class HaDataTable extends BaseElement {
                     data-row-id="${row[this.id]}"
                     @click=${this._handleRowClick}
                     class="mdc-data-table__row"
+                    .selectable=${row.selectable !== false}
                   >
                     ${this.selectable
                       ? html`
@@ -258,6 +260,7 @@ export class HaDataTable extends BaseElement {
                             <ha-checkbox
                               class="mdc-data-table__row-checkbox"
                               @change=${this._handleRowCheckboxChange}
+                              .disabled=${row.selectable === false}
                               .checked=${this._checkedRows.includes(
                                 String(row[this.id])
                               )}
@@ -298,9 +301,12 @@ export class HaDataTable extends BaseElement {
   protected createAdapter(): MDCDataTableAdapter {
     return {
       addClassAtRowIndex: (rowIndex: number, cssClasses: string) => {
+        if (!(this.rowElements[rowIndex] as any).selectable) {
+          return;
+        }
         this.rowElements[rowIndex].classList.add(cssClasses);
       },
-      getRowCount: () => this.data.length,
+      getRowCount: () => this.rowElements.length,
       getRowElements: () => this.rowElements,
       getRowIdAtIndex: (rowIndex: number) => this._getRowIdAtIndex(rowIndex),
       getRowIndexByChildElement: (el: Element) =>
@@ -309,7 +315,7 @@ export class HaDataTable extends BaseElement {
       isCheckboxAtRowIndexChecked: (rowIndex: number) =>
         this._checkedRows.includes(this._getRowIdAtIndex(rowIndex)),
       isHeaderRowCheckboxChecked: () => this._headerChecked,
-      isRowsSelectable: () => true,
+      isRowsSelectable: () => this.selectable,
       notifyRowSelectionChanged: () => undefined,
       notifySelectedAll: () => undefined,
       notifyUnselectedAll: () => undefined,
@@ -332,6 +338,9 @@ export class HaDataTable extends BaseElement {
         this._headerIndeterminate = indeterminate;
       },
       setRowCheckboxCheckedAtIndex: (rowIndex: number, checked: boolean) => {
+        if (!(this.rowElements[rowIndex] as any).selectable) {
+          return;
+        }
         this._setRowChecked(this._getRowIdAtIndex(rowIndex), checked);
       },
     };
@@ -516,6 +525,7 @@ export class HaDataTable extends BaseElement {
         padding-left: 16px;
         /* @noflip */
         padding-right: 0;
+        width: 40px;
       }
       [dir="rtl"] .mdc-data-table__header-cell--checkbox,
       .mdc-data-table__header-cell--checkbox[dir="rtl"],
@@ -558,6 +568,7 @@ export class HaDataTable extends BaseElement {
       .mdc-data-table__cell--icon {
         color: var(--secondary-text-color);
         text-align: center;
+        width: 24px;
       }
 
       .mdc-data-table__header-cell {

src/components/ha-related-items.ts

@@ -68,6 +68,13 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
     if (!this._related) {
       return html``;
     }
+    if (Object.keys(this._related).length === 0) {
+      return html`
+        <p>
+          ${this.hass.localize("ui.components.related-items.no_related_found")}
+        </p>
+      `;
+    }
     return html`
       ${this._related.config_entry && this._entries
         ? this._related.config_entry.map((relatedConfigEntryId) => {

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -20,6 +20,7 @@ import "../../common/search/search-input";
 import { styleMap } from "lit-html/directives/style-map";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { classMap } from "lit-html/directives/class-map";
 
 interface HandlerObj {
   name: string;
@@ -69,7 +70,10 @@ class StepFlowPickHandler extends LitElement {
         .filter=${this.filter}
         @value-changed=${this._filterChanged}
       ></search-input>
-      <div style=${styleMap({ width: `${this._width}px` })}>
+      <div
+        style=${styleMap({ width: `${this._width}px` })}
+        class=${classMap({ advanced: Boolean(this.showAdvanced) })}
+      >
         ${handlers.map(
           (handler: HandlerObj) =>
             html`
@@ -143,6 +147,14 @@ class StepFlowPickHandler extends LitElement {
           overflow: auto;
           max-height: 600px;
         }
+        @media all and (max-height: 1px) {
+          div {
+            max-height: calc(100vh - 205px);
+          }
+          div.advanced {
+            max-height: calc(100vh - 300px);
+          }
+        }
         paper-item {
           cursor: pointer;
         }

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -152,6 +152,7 @@ export class HaDeviceEntitiesCard extends LitElement {
     const entry = (ev.currentTarget! as any).entry;
     showEntityRegistryDetailDialog(this, {
       entry,
+      entity_id: entry.entity_id,
     });
   }
 

src/panels/config/entities/dialog-entity-registry-detail.ts

@@ -51,7 +51,8 @@ export class DialogEntityRegistryDetail extends LitElement {
       return html``;
     }
     const entry = this._params.entry;
-    const stateObj: HassEntity | undefined = this.hass.states[entry.entity_id];
+    const entityId = this._params.entity_id;
+    const stateObj: HassEntity | undefined = this.hass.states[entityId];
 
     return html`
       <ha-paper-dialog
@@ -68,9 +69,7 @@ export class DialogEntityRegistryDetail extends LitElement {
             dialog-dismiss
           ></paper-icon-button>
           <div class="main-title" main-title>
-            ${stateObj
-              ? computeStateName(stateObj)
-              : entry.name || entry.entity_id}
+            ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
           </div>
           ${stateObj
             ? html`
@@ -99,20 +98,28 @@ export class DialogEntityRegistryDetail extends LitElement {
         </paper-tabs>
         ${cache(
           this._curTab === "tab-settings"
-            ? html`
-                <entity-registry-settings
-                  .hass=${this.hass}
-                  .entry=${entry}
-                  .dialogElement=${this._dialog}
-                  @close-dialog=${this._closeDialog}
-                ></entity-registry-settings>
-              `
+            ? entry
+              ? html`
+                  <entity-registry-settings
+                    .hass=${this.hass}
+                    .entry=${entry}
+                    .dialogElement=${this._dialog}
+                    @close-dialog=${this._closeDialog}
+                  ></entity-registry-settings>
+                `
+              : html`
+                  <paper-dialog-scrollable>
+                    ${this.hass.localize(
+                      "ui.dialogs.entity_registry.no_unique_id"
+                    )}
+                  </paper-dialog-scrollable>
+                `
             : this._curTab === "tab-related"
             ? html`
                 <paper-dialog-scrollable>
                   <ha-related-items
                     .hass=${this.hass}
-                    .itemId=${entry.entity_id}
+                    .itemId=${entityId}
                     itemType="entity"
                     @close-dialog=${this._closeDialog}
                   ></ha-related-items>
@@ -139,7 +146,7 @@ export class DialogEntityRegistryDetail extends LitElement {
 
   private _openMoreInfo(): void {
     fireEvent(this, "hass-more-info", {
-      entityId: this._params!.entry.entity_id,
+      entityId: this._params!.entity_id,
     });
     this._params = undefined;
   }