From 0c1fc3986c3db3725f27a50591a6c7493ebba638 Mon Sep 17 00:00:00 2001
From: Konstantin Matyukhin <kmatyukhin@gmail.com>
Date: Fri, 27 Jan 2023 14:15:01 +0100
Subject: [PATCH 1/2] Add Markdown support in the About Card description
 section

To keep consistency with the Scaffolder template cards this commit
introduces Markdown support in the Catalog components About Card

Signed-off-by: Konstantin Matyukhin <kmatyukhin@gmail.com>
---
 .changeset/many-nails-joke.md                          |  5 +++++
 .../examples/components/petstore-component.yaml        |  7 +++++--
 .../catalog/src/components/AboutCard/AboutContent.tsx  | 10 ++++++----
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/many-nails-joke.md

diff --git a/.changeset/many-nails-joke.md b/.changeset/many-nails-joke.md
new file mode 100644
index 0000000000..8cfa79a446
--- /dev/null
+++ b/.changeset/many-nails-joke.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Added Markdown support in the About card description section
diff --git a/packages/catalog-model/examples/components/petstore-component.yaml b/packages/catalog-model/examples/components/petstore-component.yaml
index 878fabd551..cdac4ce1ae 100644
--- a/packages/catalog-model/examples/components/petstore-component.yaml
+++ b/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
diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
index 260a0eccbf..245308cee2 100644
--- a/plugins/catalog/src/components/AboutCard/AboutContent.tsx
+++ b/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"

From c48006b2a67014416ffbef52f1b811716f3b43ba Mon Sep 17 00:00:00 2001
From: Ben Lambert <blam@spotify.com>
Date: Mon, 30 Jan 2023 14:29:13 +0100
Subject: [PATCH 2/2] Update many-nails-joke.md

Signed-off-by: blam <ben@blam.sh>
---
 .changeset/many-nails-joke.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/many-nails-joke.md b/.changeset/many-nails-joke.md
index 8cfa79a446..2ffd97dd0b 100644
--- a/.changeset/many-nails-joke.md
+++ b/.changeset/many-nails-joke.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog': minor
 ---
 
-Added Markdown support in the About card description section
+Added Markdown support in the `AboutCard` description section