Migrate SUIR components to MUI.

ICTU · Dec 27, 2024 · 2859528 · 2859528
1 parent 1d3797b
commit 2859528
Show file tree

Hide file tree

Showing 42 changed files with 456 additions and 475 deletions.
diff --git a/components/frontend/src/App.js b/components/frontend/src/App.js
@@ -1,5 +1,6 @@
 import "./App.css"
 
+import { grey, orange } from "@mui/material/colors"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import { Action } from "history"
 import history from "history/browser"
@@ -14,11 +15,34 @@ import { registeredURLSearchParams } from "./hooks/url_search_query"
 import { isValidDate_YYYYMMDD, toISODateStringInCurrentTZ } from "./utils"
 import { showConnectionMessage, showMessage } from "./widgets/toast"
 
-const theme = createTheme({
+let theme = createTheme({
     colorSchemes: {
         dark: true, // Add a dark theme (light theme is available by default)
     },
-    components: { MuiTooltip: { defaultProps: { arrow: true }, styleOverrides: { tooltip: { fontSize: "1em" } } } },
+    components: {
+        MuiTooltip: {
+            defaultProps: { arrow: true },
+            styleOverrides: { tooltip: { fontSize: "1em" } },
+        },
+    },
+})
+
+theme = createTheme(theme, {
+    palette: {
+        todo: theme.palette.augmentColor({ color: { main: grey[600] }, name: "todo" }),
+        doing: theme.palette.augmentColor({ color: { main: theme.palette.info.main }, name: "doing" }),
+        done: theme.palette.augmentColor({ color: { main: theme.palette.success.main }, name: "done" }),
+        target_not_met: theme.palette.augmentColor({
+            color: { main: theme.palette.error.main },
+            name: "target_not_met",
+        }),
+        target_met: theme.palette.augmentColor({ color: { main: theme.palette.success.main }, name: "target_met" }),
+        near_target_met: theme.palette.augmentColor({ color: { main: orange[300] }, name: "near_target_met" }),
+        debt_target_met: theme.palette.augmentColor({ color: { main: grey[500] }, name: "debt_target_met" }),
+        informative: theme.palette.augmentColor({ color: { main: theme.palette.info.main }, name: "informative" }),
+        unknown: theme.palette.augmentColor({ color: { main: grey[300] }, name: "unknown" }),
+        total: theme.palette.augmentColor({ color: { main: grey[800] }, name: "total" }),
+    },
 })
 
 class App extends Component {

diff --git a/components/frontend/src/dashboard/FilterCardWithTable.js b/components/frontend/src/dashboard/FilterCardWithTable.js
@@ -1,14 +1,14 @@
+import { Table, TableBody } from "@mui/material"
 import { bool, func, string } from "prop-types"
 
-import { Table } from "../semantic_ui_react_wrappers"
 import { childrenPropType } from "../sharedPropTypes"
 import { DashboardCard } from "./DashboardCard"
 
 export function FilterCardWithTable({ children, onClick, selected, title }) {
     return (
         <DashboardCard onClick={onClick} selected={selected} title={title} titleFirst={true}>
-            <Table basic="very" compact="very" size="small">
-                <Table.Body>{children}</Table.Body>
+            <Table size="small">
+                <TableBody>{children}</TableBody>
             </Table>
         </DashboardCard>
     )

diff --git a/components/frontend/src/dashboard/IssuesCard.js b/components/frontend/src/dashboard/IssuesCard.js
@@ -1,9 +1,8 @@
-import { Chip } from "@mui/material"
+import { Chip, TableCell, TableRow } from "@mui/material"
 import { bool, func } from "prop-types"
 
-import { Table } from "../semantic_ui_react_wrappers"
 import { reportPropType } from "../sharedPropTypes"
-import { capitalize, ISSUE_STATUS_THEME_COLORS } from "../utils"
+import { capitalize } from "../utils"
 import { FilterCardWithTable } from "./FilterCardWithTable"
 
 function issueStatuses(report) {
@@ -33,18 +32,12 @@ issueStatuses.propTypes = {
 function tableRows(report) {
     const statuses = issueStatuses(report)
     return Object.keys(statuses).map((status) => (
-        <Table.Row key={status}>
-            <Table.Cell>{capitalize(status)}</Table.Cell>
-            <Table.Cell textAlign="right">
-                <Chip
-                    color={ISSUE_STATUS_THEME_COLORS[status]}
-                    label={`${statuses[status]}`}
-                    size="small"
-                    sx={{ borderRadius: 1 }}
-                    variant={ISSUE_STATUS_THEME_COLORS[status] ? "" : "outlined"}
-                />
-            </Table.Cell>
-        </Table.Row>
+        <TableRow key={status}>
+            <TableCell sx={{ paddingLeft: "0px" }}>{capitalize(status)}</TableCell>
+            <TableCell sx={{ paddingRight: "0px", textAlign: "right" }}>
+                <Chip color={status} label={`${statuses[status]}`} size="small" sx={{ borderRadius: 1 }} />
+            </TableCell>
+        </TableRow>
     ))
 }
 tableRows.propTypes = {

diff --git a/components/frontend/src/dashboard/LegendCard.js b/components/frontend/src/dashboard/LegendCard.js
@@ -9,7 +9,7 @@ export function LegendCard() {
         <ListItem key={status} dense={true} sx={{ padding: "0px" }}>
             <StatusIcon status={status} size="small" />
             &nbsp;
-            <ListItemText primary={STATUS_SHORT_NAME[status]} primaryTypographyProps={{ noWrap: true }} />
+            <ListItemText primary={STATUS_SHORT_NAME[status]} slotProps={{ typography: { noWrap: true } }} />
         </ListItem>
     ))
 

diff --git a/components/frontend/src/dashboard/MetricsRequiringActionCard.js b/components/frontend/src/dashboard/MetricsRequiringActionCard.js
@@ -1,7 +1,7 @@
+import { Chip, TableCell, TableRow } from "@mui/material"
 import { bool, func } from "prop-types"
 
-import { STATUS_COLORS, STATUS_NAME, STATUSES_REQUIRING_ACTION } from "../metric/status"
-import { Label, Table } from "../semantic_ui_react_wrappers"
+import { STATUS_NAME, STATUSES_REQUIRING_ACTION } from "../metric/status"
 import { reportsPropType } from "../sharedPropTypes"
 import { getMetricStatus, sum } from "../utils"
 import { FilterCardWithTable } from "./FilterCardWithTable"
@@ -30,26 +30,22 @@ metricStatuses.propTypes = {
 function tableRows(reports) {
     const statuses = metricStatuses(reports)
     const rows = Object.keys(statuses).map((status) => (
-        <Table.Row key={status}>
-            <Table.Cell>{STATUS_NAME[status]}</Table.Cell>
-            <Table.Cell textAlign="right">
-                <Label size="small" color={STATUS_COLORS[status] === "white" ? null : STATUS_COLORS[status]}>
-                    {statuses[status]}
-                </Label>
-            </Table.Cell>
-        </Table.Row>
+        <TableRow key={status}>
+            <TableCell sx={{ paddingLeft: "0px" }}>{STATUS_NAME[status]}</TableCell>
+            <TableCell sx={{ paddingRight: "0px", textAlign: "right" }}>
+                <Chip color={status} label={statuses[status]} size="small" sx={{ borderRadius: 1 }} />
+            </TableCell>
+        </TableRow>
     ))
     rows.push(
-        <Table.Row key="total">
-            <Table.Cell>
+        <TableRow key="total">
+            <TableCell sx={{ paddingLeft: "0px" }}>
                 <b>Total</b>
-            </Table.Cell>
-            <Table.Cell textAlign="right">
-                <Label size="small" color="black">
-                    {sum(Object.values(statuses))}
-                </Label>
-            </Table.Cell>
-        </Table.Row>,
+            </TableCell>
+            <TableCell sx={{ paddingRight: "0px", textAlign: "right" }}>
+                <Chip color="total" label={sum(Object.values(statuses))} size="small" sx={{ borderRadius: 1 }} />
+            </TableCell>
+        </TableRow>,
     )
     return rows
 }

diff --git a/components/frontend/src/errorMessage.js b/components/frontend/src/errorMessage.js
@@ -1,20 +1,19 @@
 import { bool, object, oneOfType, string } from "prop-types"
 import { Grid } from "semantic-ui-react"
 
-import { Message } from "./semantic_ui_react_wrappers"
+import { WarningMessage } from "./widgets/WarningMessage"
 
 export function ErrorMessage({ formatAsText, message, title }) {
     return (
         <Grid.Row>
             <Grid.Column>
-                <Message negative>
-                    <Message.Header>{title}</Message.Header>
+                <WarningMessage title={title}>
                     {formatAsText ? (
                         message
                     ) : (
                         <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}>{message}</pre>
                     )}
-                </Message>
+                </WarningMessage>
             </Grid.Column>
         </Grid.Row>
     )