wip

Signed-off-by: Bogdan Nechyporenko <bnechyporenko@bol.com>

.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

packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx

@@ -31,7 +31,7 @@ describe('<ErrorPanel />', () => {
     await renderInTestApp(
       <WarningPanel
         {...propsErrorMessage}
-        formatTitle="markdown"
+        titleFormat="markdown"
         title="Step has failed. [Help](https://commonmark.org/help)"
       />,
     );

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<ErrorPanelProps>) {
-  const { title, error, defaultExpanded, children } = props;
+  const { title, error, defaultExpanded, titleFormat, children } = props;
   return (
     <WarningPanel
       severity="error"
       title={title ?? error.message}
       defaultExpanded={defaultExpanded}
+      titleFormat={titleFormat}
     >
       <ErrorList
         error={error.name}

packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx

@@ -79,7 +79,7 @@ describe('<WarningPanel />', () => {
     await renderInTestApp(
       <WarningPanel
         {...propsErrorMessage}
-        formatTitle="markdown"
+        titleFormat="markdown"
         title="Step has failed. [Help](https://commonmark.org/help)"
       />,
     );

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<WarningProps['severity']>,
@@ -69,9 +70,6 @@ export type WarningPanelClassKey =
 
 const useStyles = makeStyles<BackstageTheme>(
   theme => ({
-    content: {
-      lineBreak: 'anywhere',
-    },
     panel: {
       backgroundColor: ({ severity }: WarningProps) =>
         getWarningBackgroundColor(
@@ -97,6 +95,11 @@ const useStyles = makeStyles<BackstageTheme>(
         ),
       fontWeight: theme.typography.fontWeightBold,
     },
+    markdownContent: {
+      '& p': {
+        display: 'inline',
+      },
+    },
     message: {
       width: '100%',
       display: 'block',
@@ -127,6 +130,7 @@ const useStyles = makeStyles<BackstageTheme>(
 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) {
     >
       <AccordionSummary
         expandIcon={<ExpandMoreIconStyled severity={severity} />}
-        classes={{ content: classes.content }}
         className={classes.summary}
       >
         <ErrorOutlineStyled severity={severity} />
         <Typography className={classes.summaryText} variant="subtitle1">
-          {subTitle}
+          {titleFormat === 'markdown' ? (
+            <MarkdownContent
+              content={subTitle}
+              className={classes.markdownContent}
+            />
+          ) : (
+            subTitle
+          )}
         </Typography>
       </AccordionSummary>
       {(message || children) && (

plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx

@@ -165,6 +165,7 @@ export const OngoingTask = (props: {
           <Box paddingBottom={2}>
             <ErrorPanel
               error={taskStream.error}
+              titleFormat="markdown"
               title={taskStream.error.message}
             />
           </Box>