Migrate SUIR components to MUI.

ICTU · Dec 29, 2024 · 326a878 · 326a878
1 parent 1d3797b
commit 326a878
Show file tree

Hide file tree

Showing 74 changed files with 1,160 additions and 1,387 deletions.
diff --git a/components/frontend/src/App.css b/components/frontend/src/App.css
@@ -1,21 +1,3 @@
-.MainContainer {
-    flex: 1;
-    margin-top: 6em;
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-@media print {
-    .MainContainer {
-        margin-top: 0em;
-    }
-}
-
 html {
     scroll-padding-top: 163px; /* height of sticky header */
 }
-
-:root {
-    --inverted-menu-background-color: #1b1c1d;
-    --selection-color: #2185d0;
-}
diff --git a/components/frontend/src/App.js b/components/frontend/src/App.js
@@ -1,6 +1,7 @@
 import "./App.css"
 
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { grey, orange } from "@mui/material/colors"
+import { createTheme, responsiveFontSizes, ThemeProvider } from "@mui/material/styles"
 import { Action } from "history"
 import history from "history/browser"
 import { Component } from "react"
@@ -14,13 +15,49 @@ 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" }),
+    },
+    typography: {
+        h1: {
+            fontSize: theme.typography.h4.fontSize,
+        },
+        h2: {
+            fontSize: theme.typography.h5.fontSize,
+        },
+        h3: {
+            fontSize: theme.typography.h6.fontSize,
+        },
+    },
 })
 
+theme = responsiveFontSizes(theme)
+
 class App extends Component {
     constructor(props) {
         super(props)

diff --git a/components/frontend/src/AppUI.js b/components/frontend/src/AppUI.js
@@ -66,65 +66,55 @@ export function AppUI({
     }
 
     const darkMode = userPrefersDarkMode(mode)
-    const backgroundColor = darkMode ? "rgb(40, 40, 40)" : "white"
     return (
-        <div
-            style={{
-                display: "flex",
-                minHeight: "100vh",
-                flexDirection: "column",
-                backgroundColor: backgroundColor,
-            }}
-        >
-            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale_en_gb}>
-                <DarkMode.Provider value={darkMode}>
-                    <HashLinkObserver />
-                    <Menubar
-                        email={email}
-                        handleDateChange={handleDateChange}
-                        openReportsOverview={openReportsOverview}
-                        onDate={handleDateChange}
-                        report_date={report_date}
-                        report_uuid={report_uuid}
-                        set_user={set_user}
-                        user={user}
-                        panel={
-                            <SettingsPanel
-                                atReportsOverview={atReportsOverview}
-                                handleSort={handleSort}
-                                settings={settings}
-                                tags={getReportsTags(reports)}
-                            />
-                        }
-                        settings={settings}
-                        setUIMode={setMode}
-                        uiMode={mode}
-                    />
-                    <ToastContainer theme="colored" />
-                    <Permissions.Provider value={user_permissions}>
-                        <DataModel.Provider value={dataModel}>
-                            <PageContent
-                                changed_fields={changed_fields}
-                                current_report={current_report}
-                                handleSort={handleSort}
-                                lastUpdate={lastUpdate}
-                                loading={loading}
-                                nrMeasurements={nrMeasurements}
-                                openReportsOverview={openReportsOverview}
-                                openReport={openReport}
-                                reload={reload}
-                                report_date={report_date}
-                                report_uuid={report_uuid}
-                                reports={reports}
-                                reports_overview={reports_overview}
-                                settings={settings}
-                            />
-                        </DataModel.Provider>
-                    </Permissions.Provider>
-                    <Footer lastUpdate={lastUpdate} report={current_report} />
-                </DarkMode.Provider>
-            </LocalizationProvider>
-        </div>
+        <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale_en_gb}>
+            <DarkMode.Provider value={darkMode}>
+                <HashLinkObserver />
+                <Menubar
+                    email={email}
+                    handleDateChange={handleDateChange}
+                    openReportsOverview={openReportsOverview}
+                    onDate={handleDateChange}
+                    report_date={report_date}
+                    report_uuid={report_uuid}
+                    set_user={set_user}
+                    user={user}
+                    panel={
+                        <SettingsPanel
+                            atReportsOverview={atReportsOverview}
+                            handleSort={handleSort}
+                            settings={settings}
+                            tags={getReportsTags(reports)}
+                        />
+                    }
+                    settings={settings}
+                    setUIMode={setMode}
+                    uiMode={mode}
+                />
+                <ToastContainer theme="colored" />
+                <Permissions.Provider value={user_permissions}>
+                    <DataModel.Provider value={dataModel}>
+                        <PageContent
+                            changed_fields={changed_fields}
+                            current_report={current_report}
+                            handleSort={handleSort}
+                            lastUpdate={lastUpdate}
+                            loading={loading}
+                            nrMeasurements={nrMeasurements}
+                            openReportsOverview={openReportsOverview}
+                            openReport={openReport}
+                            reload={reload}
+                            report_date={report_date}
+                            report_uuid={report_uuid}
+                            reports={reports}
+                            reports_overview={reports_overview}
+                            settings={settings}
+                        />
+                    </DataModel.Provider>
+                </Permissions.Provider>
+                <Footer lastUpdate={lastUpdate} report={current_report} />
+            </DarkMode.Provider>
+        </LocalizationProvider>
     )
 }
 AppUI.propTypes = {

diff --git a/components/frontend/src/PageContent.js b/components/frontend/src/PageContent.js
@@ -1,11 +1,11 @@
+import { Box, Container } from "@mui/material"
+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 { 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 +72,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",
+                    width: "100%",
+                    height: "60vh",
+                    justifyContent: "center",
+                }}
+            >
+                <CircularProgress aria-label="Loading..." size="6rem" />
+            </Box>
         )
     } else {
         const commonProps = {
@@ -108,7 +116,19 @@ export function PageContent({
         }
     }
     return (
-        <Container fluid className="MainContainer">
+        <Container
+            maxWidth={false}
+            sx={{
+                bgcolor: "background.default",
+                flex: 1,
+                paddingBottom: "50px",
+                paddingTop: "10px",
+                marginTop: "60px",
+                marginBottom: "0em",
+                marginLeft: "0em",
+                marginRight: "0em",
+            }}
+        >
             {content}
         </Container>
     )

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