Merge pull request #702 from systemli/Fix-Deprecations

💄 Fix Deprecations

src/components/settings/InactiveSettingsCard.tsx

@@ -1,6 +1,7 @@
 import { faPencil } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Box, Button, Card, CardContent, Divider, Grid, Typography } from '@mui/material'
+import { Box, Button, Card, CardContent, Divider, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { Stack } from '@mui/system'
 import { FC, useState } from 'react'
 import useAuth from '../../contexts/useAuth'
@@ -68,31 +69,31 @@ const InactiveSettingsCard: FC = () => {
           <Typography>{setting.value.description}</Typography>
         </Box>
         <Grid container>
-          <Grid item lg={6} xs={12}>
+          <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
               <Typography color="GrayText" component="span" variant="body2">
                 Author
               </Typography>
               <Typography>{setting.value.author}</Typography>
             </Box>
           </Grid>
-          <Grid item lg={6} xs={12}>
+          <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
               <Typography color="GrayText" component="span" variant="body2">
                 Homepage
               </Typography>
               <Typography>{setting.value.homepage}</Typography>
             </Box>
           </Grid>
-          <Grid item lg={6} xs={12}>
+          <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
               <Typography color="GrayText" component="span" variant="body2">
                 E-Mail
               </Typography>
               <Typography>{setting.value.email}</Typography>
             </Box>
           </Grid>
-          <Grid item lg={6} xs={12}>
+          <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
               <Typography color="GrayText" component="span" variant="body2">
                 Twitter

src/components/settings/InactiveSettingsForm.tsx

@@ -1,4 +1,5 @@
-import { FormGroup, Grid, TextField } from '@mui/material'
+import { FormGroup, TextField } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
@@ -45,17 +46,17 @@ const InactiveSettingsForm: FC<Props> = ({ name, setting, callback }) => {
   return (
     <form id={name} onSubmit={handleSubmit(onSubmit)}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <FormGroup>
             <TextField margin="dense" {...register('headline')} defaultValue={setting.value.headline} label="Headline" name="headline" required />
           </FormGroup>
         </Grid>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <FormGroup>
             <TextField margin="dense" {...register('subHeadline')} defaultValue={setting.value.subHeadline} label="Subheadline" required />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField
               margin="normal"
@@ -68,22 +69,22 @@ const InactiveSettingsForm: FC<Props> = ({ name, setting, callback }) => {
             />
           </FormGroup>
         </Grid>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <FormGroup>
             <TextField margin="dense" {...register('author')} defaultValue={setting.value.author} label="Author" name="author" required />
           </FormGroup>
         </Grid>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <FormGroup>
             <TextField margin="dense" {...register('homepage')} defaultValue={setting.value.homepage} label="Homepage" name="homepage" required type="url" />
           </FormGroup>
         </Grid>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <FormGroup>
             <TextField margin="dense" {...register('email')} defaultValue={setting.value.email} label="E-Mail" name="email" required type="email" />
           </FormGroup>
         </Grid>
-        <Grid item sm={6} xs={12}>
+        <Grid size={{ sm: 6, xs: 12 }}>
           <FormGroup>
             <TextField margin="dense" {...register('twitter')} defaultValue={setting.value.twitter} label="Twitter" name="twitter" required />
           </FormGroup>

src/components/settings/RefreshIntervalForm.tsx

@@ -1,4 +1,5 @@
-import { FormGroup, Grid, TextField } from '@mui/material'
+import { FormGroup, TextField } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
@@ -33,7 +34,7 @@ const RefreshIntervalForm: FC<Props> = ({ name, setting, callback }) => {
   return (
     <form id={name} onSubmit={handleSubmit(onSubmit)}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField
               margin="dense"

src/components/ticker/BlueskyForm.tsx

@@ -1,4 +1,5 @@
-import { Alert, Checkbox, FormControlLabel, FormGroup, Grid, TextField, Typography } from '@mui/material'
+import { Alert, Checkbox, FormControlLabel, FormGroup, TextField, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { useForm } from 'react-hook-form'
@@ -41,25 +42,25 @@ const BlueskyForm: FC<Props> = ({ callback, ticker }) => {
   return (
     <form id="configureBluesky" onSubmit={onSubmit}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Typography>You need to create a application password in Bluesky.</Typography>
         </Grid>
         {errors.root?.authenticationFailed && (
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <Alert severity="error">{errors.root.authenticationFailed.message}</Alert>
           </Grid>
         )}
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <FormControlLabel control={<Checkbox {...register('active')} defaultChecked={ticker.bluesky.active} />} label="Active" />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField {...register('handle')} defaultValue={ticker.bluesky.handle} label="Handle" placeholder="handle.bsky.social" required />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField {...register('appKey')} label="Application Password" type="password" required />
           </FormGroup>

src/components/ticker/MastodonForm.tsx

@@ -1,4 +1,5 @@
-import { Checkbox, FormControlLabel, FormGroup, Grid, TextField, Typography } from '@mui/material'
+import { Checkbox, FormControlLabel, FormGroup, TextField, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
@@ -31,7 +32,7 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
   return (
     <form id="configureMastodon" onSubmit={handleSubmit(onSubmit)}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Typography>
             You need to create a Application for Ticker in Mastodon. Go to your profile settings in Mastodon. You find a menu point "Developer" where you need
             to create an Application. After saving you see the required secrets and tokens.
@@ -40,27 +41,27 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
             Required Scopes: <code>read write write:media write:statuses</code>
           </Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <FormControlLabel control={<Checkbox {...register('active')} defaultChecked={ticker.mastodon.active} />} label="Active" />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField {...register('server')} defaultValue={ticker.mastodon.server} label="Server" placeholder="https://mastodon.social" required />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField {...register('token')} label="Client Key" required />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField {...register('secret')} label="Client Secret" required type="password" />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField {...register('accessToken')} label="Access Token" required type="password" />
           </FormGroup>

src/components/ticker/SignalGroupAdminForm.tsx

@@ -1,6 +1,7 @@
 import { faPhone } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Alert, FormGroup, Grid, InputAdornment, TextField } from '@mui/material'
+import { Alert, FormGroup, InputAdornment, TextField } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { FC } from 'react'
 import { useForm } from 'react-hook-form'
 import { Ticker, TickerSignalGroupAdminFormData, putTickerSignalGroupAdminApi } from '../../api/Ticker'
@@ -43,10 +44,10 @@ const SignalGroupAdminForm: FC<Props> = ({ callback, ticker, setSubmitting }) =>
   return (
     <form id="configureSignalGroupAdmin" onSubmit={onSubmit}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Alert severity="warning">Only do this if extra members with write access are needed.</Alert>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField
               {...register('number')}

src/components/ticker/TelegramForm.tsx

@@ -1,4 +1,5 @@
-import { Checkbox, FormControlLabel, FormGroup, Grid, TextField, Typography } from '@mui/material'
+import { Checkbox, FormControlLabel, FormGroup, TextField, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
@@ -36,15 +37,15 @@ const TelegramForm: FC<Props> = ({ callback, ticker }) => {
   return (
     <form id="configureTelegram" onSubmit={handleSubmit(onSubmit)}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Typography>Only public Telegram Channels are supported. The name of the Channel is prefixed with an @ (e.g. @channel).</Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <FormControlLabel control={<Checkbox {...register('active')} defaultChecked={ticker.telegram.active} />} label="Active" />
           </FormGroup>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             <TextField
               {...register('channelName', {

src/components/ticker/Ticker.tsx

@@ -1,6 +1,7 @@
 import { faGear } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Alert, Box, Button, Card, CardContent, Grid, Stack, Typography } from '@mui/material'
+import { Alert, Box, Button, Card, CardContent, Stack, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { FC, useState } from 'react'
 import { Ticker as Model } from '../../api/Ticker'
 import useAuth from '../../contexts/useAuth'
@@ -48,10 +49,8 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
   if (ticker === undefined || isLoading) {
     return (
       <Grid container spacing={2}>
-        <Grid item xs={12}>
-          {headline()}
-        </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>{headline()}</Grid>
+        <Grid size={{ xs: 12 }}>
           <Loader />
         </Grid>
       </Grid>
@@ -60,15 +59,13 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
 
   return (
     <Grid container spacing={2}>
-      <Grid item xs={12}>
-        {headline()}
-      </Grid>
+      <Grid size={{ xs: 12 }}>{headline()}</Grid>
       {!ticker.active ? (
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Alert severity="warning">This ticker is currently disabled.</Alert>
         </Grid>
       ) : null}
-      <Grid display={{ xs: 'none', md: 'block' }} item md={4} spacing={2} xs={12}>
+      <Grid display={{ xs: 'none', md: 'block' }} spacing={2} size={{ md: 4, xs: 12 }}>
         <TickerCard ticker={ticker} />
         {user?.roles.includes('admin') ? (
           <>
@@ -81,15 +78,15 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
           </>
         ) : null}
       </Grid>
-      <Grid container item md={8} rowSpacing={2} xs={12}>
-        <Grid item xs={12}>
+      <Grid container rowSpacing={2} size={{ md: 8, xs: 12 }}>
+        <Grid size={{ xs: 12 }}>
           <Card>
             <CardContent>
               <MessageForm ticker={ticker} />
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <MessageList ticker={ticker} />
         </Grid>
       </Grid>

src/components/ticker/TickerIntegrations.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { FC } from 'react'
 import { Ticker } from '../../api/Ticker'
 import BlueskyCard from './BlueskyCard'
@@ -14,19 +14,19 @@ interface Props {
 const TickerIntegrations: FC<Props> = ({ ticker }) => {
   return (
     <Grid container spacing={2}>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ md: 6, xs: 12 }}>
         <WebsiteCard ticker={ticker} />
       </Grid>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ md: 6, xs: 12 }}>
         <MastodonCard ticker={ticker} />
       </Grid>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ md: 6, xs: 12 }}>
         <TelegramCard ticker={ticker} />
       </Grid>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ md: 6, xs: 12 }}>
         <BlueskyCard ticker={ticker} />
       </Grid>
-      <Grid item md={6} xs={12}>
+      <Grid size={{ md: 6, xs: 12 }}>
         <SignalGroupCard ticker={ticker} />
       </Grid>
     </Grid>

src/components/ticker/WebsiteCard.test.tsx

@@ -9,7 +9,7 @@ import WebsiteCard from './WebsiteCard'
 
 const token = sign({ id: 1, email: '[email protected]', roles: ['user'], exp: new Date().getTime() / 1000 + 600 }, 'secret')
 
-describe('WebsiteForm', () => {
+describe('WebsiteCard', () => {
   beforeAll(() => {
     localStorage.setItem('token', token)
   })

src/components/ticker/WebsiteForm.tsx

@@ -1,5 +1,6 @@
 import { Delete } from '@mui/icons-material'
-import { Button, FormControl, FormGroup, FormHelperText, Grid, IconButton, InputAdornment, OutlinedInput, Typography } from '@mui/material'
+import { Button, FormControl, FormGroup, FormHelperText, IconButton, InputAdornment, OutlinedInput, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
@@ -43,10 +44,10 @@ const WebsiteForm: FC<Props> = ({ callback, ticker }) => {
   return (
     <form id="configureWebsites" onSubmit={handleSubmit(onSubmit)}>
       <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Typography>You can configure website origins for your ticker. The ticker will only be reachable from the configured websites.</Typography>
         </Grid>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <FormGroup>
             {fields.map((field, index) => (
               <FormControl sx={{ mb: 1 }} error={!!errors.websites?.[index]?.origin} key={field.id}>