Migrate SUIR components to MUI.

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 {

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>
     )

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 = {

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>
     ))
 

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
 }

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" })
+}

components/frontend/src/dashboard/ExportCard.test.js → components/frontend/src/dashboard/PageHeader.test.js

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react"
 
-import { ExportCard } from "./ExportCard"
 import { mockGetAnimations } from "./MockAnimations"
+import { PageHeader } from "./PageHeader"
 
 beforeEach(() => mockGetAnimations())
 
@@ -15,6 +15,7 @@ const mockDateOfToday = new Date()
 
 const report = {
     report_uuid: "report_uuid",
+    title: "Title",
     subjects: {
         subject_uuid: {
             type: "subject_type",
@@ -32,37 +33,38 @@ const report = {
     },
 }
 
-function renderExportCard({ isOverview = false, lastUpdate = new Date(), report = null, reportDate = null } = {}) {
-    render(<ExportCard isOverview={isOverview} lastUpdate={lastUpdate} report={report} reportDate={reportDate} />)
+function renderPageHeader({ lastUpdate = new Date(), report = null, reportDate = null } = {}) {
+    render(<PageHeader lastUpdate={lastUpdate} report={report} reportDate={reportDate} />)
 }
 
-it("displays correct title for an overview report", () => {
-    renderExportCard({ isOverview: true, report: report })
-    expect(screen.getByText(/About these reports/)).toBeInTheDocument()
+it("displays correct title for the reports overview", () => {
+    renderPageHeader({})
+    expect(screen.getByText(/Reports overview/)).toBeInTheDocument()
 })
 
-it("displays correct title for a detailed report", () => {
-    renderExportCard({ report: report })
-    expect(screen.getByText(/About this report/)).toBeInTheDocument()
+it("displays correct title for a report", () => {
+    window.location.search = "?report_url=https://report/"
+    renderPageHeader({ report: report })
+    expect(screen.getByText(/Title/)).toBeInTheDocument()
 })
 
 it("displays dates in en-GB format", () => {
-    renderExportCard({ lastUpdate: mockLastUpdate, report: report, reportDate: mockReportDate })
+    renderPageHeader({ lastUpdate: mockLastUpdate, report: report, reportDate: mockReportDate })
     expect(screen.getByText(/Report date: 24-03-2024/)).toBeInTheDocument()
     expect(screen.getByText(/Generated: 26-03-2024, 12:34/)).toBeInTheDocument()
 })
 
 it("displays report URL", () => {
-    renderExportCard({ report: report })
+    renderPageHeader({ report: report })
     expect(screen.getByTestId("reportUrl")).toBeInTheDocument()
 })
 
 it("displays version link", () => {
-    renderExportCard({ lastUpdate: mockLastUpdate, report: report })
+    renderPageHeader({ lastUpdate: mockLastUpdate, report: report })
     expect(screen.getByTestId("version")).toBeInTheDocument()
 })
 
 it("displays today as report date if no report date is provided", () => {
-    renderExportCard({ lastUpdate: mockLastUpdate, report: report })
+    renderPageHeader({ lastUpdate: mockLastUpdate, report: report })
     expect(screen.getByText(`Report date: ${mockDateOfToday}`)).toBeInTheDocument()
 })