Merge branch 'master' into feat/custom-extension-value-render

.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

CODEOWNERS

@@ -5,4 +5,4 @@
 # For more details, read the following article on GitHub: https://help.github.com/articles/about-codeowners/.
 
 # These are the default owners for the whole content of the "@asyncapi/asyncapi-react" repository. The default owners are automatically added as reviewers when you open a pull request unless different owners are specified in the file.
-* @magicmatatjahu @derberg @fmvilas @asyncapi-bot-eve
+* @magicmatatjahu @fmvilas @asyncapi-bot-eve @AceTheCreator

library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/react-component",
-  "version": "2.2.2",
+  "version": "2.5.0",
   "private": false,
   "description": "A React component for AsyncAPI specification.",
   "repository": {
@@ -70,12 +70,13 @@
   "dependencies": {
     "@asyncapi/avro-schema-parser": "^3.0.24",
     "@asyncapi/openapi-schema-parser": "^3.0.24",
-    "@asyncapi/parser": "^3.1.0",
-    "@asyncapi/protobuf-schema-parser": "^3.2.14",
+    "@asyncapi/parser": "^3.3.0",
+    "@asyncapi/protobuf-schema-parser": "^3.3.0",
     "highlight.js": "^10.7.2",
     "isomorphic-dompurify": "^2.14.0",
     "marked": "^4.0.14",
     "openapi-sampler": "^1.2.1",
+    "react-error-boundary": "^4.1.2",
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {

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

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-') && (
@@ -209,15 +209,15 @@ export const Schema: React.FunctionComponent<Props> = ({
                 {schema.default() !== undefined && (
                   <div className="text-xs">
                     Default value:
-                    <span className="border inline-block text-orange-600 rounded ml-1 py-0 px-2">
+                    <span className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2">
                       {SchemaHelpers.prettifyValue(schema.default())}
                     </span>
                   </div>
                 )}
                 {schema.const() !== undefined && (
                   <div className="text-xs">
                     Const:
-                    <span className="border inline-block text-orange-600 rounded ml-1 py-0 px-2">
+                    <span className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2">
                       {SchemaHelpers.prettifyValue(schema.const())}
                     </span>
                   </div>
@@ -228,7 +228,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                     {schema.enum()?.map((e, idx) => (
                       <li
                         key={idx}
-                        className="border inline-block text-orange-600 rounded ml-1 py-0 px-2"
+                        className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2"
                       >
                         <span>{SchemaHelpers.prettifyValue(e)}</span>
                       </li>
@@ -244,22 +244,22 @@ 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">
                     Examples values:{' '}
                     {schema.examples()?.map((e, idx) => (
                       <li
                         key={idx}
-                        className="border inline-block text-orange-600 rounded ml-1 py-0 px-2 break-all"
+                        className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2 break-all"
                       >
                         <span>{SchemaHelpers.prettifyValue(e)}</span>
                       </li>

library/src/containers/ApplicationErrorHandler/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { ReactNode } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { ErrorObject } from '../../types';
+import { Error } from '../Error/Error';
+
+interface Props {
+  children: ReactNode;
+}
+
+function fallbackRender({ error }: FallbackProps) {
+  const ErrorObject: ErrorObject = {
+    title: 'Something went wrong',
+    type: 'application-error',
+    validationErrors: [
+      {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        title: error?.message,
+      },
+    ],
+  };
+  return <Error error={ErrorObject} />;
+}
+
+const AsyncApiErrorBoundary = ({ children }: Props) => {
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, [children]);
+
+  return (
+    <ErrorBoundary key={key} fallbackRender={fallbackRender}>
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default AsyncApiErrorBoundary;

library/src/containers/AsyncApi/Layout.tsx

@@ -8,22 +8,19 @@ import { Servers } from '../Servers/Servers';
 import { Operations } from '../Operations/Operations';
 import { Messages } from '../Messages/Messages';
 import { Schemas } from '../Schemas/Schemas';
-import { Error } from '../Error/Error';
 
 import { ConfigInterface } from '../../config';
 import { SpecificationContext, ConfigContext } from '../../contexts';
-import { ErrorObject } from '../../types';
+import AsyncApiErrorBoundary from '../ApplicationErrorHandler/ErrorBoundary';
 
 interface Props {
   asyncapi: AsyncAPIDocumentInterface;
   config: ConfigInterface;
-  error?: ErrorObject;
 }
 
 const AsyncApiLayout: React.FunctionComponent<Props> = ({
   asyncapi,
   config,
-  error = null,
 }) => {
   const [observerClassName, setObserverClassName] = useState('container:xl');
 
@@ -35,7 +32,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);
         }
@@ -48,24 +45,25 @@ const AsyncApiLayout: React.FunctionComponent<Props> = ({
     <ConfigContext.Provider value={config}>
       <SpecificationContext.Provider value={asyncapi}>
         <section className="aui-root">
-          <div
-            className={`${observerClassName} relative md:flex bg-white leading-normal`}
-            id={config.schemaID ?? undefined}
-            ref={ref}
-          >
-            {configShow.sidebar && <Sidebar />}
-            <div className="panel--center relative py-8 flex-1">
-              <div className="relative z-10">
-                {configShow.errors && error && <Error error={error} />}
-                {configShow.info && <Info />}
-                {configShow.servers && <Servers />}
-                {configShow.operations && <Operations />}
-                {configShow.messages && <Messages />}
-                {configShow.schemas && <Schemas />}
+          <AsyncApiErrorBoundary>
+            <div
+              className={`${observerClassName} relative md:flex bg-white leading-normal`}
+              id={config.schemaID ?? undefined}
+              ref={ref}
+            >
+              {configShow.sidebar && <Sidebar />}
+              <div className="panel--center relative py-8 flex-1">
+                <div className="relative z-10">
+                  {configShow.info && <Info />}
+                  {configShow.servers && <Servers />}
+                  {configShow.operations && <Operations />}
+                  {configShow.messages && <Messages />}
+                  {configShow.schemas && <Schemas />}
+                </div>
+                <div className="panel--right absolute top-0 right-0 h-full bg-gray-800" />
               </div>
-              <div className="panel--right absolute top-0 right-0 h-full bg-gray-800" />
             </div>
-          </div>
+          </AsyncApiErrorBoundary>
         </section>
       </SpecificationContext.Provider>
     </ConfigContext.Provider>

library/src/containers/AsyncApi/Standalone.tsx

@@ -79,16 +79,16 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncAPIState> {
       if (!error) {
         return null;
       }
-      return concatenatedConfig.show?.errors && <Error error={error} />;
+      return (
+        concatenatedConfig.show?.errors && (
+          <section className="aui-root">
+            <Error error={error} />
+          </section>
+        )
+      );
     }
 
-    return (
-      <AsyncApiLayout
-        asyncapi={asyncapi}
-        config={concatenatedConfig}
-        error={error}
-      />
-    );
+    return <AsyncApiLayout asyncapi={asyncapi} config={concatenatedConfig} />;
   }
 
   private updateState(schema: PropsSchema) {

library/src/containers/Error/Error.tsx

@@ -10,12 +10,15 @@ const renderErrors = (errors: ValidationError[]): React.ReactNode => {
 
   return errors
     .map((singleError: ValidationError, index: number) => {
-      if (!singleError?.title || !singleError.location) {
+      if (!singleError?.title) {
         return null;
       }
       return (
-        <div key={index} className="flex">
-          <span>{`${singleError.location.startLine}.`}</span>
+        <div key={index} className="flex gap-2">
+          {(singleError?.location?.startLine ??
+            singleError?.location?.startOffset) && (
+            <span>{`line ${singleError?.location?.startLine + singleError?.location?.startOffset}:`}</span>
+          )}
           <code className="whitespace-pre-wrap break-all ml-2">
             {singleError.title}
           </code>

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>