diff --git a/.changeset/purple-chefs-wait.md b/.changeset/purple-chefs-wait.md
new file mode 100644
index 0000000000..9a8b1f9799
--- /dev/null
+++ b/.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.
diff --git a/plugins/api-docs/README.md b/plugins/api-docs/README.md
index 27e19b218d..792a7fb0b7 100644
--- a/plugins/api-docs/README.md
+++ b/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) => ,
+ }
+ }
+ return obj;
+ });
+
+ return {
+ getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+ return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+ },
+ };
+ },
+ })
+```
diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md
index 2254bf96cd..a018dfcdb1 100644
--- a/plugins/api-docs/api-report.md
+++ b/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;
};
// @public (undocumented)
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx
index 735fba86f7..adbd069908 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.test.tsx
+++ b/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(
- ,
+ ,
);
// swagger-ui loads the documentation asynchronously
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
index 5d5988399a..a2ebbbc7e3 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
+++ b/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;
};
-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 (
-
+
);
};
diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
index 424a52136b..152f1fd089 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx
+++ b/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;
};
/** @public */