msw-dev-tool 1.0.23 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ui/Table/PreviewHandler/KeyValueInputList.js +72 -0
- package/dist/cjs/ui/Table/PreviewHandler/KeyValueInputList.js.map +1 -0
- package/dist/cjs/ui/Table/PreviewHandler/PathParamSetter.js +1 -1
- package/dist/cjs/ui/Table/PreviewHandler/PathParamSetter.js.map +1 -1
- package/dist/cjs/ui/Table/PreviewHandler/RequestPreview.js +7 -2
- package/dist/cjs/ui/Table/PreviewHandler/RequestPreview.js.map +1 -1
- package/dist/cjs/ui/Table/PreviewHandler/index.js +5 -1
- package/dist/cjs/ui/Table/PreviewHandler/index.js.map +1 -1
- package/dist/esm/ui/Table/PreviewHandler/KeyValueInputList.js +70 -0
- package/dist/esm/ui/Table/PreviewHandler/KeyValueInputList.js.map +1 -0
- package/dist/esm/ui/Table/PreviewHandler/PathParamSetter.js +1 -1
- package/dist/esm/ui/Table/PreviewHandler/PathParamSetter.js.map +1 -1
- package/dist/esm/ui/Table/PreviewHandler/RequestPreview.js +7 -2
- package/dist/esm/ui/Table/PreviewHandler/RequestPreview.js.map +1 -1
- package/dist/esm/ui/Table/PreviewHandler/index.js +5 -1
- package/dist/esm/ui/Table/PreviewHandler/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
const KeyValueInputList = ({ items, setItems, }) => {
|
|
6
|
+
const [key, setKey] = React.useState("");
|
|
7
|
+
const [value, setValue] = React.useState("");
|
|
8
|
+
const handleAdd = () => {
|
|
9
|
+
if (!key.trim() || !value.trim())
|
|
10
|
+
return;
|
|
11
|
+
setItems((prev) => ({
|
|
12
|
+
...prev,
|
|
13
|
+
[key]: value,
|
|
14
|
+
}));
|
|
15
|
+
setKey("");
|
|
16
|
+
setValue("");
|
|
17
|
+
};
|
|
18
|
+
const handleDelete = (keyToDelete) => {
|
|
19
|
+
setItems((prev) => {
|
|
20
|
+
const newItems = { ...prev };
|
|
21
|
+
delete newItems[keyToDelete];
|
|
22
|
+
return newItems;
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
return (React.createElement("div", null,
|
|
26
|
+
React.createElement("div", { style: {
|
|
27
|
+
display: "flex",
|
|
28
|
+
gap: "8px",
|
|
29
|
+
width: "100%",
|
|
30
|
+
} },
|
|
31
|
+
React.createElement("input", { type: "text", value: key, onChange: (e) => setKey(e.target.value), placeholder: "Key", style: {
|
|
32
|
+
padding: "8px",
|
|
33
|
+
borderRadius: "4px",
|
|
34
|
+
border: "1px solid #ccc",
|
|
35
|
+
width: "100px",
|
|
36
|
+
} }),
|
|
37
|
+
React.createElement("input", { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Value", style: {
|
|
38
|
+
padding: "8px",
|
|
39
|
+
borderRadius: "4px",
|
|
40
|
+
border: "1px solid #ccc",
|
|
41
|
+
width: "100px",
|
|
42
|
+
} }),
|
|
43
|
+
React.createElement("button", { onClick: handleAdd, style: {
|
|
44
|
+
padding: "8px 16px",
|
|
45
|
+
backgroundColor: "#0066ff",
|
|
46
|
+
color: "white",
|
|
47
|
+
border: "none",
|
|
48
|
+
borderRadius: "4px",
|
|
49
|
+
cursor: "pointer",
|
|
50
|
+
} }, "Add")),
|
|
51
|
+
React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, Object.entries(items).map(([key, value]) => (React.createElement("div", { key: key, style: {
|
|
52
|
+
display: "flex",
|
|
53
|
+
alignItems: "center",
|
|
54
|
+
padding: "8px",
|
|
55
|
+
backgroundColor: "#f5f5f5",
|
|
56
|
+
borderRadius: "4px",
|
|
57
|
+
gap: "8px",
|
|
58
|
+
} },
|
|
59
|
+
React.createElement("span", { style: { flex: 1 } }, key),
|
|
60
|
+
React.createElement("span", { style: { flex: 1 } }, value),
|
|
61
|
+
React.createElement("button", { onClick: () => handleDelete(key), style: {
|
|
62
|
+
padding: "4px 8px",
|
|
63
|
+
backgroundColor: "#ff4444",
|
|
64
|
+
color: "white",
|
|
65
|
+
border: "none",
|
|
66
|
+
borderRadius: "4px",
|
|
67
|
+
cursor: "pointer",
|
|
68
|
+
} }, "Delete")))))));
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
exports.KeyValueInputList = KeyValueInputList;
|
|
72
|
+
//# sourceMappingURL=KeyValueInputList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyValueInputList.js","sources":["../../../../../src/ui/Table/PreviewHandler/KeyValueInputList.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface KeyValueInputListProps {\n items: Record<string, string>;\n setItems: React.Dispatch<React.SetStateAction<Record<string, string>>>;\n}\n\nexport const KeyValueInputList = ({\n items,\n setItems,\n}: KeyValueInputListProps) => {\n const [key, setKey] = useState(\"\");\n const [value, setValue] = useState(\"\");\n\n const handleAdd = () => {\n if (!key.trim() || !value.trim()) return;\n\n setItems((prev) => ({\n ...prev,\n [key]: value,\n }));\n setKey(\"\");\n setValue(\"\");\n };\n\n const handleDelete = (keyToDelete: string) => {\n setItems((prev) => {\n const newItems = { ...prev };\n delete newItems[keyToDelete];\n return newItems;\n });\n };\n\n return (\n <div>\n <div\n style={{\n display: \"flex\",\n gap: \"8px\",\n width: \"100%\",\n }}\n >\n <input\n type=\"text\"\n value={key}\n onChange={(e) => setKey(e.target.value)}\n placeholder=\"Key\"\n style={{\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width:\"100px\",\n }}\n />\n <input\n type=\"text\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder=\"Value\"\n style={{\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100px\",\n }}\n />\n <button\n onClick={handleAdd}\n style={{\n padding: \"8px 16px\",\n backgroundColor: \"#0066ff\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Add\n </button>\n </div>\n\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(items).map(([key, value]) => (\n <div\n key={key}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n padding: \"8px\",\n backgroundColor: \"#f5f5f5\",\n borderRadius: \"4px\",\n gap: \"8px\",\n }}\n >\n <span style={{ flex: 1 }}>{key}</span>\n <span style={{ flex: 1 }}>{value}</span>\n <button\n onClick={() => handleDelete(key)}\n style={{\n padding: \"4px 8px\",\n backgroundColor: \"#ff4444\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Delete\n </button>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["useState"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ const PathParamSetter = ({ paramValues, onParamChange, }) => {
|
|
|
10
10
|
React.createElement("label", { htmlFor: `param-${key}`, style: { minWidth: "100px" } },
|
|
11
11
|
key,
|
|
12
12
|
":"),
|
|
13
|
-
React.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), style: {
|
|
13
|
+
React.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), placeholder: "value of path param", style: {
|
|
14
14
|
padding: "4px 8px",
|
|
15
15
|
borderRadius: "4px",
|
|
16
16
|
border: "1px solid #ccc",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PathParamSetter.js","sources":["../../../../../src/ui/Table/PreviewHandler/PathParamSetter.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React from \"react\";\n\nexport const PathParamSetter = ({\n paramValues,\n onParamChange,\n}: {\n paramValues?: PathParams<string>;\n onParamChange: (key: string, value: string) => void;\n}) => {\n return (\n paramValues &&\n Object.keys(paramValues).length > 0 && (\n <>\n <h3>Path Parameters</h3>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(paramValues).map(([key, value]) => (\n <div\n key={key}\n style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}\n >\n <label htmlFor={`param-${key}`} style={{ minWidth: \"100px\" }}>\n {key}:\n </label>\n <input\n id={`param-${key}`}\n type=\"text\"\n value={value}\n onChange={(e) => onParamChange(key, e.target.value)}\n style={{\n padding: \"4px 8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100%\",\n }}\n />\n </div>\n ))}\n </div>\n </>\n )\n );\n};\n"],"names":[],"mappings":";;;;AAGa,MAAA,eAAe,GAAG,CAAC,EAC9B,WAAW,EACX,aAAa,GAId,KAAI;AACH,IAAA,QACE,WAAW;QACX,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,KACjC,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAwB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,CAAA;QACxB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EACjE,EAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAC5C,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA;AAE5D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,CAAS,MAAA,EAAA,GAAG,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA;gBACzD,GAAG;AACE,gBAAA,GAAA,CAAA;AACR,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"PathParamSetter.js","sources":["../../../../../src/ui/Table/PreviewHandler/PathParamSetter.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React from \"react\";\n\nexport const PathParamSetter = ({\n paramValues,\n onParamChange,\n}: {\n paramValues?: PathParams<string>;\n onParamChange: (key: string, value: string) => void;\n}) => {\n return (\n paramValues &&\n Object.keys(paramValues).length > 0 && (\n <>\n <h3>Path Parameters</h3>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(paramValues).map(([key, value]) => (\n <div\n key={key}\n style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}\n >\n <label htmlFor={`param-${key}`} style={{ minWidth: \"100px\" }}>\n {key}:\n </label>\n <input\n id={`param-${key}`}\n type=\"text\"\n value={value}\n onChange={(e) => onParamChange(key, e.target.value)}\n placeholder=\"value of path param\"\n style={{\n padding: \"4px 8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100%\",\n }}\n />\n </div>\n ))}\n </div>\n </>\n )\n );\n};\n"],"names":[],"mappings":";;;;AAGa,MAAA,eAAe,GAAG,CAAC,EAC9B,WAAW,EACX,aAAa,GAId,KAAI;AACH,IAAA,QACE,WAAW;QACX,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,KACjC,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAwB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,CAAA;QACxB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EACjE,EAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAC5C,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA;AAE5D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,CAAS,MAAA,EAAA,GAAG,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA;gBACzD,GAAG;AACE,gBAAA,GAAA,CAAA;AACR,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,CAAA,MAAA,EAAS,GAAG,CAAA,CAAE,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACnD,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAE;AACL,oBAAA,OAAO,EAAE,SAAS;AAClB,oBAAA,YAAY,EAAE,KAAK;AACnB,oBAAA,MAAM,EAAE,gBAAgB;AACxB,oBAAA,KAAK,EAAE,MAAM;AACd,iBAAA,EAAA,CACD,CACE,CACP,CAAC,CACE,CACL,CACJ,EACD;AACJ;;;;"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var url = require('../../../utils/url.js');
|
|
5
5
|
|
|
6
|
-
const RequestPreview = ({ url: url$1, paramValues, }) => {
|
|
6
|
+
const RequestPreview = ({ url: url$1, paramValues, headers = {}, }) => {
|
|
7
7
|
const [loading, setLoading] = React.useState(false);
|
|
8
8
|
const [error, setError] = React.useState(null);
|
|
9
9
|
const [response, setResponse] = React.useState(null);
|
|
@@ -12,7 +12,12 @@ const RequestPreview = ({ url: url$1, paramValues, }) => {
|
|
|
12
12
|
const handleFetch = () => {
|
|
13
13
|
setLoading(true);
|
|
14
14
|
setError(null);
|
|
15
|
-
fetch(totalUrl
|
|
15
|
+
fetch(totalUrl, {
|
|
16
|
+
headers: {
|
|
17
|
+
'Content-Type': 'application/json',
|
|
18
|
+
...headers,
|
|
19
|
+
},
|
|
20
|
+
})
|
|
16
21
|
.then((res) => res.json())
|
|
17
22
|
.then((data) => {
|
|
18
23
|
setResponse(data);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequestPreview.js","sources":["../../../../../src/ui/Table/PreviewHandler/RequestPreview.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React, { useState } from \"react\";\nimport { getPathWithParams, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n url,\n paramValues,\n}: {\n url: URL;\n paramValues?: PathParams<string>;\n}) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [response, setResponse] = useState<any>(null);\n\n const finalPath = getPathWithParams(url, paramValues);\n const totalUrl = getTotalUrl(url.origin, finalPath);\n\n const handleFetch = () => {\n setLoading(true);\n setError(null);\n\n fetch(totalUrl)\n .then((res) => res.json())\n .then((data) => {\n setResponse(data);\n setLoading(false);\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(\"Failed to fetch\"));\n setLoading(false);\n });\n };\n\n return (\n <div style={{ marginTop: \"20px\" }}>\n <h3>Response</h3>\n <div\n style={{\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n <button\n onClick={handleFetch}\n disabled={loading}\n style={{\n padding: \"4px 12px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n backgroundColor: loading ? \"#f5f5f5\" : \"white\",\n cursor: loading ? \"not-allowed\" : \"pointer\",\n }}\n >\n {loading ? \"Fetching...\" : \"Send Request\"}\n </button>\n\n {error && (\n <div\n style={{\n marginTop: \"8px\",\n color: \"#f44336\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n Error: {error.message}\n </div>\n )}\n\n {response && (\n <div\n style={{\n marginTop: \"8px\",\n maxHeight: \"200px\",\n overflow: \"scroll\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n <pre\n style={{\n margin: 0,\n overflow: \"auto\",\n borderRadius: \"4px\",\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n {JSON.stringify(response, null, 2)}\n </pre>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["url","useState","getPathWithParams","getTotalUrl"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"RequestPreview.js","sources":["../../../../../src/ui/Table/PreviewHandler/RequestPreview.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React, { useState } from \"react\";\nimport { getPathWithParams, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n url,\n paramValues,\n headers = {},\n}: {\n url: URL;\n paramValues?: PathParams<string>;\n headers?: Record<string, string>;\n}) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [response, setResponse] = useState<any>(null);\n\n const finalPath = getPathWithParams(url, paramValues);\n const totalUrl = getTotalUrl(url.origin, finalPath);\n\n const handleFetch = () => {\n setLoading(true);\n setError(null);\n\n fetch(totalUrl, {\n headers: {\n 'Content-Type': 'application/json',\n ...headers,\n },\n })\n .then((res) => res.json())\n .then((data) => {\n setResponse(data);\n setLoading(false);\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(\"Failed to fetch\"));\n setLoading(false);\n });\n };\n\n return (\n <div style={{ marginTop: \"20px\" }}>\n <h3>Response</h3>\n <div\n style={{\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n <button\n onClick={handleFetch}\n disabled={loading}\n style={{\n padding: \"4px 12px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n backgroundColor: loading ? \"#f5f5f5\" : \"white\",\n cursor: loading ? \"not-allowed\" : \"pointer\",\n }}\n >\n {loading ? \"Fetching...\" : \"Send Request\"}\n </button>\n\n {error && (\n <div\n style={{\n marginTop: \"8px\",\n color: \"#f44336\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n Error: {error.message}\n </div>\n )}\n\n {response && (\n <div\n style={{\n marginTop: \"8px\",\n maxHeight: \"200px\",\n overflow: \"scroll\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n <pre\n style={{\n margin: 0,\n overflow: \"auto\",\n borderRadius: \"4px\",\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n {JSON.stringify(response, null, 2)}\n </pre>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["url","useState","getPathWithParams","getTotalUrl"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ var reactDom = require('react-dom');
|
|
|
5
5
|
var msw = require('msw');
|
|
6
6
|
var PathParamSetter = require('./PathParamSetter.js');
|
|
7
7
|
var RequestPreview = require('./RequestPreview.js');
|
|
8
|
+
var KeyValueInputList = require('./KeyValueInputList.js');
|
|
8
9
|
|
|
9
10
|
const PreviewHandler = ({ handler, onClose }) => {
|
|
10
11
|
const path = handler.info.path;
|
|
@@ -16,6 +17,7 @@ const PreviewHandler = ({ handler, onClose }) => {
|
|
|
16
17
|
[key]: "",
|
|
17
18
|
}), {})
|
|
18
19
|
: undefined);
|
|
20
|
+
const [headers, setHeaders] = React.useState({});
|
|
19
21
|
const handleParamChange = (key, value) => {
|
|
20
22
|
setParamValues((prev) => ({
|
|
21
23
|
...prev,
|
|
@@ -45,7 +47,9 @@ const PreviewHandler = ({ handler, onClose }) => {
|
|
|
45
47
|
React.createElement("h2", { style: { marginBottom: "20px", paddingRight: "24px" } }, "Handler Preview"),
|
|
46
48
|
React.createElement("p", { style: { fontSize: "0.8rem", color: "#666", overflow: "scroll" } }, url.toString()),
|
|
47
49
|
React.createElement(PathParamSetter.PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
|
|
48
|
-
React.createElement(
|
|
50
|
+
React.createElement("h3", null, "Headers"),
|
|
51
|
+
React.createElement(KeyValueInputList.KeyValueInputList, { items: headers, setItems: setHeaders }),
|
|
52
|
+
React.createElement(RequestPreview.RequestPreview, { url: url, paramValues: paramValues, headers: headers }))), document.body);
|
|
49
53
|
};
|
|
50
54
|
|
|
51
55
|
exports.PreviewHandler = PreviewHandler;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/ui/Table/PreviewHandler/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { HttpHandler, matchRequestUrl, PathParams } from \"msw\";\nimport { PathParamSetter } from \"./PathParamSetter\";\nimport { RequestPreview } from \"./RequestPreview\";\n\ninterface PreviewHandlerProps {\n handler: HttpHandler;\n onClose: () => void;\n}\n\nexport const PreviewHandler = ({ handler, onClose }: PreviewHandlerProps) => {\n const path = handler.info.path;\n const url = new URL(String(path), location.href);\n const { params } = matchRequestUrl(url, path, url.origin);\n\n const [paramValues, setParamValues] = useState<\n PathParams<string> | undefined\n >(\n params\n ? Object.keys(params).reduce(\n (acc, key) => ({\n ...acc,\n [key]: \"\",\n }),\n {}\n )\n : undefined\n );\n\n const handleParamChange = (key: string, value: string) => {\n setParamValues((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n return createPortal(\n <div\n style={{\n padding: \"20px\",\n position: \"fixed\",\n zIndex: 9999,\n backgroundColor: \"white\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n width: \"320px\",\n }}\n >\n <div style={{ position: \"relative\" }}>\n <button\n onClick={onClose}\n style={{\n position: \"absolute\",\n right: 0,\n top: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"1.2rem\",\n padding: \"4px\",\n }}\n >\n ✕\n </button>\n\n <h2 style={{ marginBottom: \"20px\", paddingRight: \"24px\" }}>\n Handler Preview\n </h2>\n <p style={{ fontSize: \"0.8rem\", color: \"#666\", overflow: \"scroll\" }}>\n {url.toString()}\n </p>\n <PathParamSetter\n paramValues={paramValues}\n onParamChange={handleParamChange}\n />\n <RequestPreview url={url} paramValues={paramValues} />\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["matchRequestUrl","useState","createPortal","PathParamSetter","RequestPreview"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/ui/Table/PreviewHandler/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { HttpHandler, matchRequestUrl, PathParams } from \"msw\";\nimport { PathParamSetter } from \"./PathParamSetter\";\nimport { RequestPreview } from \"./RequestPreview\";\nimport { KeyValueInputList } from \"./KeyValueInputList\";\n\ninterface PreviewHandlerProps {\n handler: HttpHandler;\n onClose: () => void;\n}\n\nexport const PreviewHandler = ({ handler, onClose }: PreviewHandlerProps) => {\n const path = handler.info.path;\n const url = new URL(String(path), location.href);\n const { params } = matchRequestUrl(url, path, url.origin);\n\n const [paramValues, setParamValues] = useState<\n PathParams<string> | undefined\n >(\n params\n ? Object.keys(params).reduce(\n (acc, key) => ({\n ...acc,\n [key]: \"\",\n }),\n {}\n )\n : undefined\n );\n const [headers, setHeaders] = useState<Record<string, string>>({});\n\n const handleParamChange = (key: string, value: string) => {\n setParamValues((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n return createPortal(\n <div\n style={{\n padding: \"20px\",\n position: \"fixed\",\n zIndex: 9999,\n backgroundColor: \"white\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n width: \"320px\",\n }}\n >\n <div style={{ position: \"relative\" }}>\n <button\n onClick={onClose}\n style={{\n position: \"absolute\",\n right: 0,\n top: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"1.2rem\",\n padding: \"4px\",\n }}\n >\n ✕\n </button>\n\n <h2 style={{ marginBottom: \"20px\", paddingRight: \"24px\" }}>\n Handler Preview\n </h2>\n <p style={{ fontSize: \"0.8rem\", color: \"#666\", overflow: \"scroll\" }}>\n {url.toString()}\n </p>\n <PathParamSetter\n paramValues={paramValues}\n onParamChange={handleParamChange}\n />\n <h3>Headers</h3>\n <KeyValueInputList items={headers} setItems={setHeaders} />\n <RequestPreview url={url} paramValues={paramValues} headers={headers} />\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["matchRequestUrl","useState","createPortal","PathParamSetter","KeyValueInputList","RequestPreview"],"mappings":"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"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React__default, { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
const KeyValueInputList = ({ items, setItems, }) => {
|
|
4
|
+
const [key, setKey] = useState("");
|
|
5
|
+
const [value, setValue] = useState("");
|
|
6
|
+
const handleAdd = () => {
|
|
7
|
+
if (!key.trim() || !value.trim())
|
|
8
|
+
return;
|
|
9
|
+
setItems((prev) => ({
|
|
10
|
+
...prev,
|
|
11
|
+
[key]: value,
|
|
12
|
+
}));
|
|
13
|
+
setKey("");
|
|
14
|
+
setValue("");
|
|
15
|
+
};
|
|
16
|
+
const handleDelete = (keyToDelete) => {
|
|
17
|
+
setItems((prev) => {
|
|
18
|
+
const newItems = { ...prev };
|
|
19
|
+
delete newItems[keyToDelete];
|
|
20
|
+
return newItems;
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
return (React__default.createElement("div", null,
|
|
24
|
+
React__default.createElement("div", { style: {
|
|
25
|
+
display: "flex",
|
|
26
|
+
gap: "8px",
|
|
27
|
+
width: "100%",
|
|
28
|
+
} },
|
|
29
|
+
React__default.createElement("input", { type: "text", value: key, onChange: (e) => setKey(e.target.value), placeholder: "Key", style: {
|
|
30
|
+
padding: "8px",
|
|
31
|
+
borderRadius: "4px",
|
|
32
|
+
border: "1px solid #ccc",
|
|
33
|
+
width: "100px",
|
|
34
|
+
} }),
|
|
35
|
+
React__default.createElement("input", { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Value", style: {
|
|
36
|
+
padding: "8px",
|
|
37
|
+
borderRadius: "4px",
|
|
38
|
+
border: "1px solid #ccc",
|
|
39
|
+
width: "100px",
|
|
40
|
+
} }),
|
|
41
|
+
React__default.createElement("button", { onClick: handleAdd, style: {
|
|
42
|
+
padding: "8px 16px",
|
|
43
|
+
backgroundColor: "#0066ff",
|
|
44
|
+
color: "white",
|
|
45
|
+
border: "none",
|
|
46
|
+
borderRadius: "4px",
|
|
47
|
+
cursor: "pointer",
|
|
48
|
+
} }, "Add")),
|
|
49
|
+
React__default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, Object.entries(items).map(([key, value]) => (React__default.createElement("div", { key: key, style: {
|
|
50
|
+
display: "flex",
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
padding: "8px",
|
|
53
|
+
backgroundColor: "#f5f5f5",
|
|
54
|
+
borderRadius: "4px",
|
|
55
|
+
gap: "8px",
|
|
56
|
+
} },
|
|
57
|
+
React__default.createElement("span", { style: { flex: 1 } }, key),
|
|
58
|
+
React__default.createElement("span", { style: { flex: 1 } }, value),
|
|
59
|
+
React__default.createElement("button", { onClick: () => handleDelete(key), style: {
|
|
60
|
+
padding: "4px 8px",
|
|
61
|
+
backgroundColor: "#ff4444",
|
|
62
|
+
color: "white",
|
|
63
|
+
border: "none",
|
|
64
|
+
borderRadius: "4px",
|
|
65
|
+
cursor: "pointer",
|
|
66
|
+
} }, "Delete")))))));
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export { KeyValueInputList };
|
|
70
|
+
//# sourceMappingURL=KeyValueInputList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyValueInputList.js","sources":["../../../../../src/ui/Table/PreviewHandler/KeyValueInputList.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface KeyValueInputListProps {\n items: Record<string, string>;\n setItems: React.Dispatch<React.SetStateAction<Record<string, string>>>;\n}\n\nexport const KeyValueInputList = ({\n items,\n setItems,\n}: KeyValueInputListProps) => {\n const [key, setKey] = useState(\"\");\n const [value, setValue] = useState(\"\");\n\n const handleAdd = () => {\n if (!key.trim() || !value.trim()) return;\n\n setItems((prev) => ({\n ...prev,\n [key]: value,\n }));\n setKey(\"\");\n setValue(\"\");\n };\n\n const handleDelete = (keyToDelete: string) => {\n setItems((prev) => {\n const newItems = { ...prev };\n delete newItems[keyToDelete];\n return newItems;\n });\n };\n\n return (\n <div>\n <div\n style={{\n display: \"flex\",\n gap: \"8px\",\n width: \"100%\",\n }}\n >\n <input\n type=\"text\"\n value={key}\n onChange={(e) => setKey(e.target.value)}\n placeholder=\"Key\"\n style={{\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width:\"100px\",\n }}\n />\n <input\n type=\"text\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder=\"Value\"\n style={{\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100px\",\n }}\n />\n <button\n onClick={handleAdd}\n style={{\n padding: \"8px 16px\",\n backgroundColor: \"#0066ff\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Add\n </button>\n </div>\n\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(items).map(([key, value]) => (\n <div\n key={key}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n padding: \"8px\",\n backgroundColor: \"#f5f5f5\",\n borderRadius: \"4px\",\n gap: \"8px\",\n }}\n >\n <span style={{ flex: 1 }}>{key}</span>\n <span style={{ flex: 1 }}>{value}</span>\n <button\n onClick={() => handleDelete(key)}\n style={{\n padding: \"4px 8px\",\n backgroundColor: \"#ff4444\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Delete\n </button>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ const PathParamSetter = ({ paramValues, onParamChange, }) => {
|
|
|
8
8
|
React__default.createElement("label", { htmlFor: `param-${key}`, style: { minWidth: "100px" } },
|
|
9
9
|
key,
|
|
10
10
|
":"),
|
|
11
|
-
React__default.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), style: {
|
|
11
|
+
React__default.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), placeholder: "value of path param", style: {
|
|
12
12
|
padding: "4px 8px",
|
|
13
13
|
borderRadius: "4px",
|
|
14
14
|
border: "1px solid #ccc",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PathParamSetter.js","sources":["../../../../../src/ui/Table/PreviewHandler/PathParamSetter.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React from \"react\";\n\nexport const PathParamSetter = ({\n paramValues,\n onParamChange,\n}: {\n paramValues?: PathParams<string>;\n onParamChange: (key: string, value: string) => void;\n}) => {\n return (\n paramValues &&\n Object.keys(paramValues).length > 0 && (\n <>\n <h3>Path Parameters</h3>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(paramValues).map(([key, value]) => (\n <div\n key={key}\n style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}\n >\n <label htmlFor={`param-${key}`} style={{ minWidth: \"100px\" }}>\n {key}:\n </label>\n <input\n id={`param-${key}`}\n type=\"text\"\n value={value}\n onChange={(e) => onParamChange(key, e.target.value)}\n style={{\n padding: \"4px 8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100%\",\n }}\n />\n </div>\n ))}\n </div>\n </>\n )\n );\n};\n"],"names":["React"],"mappings":";;AAGa,MAAA,eAAe,GAAG,CAAC,EAC9B,WAAW,EACX,aAAa,GAId,KAAI;AACH,IAAA,QACE,WAAW;QACX,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,KACjCA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAwB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,CAAA;QACxBA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EACjE,EAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAC5CA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA;AAE5D,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,CAAS,MAAA,EAAA,GAAG,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA;gBACzD,GAAG;AACE,gBAAA,GAAA,CAAA;AACR,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"PathParamSetter.js","sources":["../../../../../src/ui/Table/PreviewHandler/PathParamSetter.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React from \"react\";\n\nexport const PathParamSetter = ({\n paramValues,\n onParamChange,\n}: {\n paramValues?: PathParams<string>;\n onParamChange: (key: string, value: string) => void;\n}) => {\n return (\n paramValues &&\n Object.keys(paramValues).length > 0 && (\n <>\n <h3>Path Parameters</h3>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(paramValues).map(([key, value]) => (\n <div\n key={key}\n style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}\n >\n <label htmlFor={`param-${key}`} style={{ minWidth: \"100px\" }}>\n {key}:\n </label>\n <input\n id={`param-${key}`}\n type=\"text\"\n value={value}\n onChange={(e) => onParamChange(key, e.target.value)}\n placeholder=\"value of path param\"\n style={{\n padding: \"4px 8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100%\",\n }}\n />\n </div>\n ))}\n </div>\n </>\n )\n );\n};\n"],"names":["React"],"mappings":";;AAGa,MAAA,eAAe,GAAG,CAAC,EAC9B,WAAW,EACX,aAAa,GAId,KAAI;AACH,IAAA,QACE,WAAW;QACX,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,KACjCA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAwB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,CAAA;QACxBA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EACjE,EAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAC5CA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA;AAE5D,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,CAAS,MAAA,EAAA,GAAG,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA;gBACzD,GAAG;AACE,gBAAA,GAAA,CAAA;AACR,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,CAAA,MAAA,EAAS,GAAG,CAAA,CAAE,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACnD,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAE;AACL,oBAAA,OAAO,EAAE,SAAS;AAClB,oBAAA,YAAY,EAAE,KAAK;AACnB,oBAAA,MAAM,EAAE,gBAAgB;AACxB,oBAAA,KAAK,EAAE,MAAM;AACd,iBAAA,EAAA,CACD,CACE,CACP,CAAC,CACE,CACL,CACJ,EACD;AACJ;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React__default, { useState } from 'react';
|
|
2
2
|
import { getPathWithParams, getTotalUrl } from '../../../utils/url.js';
|
|
3
3
|
|
|
4
|
-
const RequestPreview = ({ url, paramValues, }) => {
|
|
4
|
+
const RequestPreview = ({ url, paramValues, headers = {}, }) => {
|
|
5
5
|
const [loading, setLoading] = useState(false);
|
|
6
6
|
const [error, setError] = useState(null);
|
|
7
7
|
const [response, setResponse] = useState(null);
|
|
@@ -10,7 +10,12 @@ const RequestPreview = ({ url, paramValues, }) => {
|
|
|
10
10
|
const handleFetch = () => {
|
|
11
11
|
setLoading(true);
|
|
12
12
|
setError(null);
|
|
13
|
-
fetch(totalUrl
|
|
13
|
+
fetch(totalUrl, {
|
|
14
|
+
headers: {
|
|
15
|
+
'Content-Type': 'application/json',
|
|
16
|
+
...headers,
|
|
17
|
+
},
|
|
18
|
+
})
|
|
14
19
|
.then((res) => res.json())
|
|
15
20
|
.then((data) => {
|
|
16
21
|
setResponse(data);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequestPreview.js","sources":["../../../../../src/ui/Table/PreviewHandler/RequestPreview.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React, { useState } from \"react\";\nimport { getPathWithParams, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n url,\n paramValues,\n}: {\n url: URL;\n paramValues?: PathParams<string>;\n}) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [response, setResponse] = useState<any>(null);\n\n const finalPath = getPathWithParams(url, paramValues);\n const totalUrl = getTotalUrl(url.origin, finalPath);\n\n const handleFetch = () => {\n setLoading(true);\n setError(null);\n\n fetch(totalUrl)\n .then((res) => res.json())\n .then((data) => {\n setResponse(data);\n setLoading(false);\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(\"Failed to fetch\"));\n setLoading(false);\n });\n };\n\n return (\n <div style={{ marginTop: \"20px\" }}>\n <h3>Response</h3>\n <div\n style={{\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n <button\n onClick={handleFetch}\n disabled={loading}\n style={{\n padding: \"4px 12px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n backgroundColor: loading ? \"#f5f5f5\" : \"white\",\n cursor: loading ? \"not-allowed\" : \"pointer\",\n }}\n >\n {loading ? \"Fetching...\" : \"Send Request\"}\n </button>\n\n {error && (\n <div\n style={{\n marginTop: \"8px\",\n color: \"#f44336\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n Error: {error.message}\n </div>\n )}\n\n {response && (\n <div\n style={{\n marginTop: \"8px\",\n maxHeight: \"200px\",\n overflow: \"scroll\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n <pre\n style={{\n margin: 0,\n overflow: \"auto\",\n borderRadius: \"4px\",\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n {JSON.stringify(response, null, 2)}\n </pre>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"RequestPreview.js","sources":["../../../../../src/ui/Table/PreviewHandler/RequestPreview.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React, { useState } from \"react\";\nimport { getPathWithParams, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n url,\n paramValues,\n headers = {},\n}: {\n url: URL;\n paramValues?: PathParams<string>;\n headers?: Record<string, string>;\n}) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [response, setResponse] = useState<any>(null);\n\n const finalPath = getPathWithParams(url, paramValues);\n const totalUrl = getTotalUrl(url.origin, finalPath);\n\n const handleFetch = () => {\n setLoading(true);\n setError(null);\n\n fetch(totalUrl, {\n headers: {\n 'Content-Type': 'application/json',\n ...headers,\n },\n })\n .then((res) => res.json())\n .then((data) => {\n setResponse(data);\n setLoading(false);\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(\"Failed to fetch\"));\n setLoading(false);\n });\n };\n\n return (\n <div style={{ marginTop: \"20px\" }}>\n <h3>Response</h3>\n <div\n style={{\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n <button\n onClick={handleFetch}\n disabled={loading}\n style={{\n padding: \"4px 12px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n backgroundColor: loading ? \"#f5f5f5\" : \"white\",\n cursor: loading ? \"not-allowed\" : \"pointer\",\n }}\n >\n {loading ? \"Fetching...\" : \"Send Request\"}\n </button>\n\n {error && (\n <div\n style={{\n marginTop: \"8px\",\n color: \"#f44336\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n Error: {error.message}\n </div>\n )}\n\n {response && (\n <div\n style={{\n marginTop: \"8px\",\n maxHeight: \"200px\",\n overflow: \"scroll\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n <pre\n style={{\n margin: 0,\n overflow: \"auto\",\n borderRadius: \"4px\",\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n {JSON.stringify(response, null, 2)}\n </pre>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
|
|
|
3
3
|
import { matchRequestUrl } from 'msw';
|
|
4
4
|
import { PathParamSetter } from './PathParamSetter.js';
|
|
5
5
|
import { RequestPreview } from './RequestPreview.js';
|
|
6
|
+
import { KeyValueInputList } from './KeyValueInputList.js';
|
|
6
7
|
|
|
7
8
|
const PreviewHandler = ({ handler, onClose }) => {
|
|
8
9
|
const path = handler.info.path;
|
|
@@ -14,6 +15,7 @@ const PreviewHandler = ({ handler, onClose }) => {
|
|
|
14
15
|
[key]: "",
|
|
15
16
|
}), {})
|
|
16
17
|
: undefined);
|
|
18
|
+
const [headers, setHeaders] = useState({});
|
|
17
19
|
const handleParamChange = (key, value) => {
|
|
18
20
|
setParamValues((prev) => ({
|
|
19
21
|
...prev,
|
|
@@ -43,7 +45,9 @@ const PreviewHandler = ({ handler, onClose }) => {
|
|
|
43
45
|
React__default.createElement("h2", { style: { marginBottom: "20px", paddingRight: "24px" } }, "Handler Preview"),
|
|
44
46
|
React__default.createElement("p", { style: { fontSize: "0.8rem", color: "#666", overflow: "scroll" } }, url.toString()),
|
|
45
47
|
React__default.createElement(PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
|
|
46
|
-
React__default.createElement(
|
|
48
|
+
React__default.createElement("h3", null, "Headers"),
|
|
49
|
+
React__default.createElement(KeyValueInputList, { items: headers, setItems: setHeaders }),
|
|
50
|
+
React__default.createElement(RequestPreview, { url: url, paramValues: paramValues, headers: headers }))), document.body);
|
|
47
51
|
};
|
|
48
52
|
|
|
49
53
|
export { PreviewHandler };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/ui/Table/PreviewHandler/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { HttpHandler, matchRequestUrl, PathParams } from \"msw\";\nimport { PathParamSetter } from \"./PathParamSetter\";\nimport { RequestPreview } from \"./RequestPreview\";\n\ninterface PreviewHandlerProps {\n handler: HttpHandler;\n onClose: () => void;\n}\n\nexport const PreviewHandler = ({ handler, onClose }: PreviewHandlerProps) => {\n const path = handler.info.path;\n const url = new URL(String(path), location.href);\n const { params } = matchRequestUrl(url, path, url.origin);\n\n const [paramValues, setParamValues] = useState<\n PathParams<string> | undefined\n >(\n params\n ? Object.keys(params).reduce(\n (acc, key) => ({\n ...acc,\n [key]: \"\",\n }),\n {}\n )\n : undefined\n );\n\n const handleParamChange = (key: string, value: string) => {\n setParamValues((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n return createPortal(\n <div\n style={{\n padding: \"20px\",\n position: \"fixed\",\n zIndex: 9999,\n backgroundColor: \"white\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n width: \"320px\",\n }}\n >\n <div style={{ position: \"relative\" }}>\n <button\n onClick={onClose}\n style={{\n position: \"absolute\",\n right: 0,\n top: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"1.2rem\",\n padding: \"4px\",\n }}\n >\n ✕\n </button>\n\n <h2 style={{ marginBottom: \"20px\", paddingRight: \"24px\" }}>\n Handler Preview\n </h2>\n <p style={{ fontSize: \"0.8rem\", color: \"#666\", overflow: \"scroll\" }}>\n {url.toString()}\n </p>\n <PathParamSetter\n paramValues={paramValues}\n onParamChange={handleParamChange}\n />\n <RequestPreview url={url} paramValues={paramValues} />\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/ui/Table/PreviewHandler/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { HttpHandler, matchRequestUrl, PathParams } from \"msw\";\nimport { PathParamSetter } from \"./PathParamSetter\";\nimport { RequestPreview } from \"./RequestPreview\";\nimport { KeyValueInputList } from \"./KeyValueInputList\";\n\ninterface PreviewHandlerProps {\n handler: HttpHandler;\n onClose: () => void;\n}\n\nexport const PreviewHandler = ({ handler, onClose }: PreviewHandlerProps) => {\n const path = handler.info.path;\n const url = new URL(String(path), location.href);\n const { params } = matchRequestUrl(url, path, url.origin);\n\n const [paramValues, setParamValues] = useState<\n PathParams<string> | undefined\n >(\n params\n ? Object.keys(params).reduce(\n (acc, key) => ({\n ...acc,\n [key]: \"\",\n }),\n {}\n )\n : undefined\n );\n const [headers, setHeaders] = useState<Record<string, string>>({});\n\n const handleParamChange = (key: string, value: string) => {\n setParamValues((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n return createPortal(\n <div\n style={{\n padding: \"20px\",\n position: \"fixed\",\n zIndex: 9999,\n backgroundColor: \"white\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n width: \"320px\",\n }}\n >\n <div style={{ position: \"relative\" }}>\n <button\n onClick={onClose}\n style={{\n position: \"absolute\",\n right: 0,\n top: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"1.2rem\",\n padding: \"4px\",\n }}\n >\n ✕\n </button>\n\n <h2 style={{ marginBottom: \"20px\", paddingRight: \"24px\" }}>\n Handler Preview\n </h2>\n <p style={{ fontSize: \"0.8rem\", color: \"#666\", overflow: \"scroll\" }}>\n {url.toString()}\n </p>\n <PathParamSetter\n paramValues={paramValues}\n onParamChange={handleParamChange}\n />\n <h3>Headers</h3>\n <KeyValueInputList items={headers} setItems={setHeaders} />\n <RequestPreview url={url} paramValues={paramValues} headers={headers} />\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["React"],"mappings":"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"}
|