From 92acaeb6af0c381f96b71f63b2b11c3c3f0f92da Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 5 Nov 2024 16:46:33 -0500 Subject: [PATCH 1/5] refactor: [M3-8827] - Migrate to package --- .../components/Autocomplete/Autocomplete.tsx | 2 +- .../src/components/CircleProgress/index.ts | 1 - .../DebouncedSearchTextField.tsx | 2 +- .../DrawerContent/DrawerContent.tsx | 2 +- .../components/LoadingIndicator.tsx | 3 +- .../manager/src/components/LinkButton.tsx | 3 +- .../PromiseLoader/PromiseLoader.tsx | 35 +- .../manager/src/components/SplashScreen.tsx | 2 +- .../manager/src/components/SuspenseLoader.tsx | 3 +- .../TableSortCell/TableSortCell.tsx | 11 +- .../src/components/TagCell/TagCell.tsx | 2 +- packages/manager/src/components/TextField.tsx | 2 +- .../TransferDisplay/TransferDisplay.tsx | 2 +- .../src/features/Account/GlobalSettings.tsx | 2 +- .../Account/ObjectStorageSettings.tsx | 2 +- .../SwitchAccounts/ChildAccountList.tsx | 2 +- .../src/features/Betas/BetaDetailsList.tsx | 2 +- .../manager/src/features/Betas/BetaSignup.tsx | 2 +- .../src/features/Billing/BillingDetail.tsx | 2 +- .../PaymentDrawer/GooglePayButton.tsx | 2 +- .../PaymentDrawer/PayPalButton.tsx | 2 +- .../PaymentInfoPanel/GooglePayChip.tsx | 7 +- .../PaymentInfoPanel/PayPalChip.tsx | 18 +- .../PaymentInfoPanel/PaymentMethods.tsx | 7 +- .../Dashboard/CloudPulseDashboard.tsx | 2 +- .../CloudPulseDashboardWithFilters.tsx | 2 +- .../Widget/components/CloudPulseLineGraph.tsx | 2 +- .../DatabaseCreate/DatabaseCreate.tsx | 2 +- .../DatabaseResize/DatabaseResize.tsx | 2 +- .../DatabaseResizeCurrentConfiguration.tsx | 2 +- .../DatabaseSummaryConnectionDetails.tsx | 2 +- ...DatabaseSummaryConnectionDetailsLegacy.tsx | 2 +- .../Databases/DatabaseDetail/index.tsx | 14 +- .../DatabaseLanding/DatabaseLanding.tsx | 4 +- .../Domains/DomainDetail/DomainDetail.tsx | 4 +- .../features/Domains/DomainDetail/index.tsx | 2 +- .../src/features/Domains/DomainsLanding.tsx | 2 +- .../ConfirmTransferDialog.tsx | 13 +- .../EntityTransfersLanding.tsx | 5 +- .../Firewalls/FirewallDetail/index.tsx | 4 +- .../FirewallLanding/FirewallLanding.tsx | 22 +- .../Images/ImagesLanding/ImagesLanding.tsx | 2 +- .../CreateCluster/HAControlPlane.tsx | 2 +- .../CreateCluster/NodePoolPanel.tsx | 2 +- .../KubeCheckoutBar/KubeCheckoutBar.tsx | 2 +- .../KubeClusterSpecs.tsx | 2 +- .../KubeEntityDetailFooter.tsx | 2 +- .../KubernetesClusterDetail.tsx | 4 +- .../NodePoolsDisplay/NodePoolsDisplay.tsx | 2 +- .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx | 2 +- .../UpgradeClusterDialog.tsx | 2 +- .../KubernetesLanding/KubernetesLanding.tsx | 2 +- .../Tabs/Marketplace/AppsList.tsx | 2 +- .../StackScripts/StackScriptDetailsDialog.tsx | 2 +- .../StackScripts/StackScriptSelectionList.tsx | 2 +- .../LinodeBackup/LinodeBackups.tsx | 4 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 2 +- .../LinodeNetworking/IPSharing.tsx | 26 +- .../LinodeNetworking/IPTransfer.tsx | 2 +- .../LinodeNetworking/LinodeIPAddressRow.tsx | 2 +- .../LinodeNetworking/LinodeIPAddresses.tsx | 4 +- .../TransferContent.tsx | 54 ++- .../TransferHistory.tsx | 2 +- .../LinodeResize/LinodeResize.tsx | 2 +- .../LinodeSettings/LinodeWatchdogPanel.tsx | 2 +- .../LinodeSummary/StatsPanel.tsx | 2 +- .../Linodes/LinodesDetail/LinodesDetail.tsx | 2 +- .../LinodeDetailHeader.tsx | 2 +- .../LinodesDetail/LinodesDetailNavigation.tsx | 2 +- .../Linodes/LinodesLanding/LinodesLanding.tsx | 2 +- packages/manager/src/features/Lish/Glish.tsx | 2 +- packages/manager/src/features/Lish/Lish.tsx | 2 +- .../manager/src/features/Lish/Weblish.tsx | 2 +- .../LongviewDetail/DetailTabs/Disks/Disks.tsx | 7 +- .../DetailTabs/Network/NetworkGraphs.tsx | 9 +- .../LongviewDetail/LongviewDetail.tsx | 4 +- .../Longview/LongviewLanding/LongviewList.tsx | 4 +- .../LongviewLanding/LongviewPlans.tsx | 11 +- .../ManagedChartPanel.tsx | 2 +- .../ManagedDashboardCard.tsx | 2 +- .../Managed/Monitors/HistoryDrawer.tsx | 7 +- .../Managed/SSHAccess/LinodePubKey.styles.tsx | 6 +- .../NodeBalancerDetail/NodeBalancerDetail.tsx | 2 +- .../NodeBalancerSummary/TablesPanel.tsx | 6 +- .../features/NodeBalancers/NodeBalancers.tsx | 2 +- .../NodeBalancersLanding.tsx | 2 +- .../NotificationCenterNotifications.tsx | 4 +- .../AccessKeyLanding/AccessKeyDrawer.tsx | 2 +- .../AccessKeyLanding/OMC_AccessKeyDrawer.tsx | 2 +- .../ObjectStorage/BucketDetail/BucketSSL.tsx | 2 +- .../BucketLanding/BucketLanding.tsx | 2 +- .../BucketLanding/OMC_BucketLanding.tsx | 2 +- .../BucketLanding/OveragePricing.tsx | 2 +- .../PlacementGroupsDeleteModal.tsx | 2 +- .../PlacementGroupsDetail.tsx | 2 +- .../PlacementGroupsEditDrawer.tsx | 4 +- .../PlacementGroupsLanding.tsx | 2 +- .../PlacementGroupsUnassignModal.tsx | 2 +- .../AuthenticationSettings.tsx | 2 +- .../SecurityQuestions/SecurityQuestions.tsx | 2 +- .../TwoFactor/EnableTwoFactorForm.tsx | 5 +- .../features/Profile/Referrals/Referrals.tsx | 2 +- .../src/features/Search/SearchLanding.tsx | 4 +- .../SelectStackScriptPanel.tsx | 2 +- .../SelectStackScriptsSection.tsx | 7 +- .../StackScriptBase/StackScriptBase.tsx | 410 +++++++++--------- .../StackScriptCreate/StackScriptCreate.tsx | 2 +- .../StackScriptPanel/StackScriptsSection.tsx | 13 +- .../StackScripts/StackScriptsDetail.tsx | 7 +- .../StackScripts/StackScriptsLanding.tsx | 2 +- .../SupportTicketDetail.tsx | 2 +- .../manager/src/features/Users/UserDetail.tsx | 2 +- .../features/Users/UserPermissions.styles.ts | 2 +- .../src/features/Users/UserPermissions.tsx | 2 +- .../Users/UserProfile/UserProfile.tsx | 2 +- .../VPCs/VPCDetail/SubnetLinodeRow.tsx | 2 +- .../src/features/VPCs/VPCDetail/VPCDetail.tsx | 2 +- .../VPCs/VPCDetail/VPCSubnetsTable.tsx | 2 +- .../features/VPCs/VPCLanding/VPCLanding.tsx | 2 +- .../Volumes/VolumeDrawer/PricePanel.tsx | 2 +- .../Volumes/VolumeDrawer/SizeField.tsx | 2 +- .../src/features/Volumes/VolumesLanding.tsx | 2 +- .../CircleProgress/CircleProgress.stories.tsx | 0 .../CircleProgress/CircleProgress.test.tsx | 12 +- .../CircleProgress/CircleProgress.tsx | 0 .../ui/src/components/CircleProgress/index.ts | 1 + packages/ui/src/components/index.ts | 1 + 127 files changed, 475 insertions(+), 463 deletions(-) delete mode 100644 packages/manager/src/components/CircleProgress/index.ts rename packages/{manager => ui}/src/components/CircleProgress/CircleProgress.stories.tsx (100%) rename packages/{manager => ui}/src/components/CircleProgress/CircleProgress.test.tsx (75%) rename packages/{manager => ui}/src/components/CircleProgress/CircleProgress.tsx (100%) create mode 100644 packages/ui/src/components/CircleProgress/index.ts diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx index a02b78db4a7..be2b95935b1 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box, InputAdornment } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; @@ -6,7 +7,6 @@ import React from 'react'; import { TextField } from 'src/components/TextField'; -import { CircleProgress } from '../CircleProgress'; import { CustomPopper, SelectedIcon, diff --git a/packages/manager/src/components/CircleProgress/index.ts b/packages/manager/src/components/CircleProgress/index.ts deleted file mode 100644 index af27106fa38..00000000000 --- a/packages/manager/src/components/CircleProgress/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CircleProgress } from './CircleProgress'; diff --git a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx index fc62afddd4f..887bc8762ec 100644 --- a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx +++ b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { IconButton, InputAdornment } from '@linode/ui'; import Clear from '@mui/icons-material/Clear'; import Search from '@mui/icons-material/Search'; @@ -5,7 +6,6 @@ import { styled } from '@mui/material/styles'; import * as React from 'react'; import { debounce } from 'throttle-debounce'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TextField } from 'src/components/TextField'; import type { TextFieldProps } from 'src/components/TextField'; diff --git a/packages/manager/src/components/DrawerContent/DrawerContent.tsx b/packages/manager/src/components/DrawerContent/DrawerContent.tsx index a19fb1949a6..2278cda03f7 100644 --- a/packages/manager/src/components/DrawerContent/DrawerContent.tsx +++ b/packages/manager/src/components/DrawerContent/DrawerContent.tsx @@ -1,6 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Notice } from 'src/components/Notice/Notice'; export interface DrawerContentProps { diff --git a/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx b/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx index 88cbadaeeb3..0220686cf22 100644 --- a/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx +++ b/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx @@ -1,8 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - export const LoadingIndicator = () => { return ; }; diff --git a/packages/manager/src/components/LinkButton.tsx b/packages/manager/src/components/LinkButton.tsx index d3d7caa7f09..e4637d45092 100644 --- a/packages/manager/src/components/LinkButton.tsx +++ b/packages/manager/src/components/LinkButton.tsx @@ -1,9 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; - import { StyledLinkButton } from './Button/StyledLinkButton'; import type { Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx b/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx index 955dd85fc43..c0f085b80ac 100644 --- a/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx +++ b/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx @@ -1,7 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - interface State { [name: string]: any; loading: boolean; @@ -22,6 +21,21 @@ export interface PromiseLoaderResponse { export default function preload

(requests: RequestMap

) { return function (Component: React.ComponentType

) { return class LoadedComponent extends React.Component { + static displayName = `PromiseLoader(${ + Component.displayName || Component.name + })`; + handleDone = () => { + if (!this.mounted) { + return; + } + + this.setState((prevState) => ({ ...prevState, loading: false })); + }; + + mounted: boolean = false; + + state = { loading: true }; + componentDidMount() { this.mounted = true; const promises = Object.entries(requests).map(([name, request]) => @@ -50,6 +64,7 @@ export default function preload

(requests: RequestMap

) { Promise.all(promises).then(this.handleDone).catch(this.handleDone); } + componentWillUnmount() { this.mounted = false; } @@ -62,22 +77,6 @@ export default function preload

(requests: RequestMap

) { return ; } - - static displayName = `PromiseLoader(${ - Component.displayName || Component.name - })`; - - handleDone = () => { - if (!this.mounted) { - return; - } - - this.setState((prevState) => ({ ...prevState, loading: false })); - }; - - mounted: boolean = false; - - state = { loading: true }; }; }; } diff --git a/packages/manager/src/components/SplashScreen.tsx b/packages/manager/src/components/SplashScreen.tsx index 4890a2af50d..666ce158d1c 100644 --- a/packages/manager/src/components/SplashScreen.tsx +++ b/packages/manager/src/components/SplashScreen.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { srSpeak } from 'src/utilities/accessibility'; export const SplashScreen = () => { diff --git a/packages/manager/src/components/SuspenseLoader.tsx b/packages/manager/src/components/SuspenseLoader.tsx index fe6fc62fce3..55a245e06f9 100644 --- a/packages/manager/src/components/SuspenseLoader.tsx +++ b/packages/manager/src/components/SuspenseLoader.tsx @@ -1,7 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - interface Props { /** * Ammount of time before the CircleProgress shows diff --git a/packages/manager/src/components/TableSortCell/TableSortCell.tsx b/packages/manager/src/components/TableSortCell/TableSortCell.tsx index 0928cc1787b..67fd8047260 100644 --- a/packages/manager/src/components/TableSortCell/TableSortCell.tsx +++ b/packages/manager/src/components/TableSortCell/TableSortCell.tsx @@ -1,15 +1,14 @@ -import { - TableCellProps as _TableCellProps, - default as TableCell, -} from '@mui/material/TableCell'; +import { CircleProgress } from '@linode/ui'; +import { default as TableCell } from '@mui/material/TableCell'; import TableSortLabel from '@mui/material/TableSortLabel'; -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import SortUp from 'src/assets/icons/sort-up.svg'; import Sort from 'src/assets/icons/unsorted.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; + +import type { Theme } from '@mui/material/styles'; +import type { TableCellProps as _TableCellProps } from '@mui/material/TableCell'; const useStyles = makeStyles()((theme: Theme) => ({ initialIcon: { diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx index 92d667b0f32..edb15701110 100644 --- a/packages/manager/src/components/TagCell/TagCell.tsx +++ b/packages/manager/src/components/TagCell/TagCell.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { IconButton, omittedProps } from '@linode/ui'; import MoreHoriz from '@mui/icons-material/MoreHoriz'; import { styled } from '@mui/material/styles'; @@ -8,7 +9,6 @@ import { Tag } from 'src/components/Tag/Tag'; import { useWindowDimensions } from 'src/hooks/useWindowDimensions'; import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton'; -import { CircleProgress } from '../CircleProgress'; import { AddTag } from './AddTag'; import { TagDrawer } from './TagDrawer'; diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index da82c2b3bbc..0911e835f2e 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box, FormHelperText, InputAdornment, InputLabel } from '@linode/ui'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import { useTheme } from '@mui/material/styles'; @@ -5,7 +6,6 @@ import { default as _TextField } from '@mui/material/TextField'; import { clamp } from 'ramda'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { convertToKebabCase } from 'src/utilities/convertToKebobCase'; diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx index ff3e9b810f8..e89f035f1a3 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Typography } from 'src/components/Typography'; import { useAccountNetworkTransfer } from 'src/queries/account/transfer'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Account/GlobalSettings.tsx b/packages/manager/src/features/Account/GlobalSettings.tsx index 6cd6e48c495..eafd7c681aa 100644 --- a/packages/manager/src/features/Account/GlobalSettings.tsx +++ b/packages/manager/src/features/Account/GlobalSettings.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useAccountSettings, diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx index bbe8717ca9e..63fb9ec995c 100644 --- a/packages/manager/src/features/Account/ObjectStorageSettings.tsx +++ b/packages/manager/src/features/Account/ObjectStorageSettings.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Stack } from 'src/components/Stack'; diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index d2184880199..ec8a62cfd84 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; @@ -5,7 +6,6 @@ import { Waypoint } from 'react-waypoint'; import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg'; import { Button } from 'src/components/Button/Button'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Notice } from 'src/components/Notice/Notice'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Betas/BetaDetailsList.tsx b/packages/manager/src/features/Betas/BetaDetailsList.tsx index 54926a1b8ac..3ef1b6ba465 100644 --- a/packages/manager/src/features/Betas/BetaDetailsList.tsx +++ b/packages/manager/src/features/Betas/BetaDetailsList.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Stack } from 'src/components/Stack'; diff --git a/packages/manager/src/features/Betas/BetaSignup.tsx b/packages/manager/src/features/Betas/BetaSignup.tsx index 6ea06dbc27f..c801544f688 100644 --- a/packages/manager/src/features/Betas/BetaSignup.tsx +++ b/packages/manager/src/features/Betas/BetaSignup.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import { createLazyRoute, @@ -9,7 +10,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress'; import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown'; import { LandingHeader } from 'src/components/LandingHeader/LandingHeader'; import { NotFound } from 'src/components/NotFound'; diff --git a/packages/manager/src/features/Billing/BillingDetail.tsx b/packages/manager/src/features/Billing/BillingDetail.tsx index 18dcac982f6..f4ed8ac9fbb 100644 --- a/packages/manager/src/features/Billing/BillingDetail.tsx +++ b/packages/manager/src/features/Billing/BillingDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import Paper from '@mui/material/Paper'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -5,7 +6,6 @@ import { PayPalScriptProvider } from '@paypal/react-paypal-js'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { PAYPAL_CLIENT_ID } from 'src/constants'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx index 714f1213da9..3825803cccf 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Tooltip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import GooglePayIcon from 'src/assets/icons/payment/gPayButton.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; import { getPaymentLimits } from 'src/features/Billing/billingUtils'; import { gPay, diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx index af9ecd6aaeb..fc4bf8152d1 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx @@ -1,4 +1,5 @@ import { makePayment } from '@linode/api-v4/lib/account/payments'; +import { CircleProgress } from '@linode/ui'; import { Tooltip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { @@ -10,7 +11,6 @@ import { useQueryClient } from '@tanstack/react-query'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { reportException } from 'src/exceptionReporting'; import { getPaymentLimits } from 'src/features/Billing/billingUtils'; import { useAccount } from 'src/queries/account/account'; diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx index b79ac9dadf7..2b6e038b8e3 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx @@ -1,11 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import * as React from 'react'; import { useQueryClient } from '@tanstack/react-query'; +import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import GooglePayIcon from 'src/assets/icons/payment/googlePay.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; -import { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; import { gPay, initGooglePaymentInstance, @@ -13,6 +12,8 @@ import { import { useScript } from 'src/hooks/useScript'; import { useClientToken } from 'src/queries/account/payment'; +import type { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; + const useStyles = makeStyles()(() => ({ button: { '&:hover': { diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx index 69fac104d84..1ab3302de0e 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx @@ -1,26 +1,30 @@ import { addPaymentMethod } from '@linode/api-v4/lib/account/payments'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { BraintreePayPalButtons, - CreateBillingAgreementActions, FUNDING, - OnApproveBraintreeActions, - OnApproveBraintreeData, usePayPalScriptReducer, } from '@paypal/react-paypal-js'; -import { QueryClient, useQueryClient } from '@tanstack/react-query'; +import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import React, { useEffect } from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { reportException } from 'src/exceptionReporting'; -import { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; import { useClientToken } from 'src/queries/account/payment'; import { accountQueries } from 'src/queries/account/queries'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { + CreateBillingAgreementActions, + OnApproveBraintreeActions, + OnApproveBraintreeData, +} from '@paypal/react-paypal-js'; +import type { QueryClient } from '@tanstack/react-query'; +import type { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; + const useStyles = makeStyles()(() => ({ disabled: { // Allows us to disable the pointer on the PayPal button because the SDK does not diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx index 056fc1c7e61..8d9213eab8a 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx @@ -1,13 +1,14 @@ -import { PaymentMethod } from '@linode/api-v4/lib/account/types'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { PaymentMethodRow } from 'src/components/PaymentMethodRow/PaymentMethodRow'; import { Typography } from 'src/components/Typography'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { PaymentMethod } from '@linode/api-v4/lib/account/types'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface Props { error: APIError[] | null | undefined; isChildUser?: boolean | undefined; diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx index 0c7fcb6e4b1..484c18f014e 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards'; import { useResourcesQuery } from 'src/queries/cloudpulse/resources'; diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index cb2ed55152e..a2f48084b5e 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards'; diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 5c3ce2fd3fd..c0c24841b5d 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Box, Typography, useTheme } from '@mui/material'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LineGraph } from 'src/components/LineGraph/LineGraph'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index d2407183f9a..06a5fd4a7e4 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { BetaChip, Paper } from '@linode/ui'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; @@ -6,7 +7,6 @@ import { useFormik } from 'formik'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index d18366b16a6..e0624e85a7d 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { Box, Paper } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormControlLabel } from 'src/components/FormControlLabel'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx index eba42f15ce6..c9e0f4ee6f5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx index 48b122b70ef..4c1a927a0a5 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx @@ -1,11 +1,11 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases'; +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2/Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx index 2f9288bddd3..b6714fe17f0 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx @@ -1,4 +1,5 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases'; +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; @@ -7,7 +8,6 @@ import { makeStyles } from 'tss-react/mui'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index c1594063187..ca14ccdf938 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx @@ -1,14 +1,15 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { matchPath, useHistory, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; +import { BetaChip } from 'src/components/BetaChip/BetaChip'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; -import { Tab, TabLinkList } from 'src/components/Tabs/TabLinkList'; +import { TabLinkList } from 'src/components/Tabs/TabLinkList'; import { TabPanels } from 'src/components/Tabs/TabPanels'; import { Tabs } from 'src/components/Tabs/Tabs'; import DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo'; @@ -22,10 +23,11 @@ import { } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import { useIsDatabasesEnabled } from '../utilities'; + import type { Engine } from '@linode/api-v4/lib/databases/types'; import type { APIError } from '@linode/api-v4/lib/types'; -import { BetaChip } from 'src/components/BetaChip/BetaChip'; -import { useIsDatabasesEnabled } from '../utilities'; +import type { Tab } from 'src/components/Tabs/TabLinkList'; const DatabaseSummary = React.lazy(() => import('./DatabaseSummary')); const DatabaseBackups = React.lazy( @@ -73,8 +75,8 @@ export const DatabaseDetail = () => { } = useEditableLabelState(); const { - isDatabasesMonitorEnabled, isDatabasesMonitorBeta, + isDatabasesMonitorEnabled, } = useIsDatabasesEnabled(); if (error) { @@ -118,9 +120,9 @@ export const DatabaseDetail = () => { if (isMonitorEnabled) { tabs.splice(1, 0, { + chip: isDatabasesMonitorBeta ? : null, routeName: `/databases/${engine}/${id}/monitor`, title: 'Monitor', - chip: isDatabasesMonitorBeta ? : null, }); } diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index 80c6bb91b6d..3ba1c5c5b97 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@mui/material'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; @@ -37,8 +37,8 @@ const DatabaseLanding = () => { const { isDatabasesV2Enabled, - isUserExistingBeta, isDatabasesV2GA, + isUserExistingBeta, isUserNewBeta, } = useIsDatabasesEnabled(); diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx index 4cc6b0f8a6a..9040442281b 100644 --- a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx +++ b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx @@ -1,13 +1,13 @@ +import { Paper } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { TagCell } from 'src/components/TagCell/TagCell'; import { Typography } from 'src/components/Typography'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; diff --git a/packages/manager/src/features/Domains/DomainDetail/index.tsx b/packages/manager/src/features/Domains/DomainDetail/index.tsx index 9d357c8b26e..fdb8bb62e4f 100644 --- a/packages/manager/src/features/Domains/DomainDetail/index.tsx +++ b/packages/manager/src/features/Domains/DomainDetail/index.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; import { useDomainQuery } from 'src/queries/domains'; diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx index beb82cdaf22..0fa6d319784 100644 --- a/packages/manager/src/features/Domains/DomainsLanding.tsx +++ b/packages/manager/src/features/Domains/DomainsLanding.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx index d1f99dab257..50087edd39d 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx @@ -1,14 +1,10 @@ -import { - TransferEntities, - acceptEntityTransfer, -} from '@linode/api-v4/lib/entity-transfers'; -import { APIError } from '@linode/api-v4/lib/types'; +import { acceptEntityTransfer } from '@linode/api-v4/lib/entity-transfers'; +import { CircleProgress } from '@linode/ui'; +import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { useQueryClient } from '@tanstack/react-query'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Notice } from 'src/components/Notice/Notice'; @@ -35,6 +31,9 @@ import { StyledUl, } from './ConfirmTransferDialog.styles'; +import type { TransferEntities } from '@linode/api-v4/lib/entity-transfers'; +import type { APIError } from '@linode/api-v4/lib/types'; + export interface ConfirmTransferDialogProps { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx index 5809b559e20..bb2c3ce7e68 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx @@ -1,8 +1,7 @@ -import { EntityTransfer } from '@linode/api-v4/lib/entity-transfers'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { usePagination } from 'src/hooks/usePagination'; import { @@ -14,6 +13,8 @@ import { TransfersTable } from '../TransfersTable'; import { CreateTransferSuccessDialog } from './CreateTransferSuccessDialog'; import { TransferControls } from './TransferControls'; +import type { EntityTransfer } from '@linode/api-v4/lib/entity-transfers'; + export const EntityTransfersLanding = () => { const [successDialogOpen, setSuccessDialogOpen] = React.useState(true); const [transfer, setTransfer] = React.useState( diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx index b62f4f12eeb..85a97b47c54 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; @@ -16,8 +16,8 @@ import { TabPanels } from 'src/components/Tabs/TabPanels'; import { Tabs } from 'src/components/Tabs/Tabs'; import { useFlags } from 'src/hooks/useFlags'; import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; -import { useFirewallQuery, useMutateFirewall } from 'src/queries/firewalls'; import { useAllFirewallDevicesQuery } from 'src/queries/firewalls'; +import { useFirewallQuery, useMutateFirewall } from 'src/queries/firewalls'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { getErrorStringOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx index 96b3bef8dba..664b60b082f 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; import { Hidden } from 'src/components/Hidden'; @@ -15,14 +15,14 @@ import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell/TableSortCell'; +import { getRestrictedResourceText } from 'src/features/Account/utils'; import { useFlags } from 'src/hooks/useFlags'; import { useOrder } from 'src/hooks/useOrder'; import { usePagination } from 'src/hooks/usePagination'; -import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; +import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; import { useFirewallsQuery } from 'src/queries/firewalls'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; -import { getRestrictedResourceText } from 'src/features/Account/utils'; import { CreateFirewallDrawer } from './CreateFirewallDrawer'; import { FirewallDialog } from './FirewallDialog'; @@ -141,6 +141,13 @@ const FirewallLanding = () => { return ( { ) : undefined } breadcrumbProps={{ pathname: '/firewalls' }} + disabledCreateButton={isFirewallsCreationRestricted} docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-cloud-firewalls" entity="Firewall" - disabledCreateButton={isFirewallsCreationRestricted} onButtonClick={onOpenCreateDrawer} title="Firewalls" - buttonDataAttrs={{ - tooltipText: getRestrictedResourceText({ - action: 'create', - isSingular: false, - resourceType: 'Firewalls', - }), - }} /> diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx index d002d4c97e7..d75bfe36cab 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { IconButton, InputAdornment, Paper } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { useQueryClient } from '@tanstack/react-query'; @@ -9,7 +10,6 @@ import { debounce } from 'throttle-debounce'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Drawer } from 'src/components/Drawer'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx index 30496031138..7c068772590 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Box, FormControl } from '@linode/ui'; import { FormLabel } from '@mui/material'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx index ca09a087b47..055c990ebbd 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx index fcf4339ed35..d40471d549a 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { Typography, styled } from '@mui/material'; import * as React from 'react'; import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx index d7f2407acb3..84a8eba95a9 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx index adcf11e964e..986498ca3bb 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -5,7 +6,6 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TagCell } from 'src/components/TagCell/TagCell'; import { StyledBox, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index 8659eacc529..b08116d9514 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -1,14 +1,14 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils'; import { useAPLAvailability } from 'src/features/Kubernetes/kubeUtils'; +import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils'; import { useAccount } from 'src/queries/account/account'; import { useKubernetesClusterMutation, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index 99a5957085d..5a655a5e2ec 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx index dc4b0aee90f..6969d0824b2 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput'; import { ErrorMessage } from 'src/components/ErrorMessage'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx index b61c0226f54..154be39707a 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx index b12722dd77c..2f9502e10dc 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx index 6874de8d953..39a1270ec35 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; import { useController, useFormContext } from 'react-hook-form'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Stack } from 'src/components/Stack'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx index 7e96c887204..32c16c22946 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx @@ -1,6 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { StackScript } from 'src/components/StackScript/StackScript'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx index 5717962591d..bb4fd3c05b5 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx @@ -1,4 +1,5 @@ import { getAPIFilterFromQuery } from '@linode/search'; +import { CircleProgress } from '@linode/ui'; import { Box, IconButton, InputAdornment } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { useQueryClient } from '@tanstack/react-query'; @@ -8,7 +9,6 @@ import { Waypoint } from 'react-waypoint'; import { debounce } from 'throttle-debounce'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Code } from 'src/components/Code/Code'; import { Stack } from 'src/components/Stack'; import { Table } from 'src/components/Table'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx index 2f54bf79115..162331730e1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx @@ -1,12 +1,12 @@ +import { Paper } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import { Box, Stack } from '@mui/material'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Paper } from '@linode/ui'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index f0ad6916711..9d72231e862 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box, FormControl, FormHelperText } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -10,7 +11,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx index 4d56a83b079..7563ca30e83 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx @@ -1,17 +1,14 @@ -import { Linode } from '@linode/api-v4/lib/linodes'; -import { IPRangeInformation } from '@linode/api-v4/lib/networking'; -import { APIError } from '@linode/api-v4/lib/types'; -import Grid from '@mui/material/Unstable_Grid2'; +import { CircleProgress } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import { remove, uniq, update } from 'ramda'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Divider } from 'src/components/Divider'; -import Select, { Item } from 'src/components/EnhancedSelect/Select'; +import Select from 'src/components/EnhancedSelect/Select'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; @@ -30,6 +27,11 @@ import { useAllDetailedIPv6RangesQuery } from 'src/queries/networking/networking import { areArraysEqual } from 'src/utilities/areArraysEqual'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; +import type { Linode } from '@linode/api-v4/lib/linodes'; +import type { IPRangeInformation } from '@linode/api-v4/lib/networking'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Item } from 'src/components/EnhancedSelect/Select'; + interface Props { linodeId: number; onClose: () => void; @@ -451,10 +453,10 @@ export const IPRow: React.FC = React.memo((props) => { @@ -521,23 +523,23 @@ export const IPSharingRow: React.FC = React.memo((props) => { {handleDelete ? ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx index bea6fc91ef4..8eacf06e647 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { @@ -16,7 +17,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx index c9aae1fb1aa..2aec79e2b61 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { parse as parseIP } from 'ipaddr.js'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { LinkButton } from 'src/components/LinkButton'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx index 15421aec60d..d6c5e85aaf9 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx @@ -1,13 +1,13 @@ +import { Paper } from '@linode/ui'; import { Box } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import OrderBy from 'src/components/OrderBy'; -import { Paper } from '@linode/ui'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { Stack } from 'src/components/Stack'; import { Table } from 'src/components/Table'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx index c0b65afd2e6..9f5567a37d0 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx @@ -1,9 +1,9 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { BarPercent } from 'src/components/BarPercent'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Notice } from 'src/components/Notice/Notice'; import { @@ -90,32 +90,30 @@ export const TransferContent = (props: ContentProps) => { value={Math.ceil(linodeUsagePercent)} valueBuffer={Math.ceil(totalUsagePercent)} /> - <> - - - {linodeLabel} ({linodeUsedInGB} GB - {Math.ceil(linodeUsagePercent)} - %) - - - - - {isDynamicPricingDC - ? `${regionName} Transfer Used (${totalUsedInGB} GB - ${Math.ceil( - totalUsagePercent - )}%)` - : `Global Pool Used (${totalUsedInGB} GB - ${Math.ceil( - totalUsagePercent - )}%)`} - - - - - {isDynamicPricingDC - ? `${regionName} Transfer Remaining (${remainingInGB} GB)` - : `Global Pool Remaining (${remainingInGB} GB)`} - - - + + + {linodeLabel} ({linodeUsedInGB} GB - {Math.ceil(linodeUsagePercent)} + %) + + + + + {isDynamicPricingDC + ? `${regionName} Transfer Used (${totalUsedInGB} GB - ${Math.ceil( + totalUsagePercent + )}%)` + : `Global Pool Used (${totalUsedInGB} GB - ${Math.ceil( + totalUsagePercent + )}%)`} + + + + + {isDynamicPricingDC + ? `${regionName} Transfer Remaining (${remainingInGB} GB)` + : `Global Pool Remaining (${remainingInGB} GB)`} + + ); }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx index 5fcdab4f038..f9c3ef7fe04 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; @@ -8,7 +9,6 @@ import * as React from 'react'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx index 65989e5796d..55cb3877107 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { useFormik } from 'formik'; @@ -6,7 +7,6 @@ import * as React from 'react'; import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Divider } from 'src/components/Divider'; import { ErrorMessage } from 'src/components/ErrorMessage'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx index c94d597c3a3..2626759971e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { Box, Stack } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; -import { CircleProgress } from 'src/components/CircleProgress'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Notice } from 'src/components/Notice/Notice'; import { Toggle } from 'src/components/Toggle/Toggle'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx index d6a3576cb9b..d4625c5dd47 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx @@ -1,6 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Typography } from 'src/components/Typography'; interface Props { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx index e6e285c8bbd..645a7018fc6 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -9,7 +10,6 @@ import { useRouteMatch, } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx index 16d3706d31f..d1c6eb1da15 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx index dccfa5c7e00..3949fa21835 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { @@ -7,7 +8,6 @@ import { useRouteMatch, } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx index 72d21d9f21e..8c2b2aa11d1 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { Link, withRouter } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Lish/Glish.tsx b/packages/manager/src/features/Lish/Glish.tsx index bccf58d5fd4..426a3bdcb98 100644 --- a/packages/manager/src/features/Lish/Glish.tsx +++ b/packages/manager/src/features/Lish/Glish.tsx @@ -1,9 +1,9 @@ /* eslint-disable no-unused-expressions */ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import * as React from 'react'; import { VncScreen } from 'react-vnc'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import type { LinodeLishData } from '@linode/api-v4/lib/linodes'; diff --git a/packages/manager/src/features/Lish/Lish.tsx b/packages/manager/src/features/Lish/Lish.tsx index 1cbb251f1de..f935de8126a 100644 --- a/packages/manager/src/features/Lish/Lish.tsx +++ b/packages/manager/src/features/Lish/Lish.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; diff --git a/packages/manager/src/features/Lish/Weblish.tsx b/packages/manager/src/features/Lish/Weblish.tsx index 3b7754871b1..b1c40220f4d 100644 --- a/packages/manager/src/features/Lish/Weblish.tsx +++ b/packages/manager/src/features/Lish/Weblish.tsx @@ -1,8 +1,8 @@ /* eslint-disable scanjs-rules/call_addEventListener */ +import { CircleProgress } from '@linode/ui'; import { Terminal } from '@xterm/xterm'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { ParsePotentialLishErrorString, diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx index 64222f5404c..4fda02f2e4a 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx @@ -1,16 +1,17 @@ -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; -import { WithStartAndEnd } from '../../../request.types'; import { useGraphs } from '../OverviewGraphs/useGraphs'; import { DiskGraph } from './DiskGraph'; import { StyledBox, StyledTimeRangeSelect } from './Disks.styles'; +import type { WithStartAndEnd } from '../../../request.types'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface Props { clientAPIKey: string; clientID: number; diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx index a3c858b2d1d..818140d8389 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; @@ -12,12 +12,13 @@ import { statMax, } from 'src/features/Longview/shared/utilities'; -import { +import { convertData } from '../../../shared/formatters'; +import GraphCard from '../../GraphCard'; + +import type { InboundOutboundNetwork, LongviewNetworkInterface, } from '../../../request.types'; -import { convertData } from '../../../shared/formatters'; -import GraphCard from '../../GraphCard'; interface Props { end: number; diff --git a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx index 3163e954b25..8b0d90187be 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx @@ -1,15 +1,15 @@ +import { Paper } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import { pathOr } from 'ramda'; import * as React from 'react'; import { matchPath } from 'react-router-dom'; import { compose } from 'recompose'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx index 4e1359668de..a2ee7c71e68 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx @@ -1,12 +1,12 @@ +import { Paper } from '@linode/ui'; import { Box } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { LongviewListRows } from './LongviewListRows'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx index 0d6304542f3..b049b63a5bc 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx @@ -1,17 +1,15 @@ import { - LongviewSubscription, getActiveLongviewPlan, updateActiveLongviewPlan, } from '@linode/api-v4/lib/longview'; -import { APIError } from '@linode/api-v4/lib/types'; +import { Paper } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { Radio } from 'src/components/Radio/Radio'; import { SupportLink } from 'src/components/SupportLink'; import { TableBody } from 'src/components/TableBody'; @@ -20,7 +18,6 @@ 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 { UseAPIRequest } from 'src/hooks/useAPIRequest'; import { useAccountSettings } from 'src/queries/account/settings'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; @@ -36,6 +33,10 @@ import { StyledTableRow, } from './LongviewPlans.styles'; +import type { LongviewSubscription } from '@linode/api-v4/lib/longview'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { UseAPIRequest } from 'src/hooks/useAPIRequest'; + // If an account has the "free" Longview plan, // longview_subscription will be {}. We'd rather use // a string identifer in this component to keep track of the "free" plan, so diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx index d8290803e1c..f5163032a2f 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx index e824eace561..9bad1f8d7fe 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useAllManagedIssuesQuery, diff --git a/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx b/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx index 4229160b091..85dbe89200f 100644 --- a/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx +++ b/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx @@ -1,15 +1,16 @@ -import { ManagedIssue } from '@linode/api-v4/lib/managed'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { IssueCalendar } from './IssueCalendar'; +import type { ManagedIssue } from '@linode/api-v4/lib/managed'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface HistoryDrawerProps { error?: APIError[] | null; issues: ManagedIssue[] | undefined; diff --git a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx index 5c4730043d4..c11fc906a6b 100644 --- a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx @@ -1,9 +1,9 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Paper } from '@linode/ui'; +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import SSHKeyIcon from 'src/assets/icons/ssh-key.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; export const StyledCopyToClipboardGrid = styled(Grid, { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx index 14ce668e8ca..abd086eed87 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -7,7 +8,6 @@ import { useParams, } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index b610a54444f..7af90fed2aa 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -1,14 +1,14 @@ +import { Paper } from '@linode/ui'; import { Box } from '@linode/ui'; -import { useTheme } from '@mui/material/styles'; +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { useParams } from 'react-router-dom'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { formatBitsPerSecond } from 'src/features/Longview/shared/utilities'; import { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx index 5af50f420d8..66084266b3f 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { Route, Switch } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; const NodeBalancerDetail = React.lazy(() => diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx index 21f130e327f..7b17b3496d2 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; diff --git a/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx b/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx index 8a32e960cf6..818dc19a083 100644 --- a/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx +++ b/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx @@ -1,9 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; -import { useStyles } from '../NotificationCenter.styles'; import { StyledCaret, StyledEmptyMessage, @@ -11,6 +10,7 @@ import { StyledLoadingContainer, StyledNotificationCenterItem, } from '../NotificationCenter.styles'; +import { useStyles } from '../NotificationCenter.styles'; import type { NotificationCenterNotificationsItem } from '../types'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx index ec1772b47c2..7bea46068df 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { createObjectStorageKeysSchema } from '@linode/validation/lib/objectStorageKeys.schema'; import { Formik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index d2800c937b5..3c2ec2c908b 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { createObjectStorageKeysSchema, updateObjectStorageKeysSchema, @@ -6,7 +7,6 @@ import { useFormik } from 'formik'; import React, { useEffect, useState } from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index c410769f1db..b36f2900ace 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -7,7 +8,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index 0c8115d8b5c..035f03b5619 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index df19e2f4efa..ee4513038ae 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx index 7b7b1b2513b..380e893f081 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { styled } from '@mui/material/styles'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; import { useNetworkTransferPricesQuery } from 'src/queries/networkTransfer'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx index 383bbc74093..5b4a6401973 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx index fce4cd920c0..4e00acc0745 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx @@ -1,9 +1,9 @@ import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4'; +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx index 2689d6229a1..18066730425 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx @@ -1,7 +1,8 @@ import { - PLACEMENT_GROUP_TYPES, PLACEMENT_GROUP_POLICIES, + PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; +import { CircleProgress } from '@linode/ui'; import { updatePlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -9,7 +10,6 @@ import * as React from 'react'; import { useParams } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx index cdf640b57ba..f6c3a75f986 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx index 5d41f301424..23c4bed7211 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useParams } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { NotFound } from 'src/components/NotFound'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx index efba74259d0..ef0038314fa 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx index e0cba8feed9..cb0d7119f54 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useFormik } from 'formik'; @@ -5,7 +6,6 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx index 118739bf97c..738959a3c66 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx @@ -1,8 +1,7 @@ import { confirmTwoFactor } from '@linode/api-v4/lib/profile'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; @@ -11,6 +10,8 @@ import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; import { ConfirmToken } from './ConfirmToken'; import { QRCodeForm } from './QRCodeForm'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface Props { loading: boolean; onCancel: () => void; diff --git a/packages/manager/src/features/Profile/Referrals/Referrals.tsx b/packages/manager/src/features/Profile/Referrals/Referrals.tsx index 6ea34956725..ecf9d27fd0c 100644 --- a/packages/manager/src/features/Profile/Referrals/Referrals.tsx +++ b/packages/manager/src/features/Profile/Referrals/Referrals.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -6,7 +7,6 @@ import * as React from 'react'; import Step1 from 'src/assets/referrals/step-1.svg'; import Step2 from 'src/assets/referrals/step-2.svg'; import Step3 from 'src/assets/referrals/step-3.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx index 4ed6f58a824..97e28682774 100644 --- a/packages/manager/src/features/Search/SearchLanding.tsx +++ b/packages/manager/src/features/Search/SearchLanding.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import { equals } from 'ramda'; import * as React from 'react'; import { debounce } from 'throttle-debounce'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useAPISearch } from 'src/features/Search/useAPISearch'; @@ -28,6 +28,7 @@ import { isNilOrEmpty } from 'src/utilities/isNilOrEmpty'; import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; +import { useIsDatabasesEnabled } from '../Databases/utilities'; import { getImageLabelForLinode } from '../Images/utils'; import { ResultGroup } from './ResultGroup'; import './searchLanding.css'; @@ -43,7 +44,6 @@ import withStoreSearch from './withStoreSearch'; import type { SearchProps } from './withStoreSearch'; import type { RouteComponentProps } from 'react-router-dom'; -import { useIsDatabasesEnabled } from '../Databases/utilities'; const displayMap = { buckets: 'Buckets', diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx index 246c633d453..eaff8e4fe95 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx @@ -1,10 +1,10 @@ import { getStackScript } from '@linode/api-v4/lib/stackscripts'; +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import * as React from 'react'; import { compose } from 'recompose'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx index 6d3501573a0..cab45abec89 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx @@ -1,8 +1,6 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TableBody } from 'src/components/TableBody'; import { TableRow } from 'src/components/TableRow'; import { useProfile } from 'src/queries/profile/profile'; @@ -12,6 +10,9 @@ import { truncate } from 'src/utilities/truncate'; import { StyledStackScriptSectionTableCell } from '../CommonStackScript.styles'; import StackScriptSelectionRow from './StackScriptSelectionRow'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; + interface Props { currentUser: string; data: StackScript[]; diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index e08a0db4129..f29e1b75358 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -1,22 +1,15 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; -import { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import { pathOr } from 'ramda'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; import { compose } from 'recompose'; import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Notice } from 'src/components/Notice/Notice'; -import { - WithProfileProps, - withProfile, -} from 'src/containers/profile.container'; -import { WithQueryClientProps } from 'src/containers/withQueryClient.container'; +import { withProfile } from 'src/containers/profile.container'; import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getDisplayName } from 'src/utilities/getDisplayName'; @@ -25,11 +18,9 @@ import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; import { StackScriptTableHead } from '../Partials/StackScriptTableHead'; import { - AcceptedFilters, generateCatchAllFilter, generateSpecificFilter, } from '../stackScriptUtils'; -import { StackScriptsRequest } from '../types'; import { StyledContentDiv, StyledDebouncedSearchTextfield, @@ -40,6 +31,15 @@ import { } from './StackScriptBase.styles'; import { StackScriptsEmptyLandingState } from './StackScriptsEmptyLandingPage'; +import type { AcceptedFilters } from '../stackScriptUtils'; +import type { StackScriptsRequest } from '../types'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import type { RouteComponentProps } from 'react-router-dom'; +import type { WithProfileProps } from 'src/containers/profile.container'; +import type { WithQueryClientProps } from 'src/containers/withQueryClient.container'; + type CurrentFilter = 'deploys' | 'label' | 'revision'; type SortOrder = 'asc' | 'desc'; @@ -102,199 +102,6 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( const { isSelecting, useQueryString } = options; class EnhancedComponent extends React.Component { - componentDidMount() { - this.mounted = true; - // If the URL contains a QS param called "query" treat it as a filter. - const query = getQueryParamFromQueryString( - this.props.location.search, - 'query' - ); - if (query) { - return this.handleSearch(query); - } - - return this.getDataAtPage(1); - } - - componentWillUnmount() { - this.mounted = false; - } - - render() { - const { - allStackScriptsLoaded, - currentFilterType, - didSearch, - error, - fieldError, - getMoreStackScriptsFailed, - gettingMoreStackScripts, - isSearching, - isSorting, - listOfStackScripts, - sortOrder, - successMessage, - } = this.state; - - const { grants, profile } = this.props; - - const userCannotCreateStackScripts = - Boolean(profile.data?.restricted) && - !grants.data?.global.add_stackscripts; - - if (error) { - return ( -
- -
- ); - } - - if (this.state.loading) { - return ( - - - - ); - } - - // Use the query string if the argument has been specified. - const query = useQueryString - ? getQueryParamFromQueryString(this.props.location.search, 'query') - : undefined; - - return ( - - {fieldError && fieldError.reason && ( - - )} - {successMessage && } - {/* - * We only want to show this empty state on the initial GET StackScripts request - * If the user is searching and 0 results come back, we just want to show - * an empty table, rather than showing a message indicating no StackScripts exist - */} - {!didSearch && - listOfStackScripts && - listOfStackScripts.length === 0 ? ( - - {userCannotCreateStackScripts ? ( - - You don’t have any StackScripts to select from. - - ) : ( - - )} - - ) : ( - - - - - - - - - - {/* - * show loading indicator if we're getting more stackscripts - * and if we're not showing the "get more stackscripts" button - */} - {gettingMoreStackScripts && !isSorting && ( -
- -
- )} - - )} - {/* - * if we're sorting, or if we already loaded all results - * or if we're in the middle of getting more results, don't render - * the lazy load trigger - */} - {!isSorting && !allStackScriptsLoaded && !gettingMoreStackScripts && ( -
- {/* - * If the lazy-load failed (marked by the catch in getNext), - * show the "Show more StackScripts button - * Otherwise, try to lazy load some more dang stackscripts - */} - {!getMoreStackScriptsFailed ? ( - - {/* - * The reason for this empty div is that there was some wonkiness when - * scrolling to the waypoint with trackpads. For some reason, the Waypoint - * would never be scrolled into view no matter how much you scrolled on the - * trackpad. Especially finicky at zoomed in browser sizes - */} -
- - ) : ( - - )} -
- )} - - ); - } - static displayName = `WithStackScriptBase(${getDisplayName(Component)})`; generateFilterInfo = (value: CurrentFilter): FilterInfo => { @@ -599,6 +406,199 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( usesKubeImage = (stackScriptImages: string[]) => stackScriptImages.some((imageId) => isLinodeKubeImageId(imageId)); + + componentDidMount() { + this.mounted = true; + // If the URL contains a QS param called "query" treat it as a filter. + const query = getQueryParamFromQueryString( + this.props.location.search, + 'query' + ); + if (query) { + return this.handleSearch(query); + } + + return this.getDataAtPage(1); + } + + componentWillUnmount() { + this.mounted = false; + } + + render() { + const { + allStackScriptsLoaded, + currentFilterType, + didSearch, + error, + fieldError, + getMoreStackScriptsFailed, + gettingMoreStackScripts, + isSearching, + isSorting, + listOfStackScripts, + sortOrder, + successMessage, + } = this.state; + + const { grants, profile } = this.props; + + const userCannotCreateStackScripts = + Boolean(profile.data?.restricted) && + !grants.data?.global.add_stackscripts; + + if (error) { + return ( +
+ +
+ ); + } + + if (this.state.loading) { + return ( + + + + ); + } + + // Use the query string if the argument has been specified. + const query = useQueryString + ? getQueryParamFromQueryString(this.props.location.search, 'query') + : undefined; + + return ( + + {fieldError && fieldError.reason && ( + + )} + {successMessage && } + {/* + * We only want to show this empty state on the initial GET StackScripts request + * If the user is searching and 0 results come back, we just want to show + * an empty table, rather than showing a message indicating no StackScripts exist + */} + {!didSearch && + listOfStackScripts && + listOfStackScripts.length === 0 ? ( + + {userCannotCreateStackScripts ? ( + + You don’t have any StackScripts to select from. + + ) : ( + + )} + + ) : ( + + + + + + + + + + {/* + * show loading indicator if we're getting more stackscripts + * and if we're not showing the "get more stackscripts" button + */} + {gettingMoreStackScripts && !isSorting && ( +
+ +
+ )} + + )} + {/* + * if we're sorting, or if we already loaded all results + * or if we're in the middle of getting more results, don't render + * the lazy load trigger + */} + {!isSorting && !allStackScriptsLoaded && !gettingMoreStackScripts && ( +
+ {/* + * If the lazy-load failed (marked by the catch in getNext), + * show the "Show more StackScripts button + * Otherwise, try to lazy load some more dang stackscripts + */} + {!getMoreStackScriptsFailed ? ( + + {/* + * The reason for this empty div is that there was some wonkiness when + * scrolling to the waypoint with trackpads. For some reason, the Waypoint + * would never be scrolled into view no matter how much you scrolled on the + * trackpad. Especially finicky at zoomed in browser sizes + */} +
+ + ) : ( + + )} +
+ )} + + ); + } } return compose(withRouter, withProfile)(EnhancedComponent); diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx index 0d232b42e56..9ce60294a70 100644 --- a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx @@ -3,6 +3,7 @@ import { getStackScript, updateStackScript, } from '@linode/api-v4/lib/stackscripts'; +import { CircleProgress } from '@linode/ui'; import { equals } from 'ramda'; import * as React from 'react'; import { withRouter } from 'react-router-dom'; @@ -10,7 +11,6 @@ import { compose } from 'recompose'; import { debounce } from 'throttle-debounce'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx index cb6c1bce806..dc2e431955f 100644 --- a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx @@ -1,14 +1,9 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TableBody } from 'src/components/TableBody'; import { TableRow } from 'src/components/TableRow'; -import { - StackScriptCategory, - canUserModifyAccountStackScript, -} from 'src/features/StackScripts/stackScriptUtils'; +import { canUserModifyAccountStackScript } from 'src/features/StackScripts/stackScriptUtils'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { formatDate } from 'src/utilities/formatDate'; import { stripImageName } from 'src/utilities/stripImageName'; @@ -16,6 +11,10 @@ import { stripImageName } from 'src/utilities/stripImageName'; import { StyledStackScriptSectionTableCell } from '../CommonStackScript.styles'; import { StackScriptRow } from './StackScriptRow'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { StackScriptCategory } from 'src/features/StackScripts/stackScriptUtils'; + export interface Props { // change until we're actually using it. category: StackScriptCategory | string; diff --git a/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx b/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx index d1f8e8a51b9..22de1ca959e 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx @@ -1,13 +1,11 @@ import { - StackScript, getStackScript, updateStackScript, } from '@linode/api-v4/lib/stackscripts'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { StackScript as _StackScript } from 'src/components/StackScript/StackScript'; @@ -20,6 +18,9 @@ import { getStackScriptUrl, } from './stackScriptUtils'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { APIError } from '@linode/api-v4/lib/types'; + export const StackScriptsDetail = () => { const { _hasGrant, _isRestrictedUser, profile } = useAccountManagement(); const { data: grants } = useGrants(); diff --git a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx index 1101d6b33c1..04a27a7b504 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx index be966b504cc..855d9f1495a 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -6,7 +7,6 @@ import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Users/UserDetail.tsx b/packages/manager/src/features/Users/UserDetail.tsx index 6bba93cb2df..795cd77f413 100644 --- a/packages/manager/src/features/Users/UserDetail.tsx +++ b/packages/manager/src/features/Users/UserDetail.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; diff --git a/packages/manager/src/features/Users/UserPermissions.styles.ts b/packages/manager/src/features/Users/UserPermissions.styles.ts index a4dd0c9e512..5b7056d2caa 100644 --- a/packages/manager/src/features/Users/UserPermissions.styles.ts +++ b/packages/manager/src/features/Users/UserPermissions.styles.ts @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; -import { CircleProgress } from 'src/components/CircleProgress'; import Select from 'src/components/EnhancedSelect/Select'; export const StyledSelect = styled(Select, { diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index 8bad43671f2..d152b6be2f3 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -4,6 +4,7 @@ import { updateGrants, updateUser, } from '@linode/api-v4/lib/account'; +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { Paper } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; @@ -12,7 +13,6 @@ import { compose, flatten, lensPath, omit, set } from 'ramda'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx index d535ed50dcf..645fe5a7762 100644 --- a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx +++ b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import React from 'react'; import { useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx index 725f74c4bb3..bc808808fd1 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import ErrorOutline from '@mui/icons-material/ErrorOutline'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Hidden } from 'src/components/Hidden'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx index 48c43928aba..f25b554ef6d 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; @@ -6,7 +7,6 @@ import * as React from 'react'; import { useParams } from 'react-router-dom'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx index f8ccdc60d4c..944f33d3281 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx index 5a212586d7a..d9761248f12 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx @@ -2,7 +2,7 @@ import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; +import { CircleProgress } from '@linode/ui'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx index aebc1294fd0..482c1b645bb 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DisplayPrice } from 'src/components/DisplayPrice'; import { MAX_VOLUME_SIZE } from 'src/constants'; import { useVolumeTypesQuery } from 'src/queries/volumes/volumes'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx index 6577ff113c7..7df18650928 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { Box, FormHelperText, InputAdornment } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { MAX_VOLUME_SIZE } from 'src/constants'; diff --git a/packages/manager/src/features/Volumes/VolumesLanding.tsx b/packages/manager/src/features/Volumes/VolumesLanding.tsx index 972d7d67090..f6a94ffda26 100644 --- a/packages/manager/src/features/Volumes/VolumesLanding.tsx +++ b/packages/manager/src/features/Volumes/VolumesLanding.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { IconButton, InputAdornment } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { createLazyRoute } from '@tanstack/react-router'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { debounce } from 'throttle-debounce'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.stories.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx similarity index 100% rename from packages/manager/src/components/CircleProgress/CircleProgress.stories.tsx rename to packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.test.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.test.tsx similarity index 75% rename from packages/manager/src/components/CircleProgress/CircleProgress.test.tsx rename to packages/ui/src/components/CircleProgress/CircleProgress.test.tsx index 989113ef285..9784efa81ef 100644 --- a/packages/manager/src/components/CircleProgress/CircleProgress.test.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.test.tsx @@ -1,14 +1,16 @@ +import { render } from '@testing-library/react'; import React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - import { CircleProgress } from './CircleProgress'; +import { expect, describe, it } from 'vitest'; +import '@testing-library/jest-dom/vitest'; + const CONTENT_LOADING = 'Content is loading'; describe('CircleProgress', () => { it('renders a CircleProgress properly', () => { - const screen = renderWithTheme(); + const screen = render(); const circleProgress = screen.getByLabelText(CONTENT_LOADING); expect(circleProgress).toBeVisible(); @@ -18,7 +20,7 @@ describe('CircleProgress', () => { }); it('renders a small CircleProgress', () => { - const screen = renderWithTheme(); + const screen = render(); const circleProgress = screen.getByLabelText(CONTENT_LOADING); expect(circleProgress).toBeVisible(); @@ -26,7 +28,7 @@ describe('CircleProgress', () => { }); it('sets a small CircleProgress with no padding', () => { - const screen = renderWithTheme(); + const screen = render(); const circleProgress = screen.getByLabelText(CONTENT_LOADING); expect(circleProgress).toBeVisible(); diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.tsx similarity index 100% rename from packages/manager/src/components/CircleProgress/CircleProgress.tsx rename to packages/ui/src/components/CircleProgress/CircleProgress.tsx diff --git a/packages/ui/src/components/CircleProgress/index.ts b/packages/ui/src/components/CircleProgress/index.ts new file mode 100644 index 00000000000..49d8f6fd92a --- /dev/null +++ b/packages/ui/src/components/CircleProgress/index.ts @@ -0,0 +1 @@ +export * from './CircleProgress'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index d1887cebe1c..a4e87a3d9d4 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,6 +1,7 @@ export * from './BetaChip'; export * from './Box'; export * from './Chip'; +export * from './CircleProgress'; export * from './FormControl'; export * from './FormHelperText'; export * from './IconButton'; From dcce348b4c691a69244baed8c6e9109d32828525 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 5 Nov 2024 17:02:05 -0500 Subject: [PATCH 2/5] Added changeset: Migrate CircleProgress to ui package --- .../.changeset/pr-11214-tech-stories-1730844124766.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md diff --git a/packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md b/packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md new file mode 100644 index 00000000000..5ea1c82a172 --- /dev/null +++ b/packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +Migrate CircleProgress to ui package ([#11214](https://github.com/linode/manager/pull/11214)) From 7c624e91a194eb2f5a5fe4f06e33b6594a9585a0 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 5 Nov 2024 17:04:28 -0500 Subject: [PATCH 3/5] Added changeset: Migrate CircleProgress to ui package --- ...es-1730844124766.md => pr-11214-removed-1730844124766.md} | 2 +- packages/ui/.changeset/pr-11214-added-1730844268443.md | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) rename packages/manager/.changeset/{pr-11214-tech-stories-1730844124766.md => pr-11214-removed-1730844124766.md} (76%) create mode 100644 packages/ui/.changeset/pr-11214-added-1730844268443.md diff --git a/packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md b/packages/manager/.changeset/pr-11214-removed-1730844124766.md similarity index 76% rename from packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md rename to packages/manager/.changeset/pr-11214-removed-1730844124766.md index 5ea1c82a172..94bf4e366a3 100644 --- a/packages/manager/.changeset/pr-11214-tech-stories-1730844124766.md +++ b/packages/manager/.changeset/pr-11214-removed-1730844124766.md @@ -1,5 +1,5 @@ --- -"@linode/manager": Tech Stories +"@linode/manager": Removed --- Migrate CircleProgress to ui package ([#11214](https://github.com/linode/manager/pull/11214)) diff --git a/packages/ui/.changeset/pr-11214-added-1730844268443.md b/packages/ui/.changeset/pr-11214-added-1730844268443.md new file mode 100644 index 00000000000..93a5d6e6000 --- /dev/null +++ b/packages/ui/.changeset/pr-11214-added-1730844268443.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Migrate CircleProgress to ui package ([#11214](https://github.com/linode/manager/pull/11214)) From ea955f4d20c35ad365c19462a54cff83f49c4d6f Mon Sep 17 00:00:00 2001 From: Dajahi Wiley Date: Wed, 13 Nov 2024 15:01:12 -0500 Subject: [PATCH 4/5] Fix imports in CircleProgress.tsx --- packages/ui/src/components/CircleProgress/CircleProgress.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/CircleProgress/CircleProgress.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.tsx index 04270ba551f..657ab0c010c 100644 --- a/packages/ui/src/components/CircleProgress/CircleProgress.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.tsx @@ -1,4 +1,5 @@ -import { Box, omittedProps } from '@linode/ui'; +import { Box } from '../Box'; +import { omittedProps } from '../../utilities'; import _CircularProgress from '@mui/material/CircularProgress'; import { styled } from '@mui/material/styles'; import * as React from 'react'; From c4a25c3303c1018fcee623f65c7b4a8b6c991e02 Mon Sep 17 00:00:00 2001 From: Dajahi Wiley Date: Thu, 14 Nov 2024 12:26:07 -0500 Subject: [PATCH 5/5] Feedback: consolidate imports, improve CircleProgress story --- packages/manager/src/components/LinkButton.tsx | 3 +-- packages/manager/src/components/SplashScreen.tsx | 3 +-- packages/manager/src/components/TagCell/TagCell.tsx | 3 +-- packages/manager/src/components/TextField.tsx | 9 +++++++-- .../src/components/TransferDisplay/TransferDisplay.tsx | 3 +-- .../BillingSummary/PaymentDrawer/GooglePayButton.tsx | 3 +-- .../BillingSummary/PaymentDrawer/PayPalButton.tsx | 3 +-- .../Dashboard/CloudPulseDashboardWithFilters.tsx | 3 +-- .../DatabaseResizeCurrentConfiguration.tsx | 3 +-- .../legacy/DatabaseSummaryConnectionDetailsLegacy.tsx | 3 +-- .../KubernetesClusterDetail/KubeEntityDetailFooter.tsx | 3 +-- .../Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx | 4 +--- .../NetworkingSummaryPanel/TransferHistory.tsx | 3 +-- packages/manager/src/features/Lish/Glish.tsx | 3 +-- .../features/Longview/LongviewLanding/LongviewList.tsx | 4 +--- .../Managed/ManagedDashboardCard/ManagedChartPanel.tsx | 3 +-- .../features/Managed/SSHAccess/LinodePubKey.styles.tsx | 3 +-- .../NodeBalancerSummary/TablesPanel.tsx | 4 +--- .../ObjectStorage/BucketLanding/OveragePricing.tsx | 3 +-- .../SecurityQuestions/SecurityQuestions.tsx | 3 +-- .../manager/src/features/Users/UserPermissions.styles.ts | 3 +-- packages/manager/src/features/Users/UserPermissions.tsx | 3 +-- .../src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx | 3 +-- .../manager/src/features/VPCs/VPCDetail/VPCDetail.tsx | 3 +-- .../src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx | 3 +-- .../src/features/Volumes/VolumeDrawer/PricePanel.tsx | 3 +-- .../src/features/Volumes/VolumeDrawer/SizeField.tsx | 8 ++++++-- packages/manager/src/features/Volumes/VolumesLanding.tsx | 3 +-- .../components/CircleProgress/CircleProgress.stories.tsx | 8 ++++---- .../ui/src/components/CircleProgress/CircleProgress.tsx | 3 ++- 30 files changed, 45 insertions(+), 64 deletions(-) diff --git a/packages/manager/src/components/LinkButton.tsx b/packages/manager/src/components/LinkButton.tsx index e4637d45092..267eeb53162 100644 --- a/packages/manager/src/components/LinkButton.tsx +++ b/packages/manager/src/components/LinkButton.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; diff --git a/packages/manager/src/components/SplashScreen.tsx b/packages/manager/src/components/SplashScreen.tsx index 666ce158d1c..1a2e65b66f7 100644 --- a/packages/manager/src/components/SplashScreen.tsx +++ b/packages/manager/src/components/SplashScreen.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { srSpeak } from 'src/utilities/accessibility'; diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx index edb15701110..2cdcbd04ca9 100644 --- a/packages/manager/src/components/TagCell/TagCell.tsx +++ b/packages/manager/src/components/TagCell/TagCell.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { IconButton, omittedProps } from '@linode/ui'; +import { CircleProgress, IconButton, omittedProps } from '@linode/ui'; import MoreHoriz from '@mui/icons-material/MoreHoriz'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 3820d61a0f8..a5a5940d24d 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -1,5 +1,10 @@ -import { CircleProgress } from '@linode/ui'; -import { Box, FormHelperText, InputAdornment, InputLabel } from '@linode/ui'; +import { + Box, + CircleProgress, + FormHelperText, + InputAdornment, + InputLabel, +} from '@linode/ui'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import { useTheme } from '@mui/material/styles'; import { default as _TextField } from '@mui/material/TextField'; diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx index e89f035f1a3..dfee8dabdd2 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx index 3825803cccf..4b18b0570f4 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Tooltip } from '@linode/ui'; +import { CircleProgress, Tooltip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import * as React from 'react'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx index fc4bf8152d1..9af3f088734 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx @@ -1,6 +1,5 @@ import { makePayment } from '@linode/api-v4/lib/account/payments'; -import { CircleProgress } from '@linode/ui'; -import { Tooltip } from '@linode/ui'; +import { CircleProgress, Tooltip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { BraintreePayPalButtons, diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index a2f48084b5e..00f73834381 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Paper } from '@linode/ui'; +import { CircleProgress, Paper } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx index 41a8e93c650..cdbd454b99c 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx index b6714fe17f0..0972480a957 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx @@ -1,6 +1,5 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases'; -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx index 986498ca3bb..c3ab1f7eda9 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx index 162331730e1..dba0f22cc61 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx @@ -1,6 +1,4 @@ -import { Paper } from '@linode/ui'; -import { CircleProgress } from '@linode/ui'; -import { Box, Stack } from '@mui/material'; +import { Box, CircleProgress, Paper, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx index f9c3ef7fe04..5510384fe4d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; import { IconButton } from '@mui/material'; diff --git a/packages/manager/src/features/Lish/Glish.tsx b/packages/manager/src/features/Lish/Glish.tsx index 426a3bdcb98..b18a34d5a46 100644 --- a/packages/manager/src/features/Lish/Glish.tsx +++ b/packages/manager/src/features/Lish/Glish.tsx @@ -1,6 +1,5 @@ /* eslint-disable no-unused-expressions */ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { VncScreen } from 'react-vnc'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx index a2ee7c71e68..a66c346aa74 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx @@ -1,6 +1,4 @@ -import { Paper } from '@linode/ui'; -import { Box } from '@linode/ui'; -import { CircleProgress } from '@linode/ui'; +import { Box, CircleProgress, Paper } from '@linode/ui'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx index f5163032a2f..a06c13055b8 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; diff --git a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx index c11fc906a6b..4cd3d6d9449 100644 --- a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx @@ -1,5 +1,4 @@ -import { Paper } from '@linode/ui'; -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index 7af90fed2aa..3ebb2b486c7 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -1,6 +1,4 @@ -import { Paper } from '@linode/ui'; -import { Box } from '@linode/ui'; -import { CircleProgress } from '@linode/ui'; +import { Box, CircleProgress, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx index 380e893f081..7cfefa5631b 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import React from 'react'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx index cb0d7119f54..31ef475f8bc 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/Users/UserPermissions.styles.ts b/packages/manager/src/features/Users/UserPermissions.styles.ts index 5b7056d2caa..636d0e3da4a 100644 --- a/packages/manager/src/features/Users/UserPermissions.styles.ts +++ b/packages/manager/src/features/Users/UserPermissions.styles.ts @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Paper } from '@linode/ui'; +import { CircleProgress, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index 18d1dd85133..e980741e338 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -4,8 +4,7 @@ import { updateGrants, updateUser, } from '@linode/api-v4/lib/account'; -import { Box, CircleProgress, Notice } from '@linode/ui'; -import { Paper } from '@mui/material'; +import { Box, CircleProgress, Notice, Paper } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { enqueueSnackbar } from 'notistack'; import { compose, flatten, lensPath, omit, set } from 'ramda'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx index bc808808fd1..a2287b14be0 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import ErrorOutline from '@mui/icons-material/ErrorOutline'; import * as React from 'react'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx index f25b554ef6d..166966c212a 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx index 944f33d3281..3de0bd80f74 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx index 482c1b645bb..f7d7bfbd1be 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { DisplayPrice } from 'src/components/DisplayPrice'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx index 7df18650928..97abcfe4927 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx @@ -1,5 +1,9 @@ -import { CircleProgress } from '@linode/ui'; -import { Box, FormHelperText, InputAdornment } from '@linode/ui'; +import { + Box, + CircleProgress, + FormHelperText, + InputAdornment, +} from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; diff --git a/packages/manager/src/features/Volumes/VolumesLanding.tsx b/packages/manager/src/features/Volumes/VolumesLanding.tsx index f6a94ffda26..2ea24e180ab 100644 --- a/packages/manager/src/features/Volumes/VolumesLanding.tsx +++ b/packages/manager/src/features/Volumes/VolumesLanding.tsx @@ -1,5 +1,4 @@ -import { CircleProgress } from '@linode/ui'; -import { IconButton, InputAdornment } from '@linode/ui'; +import { CircleProgress, IconButton, InputAdornment } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; diff --git a/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx index 28b1e392d38..93938f88cb8 100644 --- a/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx @@ -2,15 +2,15 @@ import React from 'react'; import { CircleProgress } from './CircleProgress'; +import type { CircleProgressProps } from './CircleProgress'; import type { Meta, StoryObj } from '@storybook/react'; -type Story = StoryObj; - -export const Default: Story = { +export const Default: StoryObj = { render: (args) => , }; -const meta: Meta = { +const meta: Meta = { + args: { size: 'md' }, component: CircleProgress, title: 'Components/Loading States/Circle Progress', }; diff --git a/packages/ui/src/components/CircleProgress/CircleProgress.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.tsx index 657ab0c010c..49a96ec8ee7 100644 --- a/packages/ui/src/components/CircleProgress/CircleProgress.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.tsx @@ -7,7 +7,8 @@ import * as React from 'react'; import type { CircularProgressProps } from '@mui/material/CircularProgress'; import type { SxProps, Theme } from '@mui/material/styles'; -interface CircleProgressProps extends Omit { +export interface CircleProgressProps + extends Omit { /** * Additional child elements to pass in */