SWI-2779 Add Support for Custom Badges

This commit is contained in:
ckoegel 2023-06-06 14:07:48 -04:00
parent 8011affd00
commit 30b81d7efb
6 changed files with 73 additions and 2 deletions

View File

@ -112,6 +112,9 @@ paths:
summary: Add a new pet to the store summary: Add a new pet to the store
description: Add new pet to the store inventory. description: Add new pet to the store inventory.
operationId: addPet operationId: addPet
x-badges:
- name: Global
type: global
responses: responses:
'405': '405':
description: Invalid input description: Invalid input
@ -156,6 +159,9 @@ paths:
summary: Update an existing pet summary: Update an existing pet
description: '' description: ''
operationId: updatePet operationId: updatePet
x-badges:
- name: US Only
type: usonly
responses: responses:
'400': '400':
description: Invalid ID supplied description: Invalid ID supplied
@ -186,6 +192,9 @@ paths:
get: get:
description: Retrieve the history information associated with an order. description: Retrieve the history information associated with an order.
operationId: GetOrderHistory operationId: GetOrderHistory
x-badges:
- name: Success
type: success
parameters: parameters:
- description: '' - description: ''
in: path in: path

View File

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

View File

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

View File

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

View File

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

View File

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