Apply changes from Redocly#1035

Author: aleung

src/common-elements/fields-layout.ts

@@ -3,12 +3,6 @@
 import styled, { extensionsHook, media } 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<{ kind?: string }>`
   border-left: 1px solid ${props => props.theme.schema.linesColor};

src/components/Fields/Field.tsx

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

src/components/Schema/ObjectSchema.tsx

@@ -1,9 +1,13 @@
 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 { H3 } from '../../common-elements/headers';
+import { Markdown } from '../Markdown/Markdown';
+import { PropertiesTable } from '../../common-elements/fields-layout';
 import { Field } from '../Fields/Field';
 import { DiscriminatorDropdown } from './DiscriminatorDropdown';
 import { SchemaProps } from './Schema';
@@ -18,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> {
   static contextType = OptionsContext;
@@ -29,55 +45,65 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
   render() {
     const {
       schema: { fields = [] },
-      showTitle,
       discriminator,
     } = this.props;
 
     const needFilter = this.props.skipReadOnly || this.props.skipWriteOnly;
 
     const filteredFields = needFilter
       ? fields.filter(item => {
-          return !(
-            (this.props.skipReadOnly && item.schema.readOnly) ||
-            (this.props.skipWriteOnly && item.schema.writeOnly)
-          );
-        })
+        return !(
+          (this.props.skipReadOnly && item.schema.readOnly) ||
+          (this.props.skipWriteOnly && item.schema.writeOnly)
+        );
+      })
       : fields;
 
     const expandByDefault = this.context.expandSingleSchemaField && filteredFields.length === 1;
 
     return (
-      <PropertiesTable>
-        {showTitle && <PropertiesTableCaption>{this.props.schema.title}</PropertiesTableCaption>}
-        <tbody>
-          {mapWithLast(filteredFields, (field, isLast) => {
-            return (
-              <Field
-                key={field.name}
-                isLast={isLast}
-                field={field}
-                expandByDefault={expandByDefault}
-                renderDiscriminatorSwitch={
-                  (discriminator &&
-                    discriminator.fieldName === field.name &&
-                    (() => (
-                      <DiscriminatorDropdown
-                        parent={this.parentSchema}
-                        enumValues={field.schema.enum}
-                      />
-                    ))) ||
-                  undefined
-                }
-                className={field.expanded ? 'expanded' : undefined}
-                showExamples={false}
-                skipReadOnly={this.props.skipReadOnly}
-                skipWriteOnly={this.props.skipWriteOnly}
-                showTitle={this.props.showTitle}
-              />
-            );
-          })}
-        </tbody>
-      </PropertiesTable>
+      <div>
+        <ObjectSchemaDetails>
+          {!this.props.hideObjectTitle && (
+            <ObjectSchemaTitle>{this.props.schema.title}</ObjectSchemaTitle>
+          )}
+          {!this.props.hideObjectDescription && (
+            <ObjectSchemaDescription>
+              <Markdown compact={true} source={this.props.schema.description} />
+            </ObjectSchemaDescription>
+          )}
+        </ObjectSchemaDetails>
+
+        <PropertiesTable>
+          <tbody>
+            {mapWithLast(filteredFields, (field, isLast) => {
+              return (
+                <Field
+                  key={field.name}
+                  isLast={isLast}
+                  field={field}
+                  expandByDefault={expandByDefault}
+                  renderDiscriminatorSwitch={
+                    (discriminator &&
+                      discriminator.fieldName === field.name &&
+                      (() => (
+                        <DiscriminatorDropdown
+                          parent={this.parentSchema}
+                          enumValues={field.schema.enum}
+                        />
+                      ))) ||
+                    undefined
+                  }
+                  className={field.expanded ? 'expanded' : undefined}
+                  showExamples={false}
+                  skipReadOnly={this.props.skipReadOnly}
+                  skipWriteOnly={this.props.skipWriteOnly}
+                />
+              );
+            })}
+          </tbody>
+        </PropertiesTable>
+      </div>
     );
   }
 }

src/components/Schema/Schema.tsx

@@ -13,9 +13,10 @@ import { OneOfSchema } from './OneOfSchema';
 import { l } from '../../services/Labels';
 
 export interface SchemaOptions {
-  showTitle?: boolean;
   skipReadOnly?: boolean;
   skipWriteOnly?: boolean;
+  hideObjectTitle?: boolean;
+  hideObjectDescription?: boolean;
 }
 
 export interface SchemaProps extends SchemaOptions {

src/components/SchemaDefinition/SchemaDefinition.tsx

@@ -14,6 +14,8 @@ export interface ObjectDescriptionProps {
   exampleRef?: string;
   showReadOnly?: boolean;
   showWriteOnly?: boolean;
+  showObjectTitle?: boolean;
+  showObjectDescription?: boolean;
   parser: OpenAPIParser;
   options: RedocNormalizedOptions;
 }
@@ -53,14 +55,21 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
   }
 
   render() {
-    const { showReadOnly = true, showWriteOnly = false } = this.props;
+    const {
+      showReadOnly = true,
+      showWriteOnly = false,
+      showObjectTitle = false,
+      showObjectDescription = false,
+    } = this.props;
     return (
       <Section>
         <Row>
           <MiddlePanel>
             <Schema
               skipWriteOnly={!showWriteOnly}
               skipReadOnly={!showReadOnly}
+              hideObjectTitle={!showObjectTitle}
+              hideObjectDescription={!showObjectDescription}
               schema={this.mediaModel.schema}
             />
           </MiddlePanel>