Migrate frontend components to MUI.

- StatusIcon. Partially implements #9796.
ICTU · Sep 27, 2024 · 9bdc6da · 9bdc6da
1 parent 894de08
commit 9bdc6da
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 65 deletions.
diff --git a/components/frontend/src/App.js b/components/frontend/src/App.js
@@ -19,6 +19,7 @@ const theme = createTheme({
     colorSchemes: {
         dark: true, // Add a dark theme (light theme is available by default)
     },
+    components: { MuiTooltip: { defaultProps: { arrow: true }, styleOverrides: { tooltip: { fontSize: "1em" } } } },
 })
 
 class App extends Component {

diff --git a/components/frontend/src/measurement/StatusIcon.css b/components/frontend/src/measurement/StatusIcon.css
diff --git a/components/frontend/src/measurement/StatusIcon.js b/components/frontend/src/measurement/StatusIcon.js
@@ -1,34 +1,28 @@
-import "./StatusIcon.css"
-
+import { Avatar, Tooltip } from "@mui/material"
 import { instanceOf, oneOfType, string } from "prop-types"
-import { Icon } from "semantic-ui-react"
 
-import { STATUS_SHORT_NAME, statusPropType } from "../metric/status"
-import { Popup } from "../semantic_ui_react_wrappers"
+import { STATUS_COLORS_MUI, STATUS_ICONS, STATUS_SHORT_NAME, statusPropType } from "../metric/status"
 import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"
 
-export function StatusIcon({ status, status_start, size }) {
+export function StatusIcon({ status, statusStart, size }) {
     status = status || "unknown"
-    const icon_name = {
-        target_met: "check",
-        near_target_met: "warning",
-        debt_target_met: "money",
-        target_not_met: "bolt",
-        informative: "info",
-        unknown: "question",
-    }[status]
+    const sizes = { small: 20, undefined: 32 }
     const statusName = STATUS_SHORT_NAME[status]
-    const icon = <Icon aria-label={statusName} className={status} inverted circular name={icon_name} size={size} />
-    return status_start ? (
-        <Popup trigger={icon} flowing hoverable>
-            <TimeAgoWithDate date={status_start}>{`${statusName} since`}</TimeAgoWithDate>
-        </Popup>
-    ) : (
-        icon
+    // Use Avatar to create a round inverted icon:
+    const iconStyle = { width: sizes[size], height: sizes[size], bgcolor: STATUS_COLORS_MUI[status] }
+    const icon = (
+        <Avatar aria-label={statusName} sx={iconStyle}>
+            {STATUS_ICONS[status]}
+        </Avatar>
     )
+    if (statusStart) {
+        const tooltipTitle = <TimeAgoWithDate date={statusStart}>{`${statusName} since`}</TimeAgoWithDate>
+        return <Tooltip title={tooltipTitle}>{icon}</Tooltip>
+    }
+    return icon
 }
 StatusIcon.propTypes = {
     status: statusPropType,
-    status_start: oneOfType([string, instanceOf(Date)]),
+    statusStart: oneOfType([string, instanceOf(Date)]),
     size: string,
 }
diff --git a/components/frontend/src/measurement/StatusIcon.test.js b/components/frontend/src/measurement/StatusIcon.test.js
@@ -21,7 +21,7 @@ it("renders a question mark if the status is missing", () => {
 it("renders a popup with the date the status started", async () => {
     let startDate = new Date()
     startDate.setDate(startDate.getDate() - 4)
-    const { queryByLabelText, queryByText } = render(<StatusIcon status="target_met" status_start={startDate} />)
+    const { queryByLabelText, queryByText } = render(<StatusIcon status="target_met" statusStart={startDate} />)
     await userEvent.hover(queryByLabelText(/Target met/))
     await waitFor(() => {
         expect(queryByText("4 days ago")).not.toBe(null)

diff --git a/components/frontend/src/metric/Target.js b/components/frontend/src/metric/Target.js
@@ -1,15 +1,15 @@
+import { Box, Stack, Typography } from "@mui/material"
 import { bool, func, oneOf, string } from "prop-types"
 import { useContext } from "react"
 import { Segment } from "semantic-ui-react"
 
 import { set_metric_attribute } from "../api/metric"
-import { DarkMode } from "../context/DarkMode"
 import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
 import { IntegerInput } from "../fields/IntegerInput"
 import { StringInput } from "../fields/StringInput"
 import { StatusIcon } from "../measurement/StatusIcon"
-import { Header, Icon, Popup } from "../semantic_ui_react_wrappers"
+import { Icon, Popup } from "../semantic_ui_react_wrappers"
 import { childrenPropType, labelPropType, metricPropType, scalePropType } from "../sharedPropTypes"
 import {
     capitalize,
@@ -18,7 +18,7 @@ import {
     formatMetricValue,
     getMetricScale,
 } from "../utils"
-import { STATUS_SHORT_NAME, statusPropType } from "./status"
+import { STATUS_COLORS_MUI, STATUS_SHORT_NAME, statusPropType } from "./status"
 
 function smallerThan(target1, target2) {
     const t1 = target1 ?? `${Number.POSITIVE_INFINITY}`
@@ -48,22 +48,20 @@ function debtTargetActive(metric, direction) {
 }
 
 function ColoredSegment({ children, color, show, status }) {
-    const darkMode = useContext(DarkMode)
     if (show === false) {
         return null
     }
     return (
-        <Segment inverted color={color}>
-            <Segment inverted={darkMode}>
-                <Header>
-                    <span>
-                        {STATUS_SHORT_NAME[status]} <StatusIcon status={status} size="tiny" />
-                    </span>
-                    <Header.Subheader>{capitalize(color)}</Header.Subheader>
-                </Header>
-                <b>{children}</b>
-            </Segment>
-        </Segment>
+        <Box sx={{ padding: "10px", border: `12px solid ${STATUS_COLORS_MUI[status]}` }}>
+            <Typography variant="h6">
+                <Stack direction="row">
+                    {STATUS_SHORT_NAME[status]}&nbsp;
+                    <StatusIcon status={status} size="small" />
+                </Stack>
+            </Typography>
+            <Typography variant="subtitle2">{capitalize(color)}</Typography>
+            <b>{children}</b>
+        </Box>
     )
 }
 ColoredSegment.propTypes = {

diff --git a/components/frontend/src/metric/status.js b/components/frontend/src/metric/status.js
@@ -1,5 +1,7 @@
 // Metric status constants
 
+import { Bolt, Check, Money, QuestionMark, Warning } from "@mui/icons-material"
+import { blue, green, grey, orange, red } from "@mui/material/colors"
 import { oneOf } from "prop-types"
 
 import { HyperLink } from "../widgets/HyperLink"
@@ -23,6 +25,22 @@ export const STATUS_COLORS_RGB = {
     informative: "rgb(0,165,255)",
     unknown: "rgb(245,245,245)",
 }
+export const STATUS_COLORS_MUI = {
+    target_not_met: red[700],
+    target_met: green[600],
+    near_target_met: orange[300],
+    debt_target_met: grey[500],
+    informative: blue[500],
+    unknown: grey[300],
+}
+export const STATUS_ICONS = {
+    target_met: <Check />,
+    near_target_met: <Warning />,
+    debt_target_met: <Money />,
+    target_not_met: <Bolt />,
+    informative: <b>i</b>,
+    unknown: <QuestionMark />,
+}
 export const STATUS_NAME = {
     informative: "Informative",
     target_met: "Target met",

diff --git a/components/frontend/src/subject/SubjectTableRow.js b/components/frontend/src/subject/SubjectTableRow.js
@@ -301,7 +301,7 @@ export function SubjectTableRow({
             )}
             {nrDates === 1 && settings.hiddenColumns.excludes("status") && (
                 <Table.Cell textAlign="center">
-                    <StatusIcon status={metric.status} status_start={metric.status_start} />
+                    <StatusIcon status={metric.status} statusStart={metric.status_start} />
                 </Table.Cell>
             )}
             {nrDates === 1 && settings.hiddenColumns.excludes("measurement") && (