Merge pull request #3086 from warjiang/feat/devtools

frontend: enable devtools according to environment

Author: k8s-ci-robot

docs/development/frontend.md

@@ -27,6 +27,9 @@ make run-frontend
 This command leverages the `create-react-app`'s start script that launches
 a development server for the frontend (by default at `localhost:3000`).
 
+We use [react-query](https://tanstack.com/query/latest/docs/framework/react/overview) 
+for network request, if you need the devtools for react-query, you can simply set `REACT_APP_ENABLE_REACT_QUERY_DEVTOOLS=true` in the `.env` file.
+
 ## API documentation
 
 API documentation for TypeScript is done with [typedoc](https://typedoc.org/) and [typedoc-plugin-markdown](https://github.com/tgreyuk/typedoc-plugin-markdown), and is configured in tsconfig.json

frontend/make-env.js

@@ -10,6 +10,7 @@ const envContents = {
   REACT_APP_HEADLAMP_VERSION: appInfo.version,
   REACT_APP_HEADLAMP_GIT_VERSION: gitVersion,
   REACT_APP_HEADLAMP_PRODUCT_NAME: appInfo.productName,
+  REACT_APP_ENABLE_REACT_QUERY_DEVTOOLS: 'false'
 };
 
 function createEnvText() {

frontend/src/App.tsx

@@ -43,7 +43,11 @@ const queryClient = new QueryClient({
     },
   },
 });
-const queryDevtoolsEnabled = false;
+
+// https://vite.dev/guide/env-and-mode
+// if you want to enable the devtools for react-query,
+// just set REACT_APP_ENABLE_REACT_QUERY_DEVTOOLS=true in .env file
+const queryDevtoolsEnabled = import.meta.env.REACT_APP_ENABLE_REACT_QUERY_DEVTOOLS === 'true';
 
 function App() {
   return (