Merge branch 'master' into bug/typo-error-2

library/package.json

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

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 (

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">

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>
             )}
@@ -108,9 +108,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>

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>}

library/src/containers/Operations/Operation.tsx

@@ -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

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]) => (

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() && (

library/src/containers/Sidebar/Sidebar.tsx

@@ -356,12 +356,12 @@ const OperationItem: React.FunctionComponent<OperationItemProps> = ({
         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>

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]);
     }
   });
 });

library/src/helpers/parser.ts

@@ -1,4 +1,9 @@
-import { Parser as AsyncapiParser, fromURL } from '@asyncapi/parser';
+import {
+  Parser as AsyncapiParser,
+  Diagnostic,
+  DiagnosticSeverity,
+  fromURL,
+} from '@asyncapi/parser';
 import { OpenAPISchemaParser } from '@asyncapi/openapi-schema-parser';
 import { ProtoBuffSchemaParser } from '@asyncapi/protobuf-schema-parser';
 import { AvroSchemaParser } from '@asyncapi/avro-schema-parser';
@@ -26,41 +31,18 @@ export class Parser {
     parserOptions?: any,
   ): Promise<ParserReturn> {
     try {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      const parseResult = await asyncapiParser.parse(content, parserOptions);
-
-      const error: {
-        title: string | undefined;
-        validationErrors: ValidationError[] | undefined;
-      } = {
-        title: 'There are errors in your Asyncapi document',
-        validationErrors: [],
-      };
+      const { document, diagnostics } = await asyncapiParser.parse(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        content,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        parserOptions,
+      );
 
-      if (parseResult.document === undefined) {
-        parseResult.diagnostics.forEach((diagnostic) => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-          if (diagnostic.severity == 0) {
-            const tempObj: ValidationError = {
-              title: diagnostic.message,
-              location: {
-                jsonPointer: '/' + diagnostic.path.join('/'),
-                startLine: diagnostic.range.start.line,
-                startColumn: diagnostic.range.start.character,
-                // as of @asyncapi/parser 3.3.0 offset of 1 correctly shows the error line
-                startOffset: 1,
-                endLine: diagnostic.range.end.line,
-                endColumn: diagnostic.range.end.character,
-                endOffset: 0,
-              },
-            };
-            error.validationErrors?.push(tempObj);
-          }
-        });
-        throw error;
+      if (document === undefined) {
+        throw this.convertDiagnosticToErrorObject(diagnostics, [0]);
       }
 
-      return { asyncapi: parseResult.document };
+      return { asyncapi: document };
     } catch (err) {
       return this.handleError(err as ErrorObject);
     }
@@ -79,13 +61,51 @@ export class Parser {
         arg.requestOptions as any,
       );
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      const { document } = await fromResult.parse(parserOptions);
-      return { asyncapi: document };
+      const { document, diagnostics } = await fromResult.parse(parserOptions);
+
+      if (document == undefined) {
+        // this means there are errors in the document.
+        // so we gather all the severity 0 diagnostics and throw them as errors
+        throw this.convertDiagnosticToErrorObject(diagnostics, [0]);
+      }
+
+      return { asyncapi: document, error: undefined };
     } catch (err) {
       return this.handleError(err as ErrorObject);
     }
   }
 
+  static readonly convertDiagnosticToErrorObject = (
+    diagnostics: Diagnostic[],
+    severities: DiagnosticSeverity[],
+  ): ErrorObject => {
+    const error: ErrorObject = {
+      title: 'There are errors in your Asyncapi document',
+      type: 'VALIDATION_ERRORS_TYPE',
+      validationErrors: [],
+    };
+    diagnostics.forEach((diagnostic) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+      if (severities.includes(diagnostic.severity)) {
+        const tempObj: ValidationError = {
+          title: diagnostic.message,
+          location: {
+            jsonPointer: '/' + diagnostic.path.join('/'),
+            startLine: diagnostic.range.start.line,
+            startColumn: diagnostic.range.start.character,
+            // as of @asyncapi/parser 3.3.0 offset of 1 correctly shows the error line
+            startOffset: 1,
+            endLine: diagnostic.range.end.line,
+            endColumn: diagnostic.range.end.character,
+            endOffset: 0,
+          },
+        };
+        error.validationErrors?.push(tempObj);
+      }
+    });
+    return error;
+  };
+
   private static handleError = (err: ErrorObject): ParserReturn => {
     if (err.type === VALIDATION_ERRORS_TYPE) {
       return {