Show disabled entities for a config_entry by default + number of hidden entities (#7300)

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

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -82,11 +82,11 @@ export class HaConfigDeviceDashboard extends LitElement {
             filterTexts.push(
               `${this.hass.localize(
                 "ui.panel.config.integrations.integration"
-              )} ${integrationName}${
+              )} "${integrationName}${
                 integrationName !== configEntry.title
                   ? `: ${configEntry.title}`
                   : ""
-              }`
+              }"`
             );
             break;
           }

src/panels/config/entities/ha-config-entities.ts

@@ -97,6 +97,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
 
   @internalProperty() private _filter = "";
 
+  @internalProperty() private _numHiddenEntities = 0;
+
   @internalProperty() private _searchParms = new URLSearchParams(
     window.location.search
   );
@@ -118,6 +120,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       filters.forEach((value, key) => {
         switch (key) {
           case "config_entry": {
+            // If we are requested to show the entities for a given config entry,
+            // also show the disabled ones by default.
+            this._showDisabled = true;
+
             if (!entries) {
               this._loadConfigEntries();
               break;
@@ -132,11 +138,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
             filterTexts.push(
               `${this.hass.localize(
                 "ui.panel.config.integrations.integration"
-              )} ${integrationName}${
+              )} "${integrationName}${
                 integrationName !== configEntry.title
                   ? `: ${configEntry.title}`
                   : ""
-              }`
+              }"`
             );
             break;
           }
@@ -262,11 +268,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       showUnavailable: boolean,
       showReadOnly: boolean
     ): EntityRow[] => {
-      if (!showDisabled) {
-        entities = entities.filter((entity) => !entity.disabled_by);
-      }
-
       const result: EntityRow[] = [];
+      // If nothing gets filtered, this is our correct count of entities
+      let startLength = entities.length + stateEntities.length;
 
       entities = showReadOnly ? entities.concat(stateEntities) : entities;
 
@@ -276,10 +280,23 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
             entities = entities.filter(
               (entity) => entity.config_entry_id === value
             );
+            // If we have an active filter and `showReadOnly` is true, the length of `entities` is correct.
+            // If however, the read-only entities were not added before, we need to check how many would
+            // have matched the active filter and add that number to the count.
+            startLength = entities.length;
+            if (!showReadOnly) {
+              startLength += stateEntities.filter(
+                (entity) => entity.config_entry_id === value
+              ).length;
+            }
             break;
         }
       });
 
+      if (!showDisabled) {
+        entities = entities.filter((entity) => !entity.disabled_by);
+      }
+
       for (const entry of entities) {
         const entity = this.hass.states[entry.entity_id];
         const unavailable = entity?.state === UNAVAILABLE;
@@ -315,6 +332,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         });
       }
 
+      this._numHiddenEntities = startLength - result.length;
       return result;
     }
   );
@@ -358,6 +376,16 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       this.hass.localize,
       this._entries
     );
+
+    const entityData = this._filteredEntities(
+      this._entities,
+      this._stateEntities,
+      this._searchParms,
+      this._showDisabled,
+      this._showUnavailable,
+      this._showReadOnly
+    );
+
     const headerToolbar = this._selectedEntities.length
       ? html`
           <p class="selected-txt">
@@ -441,11 +469,32 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                           "ui.panel.config.filtering.filtering_by"
                         )}
                         ${activeFilters.join(", ")}
+                        ${this._numHiddenEntities
+                          ? "(" +
+                            this.hass.localize(
+                              "ui.panel.config.entities.picker.filter.hidden_entities",
+                              "number",
+                              this._numHiddenEntities
+                            ) +
+                            ")"
+                          : ""}
                       </paper-tooltip>
                     </div>`
                   : `${this.hass.localize(
                       "ui.panel.config.filtering.filtering_by"
-                    )} ${activeFilters.join(", ")}`}
+                    )} ${activeFilters.join(", ")}
+                    ${
+                      this._numHiddenEntities
+                        ? "(" +
+                          this.hass.localize(
+                            "ui.panel.config.entities.picker.filter.hidden_entities",
+                            "number",
+                            this._numHiddenEntities
+                          ) +
+                          ")"
+                        : ""
+                    }
+                    `}
                 <mwc-button @click=${this._clearFilter}
                   >${this.hass.localize(
                     "ui.panel.config.filtering.clear"
@@ -453,6 +502,31 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 >
               </div>`
             : ""}
+          ${this._numHiddenEntities && !activeFilters
+            ? html`<div class="active-filters">
+                ${this.narrow
+                  ? html` <div>
+                      <ha-icon icon="hass:filter-variant"></ha-icon>
+                      <paper-tooltip animation-delay="0" position="left">
+                        ${this.hass.localize(
+                          "ui.panel.config.entities.picker.filter.hidden_entities",
+                          "number",
+                          this._numHiddenEntities
+                        )}
+                      </paper-tooltip>
+                    </div>`
+                  : `${this.hass.localize(
+                      "ui.panel.config.entities.picker.filter.hidden_entities",
+                      "number",
+                      this._numHiddenEntities
+                    )}`}
+                <mwc-button @click=${this._showAll}
+                  >${this.hass.localize(
+                    "ui.panel.config.entities.picker.filter.show_all"
+                  )}</mwc-button
+                >
+              </div>`
+            : ""}
           <ha-button-menu corner="BOTTOM_START" multi>
             <mwc-icon-button
               slot="trigger"
@@ -517,14 +591,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .route=${this.route}
         .tabs=${configSections.integrations}
         .columns=${this._columns(this.narrow, this.hass.language)}
-        .data=${this._filteredEntities(
-          this._entities,
-          this._stateEntities,
-          this._searchParms,
-          this._showDisabled,
-          this._showUnavailable,
-          this._showReadOnly
-        )}
+        .data=${entityData}
         .filter=${this._filter}
         selectable
         @selection-changed=${this._handleSelectionChanged}
@@ -724,6 +791,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     navigate(this, window.location.pathname, true);
   }
 
+  private _showAll() {
+    this._showDisabled = true;
+    this._showReadOnly = true;
+    this._showUnavailable = true;
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

src/translations/en.json

@@ -1653,7 +1653,9 @@
               "filter": "Filter",
               "show_disabled": "Show disabled entities",
               "show_unavailable": "Show unavailable entities",
-              "show_readonly": "Show read-only entities"
+              "show_readonly": "Show read-only entities",
+              "hidden_entities": "{number} hidden {number, plural,\n  one {entity}\n  other {entities}\n}",
+              "show_all": "Show all"
             },
             "status": {
               "restored": "Restored",