fix: retain required properties for properties of referenced objects

Author: P0lip

src/components/SchemaRow.tsx

@@ -3,7 +3,8 @@ import cn from 'classnames';
 import * as React from 'react';
 
 import { getNodeMetadata, metadataStore } from '../tree/metadata';
-import { GoToRefHandler, SchemaTreeListNode } from '../types';
+import { GoToRefHandler, SchemaKind, SchemaTreeListNode } from '../types';
+import { getPrimaryType } from '../utils/getPrimaryType';
 import { Caret, Description, Divider, Property, Validations } from './shared';
 
 export interface ISchemaRow {
@@ -17,9 +18,29 @@ const ICON_SIZE = 12;
 const ICON_DIMENSION = 20;
 const ROW_OFFSET = 7;
 
+function isRequired(treeNode: SchemaTreeListNode) {
+  if (treeNode.parent === null) return false;
+  try {
+    const { path } = getNodeMetadata(treeNode);
+    if (path.length === 0) {
+      return false;
+    }
+
+    const { schema } = getNodeMetadata(treeNode.parent);
+
+    return (
+      getPrimaryType(schema) === SchemaKind.Object &&
+      Array.isArray(schema.required) &&
+      schema.required.includes(String(path[path.length - 1]))
+    );
+  } catch {
+    return false;
+  }
+}
+
 export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ className, node, rowOptions, onGoToRef }) => {
   const metadata = getNodeMetadata(node);
-  const { path, schemaNode } = metadata;
+  const { schemaNode } = metadata;
 
   const parentSchemaNode = (node.parent !== null && metadataStore.get(node.parent)?.schemaNode) || null;
   const description = 'annotations' in schemaNode ? schemaNode.annotations.description : null;
@@ -56,12 +77,7 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ className, node
         </div>
 
         <Validations
-          required={
-            parentSchemaNode !== null &&
-            'required' in parentSchemaNode &&
-            Array.isArray(parentSchemaNode.required) &&
-            parentSchemaNode.required.includes(String(path[path.length - 1]))
-          }
+          required={isRequired(node)}
           validations={{
             ...('annotations' in schemaNode &&
               schemaNode.annotations.default && { default: schemaNode.annotations.default }),

src/components/__tests__/SchemaRow.spec.tsx

@@ -1,7 +1,10 @@
+import { TreeListParentNode, TreeState } from '@stoplight/tree-list';
 import { Popover } from '@stoplight/ui-kit';
 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 { SchemaKind, SchemaTreeListNode } from '../../types';
 import { SchemaRow } from '../SchemaRow';
@@ -45,4 +48,63 @@ describe('SchemaRow component', () => {
 
     expect(wrapper).toHaveText('enum:null,0,false');
   });
+
+  describe('required property', () => {
+    let tree: SchemaTree;
+
+    beforeEach(() => {
+      const schema: JSONSchema4 = {
+        type: 'object',
+        properties: {
+          user: {
+            $ref: '#/properties/id',
+          },
+          id: {
+            type: 'object',
+            required: ['foo'],
+            properties: {
+              foo: {
+                type: 'string',
+              },
+              bar: {
+                type: 'number',
+              },
+            },
+          },
+        },
+      };
+
+      tree = new SchemaTree(schema, new TreeState(), {
+        expandedDepth: Infinity,
+        mergeAllOf: false,
+        resolveRef: void 0,
+      });
+
+      tree.populate();
+      tree.unwrap(Array.from(tree)[1] as TreeListParentNode);
+    });
+
+    test('should preserve the required validation', () => {
+      const wrapper = shallow(<SchemaRow node={Array.from(tree)[5]} rowOptions={{}} />);
+      expect(wrapper.find(Validations)).toHaveProp('required', true);
+    });
+
+    test('should preserve the optional validation', () => {
+      const wrapper = shallow(<SchemaRow node={Array.from(tree)[6]} rowOptions={{}} />);
+      expect(wrapper.find(Validations)).toHaveProp('required', false);
+    });
+
+    describe('given a referenced object', () => {
+      test('should preserve the required validation', () => {
+        const wrapper = shallow(<SchemaRow node={Array.from(tree)[2]} rowOptions={{}} />);
+
+        expect(wrapper.find(Validations)).toHaveProp('required', true);
+      });
+
+      test('should preserve the optional validation', () => {
+        const wrapper = shallow(<SchemaRow node={Array.from(tree)[3]} rowOptions={{}} />);
+        expect(wrapper.find(Validations)).toHaveProp('required', false);
+      });
+    });
+  });
 });