Small adjustments and cleaning

Author: pierrejeambrun

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

@@ -22,7 +22,12 @@ import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searc
 
 import type { TableState } from "./types";
 
-const { LIMIT: LIMIT_PARAM, OFFSET: OFFSET_PARAM, SORT: SORT_PARAM }: SearchParamsKeysType = SearchParamsKeys;
+const {
+  CURSOR: CURSOR_PARAM,
+  LIMIT: LIMIT_PARAM,
+  OFFSET: OFFSET_PARAM,
+  SORT: SORT_PARAM,
+}: SearchParamsKeysType = SearchParamsKeys;
 
 export const stateToSearchParams = (state: TableState, defaultTableState?: TableState): URLSearchParams => {
   const queryParams = new URLSearchParams(globalThis.location.search);
@@ -39,6 +44,9 @@ 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.sorting.length) {
     state.sorting.forEach(({ desc, id }) => {
       if (defaultTableState?.sorting.find((sort) => sort.id === id && sort.desc === desc)) {

airflow-core/src/airflow/ui/src/constants/searchParams.ts

@@ -27,6 +27,7 @@ export enum SearchParamsKeys {
   CREATED_AT_GTE = "created_at_gte",
   CREATED_AT_LTE = "created_at_lte",
   CREATED_AT_RANGE = "created_at_range",
+  CURSOR = "cursor",
   DAG_DISPLAY_NAME_PATTERN = "dag_display_name_pattern",
   DAG_ID = "dag_id",
   DAG_ID_PATTERN = "dag_id_pattern",

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

@@ -21,7 +21,6 @@
 import { Flex, Link } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
@@ -55,6 +54,7 @@ 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,7 +261,26 @@ const taskInstanceColumns = ({
 export const TaskInstances = () => {
   const { t: translate } = useTranslation();
   const { dagId, groupId, runId, taskId } = useParams();
-  const [searchParams] = useSearchParams();
+  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 { setTableURLState, tableURLState } = useTableURLState({
     columnVisibility: {
       dag_version: false,
@@ -276,17 +295,6 @@ export const TaskInstances = () => {
   const [sort] = sorting;
   const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : ["-id"];
 
-  // Reset cursor when filters or sort change. URL search params capture both,
-  // so comparing their serialized form detects any change without useEffect.
-  const [cursor, setCursor] = useState<string>("");
-  const searchKey = searchParams.toString();
-  const [prevSearchKey, setPrevSearchKey] = useState(searchKey);
-
-  if (searchKey !== prevSearchKey) {
-    setCursor("");
-    setPrevSearchKey(searchKey);
-  }
-
   const filteredState = searchParams.getAll(STATE_PARAM);
   const filteredDagVersion = searchParams.get(DAG_VERSION_PARAM);
   const durationGte = searchParams.get(DURATION_GTE_PARAM);

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

@@ -167,6 +167,7 @@ export const useFiltersHandler = (searchParamKeys: Array<FilterableSearchParamsK
       });
 
       newParams.delete(SearchParamsKeys.OFFSET);
+      newParams.delete(SearchParamsKeys.CURSOR);
 
       return newParams;
     });