Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 13:44:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add option for display request method in webhook

Browse Source
This commit is contained in:
Alex Varchuk 2022-05-11 11:31:49 +03:00
parent 1f417d67c6
commit b2d8ef7312
4 changed files with 85 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Operation/Operation.tsx
View File

@ -18,6 +18,7 @@ import { ResponsesList } from '../Responses/ResponsesList';
import { ResponseSamples } from '../ResponseSamples/ResponseSamples'; import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement'; import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
import { SECTION_ATTR } from '../../services'; import { SECTION_ATTR } from '../../services';
import { titleize } from '../../utils/helpers';
const Description = styled.div` const Description = styled.div`
margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px; margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
@ -27,48 +28,48 @@ export interface OperationProps {
operation: OperationModel; operation: OperationModel;
} }
@observer export const Operation = observer(({ operation }: OperationProps): JSX.Element => {
export class Operation extends React.Component<OperationProps> { const { name: summary, description, deprecated, externalDocs, isWebhook, httpVerb } = operation;
render() { const hasDescription = !!(description || externalDocs);
const { operation } = this.props; const { showWebhookVerb } = React.useContext(OptionsContext);
return (
const { name: summary, description, deprecated, externalDocs, isWebhook } = operation; <OptionsContext.Consumer>
const hasDescription = !!(description || externalDocs); {options => (
<Row {...{ [SECTION_ATTR]: operation.operationHash }} id={operation.operationHash}>
return ( <MiddlePanel>
<OptionsContext.Consumer> <H2>
{options => ( <ShareLink to={operation.id} />
<Row {...{ [SECTION_ATTR]: operation.operationHash }} id={operation.operationHash}> {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
<MiddlePanel> {isWebhook && (
<H2> <Badge type="primary">
<ShareLink to={operation.id} /> {' '}
{summary} {deprecated && <Badge type="warning"> Deprecated </Badge>} Webhook {showWebhookVerb && '| ' + titleize(httpVerb)}
{isWebhook && <Badge type="primary"> Webhook </Badge>} </Badge>
</H2>
{options.pathInMiddlePanel && !isWebhook && (
<Endpoint operation={operation} inverted={true} />
)} )}
{hasDescription && ( </H2>
<Description> {options.pathInMiddlePanel && !isWebhook && (
{description !== undefined && <Markdown source={description} />} <Endpoint operation={operation} inverted={true} />
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />} )}
</Description> {hasDescription && (
)} <Description>
<Extensions extensions={operation.extensions} /> {description !== undefined && <Markdown source={description} />}
<SecurityRequirements securities={operation.security} /> {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
<Parameters parameters={operation.parameters} body={operation.requestBody} /> </Description>
<ResponsesList responses={operation.responses} /> )}
<CallbacksList callbacks={operation.callbacks} /> <Extensions extensions={operation.extensions} />
</MiddlePanel> <SecurityRequirements securities={operation.security} />
<DarkRightPanel> <Parameters parameters={operation.parameters} body={operation.requestBody} />
{!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />} <ResponsesList responses={operation.responses} />
<RequestSamples operation={operation} /> <CallbacksList callbacks={operation.callbacks} />
<ResponseSamples operation={operation} /> </MiddlePanel>
<CallbackSamples callbacks={operation.callbacks} /> <DarkRightPanel>
</DarkRightPanel> {!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
</Row> <RequestSamples operation={operation} />
)} <ResponseSamples operation={operation} />
</OptionsContext.Consumer> <CallbackSamples callbacks={operation.callbacks} />
); </DarkRightPanel>
} </Row>
} )}
</OptionsContext.Consumer>
);
});

56
src/components/SideMenu/MenuItem.tsx
View File

@ -8,11 +8,13 @@ import { MenuItems } from './MenuItems';
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements'; import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
import { l } from '../../services/Labels'; import { l } from '../../services/Labels';
import { scrollIntoViewIfNeeded } from '../../utils'; import { scrollIntoViewIfNeeded } from '../../utils';
import { OptionsContext } from '../OptionsProvider';
export interface MenuItemProps { export interface MenuItemProps {
item: IMenuItem; item: IMenuItem;
onActivate?: (item: IMenuItem) => void; onActivate?: (item: IMenuItem) => void;
withoutChildren?: boolean; withoutChildren?: boolean;
children?: React.ReactChild;
} }
@observer @observer
@ -70,37 +72,33 @@ export class MenuItem extends React.Component<MenuItemProps> {
export interface OperationMenuItemContentProps { export interface OperationMenuItemContentProps {
item: OperationModel; item: OperationModel;
children?: React.ReactChild;
} }
@observer export const OperationMenuItemContent = observer((props: OperationMenuItemContentProps) => {
export class OperationMenuItemContent extends React.Component<OperationMenuItemContentProps> { const { item } = props;
ref = React.createRef<HTMLLabelElement>(); const ref = React.createRef<HTMLLabelElement>();
const { showWebhookVerb } = React.useContext(OptionsContext);
componentDidUpdate() { React.useEffect(() => {
if (this.props.item.active && this.ref.current) { if (props.item.active && ref.current) {
scrollIntoViewIfNeeded(this.ref.current); scrollIntoViewIfNeeded(ref.current);
} }
} }, [props.item.active, ref]);
render() { return (
const { item } = this.props; <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated} ref={ref}>
return ( {item.isWebhook ? (
<MenuItemLabel <OperationBadge type="hook">
depth={item.depth} {showWebhookVerb ? item.httpVerb : l('webhook')}
active={item.active} </OperationBadge>
deprecated={item.deprecated} ) : (
ref={this.ref} <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
> )}
{item.isWebhook ? ( <MenuItemTitle width="calc(100% - 38px)">
<OperationBadge type="hook">{l('webhook')}</OperationBadge> {item.sidebarLabel}
) : ( {props.children}
<OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge> </MenuItemTitle>
)} </MenuItemLabel>
<MenuItemTitle width="calc(100% - 38px)"> );
{item.sidebarLabel} });
{this.props.children}
</MenuItemTitle>
</MenuItemLabel>
);
}
}

10
src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
View File

@ -106,6 +106,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -360,6 +361,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -589,6 +591,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -885,6 +888,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -1139,6 +1143,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -1368,6 +1373,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -1620,6 +1626,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -1913,6 +1920,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -2167,6 +2175,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,
@ -2396,6 +2405,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"scrollYOffset": [Function], "scrollYOffset": [Function],
"showExtensions": false, "showExtensions": false,
"showObjectSchemaExamples": false, "showObjectSchemaExamples": false,
"showWebhookVerb": false,
"sideNavStyle": "summary-only", "sideNavStyle": "summary-only",
"simpleOneOfTypeLabel": false, "simpleOneOfTypeLabel": false,
"sortEnumValuesAlphabetically": false, "sortEnumValuesAlphabetically": false,

3
src/services/RedocNormalizedOptions.ts
View File

@ -59,6 +59,7 @@ export interface RedocRawOptions {
nonce?: string; nonce?: string;
hideFab?: boolean; hideFab?: boolean;
minCharacterLengthToInitSearch?: number; minCharacterLengthToInitSearch?: number;
showWebhookVerb?: boolean;
} }
export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean { export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@ -257,6 +258,7 @@ export class RedocNormalizedOptions {
generatedPayloadSamplesMaxDepth: number; generatedPayloadSamplesMaxDepth: number;
hideFab: boolean; hideFab: boolean;
minCharacterLengthToInitSearch: number; minCharacterLengthToInitSearch: number;
showWebhookVerb: boolean;
nonce?: string; nonce?: string;
@ -334,5 +336,6 @@ export class RedocNormalizedOptions {
this.nonce = raw.nonce; this.nonce = raw.nonce;
this.hideFab = argValueToBoolean(raw.hideFab); this.hideFab = argValueToBoolean(raw.hideFab);
this.minCharacterLengthToInitSearch = argValueToNumber(raw.minCharacterLengthToInitSearch) || 3; this.minCharacterLengthToInitSearch = argValueToNumber(raw.minCharacterLengthToInitSearch) || 3;
this.showWebhookVerb = argValueToBoolean(raw.showWebhookVerb);
} }
} }