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>
This commit is contained in:
Konstantin Matyukhin
2023-01-27 14:15:01 +01:00
parent fb4695d6e2
commit 0c1fc3986c
3 changed files with 16 additions and 6 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog': patch
---
Added Markdown support in the About card description section
@@ -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
@@ -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"