(airflow) branch v3-0-test updated: [v3-0-test] Update useTableURLState hook for sticky table sort (#50720) (#50858)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch v3-0-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-0-test by this push:
     new 7550e7d8a8a [v3-0-test] Update useTableURLState hook for sticky table 
sort (#50720) (#50858)
7550e7d8a8a is described below

commit 7550e7d8a8a8c39f9e343a470b8bf78c185e52a0
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Wed May 21 11:42:24 2025 +0200

    [v3-0-test] Update useTableURLState hook for sticky table sort (#50720) 
(#50858)
    
    (cherry picked from commit 06278ce0d4ee122446e4074d77147ea36e228d1f)
    
    Co-authored-by: Guan Ming(Wesley) Chiu 
<105915352+guan404m...@users.noreply.github.com>
---
 .../ui/src/components/DataTable/useTableUrlState.ts        | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/components/DataTable/useTableUrlState.ts 
b/airflow-core/src/airflow/ui/src/components/DataTable/useTableUrlState.ts
index 286882bd025..80b23a294e7 100644
--- a/airflow-core/src/airflow/ui/src/components/DataTable/useTableUrlState.ts
+++ b/airflow-core/src/airflow/ui/src/components/DataTable/useTableUrlState.ts
@@ -18,6 +18,8 @@
  */
 import { useCallback, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useLocalStorage } from "usehooks-ts";
 
 import { useConfig } from "src/queries/useConfig";
 
@@ -26,6 +28,13 @@ import type { TableState } from "./types";
 
 export const useTableURLState = (defaultState?: Partial<TableState>) => {
   const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  const pageName = location.pathname;
+
+  const [sorting, setSorting] = useLocalStorage<TableState["sorting"]>(
+    `${pageName.replaceAll("/", "-").slice(1)}-table-sort`,
+    [],
+  );
 
   const pageSize = useConfig("page_size") as number;
 
@@ -34,7 +43,7 @@ export const useTableURLState = (defaultState?: 
Partial<TableState>) => {
       pageIndex: 0,
       pageSize,
     },
-    sorting: [],
+    sorting,
   } as const satisfies TableState;
 
   const handleStateChange = useCallback(
@@ -42,8 +51,9 @@ export const useTableURLState = (defaultState?: 
Partial<TableState>) => {
       setSearchParams(stateToSearchParams(state, defaultTableState), {
         replace: true,
       });
+      setSorting(state.sorting);
     },
-    [setSearchParams, defaultTableState],
+    [setSearchParams, defaultTableState, setSorting],
   );
 
   const tableURLState = useMemo(