fix: improve handling of array + dictionary combo (#251)

Author: P0lip

src/__tests__/index.spec.tsx

@@ -208,6 +208,113 @@ describe('HTML Output', () => {
     `);
   });
 
+  it('should render top-level dictionary', () => {
+    const schema: JSONSchema7 = {
+      type: 'object',
+      additionalProperties: {
+        type: 'string',
+      },
+    };
+
+    expect(dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} />)).toMatchInlineSnapshot(`
+      "<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
+        <div data-overlay-container=\\"true\\">
+          <div class=\\"JsonSchemaViewer\\">
+            <div></div>
+            <div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
+              <div>
+                <div>
+                  <div><span data-test=\\"property-type\\">dictionary[string, string]</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      "
+    `);
+  });
+
+  it('should not merge array of dictionaries', () => {
+    const schema: JSONSchema7 = {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: {
+          type: 'string',
+        },
+      },
+    };
+
+    expect(dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} />)).toMatchInlineSnapshot(`
+      "<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
+        <div data-overlay-container=\\"true\\">
+          <div class=\\"JsonSchemaViewer\\">
+            <div></div>
+            <div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
+              <div>
+                <div>
+                  <div role=\\"button\\"></div>
+                  <div><span data-test=\\"property-type\\">array</span></div>
+                </div>
+              </div>
+            </div>
+            <div data-level=\\"0\\">
+              <div data-id=\\"98538b996305d\\" data-test=\\"schema-row\\">
+                <div>
+                  <div>
+                    <div><span data-test=\\"property-type\\">dictionary[string, string]</span></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      "
+    `);
+  });
+
+  it('should merge dictionaries with array values', () => {
+    const schema: JSONSchema7 = {
+      type: 'object',
+      additionalProperties: {
+        type: 'array',
+        items: {
+          type: 'string',
+        },
+      },
+    };
+
+    expect(dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} />)).toMatchInlineSnapshot(`
+      "<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
+        <div data-overlay-container=\\"true\\">
+          <div class=\\"JsonSchemaViewer\\">
+            <div></div>
+            <div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
+              <div>
+                <div>
+                  <div role=\\"button\\"></div>
+                  <div><span data-test=\\"property-type\\">dictionary[string, array]</span></div>
+                </div>
+              </div>
+            </div>
+            <div data-level=\\"0\\">
+              <div data-id=\\"98538b996305d\\" data-test=\\"schema-row\\">
+                <div>
+                  <div>
+                    <div><span data-test=\\"property-type\\">string</span></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      "
+    `);
+  });
+
   it('should not render true/false additionalProperties', () => {
     const schema: JSONSchema7 = {
       type: 'object',

src/components/SchemaRow/TopLevelSchemaRow.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import { COMBINER_NAME_MAP } from '../../consts';
 import { useIsOnScreen } from '../../hooks/useIsOnScreen';
-import { isComplexArray, visibleChildren } from '../../tree';
+import { isComplexArray, isDictionaryNode, visibleChildren } from '../../tree';
 import { showPathCrumbsAtom } from '../PathCrumbs/state';
 import { Description, getValidationsFromSchema, Validations } from '../shared';
 import { ChildStack } from '../shared/ChildStack';
@@ -142,5 +142,5 @@ function ScrollCheck() {
 }
 
 function isPureObjectNode(schemaNode: RegularNode) {
-  return schemaNode.primaryType === 'object' && schemaNode.types?.length === 1;
+  return schemaNode.primaryType === 'object' && schemaNode.types?.length === 1 && !isDictionaryNode(schemaNode);
 }

src/tree/utils.ts

@@ -41,7 +41,8 @@ export function isFlattenableNode(node: SchemaNode): node is FlattenableNode {
 
   return (
     node.children.length === 1 &&
-    (isRegularNode(node.children[0]) || (isReferenceNode(node.children[0]) && node.children[0].error !== null))
+    ((isRegularNode(node.children[0]) && (!isArrayNode(node) || !isDictionaryNode(node.children[0]))) ||
+      (isReferenceNode(node.children[0]) && node.children[0].error !== null))
   );
 }