Add multi select to entity registry

src/common/search/search-input.ts

@@ -14,7 +14,7 @@ import "@material/mwc-button";
 
 @customElement("search-input")
 class SearchInput extends LitElement {
-  @property() private filter?: string;
+  @property() public filter?: string;
 
   public focus() {
     this.shadowRoot!.querySelector("paper-input")!.focus();

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

@@ -88,11 +88,11 @@ export class HaDataTable extends BaseElement {
   @property({ type: Array }) public data: DataTableRowData[] = [];
   @property({ type: Boolean }) public selectable = false;
   @property({ type: String }) public id = "id";
+  @property({ type: String }) public filter = "";
   protected mdcFoundation!: MDCDataTableFoundation;
   protected readonly mdcFoundationClass = MDCDataTableFoundation;
   @query(".mdc-data-table") protected mdcRoot!: HTMLElement;
   @queryAll(".mdc-data-table__row") protected rowElements!: HTMLElement[];
-  @query("#header-checkbox") private _headerCheckbox!: HaCheckbox;
   @property({ type: Boolean }) private _filterable = false;
   @property({ type: Boolean }) private _headerChecked = false;
   @property({ type: Boolean }) private _headerIndeterminate = false;
@@ -108,13 +108,19 @@ export class HaDataTable extends BaseElement {
   private _worker: any | undefined;
 
   private _debounceSearch = debounce(
-    (ev) => {
-      this._filter = ev.detail.value;
+    (value: string) => {
+      this._filter = value;
     },
     200,
     false
   );
 
+  public clearSelection(): void {
+    this._headerChecked = false;
+    this._headerIndeterminate = false;
+    this.mdcFoundation.handleHeaderRowCheckboxChange();
+  }
+
   protected firstUpdated() {
     super.firstUpdated();
     this._worker = sortFilterWorker();
@@ -146,6 +152,10 @@ export class HaDataTable extends BaseElement {
       this._sortColumns = clonedColumns;
     }
 
+    if (properties.has("filter")) {
+      this._debounceSearch(this.filter);
+    }
+
     if (
       properties.has("data") ||
       properties.has("columns") ||
@@ -159,14 +169,20 @@ export class HaDataTable extends BaseElement {
 
   protected render() {
     return html`
-      ${this._filterable
-        ? html`
-            <search-input
-              @value-changed=${this._handleSearchChange}
-            ></search-input>
-          `
-        : ""}
       <div class="mdc-data-table">
+        <slot name="header">
+          ${this._filterable
+            ? html`
+                <div
+                  style="border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);"
+                >
+                  <search-input
+                    @value-changed=${this._handleSearchChange}
+                  ></search-input>
+                </div>
+              `
+            : ""}
+        </slot>
         <table class="mdc-data-table__table">
           <thead>
             <tr class="mdc-data-table__header-row">
@@ -178,7 +194,6 @@ export class HaDataTable extends BaseElement {
                       scope="col"
                     >
                       <ha-checkbox
-                        id="header-checkbox"
                         class="mdc-data-table__row-checkbox"
                         @change=${this._handleHeaderRowCheckboxChange}
                         .indeterminate=${this._headerIndeterminate}
@@ -372,9 +387,10 @@ export class HaDataTable extends BaseElement {
     });
   }
 
-  private _handleHeaderRowCheckboxChange() {
-    this._headerChecked = this._headerCheckbox.checked;
-    this._headerIndeterminate = this._headerCheckbox.indeterminate;
+  private _handleHeaderRowCheckboxChange(ev: Event) {
+    const checkbox = ev.target as HaCheckbox;
+    this._headerChecked = checkbox.checked;
+    this._headerIndeterminate = checkbox.indeterminate;
     this.mdcFoundation.handleHeaderRowCheckboxChange();
   }
 
@@ -387,20 +403,26 @@ export class HaDataTable extends BaseElement {
   }
 
   private _handleRowClick(ev: Event) {
-    const rowId = (ev.target as HTMLElement)
-      .closest("tr")!
-      .getAttribute("data-row-id")!;
+    const target = ev.target as HTMLElement;
+    if (target.tagName === "HA-CHECKBOX") {
+      return;
+    }
+    const rowId = target.closest("tr")!.getAttribute("data-row-id")!;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   }
 
   private _setRowChecked(rowId: string, checked: boolean) {
-    if (checked && !this._checkedRows.includes(rowId)) {
+    if (checked) {
+      if (this._checkedRows.includes(rowId)) {
+        return;
+      }
       this._checkedRows = [...this._checkedRows, rowId];
-    } else if (!checked) {
+    } else {
       const index = this._checkedRows.indexOf(rowId);
-      if (index !== -1) {
-        this._checkedRows.splice(index, 1);
+      if (index === -1) {
+        return;
       }
+      this._checkedRows.splice(index, 1);
     }
     fireEvent(this, "selection-changed", {
       id: rowId,
@@ -409,7 +431,7 @@ export class HaDataTable extends BaseElement {
   }
 
   private _handleSearchChange(ev: CustomEvent): void {
-    this._debounceSearch(ev);
+    this._debounceSearch(ev.detail.value);
   }
 
   static get styles(): CSSResult {

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

@@ -31,7 +31,6 @@ import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialo
 class DialogEntityRegistryDetail extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() private _name!: string;
-  @property() private _platform!: string;
   @property() private _entityId!: string;
   @property() private _disabledBy!: string | null;
   @property() private _error?: string;
@@ -45,7 +44,6 @@ class DialogEntityRegistryDetail extends LitElement {
     this._params = params;
     this._error = undefined;
     this._name = this._params.entry.name || "";
-    this._platform = this._params.entry.platform;
     this._origEntityId = this._params.entry.entity_id;
     this._entityId = this._params.entry.entity_id;
     this._disabledBy = this._params.entry.disabled_by;
@@ -143,7 +141,8 @@ class DialogEntityRegistryDetail extends LitElement {
           <mwc-button
             class="warning"
             @click="${this._confirmDeleteEntry}"
-            .disabled=${this._submitting}
+            .disabled=${this._submitting ||
+              !(stateObj && stateObj.attributes.restored)}
           >
             ${this.hass.localize(
               "ui.panel.config.entity_registry.editor.delete"
@@ -201,13 +200,8 @@ class DialogEntityRegistryDetail extends LitElement {
 
   private _confirmDeleteEntry(): void {
     showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.entity_registry.editor.confirm_delete"
-      ),
       text: this.hass.localize(
-        "ui.panel.config.entity_registry.editor.confirm_delete2",
-        "platform",
-        this._platform
+        "ui.panel.config.entity_registry.editor.confirm_delete"
       ),
       confirm: () => this._deleteEntry(),
     });