refactor: [M3-8827] - Migrate CircleProgress to ui package (linod…

…e#11214)

packages/manager/.changeset/pr-11214-removed-1730844124766.md

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

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,

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -1,11 +1,11 @@
+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';
 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';

packages/manager/src/components/DrawerContent/DrawerContent.tsx

@@ -1,8 +1,6 @@
-import { Notice } from '@linode/ui';
+import { CircleProgress, Notice } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
-
 export interface DrawerContentProps {
   children: React.ReactNode;
   error: boolean;

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 <StyledCircleProgress data-testid="input-loading" size="sm" />;
 };

packages/manager/src/components/LinkButton.tsx

@@ -1,9 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, CircleProgress } 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';

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<T> {
 export default function preload<P>(requests: RequestMap<P>) {
   return function (Component: React.ComponentType<P>) {
     return class LoadedComponent extends React.Component<P, State> {
+      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<P>(requests: RequestMap<P>) {
 
         Promise.all(promises).then(this.handleDone).catch(this.handleDone);
       }
+
       componentWillUnmount() {
         this.mounted = false;
       }
@@ -62,22 +77,6 @@ export default function preload<P>(requests: RequestMap<P>) {
 
         return <Component {...this.props} {...responses} />;
       }
-
-      static displayName = `PromiseLoader(${
-        Component.displayName || Component.name
-      })`;
-
-      handleDone = () => {
-        if (!this.mounted) {
-          return;
-        }
-
-        this.setState((prevState) => ({ ...prevState, loading: false }));
-      };
-
-      mounted: boolean = false;
-
-      state = { loading: true };
     };
   };
 }

packages/manager/src/components/SplashScreen.tsx

@@ -1,7 +1,6 @@
-import { Box } from '@linode/ui';
+import { Box, CircleProgress } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
 import { srSpeak } from 'src/utilities/accessibility';
 
 export const SplashScreen = () => {

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

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: {

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

@@ -1,4 +1,4 @@
-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';
@@ -8,7 +8,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';
 

packages/manager/src/components/TextField.tsx

@@ -1,11 +1,16 @@
-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';
 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';
 

packages/manager/src/components/TransferDisplay/TransferDisplay.tsx

@@ -1,7 +1,6 @@
-import { Box } from '@linode/ui';
+import { Box, CircleProgress } 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';

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,

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

@@ -1,10 +1,9 @@
-import { Box, Notice, Stack } from '@linode/ui';
+import { Box, CircleProgress, Notice, Stack } 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 { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx

@@ -1,11 +1,10 @@
-import { Box, Notice, Stack } from '@linode/ui';
+import { Box, CircleProgress, Notice, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 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 { Typography } from 'src/components/Typography';
 import { useChildAccountsInfiniteQuery } from 'src/queries/account/account';
 

packages/manager/src/features/Betas/BetaDetailsList.tsx

@@ -1,7 +1,6 @@
-import { Divider, Paper, Stack } from '@linode/ui';
+import { CircleProgress, Divider, Paper, Stack } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Typography } from 'src/components/Typography';
 

packages/manager/src/features/Betas/BetaSignup.tsx

@@ -1,4 +1,4 @@
-import { Paper, Stack } from '@linode/ui';
+import { CircleProgress, Paper, Stack } from '@linode/ui';
 import {
   createLazyRoute,
   useNavigate,
@@ -9,7 +9,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';

packages/manager/src/features/Billing/BillingDetail.tsx

@@ -1,11 +1,11 @@
+import { CircleProgress } from '@linode/ui';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 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';

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

@@ -1,11 +1,10 @@
-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';
 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,

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

@@ -1,5 +1,5 @@
 import { makePayment } from '@linode/api-v4/lib/account/payments';
-import { Tooltip } from '@linode/ui';
+import { CircleProgress, Tooltip } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import {
   BraintreePayPalButtons,
@@ -10,7 +10,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';

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

@@ -1,18 +1,19 @@
+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,
 } from 'src/features/Billing/GooglePayProvider';
 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': {

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

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;

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';