Add filter, sorting and pagination changes as dependency for API.

[tirkarthi]

The API calls were not made on changing filters, sort and pagination since only changes to search and paused were declared as dependency to the API call. This PR adds all other parameters.

Ideally, I think changing from last dag run state from running to success and then changing it back to running should trigger another API call to filter by running so that users always see fresh data. There is no refresh button in the UI like legacy UI so either a refresh button should be added or each change should trigger an API call. This seems to be due to staleTime parameter added to the API call options.

[tirkarthi]

Changes were added in #42896. cc @luyangliuable

[tirkarthi]

I tried to test this with below patch. For some reason the click is triggered and DagsFilter is setting the searchParams but the subsequent re-render still has empty SearchParams thus making the API call without the filter.

https://testing-library.com/docs/user-event/intro/

diff --git a/airflow/ui/src/App.test.tsx b/airflow/ui/src/App.test.tsx
index 38b90d1c49..75b06c9b4e 100644
--- a/airflow/ui/src/App.test.tsx
+++ b/airflow/ui/src/App.test.tsx
@@ -17,7 +17,8 @@
  * under the License.
  */
 import type { QueryObserverSuccessResult } from "@tanstack/react-query";
-import { render } from "@testing-library/react";
+import { render, waitFor, fireEvent } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, it, vi } from "vitest";
 
 import * as openapiQueriesModule from "openapi/queries";
@@ -121,4 +122,21 @@ describe("App", () => {
   it("App component should render", () => {
     render(<App />, { wrapper: Wrapper });
   });
+
+  it("App component should render DAGs page", async () => {
+    const { getByText, getByRole, queryByText } = render(<App />, {
+      wrapper: Wrapper,
+    });
+    const user = userEvent.setup();
+
+    expect(queryByText("Running")).not.toBeInTheDocument();
+    expect(getByText("DAGs")).toBeInTheDocument();
+
+    await userEvent.click(getByText("DAGs"));
+
+    expect(getByText("Running")).toBeInTheDocument();
+    await user.click(getByRole("button", { name: "Running" }));
+
+    console.log(openapiQueriesModule.useDagServiceGetDags.mock.calls);
+  });
 });
diff --git a/airflow/ui/src/pages/DagsList/DagsFilters.tsx b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
index 3d507ace36..838862c32f 100644
--- a/airflow/ui/src/pages/DagsList/DagsFilters.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
@@ -66,6 +66,7 @@ export const DagsFilters = () => {
   const handleStateChange: React.MouseEventHandler<HTMLButtonElement> =
     useCallback(
       ({ currentTarget: { value } }) => {
+        console.log("on click ", value);
         if (value === "all") {
           searchParams.delete(LAST_DAG_RUN_STATE_PARAM);
         } else {
@@ -76,6 +77,11 @@ export const DagsFilters = () => {
           pagination: { ...pagination, pageIndex: 0 },
           sorting,
         });
+        console.log("on click after ", value);
+        console.log(
+          "on click confirm ",
+          searchParams.get(LAST_DAG_RUN_STATE_PARAM),
+        );
       },
       [pagination, searchParams, setSearchParams, setTableURLState, sorting],
     );
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx b/airflow/ui/src/pages/DagsList/DagsList.tsx
index ad1b08fe87..5d5bbfe0dd 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -121,6 +121,7 @@ export const DagsList = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [display, setDisplay] = useState<"card" | "table">("card");
 
+  console.log("search params", searchParams);
   const showPaused = searchParams.get(PAUSED_PARAM);
   const lastDagRunState = searchParams.get(
     LAST_DAG_RUN_STATE_PARAM,
@@ -152,6 +153,8 @@ export const DagsList = () => {
     setDagDisplayNamePattern(value);
   };
 
+  console.log("last dag run state render", lastDagRunState, searchParams);
+
   const { data, error, isFetching, isLoading } = useDagServiceGetDags(
     {
       dagDisplayNamePattern: Boolean(dagDisplayNamePattern)

[bbovenzi]

Good catch.

We should probably move those query settings to be default for all our queries instead of just for getDags.
We just haven't added autorefetch yet which perhaps we should do and include the refetch function from useQuery

For your failing test, we probably need to mock the params themselves. https://stackoverflow.com/questions/71415745/mock-usesearchparams-react-testing-library

[tirkarthi]

Thanks @bbovenzi for the link. I will try to take the test in another PR to unblock this fix since I might need sometime to fully process the testing and mocking flow to test this properly.