From eff293b4158bc84158caf799ad5a782700b9211f Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 3 Oct 2023 14:36:28 +0200 Subject: [PATCH 01/14] Fix for a Warning Panel Signed-off-by: Bogdan Nechyporenko --- .changeset/many-timers-double.md | 5 ----- .changeset/perfect-shrimps-attend.md | 5 +++++ packages/app/src/App.tsx | 1 - .../src/components/WarningPanel/WarningPanel.tsx | 4 ++++ plugins/scaffolder/alpha-api-report.md | 3 --- plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx | 5 +---- plugins/scaffolder/src/next/Router/Router.tsx | 4 ---- 7 files changed, 10 insertions(+), 17 deletions(-) delete mode 100644 .changeset/many-timers-double.md create mode 100644 .changeset/perfect-shrimps-attend.md diff --git a/.changeset/many-timers-double.md b/.changeset/many-timers-double.md deleted file mode 100644 index 27d569ba8f..0000000000 --- a/.changeset/many-timers-double.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-scaffolder': patch ---- - -Added a possibility to open logs view in a scaffolder execution panel automatically diff --git a/.changeset/perfect-shrimps-attend.md b/.changeset/perfect-shrimps-attend.md new file mode 100644 index 0000000000..dc3cfc28c7 --- /dev/null +++ b/.changeset/perfect-shrimps-attend.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fix for a Warning Panel. For certain error messages the content of it doesn't fit inside the div container. diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 8757367338..f2b7d66b21 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -241,7 +241,6 @@ const routes = ( path="/create" element={ ( theme => ({ + content: { + // overflow: 'hidden', + }, panel: { backgroundColor: ({ severity }: WarningProps) => getWarningBackgroundColor( @@ -168,6 +171,7 @@ export function WarningPanel(props: WarningProps) { > } + classes={{ content: classes.content }} className={classes.summary} > diff --git a/plugins/scaffolder/alpha-api-report.md b/plugins/scaffolder/alpha-api-report.md index 788e2b5e00..8cacf6105e 100644 --- a/plugins/scaffolder/alpha-api-report.md +++ b/plugins/scaffolder/alpha-api-report.md @@ -35,9 +35,6 @@ export type NextRouterProps = { TemplateListPageComponent?: React_2.ComponentType; TemplateWizardPageComponent?: React_2.ComponentType; }; - logs?: { - autoOpen?: boolean; - }; groups?: TemplateGroupFilter[]; templateFilter?: (entity: TemplateEntityV1beta3) => boolean; FormProps?: FormProps_2; diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx index e856076908..91c04897d9 100644 --- a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx @@ -52,9 +52,6 @@ export const OngoingTask = (props: { TemplateOutputsComponent?: React.ComponentType<{ output?: ScaffolderTaskOutput; }>; - logs?: { - autoOpen?: boolean; - }; }) => { // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful. const { taskId } = useParams(); @@ -72,7 +69,7 @@ export const OngoingTask = (props: { [taskStream], ); - const [logsVisible, setLogVisibleState] = useState(props.logs?.autoOpen ?? false); + const [logsVisible, setLogVisibleState] = useState(false); const [buttonBarVisible, setButtonBarVisibleState] = useState(true); useEffect(() => { diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx index 12193ac48b..2061cd1243 100644 --- a/plugins/scaffolder/src/next/Router/Router.tsx +++ b/plugins/scaffolder/src/next/Router/Router.tsx @@ -65,9 +65,6 @@ export type NextRouterProps = { TemplateListPageComponent?: React.ComponentType; TemplateWizardPageComponent?: React.ComponentType; }; - logs?: { - autoOpen?: boolean; - }; groups?: TemplateGroupFilter[]; templateFilter?: (entity: TemplateEntityV1beta3) => boolean; // todo(blam): rename this to formProps @@ -142,7 +139,6 @@ export const Router = (props: PropsWithChildren) => { path={scaffolderTaskRouteRef.path} element={ } From 10c2dfc1d888e18b6254abc80e9613f58ad63e13 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 3 Oct 2023 14:37:26 +0200 Subject: [PATCH 02/14] Fix for a Warning Panel Signed-off-by: Bogdan Nechyporenko --- .../src/components/WarningPanel/WarningPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index de74c21e7d..8dbc759d67 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -70,7 +70,7 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ content: { - // overflow: 'hidden', + overflow: 'hidden', }, panel: { backgroundColor: ({ severity }: WarningProps) => From c83410bd7397315d54ae0ae3fea43165c2214772 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 3 Oct 2023 14:41:10 +0200 Subject: [PATCH 03/14] Fix for a Warning Panel Signed-off-by: Bogdan Nechyporenko --- .../src/components/WarningPanel/WarningPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 8dbc759d67..f4dc298b1e 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -70,7 +70,7 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ content: { - overflow: 'hidden', + lineBreak: 'anywhere', }, panel: { backgroundColor: ({ severity }: WarningProps) => From ef3f517dd09e920e64782b3208e1c0e9e4ba3dcd Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 12:52:17 +0200 Subject: [PATCH 04/14] Added a possibility to use a formatter for error titles. Applied it for scaffolder template Signed-off-by: Bogdan Nechyporenko --- .../components/ErrorPanel/ErrorPanel.test.tsx | 47 +++++++++++++++++++ .../src/components/ErrorPanel/ErrorPanel.tsx | 4 +- .../WarningPanel/WarningPanel.test.tsx | 19 +++++++- .../components/WarningPanel/WarningPanel.tsx | 17 ++++++- .../src/next/OngoingTask/OngoingTask.tsx | 1 + 5 files changed, 85 insertions(+), 3 deletions(-) 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..a3588b99c3 --- /dev/null +++ b/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('', () => { + 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 been 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..a25a864083 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; + formatTitle?: 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, formatTitle, 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 been 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 7e8248115f..19cb3dacf1 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, @@ -94,6 +95,11 @@ const useStyles = makeStyles( ), fontWeight: theme.typography.fontWeightBold, }, + markdownContent: { + '& p': { + display: 'inline', + }, + }, message: { width: '100%', display: 'block', @@ -124,6 +130,7 @@ const useStyles = makeStyles( 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) { > - {subTitle} + {formatTitle === 'markdown' ? ( + + ) : ( + subTitle + )} {(message || children) && ( diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx index b483cd27cb..609f9bde8b 100644 --- a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx @@ -162,6 +162,7 @@ export const OngoingTask = (props: { From b13fa491085e969b651b17c6ab2329660fc36622 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 13:02:00 +0200 Subject: [PATCH 05/14] Added a possibility to use a formatter for error titles. Applied it for scaffolder template Signed-off-by: Bogdan Nechyporenko --- .changeset/plenty-singers-notice.md | 6 ++++++ packages/core-components/api-report.md | 1 + .../src/components/WarningPanel/WarningPanel.test.tsx | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/plenty-singers-notice.md diff --git a/.changeset/plenty-singers-notice.md b/.changeset/plenty-singers-notice.md new file mode 100644 index 0000000000..436be35a26 --- /dev/null +++ b/.changeset/plenty-singers-notice.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-scaffolder': patch +--- + +Add a possibility to use a formatter for 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 44a8b33e04..04fcfa63a2 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; + formatTitle?: string; title?: string; }; diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx index c8adf0b40b..fe67a2e77d 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { fireEvent, screen, waitFor } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import { renderInTestApp } from '@backstage/test-utils'; import Typography from '@material-ui/core/Typography'; import { WarningPanel, WarningProps } from './WarningPanel'; From 24053851d2952d16213bf065bcc5fb67772b0400 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 3 Oct 2023 14:36:28 +0200 Subject: [PATCH 06/14] Fix for a Warning Panel Signed-off-by: Bogdan Nechyporenko --- .changeset/perfect-shrimps-attend.md | 5 +++++ .../src/components/WarningPanel/WarningPanel.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/perfect-shrimps-attend.md diff --git a/.changeset/perfect-shrimps-attend.md b/.changeset/perfect-shrimps-attend.md new file mode 100644 index 0000000000..dc3cfc28c7 --- /dev/null +++ b/.changeset/perfect-shrimps-attend.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fix for a Warning Panel. For certain error messages the content of it doesn't fit inside the div container. diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 19cb3dacf1..3dcb9b2b0f 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -70,6 +70,9 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ + content: { + // overflow: 'hidden', + }, panel: { backgroundColor: ({ severity }: WarningProps) => getWarningBackgroundColor( @@ -176,6 +179,7 @@ export function WarningPanel(props: WarningProps) { > } + classes={{ content: classes.content }} className={classes.summary} > From 5d510714ee472b0019dd4f5d8ce7ac3f4613dfae Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 3 Oct 2023 14:37:26 +0200 Subject: [PATCH 07/14] Fix for a Warning Panel Signed-off-by: Bogdan Nechyporenko --- .../src/components/WarningPanel/WarningPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 3dcb9b2b0f..9afaf9d892 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -71,7 +71,7 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ content: { - // overflow: 'hidden', + overflow: 'hidden', }, panel: { backgroundColor: ({ severity }: WarningProps) => From 9a3a42b7451fc23d8a244d6ee7ec9324dd7dd95b Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Tue, 3 Oct 2023 14:41:10 +0200 Subject: [PATCH 08/14] Fix for a Warning Panel Signed-off-by: Bogdan Nechyporenko --- .../src/components/WarningPanel/WarningPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 9afaf9d892..0b1e97c40e 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -71,7 +71,7 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ content: { - overflow: 'hidden', + lineBreak: 'anywhere', }, panel: { backgroundColor: ({ severity }: WarningProps) => From ede62ece80d6a94b323113a4515ac6b593cb4523 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 15:46:00 +0200 Subject: [PATCH 09/14] Update .changeset/perfect-shrimps-attend.md Co-authored-by: Philipp Hugenroth Signed-off-by: Bogdan Nechyporenko --- .changeset/perfect-shrimps-attend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/perfect-shrimps-attend.md b/.changeset/perfect-shrimps-attend.md index dc3cfc28c7..60c8d737a3 100644 --- a/.changeset/perfect-shrimps-attend.md +++ b/.changeset/perfect-shrimps-attend.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Fix for a Warning Panel. For certain error messages the content of it doesn't fit inside the div container. +Fixed overflowing messages in `WarningPanel`. From 2031ab077af1cb31a9aa2034229302cad52c95a1 Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:21:09 +0200 Subject: [PATCH 10/14] Added a possibility to use a formatter for error titles. Applied it for scaffolder template Signed-off-by: Bogdan Nechyporenko --- .changeset/perfect-shrimps-attend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/perfect-shrimps-attend.md b/.changeset/perfect-shrimps-attend.md index dc3cfc28c7..cead091a56 100644 --- a/.changeset/perfect-shrimps-attend.md +++ b/.changeset/perfect-shrimps-attend.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Fix for a Warning Panel. For certain error messages the content of it doesn't fit inside the div container. +Fix for a Warning Panel. For certain error messages the content doesn't fit the panel. From 811ae9f478f0aeeb6a2d237261eab1afadd664dc Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:25:21 +0200 Subject: [PATCH 11/14] Removed unrelated code Signed-off-by: Bogdan Nechyporenko --- .changeset/plenty-singers-notice.md | 6 --- package.json | 4 +- packages/core-components/api-report.md | 1 - .../components/ErrorPanel/ErrorPanel.test.tsx | 47 ------------------- .../src/components/ErrorPanel/ErrorPanel.tsx | 4 +- .../WarningPanel/WarningPanel.test.tsx | 17 ------- .../components/WarningPanel/WarningPanel.tsx | 20 +------- .../src/next/OngoingTask/OngoingTask.tsx | 1 - 8 files changed, 4 insertions(+), 96 deletions(-) delete mode 100644 .changeset/plenty-singers-notice.md delete mode 100644 packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx diff --git a/.changeset/plenty-singers-notice.md b/.changeset/plenty-singers-notice.md deleted file mode 100644 index 436be35a26..0000000000 --- a/.changeset/plenty-singers-notice.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@backstage/core-components': patch -'@backstage/plugin-scaffolder': patch ---- - -Add a possibility to use a formatter for on a warning panel. Applied it for a scaffolder template diff --git a/package.json b/package.json index 7b7d962780..24faec097a 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,8 @@ "new": "backstage-cli new --scope backstage --baseVersion 0.0.0 --no-private", "create-plugin": "echo \"use 'yarn new' instead\"", "release": "node scripts/prepare-release.js && changeset version && yarn prettier --write '{packages,plugins}/*/{package.json,CHANGELOG.md}' '.changeset/*.json' && yarn install --no-immutable", - "prettier:check": "prettier --check .", - "prettier:fix": "prettier --write .", + "prettier:check": "prettier --check ./.changeset", + "prettier:fix": "prettier --write ./.changeset", "storybook": "yarn ./storybook run start", "snyk:test": "npx snyk test --yarn-workspaces --strict-out-of-sync=false", "snyk:test:package": "yarn snyk:test --include", diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 04fcfa63a2..44a8b33e04 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -384,7 +384,6 @@ export type ErrorPanelClassKey = 'text' | 'divider'; export type ErrorPanelProps = { error: Error; defaultExpanded?: boolean; - formatTitle?: 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 deleted file mode 100644 index a3588b99c3..0000000000 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.test.tsx +++ /dev/null @@ -1,47 +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 been 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 a25a864083..02520d2c5c 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx @@ -96,7 +96,6 @@ const ErrorList = ({ export type ErrorPanelProps = { error: Error; defaultExpanded?: boolean; - formatTitle?: string; title?: string; }; @@ -106,13 +105,12 @@ export type ErrorPanelProps = { * @public */ export function ErrorPanel(props: PropsWithChildren) { - const { title, error, defaultExpanded, formatTitle, children } = props; + const { title, error, defaultExpanded, 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 been 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 0b1e97c40e..bcf2004267 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -23,7 +23,6 @@ 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, @@ -70,9 +69,6 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ - content: { - lineBreak: 'anywhere', - }, panel: { backgroundColor: ({ severity }: WarningProps) => getWarningBackgroundColor( @@ -98,11 +94,6 @@ const useStyles = makeStyles( ), fontWeight: theme.typography.fontWeightBold, }, - markdownContent: { - '& p': { - display: 'inline', - }, - }, message: { width: '100%', display: 'block', @@ -133,7 +124,6 @@ const useStyles = makeStyles( export type WarningProps = { title?: string; severity?: 'warning' | 'error' | 'info'; - formatTitle?: string; message?: React.ReactNode; defaultExpanded?: boolean; children?: React.ReactNode; @@ -161,7 +151,6 @@ export function WarningPanel(props: WarningProps) { const { severity = 'warning', title, - formatTitle, message, children, defaultExpanded, @@ -184,14 +173,7 @@ export function WarningPanel(props: WarningProps) { > - {formatTitle === 'markdown' ? ( - - ) : ( - subTitle - )} + {subTitle} {(message || children) && ( diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx index 609f9bde8b..b483cd27cb 100644 --- a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx @@ -162,7 +162,6 @@ export const OngoingTask = (props: { From db8a52a031d899fde238c5a3457e3953569034fc Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:27:39 +0200 Subject: [PATCH 12/14] Removed unrelated code Signed-off-by: Bogdan Nechyporenko --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 24faec097a..7b7d962780 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,8 @@ "new": "backstage-cli new --scope backstage --baseVersion 0.0.0 --no-private", "create-plugin": "echo \"use 'yarn new' instead\"", "release": "node scripts/prepare-release.js && changeset version && yarn prettier --write '{packages,plugins}/*/{package.json,CHANGELOG.md}' '.changeset/*.json' && yarn install --no-immutable", - "prettier:check": "prettier --check ./.changeset", - "prettier:fix": "prettier --write ./.changeset", + "prettier:check": "prettier --check .", + "prettier:fix": "prettier --write .", "storybook": "yarn ./storybook run start", "snyk:test": "npx snyk test --yarn-workspaces --strict-out-of-sync=false", "snyk:test:package": "yarn snyk:test --include", From 38129ad9cb41b7b8ba62024a772a38ecb3f62cbd Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:28:13 +0200 Subject: [PATCH 13/14] Removed unrelated code Signed-off-by: Bogdan Nechyporenko --- .../src/components/WarningPanel/WarningPanel.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index bcf2004267..f4dc298b1e 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -69,6 +69,9 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ + content: { + lineBreak: 'anywhere', + }, panel: { backgroundColor: ({ severity }: WarningProps) => getWarningBackgroundColor( From 8a15360bb484ba6a043a37742b321eb5bc73450a Mon Sep 17 00:00:00 2001 From: Bogdan Nechyporenko Date: Wed, 4 Oct 2023 16:31:16 +0200 Subject: [PATCH 14/14] 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 --- .changeset/perfect-shrimps-attend.md | 5 +++++ .../src/components/WarningPanel/WarningPanel.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/perfect-shrimps-attend.md diff --git a/.changeset/perfect-shrimps-attend.md b/.changeset/perfect-shrimps-attend.md new file mode 100644 index 0000000000..b530d0e2a2 --- /dev/null +++ b/.changeset/perfect-shrimps-attend.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fixed overflowing messages in `WarningPanel`. diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 7e8248115f..f4dc298b1e 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -69,6 +69,9 @@ export type WarningPanelClassKey = const useStyles = makeStyles( theme => ({ + content: { + lineBreak: 'anywhere', + }, panel: { backgroundColor: ({ severity }: WarningProps) => getWarningBackgroundColor( @@ -168,6 +171,7 @@ export function WarningPanel(props: WarningProps) { > } + classes={{ content: classes.content }} className={classes.summary} >