refactor: [M3-9265] - Migrate Drawer to ui package (#11789)

## Description 📝

- Migrate `Drawer` from `manager` to `ui` 📁 
- Adds a prop to `Drawer` that allows consumers to pass a `NotFound`
component
- Added a Story for `Drawer` with `NotFound` component as a Prop
- Added a Story for `Drawer` without `NotFound` component as a Prop


## Preview

- WithNotFoundComponent  
![Screenshot 2025-03-14 at 5 32
29 PM](https://github.com/user-attachments/assets/54785e82-d86b-43bb-8a24-7e78a5311f2d)
---
- WithoutNotFoundComponent  
![Screenshot 2025-03-14 at 5 32
36 PM](https://github.com/user-attachments/assets/0ba6de97-e5bb-40c7-9eeb-7c5a50945afc)

## How to test 🧪

### Verification steps
- Check for regressions in Cloud Manager 👀
- Test the component in Storybook 📖
- All tests should pass ✅

<details>
<summary> Author Checklists </summary>

## As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our [contribution
guidelines](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md)
🤏 Splitting feature into small PRs
➕ Adding a
[changeset](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md#writing-a-changeset)
🧪 Providing/improving test coverage
 🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿  Providing accessibility support

<br/>

- [x] I have read and considered all applicable items listed above.

## As an Author, before moving this PR from Draft to Open, I confirmed ✅

- [x] All unit tests are passing
- [x] TypeScript compilation succeeded without errors
- [x] Code passes all linting rules

</details>

Author: hasyed-akamai

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