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

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

commit ec7c99c49069faf59e2c1e7b3622459ce4b9d597
Author: Brent Bovenzi <[email protected]>
AuthorDate: Mon Apr 28 14:14:04 2025 -0400

    Show backfill banner after creating a new backfill (#49666)
    
    (cherry picked from commit e1d0545f3fb20477dbc5512761e4fd51d98c6640)
---
 .../airflow/ui/src/components/Banner/BackfillBanner.tsx   | 15 ++++++++-------
 airflow-core/src/airflow/ui/src/main.tsx                  |  4 ++--
 .../src/airflow/ui/src/queries/useCreateBackfill.ts       |  7 ++++---
 airflow-core/src/airflow/ui/src/queryClient.ts            |  2 +-
 airflow-core/src/airflow/ui/src/router.tsx                |  4 ++--
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx 
b/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
index 65807847c18..7a94a45dad7 100644
--- a/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Banner/BackfillBanner.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box, HStack, Spacer, Text, type ButtonProps } from "@chakra-ui/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { MdPause, MdPlayArrow, MdStop } from "react-icons/md";
 import { RiArrowGoBackFill } from "react-icons/ri";
 
@@ -27,7 +28,6 @@ import {
   useBackfillServicePauseBackfill,
   useBackfillServiceUnpauseBackfill,
 } from "openapi/queries";
-import { queryClient } from "src/queryClient";
 
 import Time from "../Time";
 import { Button, ProgressBar } from "../ui";
@@ -45,18 +45,19 @@ const buttonProps = {
   variant: "outline",
 } satisfies ButtonProps;
 
-const onSuccess = async () => {
-  await queryClient.invalidateQueries({
-    queryKey: [useBackfillServiceListBackfills1Key],
-  });
-};
-
 const BackfillBanner = ({ dagId }: Props) => {
   const { data, isLoading } = useBackfillServiceListBackfills1({
     dagId,
   });
   const [backfill] = data?.backfills.filter((bf) => bf.completed_at === null) 
?? [];
 
+  const queryClient = useQueryClient();
+  const onSuccess = async () => {
+    await queryClient.invalidateQueries({
+      queryKey: [useBackfillServiceListBackfills1Key],
+    });
+  };
+
   const { isPending: isPausePending, mutate: pauseMutate } = 
useBackfillServicePauseBackfill({ onSuccess });
   const { isPending: isUnPausePending, mutate: unpauseMutate } = 
useBackfillServiceUnpauseBackfill({
     onSuccess,
diff --git a/airflow-core/src/airflow/ui/src/main.tsx 
b/airflow-core/src/airflow/ui/src/main.tsx
index 9d26f27d986..1cf543ebca9 100644
--- a/airflow-core/src/airflow/ui/src/main.tsx
+++ b/airflow-core/src/airflow/ui/src/main.tsx
@@ -28,7 +28,7 @@ import { ColorModeProvider } from "src/context/colorMode";
 import { TimezoneProvider } from "src/context/timezone";
 import { router } from "src/router";
 
-import { queryClient } from "./queryClient";
+import { client } from "./queryClient";
 import { system } from "./theme";
 import { clearToken, tokenHandler } from "./utils/tokenHandler";
 
@@ -65,7 +65,7 @@ createRoot(document.querySelector("#root") as 
HTMLDivElement).render(
   <StrictMode>
     <ChakraProvider value={system}>
       <ColorModeProvider>
-        <QueryClientProvider client={queryClient}>
+        <QueryClientProvider client={client}>
           <TimezoneProvider>
             <RouterProvider router={router} />
           </TimezoneProvider>
diff --git a/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts 
b/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts
index 3f782851242..1aa9a42e4a8 100644
--- a/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts
+++ b/airflow-core/src/airflow/ui/src/queries/useCreateBackfill.ts
@@ -16,20 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 
-import { useBackfillServiceCreateBackfill, useBackfillServiceListBackfillsKey 
} from "openapi/queries";
+import { useBackfillServiceCreateBackfill, useBackfillServiceListBackfills1Key 
} from "openapi/queries";
 import type { CreateBackfillData } from "openapi/requests/types.gen";
 import { toaster } from "src/components/ui";
-import { queryClient } from "src/queryClient";
 
 export const useCreateBackfill = ({ onSuccessConfirm }: { onSuccessConfirm: () 
=> void }) => {
   const [dateValidationError, setDateValidationError] = 
useState<unknown>(undefined);
   const [error, setError] = useState<unknown>(undefined);
+  const queryClient = useQueryClient();
 
   const onSuccess = async () => {
     await queryClient.invalidateQueries({
-      queryKey: [useBackfillServiceListBackfillsKey],
+      queryKey: [useBackfillServiceListBackfills1Key],
     });
     toaster.create({
       description: "Backfill jobs have been successfully triggered.",
diff --git a/airflow-core/src/airflow/ui/src/queryClient.ts 
b/airflow-core/src/airflow/ui/src/queryClient.ts
index 2abfe0cc104..f090a7c7939 100644
--- a/airflow-core/src/airflow/ui/src/queryClient.ts
+++ b/airflow-core/src/airflow/ui/src/queryClient.ts
@@ -26,7 +26,7 @@ if (OpenAPI.BASE.endsWith("/")) {
   OpenAPI.BASE = OpenAPI.BASE.slice(0, -1);
 }
 
-export const queryClient = new QueryClient({
+export const client = new QueryClient({
   defaultOptions: {
     mutations: {
       retry: 1,
diff --git a/airflow-core/src/airflow/ui/src/router.tsx 
b/airflow-core/src/airflow/ui/src/router.tsx
index 3d580e3e209..77d55de10bf 100644
--- a/airflow-core/src/airflow/ui/src/router.tsx
+++ b/airflow-core/src/airflow/ui/src/router.tsx
@@ -54,7 +54,7 @@ import { XCom } from "src/pages/XCom";
 
 import { Configs } from "./pages/Configs";
 import { Security } from "./pages/Security";
-import { queryClient } from "./queryClient";
+import { client } from "./queryClient";
 
 const taskInstanceRoutes = [
   { element: <Logs />, index: true },
@@ -193,7 +193,7 @@ export const routerConfig = [
     ),
     // Use react router loader to ensure we have the config before any other 
requests are made
     loader: async () => {
-      const data = await queryClient.ensureQueryData(
+      const data = await client.ensureQueryData(
         queryOptions({
           queryFn: ConfigService.getConfigs,
           queryKey: UseConfigServiceGetConfigsKeyFn(),

Reply via email to