From 59b66219cb3bf86f5db702edff88b7a8f7ef6b78 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 2 Apr 2024 22:05:03 +0200
Subject: [PATCH] Add clear filter button to individual filters (#20343)

---
 src/components/ha-filter-blueprints.ts      | 24 +++++++++++++--
 src/components/ha-filter-categories.ts      | 20 +++++++++++-
 src/components/ha-filter-devices.ts         | 20 +++++++++++-
 src/components/ha-filter-entities.ts        | 20 +++++++++++-
 src/components/ha-filter-floor-areas.ts     | 25 ++++++++++++---
 src/components/ha-filter-integrations.ts    | 20 +++++++++++-
 src/components/ha-filter-labels.ts          | 21 +++++++++++--
 src/components/ha-filter-states.ts          | 22 +++++++++++--
 src/layouts/hass-tabs-subpage-data-table.ts | 34 ++++++++++++---------
 9 files changed, 176 insertions(+), 30 deletions(-)

diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts
index c20dc197bfc8..2b48e27e5458 100644
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -1,12 +1,13 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { Blueprints, fetchBlueprints } from "../data/blueprint";
 import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
-import { Blueprints, fetchBlueprints } from "../data/blueprint";
+import type { HomeAssistant } from "../types";
 
 @customElement("ha-filter-blueprints")
 export class HaFilterBlueprints extends LitElement {
@@ -35,7 +36,11 @@ export class HaFilterBlueprints extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.blueprint.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._blueprints && this._shouldRender
@@ -128,6 +133,15 @@ export class HaFilterBlueprints extends LitElement {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -147,6 +161,10 @@ export class HaFilterBlueprints extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
index fdaa8d481a1d..40dac92a85c6 100644
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -2,6 +2,7 @@ import { ActionDetail, SelectedDetail } from "@material/mwc-list";
 import {
   mdiDelete,
   mdiDotsVertical,
+  mdiFilterVariantRemove,
   mdiPencil,
   mdiPlus,
   mdiTag,
@@ -68,7 +69,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.category.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -254,6 +259,15 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -274,6 +288,10 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts
index de5f5d9c7850..97f17f9c83b0 100644
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -1,3 +1,4 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -54,7 +55,11 @@ export class HaFilterDevices extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.devices.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -185,6 +190,15 @@ export class HaFilterDevices extends LitElement {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -205,6 +219,10 @@ export class HaFilterDevices extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 15d9b2f39154..585d35a527ad 100644
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -1,3 +1,4 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -55,7 +56,11 @@ export class HaFilterEntities extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.entities.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -204,6 +209,15 @@ export class HaFilterEntities extends LitElement {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -223,6 +237,10 @@ export class HaFilterEntities extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts
index 6960621fb309..ba983b7349aa 100644
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiTextureBox } from "@mdi/js";
+import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -53,9 +53,13 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           ${this.hass.localize("ui.panel.config.areas.caption")}
           ${this.value?.areas?.length || this.value?.floors?.length
             ? html`<div class="badge">
-                ${(this.value?.areas?.length || 0) +
-                (this.value?.floors?.length || 0)}
-              </div>`
+                  ${(this.value?.areas?.length || 0) +
+                  (this.value?.floors?.length || 0)}
+                </div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -238,6 +242,15 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -257,6 +270,10 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index 5f8b1224b5cd..2f8b6f3cf050 100644
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -1,4 +1,5 @@
 import { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -38,7 +39,11 @@ export class HaFilterIntegrations extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.integrations.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._manifests && this._shouldRender
@@ -142,6 +147,15 @@ export class HaFilterIntegrations extends LitElement {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -161,6 +175,10 @@ export class HaFilterIntegrations extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
index c28b3fabe18e..eef52f52de99 100644
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -1,6 +1,6 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiCog } from "@mdi/js";
+import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -53,7 +53,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.labels.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -150,6 +154,15 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -170,6 +183,10 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts
index 71451460b0a8..b3eb0fc1da77 100644
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@@ -1,11 +1,12 @@
 import { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import "./ha-expansion-panel";
 import "./ha-check-list-item";
+import "./ha-expansion-panel";
 import "./ha-icon";
 
 @customElement("ha-filter-states")
@@ -43,7 +44,11 @@ export class HaFilterStates extends LitElement {
         <div slot="header" class="header">
           ${this.label}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._shouldRender
@@ -118,6 +123,15 @@ export class HaFilterStates extends LitElement {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -137,6 +151,10 @@ export class HaFilterStates extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 53a60e37e3db..57036a9ab4c5 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -368,14 +368,16 @@ export class HaTabsSubpageDataTable extends LitElement {
                       "ui.components.subpage-data-table.filters"
                     )}</span
                   >
-                  <ha-icon-button
-                    slot="actionItems"
-                    @click=${this._clearFilters}
-                    .path=${mdiFilterVariantRemove}
-                    .label=${localize(
-                      "ui.components.subpage-data-table.clear_filter"
-                    )}
-                  ></ha-icon-button>
+                  ${this.filters
+                    ? html`<ha-icon-button
+                        slot="actionItems"
+                        @click=${this._clearFilters}
+                        .path=${mdiFilterVariantRemove}
+                        .label=${localize(
+                          "ui.components.subpage-data-table.clear_filter"
+                        )}
+                      ></ha-icon-button>`
+                    : nothing}
                 </ha-dialog-header>
                 <div class="filter-dialog-content">
                   <slot name="filter-pane"></slot></div
@@ -394,13 +396,15 @@ export class HaTabsSubpageDataTable extends LitElement {
                       .path=${mdiFilterVariant}
                     ></ha-svg-icon>
                   </ha-assist-chip>
-                  <ha-icon-button
-                    .path=${mdiFilterVariantRemove}
-                    @click=${this._clearFilters}
-                    .label=${localize(
-                      "ui.components.subpage-data-table.clear_filter"
-                    )}
-                  ></ha-icon-button>
+                  ${this.filters
+                    ? html`<ha-icon-button
+                        .path=${mdiFilterVariantRemove}
+                        @click=${this._clearFilters}
+                        .label=${localize(
+                          "ui.components.subpage-data-table.clear_filter"
+                        )}
+                      ></ha-icon-button>`
+                    : nothing}
                 </div>
                 <div class="pane-content">
                   <slot name="filter-pane"></slot>