Show title and description on schemas, fix #598.

src/common-elements/fields-layout.ts

@@ -3,13 +3,6 @@
 import styled, { extensionsHook, withProps } from '../styled-components';
 import { deprecatedCss } from './mixins';
 
-export const PropertiesTableCaption = styled.caption`
-  text-align: right;
-  font-size: 0.9em;
-  font-weight: normal;
-  color: ${props => props.theme.colors.text.secondary};
-`;
-
 export const PropertyCell = styled.td`
   border-left: 1px solid ${props => props.theme.schema.linesColor};
   box-sizing: border-box;

src/components/Fields/Field.tsx

@@ -74,7 +74,6 @@ export class Field extends React.Component<FieldProps> {
                     schema={field.schema}
                     skipReadOnly={this.props.skipReadOnly}
                     skipWriteOnly={this.props.skipWriteOnly}
-                    showTitle={this.props.showTitle}
                   />
                 </InnerPropertiesWrap>
               </PropertyCellWithInner>

src/components/Schema/ObjectSchema.tsx

@@ -1,10 +1,15 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
+import styled from '../../styled-components';
+
 import { SchemaModel } from '../../services/models';
 
-import { PropertiesTable, PropertiesTableCaption } from '../../common-elements/fields-layout';
+import { PropertiesTable } from '../../common-elements/fields-layout';
+import { H3 } from '../../common-elements/headers';
+
 import { Field } from '../Fields/Field';
+import { Markdown } from '../Markdown/Markdown';
 import { DiscriminatorDropdown } from './DiscriminatorDropdown';
 import { SchemaProps } from './Schema';
 
@@ -17,6 +22,18 @@ export interface ObjectSchemaProps extends SchemaProps {
   };
 }
 
+export const ObjectSchemaDetails = styled.div`
+  margin: 0 0 0.5em 0;
+`;
+
+export const ObjectSchemaTitle = styled(H3)`
+  margin: 0.5em 0 0 0;
+`;
+
+export const ObjectSchemaDescription = styled.div`
+  margin: 0.5em 0 0 0;
+`;
+
 @observer
 export class ObjectSchema extends React.Component<ObjectSchemaProps> {
   get parentSchema() {
@@ -26,7 +43,6 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
   render() {
     const {
       schema: { fields = [] },
-      showTitle,
       discriminator,
     } = this.props;
 
@@ -42,36 +58,44 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
       : fields;
 
     return (
-      <PropertiesTable>
+      <div>
-        {showTitle && <PropertiesTableCaption>{this.props.schema.title}</PropertiesTableCaption>}
+        <ObjectSchemaDetails>
-        <tbody>
+          <ObjectSchemaTitle>{this.props.schema.title}</ObjectSchemaTitle>
-          {mapWithLast(filteredFields, (field, isLast) => {
+
-            return (
+          <ObjectSchemaDescription>
-              <Field
+            <Markdown dense={true} source={this.props.schema.description} />
-                key={field.name}
+          </ObjectSchemaDescription>
-                isLast={isLast}
+        </ObjectSchemaDetails>
-                field={field}
+
-                renderDiscriminatorSwitch={
+        <PropertiesTable>
-                  (discriminator &&
+          <tbody>
-                    discriminator.fieldName === field.name &&
+            {mapWithLast(filteredFields, (field, isLast) => {
-                    (() => (
+              return (
-                      <DiscriminatorDropdown
+                <Field
-                        parent={this.parentSchema}
+                  key={field.name}
-                        enumValues={field.schema.enum}
+                  isLast={isLast}
-                      />
+                  field={field}
-                    ))) ||
+                  renderDiscriminatorSwitch={
-                  undefined
+                    (discriminator &&
-                }
+                      discriminator.fieldName === field.name &&
-                className={field.expanded ? 'expanded' : undefined}
+                      (() => (
-                showExamples={false}
+                        <DiscriminatorDropdown
-                skipReadOnly={this.props.skipReadOnly}
+                          parent={this.parentSchema}
-                skipWriteOnly={this.props.skipWriteOnly}
+                          enumValues={field.schema.enum}
-                showTitle={this.props.showTitle}
+                        />
-              />
+                      ))) ||
-            );
+                    undefined
-          })}
+                  }
-        </tbody>
+                  className={field.expanded ? 'expanded' : undefined}
-      </PropertiesTable>
+                  showExamples={false}
+                  skipReadOnly={this.props.skipReadOnly}
+                  skipWriteOnly={this.props.skipWriteOnly}
+                />
+              );
+            })}
+          </tbody>
+        </PropertiesTable>
+      </div>
     );
   }
 }

src/components/Schema/Schema.tsx

@@ -11,7 +11,6 @@ import { ObjectSchema } from './ObjectSchema';
 import { OneOfSchema } from './OneOfSchema';
 
 export interface SchemaOptions {
-  showTitle?: boolean;
   skipReadOnly?: boolean;
   skipWriteOnly?: boolean;
 }

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -1,105 +1,118 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components SchemaView discriminator should correctly render discriminator dropdown 1`] = `
-<styled.table>
+<div>
-  <tbody>
+  <styled.div>
-    <Field
+    <Styled(styled.h2)>
-      field={
+      Dog
-        FieldModel {
+    </Styled(styled.h2)>
-          "deprecated": false,
+    <styled.div>
-          "description": "",
+      <Markdown
-          "example": undefined,
+        dense={true}
-          "expanded": false,
+        source=""
-          "in": undefined,
+      />
-          "kind": "field",
+    </styled.div>
-          "name": "packSize",
+  </styled.div>
-          "required": false,
+  <styled.table>
-          "schema": SchemaModel {
+    <tbody>
-            "activeOneOf": 0,
+      <Field
-            "constraints": Array [],
+        field={
-            "default": undefined,
+          FieldModel {
             "deprecated": false,
             "description": "",
-            "displayFormat": undefined,
-            "displayType": "number",
-            "enum": Array [],
             "example": undefined,
-            "format": undefined,
+            "expanded": false,
-            "isCircular": undefined,
+            "in": undefined,
-            "isPrimitive": true,
+            "kind": "field",
-            "nullable": false,
+            "name": "packSize",
-            "options": "<<<filtered>>>",
+            "required": false,
-            "pattern": undefined,
+            "schema": SchemaModel {
-            "pointer": "#/components/schemas/Dog/properties/packSize",
+              "activeOneOf": 0,
-            "rawSchema": Object {
+              "constraints": Array [],
               "default": undefined,
+              "deprecated": false,
+              "description": "",
+              "displayFormat": undefined,
+              "displayType": "number",
+              "enum": Array [],
+              "example": undefined,
+              "format": undefined,
+              "isCircular": undefined,
+              "isPrimitive": true,
+              "nullable": false,
+              "options": "<<<filtered>>>",
+              "pattern": undefined,
+              "pointer": "#/components/schemas/Dog/properties/packSize",
+              "rawSchema": Object {
+                "default": undefined,
+                "type": "number",
+              },
+              "readOnly": false,
+              "schema": Object {
+                "default": undefined,
+                "type": "number",
+              },
+              "title": "",
               "type": "number",
+              "typePrefix": "",
+              "writeOnly": false,
             },
-            "readOnly": false,
+          }
-            "schema": Object {
-              "default": undefined,
-              "type": "number",
-            },
-            "title": "",
-            "type": "number",
-            "typePrefix": "",
-            "writeOnly": false,
-          },
         }
-      }
+        isLast={false}
-      isLast={false}
+        key="packSize"
-      key="packSize"
+        showExamples={false}
-      showExamples={false}
+      />
-    />
+      <Field
-    <Field
+        field={
-      field={
+          FieldModel {
-        FieldModel {
-          "deprecated": false,
-          "description": "",
-          "example": undefined,
-          "expanded": false,
-          "in": undefined,
-          "kind": "field",
-          "name": "type",
-          "required": true,
-          "schema": SchemaModel {
-            "activeOneOf": 0,
-            "constraints": Array [],
-            "default": undefined,
             "deprecated": false,
             "description": "",
-            "displayFormat": undefined,
-            "displayType": "string",
-            "enum": Array [],
             "example": undefined,
-            "format": undefined,
+            "expanded": false,
-            "isCircular": undefined,
+            "in": undefined,
-            "isPrimitive": true,
+            "kind": "field",
-            "nullable": false,
+            "name": "type",
-            "options": "<<<filtered>>>",
+            "required": true,
-            "pattern": undefined,
+            "schema": SchemaModel {
-            "pointer": "#/components/schemas/Dog/properties/type",
+              "activeOneOf": 0,
-            "rawSchema": Object {
+              "constraints": Array [],
               "default": undefined,
+              "deprecated": false,
+              "description": "",
+              "displayFormat": undefined,
+              "displayType": "string",
+              "enum": Array [],
+              "example": undefined,
+              "format": undefined,
+              "isCircular": undefined,
+              "isPrimitive": true,
+              "nullable": false,
+              "options": "<<<filtered>>>",
+              "pattern": undefined,
+              "pointer": "#/components/schemas/Dog/properties/type",
+              "rawSchema": Object {
+                "default": undefined,
+                "type": "string",
+              },
+              "readOnly": false,
+              "schema": Object {
+                "default": undefined,
+                "type": "string",
+              },
+              "title": "",
               "type": "string",
+              "typePrefix": "",
+              "writeOnly": false,
             },
-            "readOnly": false,
+          }
-            "schema": Object {
-              "default": undefined,
-              "type": "string",
-            },
-            "title": "",
-            "type": "string",
-            "typePrefix": "",
-            "writeOnly": false,
-          },
         }
-      }
+        isLast={true}
-      isLast={true}
+        key="type"
-      key="type"
+        renderDiscriminatorSwitch={[Function]}
-      renderDiscriminatorSwitch={[Function]}
+        showExamples={false}
-      showExamples={false}
+      />
-    />
+    </tbody>
-  </tbody>
+  </styled.table>
-</styled.table>
+</div>
 `;