Merge pull request #3 from sofico-global/feat/add-reference-to-api-on-schema

feat(): Add custom extensions for validations

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.0.0-0.3.0",
+  "version": "2.0.0-0.4.0",
   "description": "ReDoc",
   "repository": {
     "type": "git",

src/components/Custom/ExtraOperationInformation.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { MenuItemTitle, OperationBadge } from '../SideMenu';
+import { observer } from 'mobx-react';
+import { shortenHTTPVerb } from '../../utils';
+
+export interface ExtraOperationInformationProps {
+  description: string;
+  httpVerb: string;
+  label: string;
+}
+
+export const ExtraOperationInformation = observer((props: ExtraOperationInformationProps) => {
+  return (
+    <div style={{ padding: '12.5px 0', margin: '0.5rem 0' }}>
+      <div>{props.description}</div>
+      <div style={{ display: 'flex' }}>
+        <OperationBadge type={props.httpVerb}>{shortenHTTPVerb(props.httpVerb)}</OperationBadge>
+        <MenuItemTitle width="calc(100% - 38px)">{props.label}</MenuItemTitle>
+      </div>
+    </div>
+  );
+});

src/components/Fields/FieldDetails.tsx

@@ -13,7 +13,7 @@ import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocument
 import { Markdown } from '../Markdown/Markdown';
 import { EnumValues } from './EnumValues';
 import { Extensions } from './Extensions';
-import { ExtraDescription } from './ExtraDescriptions';
+import { ExtraDescription } from '../Custom/ExtraDescriptions';
 import { FieldProps } from './Field';
 import { Examples } from './Examples';
 import { ConstraintsView } from './FieldContstraints';
@@ -25,6 +25,7 @@ import { l } from '../../services/Labels';
 import { OptionsContext } from '../OptionsProvider';
 import { Pattern } from './Pattern';
 import { ArrayItemDetails } from './ArrayItemDetails';
+import { ExtraOperationInformation } from '../Custom/ExtraOperationInformation';
 
 export const FieldDetailsComponent = observer((props: FieldProps) => {
   const { enumSkipQuotes, hideSchemaTitles } = React.useContext(OptionsContext);
@@ -39,6 +40,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
     in: _in,
     const: _const,
     extraDescription,
+    extraApiReferenceForValidation,
   } = field;
   const isArrayType = schema.type === 'array';
 
@@ -126,6 +128,13 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
       )}
       {(renderDiscriminatorSwitch && renderDiscriminatorSwitch(props)) || null}
       {(_const && <FieldDetail label={l('const') + ':'} value={_const} />) || null}
+      {!!extraApiReferenceForValidation && (
+        <ExtraOperationInformation
+          httpVerb={extraApiReferenceForValidation.httpVerb}
+          label={extraApiReferenceForValidation.label}
+          description={extraApiReferenceForValidation.description}
+        />
+      )}
     </div>
   );
 });

src/services/MenuStore.ts

@@ -259,7 +259,6 @@ export class MenuStore {
   ) {
     // item here can be a copy from search results so find corresponding item from menu
     const menuItem = (item && this.getItemById(item.id)) || item;
-    console.log('activateAndScroll', menuItem?.id, updateLocation, rewriteHistory);
     this.activate(menuItem, updateLocation, rewriteHistory);
     this.scrollToActive();
     if (!menuItem || !menuItem.items.length) {

src/services/models/Field.ts

@@ -61,6 +61,11 @@ export class FieldModel {
 
   serializationMime?: string;
   extraDescription: Record<string, boolean>;
+  extraApiReferenceForValidation: {
+    httpVerb: string;
+    label: string;
+    description: string;
+  };
 
   constructor(
     parser: OpenAPIParser,
@@ -105,6 +110,17 @@ export class FieldModel {
       this.extraDescription = info[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME];
     }
 
+    if (
+      info[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME] !== undefined &&
+      info[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]?.label
+    ) {
+      this.extraApiReferenceForValidation = {
+        label: info[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]?.label,
+        httpVerb: info[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]?.httpVerb,
+        description: info[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]?.description,
+      };
+    }
+
     if (serializationMime) {
       this.serializationMime = serializationMime;
     } else if (info.style) {

src/services/models/Schema.ts

@@ -461,6 +461,14 @@ function buildFields(
           field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME] != null
             ? field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]
             : {},
+        [MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]:
+          field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME] != null
+            ? field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]
+            : {},
+        [MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]:
+          field[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME] != null
+            ? field[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]
+            : {},
       },
       $ref + '/properties/' + fieldName,
       options,
@@ -498,6 +506,14 @@ function buildFields(
             field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME] != null
               ? field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]
               : {},
+          [MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]:
+            field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME] != null
+              ? field[MilesConstants.MILES_EXTRA_DESCRIPTION_PROPERTY_NAME]
+              : {},
+          [MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]:
+            field[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME] != null
+              ? field[MilesConstants.MILES_VALIDATION_MODEL_PROPERTY_NAME]
+              : {},
         },
         `${$ref}/patternProperties/${fieldName}`,
         options,

src/types/miles.constants.ts

@@ -1,5 +1,6 @@
 export const MilesConstants = {
   MILES_EXTRA_DESCRIPTION_PROPERTY_NAME: 'x-miles-extra-description',
+  MILES_VALIDATION_MODEL_PROPERTY_NAME: 'x-miles-validation-model',
   MILES_M2M: 'x-miles-m2m',
   HIDE_LOGO_QUERY_PARAM: 'hideLogo',
 };