feat: render missed parts of operation and message objects (#193)

components/Info.js

@@ -112,9 +112,10 @@ export function Info({ asyncapi, params = {} }) {
       )}
 
       {asyncapi.hasTags() && (
-        <Text>
+        <>
+          <Header type={6}>Specification tags</Header>
           <Tags tags={asyncapi.tags()} />
-        </Text>
+        </>
       )}
     </Text>
   );

components/Message.js

@@ -1,44 +1,105 @@
-import { Text } from "@asyncapi/generator-react-sdk";
+import { IndentationTypes, Text } from "@asyncapi/generator-react-sdk";
 import { generateExample, getPayloadExamples, getHeadersExamples } from "@asyncapi/generator-filters";
 
 import { Schema } from "./Schema";
 import { Tags } from "./Tags";
-import { Header, CodeBlock, BlockQuote } from "./common";
+import { Header, ListItem, Link, BlockQuote, CodeBlock, NewLine } from "./common";
+
+export function Message({ message }) {
+  if (!message) {
+    return null;
+  }
+
+  const headers = message.headers();
+  const payload = message.payload();
+  const correlationId = message.correlationId();
+  const contentType = message.contentType();
+  const externalDocs = message.externalDocs();
+  const showInfoList = contentType || externalDocs;
+
+  let header = `Message`;
+  if (message.title()) {
+    header += ` ${message.title()}`
+  }
+  if (message.uid()) {
+    header += ` \`${message.uid()}\``
+  }
 
-export function Message({ message, title = 'Message' }) {
   return (
     <>
-      <Header type={5}>{title}</Header>
+      <Header type={4}>{header}</Header>
+
       {message.summary() && (
         <Text newLines={2}>
           *{message.summary()}*
         </Text>
       )}
+
+      {showInfoList ? (
+        <Text>
+          {contentType && (
+            <ListItem>
+              Content type:{' '}
+              <Link
+                href={`https://www.iana.org/assignments/media-types/${contentType}`}
+              >
+                {contentType}
+              </Link>
+            </ListItem>
+          )}
+          {correlationId && (
+            <>
+              <ListItem>
+                Correlation ID: `{correlationId.location()}`
+              </ListItem>
+              {correlationId.hasDescription() && (
+                <>
+                  <NewLine />
+                  <Text indent={2} type={IndentationTypes.SPACES}>
+                    {correlationId.description()}
+                  </Text>
+                </>
+              )}
+            </>
+          )}
+        </Text>
+      ) : null}
+
       {message.hasDescription() && (
         <Text newLines={2}>
           {message.description()}
         </Text>
       )}
 
-      {message.headers() && (
+      {externalDocs && (
+        <Text newLines={2}>
+          <Link
+            href={externalDocs.url()}
+          >
+            {externalDocs.hasDescription() ? externalDocs.description() : 'Find more info here.'}
+          </Link>
+        </Text>
+      )}
+
+      {headers && (
         <>
-          <Header type={6}>Headers</Header>
-          <Schema schema={message.headers()} schemaName='Message Headers' hideTitle={true} />
+          <Header type={5}>Headers</Header>
+          <Schema schema={headers} hideTitle={true} />
           <Examples type='headers' message={message} />
         </>
       )}
 
-      {message.payload() && (
+      {payload && (
         <>
-          <Header type={6}>Payload</Header>
-          <Schema schema={message.payload()} schemaName='Message Payload' hideTitle={true} />
+          <Header type={5}>Payload</Header>
+          <Schema schema={payload} hideTitle={true} />
           <Examples type='payload' message={message} />
         </>
       )}
 
       {message.hasTags() && (
         <>
-          <Header type={6}>Tags</Header>
+          <Header type={6}>Message tags</Header>
           <Tags tags={message.tags()} />
         </>
       )}
@@ -95,7 +156,7 @@ function Example({ examples = [] }) {
 
   return examples.map(ex => (
     <Text newLines={2}>
-      {ex.name && <Text newLines={2}>**{ex.name}**</Text>}
+      {ex.name && <Text newLines={2}>_{ex.name}_</Text>}
       {ex.summary && <Text newLines={2}>{ex.summary}</Text>}
       <CodeBlock language='json'>{JSON.stringify(ex.example, null, 2)}</CodeBlock>
     </Text>

components/Operations.js

@@ -0,0 +1,159 @@
+import { Text } from "@asyncapi/generator-react-sdk";
+
+import { Message } from "./Message";
+import { Schema } from "./Schema";
+import { Tags } from "./Tags";
+import { Header, ListItem, Link } from "./common";
+
+import { SchemaHelpers } from "../helpers/schema";
+import { FormatHelpers } from "../helpers/format";
+
+export function Operations({ asyncapi }) {
+  const channels = asyncapi.channels();
+  if (!Object.keys(channels).length) {
+    return null;
+  }
+
+  const operationsList = [];
+  Object.entries(channels).forEach(([channelName, channel]) => {
+    if (channel.hasPublish()) {
+      operationsList.push(
+        <Operation
+          key={`pub-${channelName}`}
+          type='publish'
+          operation={channel.publish()}
+          channelName={channelName}
+          channel={channel}
+        />
+      );
+    }
+    if (channel.hasSubscribe()) {
+      operationsList.push(
+        <Operation
+          key={`sub-${channelName}`}
+          type='subscribe'
+          operation={channel.subscribe()}
+          channelName={channelName}
+          channel={channel}
+        />
+      );
+    }
+  });
+
+  return (
+    <>
+      <Header type={2}>
+        Operations
+      </Header>
+      {operationsList}
+    </>
+  );
+}
+
+function Operation({ type, operation, channelName, channel }) {
+  if (!operation || !channel) {
+    return null;
+  }
+
+  const operationId = operation.id();
+  const externalDocs = operation.externalDocs();
+  // check typeof as fallback for older version than `2.2.0`
+  const servers = typeof channel.servers === 'function' && channel.servers();
+  const renderedType = type === 'publish' ? 'PUB' : 'SUB';
+  const showInfoList = operationId || (servers && servers.length);
+
+  return (
+    <Text>
+      <Header type={3}>
+        {`${renderedType} \`${channelName}\` Operation`}
+      </Header>
+
+      {operation.summary() && (
+        <Text newLines={2}>
+          *{operation.summary()}*
+        </Text>
+      )}
+
+      {showInfoList ? (
+        <Text>
+          {operationId && <ListItem>Operation ID: `{operationId}`</ListItem>}
+          {servers && servers.length && (
+            <ListItem>
+              Available only on servers:{' '}
+              {servers.map(s => {
+                const slug = FormatHelpers.slugify(s);
+                return `[${s}](#${slug}-server)`;
+              }).join(', ')}
+            </ListItem>
+          )}
+        </Text>
+      ) : null}
+
+      {channel.hasDescription() && (
+        <Text newLines={2}>
+          {channel.description()}
+        </Text>
+      )}
+      {operation.hasDescription() && (
+        <Text newLines={2}>
+          {operation.description()}
+        </Text>
+      )}
+
+      {externalDocs && (
+        <Text newLines={2}>
+          <Link
+            href={externalDocs.url()}
+          >
+            {externalDocs.hasDescription() ? externalDocs.description() : 'Find more info here.'}
+          </Link>
+        </Text>
+      )}
+
+      {operation.hasTags() && (
+        <>
+          <Header type={6}>Operation tags</Header>
+          <Tags tags={operation.tags()} />
+        </>
+      )}
+
+      <OperationParameters channel={channel} />
+      <OperationMessages operation={operation} />
+    </Text>
+  );
+}
+
+function OperationParameters({ channel }) {
+  const parameters = SchemaHelpers.parametersToSchema(channel.parameters());
+  if (!parameters) {
+    return null;
+  }
+
+  return (
+    <Text>
+      <Header type={4}>Parameters</Header>
+      <Schema schema={parameters} hideTitle={true} />
+    </Text>
+  );
+}
+
+function OperationMessages({ operation }) {
+  const hasMessages = operation.hasMultipleMessages() || !!operation.message(0);
+  if (!hasMessages) {
+    return null;
+  }
+  const messages = operation.messages();
+
+  return (
+    <>
+      {messages.length > 1 && (
+        <Text newLines={2}>
+          Accepts **one of** the following messages:
+        </Text>
+      )}
+      {messages.map(msg => (
+        <Message title={`Message \`${msg.uid()}\``} message={msg} key={msg.uid()} />
+      ))}
+    </>
+  );
+}