feat: syntax highlighing for api-docs (#2170)

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';

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 || '';
 

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 <OpenApiDefinitionWidget definition={definition} />;
@@ -31,6 +33,8 @@ export const ApiDefinitionWidget: FC<{
       return <AsyncApiDefinitionWidget definition={definition} />;
 
     default:
-      return <PlainApiDefinitionWidget definition={definition} />;
+      return (
+        <PlainApiDefinitionWidget definition={definition} language={type} />
+      );
   }
 };

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) => (
   <Box display="inline-flex" alignItems="center" height="1em">
     {title}
   </Box>
 );
 
-export const ApiEntityPage: FC<{}> = () => {
+export const ApiEntityPage = () => {
   const { optionalNamespaceAndName } = useParams() as {
     optionalNamespaceAndName: string;
   };

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 (

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

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 <CodeSnippet text={definition} language="yaml" />;
+  language: string;
+};
+
+export const PlainApiDefinitionWidget = ({ definition, language }: Props) => {
+  return <CodeSnippet text={definition} language={language} />;
 };