Skip to content

Commit 3f70b26

Browse files
fniessinkfniessink
committed
Migrate frontend to MUI.
- Settings - Menubar Partially addresses #9796.
1 parent 4b10a3a commit 3f70b26

28 files changed

+741
-558
lines changed

‎components/frontend/package-lock.json

Lines changed: 265 additions & 99 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/frontend/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@
77
"@emotion/react": "^11.13.3",
88
"@emotion/styled": "^11.13.0",
99
"@mui/icons-material": "^6.1.2",
10+
"@mui/lab": "^6.0.0-beta.10",
1011
"@mui/material": "^6.1.2",
12+
"@mui/x-date-pickers": "^7.18.0",
1113
"crypto-js": "^4.2.0",
14+
"dayjs": "^1.11.13",
1215
"fomantic-ui-css": "^2.9.3",
1316
"history": "^5.3.0",
1417
"prop-types": "^15.8.1",
1518
"react": "^18.3.1",
1619
"react-datepicker": "^7.4.0",
1720
"react-dom": "^18.3.1",
18-
"react-focus-lock": "^2.13.0",
1921
"react-grid-layout": "^1.4.4",
2022
"react-hash-link": "1.0.2",
2123
"react-is": "^18.3.1",

‎components/frontend/src/App.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ const theme = createTheme({
1919
colorSchemes: {
2020
dark: true, // Add a dark theme (light theme is available by default)
2121
},
22-
components: { MuiTooltip: { defaultProps: { arrow: true }, styleOverrides: { tooltip: { fontSize: "1em" } } } },
22+
components: {
23+
MuiTooltip: { defaultProps: { arrow: true }, styleOverrides: { tooltip: { fontSize: "1em" } } },
24+
},
2325
})
2426

2527
class App extends Component {

‎components/frontend/src/App.test.js

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { act, fireEvent, render, screen } from "@testing-library/react"
2-
import userEvent from "@testing-library/user-event"
32
import history from "history/browser"
43

54
import * as auth from "./api/auth"
@@ -69,32 +68,47 @@ it("resets the user when the user clicks logout", async () => {
6968
expect(screen.queryAllByText(/admin/).length).toBe(0)
7069
})
7170

71+
async function selectDate() {
72+
await act(async () => {
73+
fireEvent.click(screen.getByLabelText("Report date"))
74+
})
75+
await act(async () => {
76+
fireEvent.click(screen.getByRole("button", { name: "Previous month" }))
77+
})
78+
await act(async () => {
79+
fireEvent.click(screen.getAllByRole("gridcell", { name: "15" })[0])
80+
})
81+
}
82+
7283
it("handles a date change", async () => {
7384
render(<App />)
74-
await userEvent.type(screen.getByPlaceholderText("YYYY-MM-DD"), "2020-03-13")
75-
expect(screen.getAllByDisplayValue("2020-03-13").length).toBe(1)
85+
await selectDate()
86+
expect(screen.getByLabelText("Report date").textContent).toMatch(/15/)
7687
})
7788

7889
it("handles a date change between two dates in the past", async () => {
7990
history.push("/?report_date=2022-03-13")
8091
render(<App />)
81-
await userEvent.type(screen.getByPlaceholderText("YYYY-MM-DD"), "{Backspace}4")
82-
expect(screen.getAllByDisplayValue("2022-03-14").length).toBe(1)
92+
await selectDate()
93+
expect(screen.getByLabelText("Report date").textContent).toMatch(/15/)
8394
})
8495

8596
it("reads the report date query parameter", () => {
8697
history.push("/?report_date=2020-03-13")
8798
render(<App />)
88-
expect(screen.getAllByDisplayValue("2020-03-13").length).toBe(1)
99+
expect(screen.getByLabelText("Report date").textContent).toMatch(/2020/)
89100
})
90101

91102
it("handles a date reset", async () => {
92103
history.push("/?report_date=2020-03-13")
93104
render(<App />)
94105
await act(async () => {
95-
fireEvent.click(screen.getByRole("button", { name: "Close" }))
106+
fireEvent.click(screen.getByLabelText("Report date"))
107+
})
108+
await act(async () => {
109+
fireEvent.click(screen.getByRole("button", { name: "Today" }))
96110
})
97-
expect(screen.queryAllByDisplayValue("2020-03-13").length).toBe(0)
111+
expect(screen.getByLabelText("Report date").textContent).toMatch(/today/)
98112
})
99113

100114
it("handles the nr of measurements event source", async () => {

‎components/frontend/src/AppUI.js

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import "react-toastify/dist/ReactToastify.css"
22
import "./App.css"
33

44
import { useColorScheme } from "@mui/material/styles"
5+
import { LocalizationProvider } from "@mui/x-date-pickers"
6+
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
7+
import { locale_en_gb } from "dayjs/locale/en-gb"
58
import { bool, func, number, object, string } from "prop-types"
69
import HashLinkObserver from "react-hash-link"
710
import { ToastContainer } from "react-toastify"
@@ -73,52 +76,54 @@ export function AppUI({
7376
backgroundColor: backgroundColor,
7477
}}
7578
>
76-
<DarkMode.Provider value={darkMode}>
77-
<HashLinkObserver />
78-
<Menubar
79-
email={email}
80-
handleDateChange={handleDateChange}
81-
openReportsOverview={openReportsOverview}
82-
onDate={handleDateChange}
83-
report_date={report_date}
84-
report_uuid={report_uuid}
85-
set_user={set_user}
86-
user={user}
87-
panel={
88-
<SettingsPanel
89-
atReportsOverview={atReportsOverview}
90-
handleSort={handleSort}
91-
settings={settings}
92-
tags={getReportsTags(reports)}
93-
/>
94-
}
95-
settings={settings}
96-
setUIMode={setMode}
97-
uiMode={mode}
98-
/>
99-
<ToastContainer theme="colored" />
100-
<Permissions.Provider value={user_permissions}>
101-
<DataModel.Provider value={dataModel}>
102-
<PageContent
103-
changed_fields={changed_fields}
104-
current_report={current_report}
105-
handleSort={handleSort}
106-
lastUpdate={lastUpdate}
107-
loading={loading}
108-
nrMeasurements={nrMeasurements}
109-
openReportsOverview={openReportsOverview}
110-
openReport={openReport}
111-
reload={reload}
112-
report_date={report_date}
113-
report_uuid={report_uuid}
114-
reports={reports}
115-
reports_overview={reports_overview}
116-
settings={settings}
117-
/>
118-
</DataModel.Provider>
119-
</Permissions.Provider>
120-
<Footer lastUpdate={lastUpdate} report={current_report} />
121-
</DarkMode.Provider>
79+
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale_en_gb}>
80+
<DarkMode.Provider value={darkMode}>
81+
<HashLinkObserver />
82+
<Menubar
83+
email={email}
84+
handleDateChange={handleDateChange}
85+
openReportsOverview={openReportsOverview}
86+
onDate={handleDateChange}
87+
report_date={report_date}
88+
report_uuid={report_uuid}
89+
set_user={set_user}
90+
user={user}
91+
panel={
92+
<SettingsPanel
93+
atReportsOverview={atReportsOverview}
94+
handleSort={handleSort}
95+
settings={settings}
96+
tags={getReportsTags(reports)}
97+
/>
98+
}
99+
settings={settings}
100+
setUIMode={setMode}
101+
uiMode={mode}
102+
/>
103+
<ToastContainer theme="colored" />
104+
<Permissions.Provider value={user_permissions}>
105+
<DataModel.Provider value={dataModel}>
106+
<PageContent
107+
changed_fields={changed_fields}
108+
current_report={current_report}
109+
handleSort={handleSort}
110+
lastUpdate={lastUpdate}
111+
loading={loading}
112+
nrMeasurements={nrMeasurements}
113+
openReportsOverview={openReportsOverview}
114+
openReport={openReport}
115+
reload={reload}
116+
report_date={report_date}
117+
report_uuid={report_uuid}
118+
reports={reports}
119+
reports_overview={reports_overview}
120+
settings={settings}
121+
/>
122+
</DataModel.Provider>
123+
</Permissions.Provider>
124+
<Footer lastUpdate={lastUpdate} report={current_report} />
125+
</DarkMode.Provider>
126+
</LocalizationProvider>
122127
</div>
123128
)
124129
}

‎components/frontend/src/AppUI.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@ async function renderAppUI() {
5959
it("resets all settings", async () => {
6060
history.push("?date_interval=2")
6161
await act(async () => await renderAppUI())
62-
fireEvent.click(screen.getByLabelText("Reset reports overview settings"))
62+
fireEvent.click(screen.getByText("Reset settings"))
6363
expect(history.location.search).toBe("")
6464
})

‎components/frontend/src/header_footer/CollapseButton.js

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎components/frontend/src/header_footer/DownloadAsPDFButton.test.js

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎components/frontend/src/header_footer/Menubar.css

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,5 @@
11
@media print {
2-
.menubar {
2+
.MuiAppBar-root {
33
display: none !important;
44
}
55
}
6-
7-
.menubar {
8-
opacity: 0.98;
9-
}
10-
11-
.menu .center {
12-
display: grid;
13-
place-content: center;
14-
}
15-
16-
.panel {
17-
background-color: black;
18-
border: 0px;
19-
left: 0px;
20-
margin: 0px;
21-
opacity: 0.98;
22-
position: fixed;
23-
top: 64px;
24-
width: 100%;
25-
z-index: 4;
26-
}

0 commit comments

Comments
 (0)