Merge pull request #206 from Thiht/Thiht/issue178

Thiht/issue178

client/components/Code.tsx

@@ -1,4 +1,5 @@
 import { Collapse } from "antd";
+import { EditorConfiguration } from "codemirror";
 import "codemirror/addon/fold/brace-fold";
 import "codemirror/addon/fold/comment-fold";
 import "codemirror/addon/fold/foldcode";
@@ -36,13 +37,20 @@ interface Props {
   onBeforeChange?: (value: string) => unknown;
 }
 
-const codeMirrorOptions = {
+const codeMirrorOptions: EditorConfiguration = {
   theme: "material",
   lineWrapping: true,
   readOnly: true,
   viewportMargin: Infinity,
   foldGutter: true,
   gutters: ["CodeMirror-foldgutter"],
+  indentWithTabs: false,
+  indentUnit: 2,
+  smartIndent: false,
+  extraKeys: {
+    // Insert spaces when using the Tab key
+    Tab: (cm) => cm.replaceSelection("  ", "end"),
+  },
 };
 
 const Code = ({
@@ -98,7 +106,7 @@ const Code = ({
         lineNumbers: true,
         lint: true,
         gutters: [
-          ...codeMirrorOptions.gutters,
+          ...(codeMirrorOptions?.gutters ?? []),
           "CodeMirror-linenumbers",
           "CodeMirror-lint-markers",
         ],

client/modules/utils.test.ts

@@ -1,5 +1,5 @@
 import { Entry } from "./types";
-import { entryToCurl } from "./utils";
+import { entryToCurl, bodyMatcherToPaths } from "./utils";
 
 const baseEntry: Entry = {
   context: {
@@ -120,3 +120,46 @@ describe("Generate curl command from:", () => {
     );
   });
 });
+
+describe("Generate paths from body matcher:", () => {
+  test("Nested array", () => {
+    const body = [{ foo: 0 }, { foo: 1 }];
+    const actual = {
+      body: bodyMatcherToPaths(body),
+    };
+    expect(actual).toMatchObject({
+      body: {
+        "[0].foo": 0,
+        "[1].foo": 1,
+      },
+    });
+  });
+
+  test("Nested object body", () => {
+    const body = {
+      foo: 3,
+      bar: ["a", "b"],
+      baz: {
+        level1: {
+          level2: {
+            foo: 3,
+            bar: ["a", "b"],
+          },
+        },
+      },
+    };
+    const actual = {
+      body: bodyMatcherToPaths(body),
+    };
+    expect(actual).toMatchObject({
+      body: {
+        foo: 3,
+        "bar[0]": "a",
+        "bar[1]": "b",
+        "baz.level1.level2.foo": 3,
+        "baz.level1.level2.bar[0]": "a",
+        "baz.level1.level2.bar[1]": "b",
+      },
+    });
+  });
+});

client/modules/utils.ts

@@ -113,9 +113,42 @@ export const cleanupRequest = (historyEntry: Entry): EntryRequest => {
   request = omit(request, "date") as EntryRequest;
   request = omit(request, "origin") as EntryRequest;
   request = pickBy(request) as EntryRequest; // remove nulls
+  if (typeof request.body === "object" && request.body !== null) {
+    request.body = bodyMatcherToPaths(request.body);
+  }
   return request;
 };
 
+// Convert a body matcher to a list of paths compatible with objx:
+//  - keys are dot separated
+//  - array indices are accessed with []
+// Example: foo.bar[0].baz represents a key of the following object:
+//   {"foo": {"bar": [{"baz": "Hello"}]}}
+export const bodyMatcherToPaths = (
+  bodyMatcher: unknown | Record<string, unknown>,
+  currentPath = "",
+  result = {}
+): Record<string, unknown> => {
+  if (Array.isArray(bodyMatcher)) {
+    bodyMatcher.forEach((item, index) => {
+      bodyMatcherToPaths(item, `${currentPath}[${index}]`, result);
+    });
+    return result;
+  } else if (typeof bodyMatcher === "object" && bodyMatcher !== null) {
+    Object.entries(bodyMatcher).forEach(([key, value]) => {
+      bodyMatcherToPaths(
+        value,
+        currentPath ? `${currentPath}.${key}` : `${key}`,
+        result
+      );
+    });
+    return result;
+  } else {
+    result[currentPath] = bodyMatcher;
+    return result;
+  }
+};
+
 export const cleanupResponse = (historyEntry: Entry): EntryResponse => {
   let response: EntryResponse = { ...historyEntry.response };
   if (historyEntry.response.headers) {

package.json

@@ -73,7 +73,7 @@
     "redux-devtools-extension": "^2.13.8",
     "sass": "^1.26.9",
     "ts-jest": "^26.1.1",
-    "tslib": "^2.0.0",
+    "tslib": "^2.3.0",
     "typescript": "^3.8.3",
     "vuepress": "^1.8.2",
     "vuepress-plugin-fulltext-search": "^2.2.0",

yarn.lock

@@ -11994,10 +11994,10 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
-tslib@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
-  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+tslib@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
 tsutils@^3.17.1:
   version "3.17.1"