fix: [M3-7341] - Create Linode from backup: grid fix and cleanup (#9862)

* Grid fix and cleanup * Added changeset: Select backup grid layout * Feedback
linode · Nov 2, 2023 · ec48b0e · ec48b0e
1 parent 369f72a
commit ec48b0e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 41 deletions.
diff --git a/packages/manager/.changeset/pr-9862-fixed-1698853596745.md b/packages/manager/.changeset/pr-9862-fixed-1698853596745.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Select backup grid layout ([#9862](https://github.com/linode/manager/pull/9862))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
@@ -6,22 +6,14 @@ import {
 import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { compose } from 'recompose';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
-import { RenderGuard, RenderGuardProps } from 'src/components/RenderGuard';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { Typography } from 'src/components/Typography';
-import {
-  WithProfileProps,
-  withProfile,
-} from 'src/containers/profile.container';
+import { useProfile } from 'src/queries/profile';
 import { formatDate } from 'src/utilities/formatDate';
-import { omittedProps } from 'src/utilities/omittedProps';
-
-import type { StyledTypographyProps } from './SelectLinodePanel';
 
 export const aggregateBackups = (
   backups: LinodeBackupsResponse
@@ -55,15 +47,13 @@ interface Props {
   selectedLinodeWithBackups?: LinodeWithBackups;
 }
 
-type CombinedProps = Props & WithProfileProps;
-
-const SelectBackupPanel = (props: CombinedProps) => {
+export const SelectBackupPanel = (props: Props) => {
+  const { data: profile } = useProfile();
   const {
     error,
     handleChangeBackup,
     handleChangeBackupInfo,
     loading,
-    profile,
     selectedBackupID,
     selectedLinodeID,
     selectedLinodeWithBackups,
@@ -80,12 +70,13 @@ const SelectBackupPanel = (props: CombinedProps) => {
       ? 'Automatic'
       : 'Snapshot';
     const subheading = formatDate(backup.created, {
-      timezone: profile.data?.timezone,
+      timezone: profile?.timezone,
     });
     const infoName =
       heading === 'Automatic'
         ? 'From automatic backup'
         : `From backup ${heading}`;
+
     return {
       heading,
       infoName,
@@ -126,7 +117,7 @@ const SelectBackupPanel = (props: CombinedProps) => {
           <React.Fragment>
             {aggregatedBackups.length !== 0 ? (
               <StyledTypography component="div">
-                <Grid container>
+                <Grid container spacing={2}>
                   {aggregatedBackups.map((backup) => {
                     return renderCard(backup);
                   })}
@@ -146,8 +137,7 @@ const SelectBackupPanel = (props: CombinedProps) => {
 
 const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
-  shouldForwardProp: omittedProps(['component']),
-})<StyledTypographyProps>(({ theme }) => ({
+})<{ component: string }>(({ theme }) => ({
   padding: `${theme.spacing(2)} 0 0`,
   width: '100%',
 }));
@@ -167,8 +157,3 @@ const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })(
     padding: theme.spacing(1),
   })
 );
-
-export default compose<CombinedProps, Props & RenderGuardProps>(
-  RenderGuard,
-  withProfile
-)(SelectBackupPanel);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
@@ -3,14 +3,14 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import { Box } from 'src/components/Box';
 import { Notice } from 'src/components/Notice/Notice';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Paper } from 'src/components/Paper';
 import { RenderGuard } from 'src/components/RenderGuard';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { Typography } from 'src/components/Typography';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 export interface ExtendedLinode extends Linode {
   heading: string;
@@ -78,13 +78,13 @@ const SelectLinodePanel = (props: Props) => {
               <Typography data-qa-select-linode-header variant="h2">
                 {!!header ? header : 'Select Linode'}
               </Typography>
-              <StyledTypography component="div">
+              <StyledBox>
                 <Grid container spacing={2}>
                   {linodesData.map((linode) => {
                     return renderCard(linode);
                   })}
                 </Grid>
-              </StyledTypography>
+              </StyledBox>
             </StyledPaper>
             <PaginationFooter
               count={count}
@@ -101,12 +101,9 @@ const SelectLinodePanel = (props: Props) => {
   );
 };
 
-export type StyledTypographyProps = { component: string };
-
-const StyledTypography = styled(Typography, {
-  label: 'StyledTypography',
-  shouldForwardProp: omittedProps(['component']),
-})<StyledTypographyProps>(({ theme }) => ({
+const StyledBox = styled(Box, {
+  label: 'StyledBox',
+})(({ theme }) => ({
   padding: `${theme.spacing(2)} 0 0`,
 }));
 

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
@@ -3,18 +3,17 @@ import {
   LinodeBackupsResponse,
   getLinodeBackups,
 } from '@linode/api-v4/lib/linodes';
-import { StyledGrid } from './CommonTabbedContent.styles';
 import { compose as ramdaCompose } from 'ramda';
 import * as React from 'react';
 
 import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { Paper } from 'src/components/Paper';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { reportException } from 'src/exceptionReporting';
 import { extendType } from 'src/utilities/extendType';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 
-import SelectBackupPanel from '../SelectBackupPanel';
+import { SelectBackupPanel } from '../SelectBackupPanel';
 import SelectLinodePanel from '../SelectLinodePanel';
 import {
   BackupFormStateHandlers,
@@ -23,6 +22,7 @@ import {
   WithLinodesTypesRegionsAndImages,
 } from '../types';
 import { extendLinodes, getRegionIDFromLinodeID } from '../utilities';
+import { StyledGrid } from './CommonTabbedContent.styles';
 
 export interface LinodeWithBackups extends Linode {
   currentBackups: LinodeBackupsResponse;
@@ -134,13 +134,6 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
               updateFor={[selectedLinodeID, errors]}
             />
             <SelectBackupPanel
-              updateFor={[
-                selectedLinodeID,
-                selectedBackupID,
-                errors,
-                selectedLinodeWithBackups,
-                isGettingBackups,
-              ]}
               error={hasErrorFor('backup_id') || this.state.backupsError}
               handleChangeBackup={setBackupID}
               handleChangeBackupInfo={this.handleSelectBackupInfo}