diff --git a/.changeset/gentle-elephants-look.md b/.changeset/gentle-elephants-look.md
new file mode 100644
index 0000000000..24e7844809
--- /dev/null
+++ b/.changeset/gentle-elephants-look.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Add a possibility to use a formatter on a warning panel. Applied it for a scaffolder template
diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx
index 66ef82b029..3158f9a1d4 100644
--- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx
+++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx
@@ -31,7 +31,7 @@ describe('', () => {
await renderInTestApp(
,
);
diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx
index 02520d2c5c..848dc51d75 100644
--- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx
+++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx
@@ -96,6 +96,7 @@ const ErrorList = ({
export type ErrorPanelProps = {
error: Error;
defaultExpanded?: boolean;
+ titleFormat?: string;
title?: string;
};
@@ -105,12 +106,13 @@ export type ErrorPanelProps = {
* @public
*/
export function ErrorPanel(props: PropsWithChildren) {
- const { title, error, defaultExpanded, children } = props;
+ const { title, error, defaultExpanded, titleFormat, children } = props;
return (
', () => {
await renderInTestApp(
,
);
diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx
index f4dc298b1e..1ed356024c 100644
--- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx
+++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx
@@ -23,6 +23,7 @@ import Typography from '@material-ui/core/Typography';
import ErrorOutline from '@material-ui/icons/ErrorOutline';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import React from 'react';
+import { MarkdownContent } from '../MarkdownContent';
const getWarningTextColor = (
severity: NonNullable,
@@ -69,9 +70,6 @@ export type WarningPanelClassKey =
const useStyles = makeStyles(
theme => ({
- content: {
- lineBreak: 'anywhere',
- },
panel: {
backgroundColor: ({ severity }: WarningProps) =>
getWarningBackgroundColor(
@@ -97,6 +95,11 @@ const useStyles = makeStyles(
),
fontWeight: theme.typography.fontWeightBold,
},
+ markdownContent: {
+ '& p': {
+ display: 'inline',
+ },
+ },
message: {
width: '100%',
display: 'block',
@@ -127,6 +130,7 @@ const useStyles = makeStyles(
export type WarningProps = {
title?: string;
severity?: 'warning' | 'error' | 'info';
+ titleFormat?: string;
message?: React.ReactNode;
defaultExpanded?: boolean;
children?: React.ReactNode;
@@ -154,6 +158,7 @@ export function WarningPanel(props: WarningProps) {
const {
severity = 'warning',
title,
+ titleFormat,
message,
children,
defaultExpanded,
@@ -171,12 +176,18 @@ export function WarningPanel(props: WarningProps) {
>
}
- classes={{ content: classes.content }}
className={classes.summary}
>
- {subTitle}
+ {titleFormat === 'markdown' ? (
+
+ ) : (
+ subTitle
+ )}
{(message || children) && (
diff --git a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx
index cc988599a0..984b38dcdd 100644
--- a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx
+++ b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx
@@ -165,6 +165,7 @@ export const OngoingTask = (props: {