migrate ConfigContent component to Backstage UI

Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>

.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

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",

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 <Typography>{error.message}</Typography>;
+    return <Text as="p">{error.message}</Text>;
   }
 
   const messages = error.messages as string[];
 
   return (
     <Box>
-      {messages.map(message => (
-        <Typography>{message}</Typography>
+      {messages.map((message, index) => (
+        <Text as="p" key={index}>
+          {message}
+        </Text>
       ))}
     </Box>
   );
@@ -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 <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <Alert status="danger" title={error.message} />;
   }
 
   if (!configInfo) {
-    return <Alert severity="error">Unable to load config data</Alert>;
+    return <Alert status="danger" title="Unable to load config data" />;
   }
 
   return (
     <Box>
       {configInfo && configInfo.error && (
-        <Box className={classes.warningStyle}>
+        <Box pb="2">
           <WarningPanel title="Config validation failed">
             <WarningContent error={configInfo.error} />
           </WarningPanel>
         </Box>
       )}
-      <Paper className={classes.paperStyle}>
+      <Box bg="neutral" p="4">
         <ReactJson
           src={configInfo.config as object}
           name="config"
           enableClipboard={false}
           theme={theme.palette.type === 'dark' ? 'chalk' : 'rjv-default'}
         />
-      </Paper>
+      </Box>
     </Box>
   );
 };

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"