Migrate SUIR components to MUI.

ICTU · Dec 29, 2024 · 7e35cc3 · 7e35cc3
1 parent 1d3797b
commit 7e35cc3
Show file tree

Hide file tree

Showing 67 changed files with 1,077 additions and 1,265 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/PageContent.js b/components/frontend/src/PageContent.js
@@ -1,11 +1,12 @@
+import Box from "@mui/material/Box"
+import CircularProgress from "@mui/material/CircularProgress"
 import { bool, func, number, string } from "prop-types"
 import { useEffect, useState } from "react"
-import { Container, Loader } from "semantic-ui-react"
+import { Container } from "semantic-ui-react"
 
 import { get_measurements } from "./api/measurement"
 import { Report } from "./report/Report"
 import { ReportsOverview } from "./report/ReportsOverview"
-import { Segment } from "./semantic_ui_react_wrappers"
 import {
     datePropType,
     optionalDatePropType,
@@ -72,9 +73,17 @@ export function PageContent({
     let content
     if (loading) {
         content = (
-            <Segment basic placeholder aria-label="Loading...">
-                <Loader active size="massive" />
-            </Segment>
+            <Box
+                sx={{
+                    alignItems: "center",
+                    display: "flex",
+                    minHeight: "50vh",
+                    width: "100%",
+                    justifyContent: "center",
+                }}
+            >
+                <CircularProgress aria-label="Loading..." size="6rem" />
+            </Box>
         )
     } else {
         const commonProps = {

diff --git a/components/frontend/src/PageContent.test.js b/components/frontend/src/PageContent.test.js
@@ -63,7 +63,7 @@ it("shows that the report was missing", async () => {
 
 it("shows the loading spinner", async () => {
     await renderPageContent({ loading: true })
-    expect(screen.getAllByLabelText(/Loading/).length).toBe(1)
+    expect(screen.getAllByRole("progressbar").length).toBe(1)
 })
 
 function expectMeasurementsCall(date, offset = 0) {

diff --git a/components/frontend/src/dashboard/ExportCard.css b/components/frontend/src/dashboard/ExportCard.css
diff --git a/components/frontend/src/dashboard/ExportCard.js b/components/frontend/src/dashboard/ExportCard.js
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/dashboard/PageHeader.js b/components/frontend/src/dashboard/PageHeader.js
@@ -0,0 +1,43 @@
+import { Stack, Typography } from "@mui/material"
+
+import { datePropType, reportPropType } from "../sharedPropTypes"
+import { HyperLink } from "../widgets/HyperLink"
+
+export function PageHeader({ lastUpdate, report, reportDate }) {
+    const reportURL = new URLSearchParams(window.location.search).get("report_url") ?? window.location.href
+    const title = report?.title ?? "Reports overview"
+    const changelogURL = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/changelog.html`
+    return (
+        <Stack
+            direction="row"
+            spacing={2}
+            sx={{ display: "none", displayPrint: "inline-flex", justifyContent: "space-between", width: "100%" }}
+        >
+            <Typography key={"reportURL"} data-testid={"reportUrl"}>
+                <HyperLink url={reportURL}>{title}</HyperLink>
+            </Typography>
+            <Typography key={"date"}>{"Report date: " + formatDate(reportDate ?? new Date())}</Typography>
+            <Typography key={"generated"}>
+                {"Generated: " + formatDate(lastUpdate) + ", " + formatTime(lastUpdate)}
+            </Typography>
+            <Typography key={"version"} data-testid={"version"}>
+                <HyperLink url={changelogURL}>Quality-time v{process.env.REACT_APP_VERSION}</HyperLink>
+            </Typography>
+        </Stack>
+    )
+}
+PageHeader.propTypes = {
+    lastUpdate: datePropType,
+    report: reportPropType,
+    reportDate: datePropType,
+}
+
+// Hard code en-GB to get European style dates and times. See https://github.com/ICTU/quality-time/issues/8381.
+
+function formatDate(date) {
+    return date.toLocaleDateString("en-GB", { year: "numeric", month: "2-digit", day: "2-digit" }).replace(/\//g, "-")
+}
+
+function formatTime(date) {
+    return date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })
+}