From 6f67809bd3abff3f74bfb14039ed8d95bb9bed98 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Thu, 10 Sep 2020 10:34:04 +0200 Subject: [PATCH] feat: allow to view the raw API definitions, even if a viewer component is available --- .../catalog/EntityPageApi/EntityPageApi.tsx | 2 +- .../ApiDefinitionCard/ApiDefinitionCard.tsx | 91 ++++++++++++++++--- .../ApiDefinitionWidget.tsx | 40 -------- .../components/ApiDefinitionWidget/index.ts | 17 ---- .../AsyncApiDefinitionWidget.tsx | 2 +- .../OpenApiDefinitionWidget.tsx | 2 +- .../PlainApiDefinitionWidget.tsx | 4 +- plugins/api-docs/src/components/index.ts | 3 + 8 files changed, 85 insertions(+), 76 deletions(-) delete mode 100644 plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx delete mode 100644 plugins/api-docs/src/components/ApiDefinitionWidget/index.ts diff --git a/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx b/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx index da2cf71ac4..f26691d58c 100644 --- a/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx +++ b/plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx @@ -39,7 +39,7 @@ export const EntityPageApi: FC<{ entity: Entity }> = ({ entity }) => { {apiNames.map(api => ( - + ))} diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx index c4a366c4d9..5650b0745f 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx @@ -15,31 +15,92 @@ */ import { ApiEntity } from '@backstage/catalog-model'; -import { InfoCard } from '@backstage/core'; +import { TabbedCard, CardTab } from '@backstage/core'; import React from 'react'; -import { ApiDefinitionWidget } from '../ApiDefinitionWidget'; +import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget'; import { Alert } from '@material-ui/lab'; +import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget'; +import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget'; -type Props = { - title?: string; - apiEntity?: ApiEntity; +type ApiDefinitionWidget = { + type: string; + title: string; + component: (definition: string) => React.ReactElement; + rawLanguage?: string; }; -export const ApiDefinitionCard = ({ title, apiEntity }: Props) => { +export function defaultDefinitionWidgets(): ApiDefinitionWidget[] { + return [ + { + type: 'openapi', + title: 'OpenAPI', + rawLanguage: 'yaml', + component: definition => ( + + ), + }, + { + type: 'asyncapi', + title: 'AsyncAPI', + rawLanguage: 'yaml', + component: definition => ( + + ), + }, + ]; +} + +type Props = { + apiEntity?: ApiEntity; + definitionWidgets?: ApiDefinitionWidget[]; +}; + +const defaultProps = { + definitionWidgets: defaultDefinitionWidgets(), +}; + +export const ApiDefinitionCard = (props: Props) => { + const { apiEntity, definitionWidgets } = { + ...defaultProps, + ...props, + }; + if (!apiEntity) { + return Could not fetch the API; + } + + const definitionWidget = definitionWidgets.find( + d => d.type === apiEntity.spec.type, + ); + + if (definitionWidget) { return ( - - Could not fetch the API - + + + {definitionWidget.component(apiEntity.spec.definition)} + + + + + ); } return ( - - - + + + , + ]} + /> ); }; diff --git a/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx b/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx deleted file mode 100644 index e1283bb525..0000000000 --- a/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React from 'react'; -import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget'; -import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget'; -import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget'; - -type Props = { - type: string; - definition: string; -}; - -export const ApiDefinitionWidget = ({ type, definition }: Props) => { - switch (type) { - case 'openapi': - return ; - - case 'asyncapi': - return ; - - default: - return ( - - ); - } -}; diff --git a/plugins/api-docs/src/components/ApiDefinitionWidget/index.ts b/plugins/api-docs/src/components/ApiDefinitionWidget/index.ts deleted file mode 100644 index 64c5f87b21..0000000000 --- a/plugins/api-docs/src/components/ApiDefinitionWidget/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { ApiDefinitionWidget } from './ApiDefinitionWidget'; diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx index 2f64c4b2ab..ac5dedfd9c 100644 --- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx @@ -136,7 +136,7 @@ const useStyles = makeStyles(theme => ({ })); type Props = { - definition: any; + definition: string; }; export const AsyncApiDefinitionWidget = ({ definition }: Props) => { diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx index 61f5cb2b75..b96f50166e 100644 --- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx @@ -66,7 +66,7 @@ const useStyles = makeStyles(theme => ({ })); type Props = { - definition: any; + definition: string; }; export const OpenApiDefinitionWidget = ({ definition }: Props) => { diff --git a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx index 46631c5a4b..0b2ebb4ca4 100644 --- a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx @@ -23,5 +23,7 @@ type Props = { }; export const PlainApiDefinitionWidget = ({ definition, language }: Props) => { - return ; + return ( + + ); }; diff --git a/plugins/api-docs/src/components/index.ts b/plugins/api-docs/src/components/index.ts index d49303c24a..55b9517f9c 100644 --- a/plugins/api-docs/src/components/index.ts +++ b/plugins/api-docs/src/components/index.ts @@ -15,5 +15,8 @@ */ export { ApiDefinitionCard } from './ApiDefinitionCard'; +export { AsyncApiDefinitionWidget } from './AsyncApiDefinitionWidget'; +export { OpenApiDefinitionWidget } from './OpenApiDefinitionWidget'; +export { PlainApiDefinitionWidget } from './PlainApiDefinitionWidget'; export { useComponentApiNames } from './useComponentApiNames'; export { useComponentApiEntities } from './useComponentApiEntities';