frontend: prop name of justify for Grids

Minor version bump of MUI deprecated the old prop name
flatcar · Dec 11, 2024 · 4f3a658 · 4f3a658
1 parent cf6dd00
commit 4f3a658
Show file tree

Hide file tree

Showing 22 changed files with 49 additions and 40 deletions.
diff --git a/frontend/src/TestHelpers/theme.ts b/frontend/src/TestHelpers/theme.ts
@@ -1,7 +1,7 @@
 import green from '@material-ui/core/colors/green';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     primary: {
       contrastText: '#fff',

diff --git a/frontend/src/components/Activity/ActivityItem.tsx b/frontend/src/components/Activity/ActivityItem.tsx
@@ -85,7 +85,7 @@ export function ActivityItemPure(props: ActivityItemPureProps) {
 
   return (
     <ListItem alignItems="flex-start" disableGutters className={classes.list}>
-      <Grid container alignItems="center" justify="space-between">
+      <Grid container alignItems="center" justifyContent="space-between">
         <Grid item xs={10}>
           <Box display="flex" alignItems="center" justifyContent="flex-start">
             <Box mr={1}>

diff --git a/frontend/src/components/Applications/ApplicationItemChannelsList.tsx b/frontend/src/components/Applications/ApplicationItemChannelsList.tsx
@@ -14,7 +14,7 @@ function ApplicationItemChannelsList(props: { channels?: Channel[] }) {
   }
 
   return (
-    <Grid container justify="space-between">
+    <Grid container justifyContent="space-between">
       {entries.map((entry: React.ReactNode, i: number) => (
         <Grid item xs={4} key={i}>
           {entry}

diff --git a/frontend/src/components/Channels/ChannelEdit.tsx b/frontend/src/components/Channels/ChannelEdit.tsx
@@ -169,7 +169,13 @@ export default function ChannelEdit(props: ChannelEditProps) {
           {status && status.statusMessage && (
             <DialogContentText color="error">{status.statusMessage}</DialogContentText>
           )}
-          <Grid container spacing={2} justify="space-between" alignItems="center" wrap="nowrap">
+          <Grid
+            container
+            spacing={2}
+            justifyContent="space-between"
+            alignItems="center"
+            wrap="nowrap"
+          >
             <Grid item>
               <ColorPicker color={channelColor} onColorPicked={color => setChannelColor(color.hex)}>
                 {values.name ? values.name[0] : ''}

diff --git a/frontend/src/components/Channels/ChannelList.tsx b/frontend/src/components/Channels/ChannelList.tsx
@@ -161,7 +161,7 @@ export function ChannelListPure(props: ChannelListPureProps) {
   return (
     <Box mt={2}>
       <Box mb={2}>
-        <Grid container alignItems="center" justify="space-between">
+        <Grid container alignItems="center" justifyContent="space-between">
           <Grid item>
             <Typography variant="h1">{t('channels|Channels')}</Typography>
           </Grid>

diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx
@@ -17,7 +17,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
 
   return (
     <div style={{ padding: '1rem' }}>
-      <Grid container spacing={2} justify="center">
+      <Grid container spacing={2} justifyContent="center">
         <Grid item xs={8}>
           <Field
             name="name"

diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx
@@ -27,7 +27,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
 
   return (
     <div style={{ padding: '1rem' }}>
-      <Grid container justify="space-between" spacing={4}>
+      <Grid container justifyContent="space-between" spacing={4}>
         <Grid item xs={12}>
           <Box mt={1}>
             <FormLabel component="legend">{t('groups|Update')}</FormLabel>
@@ -119,7 +119,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
         </Grid>
       </Box>
       <Box my={2}>
-        <Grid item xs={12} container spacing={2} justify="space-between" alignItems="center">
+        <Grid item xs={12} container spacing={2} justifyContent="space-between" alignItems="center">
           <Grid item xs={5}>
             <Box pl={2}>
               <Field

diff --git a/frontend/src/components/Groups/GroupItem.tsx b/frontend/src/components/Groups/GroupItem.tsx
@@ -138,7 +138,7 @@ export function PureGroupItem({
             />
           </CardHeader>
         </Grid>
-        <Grid item xs={12} container justify="space-between">
+        <Grid item xs={12} container justifyContent="space-between">
           <Grid item xs={4} container direction="column" className={classes.itemSection}>
             <Grid item>
               <CardFeatureLabel>{t('groups|Instances')}</CardFeatureLabel>

diff --git a/frontend/src/components/Groups/GroupItemExtended.tsx b/frontend/src/components/Groups/GroupItemExtended.tsx
@@ -143,7 +143,7 @@ function ItemExtended(props: {
 
   return (
     <Paper>
-      <Grid container alignItems="stretch" justify="space-between">
+      <Grid container alignItems="stretch" justifyContent="space-between">
         <Grid item xs={12}>
           <CardHeader
             cardMainLinkLabel={group ? group.name : '…'}
@@ -166,7 +166,7 @@ function ItemExtended(props: {
             {group && (
               <Grid item xs={12}>
                 <Box p={2}>
-                  <Grid container direction="column" justify="space-between">
+                  <Grid container direction="column" justifyContent="space-between">
                     <Grid item>
                       <CardFeatureLabel>{t('groups|Channel')}</CardFeatureLabel>
                       {_.isEmpty(group.channel) ? (
@@ -242,7 +242,7 @@ function ItemExtended(props: {
           <Box mt={1} ml={-3}>
             {group && (
               <>
-                <Grid container alignItems="center" justify="space-between" spacing={2}>
+                <Grid container alignItems="center" justifyContent="space-between" spacing={2}>
                   <Grid item>
                     <Box color={theme.palette.greyShadeColor} fontSize={18} fontWeight={700}>
                       {t('groups|Update Progress')}
@@ -281,7 +281,7 @@ function ItemExtended(props: {
         {instancesStats && instancesStats.total > 0 && (
           <Grid item xs={12} container>
             <Grid item md xs={12} container direction="column">
-              <Grid container alignItems="center" justify="space-between">
+              <Grid container alignItems="center" justifyContent="space-between">
                 <Grid item>
                   <Box pl={4} pt={4}>
                     <Box fontSize={18} fontWeight={700} color={theme.palette.greyShadeColor}>
@@ -310,7 +310,7 @@ function ItemExtended(props: {
               <Divider orientation="vertical" />
             </Box>
             <Grid item md xs={12} container direction="column">
-              <Grid container alignItems="center" justify="space-between">
+              <Grid container alignItems="center" justifyContent="space-between">
                 <Grid item>
                   <Box
                     pl={2}

diff --git a/frontend/src/components/Instances/Charts.tsx b/frontend/src/components/Instances/Charts.tsx
@@ -96,7 +96,7 @@ function ProgressDoughnut(props: ProgressDoughnutProps) {
   });
 
   return (
-    <Grid container direction="column" justify="center" alignItems="center">
+    <Grid container direction="column" justifyContent="center" alignItems="center">
       <Grid item>
         <PieChart width={width} height={height}>
           <Pie
@@ -142,7 +142,7 @@ function ProgressDoughnut(props: ProgressDoughnutProps) {
           </Pie>
         </PieChart>
       </Grid>
-      <Grid item container alignItems="center" justify="center" spacing={1}>
+      <Grid item container alignItems="center" justifyContent="center" spacing={1}>
         {icon && (
           <Grid item>
             <InlineIcon icon={icon} color={color} width={iconSize} height={iconSize} />
@@ -236,11 +236,11 @@ export default function InstanceStatusArea(props: InstanceStatusAreaProps) {
   }
 
   return totalInstances > 0 ? (
-    <Grid container justify="space-between" alignItems="center">
+    <Grid container justifyContent="space-between" alignItems="center">
       <Grid item xs={4}>
         <InstanceCountLabel countText={totalInstances} href={href} />
       </Grid>
-      <Grid item container justify="space-between" xs={8}>
+      <Grid item container justifyContent="space-between" xs={8}>
         {instanceStateCount.map(({ status, count }, i) => {
           // Sort the data entries so the smaller amounts are shown first.
           count.sort((obj1, obj2) => {

diff --git a/frontend/src/components/Instances/Details.tsx b/frontend/src/components/Instances/Details.tsx
@@ -326,7 +326,7 @@ function DetailsView(props: DetailsViewProps) {
         <Box p={2}>
           <Grid container spacing={1}>
             <Grid item xs={12}>
-              <Grid container justify="space-between">
+              <Grid container justifyContent="space-between">
                 <Grid item>
                   <Box fontWeight={700} fontSize={30} color={theme.palette.greyShadeColor}>
                     {instance.alias || instance.id}

diff --git a/frontend/src/components/Instances/List.tsx b/frontend/src/components/Instances/List.tsx
@@ -75,7 +75,7 @@ function InstanceFilter(props: InstanceFilterProps) {
 
   return (
     <Box pr={2}>
-      <Grid container spacing={2} justify="flex-end">
+      <Grid container spacing={2} justifyContent="flex-end">
         <Grid item xs={5}>
           <FormControl fullWidth disabled={props.disabled}>
             <InputLabel htmlFor="select-status" shrink>
@@ -404,7 +404,7 @@ function ListView(props: { application: Application; group: Group }) {
       <Paper>
         <Box padding="1em">
           <Grid container spacing={1}>
-            <Grid item container justify="space-between" alignItems="stretch">
+            <Grid item container justifyContent="space-between" alignItems="stretch">
               <Grid item>
                 <Box
                   mb={2}
@@ -456,7 +456,7 @@ function ListView(props: { application: Application; group: Group }) {
               </Grid>
             </Grid>
             <Box width="100%" borderTop={1} borderColor={'#E0E0E0'} className={classes.root}>
-              <Grid item container md={12} alignItems="stretch" justify="space-between">
+              <Grid item container md={12} alignItems="stretch" justifyContent="space-between">
                 <Grid item md>
                   <Box display="flex" alignItems="center">
                     <Box ml={2}>
@@ -476,7 +476,7 @@ function ListView(props: { application: Application; group: Group }) {
               </Grid>
             </Box>
             {isFiltered() && (
-              <Grid item md={12} container justify="center">
+              <Grid item md={12} container justifyContent="center">
                 <Grid item>
                   <Button variant="outlined" color="secondary" onClick={resetFilters}>
                     {t('instances|Reset filters')}

diff --git a/frontend/src/components/Packages/EditDialog.tsx b/frontend/src/components/Packages/EditDialog.tsx
@@ -139,7 +139,7 @@ function EditDialog(props: EditDialogProps) {
           {status && status.statusMessage && (
             <DialogContentText color="error">{status.statusMessage}</DialogContentText>
           )}
-          <Grid container justify="space-between">
+          <Grid container justifyContent="space-between">
             <Grid item>
               <FormControl margin="dense" className={classes.topSelect}>
                 <InputLabel>Type</InputLabel>
@@ -210,7 +210,7 @@ function EditDialog(props: EditDialogProps) {
                         required
                         fullWidth
                       />
-                      <Grid container justify="space-between" spacing={4}>
+                      <Grid container justifyContent="space-between" spacing={4}>
                         <Grid item xs={6}>
                           <Field
                             name="version"

diff --git a/frontend/src/components/common/Card/Card.stories.tsx b/frontend/src/components/common/Card/Card.stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import {
   CardDescriptionLabel,

diff --git a/frontend/src/components/common/Card/Card.tsx b/frontend/src/components/common/Card/Card.tsx
@@ -101,8 +101,8 @@ export function CardHeader(props: CardHeaderProps) {
   const theme = useTheme();
   return (
     <React.Fragment>
-      <Grid container className={classes.gridHeader} justify="space-between">
-        <Grid item container spacing={1} alignItems="center" justify="space-between">
+      <Grid container className={classes.gridHeader} justifyContent="space-between">
+        <Grid item container spacing={1} alignItems="center" justifyContent="space-between">
           <Grid item xs={12}>
             {props.cardMainLinkPath ? (
               <Typography variant="h2">

diff --git a/frontend/src/components/common/ListHeader/ListHeader.tsx b/frontend/src/components/common/ListHeader/ListHeader.tsx
@@ -17,7 +17,7 @@ export default function ListHeader(props: { title: string; actions?: React.React
     <Grid
       container
       alignItems="flex-start"
-      justify="space-between"
+      justifyContent="space-between"
       className={classes.sectionHeader}
     >
       {props.title && (

diff --git a/frontend/src/components/common/SectionHeader/SectionHeader.tsx b/frontend/src/components/common/SectionHeader/SectionHeader.tsx
@@ -41,7 +41,12 @@ export default function SectionHeader(props: SectionHeaderProps) {
   return (
     <>
       <PageTitle title={title} />
-      <Grid container alignItems="center" justify="flex-start" className={classes.sectionContainer}>
+      <Grid
+        container
+        alignItems="center"
+        justifyContent="flex-start"
+        className={classes.sectionContainer}
+      >
         <Grid item>
           <Breadcrumbs
             aria-label={t('common|breadcrumbs')}

diff --git a/frontend/src/components/layouts/ApplicationLayout/ApplicationLayout.tsx b/frontend/src/components/layouts/ApplicationLayout/ApplicationLayout.tsx
@@ -45,7 +45,7 @@ function ApplicationLayout() {
           },
         ]}
       />
-      <Grid container spacing={1} justify="space-between">
+      <Grid container spacing={1} justifyContent="space-between">
         <Grid item xs={12} sm={8}>
           <GroupList appID={appID} />
         </Grid>

diff --git a/frontend/src/components/layouts/MainLayout/MainLayout.tsx b/frontend/src/components/layouts/MainLayout/MainLayout.tsx
@@ -1,11 +1,10 @@
 import Grid from '@material-ui/core/Grid';
-import React from 'react';
 import ActivityContainer from '../../Activity/ActivityContainer';
 import ApplicationList from '../../Applications/ApplicationList';
 
 function MainLayout() {
   return (
-    <Grid container spacing={2} justify="center" alignItems="flex-start">
+    <Grid container spacing={2} justifyContent="center" alignItems="flex-start">
       <Grid item xs={12} sm={8}>
         <ApplicationList />
       </Grid>

diff --git a/frontend/src/components/layouts/PageNotFoundLayout/PageNotFoundLayout.tsx b/frontend/src/components/layouts/PageNotFoundLayout/PageNotFoundLayout.tsx
@@ -12,7 +12,7 @@ export default function PageNotFoundLayout() {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       style={{ minHeight: '100vh', textAlign: 'center' }}
     >
       <Grid item xs={6}>

diff --git a/frontend/src/i18n/ThemeProviderNexti18n.tsx b/frontend/src/i18n/ThemeProviderNexti18n.tsx
@@ -1,5 +1,5 @@
 import { deDE, enUS, esES, hiIN, ptPT } from '@material-ui/core/locale';
-import { createMuiTheme, Theme, ThemeProvider } from '@material-ui/core/styles';
+import { createTheme, Theme, ThemeProvider } from '@material-ui/core/styles';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,7 +39,7 @@ const ThemeProviderNexti18n: React.FunctionComponent<{ theme: Theme }> = props =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const theme = createMuiTheme(props.theme, getLocale(lang));
+  const theme = createTheme(props.theme, getLocale(lang));
 
   return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
 };

diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
@@ -1,5 +1,5 @@
 import green from '@material-ui/core/colors/green';
-import { createMuiTheme, Theme } from '@material-ui/core/styles';
+import { createTheme, Theme } from '@material-ui/core/styles';
 import React from 'react';
 
 const DISABLE_BROWSER_THEME_PREF = true;
@@ -13,7 +13,7 @@ declare module '@material-ui/core/styles/createPalette' {
   }
 }
 
-const lightTheme = createMuiTheme({
+const lightTheme = createTheme({
   palette: {
     primary: {
       contrastText: '#fff',
@@ -52,7 +52,7 @@ const lightTheme = createMuiTheme({
   },
 });
 
-const darkTheme = createMuiTheme({
+const darkTheme = createTheme({
   ...lightTheme,
   palette: {
     type: 'dark',