Use the data table settings controller on application credentials

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -3,13 +3,13 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { DataTableSettingsController } from "../../../common/controllers/data-table-settings-controller";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import type {
   DataTableColumnContainer,
   SelectionChangedEvent,
-  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button";
 import "../../../components/ha-help-tooltip";
@@ -52,12 +52,10 @@ export class HaConfigApplicationCredentials extends LitElement {
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
-  @storage({
-    key: "application-credentials-table-sort",
-    state: false,
-    subscribe: false,
-  })
-  private _activeSorting?: SortingChangedEvent;
+  private _tableSettings = new DataTableSettingsController(this, {
+    search: "application-credentials-table-search",
+    sorting: "application-credentials-table-sort",
+  });
 
   @storage({
     key: "application-credentials-table-column-order",
@@ -73,15 +71,6 @@ export class HaConfigApplicationCredentials extends LitElement {
   })
   private _activeHiddenColumns?: string[];
 
-  @state()
-  @storage({
-    storage: "sessionStorage",
-    key: "application-credentials-table-search",
-    state: true,
-    subscribe: false,
-  })
-  private _filter = "";
-
   private _columns = memoizeOne(
     (localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<ApplicationCredential> = {
@@ -107,6 +96,7 @@ export class HaConfigApplicationCredentials extends LitElement {
           ),
           sortable: true,
           filterable: true,
+          urlName: "integration",
         },
         actions: {
           lastFixed: true,
@@ -175,13 +165,14 @@ export class HaConfigApplicationCredentials extends LitElement {
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
-        .initialSorting=${this._activeSorting}
+        .initialSorting=${this._tableSettings.sorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
         @columns-changed=${this._handleColumnsChanged}
-        @sorting-changed=${this._handleSortingChanged}
-        .filter=${this._filter}
-        @search-changed=${this._handleSearchChange}
+        @sorting-changed=${this._tableSettings.sortingChanged}
+        .filter=${this._tableSettings.search}
+        @search-changed=${this._tableSettings.searchChanged}
+        sync-url
       >
         <div class="header-btns" slot="selection-bar">
           ${
@@ -323,19 +314,11 @@ export class HaConfigApplicationCredentials extends LitElement {
     });
   }
 
-  private _handleSortingChanged(ev: CustomEvent) {
-    this._activeSorting = ev.detail;
-  }
-
   private _handleColumnsChanged(ev: CustomEvent) {
     this._activeColumnOrder = ev.detail.columnOrder;
     this._activeHiddenColumns = ev.detail.hiddenColumns;
   }
 
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
-
   static styles = css`
     .table-header {
       display: flex;

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

@@ -15,7 +15,6 @@ import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { DataTableSettingsController } from "../../../common/controllers/data-table-settings-controller";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
@@ -28,6 +27,7 @@ import type {
   DataTableColumnContainer,
   RowClickedEvent,
   SelectionChangedEvent,
+  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-dropdown";
@@ -115,10 +115,21 @@ export class HaConfigLabels extends LitElement {
 
   @state() private _loading = true;
 
-  private _tableSettings = new DataTableSettingsController(this, {
-    search: "labels-table-search",
-    sorting: "labels-table-sort",
-  });
+  @state()
+  @storage({
+    storage: "sessionStorage",
+    key: "labels-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
+  @storage({
+    key: "labels-table-sort",
+    state: false,
+    subscribe: false,
+  })
+  private _activeSorting?: SortingChangedEvent;
 
   @storage({
     key: "labels-table-column-order",
@@ -262,14 +273,13 @@ export class HaConfigLabels extends LitElement {
         .loading=${this._loading}
         .noDataText=${this.hass.localize("ui.panel.config.labels.no_labels")}
         has-fab
-        .initialSorting=${this._tableSettings.sorting}
+        .initialSorting=${this._activeSorting}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
         @columns-changed=${this._handleColumnsChanged}
-        @sorting-changed=${this._tableSettings.sortingChanged}
-        .filter=${this._tableSettings.search}
-        @search-changed=${this._tableSettings.searchChanged}
-        sync-url
+        @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
         @row-click=${this._editLabel}
         clickable
         id="label_id"
@@ -489,6 +499,14 @@ export class HaConfigLabels extends LitElement {
     navigate(`${path}?historyBack=1&label=${this._overflowLabel.label_id}`);
   };
 
+  private _handleSortingChanged(ev: CustomEvent) {
+    this._activeSorting = ev.detail;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   private _handleColumnsChanged(ev: CustomEvent) {
     this._activeColumnOrder = ev.detail.columnOrder;
     this._activeHiddenColumns = ev.detail.hiddenColumns;

src/panels/my/ha-panel-my.ts

@@ -40,13 +40,6 @@ const marketplaceTableParams = {
   group: "string?",
 } satisfies Redirect["params"];
 
-// The labels table reads these from the link
-const labelsTableParams = {
-  search: "string?",
-  sort: "string?",
-  direction: "string?",
-} satisfies Redirect["params"];
-
 // The helpers table reads these from the link
 const helpersTableParams = {
   search: "string?",
@@ -61,9 +54,17 @@ const helpersTableParams = {
   assistants: "string?",
 } satisfies Redirect["params"];
 
+// The application credentials table reads these from the link
+const applicationCredentialsTableParams = {
+  search: "string?",
+  sort: "string?",
+  direction: "string?",
+} satisfies Redirect["params"];
+
 export const getMyRedirects = (): Redirects => ({
   application_credentials: {
     redirect: "/config/application_credentials",
+    params: applicationCredentialsTableParams,
   },
   tools_assist: {
     redirect: "/config/tools/assist",
@@ -256,7 +257,6 @@ export const getMyRedirects = (): Redirects => ({
   },
   labels: {
     redirect: "/config/labels",
-    params: labelsTableParams,
   },
   energy: {
     component: "energy",