feat: add jsonrpc support

src/components/Endpoint/Endpoint.tsx

@@ -22,6 +22,7 @@ export interface EndpointProps {
   hideHostname?: boolean;
   inverted?: boolean;
   compact?: boolean;
+  isJsonRpc?: boolean;
 }
 
 export interface EndpointState {
@@ -41,7 +42,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
   };
 
   render() {
-    const { operation, inverted, hideHostname } = this.props;
+    const { operation, inverted, hideHostname, isJsonRpc } = this.props;
     const { expanded } = this.state;
 
     // TODO: highlight server variables, e.g. https://{user}.test.com
@@ -80,7 +81,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
                               : basePath
                             : normalizedUrl}
                         </span>
-                        {operation.path}
+                        {!!isJsonRpc ? `/json` : operation.path}
                       </ServerUrl>
                     </SelectOnClick>
                   </ServerItem>

src/components/Operation/Operation.tsx

@@ -37,7 +37,7 @@ export class Operation extends React.Component<OperationProps> {
   render() {
     const { operation } = this.props;
 
-    const { name: summary, description, deprecated, externalDocs, isWebhook } = operation;
+    const { name: summary, description, deprecated, externalDocs, isWebhook, isJsonRpc } = operation;
     const hasDescription = !!(description || externalDocs);
 
     return (
@@ -49,9 +49,10 @@ export class Operation extends React.Component<OperationProps> {
                 <ShareLink to={operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
                 {isWebhook && <Badge type="primary"> Webhook </Badge>}
+                {isJsonRpc && <Badge type="primary"> JSON-RPC </Badge>}
               </H2>
               {options.pathInMiddlePanel && !isWebhook && (
-                <Endpoint operation={operation} inverted={true} />
+                <Endpoint operation={operation} inverted={true} isJsonRpc={isJsonRpc} />
               )}
               {hasDescription && (
                 <Description>
@@ -66,7 +67,7 @@ export class Operation extends React.Component<OperationProps> {
               <CallbacksList callbacks={operation.callbacks} />
             </MiddlePanel>
             <DarkRightPanel>
-              {!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
+              {!options.pathInMiddlePanel && (!isWebhook || !isJsonRpc) && <Endpoint operation={operation} isJsonRpc={isJsonRpc} />}
               <RequestSamples operation={operation} />
               <ResponseSamples operation={operation} />
               <CallbackSamples callbacks={operation.callbacks} />

src/components/SideMenu/MenuItem.tsx

@@ -91,11 +91,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
         deprecated={item.deprecated}
         ref={this.ref}
       >
-        {item.isWebhook ? (
+        {this.renderOperationBadge(item)}
-          <OperationBadge type="hook">{l('webhook')}</OperationBadge>
-        ) : (
-          <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
-        )}
         <MenuItemTitle width="calc(100% - 38px)">
           {item.name}
           {this.props.children}
@@ -103,4 +99,14 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
       </MenuItemLabel>
     );
   }
+
+  renderOperationBadge(item: OperationModel) {
+    if (item.isWebhook) {
+      return <OperationBadge type="hook">{l('webhook')}</OperationBadge>
+    } else if (item.isJsonRpc) {
+      return <OperationBadge type="rpc">{l('jsonrpc')}</OperationBadge>;
+    } else {
+      return <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
+    }
+  }
 }

src/components/SideMenu/styled.elements.ts

@@ -7,7 +7,7 @@ import styled, { css, ResolvedThemeInterface } from '../../styled-components';
 export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   className: `operation-type ${props.type}`,
 }))<{ type: string }>`
-  width: 9ex;
+  width: 15ex;
   display: inline-block;
   height: ${props => props.theme.typography.code.fontSize};
   line-height: ${props => props.theme.typography.code.fontSize};
@@ -138,6 +138,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
     (type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
   display: flex;
   justify-content: space-between;
+  align-items: center;
   font-family: ${props => props.theme.typography.headings.fontFamily};
   ${props => menuItemDepth[props.depth]};
   background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};

src/services/Labels.ts

@@ -9,6 +9,7 @@ export interface LabelsConfig {
   recursive: string;
   arrayOf: string;
   webhook: string;
+  jsonrpc: string;
 }
 
 export type LabelsConfigRaw = Partial<LabelsConfig>;
@@ -24,6 +25,7 @@ const labels: LabelsConfig = {
   recursive: 'Recursive',
   arrayOf: 'Array of ',
   webhook: 'Event',
+  jsonrpc: 'Json-RPC',
 };
 
 export function setRedocLabels(_labels?: LabelsConfigRaw) {

src/services/MenuBuilder.ts

@@ -30,6 +30,7 @@ export type ExtendedOpenAPIOperation = {
   pathParameters: Array<Referenced<OpenAPIParameter>>;
   pathServers: Array<OpenAPIServer> | undefined;
   isWebhook: boolean;
+  isJsonRpc: boolean;
 } & OpenAPIOperation;
 
 export type TagsInfoMap = Record<string, TagInfo>;
@@ -129,10 +130,10 @@ export class MenuBuilder {
   }
 
   /**
-   * Returns array of OperationsGroup items for the tags of the group or for all tags
+   * 그룹의 태그 또는 모든 태그에 대한 OperationsGroup 항목의 배열을 반환한다.
-   * @param tagsMap tags info returned from `getTagsWithOperations`
+   * @param tagsMap `getTagsWithOperations`에서 반환된 태그 정보
-   * @param parent parent item
+   * @param parent 상위 항목
-   * @param group group which this tag belongs to. if not provided gets all tags
+   * @param group 이 태그가 속한 그룹. 주어지지 않으면 모든 태그를 가져온다.
    */
   static getTagsItems(
     parser: OpenAPIParser,
@@ -213,7 +214,7 @@ export class MenuBuilder {
   }
 
   /**
-   * collects tags and maps each tag to list of operations belonging to this tag
+   * 태그를 수집하고 각 태그를 이 태그에 속하는 operations 목록에 매핑한다.
    */
   static getTagsWithOperations(spec: OpenAPISpec): TagsInfoMap {
     const tags: TagsInfoMap = {};
@@ -225,8 +226,11 @@ export class MenuBuilder {
     if (spec['x-webhooks']) {
       getTags(spec['x-webhooks'], true);
     }
+    if (spec['jsonrpc']) {
+      getTags(spec['jsonrpc'], false, true);
+    }
 
-    function getTags(paths: OpenAPIPaths, isWebhook?: boolean) {
+    function getTags(paths: OpenAPIPaths, isWebhook?: boolean, isJsonRpc?: boolean) {
       for (const pathName of Object.keys(paths)) {
         const path = paths[pathName];
         const operations = Object.keys(path).filter(isOperationName);
@@ -259,6 +263,7 @@ export class MenuBuilder {
               pathParameters: path.parameters || [],
               pathServers: path.servers,
               isWebhook: !!isWebhook,
+              isJsonRpc: !!isJsonRpc,
             });
           }
         }

src/services/SpecStore.ts

@@ -7,7 +7,7 @@ import { SecuritySchemesModel } from './models/SecuritySchemes';
 import { OpenAPIParser } from './OpenAPIParser';
 import { RedocNormalizedOptions } from './RedocNormalizedOptions';
 /**
- * Store that contains all the specification related information in the form of tree
+ * 모든 specification 관련 정보를 트리 형태로 포함하는 Store
  */
 export class SpecStore {
   parser: OpenAPIParser;

src/services/models/Operation.ts

@@ -76,6 +76,7 @@ export class OperationModel implements IMenuItem {
   extensions: Record<string, any>;
   isCallback: boolean;
   isWebhook: boolean;
+  isJsonRpc: boolean;
 
   constructor(
     private parser: OpenAPIParser,
@@ -99,6 +100,7 @@ export class OperationModel implements IMenuItem {
     this.path = operationSpec.pathName;
     this.isCallback = isCallback;
     this.isWebhook = !!operationSpec.isWebhook;
+    this.isJsonRpc = !!operationSpec.isJsonRpc;
 
     this.name = getOperationSummary(operationSpec);
 

src/types/open-api.d.ts

@@ -10,6 +10,7 @@ export interface OpenAPISpec {
   tags?: OpenAPITag[];
   externalDocs?: OpenAPIExternalDocumentation;
   'x-webhooks'?: OpenAPIPaths;
+  'jsonrpc'?: OpenAPIPaths;
 }
 
 export interface OpenAPIInfo {