feat: add option for display request method in webhook

src/components/Operation/Operation.tsx

@@ -18,6 +18,7 @@ import { ResponsesList } from '../Responses/ResponsesList';
 import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
 import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
 import { SECTION_ATTR } from '../../services';
+import { titleize } from '../../utils/helpers';
 
 const Description = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
@@ -27,14 +28,10 @@ export interface OperationProps {
   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 { operation } = this.props;
-
-    const { name: summary, description, deprecated, externalDocs, isWebhook } = operation;
   const hasDescription = !!(description || externalDocs);
-
+  const { showWebhookVerb } = React.useContext(OptionsContext);
   return (
     <OptionsContext.Consumer>
       {options => (
@@ -43,7 +40,12 @@ export class Operation extends React.Component<OperationProps> {
             <H2>
               <ShareLink to={operation.id} />
               {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
-                {isWebhook && <Badge type="primary"> Webhook </Badge>}
+              {isWebhook && (
+                <Badge type="primary">
+                  {' '}
+                  Webhook {showWebhookVerb && '| ' + titleize(httpVerb)}
+                </Badge>
+              )}
             </H2>
             {options.pathInMiddlePanel && !isWebhook && (
               <Endpoint operation={operation} inverted={true} />
@@ -70,5 +72,4 @@ export class Operation extends React.Component<OperationProps> {
       )}
     </OptionsContext.Consumer>
   );
-  }
+});
-}

src/components/SideMenu/MenuItem.tsx

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

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

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

src/services/RedocNormalizedOptions.ts

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