From 08c922e55715196ffa1b2cbe4484e60cf9c70df6 Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Tue, 10 Mar 2026 09:53:18 +0530 Subject: [PATCH 1/3] migrate ConfigContent component to Backstage UI Signed-off-by: Aditya Kumar --- .changeset/purple-insects-cross.md | 12 ++++++ plugins/devtools/package.json | 1 + .../Content/ConfigContent/ConfigContent.tsx | 42 ++++++------------- yarn.lock | 1 + 4 files changed, 26 insertions(+), 30 deletions(-) create mode 100644 .changeset/purple-insects-cross.md diff --git a/.changeset/purple-insects-cross.md b/.changeset/purple-insects-cross.md new file mode 100644 index 0000000000..b0d08b62a3 --- /dev/null +++ b/.changeset/purple-insects-cross.md @@ -0,0 +1,12 @@ +--- +'@backstage/plugin-devtools': patch +--- + +Migrated `ConfigContent` component from Material UI to Backstage UI (BUI). + +Replaced MUI components with their BUI equivalents: + +- `Box`, `Paper` → `Box` with `bg` and `p` props +- `Typography` → `Text` with `as="p"` +- `Alert` → `Alert` with `status` and `title` props +- Removed `makeStyles`/`createStyles` in favor of BUI spacing props diff --git a/plugins/devtools/package.json b/plugins/devtools/package.json index 582c2fd4e5..133aa2dc03 100644 --- a/plugins/devtools/package.json +++ b/plugins/devtools/package.json @@ -61,6 +61,7 @@ "@backstage/plugin-devtools-common": "workspace:^", "@backstage/plugin-devtools-react": "workspace:^", "@backstage/plugin-permission-react": "workspace:^", + "@backstage/ui": "workspace:^", "@material-ui/core": "^4.9.13", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.57", diff --git a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx index 0130d9fda2..561cc1ae53 100644 --- a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx +++ b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx @@ -15,42 +15,25 @@ */ import { Progress, WarningPanel } from '@backstage/core-components'; -import Box from '@material-ui/core/Box'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; -import { - createStyles, - makeStyles, - Theme, - useTheme, -} from '@material-ui/core/styles'; -import Alert from '@material-ui/lab/Alert'; +import { Alert, Box, Text } from '@backstage/ui'; +import { useTheme } from '@material-ui/core/styles'; import ReactJson from 'react-json-view'; import { useConfig } from '../../../hooks'; import { ConfigError } from '@backstage/plugin-devtools-common'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - warningStyle: { - paddingBottom: theme.spacing(2), - }, - paperStyle: { - padding: theme.spacing(2), - }, - }), -); - export const WarningContent = ({ error }: { error: ConfigError }) => { if (!error.messages) { - return {error.message}; + return {error.message}; } const messages = error.messages as string[]; return ( - {messages.map(message => ( - {message} + {messages.map((message, index) => ( + + {message} + ))} ); @@ -58,37 +41,36 @@ export const WarningContent = ({ error }: { error: ConfigError }) => { /** @public */ export const ConfigContent = () => { - const classes = useStyles(); const theme = useTheme(); const { configInfo, loading, error } = useConfig(); if (loading) { return ; } else if (error) { - return {error.message}; + return ; } if (!configInfo) { - return Unable to load config data; + return ; } return ( {configInfo && configInfo.error && ( - + )} - + - + ); }; diff --git a/yarn.lock b/yarn.lock index 870ee45827..5dd9df3dcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5756,6 +5756,7 @@ __metadata: "@backstage/plugin-devtools-common": "workspace:^" "@backstage/plugin-devtools-react": "workspace:^" "@backstage/plugin-permission-react": "workspace:^" + "@backstage/ui": "workspace:^" "@material-ui/core": "npm:^4.9.13" "@material-ui/icons": "npm:^4.9.1" "@material-ui/lab": "npm:^4.0.0-alpha.57" From 9e88f0ce40be984a760ca962d6cb4637812e1989 Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Tue, 10 Mar 2026 10:24:51 +0530 Subject: [PATCH 2/3] made changes suggested by copilot Signed-off-by: Aditya Kumar --- .../src/components/Content/ConfigContent/ConfigContent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx index 561cc1ae53..868dab2353 100644 --- a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx +++ b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx @@ -26,12 +26,12 @@ export const WarningContent = ({ error }: { error: ConfigError }) => { return {error.message}; } - const messages = error.messages as string[]; + const messages = error.messages; return ( - {messages.map((message, index) => ( - + {messages.map(message => ( + {message} ))} From 79d88e534e66ac05b278793134c2d6d14cc46862 Mon Sep 17 00:00:00 2001 From: Aditya Kumar Date: Wed, 8 Apr 2026 09:15:21 +0530 Subject: [PATCH 3/3] Making suggested changes Signed-off-by: Aditya Kumar --- .changeset/purple-insects-cross.md | 7 ------- .../Content/ConfigContent/ConfigContent.tsx | 19 ++++++++++++++----- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/.changeset/purple-insects-cross.md b/.changeset/purple-insects-cross.md index b0d08b62a3..d0371e18ed 100644 --- a/.changeset/purple-insects-cross.md +++ b/.changeset/purple-insects-cross.md @@ -3,10 +3,3 @@ --- Migrated `ConfigContent` component from Material UI to Backstage UI (BUI). - -Replaced MUI components with their BUI equivalents: - -- `Box`, `Paper` → `Box` with `bg` and `p` props -- `Typography` → `Text` with `as="p"` -- `Alert` → `Alert` with `status` and `title` props -- Removed `makeStyles`/`createStyles` in favor of BUI spacing props diff --git a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx index 868dab2353..bb5902c7ac 100644 --- a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx +++ b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx @@ -15,8 +15,9 @@ */ import { Progress, WarningPanel } from '@backstage/core-components'; +import { appThemeApiRef, useApi } from '@backstage/core-plugin-api'; import { Alert, Box, Text } from '@backstage/ui'; -import { useTheme } from '@material-ui/core/styles'; +import useObservable from 'react-use/esm/useObservable'; import ReactJson from 'react-json-view'; import { useConfig } from '../../../hooks'; import { ConfigError } from '@backstage/plugin-devtools-common'; @@ -41,17 +42,25 @@ export const WarningContent = ({ error }: { error: ConfigError }) => { /** @public */ export const ConfigContent = () => { - const theme = useTheme(); + const appThemeApi = useApi(appThemeApiRef); + const activeThemeId = useObservable( + appThemeApi.activeThemeId$(), + appThemeApi.getActiveThemeId(), + ); + const activeTheme = appThemeApi + .getInstalledThemes() + .find(t => t.id === activeThemeId); + const isDark = activeTheme?.variant === 'dark'; const { configInfo, loading, error } = useConfig(); if (loading) { return ; } else if (error) { - return ; + return ; } if (!configInfo) { - return ; + return ; } return ( @@ -68,7 +77,7 @@ export const ConfigContent = () => { src={configInfo.config as object} name="config" enableClipboard={false} - theme={theme.palette.type === 'dark' ? 'chalk' : 'rjv-default'} + theme={isDark ? 'chalk' : 'rjv-default'} />