From 24d05983c5b0d32651ee7ffb4fcd66f6380e3a15 Mon Sep 17 00:00:00 2001 From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> Date: Wed, 30 Oct 2024 08:48:24 -0400 Subject: [PATCH] refactor: [M3-8641] - Move `Box` component to `ui` package (Part 1) (#11163) * move Box to linode/ui part 1 * remove old story * Added changeset: `Box` component from `manager` to `ui` package, part 1 * move box into its own package in ui package --- packages/manager/src/MainContent.tsx | 2 +- packages/manager/src/Root.tsx | 2 +- .../AreaChart/AccessibleAreaChart.tsx | 3 +- .../src/components/AreaChart/AreaChart.tsx | 2 +- .../src/components/Encryption/Encryption.tsx | 2 +- .../components/EntityHeader/EntityHeader.tsx | 6 +- .../PaymentMethodRow/PaymentMethodRow.tsx | 8 +- .../PaymentMethodRow/ThirdPartyPayment.tsx | 14 +- .../Uploaders/ImageUploader/ImageUploader.tsx | 2 +- .../Agreements/EUAgreementCheckbox.tsx | 2 +- .../Account/Maintenance/MaintenanceTable.tsx | 2 +- .../Account/ObjectStorageSettings.tsx | 2 +- .../SwitchAccounts/ChildAccountList.tsx | 2 +- .../src/features/Backups/BackupDrawer.tsx | 5 +- .../src/features/Backups/BackupsCTA.tsx | 2 +- .../BillingSummary/BillingSummary.tsx | 10 +- .../PaymentDrawer/CreditCard.tsx | 10 +- .../BillingSummary/PromoDisplay.tsx | 11 +- .../ContactInfoPanel/ContactInformation.tsx | 2 +- .../AddPaymentMethodDrawer.tsx | 10 +- .../Billing/InvoiceDetail/InvoiceDetail.tsx | 3 +- .../Alerts/AlertsLanding/AlertsLanding.tsx | 2 +- .../shared/CloudPulseDashboardSelect.tsx | 2 +- .../DatabaseBackups/DatabaseBackups.tsx | 34 ++--- .../DatabaseResize/DatabaseResize.tsx | 128 +++++++++--------- ...atabaseResizeCurrentConfiguration.style.ts | 2 +- .../DatabaseResizeCurrentConfiguration.tsx | 15 +- ...abaseSummaryClusterConfigurationLegacy.tsx | 2 +- ...DatabaseSummaryConnectionDetailsLegacy.tsx | 2 +- .../DatabaseLanding/DatabaseLogo.tsx | 2 +- .../manager/src/features/Events/EventRow.tsx | 2 +- .../Rules/FirewallRuleTable.styles.ts | 2 +- .../Rules/FirewallRuleTable.tsx | 27 ++-- .../FirewallLanding/CreateFirewallDrawer.tsx | 2 +- .../GlobalNotifications/ComplianceBanner.tsx | 2 +- .../VerificationDetailsBanner.tsx | 2 +- .../src/features/Help/StatusBanners.tsx | 10 +- .../SupportSearchLanding.tsx | 3 +- .../Images/ImagesCreate/CreateImageTab.tsx | 2 +- .../Images/ImagesCreate/ImageUpload.tsx | 4 +- .../ImageRegions/ImageRegionRow.tsx | 4 +- .../CreateCluster/ApplicationPlatform.tsx | 3 +- .../CreateCluster/ControlPlaneACLPane.tsx | 3 +- .../CreateCluster/CreateCluster.styles.ts | 6 +- .../CreateCluster/CreateCluster.tsx | 2 +- .../CreateCluster/HAControlPlane.tsx | 3 +- .../KubeCheckoutBar/KubeCheckoutBar.tsx | 2 +- .../KubeCheckoutBar/NodePoolSummary.tsx | 3 +- .../KubeConfigDisplay.tsx | 7 +- .../KubeConfigDrawer.tsx | 2 +- .../KubeControlPaneACLDrawer.tsx | 2 +- .../KubeEntityDetailFooter.tsx | 2 +- .../KubeSummaryPanel.tsx | 2 +- .../NodePoolsDisplay/AddNodePoolDrawer.tsx | 2 +- .../NodePoolsDisplay/NodeActionMenu.tsx | 6 +- .../NodePoolsDisplay/NodePool.tsx | 2 +- .../NodePoolsDisplay/NodeTable.tsx | 2 +- .../KubernetesPlanSelection.tsx | 6 +- .../Linodes/CloneLanding/CloneLanding.tsx | 2 +- .../features/Linodes/LinodeCreate/Actions.tsx | 2 +- .../Linodes/LinodeCreate/Firewall.tsx | 2 +- .../features/Linodes/LinodeCreate/Region.tsx | 2 +- .../Tabs/Backups/BackupSelect.tsx | 5 +- .../Linodes/LinodeCreate/Tabs/Images.tsx | 2 +- .../Tabs/Marketplace/AppDetailDrawer.tsx | 2 +- .../Tabs/Marketplace/AppSelect.tsx | 2 +- .../Tabs/Marketplace/AppsList.tsx | 2 +- .../StackScripts/StackScriptSelectionList.tsx | 3 +- .../UserDefinedFields/UserDefinedFields.tsx | 3 +- .../Linodes/LinodeCreate/TwoStepRegion.tsx | 2 +- .../features/Linodes/LinodeCreate/VPC/VPC.tsx | 2 +- .../Linodes/LinodeCreate/VPC/VPCRanges.tsx | 3 +- .../LinodeCreate/shared/LinodeSelectTable.tsx | 2 +- .../Linodes/LinodeEntityDetail.styles.ts | 2 +- .../Linodes/LinodeEntityDetailBody.tsx | 2 +- .../Linodes/LinodeEntityDetailHeader.tsx | 2 +- .../LinodeBackup/CaptureSnapshot.tsx | 3 +- .../LinodeConfigs/LinodeConfigActionMenu.tsx | 11 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 4 +- .../LinodeConfigs/LinodeConfigs.tsx | 2 +- .../LinodeNetworking/AddIPDrawer.tsx | 2 +- .../LinodeNetworking/LinodeIPAddresses.tsx | 2 +- .../LinodeNetworkingActionMenu.tsx | 2 +- .../TransferHistory.tsx | 10 +- .../LinodeRebuild/RebuildFromImage.tsx | 2 +- .../UserDataAccordion/UserDataAccordion.tsx | 2 +- .../UserDataAccordionHeading.tsx | 2 +- .../LinodeResize/LinodeResize.tsx | 2 +- .../LinodeResizeUnifiedMigrationPanel.tsx | 3 +- .../LinodeSettings/AlertSection.tsx | 3 +- .../LinodesDetail/LinodeSettings/VPCPanel.tsx | 2 +- .../LinodeStorage/LinodeDiskActionMenu.tsx | 2 +- .../LinodeStorage/LinodeDisks.tsx | 2 +- .../LinodeStorage/LinodeVolumes.tsx | 2 +- .../LinodeSummary/LinodeSummary.tsx | 2 +- .../LinodeSummary/NetworkGraphs.tsx | 15 +- .../LinodesLanding/DisplayGroupedLinodes.tsx | 2 +- .../LinodesLanding/RegionTypeFilter.tsx | 2 +- .../MigrateLinode/ConfigureForm.styles.ts | 2 +- .../Linodes/MigrateLinode/MigrateLinode.tsx | 2 +- .../MigrateLinode/MigrationPricing.tsx | 4 +- packages/manager/src/features/Lish/Glish.tsx | 2 +- .../ServiceTargets/LinodeOrIPSelect.tsx | 2 +- .../DetailTabs/Apache/Apache.tsx | 9 +- .../DetailTabs/Disks/Disks.styles.ts | 2 +- .../DetailTabs/MySQL/MySQLLanding.tsx | 7 +- .../LongviewDetail/DetailTabs/NGINX/NGINX.tsx | 7 +- .../DetailTabs/Processes/ProcessesGraphs.tsx | 14 +- .../Processes/ProcessesLanding.styles.ts | 2 +- .../DetailTabs/TopProcesses.tsx | 13 +- .../Longview/LongviewLanding/LongviewList.tsx | 7 +- .../Longview/LongviewPackageDrawer.tsx | 12 +- .../features/Longview/LongviewPackageRow.tsx | 4 +- .../shared/InstallationInstructions.tsx | 7 +- .../ManagedChartPanel.tsx | 7 +- .../Managed/SSHAccess/LinodePubKey.tsx | 2 +- .../NodeBalancers/ConfigNodeIPSelect.tsx | 2 +- .../NodeBalancers/NodeBalancerConfigNode.tsx | 2 +- .../NodeBalancers/NodeBalancerCreate.tsx | 4 +- .../NodeBalancerConfigurations.tsx | 2 +- .../NodeBalancerFirewalls.tsx | 2 +- .../NodeBalancerSummary/TablesPanel.tsx | 2 +- .../PlansPanel/DistributedRegionPlanTable.tsx | 2 +- .../pr-11163-added-1729870035646.md | 5 + .../src/components/Box}/Box.stories.tsx | 3 +- packages/ui/src/components/Box/Box.tsx | 14 ++ packages/ui/src/components/Box/index.ts | 1 + packages/ui/src/components/index.ts | 3 +- 128 files changed, 355 insertions(+), 319 deletions(-) create mode 100644 packages/ui/.changeset/pr-11163-added-1729870035646.md rename packages/{manager/src/components => ui/src/components/Box}/Box.stories.tsx (85%) create mode 100644 packages/ui/src/components/Box/Box.tsx create mode 100644 packages/ui/src/components/Box/index.ts diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx index c328b9bb2a4..225b80692f9 100644 --- a/packages/manager/src/MainContent.tsx +++ b/packages/manager/src/MainContent.tsx @@ -1,3 +1,4 @@ +import { Box } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { RouterProvider } from '@tanstack/react-router'; import * as React from 'react'; @@ -5,7 +6,6 @@ import { Redirect, Route, Switch } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; import Logo from 'src/assets/logo/akamai-logo.svg'; -import { Box } from 'src/components/Box'; import { MainContentBanner } from 'src/components/MainContentBanner'; import { MaintenanceScreen } from 'src/components/MaintenanceScreen'; import { SideMenu } from 'src/components/PrimaryNav/SideMenu'; diff --git a/packages/manager/src/Root.tsx b/packages/manager/src/Root.tsx index c78b6b9c198..3df94224ecb 100644 --- a/packages/manager/src/Root.tsx +++ b/packages/manager/src/Root.tsx @@ -1,9 +1,9 @@ +import { Box } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { Outlet } from '@tanstack/react-router'; import React from 'react'; import Logo from 'src/assets/logo/akamai-logo.svg'; -import { Box } from 'src/components/Box'; import { MainContentBanner } from 'src/components/MainContentBanner'; import { MaintenanceScreen } from 'src/components/MaintenanceScreen'; import { SideMenu } from 'src/components/PrimaryNav/SideMenu'; diff --git a/packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx b/packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx index 42275d0ce0c..cc9071bfa92 100644 --- a/packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx +++ b/packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx @@ -1,8 +1,7 @@ +import { Box } from '@linode/ui'; import { visuallyHidden } from '@mui/utils'; import * as React from 'react'; -import { Box } from 'src/components/Box'; - import { getAccessibleTimestamp } from './utils'; export interface AccessibleAreaChartProps { diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx index 9416c620701..7556630c0dd 100644 --- a/packages/manager/src/components/AreaChart/AreaChart.tsx +++ b/packages/manager/src/components/AreaChart/AreaChart.tsx @@ -1,3 +1,4 @@ +import { Box } from '@linode/ui'; import { Typography, useTheme } from '@mui/material'; import { styled } from '@mui/material/styles'; import { DateTime } from 'luxon'; @@ -14,7 +15,6 @@ import { } from 'recharts'; import { AccessibleAreaChart } from 'src/components/AreaChart/AccessibleAreaChart'; -import { Box } from 'src/components/Box'; import MetricsDisplay from 'src/components/LineGraph/MetricsDisplay'; import { Paper } from 'src/components/Paper'; import { StyledBottomLegend } from 'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel'; diff --git a/packages/manager/src/components/Encryption/Encryption.tsx b/packages/manager/src/components/Encryption/Encryption.tsx index 53d94600f70..6b170531c2d 100644 --- a/packages/manager/src/components/Encryption/Encryption.tsx +++ b/packages/manager/src/components/Encryption/Encryption.tsx @@ -1,7 +1,7 @@ +import { Box } from '@linode/ui'; import { List, ListItem } from '@mui/material'; import * as React from 'react'; -import { Box } from 'src/components/Box'; import { Checkbox } from 'src/components/Checkbox'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/components/EntityHeader/EntityHeader.tsx b/packages/manager/src/components/EntityHeader/EntityHeader.tsx index 4c6f3c8f489..69b2b4254e3 100644 --- a/packages/manager/src/components/EntityHeader/EntityHeader.tsx +++ b/packages/manager/src/components/EntityHeader/EntityHeader.tsx @@ -1,8 +1,10 @@ -import { Box } from 'src/components/Box'; +import { Box } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { Typography, TypographyProps } from 'src/components/Typography'; +import { Typography } from 'src/components/Typography'; + +import type { TypographyProps } from 'src/components/Typography'; export interface HeaderProps { children?: React.ReactNode; diff --git a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx b/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx index 383b3e8b787..334e530d530 100644 --- a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx +++ b/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx @@ -1,11 +1,10 @@ -import { PaymentMethod } from '@linode/api-v4/lib/account/types'; +import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import { Box } from 'src/components/Box'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Chip } from 'src/components/Chip'; import { Paper } from 'src/components/Paper'; import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard'; @@ -13,6 +12,9 @@ import { useMakeDefaultPaymentMethodMutation } from 'src/queries/account/payment import { ThirdPartyPayment } from './ThirdPartyPayment'; +import type { PaymentMethod } from '@linode/api-v4/lib/account/types'; +import type { Action } from 'src/components/ActionMenu/ActionMenu'; + interface Props { /** * Whether the user is a child user. diff --git a/packages/manager/src/components/PaymentMethodRow/ThirdPartyPayment.tsx b/packages/manager/src/components/PaymentMethodRow/ThirdPartyPayment.tsx index 4e45d4fcf80..ba8d1f87c4f 100644 --- a/packages/manager/src/components/PaymentMethodRow/ThirdPartyPayment.tsx +++ b/packages/manager/src/components/PaymentMethodRow/ThirdPartyPayment.tsx @@ -1,18 +1,20 @@ -import { - ThirdPartyPayment as _ThirdPartyPayment, - PaymentMethod, -} from '@linode/api-v4/lib/account'; -import { Theme, useTheme } from '@mui/material/styles'; +import { Box } from '@linode/ui'; +import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import GooglePayIcon from 'src/assets/icons/payment/googlePay.svg'; import PayPalIcon from 'src/assets/icons/payment/payPal.svg'; -import { Box } from 'src/components/Box'; import { Typography } from 'src/components/Typography'; import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard'; +import type { + ThirdPartyPayment as _ThirdPartyPayment, + PaymentMethod, +} from '@linode/api-v4/lib/account'; +import type { Theme } from '@mui/material/styles'; + const useStyles = makeStyles()((theme: Theme) => ({ icon: { // https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx index 7ebfa4ff2bc..e5dc1d7121f 100644 --- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx +++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx @@ -1,10 +1,10 @@ +import { Box } from '@linode/ui'; import { styled } from '@mui/material'; import { Duration } from 'luxon'; import * as React from 'react'; import { useDropzone } from 'react-dropzone'; import { BarPercent } from 'src/components/BarPercent'; -import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx b/packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx index 2772ac26c51..17eced44109 100644 --- a/packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx +++ b/packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx @@ -1,7 +1,7 @@ +import { Box } from '@linode/ui'; import { useTheme } from '@mui/material'; import * as React from 'react'; -import { Box } from 'src/components/Box'; import { Checkbox } from 'src/components/Checkbox'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx index fbdf1c156f9..3a5d82f130c 100644 --- a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx +++ b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx @@ -1,8 +1,8 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ +import { Box } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Box } from 'src/components/Box'; import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV'; import { Hidden } from 'src/components/Hidden'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx index 316847725d7..bbe8717ca9e 100644 --- a/packages/manager/src/features/Account/ObjectStorageSettings.tsx +++ b/packages/manager/src/features/Account/ObjectStorageSettings.tsx @@ -1,8 +1,8 @@ +import { Box } from '@linode/ui'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; -import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index 145799f445b..d2184880199 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -1,8 +1,8 @@ +import { Box } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg'; -import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { CircleProgress } from 'src/components/CircleProgress'; diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx index 78d57897801..3eb601769d6 100644 --- a/packages/manager/src/features/Backups/BackupDrawer.tsx +++ b/packages/manager/src/features/Backups/BackupDrawer.tsx @@ -1,9 +1,9 @@ +import { Box } 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 { Box } from 'src/components/Box'; import { DisplayPrice } from 'src/components/DisplayPrice'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; @@ -31,11 +31,12 @@ import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants'; import { AutoEnroll } from './AutoEnroll'; import { BackupLinodeRow } from './BackupLinodeRow'; import { - EnableBackupsRejectedResult, getFailureNotificationText, useEnableBackupsOnLinodesMutation, } from './utils'; +import type { EnableBackupsRejectedResult } from './utils'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Backups/BackupsCTA.tsx b/packages/manager/src/features/Backups/BackupsCTA.tsx index 6920e171d3e..d7a507f2728 100644 --- a/packages/manager/src/features/Backups/BackupsCTA.tsx +++ b/packages/manager/src/features/Backups/BackupsCTA.tsx @@ -1,7 +1,7 @@ +import { Box } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import * as React from 'react'; -import { Box } from 'src/components/Box'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { Typography } from 'src/components/Typography'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx index b2ceee1d0cc..6a99347fd21 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx @@ -1,12 +1,9 @@ -import { PaymentMethod } from '@linode/api-v4'; -import { ActivePromotion } from '@linode/api-v4/lib/account/types'; -import Grid from '@mui/material/Unstable_Grid2'; +import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; -import { Breakpoint } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; -import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { Currency } from 'src/components/Currency'; import { Divider } from 'src/components/Divider'; @@ -22,7 +19,10 @@ import PaymentDrawer from './PaymentDrawer'; import PromoDialog from './PromoDialog'; import { PromoDisplay } from './PromoDisplay'; +import type { PaymentMethod } from '@linode/api-v4'; +import type { ActivePromotion } from '@linode/api-v4/lib/account/types'; import type { GridSize } from '@mui/material'; +import type { Breakpoint } from '@mui/material/styles'; interface BillingSummaryProps { balance: number; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard.tsx index 1e06f932e0d..bef066d154c 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard.tsx @@ -1,5 +1,4 @@ -import { CardType, CreditCardData } from '@linode/api-v4/lib/account/types'; -import { Theme } from '@mui/material/styles'; +import { Box } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -9,10 +8,15 @@ import DiscoverIcon from 'src/assets/icons/payment/discover.svg'; import JCBIcon from 'src/assets/icons/payment/jcb.svg'; import MastercardIcon from 'src/assets/icons/payment/mastercard.svg'; import VisaIcon from 'src/assets/icons/payment/visa.svg'; -import { Box } from 'src/components/Box'; import { Typography } from 'src/components/Typography'; import { formatExpiry, isCreditCardExpired } from 'src/utilities/creditCard'; +import type { + CardType, + CreditCardData, +} from '@linode/api-v4/lib/account/types'; +import type { Theme } from '@mui/material/styles'; + const useStyles = makeStyles()((theme: Theme) => ({ card: { display: 'flex', diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDisplay.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDisplay.tsx index 15515f288aa..df4288507ef 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDisplay.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDisplay.tsx @@ -1,16 +1,17 @@ -import { - ActivePromotion, - PromotionServiceType, -} from '@linode/api-v4/lib/account/types'; +import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { Box } from 'src/components/Box'; import { Currency } from 'src/components/Currency'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; +import type { + ActivePromotion, + PromotionServiceType, +} from '@linode/api-v4/lib/account/types'; + type PromoDisplayProps = ActivePromotion; export const SERVICE_TYPES: Partial> = { diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx index 04a44a5a303..998c2cfb521 100644 --- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx @@ -1,10 +1,10 @@ +import { Box } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { allCountries } from 'country-region-data'; import * as React from 'react'; import { useHistory, useRouteMatch } from 'react-router-dom'; -import { Box } from 'src/components/Box'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { getRestrictedResourceText } from 'src/features/Account/utils'; diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx index de74330f0df..90289afadcf 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx @@ -1,13 +1,11 @@ -import { PaymentMethod } from '@linode/api-v4/lib/account'; +import { Box } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import { VariantType } from 'notistack'; import * as React from 'react'; -import { Box } from 'src/components/Box'; import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { LinearProgress } from 'src/components/LinearProgress'; -import { Notice, NoticeVariant } from 'src/components/Notice/Notice'; +import { Notice } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { MAXIMUM_PAYMENT_METHODS } from 'src/constants'; @@ -20,6 +18,10 @@ import { PayPalChip } from '../PayPalChip'; import { PayPalErrorBoundary } from '../PayPalErrorBoundary'; import AddCreditCardForm from './AddCreditCardForm'; +import type { PaymentMethod } from '@linode/api-v4/lib/account'; +import type { VariantType } from 'notistack'; +import type { NoticeVariant } from 'src/components/Notice/Notice'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx index 0d8d022c17b..897e6d275e9 100644 --- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx +++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx @@ -1,5 +1,5 @@ import { getInvoice, getInvoiceItems } from '@linode/api-v4/lib/account'; -import { IconButton } from '@linode/ui'; +import { Box, IconButton } from '@linode/ui'; import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -7,7 +7,6 @@ import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { Currency } from 'src/components/Currency'; import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV'; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx index 72a1f01c157..64223dafd21 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx @@ -1,3 +1,4 @@ +import { Box } from '@linode/ui'; import * as React from 'react'; import { Redirect, @@ -7,7 +8,6 @@ import { useRouteMatch, } from 'react-router-dom'; -import { Box } from 'src/components/Box'; import { Paper } from 'src/components/Paper'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; import { Tabs } from 'src/components/Tabs/Tabs'; diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx index cc009df1b56..0d40e2e6231 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx @@ -1,7 +1,7 @@ +import { Box } from '@linode/ui'; import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { Box } from 'src/components/Box'; import { Typography } from 'src/components/Typography'; import { useCloudPulseDashboardsQuery } from 'src/queries/cloudpulse/dashboards'; import { useCloudPulseServiceTypes } from 'src/queries/cloudpulse/services'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index 7fe48d86f24..41848130675 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx @@ -1,4 +1,4 @@ -import type { Engine } from '@linode/api-v4/lib/databases'; +import { Box } from '@linode/ui'; import { FormControl, FormControlLabel, @@ -11,7 +11,8 @@ import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'; import { DateTime } from 'luxon'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { Box } from 'src/components/Box'; + +import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; @@ -22,17 +23,18 @@ import { StyledTypography, useStyles, } from 'src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style'; - -import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { isDateOutsideBackup, isTimeOutsideBackup, useIsDatabasesEnabled, } from 'src/features/Databases/utilities'; import { useDatabaseQuery } from 'src/queries/databases/databases'; + import DatabaseBackupsDialog from './DatabaseBackupsDialog'; import DatabaseBackupsLegacy from './legacy/DatabaseBackupsLegacy'; +import type { Engine } from '@linode/api-v4/lib/databases'; + interface Props { disabled?: boolean; } @@ -69,7 +71,7 @@ const TIME_OPTIONS: TimeOption[] = [ { label: '23:00', value: 23 }, ]; -export type VersionOption = 'newest' | 'dateTime'; +export type VersionOption = 'dateTime' | 'newest'; export const DatabaseBackups = (props: Props) => { const { classes } = useStyles(); @@ -187,10 +189,10 @@ export const DatabaseBackups = (props: Props) => { Date isDateOutsideBackup(date, oldestBackup?.startOf('day')) } + disabled={disabled || versionOption === 'newest'} onChange={handleDateChange} value={selectedDate} /> @@ -201,19 +203,12 @@ export const DatabaseBackups = (props: Props) => { {/* TODO: Replace Time Select to the own custom date-time picker component when it's ready */} isTimeOutsideBackup(option.value, selectedDate!, oldestBackup!) } - label="" isOptionEqualToValue={(option, value) => option.value === value.value } - onChange={(_, newTime) => setSelectedTime(newTime)} - options={TIME_OPTIONS} - placeholder="Choose a time" renderOption={(props, option) => { const { key, ...rest } = props; return ( @@ -227,6 +222,13 @@ export const DatabaseBackups = (props: Props) => { 'data-qa-time-select': true, }, }} + autoComplete={false} + className={classes.timeAutocomplete} + disabled={disabled || !selectedDate || versionOption === 'newest'} + label="" + onChange={(_, newTime) => setSelectedTime(newTime)} + options={TIME_OPTIONS} + placeholder="Choose a time" value={selectedTime} /> @@ -235,11 +237,11 @@ export const DatabaseBackups = (props: Props) => {