Migrate SUIR components to MUI.

ICTU · Dec 23, 2024 · a4cd919 · a4cd919
1 parent 76de9b2
commit a4cd919
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 55 deletions.
diff --git a/components/frontend/src/semantic_ui_react_wrappers.js b/components/frontend/src/semantic_ui_react_wrappers.js
@@ -7,7 +7,6 @@ export { Form } from "./semantic_ui_react_wrappers/Form"
 export { Header } from "./semantic_ui_react_wrappers/Header"
 export { Label } from "./semantic_ui_react_wrappers/Label"
 export { Message } from "./semantic_ui_react_wrappers/Message"
-export { Modal } from "./semantic_ui_react_wrappers/Modal"
 export { Popup } from "./semantic_ui_react_wrappers/Popup"
 export { Segment } from "./semantic_ui_react_wrappers/Segment"
 export { Tab } from "./semantic_ui_react_wrappers/Tab"

diff --git a/components/frontend/src/semantic_ui_react_wrappers/Modal.css b/components/frontend/src/semantic_ui_react_wrappers/Modal.css
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Modal.js b/components/frontend/src/semantic_ui_react_wrappers/Modal.js
diff --git a/components/frontend/src/widgets/ItemBreadcrumb.js b/components/frontend/src/widgets/ItemBreadcrumb.js
@@ -1,36 +1,20 @@
+import NavigateNextIcon from "@mui/icons-material/NavigateNext"
+import { Breadcrumbs } from "@mui/material"
 import { string } from "prop-types"
 
-import { Breadcrumb } from "../semantic_ui_react_wrappers"
-
 export function ItemBreadcrumb(props) {
     return (
-        <Breadcrumb size={props.size || "small"}>
-            <Breadcrumb.Section>{props.report}</Breadcrumb.Section>
-            {props.subject && (
-                <>
-                    <Breadcrumb.Divider icon="right chevron" />
-                    <Breadcrumb.Section>{props.subject}</Breadcrumb.Section>
-                    {props.metric && (
-                        <>
-                            <Breadcrumb.Divider icon="right chevron" />
-                            <Breadcrumb.Section>{props.metric}</Breadcrumb.Section>
-                            {props.source && (
-                                <>
-                                    <Breadcrumb.Divider icon="right chevron" />
-                                    <Breadcrumb.Section>{props.source}</Breadcrumb.Section>
-                                </>
-                            )}
-                        </>
-                    )}
-                </>
-            )}
-        </Breadcrumb>
+        <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
+            <span>{props.report}</span>
+            {props.subject && <span>{props.subject}</span>}
+            {props.metric && <span>{props.metric}</span>}
+            {props.source && <span>{props.source}</span>}
+        </Breadcrumbs>
     )
 }
 ItemBreadcrumb.propTypes = {
     metric: string,
     report: string,
-    size: string,
     source: string,
     subject: string,
 }
diff --git a/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js b/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
@@ -46,7 +46,7 @@ export function ActionAndItemPickerButton({ action, itemType, onChange, get_opti
             >
                 <MenuItem disabled divider>
                     <Typography variant="button">
-                        <ItemBreadcrumb size="tiny" {...breadcrumbProps} />
+                        <ItemBreadcrumb {...breadcrumbProps} />
                     </Typography>
                 </MenuItem>
                 {get_options().map((option) => (