[web] fix query editing

fix mitmproxy#4565

CHANGELOG.md

@@ -29,6 +29,8 @@
   ([#5548](https://github.com/mitmproxy/mitmproxy/pull/5548), @sanlengjingvv)
 * Fix a mitmweb crash when scrolling down the flow list.
   ([#5507](https://github.com/mitmproxy/mitmproxy/pull/5507), @LIU-shuyi)
+* Fix query editing on mitmweb.
+  ([#5574](https://github.com/mitmproxy/mitmproxy/pull/5574), @yesmeck)
 
 ## 28 June 2022: mitmproxy 8.1.1
 

mitmproxy/tools/web/app.py

@@ -392,6 +392,8 @@ def put(self, flow_id):
                                 request.trailers.add(*trailer)
                         elif k == "content":
                             request.text = v
+                        elif k == "query":
+                            request.query = [tuple(i) for i in v]
                         else:
                             raise APIError(400, f"Unknown update request.{k}: {v}")
 

web/src/js/__tests__/components/contentviews/HttpMessageSpec.tsx

@@ -4,7 +4,15 @@ import HttpMessage, {ViewImage} from '../../../components/contentviews/HttpMessa
 import {fireEvent, render, screen, waitFor} from "../../test-utils"
 import fetchMock, {enableFetchMocks} from "jest-fetch-mock";
 
-jest.mock("../../../contrib/CodeMirror")
+jest.mock("../../../contrib/CodeMirror", () => {
+    const React = require('react');
+    return {
+        __esModule: true,
+        default: React.forwardRef((props, ref) => {
+            return <div>{props.value}</div>
+        })
+    }
+})
 
 enableFetchMocks();
 

web/src/js/__tests__/components/contentviews/__snapshots__/HttpMessageSpec.tsx.snap

@@ -126,7 +126,12 @@ exports[`HttpMessage 2`] = `
     </div>
     <div
       class="codeeditor"
-    />
+    >
+      <div>
+        foo=1
+bar=2
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

web/src/js/__tests__/ducks/_tflow.ts

@@ -48,7 +48,7 @@ export function THTTPFlow(): Required<HTTPFlow> {
             "host": "address",
             "http_version": "HTTP/1.1",
             "method": "GET",
-            "path": "/path",
+            "path": "/path?foo=1&bar=2",
             "port": 22,
             "pretty_host": "address",
             "scheme": "http",

web/src/js/components/contentviews/HttpMessage.tsx

@@ -32,7 +32,13 @@ export default function HttpMessage({flow, message}: HttpMessageProps) {
     } else {
         url = MessageUtils.getContentURL(flow, message, contentView, maxLines + 1);
     }
-    const content = useContent(url, message.contentHash);
+    let content = useContent(url, message.contentHash);
+    if (flow.request.method === "GET" && edit) {
+         const params = new URLSearchParams(new URL(`${flow.request.scheme}://${flow.request.host}/${flow.request.path}`).search);
+         content = Array.from(params.entries())
+             .reduce((acc, [key, value]) => [...acc, `${key}=${value}`], [])
+             .join("\n");
+    }
     const contentViewData = useMemo<ContentViewData | undefined>(() => {
         if (content && !edit) {
             try {
@@ -48,8 +54,14 @@ export default function HttpMessage({flow, message}: HttpMessageProps) {
 
     if (edit) {
         const save = async () => {
-            const content = editorRef.current?.getContent();
-            await dispatch(flowActions.update(flow, {[part]: {content}}));
+            let content = editorRef.current?.getContent();
+            await dispatch(flowActions.update(flow, {
+                 [part]: flow.request.method === 'GET' ? {
+                     query: content?.split("\n").map(item => item.split('='))
+                 }: {
+                     content
+                 }
+            }));
             setEdit(false);
         }
         return (