fix: show property names for properties of array of objects

Author: P0lip

src/components/__tests__/Property.spec.tsx

@@ -1,7 +1,9 @@
+import { TreeListParentNode, TreeState } from '@stoplight/tree-list';
 import { shallow } from 'enzyme';
 import 'jest-enzyme';
 import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
+import { SchemaTree } from '../../tree';
 import { metadataStore } from '../../tree/metadata';
 import { walk } from '../../tree/walk';
 import { SchemaTreeListNode } from '../../types';
@@ -122,4 +124,101 @@ describe('Property component', () => {
       expect(wrapper.findWhere(el => /^\{\d\}$/.test(el.text())).first()).toHaveText('{0}');
     });
   });
+
+  describe('properties names', () => {
+    test('given an object, should display names its properties', () => {
+      const schema: JSONSchema4 = {
+        properties: {
+          foo: {
+            type: 'string',
+          },
+        },
+      };
+
+      const tree = new SchemaTree(schema, new TreeState(), {
+        expandedDepth: Infinity,
+        mergeAllOf: false,
+        resolveRef: void 0,
+      });
+
+      tree.populate();
+
+      const wrapper = shallow(<Property node={Array.from(tree)[1]} />);
+      expect(wrapper.find('div').first()).toHaveText('foo');
+    });
+
+    test('given an array of objects, should display names of those properties', () => {
+      const schema: JSONSchema4 = {
+        type: 'array',
+        items: {
+          properties: {
+            foo: {
+              type: 'string',
+            },
+          },
+        },
+      };
+
+      const tree = new SchemaTree(schema, new TreeState(), {
+        expandedDepth: Infinity,
+        mergeAllOf: false,
+        resolveRef: void 0,
+      });
+
+      tree.populate();
+
+      const wrapper = shallow(<Property node={Array.from(tree)[1]} />);
+      expect(wrapper.find('div').first()).toHaveText('foo');
+    });
+
+    test('given a ref pointing at primitive type, should not display property name', () => {
+      const schema: JSONSchema4 = {
+        properties: {
+          foo: {
+            $ref: '#/properties/bar',
+          },
+          bar: {
+            type: 'string',
+          },
+        },
+      };
+
+      const tree = new SchemaTree(schema, new TreeState(), {
+        expandedDepth: Infinity,
+        mergeAllOf: false,
+        resolveRef: void 0,
+      });
+
+      tree.populate();
+      tree.unwrap(Array.from(tree)[1] as TreeListParentNode);
+
+      const wrapper = shallow(<Property node={Array.from(tree)[2]} />);
+      expect(wrapper.find('div').first()).not.toExist();
+    });
+
+    xtest('given a ref pointing at complex type, should not display property name', () => {
+      const schema: JSONSchema4 = {
+        properties: {
+          foo: {
+            $ref: '#/properties/bar',
+          },
+          bar: {
+            type: 'object',
+          },
+        },
+      };
+
+      const tree = new SchemaTree(schema, new TreeState(), {
+        expandedDepth: Infinity,
+        mergeAllOf: false,
+        resolveRef: void 0,
+      });
+
+      tree.populate();
+      tree.unwrap(Array.from(tree)[1] as TreeListParentNode);
+
+      const wrapper = shallow(<Property node={Array.from(tree)[2]} />);
+      expect(wrapper.find('div').first()).not.toExist();
+    });
+  });
 });

src/components/shared/Property.tsx

@@ -26,7 +26,14 @@ function count(obj: Optional<JSONSchema4 | null>): number | null {
 function shouldShowPropertyName(treeNode: SchemaTreeListNode) {
   if (treeNode.parent === null) return false;
   try {
-    return getPrimaryType(getNodeMetadata(treeNode.parent).schema) === SchemaKind.Object;
+    const schema = getNodeMetadata(treeNode.parent).schema;
+    let type = getPrimaryType(schema);
+
+    if (type === SchemaKind.Array && schema.items) {
+      type = getPrimaryType(schema.items);
+    }
+
+    return type === SchemaKind.Object;
   } catch {
     return false;
   }