feat: add configuration to use channel addresses in the sidebar for AsyncAPI v3

docs/configuration/config-modification.md

@@ -27,6 +27,7 @@ interface ConfigInterface {
   sidebar?: {
     showServers?: 'byDefault' | 'bySpecTags' | 'byServersTags';
     showOperations?: 'byDefault' | 'bySpecTags' | 'byOperationsTags';
+    useChannelAddressAsIdentifier?: boolean;
   },
   parserOptions?: ParserOptions;
   publishLabel?: string;
@@ -56,6 +57,8 @@ interface ConfigInterface {
   This field contains configuration responsible for the way of working of the sidebar.
   `showServers` field is set to `byDefault` by default.
   `showOperations` field is set to `byDefault` by default.
+  `useChannelAddressAsIdentifier`: for AsyncAPI v3 documents, use the operation summary or channel address in the sidebar instead of the operationId.
+  By default, this behavior is applied only to AsyncAPI v2 documents.
 
 - **expand?: Partial<ExpandConfig>**
 

library/src/config/config.ts

@@ -31,4 +31,5 @@ export interface ExpandConfig {
 export interface SideBarConfig {
   showServers?: 'byDefault' | 'bySpecTags' | 'byServersTags';
   showOperations?: 'byDefault' | 'bySpecTags' | 'byOperationsTags';
+  useChannelAddressAsIdentifier?: boolean;
 }

library/src/containers/Sidebar/Sidebar.tsx

@@ -253,7 +253,7 @@ const OperationsList: React.FunctionComponent = () => {
         numeric: true,
       });
       let label = '';
-      if (version === 0) {
+      if (version === 0 || sidebarConfig?.useChannelAddressAsIdentifier) {
         // old version uses different labels for the operations
         const operationChannels = operationChannel.all();
         const channelAddress = operationChannels[0]?.address() ?? '';

library/src/containers/Sidebar/__tests__/SideBar.test.tsx

@@ -103,4 +103,28 @@ describe('Sidebar component', () => {
       </ConfigContext.Provider>,
     );
   });
+  test('should render with useChannelAddressAsIdentifier: true', () => {
+    const { container } = render(
+      <ConfigContext.Provider
+        value={{ sidebar: { useChannelAddressAsIdentifier: true } }}
+      >
+        <SpecificationContext.Provider value={parsed}>
+          <Sidebar />
+        </SpecificationContext.Provider>
+      </ConfigContext.Provider>,
+    );
+    const operations = container.querySelectorAll('a[href^="#operation-"]');
+    const expectedOperationDescriptions = [
+      'Inform about environmental lighting conditions of a particular streetlight.', // because the channel has a summary
+      'smartylighting.streetlights.1.0.action.{streetlightId}.turn.on',
+      'smartylighting.streetlights.1.0.action.{streetlightId}.turn.off',
+      'smartylighting.streetlights.1.0.action.{streetlightId}.dim',
+    ];
+    for (let i = 0; i < operations.length; i++) {
+      // eslint-disable-next-line jest/no-standalone-expect
+      expect(operations[i].querySelectorAll('span')[1].textContent).toBe(
+        expectedOperationDescriptions[i],
+      );
+    }
+  });
 });