Migrate frontend to MUI.

components/frontend/package.json

@@ -7,15 +7,17 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^6.1.2",
+        "@mui/lab": "^6.0.0-beta.10",
         "@mui/material": "^6.1.2",
+        "@mui/x-date-pickers": "^7.18.0",
         "crypto-js": "^4.2.0",
+        "dayjs": "^1.11.13",
         "fomantic-ui-css": "^2.9.3",
         "history": "^5.3.0",
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-datepicker": "^7.4.0",
         "react-dom": "^18.3.1",
-        "react-focus-lock": "^2.13.0",
         "react-grid-layout": "^1.4.4",
         "react-hash-link": "1.0.2",
         "react-is": "^18.3.1",

components/frontend/src/App.test.js

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
+import dayjs from "dayjs"
 import history from "history/browser"
 
 import * as auth from "./api/auth"
@@ -69,32 +69,50 @@ it("resets the user when the user clicks logout", async () => {
     expect(screen.queryAllByText(/admin/).length).toBe(0)
 })
 
+async function selectDate() {
+    await act(async () => {
+        fireEvent.click(screen.getByLabelText("Report date"))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Previous month" }))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getAllByRole("gridcell", { name: "15" })[0])
+    })
+}
+
 it("handles a date change", async () => {
     render(<App />)
-    await userEvent.type(screen.getByPlaceholderText("YYYY-MM-DD"), "2020-03-13")
-    expect(screen.getAllByDisplayValue("2020-03-13").length).toBe(1)
+    await selectDate()
+    const expectedDate = dayjs().subtract(1, "month").date(15).toDate().toDateString()
+    expect(screen.getByLabelText("Report date").textContent).toMatch(expectedDate)
 })
 
 it("handles a date change between two dates in the past", async () => {
     history.push("/?report_date=2022-03-13")
     render(<App />)
-    await userEvent.type(screen.getByPlaceholderText("YYYY-MM-DD"), "{Backspace}4")
-    expect(screen.getAllByDisplayValue("2022-03-14").length).toBe(1)
+    await selectDate()
+    const expectedDate = dayjs().subtract(1, "month").date(15).toDate().toDateString()
+    expect(screen.getByLabelText("Report date").textContent).toMatch(expectedDate)
 })
 
 it("reads the report date query parameter", () => {
     history.push("/?report_date=2020-03-13")
     render(<App />)
-    expect(screen.getAllByDisplayValue("2020-03-13").length).toBe(1)
+    const expectedDate = dayjs("2020-03-13").toDate().toDateString()
+    expect(screen.getByLabelText("Report date").textContent).toMatch(expectedDate)
 })
 
 it("handles a date reset", async () => {
     history.push("/?report_date=2020-03-13")
     render(<App />)
     await act(async () => {
-        fireEvent.click(screen.getByRole("button", { name: "Close" }))
+        fireEvent.click(screen.getByLabelText("Report date"))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Today" }))
     })
-    expect(screen.queryAllByDisplayValue("2020-03-13").length).toBe(0)
+    expect(screen.getByLabelText("Report date").textContent).toMatch(/today/)
 })
 
 it("handles the nr of measurements event source", async () => {

components/frontend/src/AppUI.js

@@ -2,6 +2,9 @@ import "react-toastify/dist/ReactToastify.css"
 import "./App.css"
 
 import { useColorScheme } from "@mui/material/styles"
+import { LocalizationProvider } from "@mui/x-date-pickers"
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
+import { locale_en_gb } from "dayjs/locale/en-gb"
 import { bool, func, number, object, string } from "prop-types"
 import HashLinkObserver from "react-hash-link"
 import { ToastContainer } from "react-toastify"
@@ -73,52 +76,54 @@ export function AppUI({
                 backgroundColor: backgroundColor,
             }}
         >
-            <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 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>
     )
 }

components/frontend/src/AppUI.test.js

@@ -59,6 +59,6 @@ async function renderAppUI() {
 it("resets all settings", async () => {
     history.push("?date_interval=2")
     await act(async () => await renderAppUI())
-    fireEvent.click(screen.getByLabelText("Reset reports overview settings"))
+    fireEvent.click(screen.getByText("Reset settings"))
     expect(history.location.search).toBe("")
 })

components/frontend/src/header_footer/Menubar.css

@@ -1,26 +1,5 @@
 @media print {
-    .menubar {
+    .MuiAppBar-root {
         display: none !important;
     }
 }
-
-.menubar {
-    opacity: 0.98;
-}
-
-.menu .center {
-    display: grid;
-    place-content: center;
-}
-
-.panel {
-    background-color: black;
-    border: 0px;
-    left: 0px;
-    margin: 0px;
-    opacity: 0.98;
-    position: fixed;
-    top: 64px;
-    width: 100%;
-    z-index: 4;
-}