refactor: [M3-6343] - MUI v5 Migration - Grid v2 for Features

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Tech Stories:
 - MUIv5 Migration - Components > TagsInput, TagsPanel #8995
+- MUIv5 Migration - Grid v2 for Features #8985
 
 ## [2023-04-03] - v1.90.0
 

packages/manager/src/MainContent.tsx

@@ -7,7 +7,7 @@ import Logo from 'src/assets/logo/akamai-logo.svg';
 import Box from 'src/components/core/Box';
 import { makeStyles, withTheme, WithTheme } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import MainContentBanner from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import NotFound from 'src/components/NotFound';
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   cmrWrapper: {
     maxWidth: `${theme.breakpoints.values.lg}px !important`,
     padding: `${theme.spacing(3)} 0`,
-    paddingTop: 20,
+    paddingTop: 12,
     transition: theme.transitions.create('opacity'),
     [theme.breakpoints.down('md')]: {
       paddingTop: theme.spacing(2),
@@ -316,7 +316,7 @@ const MainContent: React.FC<CombinedProps> = (props) => {
                     role="main"
                   >
                     <Grid container spacing={0} className={classes.grid}>
-                      <Grid item className={`${classes.switchWrapper} p0`}>
+                      <Grid className={`${classes.switchWrapper} p0`}>
                         <GlobalNotifications />
                         <React.Suspense fallback={<SuspenseLoader />}>
                           <Switch>

packages/manager/src/components/EntityDetail/EntityDetail.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: `10px 16px !important`,
+    padding: `7px 16px !important`, // This will be taken care of during refactor
   },
   footerBorder: {
     borderTop: `1px solid ${theme.borderColors.borderTable}`,

packages/manager/src/components/MainContentBanner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Close from '@mui/icons-material/Close';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import Grid from 'src/components/core/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Typography from 'src/components/core/Typography';
 import { Link } from 'src/components/Link';
 import { useMutatePreferences, usePreferences } from 'src/queries/preferences';
@@ -75,7 +75,7 @@ const MainContentBanner: React.FC<Props> = (props) => {
   };
 
   return (
-    <Grid className={classes.bannerOuter} item xs={12}>
+    <Grid className={classes.bannerOuter} xs={12}>
       <Typography variant="h2" className={classes.header}>
         {bannerText}&nbsp;
         {linkText && url && (

packages/manager/src/components/Notice/Notice.tsx

@@ -7,7 +7,7 @@ import { makeStyles } from 'tss-react/mui';
 import { withTheme, WithTheme } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography, { TypographyProps } from 'src/components/core/Typography';
-import Grid, { GridProps } from 'src/components/Grid';
+import Grid, { Grid2Props } from '@mui/material/Unstable_Grid2';
 import { SxProps } from '@mui/system';
 
 export const useStyles = makeStyles<
@@ -112,7 +112,7 @@ export const useStyles = makeStyles<
   },
 }));
 
-export interface Props extends GridProps {
+export interface Props extends Grid2Props {
   text?: string;
   error?: boolean;
   errorGroup?: string;
@@ -202,7 +202,6 @@ const Notice: React.FC<CombinedProps> = (props) => {
 
   return (
     <Grid
-      item
       className={cx({
         [classes.root]: true,
         [classes.important]: important,
@@ -229,7 +228,7 @@ const Notice: React.FC<CombinedProps> = (props) => {
       sx={sx}
     >
       {flag && (
-        <Grid item>
+        <Grid>
           <Flag className={classes.flag} />
         </Grid>
       )}

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -19,7 +19,7 @@ import Longview from 'src/assets/icons/longview.svg';
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import Divider from 'src/components/core/Divider';
-import Grid from 'src/components/core/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import useAccountManagement from 'src/hooks/useAccountManagement';
 import useFlags from 'src/hooks/useFlags';
 import usePrefetch from 'src/hooks/usePreFetch';
@@ -258,7 +258,7 @@ export const PrimaryNav: React.FC<Props> = (props) => {
       role="navigation"
       id="main-navigation"
     >
-      <Grid item>
+      <Grid>
         <div
           className={classNames(classes.logoItemAkamai, {
             [classes.logoItemAkamaiCollapsed]: isCollapsed,

packages/manager/src/components/TagCell/TagCell.tsx

@@ -9,7 +9,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import Tag from 'src/components/Tag';
 import CircleProgress from '../CircleProgress';
 import AddTag from './AddTag';
-import Box from '@mui/material/Box';
+import { SxProps } from '@mui/system';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -59,13 +59,17 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderRadius: 0,
     color: theme.color.tagIcon,
     height: 30,
-    marginLeft: theme.spacing(),
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
     padding: 0,
     width: '40px',
     '&:hover': {
       backgroundColor: theme.palette.primary.main,
       color: '#ffff',
     },
+    [theme.breakpoints.down('lg')]: {
+      marginLeft: 0,
+    },
   },
   addTagButton: {
     display: 'flex',
@@ -107,6 +111,7 @@ interface Props {
   tags: string[];
   updateTags: (tags: string[]) => Promise<any>;
   listAllTags: (tags: string[]) => void;
+  sx?: SxProps;
 }
 
 // https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows
@@ -129,7 +134,7 @@ export type CombinedProps = Props;
 export const TagCell: React.FC<Props> = (props) => {
   const classes = useStyles();
 
-  const { updateTags, tags } = props;
+  const { updateTags, tags, sx } = props;
 
   const [hasOverflow, setOverflow] = React.useState<boolean>(false);
   const [addingTag, setAddingTag] = React.useState<boolean>(false);
@@ -168,6 +173,7 @@ export const TagCell: React.FC<Props> = (props) => {
       direction="row"
       alignItems="center"
       wrap="nowrap"
+      sx={sx}
     >
       {loading ? (
         <div className={classes.progress}>
@@ -202,18 +208,16 @@ export const TagCell: React.FC<Props> = (props) => {
           </div>
 
           {hasOverflow ? (
-            <Box className="py0">
-              <IconButton
-                onKeyPress={() => props.listAllTags(tags)}
-                onClick={() => props.listAllTags(tags)}
-                className={classes.button}
-                disableRipple
-                aria-label="Display all tags"
-                size="large"
-              >
-                <MoreHoriz />
-              </IconButton>
-            </Box>
+            <IconButton
+              onKeyPress={() => props.listAllTags(tags)}
+              onClick={() => props.listAllTags(tags)}
+              className={classes.button}
+              disableRipple
+              aria-label="Display all tags"
+              size="large"
+            >
+              <MoreHoriz />
+            </IconButton>
           ) : null}
           <button
             className={classes.addTagButton}

packages/manager/src/components/TextField.tsx

@@ -44,10 +44,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: 0,
   },
   helpWrapperTextField: {
-    width: 415,
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
+    width: '415px',
   },
   errorText: {
     display: 'flex',

packages/manager/src/dev-tools/EnvironmentToggleTool.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from 'src/components/core/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import { storage } from 'src/utilities/storage';
 
 interface EnvironmentOption {
@@ -55,10 +55,10 @@ const EnvironmentToggleTool: React.FC<{}> = () => {
 
   return (
     <Grid container>
-      <Grid item xs={12}>
-        <h4 style={{ marginBottom: 8 }}>Environment</h4>
+      <Grid xs={12}>
+        <h4 style={{ marginTop: 0, marginBottom: 8 }}>Environment</h4>
       </Grid>
-      <Grid item xs={12}>
+      <Grid xs={12}>
         <select
           onBlur={(e) => {
             const selectedIndex = options.findIndex(

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -5,7 +5,7 @@ import { Flags, FlagSet } from 'src/featureFlags';
 import { Dispatch } from 'src/hooks/types';
 import useFlags from 'src/hooks/useFlags';
 import { setMockFeatureFlags } from 'src/store/mockFeatureFlags';
-import Grid from 'src/components/core/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 
 const options: { label: string; flag: keyof Flags }[] = [
   { label: 'Metadata', flag: 'metadata' },
@@ -25,10 +25,10 @@ const FeatureFlagTool: React.FC<{}> = () => {
 
   return (
     <Grid container>
-      <Grid item xs={12}>
-        <h4 style={{ marginBottom: 8 }}>Feature Flags</h4>
+      <Grid xs={12}>
+        <h4 style={{ marginTop: 0, marginBottom: 8 }}>Feature Flags</h4>
       </Grid>
-      <Grid item xs={12}>
+      <Grid xs={12}>
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           {options.map((thisOption) => {
             return (

packages/manager/src/dev-tools/MockDataTool.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import withFeatureFlagProvider from 'src/containers/withFeatureFlagProvider.container';
-import Grid from 'src/components/core/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import { MockData, mockDataController } from './mockDataController';
 import ServiceWorkerTool from './ServiceWorkerTool';
 
@@ -34,11 +34,11 @@ const MockDataTool: React.FC<{}> = () => {
   // specific fields, like label, region, etc. (via <input /> or even JSON entry?)
 
   return (
-    <Grid>
-      <Grid item xs={12}>
-        <h4 style={{ marginBottom: 8 }}>Mock Data</h4>
+    <Grid container>
+      <Grid xs={12}>
+        <h4 style={{ marginTop: 0, marginBottom: 8 }}>Mock Data</h4>
       </Grid>
-      <Grid item xs={12}>
+      <Grid xs={12}>
         {options.map((thisOption) => {
           return (
             <div key={thisOption.key} style={{ marginTop: 4 }}>
@@ -55,7 +55,7 @@ const MockDataTool: React.FC<{}> = () => {
           );
         })}
       </Grid>
-      <Grid item xs={12}>
+      <Grid xs={12}>
         <ServiceWorkerTool />
       </Grid>
     </Grid>

packages/manager/src/dev-tools/dev-tools.tsx

@@ -7,7 +7,7 @@ import EnvironmentToggleTool from './EnvironmentToggleTool';
 import { Provider } from 'react-redux';
 import MockDataTool from './MockDataTool';
 import { ENABLE_DEV_TOOLS, isProductionBuild } from 'src/constants';
-import Grid from 'src/components/core/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import { ApplicationStore } from 'src/store';
 
 function install(store: ApplicationStore) {
@@ -18,16 +18,16 @@ function install(store: ApplicationStore) {
       <div id="dev-tools">
         <div>🛠</div>
         <Grid container spacing={2} className="tools">
-          <Grid item xs={4} sm={2}>
+          <Grid xs={4} sm={2}>
             <FeatureFlagTool />
           </Grid>
           {import.meta.env.DEV && (
-            <Grid item xs={4} sm={5} md={3}>
+            <Grid xs={4} sm={5} md={3}>
               <EnvironmentToggleTool />
             </Grid>
           )}
           {!isProductionBuild || ENABLE_DEV_TOOLS ? (
-            <Grid item xs={4} sm={5} md={3}>
+            <Grid xs={4} sm={5} md={3}>
               <MockDataTool />
             </Grid>
           ) : null}

packages/manager/src/features/Account/AutoBackups.tsx

@@ -3,7 +3,7 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import Accordion from 'src/components/Accordion';
 import FormControlLabel from 'src/components/core/FormControlLabel';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Notice from 'src/components/Notice';
 import OpenInNew from '@mui/icons-material/OpenInNew';
 import { Toggle } from 'src/components/Toggle';
@@ -46,8 +46,8 @@ const AutoBackups = (props: Props) => {
 
   return (
     <Accordion heading="Backup Auto Enrollment" defaultExpanded={true}>
-      <Grid container direction="column">
-        <Grid item>
+      <Grid container direction="column" spacing={2}>
+        <Grid>
           {!!isManagedCustomer ? (
             <Notice success spacingBottom={20}>
               You&rsquo;re a Managed customer, which means your Linodes are
@@ -72,8 +72,8 @@ const AutoBackups = (props: Props) => {
             .
           </Typography>
         </Grid>
-        <Grid item container direction="row" alignItems="center">
-          <Grid item>
+        <Grid container direction="row" alignItems="center">
+          <Grid>
             <FormControlLabel
               control={
                 <Toggle
@@ -92,7 +92,7 @@ const AutoBackups = (props: Props) => {
           </Grid>
         </Grid>
         {!isManagedCustomer && !backups_enabled && hasLinodesWithoutBackups && (
-          <Grid item>
+          <Grid>
             <Typography variant="body1" className={classes.footnote}>
               For existing Linodes without backups,&nbsp;
               <button

packages/manager/src/features/Account/CloseAccountSetting.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Accordion from 'src/components/Accordion';
 import Button from 'src/components/Button';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import CloseAccountDialog from './CloseAccountDialog';
 
 const CloseAccountSetting = () => {
@@ -11,7 +11,7 @@ const CloseAccountSetting = () => {
     <>
       <Accordion heading="Close Account" defaultExpanded={true}>
         <Grid container direction="column">
-          <Grid item>
+          <Grid>
             <Button buttonType="outlined" onClick={() => setDialogOpen(true)}>
               Close Account
             </Button>