fix(deps): MUI Grid2 migration for the question editors

UniversityOfHelsinkiCS · Nov 27, 2024 · c39e3f5 · c39e3f5
1 parent 5678c4f
commit c39e3f5
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 15 deletions.
diff --git a/src/client/components/QuestionEditor/ChoiceEditor.jsx b/src/client/components/QuestionEditor/ChoiceEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Box, Grid, Typography } from '@mui/material'
+import { Box, Grid2 as Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
 import OptionEditor from './OptionEditor'
@@ -50,7 +50,7 @@ const ChoiceEditor = ({ name, languages = ['fi', 'sv', 'en'] }) => {
       <Box sx={styles.container}>
         <Grid spacing={4} container>
           {languages.map(language => (
-            <Grid md={4} sm={12} xs={12} item key={language}>
+            <Grid size={{ xs: 12, sm: 12, md: 4 }} key={language}>
               <Box mb={2}>
                 <Typography variant="h6" component="h2">
                   {language.toUpperCase()}
@@ -70,7 +70,7 @@ const ChoiceEditor = ({ name, languages = ['fi', 'sv', 'en'] }) => {
               const languageT = i18n.getFixedT(language)
 
               return (
-                <Grid xs={4} item key={language}>
+                <Grid size={4} key={language}>
                   <Typography variant="h6" component="h3">
                     {languageT('questionEditor:options')}
                   </Typography>

diff --git a/src/client/components/QuestionEditor/LikertEditor.jsx b/src/client/components/QuestionEditor/LikertEditor.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Grid, Typography } from '@mui/material'
+import { Box, Grid2 as Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
 import FormikTextField from '../common/FormikTextField'
@@ -33,7 +33,7 @@ const LanguageLikertEditor = ({ name, language }) => {
 const LikertEditor = ({ name, languages = ['fi', 'sv', 'en'] }) => (
   <Grid spacing={4} container>
     {languages.map(language => (
-      <Grid md={4} sm={12} xs={12} item key={language}>
+      <Grid size={{ xs: 12, sm: 12, md: 4 }} key={language}>
         <Box mb={2}>
           <Typography variant="h6" component="h2">
             {language.toUpperCase()}

diff --git a/src/client/components/QuestionEditor/OpenEditor.jsx b/src/client/components/QuestionEditor/OpenEditor.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Alert, Box, Grid, Typography } from '@mui/material'
+import { Alert, Box, Grid2 as Grid, Typography } from '@mui/material'
 import { useTranslation, Trans } from 'react-i18next'
 
 import AlertLink from '../common/AlertLink'
@@ -48,7 +48,7 @@ const LanguageOpenEditor = ({ name, language }) => {
 const OpenEditor = ({ name, languages = ['fi', 'sv', 'en'] }) => (
   <Grid spacing={4} container>
     {languages.map(language => (
-      <Grid md={4} sm={12} xs={12} item key={language}>
+      <Grid size={{ xs: 12, sm: 12, md: 4 }} key={language}>
         <Box mb={2}>
           <Typography variant="h6" component="h2">
             {language.toUpperCase()}

diff --git a/src/client/components/QuestionEditor/OptionEditor.jsx b/src/client/components/QuestionEditor/OptionEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, IconButton, Tooltip, Box, Grid } from '@mui/material'
+import { Button, IconButton, Tooltip, Box, Grid2 as Grid } from '@mui/material'
 
 import { FieldArray, useField } from 'formik'
 import CloseIcon from '@mui/icons-material/Close'
@@ -36,7 +36,7 @@ const OptionItem = ({ name, index, languages, onRemove }) => {
             const languageT = i18n.getFixedT(language)
 
             return (
-              <Grid md={4} sm={12} xs={12} item key={language}>
+              <Grid size={{ xs: 12, sm: 12, md: 4 }} key={language}>
                 <FormikTextField
                   data-cy={`option-editor-new-option-${language}-name.${index}`}
                   name={`${name}.label.${language}`}

diff --git a/src/client/components/QuestionEditor/QuestionCard.jsx b/src/client/components/QuestionEditor/QuestionCard.jsx
@@ -1,6 +1,17 @@
 import React from 'react'
 
-import { Card, CardContent, IconButton, Tooltip, Box, Chip, Divider, Button, Grid, Typography } from '@mui/material'
+import {
+  Card,
+  CardContent,
+  IconButton,
+  Tooltip,
+  Box,
+  Chip,
+  Divider,
+  Button,
+  Grid2 as Grid,
+  Typography,
+} from '@mui/material'
 import { EditOutlined } from '@mui/icons-material'
 
 import DeleteIcon from '@mui/icons-material/Delete'
@@ -180,12 +191,12 @@ const QuestionCard = ({
     <Card sx={{ mt: '0.5rem', p: '0.5rem' }} elevation={elevation}>
       <CardContent>
         <Grid container direction="row" justifyContent="space-between" mb="1.5rem">
-          <Grid item xs={4}>
+          <Grid size={4}>
             <Box display="flex" gap="0.5rem">
               <Chip label={title} variant="outlined" />
             </Box>
           </Grid>
-          <Grid item xs={4} display="flex" justifyContent="center">
+          <Grid size={4} display="flex" justifyContent="center">
             {question.type !== 'TEXT' && question.type !== 'OPEN' && !isEditing && (
               <QuestionPublicityToggle
                 checked={question.public}
@@ -194,7 +205,7 @@ const QuestionCard = ({
               />
             )}
           </Grid>
-          <Grid item xs={4} display="flex" justifyContent="end">
+          <Grid size={4} display="flex" justifyContent="end">
             {question.chip && (
               <Tooltip title={t('questionEditor:uneditableTooltip')}>
                 <Chip label={t(question.chip)} variant="outlined" />

diff --git a/src/client/components/QuestionEditor/TextEditor.jsx b/src/client/components/QuestionEditor/TextEditor.jsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Typography, Alert } from '@mui/material'
+import { Box, Grid2 as Grid, Typography, Alert } from '@mui/material'
 import React from 'react'
 
 import { useTranslation, Trans } from 'react-i18next'
@@ -37,7 +37,7 @@ const LanguageTextEditor = ({ name, language }) => {
 const TextEditor = ({ name, languages = ['fi', 'sv', 'en'] }) => (
   <Grid spacing={4} container>
     {languages.map(language => (
-      <Grid md={4} sm={12} xs={12} item key={language}>
+      <Grid size={{ xs: 12, sm: 12, md: 4 }} key={language}>
         <Box mb={2}>
           <Typography variant="h6" component="h2">
             {language.toUpperCase()}