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

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';
@@ -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/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/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>

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

@@ -7,7 +7,7 @@ import Button from 'src/components/Button';
 import ConfirmationDialog from 'src/components/ConfirmationDialog';
 import Typography from 'src/components/core/Typography';
 import ExternalLink from 'src/components/ExternalLink';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import SupportLink from 'src/components/SupportLink';
 import withLinodes, {
   DispatchProps,
@@ -43,8 +43,8 @@ export const ManagedContent = (props: ContentProps) => {
   }
 
   return (
-    <Grid container direction="column">
-      <Grid item>
+    <Grid container direction="column" spacing={2}>
+      <Grid>
         <Typography variant="body1">
           Linode Managed includes Backups, Longview Pro, cPanel, and
           round-the-clock monitoring to help keep your systems up and running.
@@ -56,7 +56,7 @@ export const ManagedContent = (props: ContentProps) => {
           />
         </Typography>
       </Grid>
-      <Grid item>
+      <Grid>
         <Button buttonType="outlined" onClick={openConfirmationModal}>
           Add Linode Managed
         </Button>

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

@@ -11,7 +11,7 @@ import Notice from 'src/components/Notice';
 import TypeToConfirm from 'src/components/TypeToConfirm';
 import Typography from 'src/components/core/Typography';
 import ExternalLink from 'src/components/ExternalLink';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import { updateAccountSettingsData } from 'src/queries/accountSettings';
 import { usePreferences } from 'src/queries/preferences';
 import { useProfile } from 'src/queries/profile';
@@ -31,15 +31,15 @@ export const ObjectStorageContent = (props: ContentProps) => {
 
   if (object_storage !== 'disabled') {
     return (
-      <Grid container direction="column">
-        <Grid item>
+      <Grid container direction="column" spacing={2}>
+        <Grid>
           <Typography variant="body1">
             Object Storage is enabled on your account. Upon cancellation, all
             Object Storage Access Keys will be revoked, all buckets will be
             removed, and their objects deleted.
           </Typography>
         </Grid>
-        <Grid item>
+        <Grid>
           <Button
             data-testid="open-dialog-button"
             buttonType="outlined"

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import FormControlLabel from 'src/components/core/FormControlLabel';
 import Typography from 'src/components/core/Typography';
 import Accordion from 'src/components/Accordion';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Toggle from 'src/components/Toggle';
 
 interface Props {
@@ -13,15 +13,15 @@ interface Props {
 const NetworkHelper = ({ onChange, networkHelperEnabled }: Props) => {
   return (
     <Accordion heading="Network Helper" defaultExpanded={true}>
-      <Grid container direction="column">
-        <Grid item>
+      <Grid container direction="column" spacing={2}>
+        <Grid>
           <Typography variant="body1">
             Network Helper automatically deposits a static networking
             configuration into your Linode at boot.
           </Typography>
         </Grid>
-        <Grid item container direction="row" alignItems="center">
-          <Grid item>
+        <Grid container direction="row" alignItems="center">
+          <Grid>
             <FormControlLabel
               control={
                 <Toggle

packages/manager/src/features/Backups/AutoEnroll.tsx

@@ -5,7 +5,6 @@ import { createStyles, withStyles, WithStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import ExternalLink from 'src/components/ExternalLink';
-import Grid from 'src/components/Grid';
 import Notice from 'src/components/Notice';
 import Toggle from 'src/components/Toggle';
 
@@ -45,42 +44,30 @@ export const AutoEnroll: React.FC<CombinedProps> = (props) => {
 
   return (
     <Paper className={classes.root}>
-      {error && (
-        <Grid item>
-          <Notice error text={error} />
-        </Grid>
-      )}
-      <Grid container direction="row" wrap="nowrap">
-        <Grid item>
-          <FormControlLabel
-            className={classes.toggleLabel}
-            control={
-              <Toggle
-                checked={enabled}
-                onChange={toggle}
-                data-qa-enable-toggle
-              />
-            }
-            label={
-              <div className={classes.toggleLabelText}>
-                <Typography className={classes.header}>
-                  Auto Enroll All New Linodes in Backups
-                </Typography>
-                <Typography variant="body1">
-                  {`Enroll all future Linodes in backups. Your account will be billed
+      {error && <Notice error text={error} />}
+      <FormControlLabel
+        className={classes.toggleLabel}
+        control={
+          <Toggle checked={enabled} onChange={toggle} data-qa-enable-toggle />
+        }
+        label={
+          <div className={classes.toggleLabelText}>
+            <Typography className={classes.header}>
+              Auto Enroll All New Linodes in Backups
+            </Typography>
+            <Typography variant="body1">
+              {`Enroll all future Linodes in backups. Your account will be billed
                     the additional hourly rate noted on the `}
-                  <ExternalLink
-                    data-qa-backups-price
-                    fixedIcon
-                    link="https://www.linode.com/backups"
-                    text="Backups pricing page"
-                  />
-                </Typography>
-              </div>
-            }
-          />
-        </Grid>
-      </Grid>
+              <ExternalLink
+                data-qa-backups-price
+                fixedIcon
+                link="https://www.linode.com/backups"
+                text="Backups pricing page"
+              />
+            </Typography>
+          </div>
+        }
+      />
     </Paper>
   );
 };

packages/manager/src/features/Backups/BackupDrawer.tsx

@@ -9,7 +9,7 @@ import Button from 'src/components/Button';
 import Typography from 'src/components/core/Typography';
 import DisplayPrice from 'src/components/DisplayPrice';
 import Drawer from 'src/components/Drawer';
-import Grid from 'src/components/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Link from 'src/components/Link';
 import Notice from 'src/components/Notice';
 import {
@@ -166,8 +166,8 @@ export class BackupDrawer extends React.Component<CombinedProps, {}> {
     const linodeCount = extendedLinodes.length;
     return (
       <Drawer title="Enable All Backups" open={open} onClose={close}>
-        <Grid container direction={'column'}>
-          <Grid item>
+        <Grid container direction={'column'} spacing={2}>
+          <Grid>
             <Typography variant="body1">
               Three backup slots are executed and rotated automatically: a daily
               backup, a 2-7 day old backup, and an 8-14 day old backup. See our
@@ -186,29 +186,29 @@ export class BackupDrawer extends React.Component<CombinedProps, {}> {
             </Typography>
           </Grid>
           {enableErrors && !isEmpty(enableErrors) && (
-            <Grid item data-testid={'result-notice'}>
+            <Grid data-testid={'result-notice'}>
               <Notice error spacingBottom={0}>
                 {getFailureNotificationText(updatedCount, enableErrors.length)}
               </Notice>
             </Grid>
           )}
           {/* Don't show this if the setting is already active. */}
           {!accountBackups && (
-            <Grid item>
+            <Grid>
               <AutoEnroll
                 enabled={autoEnroll}
                 error={autoEnrollError}
                 toggle={toggle}
               />
             </Grid>
           )}
-          <Grid item>
+          <Grid>
             <DisplayPrice
               price={getTotalPrice(extendedLinodes)}
               interval="mo"
             />
           </Grid>
-          <Grid item>
+          <Grid>
             <ActionsPanel style={{ padding: 0, margin: 0 }}>
               <Button
                 onClick={close}
@@ -230,7 +230,7 @@ export class BackupDrawer extends React.Component<CombinedProps, {}> {
               </Button>
             </ActionsPanel>
           </Grid>
-          <Grid item>
+          <Grid>
             <BackupsTable linodes={extendedLinodes} loading={loading} />
           </Grid>
         </Grid>