Add tanstack query devtools (#9991)

This PR adds tanstack devtools to debug react query queries


https://github.com/enso-org/enso/assets/61194245/6898de33-cf9a-4077-9fdd-7b710484a94b


Also, this PR provides a way to download dev tools in Production

app/ide-desktop/lib/dashboard/package.json

@@ -71,6 +71,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "@vitejs/plugin-react": "^4.2.1",
+    "@tanstack/react-query-devtools": "^5.36.2",
     "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
     "enso-chat": "git://github.com/enso-org/enso-bot",

app/ide-desktop/lib/dashboard/src/App.tsx

@@ -89,6 +89,8 @@ import * as object from '#/utilities/object'
 
 import * as authServiceModule from '#/authentication/service'
 
+import * as reactQueryDevtools from './ReactQueryDevtools'
+
 // ============================
 // === Global configuration ===
 // ============================
@@ -204,6 +206,8 @@ export default function App(props: AppProps) {
           </ModalProvider>
         </LocalStorageProvider>
       </Router>
+
+      <reactQueryDevtools.ReactQueryDevtools />
     </reactQuery.QueryClientProvider>
   )
 }

app/ide-desktop/lib/dashboard/src/ReactQueryDevtools.tsx

@@ -0,0 +1,40 @@
+/**
+ * @file
+ *
+ * ReactQueryDevtools component. Shows the React Query Devtools.
+ */
+import * as React from 'react'
+
+import * as reactQueryDevtools from '@tanstack/react-query-devtools'
+
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+  import('@tanstack/react-query-devtools/build/modern/production.js').then(d => ({
+    default: d.ReactQueryDevtools,
+  }))
+)
+
+/**
+ * ReactQueryDevtools component.
+ * Shows the React Query Devtools and provide ability to show them in production.
+ */
+export function ReactQueryDevtools() {
+  const [showDevtools, setShowDevtools] = React.useState(false)
+
+  React.useEffect(() => {
+    window.toggleDevtools = () => {
+      setShowDevtools(old => !old)
+    }
+  }, [])
+
+  return (
+    <>
+      <reactQueryDevtools.ReactQueryDevtools />
+
+      {showDevtools && (
+        <React.Suspense fallback={null}>
+          <ReactQueryDevtoolsProduction />
+        </React.Suspense>
+      )}
+    </>
+  )
+}

app/ide-desktop/lib/types/globals.d.ts

@@ -103,6 +103,7 @@ interface VersionInfo {
 declare global {
     // Documentation is already inherited.
     /** */
+    // eslint-disable-next-line no-restricted-syntax
     interface Window {
         readonly enso?: AppRunner & Enso
         readonly backendApi?: BackendApi
@@ -110,6 +111,7 @@ declare global {
         readonly navigationApi: NavigationApi
         readonly menuApi: MenuApi
         readonly versionInfo?: VersionInfo
+        toggleDevtools: () => void
     }
 
     namespace NodeJS {

package-lock.json

@@ -357,6 +357,7 @@
         "@playwright/experimental-ct-react": "^1.40.0",
         "@playwright/test": "^1.40.0",
         "@react-types/shared": "^3.22.1",
+        "@tanstack/react-query-devtools": "^5.36.2",
         "@types/node": "^20.11.21",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
@@ -435,6 +436,47 @@
         "node": ">=14.17"
       }
     },
+    "app/ide-desktop/node_modules/@tanstack/query-core": {
+      "version": "5.36.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.1.tgz",
+      "integrity": "sha512-BteWYEPUcucEu3NBcDAgKuI4U25R9aPrHSP6YSf2NvaD2pSlIQTdqOfLRsxH9WdRYg7k0Uom35Uacb6nvbIMJg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "app/ide-desktop/node_modules/@tanstack/react-query": {
+      "version": "5.36.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.36.2.tgz",
+      "integrity": "sha512-bHNa+5dead+j6SA8WVlEOPxcGfteVFgdyFTCFcxBgjnPf0fFpHUc7aNZBCnvmPXqy/BeQa9zTuU9ectb7i8ZXA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.36.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "app/ide-desktop/node_modules/@tanstack/react-query-devtools": {
+      "version": "5.36.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.36.2.tgz",
+      "integrity": "sha512-bkPQrKmKJOa2dNs6rBB9aef8jCG8XAg8QKIhwN8NI+QaXky86IofnO8YjiF6P1mYquLXbQvK0VZ9DnGV0wH/eA==",
+      "dev": true,
+      "dependencies": {
+        "@tanstack/query-devtools": "5.32.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.36.2",
+        "react": "^18.0.0"
+      }
+    },
     "app/ide-desktop/node_modules/ajv": {
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
@@ -5378,30 +5420,16 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tanstack/query-core": {
+    "node_modules/@tanstack/query-devtools": {
-      "version": "5.27.5",
+      "version": "5.32.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.27.5.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.32.1.tgz",
-      "integrity": "sha512-HuYOo46NhzNX1SwXCmLf/Skr8B7T56cDHUN+iOhnu7+GOkUMThda64GwZpAqQzBT8TOTBQo6RQaNe0gi3Gi2fw==",
+      "integrity": "sha512-7Xq57Ctopiy/4atpb0uNY5VRuCqRS/1fi/WBCKKX6jHMa6cCgDuV/AQuiwRXcKARbq2OkVAOrW2v4xK9nTbcCA==",
+      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.27.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.27.5.tgz",
-      "integrity": "sha512-VcuQo4CYRGsPsD8/rj9e4WnXN6eU4GKmAs0Yd9a1hLSx6DxAzRaBdrwu6P9lfjpz8bxaYkZRyb5NI+YtLipoYA==",
-      "dependencies": {
-        "@tanstack/query-core": "5.27.5"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0"
-      }
-    },
     "node_modules/@testim/chrome-version": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@testim/chrome-version/-/chrome-version-1.1.4.tgz",