msw-dev-tool 1.1.7 → 1.1.9

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useLayoutEffect, useEffect, useMemo, useId as useId$1, forwardRef } from 'react';
+import React__default, { useState, useLayoutEffect, useEffect, useMemo, forwardRef, createElement, useId as useId$1 } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
@@ -27940,13 +27940,14 @@ const useUiControlStore = create((set) => ({
 const HttpControl = () => {
     const table = useFlattenHandlersTable();
     const { setDebuggerHandler } = useUiControlStore();
+    const currentHandler = useUiControlStore((state) => state.currentHandler);
     return (React__default.createElement(p$3, { style: { flex: 3, overflowY: "auto" }, direction: "column", gap: "4" },
         React__default.createElement(r$8, { as: "h2", size: "5" }, "Handlers"),
         React__default.createElement(m, { onDragStart: (e) => e.stopPropagation(), style: { userSelect: "text" } },
             React__default.createElement(d, null, table.getHeaderGroups().map((headerGroup) => (React__default.createElement(P, { key: headerGroup.id }, headerGroup.headers.map((header) => (React__default.createElement(f$1, { key: header.id }, header.isPlaceholder
                 ? null
                 : flexRender(header.column.columnDef.header, header.getContext())))))))),
-            React__default.createElement(b, null, table.getRowModel().rows.map((row) => (React__default.createElement(P, { key: row.id, align: "center", className: "msw-dt-http-control-row", onClick: () => {
+            React__default.createElement(b, null, table.getRowModel().rows.map((row) => (React__default.createElement(P, { key: row.id, align: "center", className: `msw-dt-http-control-row ${row.original.handler === currentHandler && "msw-dt-current-row"}`, onClick: () => {
                     setDebuggerHandler(row.original.handler);
                 } }, row.getVisibleCells().map((cell) => (React__default.createElement(T, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
 };
@@ -27967,6 +27968,109 @@ const PathParamSetter = ({ paramValues, onParamChange, }) => {
                 } }))))))));
 };
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded$3w = ["color"];
+var PlayIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3w);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M3.24182 2.32181C3.3919 2.23132 3.5784 2.22601 3.73338 2.30781L12.7334 7.05781C12.8974 7.14436 13 7.31457 13 7.5C13 7.68543 12.8974 7.85564 12.7334 7.94219L3.73338 12.6922C3.5784 12.774 3.3919 12.7687 3.24182 12.6782C3.09175 12.5877 3 12.4252 3 12.25V2.75C3 2.57476 3.09175 2.4123 3.24182 2.32181ZM4 3.57925V11.4207L11.4288 7.5L4 3.57925Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$3x = ["color"];
+var PlusIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3x);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$3E = ["color"];
+var ReloadIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3E);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M1.84998 7.49998C1.84998 4.66458 4.05979 1.84998 7.49998 1.84998C10.2783 1.84998 11.6515 3.9064 12.2367 5H10.5C10.2239 5 10 5.22386 10 5.5C10 5.77614 10.2239 6 10.5 6H13.5C13.7761 6 14 5.77614 14 5.5V2.5C14 2.22386 13.7761 2 13.5 2C13.2239 2 13 2.22386 13 2.5V4.31318C12.2955 3.07126 10.6659 0.849976 7.49998 0.849976C3.43716 0.849976 0.849976 4.18537 0.849976 7.49998C0.849976 10.8146 3.43716 14.15 7.49998 14.15C9.44382 14.15 11.0622 13.3808 12.2145 12.2084C12.8315 11.5806 13.3133 10.839 13.6418 10.0407C13.7469 9.78536 13.6251 9.49315 13.3698 9.38806C13.1144 9.28296 12.8222 9.40478 12.7171 9.66014C12.4363 10.3425 12.0251 10.9745 11.5013 11.5074C10.5295 12.4963 9.16504 13.15 7.49998 13.15C4.05979 13.15 1.84998 10.3354 1.84998 7.49998Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$4G = ["color"];
+var TrashIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4G);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M5.5 1C5.22386 1 5 1.22386 5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5ZM3 3.5C3 3.22386 3.22386 3 3.5 3H5H10H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5ZM5 4H10V12H5V4Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 const KeyValueInputList = ({ items, setItems, title, }) => {
     const id = useId$1();
     const [key, setKey] = useState("");
@@ -28003,15 +28107,27 @@ const KeyValueInputList = ({ items, setItems, title, }) => {
                     border: "1px solid #ccc",
                     width: "180px",
                 } }),
-            React__default.createElement(o$2, { onClick: handleAdd, variant: "soft" }, "Add")),
+            React__default.createElement(o$2, { onClick: handleAdd, variant: "soft" },
+                React__default.createElement(PlusIcon, null),
+                "Add")),
         React__default.createElement(p$3, { direction: "column", gap: "1" }, Object.entries(items).map(([key, value]) => (React__default.createElement(p$3, { key: key, style: {
                 backgroundColor: "#f5f5f5",
                 borderRadius: "4px",
-                width: "fit-content"
+                width: "fit-content",
             }, align: "center", gap: "2", py: "1" },
-            React__default.createElement("span", { style: { width: "160px", paddingLeft: "8px", boxSizing: "border-box" } }, key),
-            React__default.createElement("span", { style: { width: "180px", paddingLeft: "8px", boxSizing: "border-box" } }, value),
-            React__default.createElement(o$2, { onClick: () => handleDelete(key), variant: "soft", color: "crimson" }, "Delete")))))));
+            React__default.createElement("span", { style: {
+                    width: "160px",
+                    paddingLeft: "8px",
+                    boxSizing: "border-box",
+                } }, key),
+            React__default.createElement("span", { style: {
+                    width: "180px",
+                    paddingLeft: "8px",
+                    boxSizing: "border-box",
+                } }, value),
+            React__default.createElement(o$2, { onClick: () => handleDelete(key), variant: "soft", color: "crimson" },
+                React__default.createElement(TrashIcon, null),
+                "Delete")))))));
 };
 
 /**
@@ -28085,7 +28201,9 @@ const RequestPreview = ({ url, paramValues, headers = {}, searchParams = {}, })
                     borderRadius: "4px",
                     backgroundColor: loading ? "#f5f5f5" : undefined,
                     cursor: loading ? "not-allowed" : "pointer",
-                }, color: "gray", variant: "outline" }, loading ? "Fetching..." : "Send Request"),
+                }, color: "gray", variant: "outline" },
+                React__default.createElement(PlayIcon, null),
+                loading ? "Fetching..." : "Send Request"),
             error && (React__default.createElement(p$6, { style: {
                     marginTop: "8px",
                     color: "#f44336",
@@ -28170,7 +28288,9 @@ ThemeProvider.displayName = "ThemeProvider";
 const ToolButtonGroup = () => {
     const { resetMSWDevTool } = useHandlerStore();
     return (React__default.createElement(p$3, { gap: "8", py: "4" },
-        React__default.createElement(o$2, { onClick: () => resetMSWDevTool() }, "Reset Dev tool")));
+        React__default.createElement(o$2, { onClick: () => resetMSWDevTool() },
+            React__default.createElement(ReloadIcon, null),
+            "Reset Dev tool")));
 };
 
 const MSWDevTool = () => {