fix: oneOf included when inside of arrays (#927)

Co-authored-by: Lukasz Gornicki <lpgornicki@gmail.com>

Author: kennethaasan

library/src/components/Schema.tsx

@@ -14,6 +14,7 @@ interface Props {
   dependentRequired?: string[];
   expanded?: boolean;
   onlyTitle?: boolean;
+  isArray?: boolean;
 }
 
 const SchemaContext = React.createContext({
@@ -31,17 +32,22 @@ export const Schema: React.FunctionComponent<Props> = ({
   dependentRequired,
   expanded: propExpanded = false,
   onlyTitle = false,
+  isArray = false,
 }) => {
   const { reverse, deepExpanded } = useContext(SchemaContext);
-  const [expanded, setExpanded] = useState(propExpanded);
+  const [expanded, setExpanded] = useState(propExpanded || isArray);
   const [deepExpand, setDeepExpand] = useState(false);
 
   useEffect(() => {
-    setDeepExpand(deepExpanded);
+    if (!isArray) {
+      setDeepExpand(deepExpanded);
+    }
   }, [deepExpanded, setDeepExpand]);
 
   useEffect(() => {
-    setExpanded(deepExpand);
+    if (!isArray) {
+      setExpanded(deepExpand);
+    }
   }, [deepExpand, setExpanded]);
 
   if (
@@ -88,7 +94,7 @@ export const Schema: React.FunctionComponent<Props> = ({
       <div>
         <div className="flex py-2">
           <div className={`${onlyTitle ? '' : 'min-w-1/4'} mr-2`}>
-            {isExpandable && !isCircular ? (
+            {isExpandable && !isCircular && !isArray ? (
               <>
                 <CollapseButton
                   onClick={() => setExpanded(prev => !prev)}
@@ -270,7 +276,7 @@ export const Schema: React.FunctionComponent<Props> = ({
               reverse ? 'bg-gray-200' : ''
             } ${expanded ? 'block' : 'hidden'}`}
           >
-            <SchemaProperties schema={schema} />
+            <SchemaProperties schema={schema} isArray={isArray} />
             <SchemaItems schema={schema} />
 
             {schema.oneOf() &&
@@ -368,10 +374,12 @@ export const Schema: React.FunctionComponent<Props> = ({
 
 interface SchemaPropertiesProps {
   schema: SchemaInterface;
+  isArray: boolean;
 }
 
 const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
   schema,
+  isArray,
 }) => {
   const properties = schema.properties();
   if (properties === undefined || !Object.keys(properties)) {
@@ -471,17 +479,22 @@ const SchemaItems: React.FunctionComponent<SchemaItemsProps> = ({ schema }) => {
     !Array.isArray(items) &&
     Object.keys(items.properties() || {}).length
   ) {
-    return <SchemaProperties schema={items} />;
+    return <Schema schema={items} isArray={true} />;
   } else if (Array.isArray(items)) {
     return (
       <>
         {items.map((item, idx) => (
-          <Schema schema={item} schemaName={`${idx + 1} item:`} key={idx} />
+          <Schema
+            schema={item}
+            isArray={true}
+            schemaName={`${idx + 1} item:`}
+            key={idx}
+          />
         ))}
       </>
     );
   }
-  return <Schema schema={items} schemaName="Items:" />;
+  return <Schema schema={items} isArray={true} schemaName="Items:" />;
 };
 
 interface AdditionalItemsProps {

library/src/components/__tests__/Schema.test.tsx

@@ -93,4 +93,60 @@ describe('Schema component', () => {
       expect(screen.getByText('false')).toBeDefined();
     });
   });
+
+  describe('should render arrays', () => {
+    test('which includes oneOf', async () => {
+      const schemaModel = new SchemaModel({
+        title: 'Sets',
+        type: 'array',
+        items: {
+          title: 'Set',
+          type: 'object',
+          properties: {
+            pets: {
+              title: 'Pets',
+              type: 'array',
+              items: {
+                title: 'Pet',
+                type: 'object',
+                discriminator: 'type',
+                properties: {
+                  type: {
+                    title: 'Pet.Type',
+                    type: 'string',
+                    enum: ['CAT', 'DOG'],
+                  },
+                },
+                oneOf: [
+                  {
+                    title: 'Cat',
+                    type: 'object',
+                    properties: {
+                      type: {
+                        const: 'CAT',
+                      },
+                    },
+                  },
+                  {
+                    title: 'Dog',
+                    type: 'object',
+                    properties: {
+                      type: {
+                        const: 'DOG',
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        },
+      });
+
+      render(<Schema schema={schemaModel} />);
+
+      expect(screen.getByText('Adheres to Cat:')).toBeDefined();
+      expect(screen.getByText('Or to Dog:')).toBeDefined();
+    });
+  });
 });