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: {