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,48 +27,48 @@ 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;
-    const hasDescription = !!(description || externalDocs);
-
-    return (
-      <OptionsContext.Consumer>
-        {options => (
-          <Row {...{ [SECTION_ATTR]: operation.operationHash }} id={operation.operationHash}>
-            <MiddlePanel>
-              <H2>
-                <ShareLink to={operation.id} />
-                {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
-                {isWebhook && <Badge type="primary"> Webhook </Badge>}
-              </H2>
-              {options.pathInMiddlePanel && !isWebhook && (
-                <Endpoint operation={operation} inverted={true} />
+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 => (
+        <Row {...{ [SECTION_ATTR]: operation.operationHash }} id={operation.operationHash}>
+          <MiddlePanel>
+            <H2>
+              <ShareLink to={operation.id} />
+              {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
+              {isWebhook && (
+                <Badge type="primary">
+                  {' '}
+                  Webhook {showWebhookVerb && httpVerb && '| ' + httpVerb.toUpperCase()}
+                </Badge>
               )}
-              {hasDescription && (
-                <Description>
-                  {description !== undefined && <Markdown source={description} />}
-                  {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
-                </Description>
-              )}
-              <Extensions extensions={operation.extensions} />
-              <SecurityRequirements securities={operation.security} />
-              <Parameters parameters={operation.parameters} body={operation.requestBody} />
-              <ResponsesList responses={operation.responses} />
-              <CallbacksList callbacks={operation.callbacks} />
-            </MiddlePanel>
-            <DarkRightPanel>
-              {!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
-              <RequestSamples operation={operation} />
-              <ResponseSamples operation={operation} />
-              <CallbackSamples callbacks={operation.callbacks} />
-            </DarkRightPanel>
-          </Row>
-        )}
-      </OptionsContext.Consumer>
-    );
-  }
-}
+            </H2>
+            {options.pathInMiddlePanel && !isWebhook && (
+              <Endpoint operation={operation} inverted={true} />
+            )}
+            {hasDescription && (
+              <Description>
+                {description !== undefined && <Markdown source={description} />}
+                {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
+              </Description>
+            )}
+            <Extensions extensions={operation.extensions} />
+            <SecurityRequirements securities={operation.security} />
+            <Parameters parameters={operation.parameters} body={operation.requestBody} />
+            <ResponsesList responses={operation.responses} />
+            <CallbacksList callbacks={operation.callbacks} />
+          </MiddlePanel>
+          <DarkRightPanel>
+            {!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
+            <RequestSamples operation={operation} />
+            <ResponseSamples operation={operation} />
+            <CallbackSamples callbacks={operation.callbacks} />
+          </DarkRightPanel>
+        </Row>
+      )}
+    </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}
-      >
-        {item.isWebhook ? (
-          <OperationBadge type="hook">{l('webhook')}</OperationBadge>
-        ) : (
-          <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
-        )}
-        <MenuItemTitle width="calc(100% - 38px)">
-          {item.sidebarLabel}
-          {this.props.children}
-        </MenuItemTitle>
-      </MenuItemLabel>
-    );
-  }
-}
+  return (
+    <MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated} ref={ref}>
+      {item.isWebhook ? (
+        <OperationBadge type="hook">
+          {showWebhookVerb ? item.httpVerb : l('webhook')}
+        </OperationBadge>
+      ) : (
+        <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
+      )}
+      <MenuItemTitle width="calc(100% - 38px)">
+        {item.sidebarLabel}
+        {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);
   }
 }