External Documentation rendered for groups, operations and schemata.

URL for External Documentation is required.

src/components/ApiInfo/ApiInfo.tsx

@@ -5,6 +5,7 @@ import { AppStore } from '../../services/AppStore';
 
 import { MiddlePanel, Row } from '../../common-elements/';
 
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 import {
   ApiHeader,
@@ -97,14 +98,12 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
               </InfoSpanBoxWrap>
             )) ||
               null}
-
-            {(externalDocs && (
-              <p>
-                <a href={externalDocs.url}>{externalDocs.description || externalDocs.url}</a>
-              </p>
-            )) ||
-              null}
           </StyledMarkdownBlock>
+          {externalDocs && (
+            <p>
+              <ExternalDocumentation externalDocs={externalDocs} />
+            </p>
+          )}
         </MiddlePanel>
       </Row>
     );

src/components/ContentItems/ContentItems.tsx

@@ -2,6 +2,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { SECTION_ATTR } from '../../services/MenuStore';
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 
 import { H1, MiddlePanel, Row, ShareLink } from '../../common-elements';
@@ -79,7 +80,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
 @observer
 export class SectionItem extends React.Component<ContentItemProps> {
   render() {
-    const { name, description } = this.props.item;
+    const { name, description, externalDocs } = this.props.item;
     const components = this.props.allowedMdComponents;
     return (
       <Row>
@@ -97,6 +98,11 @@ export class SectionItem extends React.Component<ContentItemProps> {
               )}
             </StoreConsumer>
           )}
+          {externalDocs && (
+            <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';
@@ -46,6 +47,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';
@@ -43,7 +44,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 => (
@@ -55,6 +56,11 @@ export class Operation extends React.Component<OperationProps> {
               </H2>
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
               {description !== undefined && <Markdown 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;
@@ -100,6 +101,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 {