frontend: react-refresh version & MUI migration fixes

react-refresh didn't want to dedupe, and would cause dev runtime issues => override

frontend/package.json

@@ -31,6 +31,7 @@
     "dompurify": "^2.2.9",
     "downshift": "^6.1.3",
     "formik": "^2.2.9",
+    "formik-mui": "^4.0.0",
     "i18next": "^20.3.2",
     "i18next-browser-languagedetector": "^6.1.2",
     "jwt-decode": "^3.1.2",
@@ -50,6 +51,9 @@
     "underscore": "^1.13.1",
     "yup": "^0.32.9"
   },
+  "overrides": {
+    "react-refresh": "^0.14.2"
+  },
   "devDependencies": {
     "@axe-core/react": "^4.2.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

frontend/src/components/Applications/ApplicationEdit.tsx

@@ -6,7 +6,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import MenuItem from '@mui/material/MenuItem';
 import { Field, Form, Formik } from 'formik';
-import { TextField } from 'formik-material-ui';
+import { TextField } from 'formik-mui';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import { Application } from '../../api/apiDataTypes';

frontend/src/components/Channels/ChannelEdit.tsx

@@ -9,10 +9,10 @@ import FormHelperText from '@mui/material/FormHelperText';
 import Grid from '@mui/material/Grid';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
-import MuiSelect from '@mui/material/Select';
+import MuiSelect, { SelectChangeEvent } from '@mui/material/Select';
 import makeStyles from '@mui/styles/makeStyles';
 import { Field, Form, Formik } from 'formik';
-import { TextField } from 'formik-material-ui';
+import { TextField } from 'formik-mui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
@@ -204,7 +204,7 @@ export default function ChannelEdit(props: ChannelEditProps) {
             <MuiSelect
               variant="standard"
               value={arch}
-              onChange={(event: React.ChangeEvent<{ value: any }>) => setArch(event.target.value)}
+              onChange={(event: SelectChangeEvent<number>) => setArch(event.target.value as number)}
             >
               {Object.keys(ARCHES).map((key: string) => {
                 const archName = ARCHES[parseInt(key)];

frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx

@@ -1,6 +1,6 @@
 import { FormControl, Grid, InputLabel, MenuItem, Select } from '@mui/material';
 import { Field } from 'formik';
-import { TextField } from 'formik-material-ui';
+import { TextField } from 'formik-mui';
 import { useTranslation } from 'react-i18next';
 import { Channel } from '../../../api/apiDataTypes';
 import { ARCHES } from '../../../utils/helpers';

frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx

@@ -12,7 +12,7 @@ import {
   Typography,
 } from '@mui/material';
 import { Field } from 'formik';
-import { TextField } from 'formik-material-ui';
+import { TextField } from 'formik-mui';
 import { useTranslation } from 'react-i18next';
 import TimezonePicker from '../../common/TimezonePicker';
 

frontend/src/components/Instances/Details.tsx

@@ -22,7 +22,7 @@ import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import { makeStyles, useTheme } from '@mui/styles';
 import { Field, Form, Formik, FormikHelpers, FormikProps } from 'formik';
-import { TextField } from 'formik-material-ui';
+import { TextField } from 'formik-mui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
@@ -96,6 +96,13 @@ function StatusLabel(props: StatusLabelProps) {
 
   const { status, activated } = props;
   const { label = t('frequent|Unknown') } = (status && statusDefs[status.type]) || {};
+  let safeLabel: React.ReactNode;
+
+  if (label !== null && typeof label === 'object') {
+    safeLabel = label.toString();
+  } else {
+    safeLabel = label;
+  }
 
   return (
     <span>
@@ -109,7 +116,7 @@ function StatusLabel(props: StatusLabelProps) {
             display="inline-block"
             mr={1}
           >
-            {label}
+            {safeLabel}
           </Box>
           <InlineIcon
             icon={activated ? chevronUp : chevronDown}
@@ -119,7 +126,7 @@ function StatusLabel(props: StatusLabelProps) {
           />
         </Button>
       ) : (
-        <Typography className={classes.statusText}>{label}</Typography>
+        <Typography className={classes.statusText}>{safeLabel}</Typography>
       )}
     </span>
   );

frontend/src/components/Instances/List.tsx

@@ -12,12 +12,12 @@ import InputAdornment from '@mui/material/InputAdornment';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Paper from '@mui/material/Paper';
-import Select from '@mui/material/Select';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import TablePagination from '@mui/material/TablePagination';
 import { useTheme } from '@mui/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import _ from 'underscore';
@@ -113,7 +113,7 @@ function InstanceFilter(props: InstanceFilterProps) {
             </InputLabel>
             <Select
               variant="standard"
-              onChange={(event: ChangeEvent<{ name?: string | undefined; value: any }>) =>
+              onChange={(event: SelectChangeEvent<string>) =>
                 changeFilter('version', event.target.value)
               }
               input={<Input id="select-versions" />}

frontend/src/components/Packages/EditDialog.tsx

@@ -15,7 +15,7 @@ import MenuItem from '@mui/material/MenuItem';
 import MuiSelect, { SelectChangeEvent } from '@mui/material/Select';
 import makeStyles from '@mui/styles/makeStyles';
 import { Field, Form, Formik } from 'formik';
-import { Select, TextField } from 'formik-material-ui';
+import { Select, TextField } from 'formik-mui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';

frontend/src/i18n/ThemeProviderNexti18n.tsx

@@ -50,7 +50,7 @@ const ThemeProviderNexti18n: React.FC<React.PropsWithChildren<{ theme: Theme }>>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const theme = createTheme(adaptV4Theme(props.theme, getLocale(lang)));
+  const theme = createTheme(adaptV4Theme(props.theme), getLocale(lang));
 
   return (
     <StyledEngineProvider injectFirst>