Address review: cursor in TableState, no useCallback/useEffect

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/components/DataTable/searchParams.ts

@@ -44,8 +44,11 @@ export const stateToSearchParams = (state: TableState, defaultTableState?: Table
     queryParams.set(OFFSET_PARAM, `${state.pagination.pageIndex}`);
   }
 
-  // Clear cursor when table state changes (sort, page size, etc.).
-  queryParams.delete(CURSOR_PARAM);
+  if (state.cursor !== undefined && state.cursor !== "") {
+    queryParams.set(CURSOR_PARAM, state.cursor);
+  } else {
+    queryParams.delete(CURSOR_PARAM);
+  }
 
   if (state.sorting.length) {
     state.sorting.forEach(({ desc, id }) => {
@@ -76,6 +79,13 @@ export const searchParamsToState = (searchParams: URLSearchParams, defaultState:
       },
     };
   }
+
+  const cursorValue = searchParams.get(CURSOR_PARAM);
+
+  if (cursorValue !== null) {
+    urlState = { ...urlState, cursor: cursorValue };
+  }
+
   const sorts = searchParams.getAll(SORT_PARAM);
   const sorting: SortingState = sorts.map((sort) => ({
     desc: sort.startsWith("-"),

airflow-core/src/airflow/ui/src/components/DataTable/types.ts

@@ -22,6 +22,7 @@ import type { JSX, ReactNode } from "react";
 
 export type TableState = {
   columnVisibility?: VisibilityState;
+  cursor?: string;
   pagination: PaginationState;
   sorting: SortingState;
 };

airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx

@@ -54,7 +54,6 @@ type TaskInstanceRow = { row: { original: TaskInstanceResponse } };
 const getRowKey = (ti: TaskInstanceResponse) => `${ti.dag_id}:${ti.dag_run_id}:${ti.task_id}:${ti.map_index}`;
 
 const {
-  CURSOR: CURSOR_PARAM,
   DAG_ID_PATTERN: DAG_ID_PATTERN_PARAM,
   DAG_VERSION: DAG_VERSION_PARAM,
   DURATION_GTE: DURATION_GTE_PARAM,
@@ -261,25 +260,7 @@ const taskInstanceColumns = ({
 export const TaskInstances = () => {
   const { t: translate } = useTranslation();
   const { dagId, groupId, runId, taskId } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const cursor = searchParams.get(CURSOR_PARAM) ?? "";
-  const setCursor = (value: string) => {
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-
-        if (value) {
-          next.set(CURSOR_PARAM, value);
-        } else {
-          next.delete(CURSOR_PARAM);
-        }
-
-        return next;
-      },
-      { replace: true },
-    );
-  };
+  const [searchParams] = useSearchParams();
 
   const { setTableURLState, tableURLState } = useTableURLState({
     columnVisibility: {
@@ -291,7 +272,7 @@ export const TaskInstances = () => {
       queue: false,
     },
   });
-  const { pagination, sorting } = tableURLState;
+  const { cursor, pagination, sorting } = tableURLState;
   const [sort] = sorting;
   const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : ["-id"];
 
@@ -317,7 +298,7 @@ export const TaskInstances = () => {
 
   const { data, error, isLoading } = useTaskInstanceServiceGetTaskInstances(
     {
-      cursor,
+      cursor: cursor ?? "",
       dagId: dagId ?? "~",
       dagIdPattern: filteredDagIdPattern ?? undefined,
       dagRunId: runId ?? "~",
@@ -358,12 +339,12 @@ export const TaskInstances = () => {
     hasPrevious: previousCursor !== undefined && previousCursor !== null,
     onNext: () => {
       if (nextCursor !== undefined && nextCursor !== null) {
-        setCursor(nextCursor);
+        setTableURLState({ cursor: nextCursor, pagination, sorting });
       }
     },
     onPrevious: () => {
       if (previousCursor !== undefined && previousCursor !== null) {
-        setCursor(previousCursor);
+        setTableURLState({ cursor: previousCursor, pagination, sorting });
       }
     },
   };

airflow-core/src/airflow/ui/src/utils/useFiltersHandler.ts

@@ -145,6 +145,7 @@ export const useFiltersHandler = (searchParamKeys: Array<FilterableSearchParamsK
 
   const handleFiltersChange = (filters: Record<string, FilterValue>) => {
     setTableURLState({
+      cursor: undefined,
       pagination: { ...pagination, pageIndex: 0 },
       sorting,
     });