refactor: [M3-6263] - MUI v5 Migration - SRC > Features > EntityTrans…

…fers (#9582)

* initial migration commit

* finished EntityTransfers/ and EntityTransfersCreate/

* Partly done EntityTransfersLanding directory

* finished css migration, have not tested yet

* Added changeset: MUI v5 Migration - SRC > Features > EntityTransfers

* removed test code

* testing formating issues

* fixed inconsistent styling issues

* fixed pr suggestions

---------

Co-authored-by: TylerWJ <tylerwjones99@gmail.com>

packages/manager/.changeset/pr-9582-tech-stories-1692726989780.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - SRC > Features > EntityTransfers ([#9582](https://github.com/linode/manager/pull/9582))

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

@@ -17,8 +17,12 @@ import { useGrants } from 'src/queries/profile';
 import AccountLogins from './AccountLogins';
 
 const Billing = React.lazy(() => import('src/features/Billing'));
-const EntityTransfersLanding = React.lazy(
-  () => import('src/features/EntityTransfers/EntityTransfersLanding')
+const EntityTransfersLanding = React.lazy(() =>
+  import(
+    'src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding'
+  ).then((module) => ({
+    default: module.EntityTransfersLanding,
+  }))
 );
 const Users = React.lazy(() => import('src/features/Users'));
 const GlobalSettings = React.lazy(() => import('./GlobalSettings'));

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

@@ -10,8 +10,12 @@ const AccountLanding = React.lazy(
 const InvoiceDetail = React.lazy(
   () => import('src/features/Billing/InvoiceDetail')
 );
-const EntityTransfersCreate = React.lazy(
-  () => import('src/features/EntityTransfers/EntityTransfersCreate')
+const EntityTransfersCreate = React.lazy(() =>
+  import(
+    'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
+  ).then((module) => ({
+    default: module.EntityTransfersCreate,
+  }))
 );
 const UserDetail = React.lazy(() => import('src/features/Users/UserDetail'));
 

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransferCreate.styles.ts

@@ -0,0 +1,33 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
+
+import { Notice } from 'src/components/Notice/Notice';
+
+export const StyledNotice = styled(Notice, {
+  label: 'StyledNotice',
+})(({ theme }) => ({
+  [theme.breakpoints.down('lg')]: {
+    marginLeft: theme.spacing(),
+  },
+}));
+
+export const StyledRootGrid = styled(Grid, {
+  label: 'StyledRootGrid',
+})(({ theme }) => ({
+  [theme.breakpoints.down('lg')]: {
+    justifyContent: 'center',
+    margin: 0,
+  },
+}));
+
+export const StyledSidebarGrid = styled(Grid, {
+  label: 'StyledSidebarGrid',
+})(({ theme }) => ({
+  [theme.breakpoints.down('lg')]: {
+    '&.MuiGrid-item': {
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+    padding: `0 ${theme.spacing(1)}`,
+  },
+}));

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx

@@ -1,64 +1,42 @@
 import { CreateTransferPayload } from '@linode/api-v4/lib/entity-transfers';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import { curry } from 'ramda';
 import * as React from 'react';
 import { QueryClient, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { Notice } from 'src/components/Notice/Notice';
 import { queryKey, useCreateTransfer } from 'src/queries/entityTransfers';
 import { sendEntityTransferCreateEvent } from 'src/utilities/analytics';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { countByEntity } from '../utilities';
-import LinodeTransferTable from './LinodeTransferTable';
-import TransferCheckoutBar from './TransferCheckoutBar';
-import TransferHeader from './TransferHeader';
+import {
+  StyledNotice,
+  StyledRootGrid,
+  StyledSidebarGrid,
+} from './EntityTransferCreate.styles';
+import { LinodeTransferTable } from './LinodeTransferTable';
+import { TransferCheckoutBar } from './TransferCheckoutBar';
+import { TransferHeader } from './TransferHeader';
 import {
   TransferableEntity,
-  curriedTransferReducer,
   defaultTransferState,
+  transferReducer,
 } from './transferReducer';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  error: {
-    [theme.breakpoints.down('lg')]: {
-      marginLeft: theme.spacing(),
-    },
-  },
-  root: {
-    [theme.breakpoints.down('lg')]: {
-      justifyContent: 'center',
-      margin: 0,
-    },
-  },
-  sidebar: {
-    [theme.breakpoints.down('lg')]: {
-      '&.MuiGrid-item': {
-        paddingLeft: 0,
-        paddingRight: 0,
-      },
-      padding: '0px 8px !important',
-    },
-  },
-}));
-
-export const EntityTransfersCreate: React.FC<{}> = (_) => {
+export const EntityTransfersCreate = () => {
   const { push } = useHistory();
   const { error, isLoading, mutateAsync: createTransfer } = useCreateTransfer();
-  const classes = useStyles();
   const queryClient = useQueryClient();
 
   /**
    * Reducer and helpers for working with the payload/selection process
    */
 
   const [state, dispatch] = React.useReducer(
-    curriedTransferReducer,
+    transferReducer,
     defaultTransferState
   );
 
@@ -115,19 +93,12 @@ export const EntityTransfersCreate: React.FC<{}> = (_) => {
         title="Make a Service Transfer"
       />
       {error ? (
-        <Notice
-          className={classes.error}
+        <StyledNotice
           text={getAPIErrorOrDefault(error)[0].reason}
           variant="error"
         />
       ) : null}
-      <Grid
-        className={classes.root}
-        container
-        direction="row"
-        spacing={3}
-        wrap="wrap"
-      >
+      <StyledRootGrid container direction="row" spacing={3} wrap="wrap">
         <Grid lg={9} md={8} xs={12}>
           <TransferHeader />
           <LinodeTransferTable
@@ -137,7 +108,7 @@ export const EntityTransfersCreate: React.FC<{}> = (_) => {
             selectedLinodes={state.linodes}
           />
         </Grid>
-        <Grid className={classes.sidebar} lg={3} md={4} xs={12}>
+        <StyledSidebarGrid lg={3} md={4} xs={12}>
           <TransferCheckoutBar
             handleSubmit={(payload) =>
               handleCreateTransfer(payload, queryClient)
@@ -146,10 +117,8 @@ export const EntityTransfersCreate: React.FC<{}> = (_) => {
             removeEntities={removeEntitiesFromTransfer}
             selectedEntities={state}
           />
-        </Grid>
-      </Grid>
+        </StyledSidebarGrid>
+      </StyledRootGrid>
     </>
   );
 };
-
-export default EntityTransfersCreate;

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx

@@ -14,7 +14,7 @@ import { useRegionsQuery } from 'src/queries/regions';
 import { useSpecificTypes } from 'src/queries/types';
 import { extendType } from 'src/utilities/extendType';
 
-import TransferTable from './TransferTable';
+import { TransferTable } from './TransferTable';
 import { Entity, TransferEntity } from './transferReducer';
 
 interface Props {
@@ -24,7 +24,7 @@ interface Props {
   selectedLinodes: TransferEntity;
 }
 
-export const LinodeTransferTable = (props: Props) => {
+export const LinodeTransferTable = React.memo((props: Props) => {
   const { handleRemove, handleSelect, handleToggle, selectedLinodes } = props;
   const [searchText, setSearchText] = React.useState('');
 
@@ -96,15 +96,15 @@ export const LinodeTransferTable = (props: Props) => {
       </TableContentWrapper>
     </TransferTable>
   );
-};
+});
 
 interface RowProps {
   handleToggleCheck: () => void;
   isChecked: boolean;
   linode: Linode;
 }
 
-const LinodeRow: React.FC<RowProps> = (props) => {
+const LinodeRow = (props: RowProps) => {
   const { handleToggleCheck, isChecked, linode } = props;
   const typesQuery = useSpecificTypes(linode.type ? [linode.type] : []);
   const type = typesQuery[0]?.data ? extendType(typesQuery[0].data) : undefined;
@@ -136,5 +136,3 @@ export const generateLinodeXFilter = (searchText: string) => {
     label: { '+contains': searchText },
   };
 };
-
-export default React.memo(LinodeTransferTable);

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts

@@ -0,0 +1,76 @@
+import Close from '@mui/icons-material/Close';
+import { styled } from '@mui/material/styles';
+
+import { Button } from 'src/components/Button/Button';
+import { Typography } from 'src/components/Typography';
+
+export const StyledButton = styled(Button, {
+  label: 'StyledButton',
+})(({ theme }) => ({
+  backgroundColor: 'inherit',
+  border: 'none',
+  minWidth: 0,
+  textDecoration: 'none',
+  [theme.breakpoints.down('md')]: {
+    visibility: 'visible',
+  },
+  visibility: 'hidden',
+}));
+
+export const StyledSubmitButton = styled(Button, {
+  label: 'StyledSubmitButton',
+})(({ theme }) => ({
+  marginLeft: 0,
+  marginRight: 0,
+  marginTop: theme.spacing(3),
+  width: '100%',
+}));
+
+export const StyledClose = styled(Close, {
+  label: 'StyledClose',
+})(({ theme }) => ({
+  '& svg': { height: 11, width: 11 },
+  color: theme.color.grey1,
+}));
+
+export const StyledTypography = styled(Typography, {
+  label: 'StyledTypography',
+})(({ theme }) => ({
+  color: theme.color.green,
+  fontSize: '1rem',
+  fontWeight: 'bold',
+  marginTop: theme.spacing(3),
+}));
+
+export const StyledHeaderTypography = styled(Typography, {
+  label: 'StyledHeaderTypography',
+})(({ theme }) => ({
+  color: theme.color.green,
+  fontSize: '1.25rem',
+  fontWeight: 'bold',
+  lineHeight: '1.5rem',
+}));
+
+export const StyledRowDiv = styled('div', {
+  label: 'StyledRowDiv',
+})(({ theme }) => ({
+  '&:first-of-type': {
+    borderTop: `solid 1px ${theme.color.border2}`,
+  },
+  '&:hover > button': {
+    visibility: 'visible',
+  },
+  alignItems: 'center',
+  borderBottom: `solid 1px ${theme.color.border2}`,
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: `2px 0px`,
+}));
+
+export const StyledRowBoxDiv = styled('div', {
+  label: 'StyledRowBoxDiv',
+})(({ theme }) => ({
+  marginTop: theme.spacing(3),
+  maxHeight: '75vh',
+  overflowY: 'auto',
+}));