Merge pull request #16009 from kmatyukhin/md-description

Add Markdown support in the About Card description section

.changeset/many-nails-joke.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Added Markdown support in the `AboutCard` description section

packages/catalog-model/examples/components/petstore-component.yaml

@@ -2,8 +2,11 @@ apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: petstore
-  # This is an extra long description
-  description: The Petstore is an example API used to show features of the OpenAPI spec.
+  # This is an extra long description with Markdown
+  description: |
+    [The Petstore](http://petstore.example.com) is an example API used to show features of the OpenAPI spec.
+    - First item
+    - Second item
   links:
     - url: https://github.com/swagger-api/swagger-petstore
       title: GitHub Repo

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -25,7 +25,8 @@ import {
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { JsonArray } from '@backstage/types';
-import { Chip, Grid, makeStyles, Typography } from '@material-ui/core';
+import { Chip, Grid, makeStyles } from '@material-ui/core';
+import { MarkdownContent } from '@backstage/core-components';
 import React from 'react';
 import { AboutField } from './AboutField';
 import { LinksGridList } from '../EntityLinksCard/LinksGridList';
@@ -111,9 +112,10 @@ export function AboutContent(props: AboutContentProps) {
   return (
     <Grid container>
       <AboutField label="Description" gridSizes={{ xs: 12 }}>
-        <Typography variant="body2" paragraph className={classes.description}>
-          {entity?.metadata?.description || 'No description'}
-        </Typography>
+        <MarkdownContent
+          className={classes.description}
+          content={entity?.metadata?.description || 'No description'}
+        />
       </AboutField>
       <AboutField
         label="Owner"