From 3cc945cbe141477b02f1f6871c44402e7f79f52f Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:52:20 +0200 Subject: [PATCH 1/8] Fix for a Warning Panel. For certain error messages the content of it doesn't fit inside the div container. Signed-off-by: Bogdan Nechyporenko --- .../src/components/ErrorPanel/ErrorPanel.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx index a3588b99c3..66ef82b029 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx @@ -32,12 +32,10 @@ describe('', () => { , ); - expect( - screen.getByText('Error: Step has been failed.'), - ).toBeInTheDocument(); + expect(screen.getByText('Error: Step has failed.')).toBeInTheDocument(); expect(screen.getByText('Help')).toHaveAttribute( 'href', From 451b72a38371929532311e561d177632799cd67b Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:56:31 +0200 Subject: [PATCH 2/8] Fix for a Warning Panel. For certain error messages the content of it doesn't fit inside the div container. Signed-off-by: Bogdan Nechyporenko --- .../src/components/WarningPanel/WarningPanel.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx index fe67a2e77d..dd8e21d5c0 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx @@ -80,12 +80,10 @@ describe('', () => { , ); - expect( - screen.getByText('Error: Step has been failed.'), - ).toBeInTheDocument(); + expect(screen.getByText('Error: Step has failed.')).toBeInTheDocument(); expect(screen.getByText('Help')).toHaveAttribute( 'href', From ee958ed24df84d917514906c9f815a8cd7eb1937 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Mon, 23 Oct 2023 23:37:54 +0200 Subject: [PATCH 3/8] wip Signed-off-by: Bogdan Nechyporenko --- .../components/ErrorPanel/ErrorPanel.test.tsx | 45 ------------------- .../WarningPanel/WarningPanel.test.tsx | 15 ------- 2 files changed, 60 deletions(-) delete mode 100644 packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx deleted file mode 100644 index 66ef82b029..0000000000 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * 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/WarningPanel/WarningPanel.test.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx index dd8e21d5c0..5d00784fd1 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx @@ -75,19 +75,4 @@ describe('', () => { 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', - ); - }); }); From 1d8fafdc9b32ae1172cbb25726fefc88162d4bd3 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Mon, 23 Oct 2023 23:39:34 +0200 Subject: [PATCH 4/8] wip Signed-off-by: Bogdan Nechyporenko --- .../components/ErrorPanel/ErrorPanel.test.tsx | 45 +++++++++++++++++++ .../WarningPanel/WarningPanel.test.tsx | 15 +++++++ 2 files changed, 60 insertions(+) create mode 100644 packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx 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..66ef82b029 --- /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/WarningPanel/WarningPanel.test.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx index 5d00784fd1..dd8e21d5c0 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx @@ -75,4 +75,19 @@ describe('', () => { 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', + ); + }); }); From f28c11743a97c972c0c14b58f24696448810dcc5 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Mon, 23 Oct 2023 23:59:34 +0200 Subject: [PATCH 5/8] wip Signed-off-by: Bogdan Nechyporenko --- .changeset/gentle-elephants-look.md | 6 ++++++ .../components/ErrorPanel/ErrorPanel.test.tsx | 2 +- .../src/components/ErrorPanel/ErrorPanel.tsx | 4 +++- .../WarningPanel/WarningPanel.test.tsx | 2 +- .../components/WarningPanel/WarningPanel.tsx | 21 ++++++++++++++----- .../components/OngoingTask/OngoingTask.tsx | 1 + 6 files changed, 28 insertions(+), 8 deletions(-) create mode 100644 .changeset/gentle-elephants-look.md diff --git a/.changeset/gentle-elephants-look.md b/.changeset/gentle-elephants-look.md new file mode 100644 index 0000000000..24e7844809 --- /dev/null +++ b/.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 diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx index 66ef82b029..3158f9a1d4 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx @@ -31,7 +31,7 @@ describe('', () => { await renderInTestApp( , ); 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( , ); 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: { From 26f4cf90d184d4e669d3c5333f0c742ed5004219 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 24 Oct 2023 00:17:20 +0200 Subject: [PATCH 6/8] Updated api-report.md Signed-off-by: Bogdan Nechyporenko --- packages/core-components/api-report.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index d40179dc62..0ebf96edbc 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; }; From ec2b6e7fc27128cff1336cedba17a470b831f563 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Fri, 27 Oct 2023 16:22:55 +0200 Subject: [PATCH 7/8] feedback Signed-off-by: Bogdan Nechyporenko --- .changeset/gentle-elephants-look.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/gentle-elephants-look.md b/.changeset/gentle-elephants-look.md index 24e7844809..a9ec5e7c0d 100644 --- a/.changeset/gentle-elephants-look.md +++ b/.changeset/gentle-elephants-look.md @@ -1,6 +1,6 @@ --- -'@backstage/core-components': patch -'@backstage/plugin-scaffolder': patch +'@backstage/core-components': minor +'@backstage/plugin-scaffolder': minor --- Add a possibility to use a formatter on a warning panel. Applied it for a scaffolder template From 80cbef8a461b91580abb4e85da618c3534358418 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Mon, 6 Nov 2023 23:12:20 +0100 Subject: [PATCH 8/8] '@backstage/core-components': patch Signed-off-by: Bogdan Nechyporenko --- .changeset/gentle-elephants-look.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-elephants-look.md b/.changeset/gentle-elephants-look.md index a9ec5e7c0d..44263fb8a9 100644 --- a/.changeset/gentle-elephants-look.md +++ b/.changeset/gentle-elephants-look.md @@ -1,5 +1,5 @@ --- -'@backstage/core-components': minor +'@backstage/core-components': patch '@backstage/plugin-scaffolder': minor ---