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