Merge pull request #20357 from acierto/warning-panel-md-title

Add a possibility to use a formatter on a warning panel. Applied it for a scaffolder template

.changeset/gentle-elephants-look.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-scaffolder': minor
+---
+
+Add a possibility to use a formatter on a warning panel. Applied it for a scaffolder template

packages/core-components/api-report.md

@@ -384,6 +384,7 @@ export type ErrorPanelClassKey = 'text' | 'divider';
 export type ErrorPanelProps = {
   error: Error;
   defaultExpanded?: boolean;
+  titleFormat?: string;
   title?: string;
 };
 

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

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WarningPanel } from '../WarningPanel';
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { WarningProps } from '../WarningPanel/WarningPanel';
+
+describe('<ErrorPanel />', () => {
+  const propsErrorMessage: WarningProps = {
+    severity: 'error',
+    title: 'Mock title',
+    message: 'Some more info',
+  };
+
+  it('renders a title formatted by markdown', async () => {
+    await renderInTestApp(
+      <WarningPanel
+        {...propsErrorMessage}
+        titleFormat="markdown"
+        title="Step has failed. [Help](https://commonmark.org/help)"
+      />,
+    );
+    expect(screen.getByText('Error: Step has failed.')).toBeInTheDocument();
+
+    expect(screen.getByText('Help')).toHaveAttribute(
+      'href',
+      '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

@@ -75,4 +75,19 @@ describe('<WarningPanel />', () => {
     await renderInTestApp(<WarningPanel {...propsErrorMessage} />);
     expect(screen.getByText('Error: Mock title')).toBeInTheDocument();
   });
+  it('renders a title formatted by markdown', async () => {
+    await renderInTestApp(
+      <WarningPanel
+        {...propsErrorMessage}
+        titleFormat="markdown"
+        title="Step has failed. [Help](https://commonmark.org/help)"
+      />,
+    );
+    expect(screen.getByText('Error: Step has failed.')).toBeInTheDocument();
+
+    expect(screen.getByText('Help')).toHaveAttribute(
+      'href',
+      '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>