refactor(catalog): migrate warnings components from MUI to BUI

Migrated EntityRelationWarning and EntityProcessingErrorsPanel
from Material UI to Backstage UI components.

- Alert: severity → status, children → description prop
- Box: numeric spacing → string tokens (mb={1} → mb="2")

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/wild-emus-write.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Migrated `EntityRelationWarning` and `EntityProcessingErrorsPanel` components from Material UI to Backstage UI.

plugins/catalog/src/components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.tsx

@@ -21,7 +21,6 @@ import {
   EntityRefLink,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import Box from '@material-ui/core/Box';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import {
   CatalogApi,
@@ -32,6 +31,7 @@ import useAsync from 'react-use/esm/useAsync';
 import { SerializedError } from '@backstage/errors';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { Box } from '@backstage/ui';
 
 const errorFilter = (i: EntityStatusItem) =>
   i.error &&
@@ -100,7 +100,7 @@ export function EntityProcessingErrorsPanel() {
 
   if (error) {
     return (
-      <Box mb={1}>
+      <Box mb="2">
         <ResponseErrorPanel error={error} />
       </Box>
     );
@@ -113,10 +113,10 @@ export function EntityProcessingErrorsPanel() {
   return (
     <>
       {value.items.map((ancestorError, index) => (
-        <Box key={index} mb={1}>
+        <Box key={index} mb="2">
           {stringifyEntityRef(entity) !==
             stringifyEntityRef(ancestorError.entity) && (
-            <Box p={1}>
+            <Box p="2">
               {t('entityProcessingErrorsDescription')}{' '}
               <EntityRefLink entityRef={ancestorError.entity} />
             </Box>

plugins/catalog/src/components/EntityRelationWarning/EntityRelationWarning.tsx

@@ -20,13 +20,12 @@ import {
   catalogApiRef,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import Alert from '@material-ui/lab/Alert';
 import useAsync from 'react-use/esm/useAsync';
-import Box from '@material-ui/core/Box';
 import { ResponseErrorPanel } from '@backstage/core-components';
 import { useApi, ApiHolder } from '@backstage/core-plugin-api';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { Alert, Box } from '@backstage/ui';
 
 async function getRelationWarnings(entity: Entity, catalogApi: CatalogApi) {
   const entityRefRelations = entity.relations?.map(
@@ -85,7 +84,7 @@ export function EntityRelationWarning() {
 
   if (error) {
     return (
-      <Box mb={1}>
+      <Box mb="2">
         <ResponseErrorPanel error={error} />
       </Box>
     );
@@ -96,10 +95,15 @@ export function EntityRelationWarning() {
   }
 
   return (
-    <>
-      <Alert severity="warning" style={{ whiteSpace: 'pre-line' }}>
-        {t('entityRelationWarningDescription')} {value.join(', ')}
-      </Alert>
-    </>
+    <Alert
+      status="warning"
+      icon
+      style={{ whiteSpace: 'pre-line' }}
+      description={
+        <>
+          {t('entityRelationWarningDescription')} {value.join(', ')}
+        </>
+      }
+    />
   );
 }