feat(devtools): devtools improvements (#5875)

refinedev · Apr 24, 2024 · 1c9a95f · 1c9a95f
1 parent a9dbd80
commit 1c9a95f
Show file tree

Hide file tree

Showing 27 changed files with 456 additions and 66 deletions.
diff --git a/.changeset/clean-dryers-grow.md b/.changeset/clean-dryers-grow.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/core": patch
+---
+
+refactor: add resource name to devtools xray calls
+
+Added the resource name to the devtools xray calls to allow resource names to be displayed in the devtools even with custom query keys.
diff --git a/.changeset/clean-elephants-matter.md b/.changeset/clean-elephants-matter.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/devtools-server": patch
+---
+
+chore: move `@refinedev/devtools-ui` dependency
+
+Moved `@refinedev/devtools-ui` dependency to `devDependencies` since only the `vite` output is used in the server.
diff --git a/.changeset/cyan-wolves-cry.md b/.changeset/cyan-wolves-cry.md
@@ -0,0 +1,10 @@
+---
+"@refinedev/devtools-internal": patch
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-shared": patch
+"@refinedev/devtools-ui": patch
+---
+
+feat: update resource name accessing logic
+
+Updated resource name displaying logic to use `resourceName` from activity records to make sure `resource` is correctly displayed with custom query keys.
diff --git a/.changeset/flat-suns-push.md b/.changeset/flat-suns-push.md
@@ -0,0 +1,10 @@
+---
+"@refinedev/devtools-internal": patch
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-shared": patch
+"@refinedev/devtools-ui": patch
+---
+
+feat: add invalidate query button
+
+Added `Invalidate Query` button to settled queries in the devtools panel to allow users to manually invalidate queries for debugging purposes.
diff --git a/.changeset/forty-pianos-beam.md b/.changeset/forty-pianos-beam.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/devtools-ui": patch
+---
+
+refactor: replace `react-json-view` with `react-json-view-lite`
+
+Replaced outdated `react-json-view` package with `react-json-view-lite` for both performance and dependency resolution reasons.
diff --git a/.changeset/shiny-colts-nail.md b/.changeset/shiny-colts-nail.md
@@ -0,0 +1,7 @@
+---
+"@refinedev/core": patch
+---
+
+fix: exclude internal button hook calls from devtools trace
+
+Removed internal button hook calls from devtools trace to avoid crowding the trace with unnecessary information.
diff --git a/packages/core/src/hooks/accessControl/useCan/index.ts b/packages/core/src/hooks/accessControl/useCan/index.ts
@@ -75,7 +75,10 @@ export const useCan = ({
     ...mergedQueryOptions,
     meta: {
       ...mergedQueryOptions?.meta,
-      ...getXRay("useCan", preferLegacyKeys),
+      ...getXRay("useCan", preferLegacyKeys, resource, [
+        "useButtonCanAccess",
+        "useNavigationButton",
+      ]),
     },
     retry: false,
   });

diff --git a/packages/core/src/hooks/auditLog/useLogList/index.ts b/packages/core/src/hooks/auditLog/useLogList/index.ts
@@ -66,7 +66,7 @@ export const useLogList = <
     retry: false,
     meta: {
       ...queryOptions?.meta,
-      ...getXRay("useLogList", preferLegacyKeys),
+      ...getXRay("useLogList", preferLegacyKeys, resource),
     },
   });
 

diff --git a/packages/core/src/hooks/data/useInfiniteList.ts b/packages/core/src/hooks/data/useInfiniteList.ts
@@ -315,7 +315,7 @@ export const useInfiniteList = <
     },
     meta: {
       ...queryOptions?.meta,
-      ...getXRay("useInfiniteList", preferLegacyKeys),
+      ...getXRay("useInfiniteList", preferLegacyKeys, resource?.name),
     },
   });
 

diff --git a/packages/core/src/hooks/data/useList.ts b/packages/core/src/hooks/data/useList.ts
@@ -321,7 +321,7 @@ export const useList = <
     },
     meta: {
       ...queryOptions?.meta,
-      ...getXRay("useList", preferLegacyKeys),
+      ...getXRay("useList", preferLegacyKeys, resource?.name),
     },
   });
 

diff --git a/packages/core/src/hooks/data/useMany.ts b/packages/core/src/hooks/data/useMany.ts
@@ -226,7 +226,7 @@ export const useMany = <
     },
     meta: {
       ...queryOptions?.meta,
-      ...getXRay("useMany", preferLegacyKeys),
+      ...getXRay("useMany", preferLegacyKeys, resource?.name),
     },
   });
 

diff --git a/packages/core/src/hooks/data/useOne.ts b/packages/core/src/hooks/data/useOne.ts
@@ -239,7 +239,7 @@ export const useOne = <
     },
     meta: {
       ...queryOptions?.meta,
-      ...getXRay("useOne", preferLegacyKeys),
+      ...getXRay("useOne", preferLegacyKeys, resource?.name),
     },
   });
 

diff --git a/packages/devtools-internal/src/get-trace.ts b/packages/devtools-internal/src/get-trace.ts
@@ -4,7 +4,7 @@ import { isRefineStack } from "./is-refine-stack";
 import { getPackageNameFromFilename } from "./get-package-name-from-filename";
 import { TraceType } from "@refinedev/devtools-shared";
 
-export function getTrace() {
+export function getTrace(excludeFromTrace?: string[]) {
   if (__DEV_CONDITION__ !== "development") {
     return [];
   }
@@ -24,7 +24,8 @@ export function getTrace() {
             packageName: getPackageNameFromFilename(frame.fileName),
           }) as TraceType,
       )
-      .filter((trace) => trace.function);
+      .filter((trace) => trace.function)
+      .filter((trace) => !excludeFromTrace?.includes(trace.function ?? ""));
     return traces.slice(1);
   } catch (error) {
     return [];

diff --git a/packages/devtools-internal/src/get-xray.ts b/packages/devtools-internal/src/get-xray.ts
@@ -7,9 +7,15 @@ export type XRayResponse = {
   trace: TraceType[];
   resourcePath: string | null;
   legacyKey: boolean;
+  resourceName?: string;
 };
 
-export function getXRay(hookName: string, legacyKey: boolean): XRayResponse {
+export function getXRay(
+  hookName: string,
+  legacyKey: boolean,
+  resourceName?: string,
+  excludeFromTrace?: string[],
+): XRayResponse {
   if (__DEV_CONDITION__ !== "development") {
     return {
       hookName: "",
@@ -18,7 +24,7 @@ export function getXRay(hookName: string, legacyKey: boolean): XRayResponse {
       legacyKey: false,
     };
   }
-  const trace = getTrace().slice(1);
+  const trace = getTrace(excludeFromTrace).slice(1);
 
   const resourcePath = getResourcePath(hookName as RefineHook, legacyKey);
 
@@ -27,5 +33,6 @@ export function getXRay(hookName: string, legacyKey: boolean): XRayResponse {
     trace,
     resourcePath,
     legacyKey,
+    resourceName,
   };
 }
diff --git a/packages/devtools-internal/src/listeners.ts b/packages/devtools-internal/src/listeners.ts
@@ -25,16 +25,6 @@ export const createMutationListener =
       });
       resolve();
     });
-
-    // console.table({
-    //     type: "mutation",
-    //     key: mutation?.options.mutationKey,
-    //     id: mutation?.mutationId,
-    //     status: mutation?.state.status,
-    //     trace: mutation?.meta?.trace,
-    //     state: mutation?.state,
-    //     variables: mutation?.state?.variables,
-    // });
   };
 
 export const createQueryListener = (ws: WebSocket) => (query: Query) => {
@@ -53,12 +43,4 @@ export const createQueryListener = (ws: WebSocket) => (query: Query) => {
     });
     resolve();
   });
-
-  // console.table({
-  //     type: "query",
-  //     key: query.queryKey,
-  //     status: query.state.status,
-  //     trace: query.meta?.trace,
-  //     state: query.state,
-  // });
 };
diff --git a/packages/devtools-internal/src/use-query-subscription.tsx b/packages/devtools-internal/src/use-query-subscription.tsx
@@ -1,4 +1,8 @@
-import { DevToolsContext } from "@refinedev/devtools-shared";
+import {
+  DevToolsContext,
+  DevtoolsEvent,
+  receive,
+} from "@refinedev/devtools-shared";
 import { QueryClient } from "@tanstack/react-query";
 import React, { useContext } from "react";
 import { createQueryListener, createMutationListener } from "./listeners";
@@ -50,5 +54,21 @@ export const useQuerySubscription =
           };
         }, [ws, queryClient]);
 
+        React.useEffect(() => {
+          if (!ws) return () => 0;
+
+          const cb = receive(
+            ws,
+            DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY_ACTION,
+            ({ queryKey }) => {
+              if (queryKey) {
+                queryClient.invalidateQueries(queryKey);
+              }
+            },
+          );
+
+          return cb;
+        }, [ws, queryClient]);
+
         return {};
       };
diff --git a/packages/devtools-server/package.json b/packages/devtools-server/package.json
@@ -38,7 +38,7 @@
     "build": "npm run build:client && tsup",
     "build:client": "NODE_ENV=production tsc && vite build --config src/client/vite.config.ts",
     "dev": "npm run dev:client & tsup --watch",
-    "dev:client": "vite build --watch --force --config src/client/vite.config.ts",
+    "dev:client": "vite build --watch --config src/client/vite.config.ts",
     "prepare": "npm run build",
     "publint": "publint --strict=true --level=suggestion",
     "start:server": "node dist/cli.cjs",
@@ -48,7 +48,6 @@
   "dependencies": {
     "@ory/client": "^1.5.2",
     "@refinedev/devtools-shared": "1.1.5",
-    "@refinedev/devtools-ui": "1.1.20",
     "body-parser": "^1.20.2",
     "boxen": "^5.1.2",
     "chalk": "^4.1.2",
@@ -73,6 +72,7 @@
   },
   "devDependencies": {
     "@esbuild-plugins/node-resolve": "^0.1.4",
+    "@refinedev/devtools-ui": "1.1.20",
     "@testing-library/jest-dom": "^5.16.4",
     "@types/dedent": "^0.7.0",
     "@types/fs-extra": "^9.0.13",

diff --git a/packages/devtools-server/src/index.ts b/packages/devtools-server/src/index.ts
@@ -83,6 +83,18 @@ export const server = async ({ projectPath = process.cwd() }: Options = {}) => {
       },
     );
 
+    receive(
+      client as any,
+      DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY,
+      ({ queryKey }) => {
+        ws.clients.forEach((c) => {
+          send(c as any, DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY_ACTION, {
+            queryKey,
+          });
+        });
+      },
+    );
+
     receive(client as any, DevtoolsEvent.DEVTOOLS_LOGIN_SUCCESS, () => {
       ws.clients.forEach((c) => {
         send(c as any, DevtoolsEvent.DEVTOOLS_RELOAD_AFTER_LOGIN, {});

diff --git a/packages/devtools-server/tsconfig.declarations.json b/packages/devtools-server/tsconfig.declarations.json
@@ -8,7 +8,8 @@
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
-    "**/*.test.tsx"
+    "**/*.test.tsx",
+    "src/client/**/*"
   ],
   "compilerOptions": {
     "outDir": "dist",

diff --git a/packages/devtools-server/tsconfig.json b/packages/devtools-server/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "include": ["src", "types"],
+  "exclude": [
+    "src/client/**/*",
+  ],
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
     "types": ["node", "jest", "@testing-library/jest-dom"],

diff --git a/packages/devtools-shared/src/event-types.ts b/packages/devtools-shared/src/event-types.ts
@@ -21,6 +21,8 @@ export enum DevtoolsEvent {
   DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION = "devtools:highlight-in-monitor-action",
   DEVTOOLS_LOGIN_SUCCESS = "devtools:login-success",
   DEVTOOLS_RELOAD_AFTER_LOGIN = "devtools:reload-after-login",
+  DEVTOOLS_INVALIDATE_QUERY = "devtools:invalidate-query",
+  DEVTOOLS_INVALIDATE_QUERY_ACTION = "devtools:invalidate-query-action",
 }
 
 type Timestamps = {
@@ -39,6 +41,7 @@ type ActivityPayload =
       variables?: Mutation<any, any, any, any>["state"]["variables"];
       hookName: string;
       resourcePath: string | null;
+      resourceName?: string;
       legacyKey: boolean;
     }
   | {
@@ -50,6 +53,7 @@ type ActivityPayload =
       state: QueryState<any, any>;
       hookName: string;
       resourcePath: string | null;
+      resourceName?: string;
       legacyKey: boolean;
     };
 
@@ -68,4 +72,6 @@ export type DevtoolsEventPayloads = {
   [DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR_ACTION]: { name: string };
   [DevtoolsEvent.DEVTOOLS_LOGIN_SUCCESS]: {};
   [DevtoolsEvent.DEVTOOLS_RELOAD_AFTER_LOGIN]: {};
+  [DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY]: { queryKey: QueryKey };
+  [DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY_ACTION]: { queryKey: QueryKey };
 };
diff --git a/packages/devtools-ui/package.json b/packages/devtools-ui/package.json
@@ -55,7 +55,7 @@
     "lodash-es": "^4.17.21",
     "prism-react-renderer": "^1.3.5",
     "react-gravatar": "^2.6.3",
-    "react-json-view": "^1.21.3",
+    "react-json-view-lite": "^1.3.0",
     "react-router-dom": "^6.8.1",
     "semver-diff": "^3.1.1"
   },

diff --git a/packages/devtools-ui/src/components/invalidate-button.tsx b/packages/devtools-ui/src/components/invalidate-button.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import type { Activity } from "../interfaces/activity";
+import { UpdateIcon } from "./icons/update";
+import clsx from "clsx";
+import {
+  DevToolsContext,
+  DevtoolsEvent,
+  send,
+} from "@refinedev/devtools-shared";
+
+export const InvalidateButton = ({ activity }: { activity: Activity }) => {
+  const { ws } = React.useContext(DevToolsContext);
+
+  if (activity.type !== "query") return null;
+
+  if (activity.status === "success" || activity.status === "error") {
+    const isFetching = activity.state.fetchStatus === "fetching";
+
+    return (
+      <>
+        <button
+          type="button"
+          onClick={() => {
+            if (!ws || !activity.key) return;
+            send(ws, DevtoolsEvent.DEVTOOLS_INVALIDATE_QUERY, {
+              queryKey: activity.key,
+            });
+          }}
+          className={clsx(
+            "re-ml-2",
+            "re-rounded-xl",
+            "re-py-0.5",
+            "re-pl-1",
+            "re-pr-1.5",
+            "re-text-[10px]",
+            "re-text-alt-blue",
+            "re-bg-alt-blue",
+            "re-bg-opacity-20",
+            "re-border",
+            "re-border-alt-blue",
+            "re-flex",
+            "re-items-center",
+            "re-gap-1",
+            "re-font-normal",
+            "hover:re-bg-opacity-30",
+            "active:re-bg-opacity-40",
+          )}
+        >
+          <UpdateIcon
+            className={clsx(
+              isFetching && "re-animate-spin",
+              "re-w-3",
+              "re-h-3",
+            )}
+          />
+          Invalidate Query
+        </button>
+      </>
+    );
+  }
+
+  return null;
+};