fix: stop rendering array keys in json content (#1177)

Author: erunion

packages/api-explorer/__tests__/ResponseBody.test.jsx

@@ -56,6 +56,25 @@ describe('Response body', () => {
     expect(responseBody.find('.react-json-view')).toHaveLength(1);
   });
 
+  it('should not display array keys on json responses', async () => {
+    props.result = await parseResponse(
+      {
+        log: {
+          entries: [{ request: { url: 'http://petstore.swagger.io/v2/pet', method: 'POST', headers: [] } }],
+        },
+      },
+      new FetchResponse(JSON.stringify([{ user: { email: 'test@example.com' } }]), {
+        headers: {
+          'content-type': 'application/json; charset=utf-8',
+        },
+      })
+    );
+
+    const responseBody = mount(<ResponseBody {...props} oas={oas} />);
+
+    expect(responseBody.find('.react-json-view').text()).toBe('[{...}]');
+  });
+
   it('should not display json viewer if invalid json', async () => {
     props.result = await parseResponse(
       {

packages/api-explorer/__tests__/ResponseExample.test.jsx

@@ -87,6 +87,35 @@ describe('has examples', () => {
       expect(comp.find('pre').at(0).render().find('.react-json-view')).toHaveLength(1);
     });
 
+    it('should not render array keys in json', () => {
+      const exampleOas = new Oas(exampleResults);
+      const operation = exampleOas.operation('/results', 'get');
+
+      const examples = [
+        {
+          status: '200',
+          languages: [
+            {
+              language: 'application/json',
+              code: JSON.stringify([
+                {
+                  user: {
+                    email: 'test@example.com',
+                    name: 'Test user name',
+                  },
+                },
+              ]),
+              multipleExamples: false,
+            },
+          ],
+        },
+      ];
+
+      const comp = shallow(<ResponseExample {...props} examples={examples} oas={exampleOas} operation={operation} />);
+
+      expect(comp.find('pre').at(0).render().find('.react-json-view').text()).toBe('[{"user":{...}}]');
+    });
+
     it('should not fail to parse invalid json and instead show the standard syntax highlighter', () => {
       const exampleOas = new Oas(string);
       const operation = exampleOas.operation('/format-uuid', 'get');

packages/api-explorer/package-lock.json

@@ -35,7 +35,7 @@
     "prop-types": "^15.7.2",
     "react-copy-to-clipboard": "^5.0.1",
     "react-debounce-input": "^3.2.0",
-    "react-json-view": "^1.19.1",
+    "react-json-view": "^1.21.1",
     "react-waypoint": "^9.0.2",
     "whatwg-fetch": "^3.0.0"
   },

packages/api-explorer/package.json

@@ -18,6 +18,7 @@ function Authorized({ result }) {
         <ReactJson
           collapsed={1}
           collapseStringsAfterLength={100}
+          displayArrayKey={false}
           displayDataTypes={false}
           displayObjectSize={false}
           enableClipboard={false}

packages/api-explorer/src/ResponseBody.jsx

@@ -22,6 +22,7 @@ function getReactJson(example, current) {
       key={example.code}
       collapsed={2}
       collapseStringsAfterLength={100}
+      displayArrayKey={false}
       displayDataTypes={false}
       displayObjectSize={false}
       enableClipboard={false}