backstage · AmbrishRamachandiran · Jul 27, 2026
@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-entity-validation': minor
+---
+
+**BREAKING** Migrated from Material UI (MUI) to Backstage UI (BUI). This means that Backstage UI is now a requirement for this plugin, see the Backstage UI [installation documentation](https://ui.backstage.io/get-started/installation) for more details.
@@ -63,5 +63,9 @@
     "*.{json,md}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "@backstage/ui": "backstage:^",
+    "@remixicon/react": "^4.9.0"
   }
 }
@@ -58,13 +58,14 @@
     "@backstage/frontend-plugin-api": "backstage:^",
     "@backstage/plugin-catalog-common": "backstage:^",
     "@backstage/plugin-catalog-react": "backstage:^",
+    "@backstage/ui": "backstage:^",
     "@codemirror/language": "^6.0.0",
     "@codemirror/legacy-modes": "^6.1.0",
     "@codemirror/view": "^6.0.0",
     "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@react-hookz/web": "^25.0.0",
+    "@remixicon/react": "^4.9.0",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "@uiw/react-codemirror": "^4.9.3",
     "lodash": "^4.17.21",

@@ -20,7 +20,7 @@ import {
 } from '@backstage/core-compat-api';
 import { PageBlueprint } from '@backstage/frontend-plugin-api';
 import { rootRouteRef } from '../routes';
-import BuildIcon from '@material-ui/icons/Build';
+import { RiWrenchLine } from '@remixicon/react';
 
 /**
  * @alpha
@@ -30,7 +30,7 @@ export const entityValidationPage = PageBlueprint.make({
     path: '/entity-validation',
     routeRef: convertLegacyRouteRef(rootRouteRef),
     title: 'Entity Validation',
-    icon: <BuildIcon />,
+    icon: <RiWrenchLine />,
     loader: async () =>
       import('../components/EntityValidationPage').then(m =>
         compatWrapper(<m.EntityValidationPage />),

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2026 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.
+ */
+
+@layer components {
+  .container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+  }
+
+  .codeMirror {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .infoPanel {
+    color: var(--bui-fg-link);
+    line-height: 2;
+    margin: 0 var(--bui-space-2);
+  }
+}
@@ -14,35 +14,13 @@
  * limitations under the License.
  */
 import { useMemo, useState } from 'react';
-import Box from '@material-ui/core/Box';
-import { makeStyles } from '@material-ui/core/styles';
+import styles from './EntityTextArea.module.css';
 import CodeMirror from '@uiw/react-codemirror';
 import { showPanel } from '@codemirror/view';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';
 import { useKeyboardEvent } from '@react-hookz/web';
 
-const useStyles = makeStyles(theme => ({
-  container: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    minHeight: '400px',
-  },
-  codeMirror: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-  infoPanel: {
-    color: theme.palette.info.main,
-    lineHeight: 2,
-    margin: theme.spacing(0, 1),
-  },
-}));
-
 type TemplateTextAreaProps = {
   catalogYaml: string;
   onChange: (value: string) => void;
@@ -54,7 +32,6 @@ export const EntityTextArea = ({
   onChange,
   onValidate,
 }: TemplateTextAreaProps) => {
-  const classes = useStyles();
   const [close, setClose] = useState(false);
 
   const panelExtension = useMemo(() => {
@@ -63,12 +40,12 @@ export const EntityTextArea = ({
     }
 
     const dom = document.createElement('div');
-    dom.classList.add(classes.infoPanel);
+    dom.classList.add(styles.infoPanel);
     dom.textContent =
       'To validate the provided entity descriptor YAML, click the "Validate" button or use "Ctrl + S" or "Ctrl + Enter"';
     dom.onclick = () => setClose(true);
     return showPanel.of(() => ({ dom, top: true }));
-  }, [classes, close]);
+  }, [close]);
 
   // Triggers a validation when Ctrl+S or Ctrl+Enter instead of default behavior
   useKeyboardEvent(
@@ -80,9 +57,9 @@ export const EntityTextArea = ({
   );
 
   return (
-    <Box className={classes.container}>
+    <div className={styles.container}>
       <CodeMirror
-        className={classes.codeMirror}
+        className={styles.codeMirror}
         theme="dark"
         height="100%"
         extensions={[StreamLanguage.define(yamlSupport), panelExtension]}
@@ -93,6 +70,6 @@ export const EntityTextArea = ({
           if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) e.preventDefault();
         }}
       />
-    </Box>
+    </div>
   );
 };
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2026 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.
+ */
+
+@layer components {
+  .listItem {
+    display: flex;
+    align-items: center;
+    padding: var(--bui-space-2) 0;
+  }
+
+  .listItemIcon {
+    min-width: 40px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .listItemText {
+    flex: 1;
+    cursor: pointer;
+  }
+
+  .listItemAction {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .validationOk {
+    color: var(--bui-fg-success, #1a7f5a);
+  }
+
+  .validationNotOk {
+    color: var(--bui-fg-danger);
+  }
+
+  .errorContainer {
+    color: var(--bui-fg-danger);
+    background-color: var(--bui-bg-surface-1);
+    padding: var(--bui-space-4);
+    border-radius: var(--bui-radius-2);
+  }
+}
@@ -14,37 +14,16 @@
  * limitations under the License.
  */
 import { useState } from 'react';
+import type { ComponentType } from 'react';
 import { ValidateEntityResponse } from '@backstage/catalog-client';
 import { useApp } from '@backstage/core-plugin-api';
-import Collapse from '@material-ui/core/Collapse';
-import IconButton from '@material-ui/core/IconButton';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
+import { ButtonIcon } from '@backstage/ui';
 import { EntityDisplayName } from '@backstage/plugin-catalog-react';
 import { safeEntityKind } from './safeEntityDisplayName';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { RiArrowUpSLine, RiArrowDownSLine } from '@remixicon/react';
 import { MarkdownContent } from '@backstage/core-components';
 import { ValidationOutputOk } from '../../types';
-import SvgIcon from '@material-ui/core/SvgIcon';
-
-const useStyles = makeStyles(theme => ({
-  validationOk: {
-    color: theme.palette.success.main,
-  },
-  validationNotOk: {
-    color: theme.palette.error.main,
-  },
-  errorContainer: {
-    color: theme.palette.error.main,
-    background: theme.palette.background.paper,
-    padding: theme.spacing(2),
-  },
-}));
+import styles from './EntityResult.module.css';
 
 type EntityResultProps = {
   isFirstError?: boolean;
@@ -55,13 +34,12 @@ export const EntityResult = ({
   isFirstError = false,
   item,
 }: EntityResultProps) => {
-  const classes = useStyles();
   const app = useApp();
   const [expanded, setExpanded] = useState(isFirstError);
 
-  const Icon = app.getSystemIcon(
-    `kind:${safeEntityKind(item.entity)}`,
-  ) as typeof SvgIcon;
+  const Icon = app.getSystemIcon(`kind:${safeEntityKind(item.entity)}`) as
+    | ComponentType<{ className?: string }>
+    | undefined;
 
   const fetchErrorMessages = (response: ValidateEntityResponse) => {
     if (!response.valid) {
@@ -72,36 +50,50 @@ export const EntityResult = ({
 
   return (
     <>
-      <ListItem>
-        <ListItemIcon>
+      <li className={styles.listItem}>
+        <div className={styles.listItemIcon}>
           {Icon && (
             <Icon
               className={
                 item.response.valid
-                  ? classes.validationOk
-                  : classes.validationNotOk
+                  ? styles.validationOk
+                  : styles.validationNotOk
               }
             />
           )}
-        </ListItemIcon>
-        <ListItemText
-          primary={<EntityDisplayName entityRef={item.entity} />}
+        </div>
+        <div
+          className={styles.listItemText}
+          role="button"
+          tabIndex={0}
           onClick={() => setExpanded(!expanded)}
-        />
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') setExpanded(!expanded);
+          }}
+        >
+          <EntityDisplayName entityRef={item.entity} />
+        </div>
         {!item.response.valid && (
-          <ListItemSecondaryAction>
-            <IconButton edge="end" onClick={() => setExpanded(!expanded)}>
-              {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-            </IconButton>
-          </ListItemSecondaryAction>
+          <div className={styles.listItemAction}>
+            <ButtonIcon
+              aria-label={expanded ? 'collapse' : 'expand'}
+              onPress={() => setExpanded(!expanded)}
+              icon={
+                expanded ? (
+                  <RiArrowUpSLine size={20} />
+                ) : (
+                  <RiArrowDownSLine size={20} />
+                )
+              }
+              variant="secondary"
+            />
+          </div>
         )}
-      </ListItem>
-      {!item.response.valid && (
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
-          <Paper className={classes.errorContainer}>
-            <MarkdownContent content={fetchErrorMessages(item.response)} />
-          </Paper>
-        </Collapse>
+      </li>
+      {!item.response.valid && expanded && (
+        <div className={styles.errorContainer}>
+          <MarkdownContent content={fetchErrorMessages(item.response)} />
+        </div>
       )}
     </>
   );

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2026 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.
+ */
+
+@layer components {
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .emptyState {
+    padding: var(--bui-space-4);
+  }
+
+  .summary {
+    margin-top: 25px;
+    text-align: center;
+  }
+
+  .validationOk {
+    color: var(--bui-fg-success, #1a7f5a);
+  }
+
+  .validationNotOk {
+    color: var(--bui-fg-danger);
+  }
+}