Save search filter in session storage (#20973)

* Save search filter in session storage

* Apply suggestions from code review

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/panels/config/automation/ha-automation-picker.ts

@@ -145,6 +145,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
 
   @state() private _filteredAutomations?: string[] | null;
 
+  @storage({
+    storage: "sessionStorage",
+    key: "automation-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @storage({
     storage: "sessionStorage",
     key: "automation-table-filters-full",
@@ -547,6 +555,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           "ui.panel.config.automation.picker.no_automations"
         )}
         @clear-filter=${this._clearFilter}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         hasFab
         clickable
         class=${this.narrow ? "narrow" : ""}
@@ -924,6 +934,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._applyFilters();
   };
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   private _filterChanged(ev) {
     const type = ev.target.localName;
     this._filters = { ...this._filters, [type]: ev.detail };

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -107,6 +107,14 @@ class HaBlueprintOverview extends LitElement {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    storage: "sessionStorage",
+    key: "blueprint-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter: string = "";
+
   private _processedBlueprints = memoizeOne(
     (
       blueprints: Record<string, Blueprints>,
@@ -308,6 +316,8 @@ class HaBlueprintOverview extends LitElement {
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -542,6 +552,10 @@ class HaBlueprintOverview extends LitElement {
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return haStyle;
   }

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

@@ -122,7 +122,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _selected: string[] = [];
 
-  @state() private _filter: string = history.state?.filter || "";
+  @storage({
+    storage: "sessionStorage",
+    key: "devices-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter: string = history.state?.filter || "";
 
   @storage({
     storage: "sessionStorage",
@@ -202,8 +208,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     const domain = this._searchParms.get("domain");
     const configEntry = this._searchParms.get("config_entry");
 
+    if (!domain && !configEntry) {
+      return;
+    }
+
+    this._filter = history.state?.filter || "";
+
     this._filters = {
-      ...this._filters,
       "ha-filter-states": {
         value: [
           ...((this._filters["ha-filter-states"]?.value as string[]) || []),

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

@@ -144,7 +144,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entities!: EntityRegistryEntry[];
 
-  @state() private _filter: string = history.state?.filter || "";
+  @storage({
+    storage: "sessionStorage",
+    key: "entities-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter: string = history.state?.filter || "";
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
@@ -703,7 +709,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 )
           ).length
         }
-        .filter=${this._filter}
         selectable
         .selected=${this._selected.length}
         .initialGroupColumn=${this._activeGrouping}
@@ -715,6 +720,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         @selection-changed=${this._handleSelectionChanged}
         clickable
         @clear-filter=${this._clearFilter}
+        .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
         @row-click=${this._openEditEntry}
         id="entity_id"
@@ -962,8 +968,13 @@ ${
     const domain = this._searchParms.get("domain");
     const configEntry = this._searchParms.get("config_entry");
 
+    if (!domain && !configEntry) {
+      return;
+    }
+
+    this._filter = history.state?.filter || "";
+
     this._filters = {
-      ...this._filters,
       "ha-filter-states": {
         value: [],
         items: undefined,

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

@@ -159,6 +159,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    storage: "sessionStorage",
+    key: "helpers-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @state() private _stateItems: HassEntity[] = [];
 
   @state() private _entityEntries?: Record<string, EntityRegistryEntry>;
@@ -559,6 +567,8 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         .activeFilters=${this._activeFilters}
         @clear-filter=${this._clearFilter}
         @row-click=${this._openEditDialog}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         hasFab
         clickable
         .noDataText=${this.hass.localize(
@@ -1070,6 +1080,10 @@ ${rejected
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -51,6 +51,14 @@ export class HaConfigLabels extends LitElement {
 
   @state() private _labels: LabelRegistryEntry[] = [];
 
+  @storage({
+    storage: "sessionStorage",
+    key: "labels-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @storage({
     key: "labels-table-sort",
     state: false,
@@ -160,6 +168,8 @@ export class HaConfigLabels extends LitElement {
         hasFab
         .initialSorting=${this._activeSorting}
         @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         @row-click=${this._editLabel}
         clickable
         id="label_id"
@@ -283,6 +293,10 @@ export class HaConfigLabels extends LitElement {
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;
   }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
 }
 
 declare global {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -70,6 +70,14 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   @state() private _dashboards: LovelaceDashboard[] = [];
 
+  @storage({
+    storage: "sessionStorage",
+    key: "lovelace-dashboards-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter: string = "";
+
   @storage({
     key: "lovelace-dashboards-table-sort",
     state: false,
@@ -304,6 +312,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
         .data=${this._getItems(this._dashboards)}
         .initialSorting=${this._activeSorting}
         @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         @row-click=${this._editDashboard}
         id="url_path"
         hasFab
@@ -453,6 +463,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;
   }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
 }
 
 declare global {

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -52,6 +52,14 @@ export class HaConfigLovelaceRescources extends LitElement {
 
   @state() private _resources: LovelaceResource[] = [];
 
+  @storage({
+    storage: "sessionStorage",
+    key: "lovelace-resources-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @storage({
     key: "lovelace-resources-table-sort",
     state: false,
@@ -138,6 +146,8 @@ export class HaConfigLovelaceRescources extends LitElement {
         )}
         .initialSorting=${this._activeSorting}
         @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         @row-click=${this._editResource}
         hasFab
         clickable
@@ -252,6 +262,10 @@ export class HaConfigLovelaceRescources extends LitElement {
     this._activeSorting = ev.detail;
   }
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -137,6 +137,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _filteredScenes?: string[] | null;
 
+  @storage({
+    storage: "sessionStorage",
+    key: "scene-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @storage({
     storage: "sessionStorage",
     key: "scene-table-filters-full",
@@ -543,6 +551,8 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           "ui.panel.config.scene.picker.no_scenes"
         )}
         @clear-filter=${this._clearFilter}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         hasFab
         clickable
         @row-click=${this._handleRowClicked}
@@ -1141,6 +1151,10 @@ ${rejected
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-picker.ts

@@ -141,6 +141,14 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
 
   @state() private _filteredScripts?: string[] | null;
 
+  @storage({
+    storage: "sessionStorage",
+    key: "script-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @storage({
     storage: "sessionStorage",
     key: "script-table-filters-full",
@@ -558,6 +566,8 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           "ui.panel.config.script.picker.no_scripts"
         )}
         @clear-filter=${this._clearFilter}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         hasFab
         clickable
         class=${this.narrow ? "narrow" : ""}
@@ -800,6 +810,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     `;
   }
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   private _filterExpanded(ev) {
     if (ev.detail.expanded) {
       this._expandedFilter = ev.target.localName;

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

@@ -35,6 +35,7 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { configSections } from "../ha-panel-config";
 import { showTagDetailDialog } from "./show-dialog-tag-detail";
 import "./tag-image";
+import { storage } from "../../../common/decorators/storage";
 
 export interface TagRowData extends Tag {
   display_name: string;
@@ -57,6 +58,14 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     return this.hass.auth.external?.config.canWriteTag;
   }
 
+  @storage({
+    storage: "sessionStorage",
+    key: "tags-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   private _columns = memoizeOne(
     (narrow: boolean, _language, localize: LocalizeFunc) => {
       const columns: DataTableColumnContainer<TagRowData> = {
@@ -189,6 +198,8 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         )}
         .data=${this._data(this._tags)}
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         hasFab
       >
         <ha-icon-button
@@ -323,6 +334,10 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
       return false;
     }
   }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
 }
 
 declare global {

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

@@ -46,6 +46,14 @@ export class HaConfigUsers extends LitElement {
   @storage({ key: "users-table-grouping", state: false, subscribe: false })
   private _activeGrouping?: string;
 
+  @storage({
+    storage: "sessionStorage",
+    key: "users-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   @storage({
     key: "users-table-collapsed",
     state: false,
@@ -184,6 +192,8 @@ export class HaConfigUsers extends LitElement {
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         @row-click=${this._editUser}
         hasFab
         clickable
@@ -283,6 +293,10 @@ export class HaConfigUsers extends LitElement {
   private _handleCollapseChanged(ev: CustomEvent) {
     this._activeCollapsed = ev.detail.value;
   }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
 }
 
 declare global {

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -80,7 +80,13 @@ export class VoiceAssistantsExpose extends LitElement {
 
   @state() private _extEntities?: Record<string, ExtEntityRegistryEntry>;
 
-  @state() private _filter: string = history.state?.filter || "";
+  @storage({
+    storage: "sessionStorage",
+    key: "voice-expose-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
@@ -634,7 +640,6 @@ export class VoiceAssistantsExpose extends LitElement {
 
   private _handleSearchChange(ev: CustomEvent) {
     this._filter = ev.detail.value;
-    history.replaceState({ filter: this._filter }, "");
   }
 
   private _handleSelectionChanged(