Check for dependencies conflict before deleting a device

central_frontend/src/widgets/SolarEnergyNavList.tsx

@@ -1,10 +1,9 @@
-import { mdiChip, mdiHome, mdiNewBox } from "@mdi/js";
+import { mdiChip, mdiElectricSwitch, mdiHome, mdiNewBox } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
 } from "@mui/material";
 import { useLocation } from "react-router-dom";
@@ -31,25 +30,29 @@ export function SolarEnergyNavList(): React.ReactElement {
         uri="/pending_devices"
         icon={<Icon path={mdiNewBox} size={1} />}
       />
+      <NavLink
+        label="Relays"
+        uri="/relays"
+        icon={<Icon path={mdiElectricSwitch} size={1} />}
+      />
     </List>
   );
 }
 
-function NavLink(p: {
-  icon: React.ReactElement;
-  uri: string;
-  label: string;
-  secondaryAction?: React.ReactElement;
-}): React.ReactElement {
+function NavLink(
+  p: Readonly<{
+    icon: React.ReactElement;
+    uri: string;
+    label: string;
+    secondaryAction?: React.ReactElement;
+  }>
+): React.ReactElement {
   const location = useLocation();
   return (
     <RouterLink to={p.uri}>
       <ListItemButton selected={p.uri === location.pathname}>
         <ListItemIcon>{p.icon}</ListItemIcon>
         <ListItemText primary={p.label} />
-        {p.secondaryAction && (
-          <ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
-        )}
       </ListItemButton>
     </RouterLink>
   );