From 7a5cf65ef339004f4063225dab87d1c992e70cba Mon Sep 17 00:00:00 2001 From: Andrew Thauer <6507159+andrewthauer@users.noreply.github.com> Date: Mon, 31 Aug 2020 02:27:29 -0400 Subject: [PATCH] feat: syntax highlighing for api-docs (#2170) --- plugins/api-docs/package.json | 2 +- .../components/ApiCatalogTable/ApiCatalogTable.tsx | 1 + .../ApiDefinitionCard/ApiDefinitionCard.tsx | 8 +++++--- .../ApiDefinitionWidget/ApiDefinitionWidget.tsx | 12 ++++++++---- .../src/components/ApiEntityPage/ApiEntityPage.tsx | 13 ++++++++----- .../AsyncApiDefinitionWidget.tsx | 8 +++++--- .../OpenApiDefinitionWidget.tsx | 8 +++++--- .../PlainApiDefinitionWidget.tsx | 11 +++++++---- 8 files changed, 40 insertions(+), 23 deletions(-) diff --git a/plugins/api-docs/package.json b/plugins/api-docs/package.json index 434abd130f..a2ec96ee67 100644 --- a/plugins/api-docs/package.json +++ b/plugins/api-docs/package.json @@ -29,7 +29,6 @@ "@material-ui/core": "^4.9.1", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.45", - "@types/react": "^16.9", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "6.0.0-beta.0", @@ -45,6 +44,7 @@ "@testing-library/user-event": "^12.0.7", "@types/jest": "^26.0.7", "@types/node": "^12.0.0", + "@types/react": "^16.9", "@types/swagger-ui-react": "^3.23.3", "jest-fetch-mock": "^3.0.3" }, diff --git a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx b/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx index 99848637b6..3b954b5a86 100644 --- a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx +++ b/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { Entity } from '@backstage/catalog-model'; import { Table, TableColumn } from '@backstage/core'; import { Link } from '@material-ui/core'; diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx index af101f0194..d5bd9d1851 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx @@ -16,13 +16,15 @@ import { ApiEntityV1alpha1 } from '@backstage/catalog-model'; import { InfoCard } from '@backstage/core'; -import React, { FC } from 'react'; +import React from 'react'; import { ApiDefinitionWidget } from '../ApiDefinitionWidget/ApiDefinitionWidget'; -export const ApiDefinitionCard: FC<{ +type Props = { title?: string; apiEntity: ApiEntityV1alpha1; -}> = ({ title, apiEntity }) => { +}; + +export const ApiDefinitionCard = ({ title, apiEntity }: Props) => { const type = apiEntity?.spec?.type || ''; const definition = apiEntity?.spec?.definition || ''; diff --git a/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx b/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx index 5b1ddd7880..0ea894b5a2 100644 --- a/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionWidget/ApiDefinitionWidget.tsx @@ -14,15 +14,17 @@ * limitations under the License. */ -import React, { FC } from 'react'; +import React from 'react'; import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget/AsyncApiDefinitionWidget'; import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget/OpenApiDefinitionWidget'; import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget/PlainApiDefinitionWidget'; -export const ApiDefinitionWidget: FC<{ +type Props = { type: string; definition: string; -}> = ({ type, definition }) => { +}; + +export const ApiDefinitionWidget = ({ type, definition }: Props) => { switch (type) { case 'openapi': return ; @@ -31,6 +33,8 @@ export const ApiDefinitionWidget: FC<{ return ; default: - return ; + return ( + + ); } }; diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx index 5e08af7e8e..6717222a8e 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx @@ -29,7 +29,7 @@ import { import { catalogApiRef } from '@backstage/plugin-catalog'; import { Box } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; -import React, { FC, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useAsync } from 'react-use'; import { ApiDefinitionCard } from '../ApiDefinitionCard/ApiDefinitionCard'; @@ -59,15 +59,18 @@ export const getPageTheme = (entity?: Entity): PageTheme => { return pageTheme[themeKey] ?? pageTheme.home; }; -const EntityPageTitle: FC<{ title: string; entity: Entity | undefined }> = ({ - title, -}) => ( +type EntityPageTitleProps = { + title: string; + entity: Entity | undefined; +}; + +const EntityPageTitle = ({ title }: EntityPageTitleProps) => ( {title} ); -export const ApiEntityPage: FC<{}> = () => { +export const ApiEntityPage = () => { const { optionalNamespaceAndName } = useParams() as { optionalNamespaceAndName: string; }; diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx index ce372e3cdc..01e2ac33a7 100644 --- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinitionWidget.tsx @@ -15,7 +15,7 @@ */ import AsyncApi from '@kyma-project/asyncapi-react'; -import React, { FC } from 'react'; +import React from 'react'; import { makeStyles, fade } from '@material-ui/core/styles'; import '@kyma-project/asyncapi-react/lib/styles/fiori.css'; @@ -135,9 +135,11 @@ const useStyles = makeStyles(theme => ({ }, })); -export const AsyncApiDefinitionWidget: FC<{ +type Props = { definition: any; -}> = ({ definition }) => { +}; + +export const AsyncApiDefinitionWidget = ({ definition }: Props) => { const classes = useStyles(); return ( diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx index d4fe2ab9e1..61f5cb2b75 100644 --- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; @@ -65,9 +65,11 @@ const useStyles = makeStyles(theme => ({ }, })); -export const OpenApiDefinitionWidget: FC<{ +type Props = { definition: any; -}> = ({ definition }) => { +}; + +export const OpenApiDefinitionWidget = ({ definition }: Props) => { const classes = useStyles(); // Due to a bug in the swagger-ui-react component, the component needs diff --git a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx index 4ceeed06e1..46631c5a4b 100644 --- a/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/PlainApiDefinitionWidget/PlainApiDefinitionWidget.tsx @@ -15,10 +15,13 @@ */ import { CodeSnippet } from '@backstage/core'; -import React, { FC } from 'react'; +import React from 'react'; -export const PlainApiDefinitionWidget: FC<{ +type Props = { definition: any; -}> = ({ definition }) => { - return ; + language: string; +}; + +export const PlainApiDefinitionWidget = ({ definition, language }: Props) => { + return ; };