Migrate SUIR components to MUI.

ICTU · Jan 7, 2025 · 3d470d5 · 3d470d5
1 parent 4a80a85
commit 3d470d5
Show file tree

Hide file tree

Showing 140 changed files with 2,706 additions and 3,300 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;
+    scroll-padding-top: 176px; /* height of sticky header */
 }
diff --git a/components/frontend/src/App.js b/components/frontend/src/App.js
@@ -1,6 +1,6 @@
 import "./App.css"
 
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { ThemeProvider } from "@mui/material/styles"
 import { Action } from "history"
 import history from "history/browser"
 import { Component } from "react"
@@ -11,16 +11,10 @@ import { nr_measurements_api } from "./api/measurement"
 import { get_report, get_reports_overview } from "./api/report"
 import { AppUI } from "./AppUI"
 import { registeredURLSearchParams } from "./hooks/url_search_query"
+import { theme } from "./theme"
 import { isValidDate_YYYYMMDD, toISODateStringInCurrentTZ } from "./utils"
 import { showConnectionMessage, showMessage } from "./widgets/toast"
 
-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 {
     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/app_ui_settings.js b/components/frontend/src/app_ui_settings.js
@@ -1,12 +1,9 @@
-import { string } from "prop-types"
-
 import {
     useArrayURLSearchQuery,
     useBooleanURLSearchQuery,
     useIntegerURLSearchQuery,
     useStringURLSearchQuery,
 } from "./hooks/url_search_query"
-import { stringsURLSearchQueryPropType } from "./sharedPropTypes"
 
 function urlSearchQueryKey(key, report_uuid) {
     // Make the settings changeable per report (and separately for the reports overview) by adding the report UUID as
@@ -147,26 +144,3 @@ export function allSettingsAreDefault(settings) {
         settings.sortDirection.isDefault()
     )
 }
-
-export function tabChangeHandler(expandedItems, uuid) {
-    // Return an event handler for Tab.onTabChange that updates the active tab
-    return function onTabChange(_event, data) {
-        const oldItem = expandedItems.value.filter((item) => item?.startsWith(uuid))[0]
-        const newItem = `${uuid}:${data.activeIndex}`
-        expandedItems.toggle(oldItem, newItem)
-    }
-}
-tabChangeHandler.propTypes = {
-    expandedItems: stringsURLSearchQueryPropType,
-    uuid: string,
-}
-
-export function activeTabIndex(expandedItems, uuid) {
-    // Return the active tab index of the expanded item, defaults to 0
-    const item = expandedItems.value.filter((item) => item?.startsWith(uuid))[0] ?? `${uuid}:0`
-    return Number(item.split(":")[1])
-}
-activeTabIndex.propTypes = {
-    expandedItems: stringsURLSearchQueryPropType,
-    uuid: string,
-}
diff --git a/components/frontend/src/dashboard/CardDashboard.test.js b/components/frontend/src/dashboard/CardDashboard.test.js
@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 
-import { DarkMode } from "../context/DarkMode"
 import { EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
 import { CardDashboard } from "./CardDashboard"
 import { MetricSummaryCard } from "./MetricSummaryCard"
@@ -12,13 +11,11 @@ afterEach(() => jest.restoreAllMocks())
 
 function renderCardDashboard({ cards = [], initialLayout = [], saveLayout = jest.fn } = {}) {
     return render(
-        <DarkMode.Provider value={false}>
-            <Permissions.Provider value={[EDIT_REPORT_PERMISSION]}>
-                <div id="dashboard">
-                    <CardDashboard cards={cards} initialLayout={initialLayout} saveLayout={saveLayout} />
-                </div>
-            </Permissions.Provider>
-        </DarkMode.Provider>,
+        <Permissions.Provider value={[EDIT_REPORT_PERMISSION]}>
+            <div id="dashboard">
+                <CardDashboard cards={cards} initialLayout={initialLayout} saveLayout={saveLayout} />
+            </div>
+        </Permissions.Provider>,
     )
 }
 

diff --git a/components/frontend/src/dashboard/ExportCard.css b/components/frontend/src/dashboard/ExportCard.css