feat: add option to display verb in webhooks (#1994)

* chore: cli test run ts files
Co-authored-by: Ivana Isadora Devcic <33730345+skadinna@users.noreply.github.com>

README.md

@@ -251,6 +251,7 @@ You can use all of the following options with the standalone version of the <red
   * **summary-only**: displays a summary in the sidebar navigation item. (**default**)
   * **path-only**: displays a path in the sidebar navigation item.
   * **id-only**: displays the operation id with a fallback to the path in the sidebar navigation item.
+* `showWebhookVerb` - when set to `true`, shows the HTTP request method for webhooks in operations and in the sidebar.
 
 ### `<redoc>` theme object
 * `spacing`

cli/__test__/build/configRedoc/index.test.ts

@@ -4,8 +4,8 @@ import { readFileSync } from 'fs';
 describe('build', () => {
   it('should use .redocly.yaml', () => {
     const r = spawnSync(
-      'node',
-      ['../../../index.js', 'build', ' ../../../../demo/openapi.yaml', '--output=redocTest.html'],
+      'ts-node',
+      ['../../../index.ts', 'build', ' ../../../../demo/openapi.yaml', '--output=redocTest.html'],
       {
         cwd: __dirname,
         shell: true,

cli/__test__/build/configRedoc/inlineOptions.test.ts

@@ -4,9 +4,9 @@ import { readFileSync } from 'fs';
 describe('build with inline options', () => {
   it('should use inline options and ignore .redocly.yaml', () => {
     const r = spawnSync(
-      'node',
+      'ts-node',
       [
-        '../../../index.js',
+        '../../../index.ts',
         'build',
         ' ../../../../demo/openapi.yaml',
         '--options.disableSearch="false" ',

src/components/Operation/Operation.tsx

@@ -27,14 +27,10 @@ export interface OperationProps {
   operation: OperationModel;
 }
 
-@observer
-export class Operation extends React.Component<OperationProps> {
-  render() {
-    const { operation } = this.props;
-
-    const { name: summary, description, deprecated, externalDocs, isWebhook } = operation;
+export const Operation = observer(({ operation }: OperationProps): JSX.Element => {
+  const { name: summary, description, deprecated, externalDocs, isWebhook, httpVerb } = operation;
   const hasDescription = !!(description || externalDocs);
-
+  const { showWebhookVerb } = React.useContext(OptionsContext);
   return (
     <OptionsContext.Consumer>
       {options => (
@@ -43,7 +39,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 && httpVerb && '| ' + httpVerb.toUpperCase()}
+                </Badge>
+              )}
             </H2>
             {options.pathInMiddlePanel && !isWebhook && (
               <Endpoint operation={operation} inverted={true} />
@@ -70,5 +71,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 class OperationMenuItemContent extends React.Component<OperationMenuItemContentProps> {
-  ref = React.createRef<HTMLLabelElement>();
+export const OperationMenuItemContent = observer((props: OperationMenuItemContentProps) => {
+  const { item } = props;
+  const ref = React.createRef<HTMLLabelElement>();
+  const { showWebhookVerb } = React.useContext(OptionsContext);
 
-  componentDidUpdate() {
-    if (this.props.item.active && this.ref.current) {
-      scrollIntoViewIfNeeded(this.ref.current);
-    }
+  React.useEffect(() => {
+    if (props.item.active && ref.current) {
+      scrollIntoViewIfNeeded(ref.current);
     }
+  }, [props.item.active, ref]);
 
-  render() {
-    const { item } = this.props;
   return (
-      <MenuItemLabel
-        depth={item.depth}
-        active={item.active}
-        deprecated={item.deprecated}
-        ref={this.ref}
-      >
+    <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated} ref={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);
   }
 }