feat: change debugger ui

Author: nayounsang

.changeset/social-zebras-kneel.md

@@ -0,0 +1,7 @@
+---
+"@msw-dev-tool/react": minor
+---
+
+- Moved the debugger ui to a Dialog.
+- Made it possible to interact with the debugger when clicking on a debug column.
+- Add debug icon

packages/react/src/store/uiControlStore.ts

@@ -29,20 +29,9 @@
 /* ===== Misc ===== */
 @source inline("bg-transparent underline");
 
-.msw-dt-http-control-row {
-  @apply cursor-pointer transition-colors duration-200 ease-in-out;
-}
-
-.msw-dt-http-control-row:hover {
-  @apply bg-gray-100;
-}
-
-.msw-dt-current-row {
-  @apply bg-gray-200;
-}
 
 .msw-dt-sub-text {
-  @apply text-sm text-gray-900;
+  @apply text-sm text-gray-800;
 }
 
 .msw-dt-text-ellipsis {
@@ -113,14 +102,12 @@
   @apply whitespace-nowrap overflow-hidden text-ellipsis;
 }
 
-.msw-dt-dialog-overlay {
-  @apply top-0 right-0 bottom-0 left-0 bg-black/40;
-}
 
-.msw-dt-dialog-content {
-  @apply bg-white flex flex-col text-gray-900;
-}
 
-.msw-dt-dialog-layout {
+.dialog-content {
+  @apply bg-white flex flex-col text-gray-900;
   @apply fixed z-[9999];
+  @apply top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%];
+  @apply max-h-[85vh] max-w-[70vw];
+  @apply overflow-hidden rounded-lg px-[1rem] py-[2rem] box-border;
 }

packages/react/src/style/msw-dev-tool.css

@@ -0,0 +1,24 @@
+import React from "react";
+
+export const DebugIcon = () => {
+  return (
+    <svg
+      width="1rem"
+      height="1rem"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#000000"
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g
+        id="SVGRepo_tracerCarrier"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></g>
+      <g id="SVGRepo_iconCarrier">
+        <path d="M4.6 15c-.9-2.6-.6-4.6-.5-5.4 2.4-1.5 5.3-2 8-1.3.7-.3 1.5-.5 2.3-.6-.1-.3-.2-.5-.3-.8h2l1.2-3.2-.9-.4-1 2.6h-1.8C13 4.8 12.1 4 11.1 3.4l2.1-2.1-.7-.7L10.1 3c-.7 0-1.5 0-2.3.1L5.4.7l-.7.7 2.1 2.1C5.7 4.1 4.9 4.9 4.3 6H2.5l-1-2.6-.9.4L1.8 7h2C3.3 8.3 3 9.6 3 11H1v1h2c0 1 .2 2 .5 3H1.8L.6 18.3l.9.3 1-2.7h1.4c.4.8 2.1 4.5 5.8 3.9-.3-.2-.5-.5-.7-.8-2.9 0-4.4-3.5-4.4-4zM9 3.9c2 0 3.7 1.6 4.4 3.8-2.9-1-6.2-.8-9 .6.7-2.6 2.5-4.4 4.6-4.4zm14.8 19.2l-4.3-4.3c2.1-2.5 1.8-6.3-.7-8.4s-6.3-1.8-8.4.7-1.8 6.3.7 8.4c2.2 1.9 5.4 1.9 7.7 0l4.3 4.3c.2.2.5.2.7 0 .2-.2.2-.5 0-.7zm-8.8-3c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1z"></path>
+        <path fill="none" d="M0 0h24v24H0z"></path>
+      </g>
+    </svg>
+  );
+};

packages/react/src/ui/Components/DebugIcon.tsx

@@ -0,0 +1,96 @@
+import { matchRequestUrl, Path, PathParams } from "msw";
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
+
+export interface DebugResponse {
+  errorMessage?: string;
+  data?: string;
+  statusCode?: number;
+  statusText?: string;
+}
+
+export interface DebugState {
+  loading: boolean;
+  requestHeader: Record<string, string>;
+  searchParam: Record<string, string>;
+  pathParam: PathParams<string> | undefined;
+  response: DebugResponse;
+  url: URL;
+}
+
+export interface DebugContextValue extends DebugState {
+  setDebug: <K extends keyof DebugState>(
+    key: K,
+    value: DebugState[K] | ((prev: DebugState[K]) => DebugState[K])
+  ) => void;
+  reset: () => void;
+}
+
+const getInitialState = (
+  params: PathParams<string> | undefined
+): DebugState => ({
+  url: new URL(window.location.href),
+  loading: false,
+  requestHeader: {},
+  searchParam: {},
+  pathParam: params
+    ? Object.keys(params).reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: "",
+        }),
+        {}
+      )
+    : undefined,
+  response: {},
+});
+
+const DebugContext = createContext<DebugContextValue | null>(null);
+
+export const DebugProvider = ({
+  children,
+  url,
+  path,
+}: PropsWithChildren<{ url: URL; path: Path }>) => {
+  const { params } = matchRequestUrl(url, path, url.origin);
+  const [state, setState] = useState<DebugState>(getInitialState(params));
+
+  const setDebug = <K extends keyof DebugState>(
+    key: K,
+    value: DebugState[K] | ((prev: DebugState[K]) => DebugState[K])
+  ) => {
+    setState((prev) => ({
+      ...prev,
+      [key]: typeof value === "function" ? value(prev[key]) : value,
+    }));
+  };
+
+  const reset = () => {
+    setState(getInitialState(params));
+  };
+
+  return (
+    <DebugContext.Provider
+      value={{
+        ...state,
+        url,
+        setDebug,
+        reset,
+      }}
+    >
+      {children}
+    </DebugContext.Provider>
+  );
+};
+
+export const useDebugContext = () => {
+  const context = useContext(DebugContext);
+  if (!context) {
+    throw new Error("useDebug must be used within a DebugProvider");
+  }
+  return context;
+};

packages/react/src/ui/DevToolContent/HandlerDebugger/DebugProvider.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Button } from "../../Components/Button";
+import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { useDebugContext } from "./DebugProvider";
+import {
+  getPathWithParams,
+  getSearchParams,
+  getTotalUrl,
+} from "../../../utils/url";
+
+export interface FetchButtonProps {
+  url: string;
+}
+
+const getResponseString = async (res: Response): Promise<string> => {
+  const contentType = res.headers.get("content-type")?.toLowerCase() || "";
+
+  if (contentType.includes("application/json")) {
+    const data = await res.json();
+    return JSON.stringify(data, null, 2);
+  }
+
+  if (contentType.includes("multipart/form-data")) {
+    const formData = await res.formData();
+    const formDataObj: Record<string, string> = {};
+    formData.forEach((value, key) => {
+      formDataObj[key] = value.toString();
+    });
+    return JSON.stringify(formDataObj, null, 2);
+  }
+
+  return await res.text();
+};
+
+export const FetchButton = () => {
+  const { loading, requestHeader, setDebug, url, pathParam, searchParam } =
+    useDebugContext();
+
+  const finalPath = getPathWithParams(url, pathParam);
+  const searchParamsString = getSearchParams(searchParam);
+  const totalUrl = getTotalUrl(url.origin, finalPath, searchParamsString);
+
+  const handleFetch = () => {
+    setDebug("loading", true);
+    setDebug("response", {});
+
+    fetch(totalUrl, {
+      headers: {
+        ...requestHeader,
+      },
+    })
+      .then(async (res) => {
+        const data = await getResponseString(res);
+        setDebug("response", {
+          data,
+          statusCode: res.status,
+          statusText: res.statusText,
+        });
+      })
+      .catch((err) => {
+        setDebug("response", {
+          errorMessage: err instanceof Error ? err.message : "Failed to fetch",
+        });
+      })
+      .finally(() => {
+        setDebug("loading", false);
+      });
+  };
+
+  return (
+    <Button
+      onClick={handleFetch}
+      color="primary"
+      className="flex items-center gap-2"
+    >
+      {loading ? <ReloadIcon className="animate-spin" /> : <PlayIcon />}
+      Send Request
+    </Button>
+  );
+};

packages/react/src/ui/DevToolContent/HandlerDebugger/FetchButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useDebugContext } from "./DebugProvider";
+import { KeyValueInputList } from "./KeyValueInputList";
+
+export const HeaderSetter = () => {
+  const { requestHeader, setDebug } = useDebugContext();
+
+  return (
+    <KeyValueInputList
+      items={requestHeader}
+      setItems={(items) => {
+        setDebug("requestHeader", items);
+      }}
+      title="Request Headers"
+    />
+  );
+};

packages/react/src/ui/DevToolContent/HandlerDebugger/HeaderSetter.tsx

@@ -1,32 +1,33 @@
 import { Label } from "@radix-ui/react-label";
-import { PathParams } from "msw";
 import React from "react";
 import { Flex } from "../../Components/Flex";
 import { Input } from "../../Components/Input";
+import { useDebugContext } from "./DebugProvider";
+
+export const PathParamSetter = () => {
+  const { pathParam, setDebug } = useDebugContext();
 
-export const PathParamSetter = ({
-  paramValues,
-  onParamChange,
-}: {
-  paramValues?: PathParams<string>;
-  onParamChange: (key: string, value: string) => void;
-}) => {
   return (
-    paramValues &&
-    Object.keys(paramValues).length > 0 && (
+    pathParam &&
+    Object.keys(pathParam).length > 0 && (
       <div>
         <Label>Path Parameters</Label>
         <Flex direction="column" gap={2} py={2}>
-          {Object.entries(paramValues).map(([key, value]) => (
+          {Object.entries(pathParam).map(([key, value]) => (
             <Flex align="center" gap={2} key={key}>
-              <Label htmlFor={`param-${key}`} style={{ width:"160px" }}>
+              <Label htmlFor={`param-${key}`} className="w-[160px]">
                 {key}:
               </Label>
               <Input
                 id={`param-${key}`}
                 type="text"
                 value={value as string}
-                onChange={(e) => onParamChange(key, e.target.value)}
+                onChange={(e) => {
+                  setDebug("pathParam", {
+                    ...pathParam,
+                    [key]: e.target.value,
+                  });
+                }}
                 placeholder="value of path param"
                 className="w-[180px]"
               />