diff --git a/.changeset/gentle-elephants-look.md b/.changeset/gentle-elephants-look.md
new file mode 100644
index 0000000000..44263fb8a9
--- /dev/null
+++ b/.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
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 495150e54b..c76843e50e 100644
--- a/packages/core-components/api-report.md
+++ b/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;
};
diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx
new file mode 100644
index 0000000000..3158f9a1d4
--- /dev/null
+++ b/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('', () => {
+ const propsErrorMessage: WarningProps = {
+ severity: 'error',
+ title: 'Mock title',
+ message: 'Some more info',
+ };
+
+ it('renders a title formatted by markdown', async () => {
+ await renderInTestApp(
+ ,
+ );
+ expect(screen.getByText('Error: Step has failed.')).toBeInTheDocument();
+
+ expect(screen.getByText('Help')).toHaveAttribute(
+ 'href',
+ 'https://commonmark.org/help',
+ );
+ });
+});
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();
expect(screen.getByText('Error: Mock title')).toBeInTheDocument();
});
+ it('renders a title formatted by markdown', async () => {
+ await renderInTestApp(
+ ,
+ );
+ expect(screen.getByText('Error: Step has failed.')).toBeInTheDocument();
+
+ expect(screen.getByText('Help')).toHaveAttribute(
+ 'href',
+ 'https://commonmark.org/help',
+ );
+ });
});
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: {