fix: render top-level description (#205)

Author: P0lip

package.json

@@ -45,8 +45,8 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@stoplight/json": "^3.17.1",
-    "@stoplight/json-schema-tree": "^2.2.1",
+    "@stoplight/json": "^3.20.1",
+    "@stoplight/json-schema-tree": "^2.2.2",
     "@stoplight/react-error-boundary": "^2.0.0",
     "@types/json-schema": "^7.0.7",
     "classnames": "^2.2.6",

src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -658,3 +658,37 @@ exports[`HTML Output given write mode, should populate proper nodes 1`] = `
 </div>
 "
 `;
+
+exports[`HTML Output should render top-level description on allOf 1`] = `
+"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
+  <div data-overlay-container=\\"true\\">
+    <div class=\\"JsonSchemaViewer\\">
+      <div></div>
+      <div style=\\"font-size: 12px\\"><p>This is a description that should be rendered</p></div>
+      <div data-level=\\"0\\">
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>foo</div>
+                <span>string</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>
+            <div>
+              <div>
+                <div>baz</div>
+                <span>string</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+"
+`;

src/__tests__/index.spec.tsx

@@ -164,6 +164,32 @@ describe('HTML Output', () => {
 
     expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchSnapshot();
   });
+
+  it('should render top-level description on allOf', () => {
+    const schema: JSONSchema4 = {
+      description: 'This is a description that should be rendered',
+      allOf: [
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+          },
+        },
+        {
+          type: 'object',
+          properties: {
+            baz: {
+              type: 'string',
+            },
+          },
+        },
+      ],
+    };
+
+    expect(dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} />)).toMatchSnapshot();
+  });
 });
 
 describe.each([{}, { unknown: '' }, { $ref: null }])('given empty schema, should render empty text', schema => {

src/components/SchemaRow/TopLevelSchemaRow.tsx

@@ -7,6 +7,7 @@ import { COMBINER_NAME_MAP } from '../../consts';
 import { useIsOnScreen } from '../../hooks/useIsOnScreen';
 import { calculateChildrenToShow, isComplexArray } from '../../tree';
 import { showPathCrumbsAtom } from '../PathCrumbs/state';
+import { Description } from '../shared';
 import { ChildStack } from '../shared/ChildStack';
 import { getInternalSchemaError } from '../shared/Validations';
 import { SchemaRow, SchemaRowProps } from './SchemaRow';
@@ -24,6 +25,7 @@ export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNo
     return (
       <>
         <ScrollCheck />
+        <Description value={schemaNode.annotations.description} />
         <ChildStack schemaNode={schemaNode} childNodes={childNodes} currentNestingLevel={nestingLevel} />
         {internalSchemaError.hasError && (
           <Icon title={internalSchemaError.error} color="danger" icon={['fas', 'exclamation-triangle']} size="sm" />
@@ -38,6 +40,7 @@ export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNo
     return (
       <>
         <ScrollCheck />
+        <Description value={schemaNode.annotations.description} />
 
         <HStack spacing={3} pb={4}>
           <Menu
@@ -79,6 +82,7 @@ export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNo
     return (
       <>
         <ScrollCheck />
+        <Description value={schemaNode.annotations.description} />
 
         <Box fontFamily="mono" fontWeight="semibold" fontSize="base" pb={4}>
           array of:

src/components/shared/Description.tsx

@@ -2,9 +2,11 @@ import { MarkdownViewer } from '@stoplight/markdown-viewer';
 import { Box, Link, Text } from '@stoplight/mosaic';
 import * as React from 'react';
 
-export const Description: React.FunctionComponent<{ value: string }> = ({ value }) => {
+export const Description: React.FunctionComponent<{ value: unknown }> = ({ value }) => {
   const [showAll, setShowAll] = React.useState(false);
 
+  if (typeof value !== 'string' || value.trim().length === 0) return null;
+
   const paragraphs = value.split('\n\n');
 
   if (paragraphs.length <= 1 || showAll) {

yarn.lock

@@ -2347,24 +2347,25 @@
     json-schema-compare "^0.2.2"
     lodash "^4.17.4"
 
-"@stoplight/json-schema-tree@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@stoplight/json-schema-tree/-/json-schema-tree-2.2.1.tgz#bfd8ec5a18c4bbc3e0ae3617725e4e4173553f0a"
-  integrity sha512-TKAvYtB5U8A7sAKj4co61LnMI9+133keQ+z8yGiLCpvUd8FDCNkQ7TWuFqdWOA1s5La4U6Gc75A1qZqfkGNdJw==
+"@stoplight/json-schema-tree@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@stoplight/json-schema-tree/-/json-schema-tree-2.2.2.tgz#48339973d72ec818efea11c450bf033cd0d78d91"
+  integrity sha512-p4hRzEgTMZQRrbP1CWAZDo68zXTOsr40IxITNizKPeMPt1jsB0lvHlLinx0tSTKp2XPnaoRXH7cMsdClGD7JDQ==
   dependencies:
     "@stoplight/json" "^3.12.0"
     "@stoplight/json-schema-merge-allof" "^0.7.7"
     "@stoplight/lifecycle" "^2.3.2"
     "@types/json-schema" "^7.0.7"
     magic-error "0.0.1"
 
-"@stoplight/json@^3.12.0", "@stoplight/json@^3.17.1":
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/@stoplight/json/-/json-3.17.1.tgz#17aa8f17c58678649cd0d345fb184e0bea16f8df"
-  integrity sha512-OQbjaPU9/VPQYa3zEfN82vjXu3vWv/537Ei7TX/xYLMPdpdBI/mCyThdZAG4SN1t3iho2dxIKpTVObuCTTgBvA==
+"@stoplight/json@^3.12.0", "@stoplight/json@^3.20.1":
+  version "3.20.1"
+  resolved "https://registry.yarnpkg.com/@stoplight/json/-/json-3.20.1.tgz#a500c5a0ef3232ec3b2fd36c4456b28085d919ae"
+  integrity sha512-FXfud+uWgIj1xv6nUO9WnmgmnVikaxJcbtR4XQt4C42n5c2qua3U05Z/3B57hP5TJRSj+tpn9ID6/bFeyYYlEg==
   dependencies:
-    "@stoplight/ordered-object-literal" "^1.0.2"
-    "@stoplight/types" "^12.3.0"
+    "@stoplight/ordered-object-literal" "^1.0.3"
+    "@stoplight/path" "^1.3.2"
+    "@stoplight/types" "^13.6.0"
     jsonc-parser "~2.2.1"
     lodash "^4.17.21"
     safe-stable-stringify "^1.1"
@@ -2473,10 +2474,15 @@
     use-resize-observer "^9.0.2"
     zustand "^3.5.2"
 
-"@stoplight/ordered-object-literal@^1.0.1", "@stoplight/ordered-object-literal@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@stoplight/ordered-object-literal/-/ordered-object-literal-1.0.2.tgz#2a88a5ebc8b68b54837ac9a9ae7b779cdd862062"
-  integrity sha512-0ZMS/9sNU3kVo/6RF3eAv7MK9DY8WLjiVJB/tVyfF2lhr2R4kqh534jZ0PlrFB9CRXrdndzn1DbX6ihKZXft2w==
+"@stoplight/ordered-object-literal@^1.0.1", "@stoplight/ordered-object-literal@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@stoplight/ordered-object-literal/-/ordered-object-literal-1.0.3.tgz#1f24572623459c61238ae72176fadac5c40e0a54"
+  integrity sha512-cjJ7PPkhgTXNMTkevAlmyrx9xOOCaI3c6rEeYb6VitL1o1WcZtrz9KyFyISmTmUa7yYTiy2IS/ud9S8s2sn3+A==
+
+"@stoplight/path@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@stoplight/path/-/path-1.3.2.tgz#96e591496b72fde0f0cdae01a61d64f065bd9ede"
+  integrity sha512-lyIc6JUlUA8Ve5ELywPC8I2Sdnh1zc1zmbYgVarhXIp9YeAB0ReeqmGEOWNtlHkbP2DAA1AL65Wfn2ncjK/jtQ==
 
 "@stoplight/react-error-boundary@^2.0.0":
   version "2.0.0"
@@ -2530,6 +2536,14 @@
     "@types/json-schema" "^7.0.4"
     utility-types "^3.10.0"
 
+"@stoplight/types@^13.6.0":
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/@stoplight/types/-/types-13.6.0.tgz#96c6aaae05858b36f589821cd52c95aa9b205ce7"
+  integrity sha512-dzyuzvUjv3m1wmhPfq82lCVYGcXG0xUYgqnWfCq3PCVR4BKFhjdkHrnJ+jIDoMKvXb05AZP/ObQF6+NpDo29IQ==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    utility-types "^3.10.0"
+
 "@stoplight/yaml-ast-parser@0.0.48":
   version "0.0.48"
   resolved "https://registry.yarnpkg.com/@stoplight/yaml-ast-parser/-/yaml-ast-parser-0.0.48.tgz#442b21f419427acaa8a3106ebc5d73351c407002"