Skip to content

Commit

Permalink
Migrate frontend to MUI.
Browse files Browse the repository at this point in the history 
- Settings
- Menubar

Partially addresses #9796.
  • Loading branch information
@fniessink
fniessink committed Oct 8, 2024
1 parent 64b2510 commit c37e435
Show file tree
Hide file tree
Showing 27 changed files with 758 additions and 559 deletions.
360 changes: 263 additions & 97 deletions components/frontend/package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion components/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
34 changes: 26 additions & 8 deletions components/frontend/src/App.test.js
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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 () => {
Expand Down
97 changes: 51 additions & 46 deletions components/frontend/src/AppUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
)
}
Expand Down
2 changes: 1 addition & 1 deletion components/frontend/src/AppUI.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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("")
})
32 changes: 0 additions & 32 deletions components/frontend/src/header_footer/CollapseButton.js
View file

This file was deleted.

82 changes: 0 additions & 82 deletions components/frontend/src/header_footer/DownloadAsPDFButton.test.js
View file

This file was deleted.

23 changes: 1 addition & 22 deletions components/frontend/src/header_footer/Menubar.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit c37e435

Please sign in to comment.