feat(): Add logic to see extra description extension

This logic will make sure that every extensions with x-miles-extra-description is shown in the UI

src/components/Fields/ExtraDescriptions.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ExtensionValue, FieldLabel } from '../../common-elements/fields';
+import styled from '../../styled-components';
+
+const Div = styled.div`
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  &:last-child {
+    padding-top: 2px;
+    padding-bottom: 4px;
+  }
+`;
+
+export interface ExtraDescriptionProps {
+  extraDescriptions: Record<string, boolean>;
+}
+
+export class ExtraDescription extends React.PureComponent<ExtraDescriptionProps> {
+  render() {
+    const desc = this.props.extraDescriptions;
+
+    return (
+      <div>
+        {Object.keys(desc).map(key => (
+          <Div key={key}>
+            <FieldLabel>{key}:</FieldLabel> <ExtensionValue>{desc[key]}</ExtensionValue>
+          </Div>
+        ))}
+      </div>
+    );
+  }
+}

src/components/Fields/FieldDetails.tsx

@@ -12,6 +12,7 @@ import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocument
 import { Markdown } from '../Markdown/Markdown';
 import { EnumValues } from './EnumValues';
 import { Extensions } from './Extensions';
+import { ExtraDescription } from './ExtraDescriptions';
 import { FieldProps } from './Field';
 import { Examples } from './Examples';
 import { ConstraintsView } from './FieldContstraints';
@@ -28,7 +29,15 @@ function FieldDetailsComponent(props: FieldProps) {
   const { enumSkipQuotes, hideSchemaTitles } = React.useContext(OptionsContext);
 
   const { showExamples, field, renderDiscriminatorSwitch } = props;
-  const { schema, description, deprecated, extensions, in: _in, const: _const } = field;
+  const {
+    schema,
+    description,
+    deprecated,
+    extensions,
+    in: _in,
+    const: _const,
+    extraDescription,
+  } = field;
   const isArrayType = schema.type === 'array';
 
   const rawDefault = enumSkipQuotes || _in === 'header'; // having quotes around header field default values is confusing and inappropriate
@@ -95,6 +104,7 @@ function FieldDetailsComponent(props: FieldProps) {
       {!renderDiscriminatorSwitch && (
         <EnumValues isArrayType={isArrayType} values={schema.enum} />
       )}{' '}
+      {extraDescription && <ExtraDescription extraDescriptions={extraDescription} />}
       {renderedExamples}
       <Extensions extensions={{ ...extensions, ...schema.extensions }} />
       <div>

src/services/models/Field.ts

@@ -1,6 +1,7 @@
 import { action, observable, makeObservable } from 'mobx';
 
 import {
+  MilesConstants,
   OpenAPIParameter,
   OpenAPIParameterLocation,
   OpenAPIParameterStyle,
@@ -58,6 +59,7 @@ export class FieldModel {
   const?: any;
 
   serializationMime?: string;
+  extraDescription: Record<string, boolean>;
 
   constructor(
     parser: OpenAPIParser,
@@ -92,6 +94,12 @@ export class FieldModel {
       );
     }
 
+    if (info[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME] == undefined) {
+      this.extraDescription = info.extraDescription;
+    } else {
+      this.extraDescription = info[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME];
+    }
+
     if (serializationMime) {
       this.serializationMime = serializationMime;
     } else if (info.style) {

src/services/models/Schema.ts

@@ -1,6 +1,11 @@
 import { action, observable, makeObservable } from 'mobx';
 
-import { OpenAPIExternalDocumentation, OpenAPISchema, Referenced } from '../../types';
+import {
+  MilesConstants,
+  OpenAPIExternalDocumentation,
+  OpenAPISchema,
+  Referenced,
+} from '../../types';
 
 import { OpenAPIParser } from '../OpenAPIParser';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
@@ -388,6 +393,10 @@ function buildFields(
           ...field,
           default: field.default === undefined && defaults ? defaults[fieldName] : field.default,
         },
+        extraDescription:
+          field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME] != null
+            ? field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]
+            : {},
       },
       $ref + '/properties/' + fieldName,
       options,
@@ -414,6 +423,7 @@ function buildFields(
           required: false,
           schema: additionalProps === true ? {} : additionalProps,
           kind: 'additionalProperties',
+          extraDescription: {},
         },
         $ref + '/additionalProperties',
         options,

src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './open-api';
+export * from './miles.constants';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

src/types/miles.constants.ts

@@ -0,0 +1,3 @@
+export const MilesConstants = {
+  MILES_EXTRA_DESCRIPTION_PROPERTY_NAME: 'x-miles-extra-description',
+};

src/types/open-api.ts

@@ -100,6 +100,7 @@ export interface OpenAPIParameter {
   content?: { [media: string]: OpenAPIMediaType };
   encoding?: Record<string, OpenAPIEncoding>;
   const?: any;
+  extraDescription: Record<string, boolean>;
 }
 
 export interface OpenAPIExample {