fix: sidebar navigation problems (#887)

Author: jonaslagoni

docs/configuration/config-modification.md

@@ -30,6 +30,10 @@ interface ConfigInterface {
   parserOptions?: ParserOptions;
   publishLabel?: string;
   subscribeLabel?: string;
+  sendLabel?: string;
+  receiveLabel?: string;
+  requestLabel?: string;
+  replyLabel?: string;
 }
 ```
 
@@ -61,14 +65,34 @@ interface ConfigInterface {
 
 - **publishLabel?: string**
 
-  This field contains configuration responsible for customizing the label for publish operations.
-  This field is set to `PUB` by default.
+  This field contains configuration responsible for customizing the label for publish operations.This take effect for AsyncAPI v2 documents.
+  This field is set to `PUB` by default. 
 
 - **subscribeLabel?: string**
 
-  This field contains configuration responsible for customizing the label for subscribe operations.
+  This field contains configuration responsible for customizing the label for subscribe operations. This take effect for AsyncAPI v2 documents.
   This field is set to `SUB` by default.
 
+- **sendLabel?: string**
+
+  This field contains configuration responsible for customizing the label for send operation. This takes effect when rendering AsyncAPI v3 documents.
+  This field is set to `SEND` by default.
+
+- **receiveLabel?: string**
+
+  This field contains configuration responsible for customizing the label for receive operation. This takes effect when rendering AsyncAPI v3 documents.
+  This field is set to `RECEIVE` by default.
+
+- **requestLabel?: string**
+
+  This field contains configuration responsible for customizing the label for request operation. This takes effect when rendering AsyncAPI v3 documents.
+  This field is set to `REQUEST` by default.
+
+- **replyLabel?: string**
+
+  This field contains configuration responsible for customizing the label for response operation. This takes effect when rendering AsyncAPI v3 documents.
+  This field is set to `REPLY` by default.
+
 ## Examples
 
 See exemplary component configuration in TypeScript and JavaScript.
@@ -154,5 +178,9 @@ In the above examples, after concatenation with the default configuration, the r
   },
   publishLabel: 'PUB',
   subscribeLabel: 'SUB',
+  sendLabel: 'SEND',
+  receiveLabel: 'RECEIVE',
+  requestLabel: 'REQUEST',
+  replyLabel: 'REPLY'
 }
 ```

library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/react-component",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "private": false,
   "description": "A React component for AsyncAPI specification.",
   "repository": {

library/src/config/config.ts

@@ -5,8 +5,8 @@ export interface ConfigInterface {
   sidebar?: SideBarConfig;
   parserOptions?: any;
   publishLabel?: string;
-  sendLabel?: string;
   subscribeLabel?: string;
+  sendLabel?: string;
   receiveLabel?: string;
   requestLabel?: string;
   replyLabel?: string;

library/src/config/default.ts

@@ -1,6 +1,10 @@
 import { ConfigInterface } from './config';
 import {
   PUBLISH_LABEL_DEFAULT_TEXT,
+  RECEIVE_TEXT_LABEL_DEFAULT_TEXT,
+  REPLIER_LABEL_DEFAULT_TEXT,
+  REQUEST_LABEL_DEFAULT_TEXT,
+  SEND_LABEL_DEFAULT_TEXT,
   SUBSCRIBE_LABEL_DEFAULT_TEXT,
 } from '../constants';
 
@@ -24,4 +28,8 @@ export const defaultConfig: ConfigInterface = {
   },
   publishLabel: PUBLISH_LABEL_DEFAULT_TEXT,
   subscribeLabel: SUBSCRIBE_LABEL_DEFAULT_TEXT,
+  sendLabel: SEND_LABEL_DEFAULT_TEXT,
+  receiveLabel: RECEIVE_TEXT_LABEL_DEFAULT_TEXT,
+  requestLabel: REQUEST_LABEL_DEFAULT_TEXT,
+  replyLabel: REPLIER_LABEL_DEFAULT_TEXT,
 };

library/src/containers/Operations/Operation.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { ChannelInterface, OperationInterface } from '@asyncapi/parser';
-
 import { Message } from '../Messages/Message';
 import { Security } from '../Servers/Security';
 import {
@@ -12,20 +11,11 @@ import {
   CollapseButton,
 } from '../../components';
 import { Href } from '../../components/Href';
-
 import { useConfig, useSpec } from '../../contexts';
 import { CommonHelpers, SchemaHelpers } from '../../helpers';
-import {
-  EXTERAL_DOCUMENTATION_TEXT,
-  PUBLISH_LABEL_DEFAULT_TEXT,
-  RECEIVE_TEXT_LABEL_DEFAULT_TEXT,
-  REPLIER_LABEL_DEFAULT_TEXT,
-  REQUEST_LABEL_DEFAULT_TEXT,
-  SEND_LABEL_DEFAULT_TEXT,
-  SUBSCRIBE_LABEL_DEFAULT_TEXT,
-} from '../../constants';
+import { EXTERAL_DOCUMENTATION_TEXT } from '../../constants';
 import { PayloadType } from '../../types';
-import { ConfigInterface } from '../../config/config';
+
 interface Props {
   type: PayloadType;
   operation: OperationInterface;
@@ -34,8 +24,8 @@ interface Props {
 }
 
 export const Operation: React.FunctionComponent<Props> = props => {
-  const config = useConfig();
   const { type = PayloadType.SEND, operation, channelName, channel } = props;
+  const config = useConfig();
   if (!operation || !channel) {
     return null;
   }
@@ -178,61 +168,22 @@ export const Operation: React.FunctionComponent<Props> = props => {
   );
 };
 
-function getTypeInformation({
-  typeRes = PayloadType.SEND,
-  config,
-  version,
-}: {
-  typeRes: PayloadType;
-  config: ConfigInterface;
-  version: number;
-}): { borderColor: string; typeLabel: string } {
-  if (typeRes === PayloadType.RECEIVE) {
-    return {
-      borderColor: 'border-green-600 text-green-600',
-      typeLabel:
-        version === 1
-          ? config.receiveLabel ?? RECEIVE_TEXT_LABEL_DEFAULT_TEXT
-          : config.publishLabel ?? PUBLISH_LABEL_DEFAULT_TEXT,
-    };
-  }
-  if (typeRes === PayloadType.REPLY) {
-    return {
-      borderColor: 'border-orange-600 text-orange-600',
-      typeLabel: config.replyLabel ?? REPLIER_LABEL_DEFAULT_TEXT,
-    };
-  }
-  if (typeRes === PayloadType.REQUEST) {
-    return {
-      borderColor: 'border-red-600 text-red-600',
-      typeLabel: config.requestLabel ?? REQUEST_LABEL_DEFAULT_TEXT,
-    };
-  }
-  return {
-    borderColor: 'border-blue-600 text-blue-500',
-    typeLabel:
-      version === 1
-        ? config.sendLabel ?? SEND_LABEL_DEFAULT_TEXT
-        : config.subscribeLabel ?? SUBSCRIBE_LABEL_DEFAULT_TEXT,
-  };
-}
-
 export const OperationInfo: React.FunctionComponent<Props> = props => {
   const { type = PayloadType.SEND, operation, channelName, channel } = props;
-  const specV = useSpec().version();
-  const version = specV.localeCompare('2.6.0', undefined, { numeric: true });
   const config = useConfig();
   const operationSummary = operation.summary();
   const externalDocs = operation.externalDocs();
   const operationId = operation.id();
-  let typeRes = type;
-  if (version === 1 && operation.action() !== typeRes) {
-    typeRes = PayloadType.RECEIVE;
-  }
-  const { borderColor, typeLabel } = getTypeInformation({
-    typeRes,
+  const specV = useSpec().version();
+  const version = specV.localeCompare('2.6.0', undefined, { numeric: true });
+  const isAsyncAPIv2 = version === 0;
+  const {
+    borderColor,
+    typeLabel,
+  } = CommonHelpers.getOperationDesignInformation({
+    type,
     config,
-    version,
+    isAsyncAPIv2,
   });
   return (
     <>
@@ -429,9 +380,7 @@ export const OperationReplyChannelInfo: React.FunctionComponent<Props> = ({
   operation,
 }) => {
   const reply = operation.reply();
-
   const channel = reply?.channel();
-
   const channelName = channel?.address() ?? '';
 
   const config = useConfig();

library/src/containers/Operations/Operations.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
 import { Operation } from './Operation';
 import { useConfig, useSpec } from '../../contexts';
 import { CommonHelpers } from '../../helpers';
 import { OPERATIONS_TEXT } from '../../constants';
-import { PayloadType } from '../../types';
 
 export const Operations: React.FunctionComponent = () => {
   const operations = useSpec()
@@ -16,88 +14,24 @@ export const Operations: React.FunctionComponent = () => {
     return null;
   }
 
-  const operationsList: React.ReactNodeArray = [];
-  operations.forEach(operation => {
+  const operationsList: React.ReactNodeArray = operations.map(operation => {
     const channel = operation.channels().all()[0];
     const channelAddress = channel?.address() ?? '';
-    if (operation.isSend()) {
-      if (operation.reply() !== undefined) {
-        operationsList.push(
-          <li
-            className="mb-12"
-            key={`req-${operation.id()}`}
-            id={CommonHelpers.getIdentifier(
-              `operation-${PayloadType.REQUEST}-${operation.id()}`,
-              config,
-            )}
-          >
-            <Operation
-              type={PayloadType.REQUEST}
-              operation={operation}
-              channelName={channelAddress}
-              channel={channel}
-            />
-          </li>,
-        );
-      } else {
-        operationsList.push(
-          <li
-            className="mb-12"
-            key={`pub-${operation.id()}`}
-            id={CommonHelpers.getIdentifier(
-              `operation-${PayloadType.SEND}-${operation.id()}`,
-              config,
-            )}
-          >
-            <Operation
-              type={PayloadType.SEND}
-              operation={operation}
-              channelName={channelAddress}
-              channel={channel}
-            />
-          </li>,
-        );
-      }
-    }
-    if (operation.isReceive()) {
-      if (operation.reply() !== undefined) {
-        operationsList.push(
-          <li
-            className="mb-12"
-            key={`replier-${operation.id()}`}
-            id={CommonHelpers.getIdentifier(
-              `operation-${PayloadType.REPLY}-${operation.id()}`,
-              config,
-            )}
-          >
-            <Operation
-              type={PayloadType.REPLY}
-              operation={operation}
-              channelName={channelAddress}
-              channel={channel}
-            />
-          </li>,
-        );
-      } else {
-        operationsList.push(
-          <li
-            className="mb-12"
-            key={`sub-${operation.id()}`}
-            id={CommonHelpers.getIdentifier(
-              `operation-${PayloadType.RECEIVE}-${operation.id()}`,
-              config,
-            )}
-          >
-            <Operation
-              type={PayloadType.RECEIVE}
-              operation={operation}
-              channelName={channelAddress}
-              channel={channel}
-            />
-          </li>,
-        );
-      }
-    }
+    const operationId = CommonHelpers.getOperationIdentifier({
+      operation,
+      config,
+    });
+    const type = CommonHelpers.getOperationType(operation);
+    return (
+      <li className="mb-12" key={`${type}-${operation.id()}`} id={operationId}>
+        <Operation
+          type={type}
+          operation={operation}
+          channelName={channelAddress}
+          channel={channel}
+        />
+      </li>
+    );
   });
   return (
     <section