feat(apidocs): add resolvers prop to AsyncApiDefinitionWidget

Signed-off-by: Simon Stamm <simon.stamm@tui.com>
2024-06-19 17:53:00 +02:00
parent 78621334a3
commit ebfeb40305
7 changed files with 155 additions and 8 deletions
@@ -50,6 +50,7 @@ To link that a component provides or consumes an API, see the [`providesApis`](h
      - [Custom Api Renderings](#custom-api-renderings)
      - [Adding Swagger UI Interceptor](#adding-requestinterceptor-to-swagger-ui)
      - [Providing Swagger UI Specific Supported Methods](#provide-specific-supported-methods-to-swagger-ui)
+      - [Custom Resolvers for AsyncApi](#custom-resolvers-for-asyncapi)
    - [Integrations](#integrations)
      - [Implementing OAuth 2 Authorization Code flow with Swagger UI](#implementing-oauth-2-authorization-code-flow-with-swagger-ui)

@@ -1092,6 +1093,61 @@ export default createExtensionOverrides({

 N.B. if you wish to disable the `Try It Out` feature for your API, you can provide an empty list to the `supportedSubmitMethods` parameter.

+##### Custom Resolvers for AsyncApi
+
+You can override the default http/https resolvers, for example to add authentication to requests to internal schema registries by providing the `resolvers` prop to the `AsyncApiDefinitionWidget`. This is an example:
+
+```tsx
+...
+import {
+  AsyncApiDefinitionWidget,
+  apiDocsConfigRef,
+  defaultDefinitionWidgets,
+} from '@backstage/plugin-api-docs';
+import { ApiEntity } from '@backstage/catalog-model';
+
+export const apis: AnyApiFactory[] = [
+...
+  createApiFactory({
+    api: apiDocsConfigRef,
+    deps: {},
+    factory: () => {
+      const myCustomResolver = {
+        schema: 'https',
+        order: 1,
+        canRead: true,
+        async read(uri: any) {
+          const response = await fetch(request, {
+            headers: {
+              X-Custom: 'Custom',
+            },
+          });
+          return response.text();
+        },
+      };
+
+      const definitionWidgets = defaultDefinitionWidgets().map(obj => {
+        if (obj.type === 'asyncapi') {
+          return {
+            ...obj,
+            component: (definition) => (
+              <AsyncApiDefinitionWidget definition={definition} resolvers={[myCustomResolver]} />
+            ),
+          };
+        }
+        return obj;
+      });
+
+      return {
+        getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+          return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+        },
+      };
+    }
+  })
+]
+```
+
 ### Integrations

 #### Implementing OAuth 2 Authorization Code flow with Swagger UI