Merge branch 'master' into ColBfocus

asyncapi · Nov 15, 2024 · 1c42432 · 1c42432
2 parents 2d5e5f4 + 2b90976
commit 1c42432
Show file tree

Hide file tree

Showing 21 changed files with 174 additions and 127 deletions.
diff --git a/.github/workflows/update-maintainers-trigger.yaml b/.github/workflows/update-maintainers-trigger.yaml
@@ -0,0 +1,28 @@
+# This action is centrally managed in https://github.com/asyncapi/.github/
+# Don't make changes to this file in this repo as they will be overwritten with changes made to the same file in above mentioned repo
+
+name: Trigger MAINTAINERS.yaml file update
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      # Check all valid CODEOWNERS locations: 
+      # https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners#codeowners-file-location
+      - 'CODEOWNERS'
+      - '.github/CODEOWNERS'
+      - '.docs/CODEOWNERS'
+
+jobs:
+  trigger-maintainers-update:
+    name: Trigger updating MAINTAINERS.yaml because of CODEOWNERS change
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # https://github.com/peter-evans/repository-dispatch/releases/tag/v3.0.0
+        with:
+          # The PAT with the 'public_repo' scope is required
+          token: ${{ secrets.GH_TOKEN }}
+          repository: ${{ github.repository_owner }}/community
+          event-type: trigger-maintainers-update
diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/react-component",
-  "version": "2.2.4",
+  "version": "2.4.3",
   "private": false,
   "description": "A React component for AsyncAPI specification.",
   "repository": {

diff --git a/library/src/components/Bindings.tsx b/library/src/components/Bindings.tsx
@@ -25,9 +25,9 @@ export const Bindings: React.FunctionComponent<Props> = ({
     const schemaName = (
       <div className="inline-block text-sm">
         <span>{name}</span>
-        <span className="bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-xs">
+        <strong className="bg-teal-500 no-underline text-white uppercase rounded mx-2 px-2 py-1 text-xs">
           {protocol}
-        </span>
+        </strong>
       </div>
     );
     return (

diff --git a/library/src/components/Href.tsx b/library/src/components/Href.tsx
@@ -15,7 +15,7 @@ export const Href: React.FunctionComponent<Props> = ({
 }) => (
   <a
     href={href}
-    title={title}
+    title={title ? `${title} (Opens in new window)` : 'Opens in new window'}
     className={className}
     target="_blank"
     rel="nofollow noopener noreferrer"

diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
@@ -160,37 +160,37 @@ export const Schema: React.FunctionComponent<Props> = ({
                 </div>
                 <div className="inline-block">
                   {schema.format() && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       format: {schema.format()}
-                    </span>
+                    </strong>
                   )}
 
                   {/* related to string */}
                   {schema.pattern() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded mr-2 p-1 text-xs">
                       must match: {schema.pattern()}
-                    </span>
+                    </strong>
                   )}
                   {schema.contentMediaType() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       media type: {schema.contentMediaType()}
-                    </span>
+                    </strong>
                   )}
                   {schema.contentEncoding() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       encoding: {schema.contentEncoding()}
-                    </span>
+                    </strong>
                   )}
 
                   {/* constraints */}
                   {!!constraints.length &&
                     constraints.map((c) => (
-                      <span
-                        className="bg-purple-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs"
+                      <strong
+                        className="bg-purple-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs"
                         key={c}
                       >
                         {c}
-                      </span>
+                      </strong>
                     ))}
 
                   {uid && !uid.startsWith('<anonymous-') && (
@@ -244,14 +244,14 @@ export const Schema: React.FunctionComponent<Props> = ({
                   </div>
                 )}
                 {externalDocs && (
-                  <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-2 py-0">
+                  <strong className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-2 py-0">
                     <Href
                       href={externalDocs.url()}
                       title={externalDocs.description() ?? ''}
                     >
                       Documentation
                     </Href>
-                  </span>
+                  </strong>
                 )}
                 {schema.examples() && (
                   <ul className="text-xs">

diff --git a/library/src/containers/AsyncApi/Layout.tsx b/library/src/containers/AsyncApi/Layout.tsx
@@ -35,7 +35,7 @@ const AsyncApiLayout: React.FunctionComponent<Props> = ({
         }
 
         const possibleClassName =
-          width <= 1280 ? 'container:xl' : 'container:base';
+          width <= 1536 ? 'container:xl' : 'container:base';
         if (possibleClassName !== observerClassName) {
           setObserverClassName(possibleClassName);
         }

diff --git a/library/src/containers/Info/Info.tsx b/library/src/containers/Info/Info.tsx
@@ -46,9 +46,9 @@ export const Info: React.FunctionComponent = () => {
                     <span>{license.name()}</span>
                   </Href>
                 ) : (
-                  <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1">
+                  <strong className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-3 py-1">
                     {license.name()}
-                  </span>
+                  </strong>
                 )}
               </li>
             )}
@@ -77,6 +77,7 @@ export const Info: React.FunctionComponent = () => {
                 <Href
                   className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1"
                   href={externalDocs.url()}
+                  title={externalDocs.description() ?? undefined}
                 >
                   <span>{EXTERAL_DOCUMENTATION_TEXT}</span>
                 </Href>
@@ -108,9 +109,9 @@ export const Info: React.FunctionComponent = () => {
             )}
             {specId && (
               <li className="inline-block mt-2 mr-2">
-                <span className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs uppercase rounded px-3 py-1">
+                <strong className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 no-underline text-xs uppercase rounded px-3 py-1">
                   ID: {specId}
-                </span>
+                </strong>
               </li>
             )}
           </ul>

diff --git a/library/src/containers/Messages/Message.tsx b/library/src/containers/Messages/Message.tsx
@@ -55,12 +55,9 @@ export const Message: React.FunctionComponent<Props> = ({
         <div className="shadow rounded bg-gray-200 p-4 border">
           <div>
             {index !== undefined && (
-              <span className="text-gray-700 font-bold mr-2">#{index}</span>
+              <strong className="text-gray-700 mr-2">#{index}</strong>
             )}
             {title && <span className="text-gray-700 mr-2">{title}</span>}
-            <span className="border text-orange-600 rounded text-xs py-0 px-2">
-              {messageId}
-            </span>
           </div>
 
           {summary && <p className="text-gray-600 text-sm">{summary}</p>}

diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
@@ -53,7 +53,7 @@ export const Operation: React.FunctionComponent<Props> = (props) => {
               {servers.map((server) => (
                 <li className="inline-block mt-2 mr-2" key={server.id()}>
                   <a
-                    href={`#${CommonHelpers.getIdentifier(
+                    href={`${window.location.pathname}#${CommonHelpers.getIdentifier(
                       'server-' + server.id(),
                       config,
                     )}`}
@@ -262,7 +262,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                   : 'bg-blue-600 border-blue-600'
               } text-sm rounded-t h-8 px-4 border text-white flex items-center`}
             >
-              <span className="font-bold">REPLY INFORMATION</span>
+              <strong>REPLY INFORMATION</strong>
             </div>
             <div className="flex">
               <div
@@ -406,7 +406,7 @@ export const OperationReplyChannelInfo: React.FunctionComponent<Props> = ({
             {servers.map((server) => (
               <li className="inline-block mt-2 mr-2" key={server.id()}>
                 <a
-                  href={`#${CommonHelpers.getIdentifier(
+                  href={`${window.location.pathname}#${CommonHelpers.getIdentifier(
                     'server-' + server.id(),
                     config,
                   )}`}

diff --git a/library/src/containers/Servers/Security.tsx b/library/src/containers/Servers/Security.tsx
@@ -130,22 +130,22 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
       <div className="px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded">
         {securityProtocol && (
           <div className="mt-1">
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               security.protocol:
-            </span>
-            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+            </strong>
+            <strong className="inline-block no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
               {securityProtocol}
-            </span>
+            </strong>
           </div>
         )}
         {saslMechanism && (
           <div className="mt-1">
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               sasl.mechanism:
-            </span>
-            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+            </strong>
+            <strong className="inline-block no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
               {saslMechanism}
-            </span>
+            </strong>
           </div>
         )}
       </div>
@@ -179,49 +179,49 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
           key={flowName}
         >
           <div>
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               Flow:
-            </span>
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            </strong>
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               {ServerHelpers.flowName(flowName)}
-            </span>
+            </strong>
           </div>
 
           {authorizationUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Auth URL:
-              </span>
+              </strong>
               <Href href={authorizationUrl} className="underline">
                 {authorizationUrl}
               </Href>
             </div>
           )}
           {tokenUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Token URL:
-              </span>
+              </strong>
               <Href href={tokenUrl} className="underline">
                 {tokenUrl}
               </Href>
             </div>
           )}
           {refreshUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Refresh URL:
-              </span>
+              </strong>
               <Href href={refreshUrl} className="underline">
                 {refreshUrl}
               </Href>
             </div>
           )}
           {scopes && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Scopes:
-              </span>
+              </strong>
               <ul className="inline-block">
                 {scopes &&
                   Object.entries(scopes).map(([scopeName, scopeDesc]) => (

diff --git a/library/src/containers/Servers/Server.tsx b/library/src/containers/Servers/Server.tsx
@@ -34,14 +34,14 @@ export const Server: React.FunctionComponent<Props> = ({
         <div className="shadow rounded bg-gray-200 p-4 border bg-gray-100">
           <div>
             <span className="font-mono text-base">{server.url()}</span>
-            <span className="bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm">
+            <strong className="bg-teal-500 no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm">
               {protocolVersion
                 ? `${server.protocol()} ${protocolVersion}`
                 : server.protocol()}
-            </span>
-            <span className="bg-blue-500 font-bold no-underline text-white uppercase rounded px-2 py-1 text-sm">
+            </strong>
+            <strong className="bg-blue-500 no-underline text-white uppercase rounded px-2 py-1 text-sm">
               {serverName}
-            </span>
+            </strong>
           </div>
 
           {server.hasDescription() && (

diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx
@@ -119,7 +119,7 @@ export const Sidebar: React.FunctionComponent = () => {
       >
         <div
           className={`${
-            showSidebar ? 'w-full' : ''
+            showSidebar ? 'sidebar--wrapper' : ''
           } block fixed max-h-screen h-full font-sans px-4 pt-8 pb-16 overflow-y-auto bg-gray-200`}
         >
           <div className="sidebar--content">
@@ -348,20 +348,26 @@ const OperationItem: React.FunctionComponent<OperationItemProps> = ({
       config,
       isAsyncAPIv2,
     });
-  const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600'];
+  const bgColors = [
+    'bg-red-600',
+    'bg-orange-600',
+    'bg-green-600',
+    'bg-blue-600',
+  ];
+
   return (
     <li key={`menu-operation-list-${operationHrefId}`}>
       <a
         className="flex no-underline text-gray-700 mb-2 hover:text-gray-900"
         href={`#${operationHrefId}`}
         onClick={() => setShowSidebar(false)}
       >
-        <span
-          className={`font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs ${bgColors.includes(backgroundColor) && backgroundColor}`}
+        <strong
+          className={`h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs ${bgColors.includes(backgroundColor) && backgroundColor}`}
           title={typeLabel}
         >
           {typeLabel}
-        </span>
+        </strong>
         <span className="break-all inline-block">{label}</span>
       </a>
     </li>

diff --git a/library/src/containers/Sidebar/__tests__/SideBar.test.tsx b/library/src/containers/Sidebar/__tests__/SideBar.test.tsx
@@ -121,10 +121,10 @@ describe('Sidebar component', () => {
       'smartylighting.streetlights.1.0.action.{streetlightId}.dim',
     ];
     for (let i = 0; i < operations.length; i++) {
+      const description = operations[i].querySelector('span');
+
       // eslint-disable-next-line jest/no-standalone-expect
-      expect(operations[i].querySelectorAll('span')[1].textContent).toBe(
-        expectedOperationDescriptions[i],
-      );
+      expect(description?.textContent).toBe(expectedOperationDescriptions[i]);
     }
   });
 });
diff --git a/library/src/helpers/__tests__/schema.test.ts b/library/src/helpers/__tests__/schema.test.ts
@@ -896,21 +896,11 @@ describe('SchemaHelpers', () => {
 
     test('should not render title because title is undefined', () => {
       expect(
-        SchemaHelpers.applicatorSchemaName(
-          0,
-          FIRST_CASE,
-          OTHER_CASES,
-          undefined,
-        ),
+        SchemaHelpers.applicatorSchemaName(0, FIRST_CASE, OTHER_CASES),
       ).toMatchSnapshot();
 
       expect(
-        SchemaHelpers.applicatorSchemaName(
-          1,
-          FIRST_CASE,
-          OTHER_CASES,
-          undefined,
-        ),
+        SchemaHelpers.applicatorSchemaName(1, FIRST_CASE, OTHER_CASES),
       ).toMatchSnapshot();
     });