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 1, 2024
1 parent 14a220c commit 0818960
Show file tree
Hide file tree
Showing 27 changed files with 657 additions and 474 deletions.
350 changes: 263 additions & 87 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.1",
"@mui/lab": "^6.0.0-beta.10",
"@mui/material": "^6.1.1",
"@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
4 changes: 3 additions & 1 deletion components/frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ 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" } } } },
components: {
MuiTooltip: { defaultProps: { arrow: true }, styleOverrides: { tooltip: { fontSize: "1em" } } },
},
})

class App extends Component {
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,4 @@
import { act, fireEvent, render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import history from "history/browser"

import * as auth from "./api/auth"
Expand Down Expand Up @@ -71,30 +70,49 @@ it("resets the user when the user clicks logout", async () => {

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 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])
})
expect(screen.getByLabelText("Report date").textContent).toMatch(/15/)
})

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 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])
})
expect(screen.getByLabelText("Report date").textContent).toMatch(/15/)
})

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)
expect(screen.getByLabelText("Report date").textContent).toMatch(/2020/)
})

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.

21 changes: 0 additions & 21 deletions components/frontend/src/header_footer/Menubar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,3 @@
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 0818960

Please sign in to comment.