Merge pull request #21 from Bandwidth/badges

SWI-2779 Add Support for Custom Badges

demo/openapi.yaml

@@ -112,6 +112,9 @@ paths:
       summary: Add a new pet to the store
       description: Add new pet to the store inventory.
       operationId: addPet
+      x-badges:
+        - name: Global
+          type: global
       responses:
         '405':
           description: Invalid input
@@ -156,6 +159,9 @@ paths:
       summary: Update an existing pet
       description: ''
       operationId: updatePet
+      x-badges:
+        - name: US Only
+          type: usonly
       responses:
         '400':
           description: Invalid ID supplied
@@ -186,6 +192,9 @@ paths:
     get:
       description: Retrieve the history information associated with an order.
       operationId: GetOrderHistory
+      x-badges:
+        - name: Success
+          type: success
       parameters:
         - description: ''
           in: path
@@ -244,6 +253,11 @@ paths:
         date range or specific query parameter (marked by <b>*</b> below) is
         provided, the order results will be limited to the last two years.
       operationId: GetTnOptionOrders
+      x-badges:
+        - name: 1st Badge
+          type: warning
+        - name: 2nd Badge
+          type: experimental
       parameters:
         - description: The status of the TN Option order being searched for.
           example: PROCESSING

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,
+    badges,
+    externalDocs,
+    isWebhook,
+    httpVerb,
+  } = operation;
   const hasDescription = !!(description || externalDocs);
   const { showWebhookVerb } = React.useContext(OptionsContext);
   return (
@@ -45,6 +53,16 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
                   Webhook {showWebhookVerb && httpVerb && '| ' + httpVerb.toUpperCase()}
                 </Badge>
               )}
+              {badges.map(badge => {
+                return (
+                  badge && (
+                    <Badge type={badge.type} key={badge.name}>
+                      {' '}
+                      {badge.name}{' '}
+                    </Badge>
+                  )
+                );
+              })}
             </H2>
             {options.pathInMiddlePanel && !isWebhook && (
               <Endpoint operation={operation} inverted={true} />

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

@@ -134,6 +134,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "light": "#eb6d6b",
                           "main": "#d41f1c",
                         },
+                        "experimental": Object {
+                          "contrastText": "#fff",
+                          "dark": "#540297",
+                          "light": "#ba68fd",
+                          "main": "#8c03fc",
+                        },
+                        "global": Object {
+                          "contrastText": "#fff",
+                          "dark": "#4d02b0",
+                          "light": "#b681fd",
+                          "main": "#7c1cfc",
+                        },
                         "gray": Object {
                           "100": "#F5F5F5",
                           "50": "#FAFAFA",
@@ -188,6 +200,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "secondary": "#666",
                         },
                         "tonalOffset": 0.2,
+                        "usonly": Object {
+                          "contrastText": "#fff",
+                          "dark": "#045b8b",
+                          "light": "#61c4fa",
+                          "main": "#079cee",
+                        },
                         "warning": Object {
                           "contrastText": "#ffffff",
                           "dark": "#996300",
@@ -405,6 +423,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "light": "#eb6d6b",
                           "main": "#d41f1c",
                         },
+                        "experimental": Object {
+                          "contrastText": "#fff",
+                          "dark": "#540297",
+                          "light": "#ba68fd",
+                          "main": "#8c03fc",
+                        },
+                        "global": Object {
+                          "contrastText": "#fff",
+                          "dark": "#4d02b0",
+                          "light": "#b681fd",
+                          "main": "#7c1cfc",
+                        },
                         "gray": Object {
                           "100": "#F5F5F5",
                           "50": "#FAFAFA",
@@ -459,6 +489,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "secondary": "#666",
                         },
                         "tonalOffset": 0.2,
+                        "usonly": Object {
+                          "contrastText": "#fff",
+                          "dark": "#045b8b",
+                          "light": "#61c4fa",
+                          "main": "#079cee",
+                        },
                         "warning": Object {
                           "contrastText": "#ffffff",
                           "dark": "#996300",
@@ -663,6 +699,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "light": "#eb6d6b",
                     "main": "#d41f1c",
                   },
+                  "experimental": Object {
+                    "contrastText": "#fff",
+                    "dark": "#540297",
+                    "light": "#ba68fd",
+                    "main": "#8c03fc",
+                  },
+                  "global": Object {
+                    "contrastText": "#fff",
+                    "dark": "#4d02b0",
+                    "light": "#b681fd",
+                    "main": "#7c1cfc",
+                  },
                   "gray": Object {
                     "100": "#F5F5F5",
                     "50": "#FAFAFA",
@@ -717,6 +765,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "secondary": "#666",
                   },
                   "tonalOffset": 0.2,
+                  "usonly": Object {
+                    "contrastText": "#fff",
+                    "dark": "#045b8b",
+                    "light": "#61c4fa",
+                    "main": "#079cee",
+                  },
                   "warning": Object {
                     "contrastText": "#ffffff",
                     "dark": "#996300",
@@ -983,6 +1037,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "light": "#eb6d6b",
                           "main": "#d41f1c",
                         },
+                        "experimental": Object {
+                          "contrastText": "#fff",
+                          "dark": "#540297",
+                          "light": "#ba68fd",
+                          "main": "#8c03fc",
+                        },
+                        "global": Object {
+                          "contrastText": "#fff",
+                          "dark": "#4d02b0",
+                          "light": "#b681fd",
+                          "main": "#7c1cfc",
+                        },
                         "gray": Object {
                           "100": "#F5F5F5",
                           "50": "#FAFAFA",
@@ -1037,6 +1103,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "secondary": "#666",
                         },
                         "tonalOffset": 0.2,
+                        "usonly": Object {
+                          "contrastText": "#fff",
+                          "dark": "#045b8b",
+                          "light": "#61c4fa",
+                          "main": "#079cee",
+                        },
                         "warning": Object {
                           "contrastText": "#ffffff",
                           "dark": "#996300",
@@ -1266,6 +1338,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "light": "#eb6d6b",
                           "main": "#d41f1c",
                         },
+                        "experimental": Object {
+                          "contrastText": "#fff",
+                          "dark": "#540297",
+                          "light": "#ba68fd",
+                          "main": "#8c03fc",
+                        },
+                        "global": Object {
+                          "contrastText": "#fff",
+                          "dark": "#4d02b0",
+                          "light": "#b681fd",
+                          "main": "#7c1cfc",
+                        },
                         "gray": Object {
                           "100": "#F5F5F5",
                           "50": "#FAFAFA",
@@ -1320,6 +1404,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                           "secondary": "#666",
                         },
                         "tonalOffset": 0.2,
+                        "usonly": Object {
+                          "contrastText": "#fff",
+                          "dark": "#045b8b",
+                          "light": "#61c4fa",
+                          "main": "#079cee",
+                        },
                         "warning": Object {
                           "contrastText": "#ffffff",
                           "dark": "#996300",
@@ -1520,6 +1610,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "light": "#eb6d6b",
                     "main": "#d41f1c",
                   },
+                  "experimental": Object {
+                    "contrastText": "#fff",
+                    "dark": "#540297",
+                    "light": "#ba68fd",
+                    "main": "#8c03fc",
+                  },
+                  "global": Object {
+                    "contrastText": "#fff",
+                    "dark": "#4d02b0",
+                    "light": "#b681fd",
+                    "main": "#7c1cfc",
+                  },
                   "gray": Object {
                     "100": "#F5F5F5",
                     "50": "#FAFAFA",
@@ -1574,6 +1676,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "secondary": "#666",
                   },
                   "tonalOffset": 0.2,
+                  "usonly": Object {
+                    "contrastText": "#fff",
+                    "dark": "#045b8b",
+                    "light": "#61c4fa",
+                    "main": "#079cee",
+                  },
                   "warning": Object {
                     "contrastText": "#ffffff",
                     "dark": "#996300",
@@ -1799,6 +1907,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                 "light": "#eb6d6b",
                 "main": "#d41f1c",
               },
+              "experimental": Object {
+                "contrastText": "#fff",
+                "dark": "#540297",
+                "light": "#ba68fd",
+                "main": "#8c03fc",
+              },
+              "global": Object {
+                "contrastText": "#fff",
+                "dark": "#4d02b0",
+                "light": "#b681fd",
+                "main": "#7c1cfc",
+              },
               "gray": Object {
                 "100": "#F5F5F5",
                 "50": "#FAFAFA",
@@ -1853,6 +1973,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                 "secondary": "#666",
               },
               "tonalOffset": 0.2,
+              "usonly": Object {
+                "contrastText": "#fff",
+                "dark": "#045b8b",
+                "light": "#61c4fa",
+                "main": "#079cee",
+              },
               "warning": Object {
                 "contrastText": "#ffffff",
                 "dark": "#996300",
@@ -2108,6 +2234,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "light": "#eb6d6b",
                     "main": "#d41f1c",
                   },
+                  "experimental": Object {
+                    "contrastText": "#fff",
+                    "dark": "#540297",
+                    "light": "#ba68fd",
+                    "main": "#8c03fc",
+                  },
+                  "global": Object {
+                    "contrastText": "#fff",
+                    "dark": "#4d02b0",
+                    "light": "#b681fd",
+                    "main": "#7c1cfc",
+                  },
                   "gray": Object {
                     "100": "#F5F5F5",
                     "50": "#FAFAFA",
@@ -2162,6 +2300,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "secondary": "#666",
                   },
                   "tonalOffset": 0.2,
+                  "usonly": Object {
+                    "contrastText": "#fff",
+                    "dark": "#045b8b",
+                    "light": "#61c4fa",
+                    "main": "#079cee",
+                  },
                   "warning": Object {
                     "contrastText": "#ffffff",
                     "dark": "#996300",
@@ -2379,6 +2523,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "light": "#eb6d6b",
                     "main": "#d41f1c",
                   },
+                  "experimental": Object {
+                    "contrastText": "#fff",
+                    "dark": "#540297",
+                    "light": "#ba68fd",
+                    "main": "#8c03fc",
+                  },
+                  "global": Object {
+                    "contrastText": "#fff",
+                    "dark": "#4d02b0",
+                    "light": "#b681fd",
+                    "main": "#7c1cfc",
+                  },
                   "gray": Object {
                     "100": "#F5F5F5",
                     "50": "#FAFAFA",
@@ -2433,6 +2589,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "secondary": "#666",
                   },
                   "tonalOffset": 0.2,
+                  "usonly": Object {
+                    "contrastText": "#fff",
+                    "dark": "#045b8b",
+                    "light": "#61c4fa",
+                    "main": "#079cee",
+                  },
                   "warning": Object {
                     "contrastText": "#ffffff",
                     "dark": "#996300",
@@ -2637,6 +2799,18 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "light": "#eb6d6b",
               "main": "#d41f1c",
             },
+            "experimental": Object {
+              "contrastText": "#fff",
+              "dark": "#540297",
+              "light": "#ba68fd",
+              "main": "#8c03fc",
+            },
+            "global": Object {
+              "contrastText": "#fff",
+              "dark": "#4d02b0",
+              "light": "#b681fd",
+              "main": "#7c1cfc",
+            },
             "gray": Object {
               "100": "#F5F5F5",
               "50": "#FAFAFA",
@@ -2691,6 +2865,12 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "secondary": "#666",
             },
             "tonalOffset": 0.2,
+            "usonly": Object {
+              "contrastText": "#fff",
+              "dark": "#045b8b",
+              "light": "#61c4fa",
+              "main": "#079cee",
+            },
             "warning": Object {
               "contrastText": "#ffffff",
               "dark": "#996300",

src/services/models/Operation.ts

@@ -20,7 +20,12 @@ import { RequestBodyModel } from './RequestBody';
 import { ResponseModel } from './Response';
 import { SideNavStyleEnum } from '../types';
 
-import type { OpenAPIExternalDocumentation, OpenAPIServer, OpenAPIXCodeSample } from '../../types';
+import type {
+  OpenAPIExternalDocumentation,
+  OpenAPIServer,
+  OpenAPIXCodeSample,
+  OperationCustomBadge,
+} from '../../types';
 import type { OpenAPIParser } from '../OpenAPIParser';
 import type { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import type { MediaContentModel } from './MediaContent';
@@ -72,6 +77,7 @@ export class OperationModel implements IMenuItem {
   operationHash?: string;
   httpVerb: string;
   deprecated: boolean;
+  badges: OperationCustomBadge[];
   path: string;
   servers: OpenAPIServer[];
   security: SecurityRequirementModel[];
@@ -96,6 +102,7 @@ export class OperationModel implements IMenuItem {
     this.externalDocs = operationSpec.externalDocs;
 
     this.deprecated = !!operationSpec.deprecated;
+    this.badges = operationSpec['x-badges'] ? operationSpec['x-badges'] : [];
     this.httpVerb = operationSpec.httpVerb;
     this.deprecated = !!operationSpec.deprecated;
     this.operationId = operationSpec.operationId;

src/theme.ts

@@ -37,6 +37,24 @@ const defaultTheme: ThemeInterface = {
       dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
       contrastText: ({ colors }) => readableColor(colors.error.main),
     },
+    global: {
+      main: '#7c1cfc',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.global.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.global.main),
+      contrastText: ({ colors }) => readableColor(colors.global.main),
+    },
+    usonly: {
+      main: '#079cee',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.usonly.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.usonly.main),
+      contrastText: ({ colors }) => readableColor(colors.global.main),
+    },
+    experimental: {
+      main: '#8c03fc',
+      light: ({ colors }) => lighten(colors.tonalOffset, colors.experimental.main),
+      dark: ({ colors }) => darken(colors.tonalOffset, colors.experimental.main),
+      contrastText: ({ colors }) => readableColor(colors.experimental.main),
+    },
     gray: {
       50: '#FAFAFA',
       100: '#F5F5F5',
@@ -267,6 +285,9 @@ export interface ResolvedThemeInterface {
     success: ColorSetting;
     warning: ColorSetting;
     error: ColorSetting;
+    global: ColorSetting;
+    usonly: ColorSetting;
+    experimental: ColorSetting;
     gray: {
       50: string;
       100: string;

src/types/open-api.ts

@@ -64,6 +64,20 @@ export interface OpenAPIPath {
   $ref?: string;
 }
 
+export type OperationCustomBadgeType =
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'global'
+  | 'usonly'
+  | 'experimental';
+
+export interface OperationCustomBadge {
+  name: string;
+  type: OperationCustomBadgeType;
+}
+
 export interface OpenAPIXCodeSample {
   lang: string;
   label?: string;
@@ -83,6 +97,7 @@ export interface OpenAPIOperation {
   deprecated?: boolean;
   security?: OpenAPISecurityRequirement[];
   servers?: OpenAPIServer[];
+  'x-badges'?: OperationCustomBadge[];
   'x-codeSamples'?: OpenAPIXCodeSample[];
   'x-code-samples'?: OpenAPIXCodeSample[]; // deprecated
 }

src/utils/__tests__/__snapshots__/loadAndBundleSpec.test.ts.snap

@@ -773,6 +773,16 @@ and standard method from web, mobile and desktop applications.
         "tags": Array [
           "Tn Option",
         ],
+        "x-badges": Array [
+          Object {
+            "name": "1st Badge",
+            "type": "warning",
+          },
+          Object {
+            "name": "2nd Badge",
+            "type": "experimental",
+          },
+        ],
       },
       "post": Object {
         "description": "Create TN Option order to assign line features to the telephone number.<br><br>Attribute description:<ul><li>for A2pSettings attribute</li><table style=\\"text-align: left; width: 80%;\\" border=\\"1\\" cellpadding=\\"2\\" cellspacing=\\"0\\"><tbody><tr><th>Number attribute</th><th>Action value</th><th>Description of action</th></tr><tr><td>LongCode</td><td><i>systemDefault</i></td><td>Removes the per-TN A2P attributes, and it reverts to the Location/SIP Peer characteristics. Any values for Class or Campaign ID are not valid</td></tr><tr><td>LongCode</td><td><i>asSpecified</i></td><td>Sets the message class and campaign ID - this is the default if unspecified</td></tr><tr><td>LongCode</td><td><i>off</i></td><td>Will set the TN as a 'P' TN. Any values for Class or Campaign ID are not valid</td></tr><tr><td>LongCode</td><td><i>delete</i></td><td>Will delete the campaign ID from TN. Any values for Class or Campaign ID are not valid</td></tr><tr><td>LongCode</td><td><i>unchanged</i></td><td>Do nothing with respect to A2P</td></tr><tr><td>TollFree</td><td><i>systemDefault</i></td><td>Removes the per-TN A2P attributes, and it reverts to the Location/SIP Peer characteristics. Any values for Class or Campaign ID are not valid</td></tr><tr><td>TollFree</td><td><i>asSpecified</i></td><td>Sets the message class and campaign ID - this is the default if unspecified</td></tr><tr><td>TollFree</td><td><i>off</i></td><td>If the Togglz value is set to 'on' this is invalid for Toll Free telephone numbers. Any values for Class or Campaign ID in the payload are invalid. If the Togglz value is set to off this behaves like and A2P TN, where the characteristics of the TNs is set to 'P'</td></tr><tr><td>TollFree</td><td><i>unchanged</i></td><td>Do nothing with respect to A2P</td></tr></tbody></table><li>for Origination Route plan attribute</li><table style=\\"text-align: left; width: 80%;\\" border=\\"1\\" cellpadding=\\"2\\" cellspacing=\\"0\\"><tbody><tr><th>Action value</th><th>Description of action</th></tr><tr><td>asSpecified</td><td>Creates/updates the origination route plan for the TN with route plan details provided in the request </td></tr><tr><td>off</td><td>Removes the origination route plan for the TN. Route list is the request must be empty</td></tr><tr><td>unchanged</td><td>Doesn't update/create the origination route plan, even when route plan details exist in the request</td></tr></tbody></table><ul><li> Origination route plan is validated against CallForward and RewriteUser</li><ul><li type=\\"square\\">Route plan and CallForward cannot co-exist. Order is accepted but will respond with error messages on GET.</li><li type=\\"square\\">Route plan and RewriteUser cannot co-exist. Order is accepted but will respond with error messages on GET.</li></ul></ul><li>for Pindrop Enabled attribute</li><table style=\\"text-align: left; width: 80%;\\" border=\\"1\\" cellpadding=\\"2\\" cellspacing=\\"0\\"><tbody><tr><th>Action value</th><th>Description of action</th></tr><tr><td>true</td><td>Enables Pindrop integration on each phone number in the option group</td></tr><tr><td>false</td><td>Explicitly disables Pindrop integration on each phone number in the option group</td></tr></tbody></table><li>for other attribute</li><ul><li type=\\"square\\"> <i>systemDefault</i> - implies that the element profile value should be removed so that the TN changes back to the default system behavior;</li><li type=\\"square\\"> <i>unchanged</i> - the value should remain unchanged - implies a read before write model.</li><li type=\\"square\\"><u>Leaving the element out of the payload is equivalent to <i>unchanged</i>.</u></li></ul></ul>",
@@ -1095,6 +1105,12 @@ and standard method from web, mobile and desktop applications.
         "tags": Array [
           "Tn Option",
         ],
+        "x-badges": Array [
+          Object {
+            "name": "Success",
+            "type": "success",
+          },
+        ],
       },
     },
     "/pet": Object {
@@ -1144,6 +1160,12 @@ and standard method from web, mobile and desktop applications.
         "tags": Array [
           "pet",
         ],
+        "x-badges": Array [
+          Object {
+            "name": "Global",
+            "type": "global",
+          },
+        ],
         "x-codeSamples": Array [
           Object {
             "lang": "C#",
@@ -1208,6 +1230,12 @@ try {
         "tags": Array [
           "pet",
         ],
+        "x-badges": Array [
+          Object {
+            "name": "US Only",
+            "type": "usonly",
+          },
+        ],
         "x-codeSamples": Array [
           Object {
             "lang": "PHP",

src/utils/openapi.ts

@@ -662,6 +662,7 @@ export function isRedocExtension(key: string): boolean {
     'x-traitTag': true,
     'x-additionalPropertiesName': true,
     'x-explicitMappingOnly': true,
+    'x-badges': true,
   };
 
   return key in redocExtensions;