External Documentation rendered for groups, operations and schemata.

src/components/ApiInfo/ApiInfo.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { AppStore } from '../../services/AppStore';
 
 import { MiddlePanel, Row, Section } from '../../common-elements/';
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 import {
@@ -98,15 +99,13 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
                 </InfoSpanBoxWrap>
               )) ||
                 null}
-
-              {(externalDocs && (
-                <p>
-                  <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
-                </p>
-              )) ||
-                null}
             </StyledMarkdownBlock>
             <Markdown source={store.spec.info.description} />
+            {externalDocs && (
+              <p>
+                <ExternalDocumentation externalDocs={externalDocs} />
+              </p>
+            )}
           </MiddlePanel>
         </Row>
       </Section>

src/components/ContentItems/ContentItems.tsx

@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { AdvancedMarkdown } from '../Markdown/AdvancedMarkdown';
 
 import { H1, H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
@@ -64,7 +65,7 @@ const middlePanelWrap = component => <MiddlePanel>{component}</MiddlePanel>;
 @observer
 export class SectionItem extends React.Component<ContentItemProps> {
   render() {
-    const { name, description, level } = this.props.item as GroupModel;
+    const { name, description, externalDocs, level } = this.props.item as GroupModel;
 
     const Header = level === 2 ? H2 : H1;
     return (
@@ -78,6 +79,15 @@ export class SectionItem extends React.Component<ContentItemProps> {
           </MiddlePanel>
         </Row>
         <AdvancedMarkdown source={description || ''} htmlWrap={middlePanelWrap} />
+        {externalDocs && (
+          <Row>
+            <MiddlePanel>
+              <p>
+                <ExternalDocumentation externalDocs={externalDocs} />
+              </p>
+            </MiddlePanel>
+          </Row>
+        )}
       </>
     );
   }

src/components/ExternalDocumentation/ExternalDocumentation.tsx

@@ -0,0 +1,27 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import styled from '../../styled-components';
+import { OpenAPIExternalDocumentation } from '../../types';
+import { linksCss } from '../Markdown/styled.elements';
+
+const Link = styled.span`
+  ${linksCss};
+`;
+
+@observer
+export class ExternalDocumentation extends React.Component<{
+  externalDocs: OpenAPIExternalDocumentation;
+}> {
+  render() {
+    const { externalDocs } = this.props;
+    if (!externalDocs || !externalDocs.url) {
+      return null;
+    }
+
+    return (
+      <Link>
+        <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
+      </Link>
+    );
+  }
+}

src/components/Fields/FieldDetails.tsx

@@ -9,6 +9,7 @@ import {
   TypePrefix,
   TypeTitle,
 } from '../../common-elements/fields';
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { EnumValues } from './EnumValues';
 import { FieldProps } from './Field';
@@ -53,6 +54,11 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
         <div>
           <Markdown dense={true} source={description} />
         </div>
+        {schema.externalDocs && (
+          <div>
+            <ExternalDocumentation externalDocs={schema.externalDocs} />
+          </div>
+        )}
         {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null}
       </div>
     );

src/components/Operation/Operation.tsx

@@ -9,6 +9,7 @@ import { OptionsContext } from '../OptionsProvider';
 
 import { ShareLink } from '../../common-elements/linkify';
 import { Endpoint } from '../Endpoint/Endpoint';
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { Parameters } from '../Parameters/Parameters';
 import { RequestSamples } from '../RequestSamples/RequestSamples';
@@ -38,7 +39,7 @@ export class Operation extends React.Component<OperationProps> {
   render() {
     const { operation } = this.props;
 
-    const { name: summary, description, deprecated } = operation;
+    const { name: summary, description, deprecated, externalDocs } = operation;
     return (
       <OptionsContext.Consumer>
         {options => (
@@ -50,6 +51,11 @@ export class Operation extends React.Component<OperationProps> {
               </H2>
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
               {description !== undefined && <Description source={description} />}
+              {externalDocs && (
+                <p>
+                  <ExternalDocumentation externalDocs={externalDocs} />
+                </p>
+              )}
               <SecurityRequirements securities={operation.security} />
               <Parameters parameters={operation.parameters} body={operation.requestBody} />
               <ResponsesList responses={operation.responses} />

src/components/Schema/Schema.tsx

@@ -75,6 +75,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
       name: '',
       required: false,
       description: schema.description,
+      externalDocs: schema.externalDocs,
       deprecated: false,
       toggle: () => null,
       expanded: false,

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

@@ -24,6 +24,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
             "displayType": "number",
             "enum": Array [],
             "example": undefined,
+            "externalDocs": undefined,
             "format": undefined,
             "isCircular": undefined,
             "isPrimitive": true,
@@ -72,6 +73,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
             "displayType": "string",
             "enum": Array [],
             "example": undefined,
+            "externalDocs": undefined,
             "format": undefined,
             "isCircular": undefined,
             "isPrimitive": true,

src/services/models/Schema.ts

@@ -1,6 +1,6 @@
 import { action, observable } from 'mobx';
 
-import { OpenAPISchema, Referenced } from '../../types';
+import { OpenAPIExternalDocumentation, OpenAPISchema, Referenced } from '../../types';
 
 import { OpenAPIParser } from '../OpenAPIParser';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
@@ -25,6 +25,7 @@ export class SchemaModel {
   typePrefix: string = '';
   title: string;
   description: string;
+  externalDocs?: OpenAPIExternalDocumentation;
 
   isPrimitive: boolean;
   isCircular: boolean = false;
@@ -101,6 +102,7 @@ export class SchemaModel {
     this.example = schema.example;
     this.deprecated = !!schema.deprecated;
     this.pattern = schema.pattern;
+    this.externalDocs = schema.externalDocs;
 
     this.constraints = humanizeConstraints(schema);
     this.displayType = this.type;

src/types/open-api.d.ts

@@ -255,7 +255,7 @@ export interface OpenAPITag {
 
 export interface OpenAPIExternalDocumentation {
   description?: string;
-  url?: string;
+  url: string;
 }
 
 export interface OpenAPIContact {