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

packages/manager/.changeset/pr-11789-added-1741764243935.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Migrate Drawer to ui package ([#11789](https://github.com/linode/manager/pull/11789))

packages/manager/.changeset/pr-11789-removed-1741764208207.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Migrate Drawer to ui package ([#11789](https://github.com/linode/manager/pull/11789))

packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts

@@ -1,7 +1,6 @@
 /**
  * @file Cypress integration tests for OBJ enrollment and cancellation.
  */
-
 import {
   accountFactory,
   accountSettingsFactory,

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

@@ -1,7 +1,7 @@
+import { Drawer } from '@linode/ui';
 import * as React from 'react';
 
-import { Drawer } from 'src/components/Drawer';
-
+import { NotFound } from '../NotFound';
 import { TagCell } from './TagCell';
 
 export interface TagDrawerProps {
@@ -18,6 +18,7 @@ export const TagDrawer = (props: TagDrawerProps) => {
 
   return (
     <Drawer
+      NotFoundComponent={NotFound}
       onClose={onClose}
       open={open}
       title={'Tags' + (entityLabel ? ` (${entityLabel})` : '')}

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

@@ -1,8 +1,8 @@
-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 { NotFound } from 'src/components/NotFound';
 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';
@@ -123,7 +123,12 @@ export const SwitchAccountDrawer = (props: Props) => {
   }, [onClose, revokeToken, validateParentToken, updateCurrentToken]);
 
   return (
-    <Drawer onClose={onClose} open={open} title="Switch Account">
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={onClose}
+      open={open}
+      title="Switch Account"
+    >
       {createTokenErrorReason && (
         <Notice text={createTokenErrorReason} variant="error" />
       )}

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

@@ -1,24 +1,31 @@
-import { ActionsPanel, Box, Notice, Stack, Typography } from '@linode/ui';
+import {
+  useAccountSettings,
+  useAllLinodesQuery,
+  useMutateAccountSettings,
+} from '@linode/queries';
+import {
+  ActionsPanel,
+  Box,
+  Drawer,
+  Notice,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import { isNumber, pluralize } from '@linode/utilities';
 import { styled } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { DisplayPrice } from 'src/components/DisplayPrice';
-import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
+import { NotFound } from 'src/components/NotFound';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
-import {
-  useAccountSettings,
-  useMutateAccountSettings,
-  useAllLinodesQuery,
-} from '@linode/queries';
 import { useAllTypes } from 'src/queries/types';
 import { getTotalBackupsPrice } from 'src/utilities/pricing/backups';
 import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
@@ -141,7 +148,13 @@ all new Linodes will automatically be backed up.`
   });
 
   return (
-    <Drawer onClose={onClose} open={open} title="Enable All Backups" wide>
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={onClose}
+      open={open}
+      title="Enable All Backups"
+      wide
+    >
       <Stack spacing={2}>
         <Typography variant="body1">
           Three backup slots are executed and rotated automatically: a daily

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

@@ -1,3 +1,4 @@
+import { useGrants, useNotificationsQuery } from '@linode/queries';
 import { Box, Button, Divider, TooltipIcon, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid2';
 import { useTheme } from '@mui/material/styles';
@@ -6,7 +7,6 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
 import { Currency } from 'src/components/Currency';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
-import { useNotificationsQuery, useGrants } from '@linode/queries';
 import { isWithinDays } from 'src/utilities/date';
 
 import { BillingPaper } from '../../BillingDetail';

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

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { paymentFactory } from 'src/factories/billing';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { wrapWithTheme } from 'src/utilities/testHelpers';
 
 import PaymentDrawer, { getMinimumPayment } from './PaymentDrawer';

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

@@ -1,14 +1,16 @@
 import { makePayment } from '@linode/api-v4/lib/account';
+import { accountQueries, useAccount, useProfile } from '@linode/queries';
 import {
-  Typography,
   Button,
   Divider,
+  Drawer,
   ErrorState,
   InputAdornment,
   Notice,
   Stack,
   TextField,
   TooltipIcon,
+  Typography,
 } from '@linode/ui';
 import Grid from '@mui/material/Grid2';
 import { useQueryClient } from '@tanstack/react-query';
@@ -17,12 +19,11 @@ 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 { NotFound } from 'src/components/NotFound';
 import { SupportLink } from 'src/components/SupportLink';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
-import { useAccount, accountQueries, useProfile } from '@linode/queries';
 import { isCreditCardExpired } from 'src/utilities/creditCard';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
@@ -237,7 +238,12 @@ export const PaymentDrawer = (props: Props) => {
   }
 
   return (
-    <Drawer onClose={onClose} open={open} title="Make a Payment">
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={onClose}
+      open={open}
+      title="Make a Payment"
+    >
       <Stack spacing={2}>
         {isReadOnly && (
           <Notice

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

@@ -1,7 +1,8 @@
+import { Drawer } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Drawer } from 'src/components/Drawer';
+import { NotFound } from 'src/components/NotFound';
 
 import UpdateContactInformationForm from './UpdateContactInformationForm';
 
@@ -29,6 +30,7 @@ export const BillingContactDrawer = (props: Props) => {
 
   return (
     <Drawer
+      NotFoundComponent={NotFound}
       className={classes.drawer}
       onClose={onClose}
       open={open}

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

@@ -1,13 +1,20 @@
-import { Box, Divider, Notice, TooltipIcon, Typography } from '@linode/ui';
+import { useProfile } from '@linode/queries';
+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 { NotFound } from 'src/components/NotFound';
 import { MAXIMUM_PAYMENT_METHODS } from 'src/constants';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
-import { useProfile } from '@linode/queries';
 
 import GooglePayChip from '../GooglePayChip';
 import { PayPalChip } from '../PayPalChip';
@@ -86,7 +93,12 @@ export const AddPaymentMethodDrawer = (props: Props) => {
   const disabled = isProcessing || hasMaxPaymentMethods || isReadOnly;
 
   return (
-    <Drawer onClose={onClose} open={open} title="Add Payment Method">
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={onClose}
+      open={open}
+      title="Add Payment Method"
+    >
       {isProcessing ? (
         <LinearProgress
           sx={{
@@ -136,7 +148,6 @@ export const AddPaymentMethodDrawer = (props: Props) => {
             </Grid>
             {!isReadOnly && (
               <Grid
-                container
                 size={{
                   md: 3,
                   xs: 4,
@@ -145,6 +156,7 @@ export const AddPaymentMethodDrawer = (props: Props) => {
                   alignContent: 'center',
                   justifyContent: 'flex-end',
                 }}
+                container
               >
                 <GooglePayChip
                   disabled={disabled}
@@ -173,7 +185,6 @@ export const AddPaymentMethodDrawer = (props: Props) => {
             </Grid>
             {!isReadOnly && (
               <Grid
-                container
                 size={{
                   md: 3,
                   xs: 4,
@@ -182,6 +193,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,10 +1,16 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ActionsPanel, Autocomplete, Box, Typography } from '@linode/ui';
+import {
+  ActionsPanel,
+  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 { Drawer } from 'src/components/Drawer';
+import { NotFound } from 'src/components/NotFound';
 
 import { channelTypeOptions } from '../../constants';
 import { getAlertBoxStyles } from '../../Utils/utils';
@@ -95,7 +101,12 @@ export const AddNotificationChannelDrawer = (
   };
 
   return (
-    <Drawer onClose={resetDrawer} open={open} title="Add Notification Channel">
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={resetDrawer}
+      open={open}
+      title="Add Notification Channel"
+    >
       <FormProvider {...formMethods}>
         <form onSubmit={onSubmit}>
           <Box

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

@@ -1,11 +1,11 @@
-import { ActionsPanel, Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Drawer, Notice, Typography } from '@linode/ui';
 import { useFormik } from 'formik';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
+import { NotFound } from 'src/components/NotFound';
 import {
   ACCESS_CONTROLS_DRAWER_TEXT,
   ACCESS_CONTROLS_DRAWER_TEXT_LEGACY,
@@ -182,7 +182,12 @@ const AddAccessControlDrawer = (props: CombinedProps) => {
 
   const learnMoreLink = isDefaultDB ? LEARN_MORE_LINK : LEARN_MORE_LINK_LEGACY;
   return (
-    <Drawer onClose={onClose} open={open} title="Manage Access">
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={onClose}
+      open={open}
+      title="Manage Access"
+    >
       <React.Fragment>
         {error ? <Notice text={error} variant="error" /> : null}
         {allowListErrors

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

@@ -1,8 +1,8 @@
-import { ActionsPanel, Divider, Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Divider, Drawer, Notice, Typography } from '@linode/ui';
 import React, { useState } from 'react';
 
-import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
+import { NotFound } from 'src/components/NotFound';
 
 import { DatabaseConfigurationSelect } from './DatabaseConfigurationSelect';
 
@@ -24,7 +24,12 @@ export const DatabaseAdvancedConfigurationDrawer = (props: Props) => {
   // The implementation will be updated in the second PR after UI work is completed.
   const engineConfigs = undefined;
   return (
-    <Drawer onClose={onClose} open={open} title="Advanced Configuration">
+    <Drawer
+      NotFoundComponent={NotFound}
+      onClose={onClose}
+      open={open}
+      title="Advanced Configuration"
+    >
       <Typography>
         Advanced parameters to configure your database cluster.
       </Typography>

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

@@ -1,5 +1,7 @@
+import { useGrants, useProfile } from '@linode/queries';
 import {
   ActionsPanel,
+  Drawer,
   FormControlLabel,
   Notice,
   Radio,
@@ -10,9 +12,8 @@ import { useNavigate } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import React from 'react';
 
-import { Drawer } from 'src/components/Drawer';
+import { NotFound } from 'src/components/NotFound';
 import { useCloneDomainMutation } from 'src/queries/domains';
-import { useGrants, useProfile } from '@linode/queries';
 
 import type { Domain } from '@linode/api-v4';
 
@@ -57,6 +58,7 @@ export const CloneDomainDrawer = (props: CloneDomainDrawerProps) => {
 
   return (
     <Drawer
+      NotFoundComponent={NotFound}
       isFetching={isFetching}
       onClose={onClose}
       open={open}