frontend: MUI and react version: link-underline-hover

https://v5-0-6.mui.com/guides/migration-v4/#link-underline-hover
flatcar · Dec 17, 2024 · 07f58b1 · 07f58b1
1 parent 92c008b
commit 07f58b1
Show file tree

Hide file tree

Showing 17 changed files with 20 additions and 19 deletions.
diff --git a/frontend/src/TestHelpers/theme.ts b/frontend/src/TestHelpers/theme.ts
@@ -8,7 +8,7 @@ export const theme = createTheme({
       main: process.env.REACT_APP_PRIMARY_COLOR || '#000',
     },
     success: {
-      main: green['500'],
+      main: green['800'],
       ...green,
     },
   },

diff --git a/frontend/src/__tests__/Common/ModalButton.spec.js b/frontend/src/__tests__/Common/ModalButton.spec.js
@@ -1,6 +1,5 @@
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import ModalButton from '../../components/common/ModalButton';
 import { theme } from '../../TestHelpers/theme';

diff --git a/frontend/src/components/Activity/ActivityItem.tsx b/frontend/src/components/Activity/ActivityItem.tsx
@@ -78,7 +78,7 @@ export function ActivityItemPure(props: ActivityItemPureProps) {
     const groupPath = `apps/${props.appId}/groups/${props.groupId}`;
     subtitle = t('activity|GROUP');
     name = (
-      <Link component={RouterLink} to={groupPath} className={classes.groupLink}>
+      <Link component={RouterLink} to={groupPath} className={classes.groupLink} underline="hover">
         {props.groupName}
       </Link>
     );

diff --git a/frontend/src/components/Applications/ApplicationItemGroupItem.tsx b/frontend/src/components/Applications/ApplicationItemGroupItem.tsx
@@ -53,6 +53,7 @@ function ApplicationItemGroupItem(props: { group: Group; appName: string }) {
             className={classes.groupLink}
             to={{ pathname: `/apps/${props.group.application_id}/groups/${props.group.id}` }}
             component={RouterLink}
+            underline="hover"
           >
             {props.group.name}
           </Link>
@@ -66,6 +67,7 @@ function ApplicationItemGroupItem(props: { group: Group; appName: string }) {
               }}
               component={RouterLink}
               className={classes.instanceLink}
+              underline="hover"
             >
               {instanceCountContent}
             </Link>

diff --git a/frontend/src/components/Instances/Common.tsx b/frontend/src/components/Instances/Common.tsx
@@ -46,7 +46,7 @@ export function InstanceCountLabel(props: {
         {!instanceListView && countText > 0 ? (
           <Box>
             {!props.loading && (
-              <Link to={{ ...href }} component={RouterLink}>
+              <Link to={{ ...href }} component={RouterLink} underline="hover">
                 <Typography className={classes.instanceLink}>
                   {t('instances|See all instances')}
                 </Typography>

diff --git a/frontend/src/components/Instances/Details.tsx b/frontend/src/components/Instances/Details.tsx
@@ -403,6 +403,7 @@ function DetailsView(props: DetailsViewProps) {
                               className={classes.link}
                               to={`/apps/${application.id}`}
                               component={RouterLink}
+                              underline="hover"
                             >
                               {application.name}
                             </Link>
@@ -415,6 +416,7 @@ function DetailsView(props: DetailsViewProps) {
                               className={classes.link}
                               to={`/apps/${application.id}/groups/${group.id}`}
                               component={RouterLink}
+                              underline="hover"
                             >
                               {group.name}
                             </Link>

diff --git a/frontend/src/components/Instances/Item.tsx b/frontend/src/components/Instances/Item.tsx
@@ -105,7 +105,7 @@ function Item(props: ItemProps) {
     <React.Fragment>
       <TableRow>
         <TableCell>
-          <Link to={instancePath} component={RouterLink} className={classes.link}>
+          <Link to={instancePath} component={RouterLink} className={classes.link} underline="hover">
             {instanceName}
           </Link>
         </TableCell>

diff --git a/frontend/src/components/Main.tsx b/frontend/src/components/Main.tsx
@@ -38,7 +38,7 @@ const useStyle = makeStyles(() => ({
 function SkipLink() {
   const classes = useStyle();
   return (
-    <Link href="#main" className={classes.visuallyHidden}>
+    <Link href="#main" className={classes.visuallyHidden} underline="hover">
       Skip to main content
     </Link>
   );

diff --git a/frontend/src/components/Packages/EditDialog.tsx b/frontend/src/components/Packages/EditDialog.tsx
@@ -12,7 +12,7 @@ import Grid from '@mui/material/Grid';
 import InputLabel from '@mui/material/InputLabel';
 import ListItemText from '@mui/material/ListItemText';
 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 { Select, TextField } from 'formik-material-ui';
@@ -74,11 +74,11 @@ function EditDialog(props: EditDialogProps) {
     });
   }
 
-  function handlePackageTypeChange(event: React.ChangeEvent<{ name?: string; value: unknown }>) {
+  function handlePackageTypeChange(event: SelectChangeEvent<number>) {
     setPackageType(event.target.value as number);
   }
 
-  function handleArchChange(event: React.ChangeEvent<{ name?: string; value: unknown }>) {
+  function handleArchChange(event: SelectChangeEvent<number>) {
     setArch(event.target.value as number);
   }
   //@todo add better types

diff --git a/frontend/src/components/common/AutoCompletePicker/AutoCompletePicker.tsx b/frontend/src/components/common/AutoCompletePicker/AutoCompletePicker.tsx
@@ -41,7 +41,6 @@ function renderInput(inputProps: RenderInputProps) {
 
   return (
     <TextField
-      variant="standard"
       InputProps={{
         inputRef: ref,
         classes: {

diff --git a/frontend/src/components/common/Card/Card.tsx b/frontend/src/components/common/Card/Card.tsx
@@ -111,6 +111,7 @@ export function CardHeader(props: CardHeaderProps) {
                   component={RouterLink}
                   to={props.cardMainLinkPath}
                   className={classes.mainLink}
+                  underline="hover"
                 >
                   {props.cardMainLinkLabel}
                 </Link>

diff --git a/frontend/src/components/common/SectionHeader/SectionHeader.tsx b/frontend/src/components/common/SectionHeader/SectionHeader.tsx
@@ -61,7 +61,7 @@ export default function SectionHeader(props: SectionHeaderProps) {
                       className={classes.breadCrumbsItem}
                       key={'breadcrumb_' + index}
                     >
-                      <Link to={path} component={RouterLink}>
+                      <Link to={path} component={RouterLink} underline="hover">
                         {label}
                       </Link>
                     </Box>

diff --git a/frontend/src/components/common/TimezonePicker/TimezonePicker.tsx b/frontend/src/components/common/TimezonePicker/TimezonePicker.tsx
@@ -48,7 +48,6 @@ function renderInput(inputProps: RenderInputProps) {
 
   return (
     <TextField
-      variant="standard"
       InputProps={{
         inputRef: ref,
         classes: {

diff --git a/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx b/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
@@ -1,11 +1,10 @@
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { Theme, useTheme } from '@mui/material/styles';
 import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -28,8 +27,8 @@ export default function LocaleSelect(props: LocaleSelectProps) {
   const { t, i18n } = useTranslation('frequent');
   const theme = useTheme();
 
-  const changeLng = (event: React.ChangeEvent<{ value: unknown }>) => {
-    const lng = event.target.value as string;
+  const changeLng = (event: SelectChangeEvent<string>) => {
+    const lng = event.target.value;
 
     i18n.changeLanguage(lng);
     document.body.dir = i18n.dir();

diff --git a/frontend/src/i18n/ThemeProviderNexti18n.tsx b/frontend/src/i18n/ThemeProviderNexti18n.tsx
@@ -30,7 +30,7 @@ function getLocale(locale: string): typeof enUS {
 /** Like a ThemeProvider but uses reacti18next for the language selection
  *  Because Material UI is localized as well.
  */
-const ThemeProviderNexti18n: React.FunctionComponent<{ theme: Theme }> = props => {
+const ThemeProviderNexti18n: React.FC<React.PropsWithChildren<{ theme: Theme }>> = props => {
   const { i18n } = useTranslation();
   const [lang, setLang] = useState(i18n.language);
 

diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
@@ -20,7 +20,7 @@ const lightTheme = createTheme({
       main: process.env.REACT_APP_PRIMARY_COLOR ? process.env.REACT_APP_PRIMARY_COLOR : '#2C98F0',
     },
     success: {
-      main: green['500'],
+      main: green['800'],
       ...green,
     },
   },

diff --git a/frontend/src/stores/ActivityStore.tsx b/frontend/src/stores/ActivityStore.tsx
@@ -134,7 +134,7 @@ class ActivityStore extends Store {
         description: (
           <React.Fragment>
             Instance{' '}
-            <Link component={RouterLink} to={instancePath}>
+            <Link component={RouterLink} to={instancePath} underline="hover">
               {entry.instance_id}
             </Link>{' '}
             reported an error while processing update to version {entry.version}