Skip to content

Upgrade mui 8 #556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdfleury-wbd merged 18 commits into from
Oct 24, 2025
Merged

Upgrade mui 8 #556

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b9336d1
updating material ui, minus dates
mdfleury-wbd Oct 17, 2025
84fe745
these should work
mdfleury-wbd Oct 20, 2025
79c644e
adding test page
mdfleury-wbd Oct 20, 2025
253fe9f
working dates
mdfleury-wbd Oct 20, 2025
627c99d
updating deps
mdfleury-wbd Oct 20, 2025
6b599db
updating deps
mdfleury-wbd Oct 21, 2025
d0c40bb
Upgrade to pytest-cov v7 and disable printing coverage report by defa…
ZoogieZork Oct 1, 2025
f82c930
add 1-day cooldown to configurations for Dependabot and npm-check-upd…
breedenc Oct 1, 2025
a0a30e8
Update Trivy to 0.67.0 (#553)
g-marconet Oct 8, 2025
b149d6d
Bump actions/cache from 4.2.4 to 4.3.0 in the actions group (#546)
dependabot[bot] Oct 13, 2025
7865bdf
Dependency updates (2025-10-13) (#554)
mdfleury-wbd Oct 21, 2025
0aa6412
Merge branch 'main' into upgrade-mui-8
mdfleury-wbd Oct 21, 2025
5e744aa
fixing lock and missing
mdfleury-wbd Oct 21, 2025
80f644f
fixing warning
mdfleury-wbd Oct 21, 2025
6fbfbee
fixing typography
mdfleury-wbd Oct 21, 2025
2e5f52e
fixing spacing
mdfleury-wbd Oct 21, 2025
765cbb4
removing weird code
mdfleury-wbd Oct 23, 2025
ee405d0
fixing indent
mdfleury-wbd Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,566 changes: 763 additions & 803 deletions ui/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@
"@date-io/luxon": "^3.2.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@fontsource/roboto": "^5.2.8",
Copy link
Copy Markdown
Contributor Author

@mdfleury-wbd mdfleury-wbd Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved from deprecated roboto to current.

"@lingui/core": "^4.14.0",
"@lingui/react": "^4.14.0",
"@mui/icons-material": "^6.4.12",
"@mui/material": "^6.4.8",
"@mui/x-date-pickers": "^7.29.4",
"@mui/icons-material": "^7.3.4",
"@mui/material": "^7.3.4",
"@mui/x-date-pickers": "^8.14.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
"@reduxjs/toolkit": "^1.9.7",
"@svgr/webpack": "^8.1.0",
Expand All @@ -36,7 +37,7 @@
"dotenv-expand": "^12.0.3",
"file-loader": "^6.2.0",
"formik": "^2.4.6",
"formik-mui": "5.0.0-alpha.0",
"formik-mui": "5.0.0-alpha.1",
"fs-extra": "^11.3.2",
"html-webpack-plugin": "^5.6.4",
"identity-obj-proxy": "^3.0.0",
Expand Down Expand Up @@ -76,7 +77,6 @@
"style-loader": "^4.0.0",
"terser-webpack-plugin": "^5.3.14",
"tss-react": "^4.9.19",
"typeface-roboto": "1.1.13",
"typescript": "~5.9.3",
"webpack": "^5.102.1",
"webpack-dev-server": "^5.2.2",
Expand Down
13 changes: 10 additions & 3 deletions ui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import {
Routes,
Route,
} from "react-router-dom";
import "typeface-roboto";
import "@fontsource/roboto";

import store, { AppDispatch } from "app/store";
import { Provider } from "react-redux";
import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { messages as enMessages } from "locale/en/messages";

// apply material-ui cross-browser style normalizaion
// apply material-ui cross-browser style normalization
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";
import { makeStyles } from "tss-react/mui";
Expand Down Expand Up @@ -47,6 +47,7 @@ const ResultsPage = React.lazy(() => import("pages/ResultsPage"));
const SearchPage = React.lazy(() => import("pages/SearchPage"));
const UsersPage = React.lazy(() => import("pages/UsersPage"));
const UserSettings = React.lazy(() => import("pages/UserSettings"));
const DatePickerTestPage = React.lazy(() => import("pages/DatePickerTestPage"));

// browser language preference
// currently used for displaying times in locale-specific format
Expand Down Expand Up @@ -143,6 +144,12 @@ export const AppRoutes = () => {
)}
<Route path="/settings" element={<UserSettings />} />
<Route path="/search" element={<SearchPage />} />
{process.env.NODE_ENV === "development" && (
<Route
path="/datepicker-test"
element={<DatePickerTestPage />}
/>
)}
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</React.Suspense>
Expand Down Expand Up @@ -283,7 +290,7 @@ const ThemedApp = () => {
);

// TODO i18n: Date/Time pickers have changed the way they handle i18n
// instead of overriding indivudal strings like okText, cancelText, etc. you now wrap the component in a <LocalizationProvider> with an "adapterLocale" set
// instead of overriding individual strings like okText, cancelText, etc. you now wrap the component in a <LocalizationProvider> with an "adapterLocale" set
// this is more complete, since it also translates items like calendar month names
// see: https://mui.com/x/react-date-pickers/date-picker/#localization

Expand Down
28 changes: 13 additions & 15 deletions ui/src/app/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
AppBar,
Box,
CircularProgress,
Hidden,
IconButton,
ListItemIcon,
ListItemText,
Expand Down Expand Up @@ -261,20 +260,19 @@ const NavBar = (props: INavBar) => {
{systemStatus.maintenance.message}
</Alert>
)}
<Hidden mdDown>
<Box
displayPrint="none"
style={{ position: "absolute", right: "1rem" }}
>
{currentUser?.last_login && (
<Typography variant="caption">
<Trans>
Last Login: {formatDate(currentUser.last_login, "long")}
</Trans>
</Typography>
)}
</Box>
</Hidden>
<Box
sx={{ display: { xs: "none", md: "block" } }}
displayPrint="none"
style={{ position: "absolute", right: "1rem" }}
>
{currentUser?.last_login && (
<Typography variant="caption">
<Trans>
Last Login: {formatDate(currentUser.last_login, "long")}
</Trans>
</Typography>
)}
</Box>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/ApiKeys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
FormGroup,
FormHelperText,
FormLabel,
Grid2 as Grid,
Grid,
IconButton,
InputAdornment,
LinearProgress,
Expand Down Expand Up @@ -199,7 +199,7 @@ interface ScrollToTopProps {
}

// element that will appear as user approaches bottom of target element
// and will scroll back to element indentified by selector
// and will scroll back to element identified by selector
// will usually wrap a <Fab> child element
function ScrollTop(props: ScrollToTopProps) {
const { children, selector, target } = props;
Expand Down
9 changes: 6 additions & 3 deletions ui/src/components/AutoCompleteField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@ const AutoCompleteField = React.forwardRef(
ref={ref}
name={allParams.name}
error={allParams.error}
InputProps={InputProps}
helperText={allParams.helperText}
label={
loading ? i18n._(t`Loading options...`) : allParams.label
}
placeholder={allParams.placeholder}
variant="outlined"
slotProps={{
input: InputProps,
}}
/>
);
}}
Expand All @@ -62,9 +64,10 @@ const AutoCompleteField = React.forwardRef(
}
const matches = match(optionLabel, inputValue);
const parts = parse(optionLabel, matches);

// don't pass key in with rest of props
const { key, ...otherProps } = renderProps;
return (
<li {...renderProps}>
<li key={key} {...otherProps}>
<div>
{parts.map((part, index) => (
<span
Expand Down
11 changes: 9 additions & 2 deletions ui/src/components/EnhancedTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ interface MenuOptions {
}

interface EnhancedTableProps {
id?: string; // row field to use for unique key, defaults to keyId if unsupplied
id?: string; // row field to use for unique key, defaults to keyId if not supplied
columns: ColDef[];
rows: RowDef[];
defaultOrder?: Order; // how all columns will be ordered initially unless overridden in ColDef.order, default: "asc"
Expand Down Expand Up @@ -660,6 +660,13 @@ const EnhancedTable = (props: EnhancedTableProps) => {
};
}

const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);

let showPage = page;
if (newLastPage < page) {
showPage = 0;
}
Copy link
Copy Markdown
Collaborator

@ZoogieZork ZoogieZork Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this is a change in behavior or replicating the old behavior of MUI 8?

Copy link
Copy Markdown
Contributor Author

@mdfleury-wbd mdfleury-wbd Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixes a warning that I was getting locally, but realized the warning is supposed to be there as part of the test (but only on dev) so I removed it.


return (
<div className={classes.root}>
<Paper className={classes.paper}>
Expand Down Expand Up @@ -769,7 +776,7 @@ const EnhancedTable = (props: EnhancedTableProps) => {
component="div"
count={count}
rowsPerPage={rowsPerPage}
page={page}
page={showPage}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
Expand Down
40 changes: 16 additions & 24 deletions ui/src/components/FormikPickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,13 @@ import { browserLanguage } from "App";
import { InputBaseProps } from "@mui/material";

// Formik wrapper for Material UI date/time pickers
// adapted from Material-UI picker Formik sample:
Copy link
Copy Markdown
Contributor Author

@mdfleury-wbd mdfleury-wbd Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed broken linkl

// https://next.material-ui-pickers.dev/guides/forms#validation-props
//
// also adds i18n for component labels
//
// usage:
// <Field ...attrs component={DateTimePicker} />

interface DatePickerFieldProps
extends FieldProps,
DesktopDateTimePickerProps<DateTime> {
id?: string;
interface DatePickerFieldProps extends FieldProps, DesktopDateTimePickerProps {
id: string;
getShouldDisableDateError: (date: DateTime | null) => string;
size?: "small" | "medium";
style?: React.CSSProperties;
Expand All @@ -44,7 +39,6 @@ const DatePickerField = (props: DatePickerFieldProps) => {
field,
form,
getShouldDisableDateError,
onChange,
Copy link
Copy Markdown
Contributor Author

@mdfleury-wbd mdfleury-wbd Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was never used.

invalidDateMessage,
minDateMessage,
maxDateMessage,
Expand Down Expand Up @@ -72,23 +66,19 @@ const DatePickerField = (props: DatePickerFieldProps) => {
if (!localeText?.nextMonth) {
localeText.nextMonth = i18n._(t`Next month`);
}
// x-date-pickers v6 expects the picker's field value to be in the adapter's date/time format - it no longer performs this conversion
// so this wrapper will now handle this conversion
// Luxon adapter doesn't accept Date objects, so convert to a string first.

if (field.value && typeof field.value.toISOString === "function") {
field.value = field.value.toISOString();
}
const adapter = new DateAdapter({ locale: browserLanguage });
const fieldValue = adapter.date(field.value);
let fieldValue = field.value || null;
if (field.value && typeof field.value === "string") {
const adapter = new DateAdapter({ locale: browserLanguage });
fieldValue = adapter.date(field.value);
}

// for a11y assign an additional title to the input field separate from the value, since v6 x-date-pickers picker value contains additional non-display characters
// const displayValue = fieldValue
// ? fieldValue.toFormat(other.format ?? "yyyy/LL/dd HH:mm")
// : "";
const displayValue = "";
const inputProps: InputBaseProps["inputProps"] = {
id: props.id,
title: displayValue,
"data-testid": `${field.name}_date_input`,
Copy link
Copy Markdown
Contributor Author

@mdfleury-wbd mdfleury-wbd Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a testid to the input, the date field is no longer a single input, but it added a hidden input field to show the date, using this on tests.

};
if (props.placeholder) {
inputProps.placeholder = props.placeholder;
Expand Down Expand Up @@ -125,11 +115,13 @@ const DatePickerField = (props: DatePickerFieldProps) => {
label={props?.label}
onChange={(date) => {
form.setFieldTouched(field.name, true, false);
if (muiError) {
form.setFieldValue(field.name, date, false);
form.setFieldError(field.name, muiError);
} else {
form.setFieldValue(field.name, date, true);
if (date) {
if (muiError) {
form.setFieldValue(field.name, date, false);
form.setFieldError(field.name, muiError);
} else {
form.setFieldValue(field.name, date, true);
}
}
}}
onError={(code, value) => {
Expand Down
Loading
Loading