diff --git a/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx b/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx
index 5383fc0570..e2148184b7 100644
--- a/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx
+++ b/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx
@@ -16,8 +16,8 @@
import { ComponentEntity, Entity } from '@backstage/catalog-model';
import { Progress } from '@backstage/core';
-import React from 'react';
import { Grid } from '@material-ui/core';
+import React from 'react';
import {
ApiDefinitionCard,
useComponentApiEntities,
diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
index 055363ae1f..49b8a69318 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
+++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
@@ -15,15 +15,16 @@
*/
import { ApiEntity } from '@backstage/catalog-model';
-import { CardTab, TabbedCard } from '@backstage/core';
+import { CardTab, useApi, TabbedCard } from '@backstage/core';
import { Alert } from '@material-ui/lab';
import React from 'react';
+import { apiDocsConfigRef } from '../../config';
import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget';
import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget';
import { GraphQlDefinitionWidget } from '../GraphQlDefinitionWidget';
-type ApiDefinitionWidget = {
+export type ApiDefinitionWidget = {
type: string;
title: string;
component: (definition: string) => React.ReactElement;
@@ -61,34 +62,25 @@ export function defaultDefinitionWidgets(): ApiDefinitionWidget[] {
type Props = {
apiEntity?: ApiEntity;
- definitionWidgets?: ApiDefinitionWidget[];
};
-const defaultProps = {
- definitionWidgets: defaultDefinitionWidgets(),
-};
-
-export const ApiDefinitionCard = (props: Props) => {
- const { apiEntity, definitionWidgets } = {
- ...defaultProps,
- ...props,
- };
+export const ApiDefinitionCard = ({ apiEntity }: Props) => {
+ const config = useApi(apiDocsConfigRef);
+ const { getApiDefinitionWidget } = config;
if (!apiEntity) {
return Could not fetch the API;
}
- const definitionWidget = definitionWidgets.find(
- d => d.type === apiEntity.spec.type,
- );
+ const definitionWidget = getApiDefinitionWidget(apiEntity);
if (definitionWidget) {
return (
-
+
{definitionWidget.component(apiEntity.spec.definition)}
-
+
{
title={apiEntity.metadata.name}
children={[
// Has to be an array, otherwise typescript doesn't like that this has only a single child
-
+
({
+ id: 'plugin.api-docs.config',
+ description: 'Used to configure api-docs widgets',
+});
+
+export interface ApiDocsConfig {
+ getApiDefinitionWidget: (
+ apiEntity: ApiEntity,
+ ) => ApiDefinitionWidget | undefined;
+}
diff --git a/plugins/api-docs/src/plugin.ts b/plugins/api-docs/src/plugin.ts
index bd9c968d5b..3fcbe8a1f4 100644
--- a/plugins/api-docs/src/plugin.ts
+++ b/plugins/api-docs/src/plugin.ts
@@ -14,13 +14,30 @@
* limitations under the License.
*/
-import { createPlugin } from '@backstage/core';
+import { ApiEntity } from '@backstage/catalog-model';
+import { createApiFactory, createPlugin } from '@backstage/core';
import { ApiExplorerPage } from './components/ApiExplorerPage/ApiExplorerPage';
+import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
import { ApiEntityPage } from './components/ApiEntityPage/ApiEntityPage';
import { entityRoute, rootRoute } from './routes';
+import { apiDocsConfigRef } from './config';
export const plugin = createPlugin({
id: 'api-docs',
+ apis: [
+ createApiFactory({
+ api: apiDocsConfigRef,
+ deps: {},
+ factory: () => {
+ const definitionWidgets = defaultDefinitionWidgets();
+ return {
+ getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+ return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+ },
+ };
+ },
+ }),
+ ],
register({ router }) {
router.addRoute(rootRoute, ApiExplorerPage);
router.addRoute(entityRoute, ApiEntityPage);
diff --git a/plugins/api-docs/src/routes.ts b/plugins/api-docs/src/routes.ts
index eea911dd62..d2d8ef10c5 100644
--- a/plugins/api-docs/src/routes.ts
+++ b/plugins/api-docs/src/routes.ts
@@ -23,11 +23,13 @@ export const rootRoute = createRouteRef({
path: '/api-docs',
title: 'APIs',
});
+
export const entityRoute = createRouteRef({
icon: NoIcon,
path: '/api-docs/:optionalNamespaceAndName/',
title: 'API',
});
+
export const catalogRoute = createRouteRef({
icon: NoIcon,
path: '',