feat: show title/name of message instead index in channel spec (#156)

Author: magicmatatjahu

library/src/containers/Channels/Channel.tsx

@@ -6,7 +6,7 @@ import { Parameters as ParametersComponent } from './Parameters';
 import { Badge, BadgeType, Markdown, Toggle } from '../../components';
 import { bemClasses, removeSpecialChars } from '../../helpers';
 import { MESSAGE_TEXT, ITEM_LABELS, CONTAINER_LABELS } from '../../constants';
-import { Channel, isRawMessage, PayloadType } from '../../types';
+import { Channel, RawMessage, isRawMessage, PayloadType } from '../../types';
 
 interface Props {
   name: string;
@@ -26,6 +26,10 @@ export const ChannelComponent: React.FunctionComponent<Props> = ({
     removeSpecialChars(name),
   ]);
 
+  const message =
+    (channel.publish && channel.publish.message) ||
+    (channel.subscribe && channel.subscribe.message);
+
   const oneOfPublish =
     channel.publish &&
     channel.publish.message &&
@@ -97,7 +101,11 @@ export const ChannelComponent: React.FunctionComponent<Props> = ({
             className={bemClasses.element(`${className}-operations-header`)}
           >
             <h4>
-              <span>{MESSAGE_TEXT}</span>
+              <span>
+                {(message as RawMessage)?.title ||
+                  (message as RawMessage)?.name ||
+                  MESSAGE_TEXT}
+              </span>
             </h4>
           </header>
         )}

library/src/containers/Messages/Message.tsx

@@ -71,6 +71,8 @@ export const MessageComponent: React.FunctionComponent<Props> = ({
     );
   }
 
+  title = title || message.title || message.name;
+
   const summary = message.summary && (
     <div className={bemClasses.element(`${className}-summary`)}>
       <Markdown>{message.summary}</Markdown>

library/src/containers/Messages/Messages.tsx

@@ -5,7 +5,7 @@ import { MessageComponent } from './Message';
 import { ExpandNestedConfig } from '../../config';
 import { bemClasses } from '../../helpers';
 import { Toggle } from '../../components';
-import { Message } from '../../types';
+import { Message, RawMessage } from '../../types';
 import { MESSAGES_TEXT, CONTAINER_LABELS } from '../../constants';
 
 interface Props {
@@ -36,17 +36,28 @@ export const MessagesComponent: React.FunctionComponent<Props> = ({
   const header = <h2>{MESSAGES_TEXT}</h2>;
   const content = (
     <ul className={bemClasses.element(`${className}-list`)}>
-      {Object.entries(messages).map(([key, message]) => (
-        <li key={key} className={bemClasses.element(`${className}-list-item`)}>
-          <MessageComponent
-            title={messagesLength < 2 && inChannel ? '' : key}
-            message={message}
-            hideTags={true}
-            inChannel={false}
-            toggleExpand={expand && expand.elements}
-          />
-        </li>
-      ))}
+      {Object.entries(messages).map(([key, message]) => {
+        const title =
+          messagesLength < 2 && inChannel
+            ? ''
+            : (message as RawMessage).title ||
+              (message as RawMessage).name ||
+              key;
+        return (
+          <li
+            key={key}
+            className={bemClasses.element(`${className}-list-item`)}
+          >
+            <MessageComponent
+              title={title}
+              message={message}
+              hideTags={true}
+              inChannel={false}
+              toggleExpand={expand && expand.elements}
+            />
+          </li>
+        );
+      })}
     </ul>
   );
 

library/src/styles/fiori.css

@@ -153,6 +153,7 @@
 
 .asyncapi__toggle-button {
   border: none;
+  background: none;
   height: 100%;
   cursor: pointer;
 }