Added a possibility to use a formatter for error titles. Applied it for scaffolder template

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

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

@@ -0,0 +1,47 @@
+/*
+ * 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}
+        formatTitle="markdown"
+        title="Step has been failed. [Help](https://commonmark.org/help)"
+      />,
+    );
+    expect(
+      screen.getByText('Error: Step has been 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;
+  formatTitle?: 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, formatTitle, children } = props;
   return (
     <WarningPanel
       severity="error"
       title={title ?? error.message}
       defaultExpanded={defaultExpanded}
+      formatTitle={formatTitle}
     >
       <ErrorList
         error={error.name}

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

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/test-utils';
 import Typography from '@material-ui/core/Typography';
 import { WarningPanel, WarningProps } from './WarningPanel';
@@ -75,4 +75,21 @@ 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}
+        formatTitle="markdown"
+        title="Step has been failed. [Help](https://commonmark.org/help)"
+      />,
+    );
+    expect(
+      screen.getByText('Error: Step has been 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']>,
@@ -94,6 +95,11 @@ const useStyles = makeStyles<BackstageTheme>(
         ),
       fontWeight: theme.typography.fontWeightBold,
     },
+    markdownContent: {
+      '& p': {
+        display: 'inline',
+      },
+    },
     message: {
       width: '100%',
       display: 'block',
@@ -124,6 +130,7 @@ const useStyles = makeStyles<BackstageTheme>(
 export type WarningProps = {
   title?: string;
   severity?: 'warning' | 'error' | 'info';
+  formatTitle?: string;
   message?: React.ReactNode;
   defaultExpanded?: boolean;
   children?: React.ReactNode;
@@ -151,6 +158,7 @@ export function WarningPanel(props: WarningProps) {
   const {
     severity = 'warning',
     title,
+    formatTitle,
     message,
     children,
     defaultExpanded,
@@ -172,7 +180,14 @@ export function WarningPanel(props: WarningProps) {
       >
         <ErrorOutlineStyled severity={severity} />
         <Typography className={classes.summaryText} variant="subtitle1">
-          {subTitle}
+          {formatTitle === 'markdown' ? (
+            <MarkdownContent
+              content={subTitle}
+              className={classes.markdownContent}
+            />
+          ) : (
+            subTitle
+          )}
         </Typography>
       </AccordionSummary>
       {(message || children) && (

plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx

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