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