From 3fc62533d821ddea9b24f2e127bcd53d9cb16b8e Mon Sep 17 00:00:00 2001
From: Devin Villarosa <devinvillarosa92.business@gmail.com>
Date: Wed, 27 Nov 2024 07:26:34 -0800
Subject: [PATCH] [UI v2] feat: Adds tanstack query dev tools for development
 mode

---
 ui-v2/package-lock.json | 44 ++++++++++++++++++++++++++++++++++-------
 ui-v2/package.json      |  1 +
 ui-v2/src/app.tsx       |  2 ++
 ui-v2/tests/setup.ts    |  5 +++++
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/ui-v2/package-lock.json b/ui-v2/package-lock.json
index 8493d8c1bb38..1f27c879a097 100644
--- a/ui-v2/package-lock.json
+++ b/ui-v2/package-lock.json
@@ -26,6 +26,7 @@
 				"@radix-ui/react-toast": "^1.2.2",
 				"@radix-ui/react-tooltip": "^1.1.3",
 				"@tanstack/react-query": "^5.56.2",
+				"@tanstack/react-query-devtools": "^5.61.5",
 				"@tanstack/react-table": "^8.20.5",
 				"@tanstack/router-zod-adapter": "^1.58.16",
 				"@uiw/react-codemirror": "^4.23.6",
@@ -3796,26 +3797,55 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.59.16",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.16.tgz",
-			"integrity": "sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==",
+			"version": "5.61.5",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.61.5.tgz",
+			"integrity": "sha512-iG5vqurEOEbv+paP6kW3zPENa99kSIrd1THISJMaTwVlJ+N5yjVDNOUwp9McK2DWqWCXM3v13ubBbAyhxT78UQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/query-devtools": {
+			"version": "5.61.4",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.61.4.tgz",
+			"integrity": "sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==",
+			"license": "MIT",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.59.16",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.16.tgz",
-			"integrity": "sha512-MuyWheG47h6ERd4PKQ6V8gDyBu3ThNG22e1fRVwvq6ap3EqsFhyuxCAwhNP/03m/mLg+DAb0upgbPaX6VB+CkQ==",
+			"version": "5.61.5",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.61.5.tgz",
+			"integrity": "sha512-rjy8aqPgBBEz/rjJnpnuhi8TVkVTorMUsJlM3lMvrRb5wK6yzfk34Er0fnJ7w/4qyF01SnXsLB/QsTBsLF5PaQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@tanstack/query-core": "5.61.5"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"react": "^18 || ^19"
+			}
+		},
+		"node_modules/@tanstack/react-query-devtools": {
+			"version": "5.61.5",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.61.5.tgz",
+			"integrity": "sha512-P2DwlKyoGar6FX2XL324gM7AX8fuXm6DecLvfUoGpWbxtbuAtfzglRiCDLKkc5tJ7pekuaZsFFas/cyfTymoCQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.59.16"
+				"@tanstack/query-devtools": "5.61.4"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
+				"@tanstack/react-query": "^5.61.5",
 				"react": "^18 || ^19"
 			}
 		},
diff --git a/ui-v2/package.json b/ui-v2/package.json
index 1d6f366bb268..4b3925f52bfc 100644
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@@ -36,6 +36,7 @@
 		"@radix-ui/react-toast": "^1.2.2",
 		"@radix-ui/react-tooltip": "^1.1.3",
 		"@tanstack/react-query": "^5.56.2",
+		"@tanstack/react-query-devtools": "^5.61.5",
 		"@tanstack/react-table": "^8.20.5",
 		"@tanstack/router-zod-adapter": "^1.58.16",
 		"@uiw/react-codemirror": "^4.23.6",
diff --git a/ui-v2/src/app.tsx b/ui-v2/src/app.tsx
index 26375d1ee1f9..e8e5953b5f7c 100644
--- a/ui-v2/src/app.tsx
+++ b/ui-v2/src/app.tsx
@@ -1,11 +1,13 @@
 import { RouterProvider } from "@tanstack/react-router";
 import { queryClient, router } from "./router";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export const App = () => {
 	return (
 		<QueryClientProvider client={queryClient}>
 			<RouterProvider router={router} />
+			<ReactQueryDevtools />
 		</QueryClientProvider>
 	);
 };
diff --git a/ui-v2/tests/setup.ts b/ui-v2/tests/setup.ts
index fe085f116738..93009dff1683 100644
--- a/ui-v2/tests/setup.ts
+++ b/ui-v2/tests/setup.ts
@@ -42,3 +42,8 @@ Object.defineProperty(window, "matchMedia", {
 vi.mock("@tanstack/router-devtools", () => ({
 	TanStackRouterDevtools: () => null,
 }));
+
+// Mock @tanstack/react-query-devtools
+vi.mock("@tanstack/react-query-devtool", () => ({
+	ReactQueryDevtools: () => null,
+}));