This is an automated email from the ASF dual-hosted git repository.
potiuk pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new b55d097d33a [v3-1-test] Remove redundant debounce-promise dependency
from UI (#61832) (#61938)
b55d097d33a is described below
commit b55d097d33a913ea3a3f652eb2d09ddc675b67ef
Author: Guan-Ming (Wesley) Chiu <[email protected]>
AuthorDate: Mon Feb 16 08:49:39 2026 +0800
[v3-1-test] Remove redundant debounce-promise dependency from UI (#61832)
(#61938)
(cherry picked from commit 721b0ed166e50ae116bd95ca4b7ad803db379cc9)
Signed-off-by: Guan-Ming (Wesley) Chiu
<[email protected]>
---
airflow-core/src/airflow/ui/package.json | 1 -
airflow-core/src/airflow/ui/pnpm-lock.yaml | 8 ----
.../ui/src/components/SearchDags/SearchDags.tsx | 47 +++++++++++-----------
3 files changed, 23 insertions(+), 33 deletions(-)
diff --git a/airflow-core/src/airflow/ui/package.json
b/airflow-core/src/airflow/ui/package.json
index 09d35fc5535..fb8a72d4644 100644
--- a/airflow-core/src/airflow/ui/package.json
+++ b/airflow-core/src/airflow/ui/package.json
@@ -37,7 +37,6 @@
"chartjs-adapter-dayjs-4": "^1.0.4",
"chartjs-plugin-annotation": "^3.1.0",
"dayjs": "^1.11.13",
- "debounce-promise": "^3.1.2",
"elkjs": "^0.10.0",
"html-to-image": "^1.11.13",
"i18next": "^25.1.2",
diff --git a/airflow-core/src/airflow/ui/pnpm-lock.yaml
b/airflow-core/src/airflow/ui/pnpm-lock.yaml
index d9c57206a28..44fac4a13e5 100644
--- a/airflow-core/src/airflow/ui/pnpm-lock.yaml
+++ b/airflow-core/src/airflow/ui/pnpm-lock.yaml
@@ -71,9 +71,6 @@ importers:
dayjs:
specifier: ^1.11.13
version: 1.11.13
- debounce-promise:
- specifier: ^3.1.2
- version: 3.1.2
elkjs:
specifier: ^0.10.0
version: 0.10.0
@@ -2275,9 +2272,6 @@ packages:
[email protected]:
resolution: {integrity:
sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
- [email protected]:
- resolution: {integrity:
sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg==}
-
[email protected]:
resolution: {integrity:
sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
engines: {node: '>=6.0'}
@@ -7422,8 +7416,6 @@ snapshots:
[email protected]: {}
- [email protected]: {}
-
[email protected]:
dependencies:
ms: 2.1.3
diff --git
a/airflow-core/src/airflow/ui/src/components/SearchDags/SearchDags.tsx
b/airflow-core/src/airflow/ui/src/components/SearchDags/SearchDags.tsx
index 35f95f6415c..d7a2e56df64 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchDags/SearchDags.tsx
+++ b/airflow-core/src/airflow/ui/src/components/SearchDags/SearchDags.tsx
@@ -20,10 +20,10 @@ import { Field } from "@chakra-ui/react";
import { useQueryClient } from "@tanstack/react-query";
import { AsyncSelect } from "chakra-react-select";
import type { OptionsOrGroups, GroupBase, SingleValue } from
"chakra-react-select";
-import debounce from "debounce-promise";
import React from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
+import { useDebouncedCallback } from "use-debounce";
import { UseDagServiceGetDagsKeyFn } from "openapi/queries";
import { DagService } from "openapi/requests/services.gen";
@@ -49,32 +49,31 @@ export const SearchDags = ({
}
};
- const searchDag = (
- inputValue: string,
- callback: (options: OptionsOrGroups<Option, GroupBase<Option>>) => void,
- ): Promise<OptionsOrGroups<Option, GroupBase<Option>>> =>
- queryClient.fetchQuery({
- queryFn: () =>
- DagService.getDags({
- dagDisplayNamePattern: inputValue,
- limit: SEARCH_LIMIT,
- }).then((data: DAGCollectionResponse) => {
- const options = data.dags.map((dag: DAGResponse) => ({
- label: dag.dag_display_name || dag.dag_id,
- value: dag.dag_id,
- }));
+ const searchDagDebounced = useDebouncedCallback(
+ (inputValue: string, callback: (options: OptionsOrGroups<Option,
GroupBase<Option>>) => void) => {
+ void queryClient.fetchQuery({
+ queryFn: () =>
+ DagService.getDags({
+ dagDisplayNamePattern: inputValue,
+ limit: SEARCH_LIMIT,
+ }).then((data: DAGCollectionResponse) => {
+ const options = data.dags.map((dag: DAGResponse) => ({
+ label: dag.dag_display_name || dag.dag_id,
+ value: dag.dag_id,
+ }));
- callback(options);
+ callback(options);
- return options;
+ return options;
+ }),
+ queryKey: UseDagServiceGetDagsKeyFn({
+ dagDisplayNamePattern: inputValue,
}),
- queryKey: UseDagServiceGetDagsKeyFn({
- dagDisplayNamePattern: inputValue,
- }),
- staleTime: 0,
- });
-
- const searchDagDebounced = debounce(searchDag, 300);
+ staleTime: 0,
+ });
+ },
+ 300,
+ );
return (
<Field.Root>
