Merge pull request #19260 from nthings/master

Adding requestInterceptor option to `api-docs` plugin and pass it to SwaggerUI

.changeset/purple-chefs-wait.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Adding `requestInterceptor` option to `api-docs` and pass it to SwaggerUI. This will enable to configure a proxy or headers to be sent to all the request made through the `Try it out` button on SwaggerUI.

plugins/api-docs/README.md

@@ -222,3 +222,42 @@ security:
 ## Links
 
 - [The Backstage homepage](https://backstage.io)
+
+### Adding `requestInterceptor` to Swagger UI
+
+To configure a [`requestInterceptor` for Swagger UI](https://github.com/swagger-api/swagger-ui/tree/master/flavors/swagger-ui-react#requestinterceptor-proptypesfunc) you'll need to add the following to your `api.tsx`:
+
+```tsx
+...
+import { OpenApiDefinitionWidget, apiDocsConfigRef, defaultDefinitionWidgets } from '@backstage/plugin-api-docs';
+import { ApiEntity } from '@backstage/catalog-model';
+
+export const apis: AnyApiFactory[] = [
+...
+createApiFactory({
+    api: apiDocsConfigRef,
+    deps: {},
+    factory: () => {
+      // Overriding openapi definition widget to add header
+      const requestInterceptor = (req: any) => {
+        req.headers.append('myheader', 'wombats');
+        return req;
+      };
+      const definitionWidgets = defaultDefinitionWidgets().map(obj => {
+        if (obj.type === 'openapi') {
+          return {
+            ...obj,
+            component: (definition) => <OpenApiDefinitionWidget definition={definition} requestInterceptor={requestInterceptor} />,
+          }
+        }
+        return obj;
+      });
+
+      return {
+        getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+          return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+        },
+      };
+    },
+  })
+```

plugins/api-docs/api-report.md

@@ -165,6 +165,7 @@ export const OpenApiDefinitionWidget: (
 // @public (undocumented)
 export type OpenApiDefinitionWidgetProps = {
   definition: string;
+  requestInterceptor?: (req: any) => any | Promise<any>;
 };
 
 // @public (undocumented)

plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx

@@ -38,8 +38,14 @@ paths:
         "200": 
           description: Success
     `;
+
+    const requestInterceptor = (req: any) => req;
+
     const { getByText } = await renderInTestApp(
-      <OpenApiDefinition definition={definition} />,
+      <OpenApiDefinition
+        definition={definition}
+        requestInterceptor={requestInterceptor}
+      />,
     );
 
     // swagger-ui loads the documentation asynchronously

plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx

@@ -136,9 +136,13 @@ const useStyles = makeStyles(theme => ({
 
 export type OpenApiDefinitionProps = {
   definition: string;
+  requestInterceptor?: (req: any) => any | Promise<any>;
 };
 
-export const OpenApiDefinition = ({ definition }: OpenApiDefinitionProps) => {
+export const OpenApiDefinition = ({
+  definition,
+  requestInterceptor,
+}: OpenApiDefinitionProps) => {
   const classes = useStyles();
 
   // Due to a bug in the swagger-ui-react component, the component needs
@@ -152,7 +156,12 @@ export const OpenApiDefinition = ({ definition }: OpenApiDefinitionProps) => {
 
   return (
     <div className={classes.root}>
-      <SwaggerUI spec={def} url="" deepLinking />
+      <SwaggerUI
+        spec={def}
+        url=""
+        requestInterceptor={requestInterceptor}
+        deepLinking
+      />
     </div>
   );
 };

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

@@ -28,6 +28,7 @@ const LazyOpenApiDefinition = React.lazy(() =>
 /** @public */
 export type OpenApiDefinitionWidgetProps = {
   definition: string;
+  requestInterceptor?: (req: any) => any | Promise<any>;
 };
 
 /** @public */