feat(): add m2m badge to operations and fields

src/components/Fields/FieldDetails.tsx

@@ -34,6 +34,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
     schema,
     description,
     deprecated,
+    m2m,
     extensions,
     in: _in,
     const: _const,
@@ -105,6 +106,11 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
           <Badge type="warning"> {l('deprecated')} </Badge>
         </div>
       )}
+      {m2m && (
+        <div>
+          <Badge type="m2m"> M2M </Badge>
+        </div>
+      )}
       <FieldDetail raw={rawDefault} label={l('default') + ':'} value={defaultValue} />
       {!renderDiscriminatorSwitch && (
         <EnumValues isArrayType={isArrayType} values={schema.enum} />

src/components/Operation/Operation.tsx

@@ -28,7 +28,15 @@ export interface OperationProps {
 }
 
 export const Operation = observer(({ operation }: OperationProps): JSX.Element => {
-  const { name: summary, description, deprecated, externalDocs, isWebhook, httpVerb } = operation;
+  const {
+    name: summary,
+    description,
+    deprecated,
+    externalDocs,
+    isWebhook,
+    httpVerb,
+    m2m,
+  } = operation;
   const hasDescription = !!(description || externalDocs);
   const { showWebhookVerb } = React.useContext(OptionsContext);
   return (
@@ -39,6 +47,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
             <H2>
               <ShareLink to={operation.id} />
               {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
+              {m2m && <Badge type="m2m"> M2M </Badge>}
               {isWebhook && (
                 <Badge type="primary">
                   {' '}

src/components/Schema/OneOfSchema.tsx

@@ -60,6 +60,7 @@ export class OneOfSchema extends React.Component<SchemaProps> {
         </OneOfList>
         <div>
           {oneOf[schema.activeOneOf].deprecated && <Badge type="warning">Deprecated</Badge>}
+          {oneOf[schema.activeOneOf].m2m && <Badge type="m2m">M2M</Badge>}
         </div>
         <ConstraintsView constraints={activeSchema.constraints} />
         <Schema {...this.props} schema={activeSchema} />

src/services/models/Field.ts

@@ -51,6 +51,7 @@ export class FieldModel {
   example?: string;
   examples?: Record<string, ExampleModel> | any[];
   deprecated: boolean;
+  m2m: boolean;
   in?: OpenAPIParameterLocation;
   kind: string;
   extensions?: Record<string, any>;
@@ -119,6 +120,7 @@ export class FieldModel {
     }
 
     this.deprecated = info.deprecated === undefined ? !!this.schema.deprecated : info.deprecated;
+    this.m2m = info.m2m === undefined ? !!this.schema.m2m : info.m2m;
 
     if (options.showExtensions) {
       this.extensions = extractExtensions(info, options.showExtensions);

src/services/models/Operation.ts

@@ -25,6 +25,7 @@ import type { OpenAPIParser } from '../OpenAPIParser';
 import type { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import type { MediaContentModel } from './MediaContent';
 import type { ContentItemModel, ExtendedOpenAPIOperation, IMenuItem } from '../types';
+import { MilesConstants } from '../../types';
 
 export interface XPayloadSample {
   lang: 'payload';
@@ -72,6 +73,7 @@ export class OperationModel implements IMenuItem {
   operationHash?: string;
   httpVerb: string;
   deprecated: boolean;
+  m2m: boolean;
   path: string;
   servers: OpenAPIServer[];
   security: SecurityRequirementModel[];
@@ -96,6 +98,9 @@ export class OperationModel implements IMenuItem {
     this.externalDocs = operationSpec.externalDocs;
 
     this.deprecated = !!operationSpec.deprecated;
+    this.m2m = !!extractExtensions(operationSpec, [MilesConstants.MILES_M2M])?.[
+      MilesConstants.MILES_M2M
+    ];
     this.httpVerb = operationSpec.httpVerb;
     this.deprecated = !!operationSpec.deprecated;
     this.operationId = operationSpec.operationId;

src/services/models/Schema.ts

@@ -44,6 +44,7 @@ export class SchemaModel {
   displayFormat?: string;
   nullable: boolean;
   deprecated: boolean;
+  m2m: boolean;
   pattern?: string;
   example?: any;
   examples?: any[];
@@ -126,6 +127,9 @@ export class SchemaModel {
     this.example = schema.example;
     this.examples = schema.examples;
     this.deprecated = !!schema.deprecated;
+    this.m2m = !!extractExtensions(this.schema, [MilesConstants.MILES_M2M])?.[
+      MilesConstants.MILES_M2M
+    ];
     this.pattern = schema.pattern;
     this.externalDocs = schema.externalDocs;
 

src/theme.ts

@@ -21,9 +21,15 @@ const defaultTheme: ThemeInterface = {
     },
     secondary: {
       main: '#D47D17',
-      light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.secondary.main),
-      dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.secondary.main),
-      contrastText: ({ colors }) => readableColor(colors.primary.main),
+      contrastText: ({ colors }) => readableColor(colors.secondary.main),
+    },
+    m2m: {
+      main: '#343A40',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.m2m.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.m2m.main),
+      contrastText: ({ colors }) => readableColor(colors.m2m.main),
     },
     success: {
       main: '#1d8127',
@@ -271,6 +277,7 @@ export interface ResolvedThemeInterface {
     tonalOffset: number;
     primary: ColorSetting;
     secondary: ColorSetting;
+    m2m: ColorSetting;
     success: ColorSetting;
     warning: ColorSetting;
     error: ColorSetting;

src/types/miles.constants.ts

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

src/types/open-api.ts

@@ -93,6 +93,7 @@ export interface OpenAPIParameter {
   description?: string;
   required?: boolean;
   deprecated?: boolean;
+  m2m?: boolean;
   allowEmptyValue?: boolean;
   style?: OpenAPIParameterStyle;
   explode?: boolean;