Merge pull request #25325 from simonstamm/master

plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx

@@ -20,6 +20,14 @@ import { makeStyles, alpha, darken } from '@material-ui/core/styles';
 import React from 'react';
 import { useTheme } from '@material-ui/core/styles';
 
+/** @public */
+export type AsyncApiResolver = {
+  schema: string;
+  order: number;
+  canRead: boolean;
+  read(uri: any): Promise<string>;
+};
+
 const useStyles = makeStyles(theme => ({
   root: {
     fontFamily: 'inherit',
@@ -143,7 +151,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const httpsFetchResolver = {
+const httpsFetchResolver: AsyncApiResolver = {
   schema: 'https',
   order: 1,
   canRead: true,
@@ -153,7 +161,7 @@ const httpsFetchResolver = {
   },
 };
 
-const httpFetchResolver = {
+const httpFetchResolver: AsyncApiResolver = {
   schema: 'http',
   order: 1,
   canRead: true,
@@ -163,27 +171,36 @@ const httpFetchResolver = {
   },
 };
 
-const config = {
-  parserOptions: {
-    __unstable: {
-      resolver: {
-        resolvers: [httpsFetchResolver, httpFetchResolver],
-      },
-    },
-  },
-};
-
 type Props = {
   definition: string;
+  resolvers?: AsyncApiResolver[];
 };
 
-export const AsyncApiDefinition = ({ definition }: Props): JSX.Element => {
+export const AsyncApiDefinition = ({
+  definition,
+  resolvers,
+}: Props): JSX.Element => {
   const classes = useStyles();
   const theme = useTheme();
   const classNames = `${classes.root} ${
     theme.palette.type === 'dark' ? classes.dark : ''
   }`;
 
+  const config = {
+    parserOptions: {
+      __unstable: {
+        resolver: {
+          resolvers: [httpsFetchResolver, httpFetchResolver],
+        },
+      },
+    },
+  };
+
+  // Overwrite default resolvers if custom ones are set
+  if (resolvers) {
+    config.parserOptions.__unstable.resolver.resolvers = resolvers;
+  }
+
   return (
     <div className={classNames}>
       <AsyncApi schema={definition} config={config} />

plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx

@@ -16,6 +16,7 @@
 
 import { Progress } from '@backstage/core-components';
 import React, { Suspense } from 'react';
+import { AsyncApiResolver } from './AsyncApiDefinition';
 
 // The asyncapi component and related CSS has a significant size, only load it
 // if the element is actually used.
@@ -28,6 +29,7 @@ const LazyAsyncApiDefinition = React.lazy(() =>
 /** @public */
 export type AsyncApiDefinitionWidgetProps = {
   definition: string;
+  resolvers?: AsyncApiResolver[];
 };
 
 /** @public */

plugins/api-docs/src/components/AsyncApiDefinitionWidget/index.ts

@@ -16,3 +16,4 @@
 
 export { AsyncApiDefinitionWidget } from './AsyncApiDefinitionWidget';
 export type { AsyncApiDefinitionWidgetProps } from './AsyncApiDefinitionWidget';
+export type { AsyncApiResolver } from './AsyncApiDefinition';