refactor: [M3-9265] - Migrate Drawer to ui package

Author: hasyed-akamai

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

@@ -1,7 +1,6 @@
+import { Drawer } from '@linode/ui';
 import * as React from 'react';
 
-import { Drawer } from 'src/components/Drawer';
-
 import { TagCell } from './TagCell';
 
 export interface TagDrawerProps {

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

@@ -1,8 +1,7 @@
-import { Notice, StyledLinkButton, Typography } from '@linode/ui';
+import { Drawer, Notice, StyledLinkButton, Typography } from '@linode/ui';
 import React from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
-import { Drawer } from 'src/components/Drawer';
 import { PARENT_USER_SESSION_EXPIRED } from 'src/features/Account/constants';
 import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';
 import { setTokenInLocalStorage } from 'src/features/Account/SwitchAccounts/utils';

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

@@ -1,11 +1,10 @@
-import { Box, Notice, Stack, Typography } from '@linode/ui';
+import { Box, Drawer, Notice, Stack, Typography } from '@linode/ui';
 import { styled } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { DisplayPrice } from 'src/components/DisplayPrice';
-import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -3,6 +3,7 @@ import { Typography } from '@linode/ui';
 import {
   Button,
   Divider,
+  Drawer,
   ErrorState,
   InputAdornment,
   Notice,
@@ -17,7 +18,6 @@ import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Currency } from 'src/components/Currency';
-import { Drawer } from 'src/components/Drawer';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { SupportLink } from 'src/components/SupportLink';
 import { getRestrictedResourceText } from 'src/features/Account/utils';

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/EditBillingContactDrawer.tsx

@@ -1,8 +1,7 @@
+import { Drawer } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Drawer } from 'src/components/Drawer';
-
 import UpdateContactInformationForm from './UpdateContactInformationForm';
 
 const useStyles = makeStyles()(() => ({

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx

@@ -1,8 +1,14 @@
-import { Box, Divider, Notice, TooltipIcon, Typography } from '@linode/ui';
+import {
+  Box,
+  Divider,
+  Drawer,
+  Notice,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
 import Grid from '@mui/material/Grid2';
 import * as React from 'react';
 
-import { Drawer } from 'src/components/Drawer';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { MAXIMUM_PAYMENT_METHODS } from 'src/constants';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
@@ -136,7 +142,6 @@ export const AddPaymentMethodDrawer = (props: Props) => {
             </Grid>
             {!isReadOnly && (
               <Grid
-                container
                 size={{
                   md: 3,
                   xs: 4,
@@ -145,6 +150,7 @@ export const AddPaymentMethodDrawer = (props: Props) => {
                   alignContent: 'center',
                   justifyContent: 'flex-end',
                 }}
+                container
               >
                 <GooglePayChip
                   disabled={disabled}
@@ -173,7 +179,6 @@ export const AddPaymentMethodDrawer = (props: Props) => {
             </Grid>
             {!isReadOnly && (
               <Grid
-                container
                 size={{
                   md: 3,
                   xs: 4,
@@ -182,6 +187,7 @@ export const AddPaymentMethodDrawer = (props: Props) => {
                   alignContent: 'center',
                   justifyContent: 'flex-end',
                 }}
+                container
               >
                 <PayPalErrorBoundary renderError={renderError}>
                   <PayPalChip

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddNotificationChannelDrawer.tsx

@@ -1,11 +1,10 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Autocomplete, Box, Typography } from '@linode/ui';
+import { Autocomplete, Box, Drawer, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import React from 'react';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Drawer } from 'src/components/Drawer';
 
 import { channelTypeOptions } from '../../constants';
 import { getAlertBoxStyles } from '../../Utils/utils';
@@ -190,13 +189,13 @@ export const AddNotificationChannelDrawer = (
                     <Typography variant="h3">To:</Typography>
                   </Grid>
                   <Grid
-                    item
-                    md="auto"
-                    xs={12}
                     sx={{
                       overflow: 'auto',
                       paddingRight: 1,
                     }}
+                    item
+                    md="auto"
+                    xs={12}
                   >
                     <RenderChannelDetails template={selectedTemplate} />
                   </Grid>

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx

@@ -1,10 +1,9 @@
-import { Notice, Typography } from '@linode/ui';
+import { Drawer, Notice, Typography } from '@linode/ui';
 import { useFormik } from 'formik';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

@@ -1,8 +1,7 @@
-import { Divider, Notice, Typography } from '@linode/ui';
+import { Divider, Drawer, Notice, Typography } from '@linode/ui';
 import React, { useState } from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 
 import { DatabaseConfigurationSelect } from './DatabaseConfigurationSelect';

packages/manager/src/features/Domains/CloneDomainDrawer.tsx

@@ -1,4 +1,5 @@
 import {
+  Drawer,
   FormControlLabel,
   Notice,
   Radio,
@@ -10,7 +11,6 @@ import { useFormik } from 'formik';
 import React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Drawer } from 'src/components/Drawer';
 import { useCloneDomainMutation } from 'src/queries/domains';
 import { useGrants, useProfile } from 'src/queries/profile/profile';