refactor: [M3-9268] – Migrate ErrorState to ui package

packages/manager/.changeset/pr-11718-removed-1741099193168.md

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

packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx

@@ -1,10 +1,9 @@
-import { StyledLinkButton, Typography } from '@linode/ui';
+import { ErrorState, StyledLinkButton, Typography } from '@linode/ui';
 import Warning from '@mui/icons-material/CheckCircle';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog';
 
 import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';

packages/manager/src/components/Drawer.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   CircleProgress,
+  ErrorState,
   IconButton,
   Typography,
   convertForAria,
@@ -11,7 +12,6 @@ import Grid from '@mui/material/Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ErrorState } from './ErrorState/ErrorState';
 import { NotFound } from './NotFound';
 
 import type { APIError } from '@linode/api-v4';

packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx

@@ -1,8 +1,7 @@
-import { Divider, Typography } from '@linode/ui';
+import { Divider, ErrorState, Typography } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LineGraph } from 'src/components/LineGraph/LineGraph';
 
 import type { Theme } from '@mui/material/styles';

packages/manager/src/components/MaintenanceScreen.tsx

@@ -1,10 +1,9 @@
-import { Box, Stack, Typography } from '@linode/ui';
+import { Box, ErrorState, Stack, Typography } from '@linode/ui';
 import BuildIcon from '@mui/icons-material/Build';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Link } from 'src/components/Link';
 
 import type { Theme } from '@mui/material/styles';

packages/manager/src/components/TableRowError/TableRowError.tsx

@@ -1,6 +1,6 @@
+import { ErrorState } from '@linode/ui';
 import * as React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 

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

@@ -1,9 +1,8 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, ErrorState } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import {
   useAccountSettings,
   useMutateAccountSettings,

packages/manager/src/features/Account/Quotas/QuotasTable.tsx

@@ -1,12 +1,17 @@
-import { Box, CircleProgress, TooltipIcon, Typography } from '@linode/ui';
+import {
+  Box,
+  CircleProgress,
+  ErrorState,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { useTheme } from '@mui/material/styles';
 import { useQueries } from '@tanstack/react-query';
 import * as React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { BarPercent } from 'src/components/BarPercent/BarPercent';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table/Table';
 import { TableBody } from 'src/components/TableBody';

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

@@ -1,8 +1,13 @@
-import { CircleProgress, Divider, Paper, Stack, Typography } from '@linode/ui';
+import {
+  CircleProgress,
+  Divider,
+  ErrorState,
+  Paper,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import * as React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
-
 import BetaDetails from './BetaDetails';
 
 import type { APIError } from '@linode/api-v4';

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

@@ -1,12 +1,11 @@
-import { Button, CircleProgress } from '@linode/ui';
+import { Button, CircleProgress, ErrorState } from '@linode/ui';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Grid2';
 import { PayPalScriptProvider } from '@paypal/react-paypal-js';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { PAYPAL_CLIENT_ID } from 'src/constants';
 import { useAccount } from 'src/queries/account/account';
 import { useAllPaymentMethodsQuery } from 'src/queries/account/payment';

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

@@ -3,6 +3,7 @@ import { Typography } from '@linode/ui';
 import {
   Button,
   Divider,
+  ErrorState,
   InputAdornment,
   Notice,
   Stack,
@@ -17,7 +18,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Currency } from 'src/components/Currency';
 import { Drawer } from 'src/components/Drawer';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { SupportLink } from 'src/components/SupportLink';
 import { getRestrictedResourceText } from 'src/features/Account/utils';

packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx

@@ -1,12 +1,11 @@
-import { Box, Chip, CircleProgress, Typography } from '@linode/ui';
+import { Box, Chip, CircleProgress, ErrorState, Typography } from '@linode/ui';
 import { styled, useTheme } from '@mui/material';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import AlertsIcon from 'src/assets/icons/entityIcons/alerts.svg';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { useAlertDefinitionQuery } from 'src/queries/cloudpulse/alerts';
 

packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx

@@ -1,9 +1,8 @@
-import { CircleProgress, Stack, Typography } from '@linode/ui';
+import { CircleProgress, ErrorState, Stack, Typography } from '@linode/ui';
 import { Divider, Grid } from '@mui/material';
 import React from 'react';
 
 import EntityIcon from 'src/assets/icons/entityIcons/alerts.svg';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { useAllAlertNotificationChannelsQuery } from 'src/queries/cloudpulse/alerts';
 
 import { convertStringToCamelCasesWithSpaces } from '../../Utils/utils';

packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertLanding.tsx

@@ -1,10 +1,9 @@
-import { Box, CircleProgress } from '@linode/ui';
+import { Box, CircleProgress, ErrorState } from '@linode/ui';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import EntityIcon from 'src/assets/icons/entityIcons/alerts.svg';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { useAlertDefinitionQuery } from 'src/queries/cloudpulse/alerts';
 
 import { StyledPlaceholder } from '../AlertsDetail/AlertDetail';

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx

@@ -1,8 +1,7 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, ErrorState } from '@linode/ui';
 import { Grid } from '@mui/material';
 import React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 import {

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx

@@ -1,8 +1,7 @@
-import { Box, CircleProgress, Divider, Paper } from '@linode/ui';
+import { Box, CircleProgress, Divider, ErrorState, Paper } from '@linode/ui';
 import { Grid } from '@mui/material';
 import React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards';
 
 import { CloudPulseAppliedFilterRenderer } from '../shared/CloudPulseAppliedFilterRenderer';

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx

@@ -1,9 +1,8 @@
-import { CircleProgress, Typography } from '@linode/ui';
+import { CircleProgress, ErrorState, Typography } from '@linode/ui';
 import { Box, useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { AreaChart } from 'src/components/AreaChart/AreaChart';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { roundTo } from 'src/utilities/roundTo';
 
 import type { AreaChartProps } from 'src/components/AreaChart/AreaChart';

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx

@@ -1,11 +1,10 @@
-import { Button, Typography } from '@linode/ui';
+import { Button, ErrorState, Typography } from '@linode/ui';
 import { Grid, useTheme } from '@mui/material';
 import * as React from 'react';
 
 import KeyboardCaretDownIcon from 'src/assets/icons/caret_down.svg';
 import KeyboardCaretRightIcon from 'src/assets/icons/caret_right.svg';
 import InfoIcon from 'src/assets/icons/info.svg';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import NullComponent from 'src/components/NullComponent';
 
 import RenderComponent from '../shared/CloudPulseComponentRenderer';

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -1,4 +1,11 @@
-import { BetaChip, CircleProgress, Divider, Notice, Paper } from '@linode/ui';
+import {
+  BetaChip,
+  CircleProgress,
+  Divider,
+  ErrorState,
+  Notice,
+  Paper,
+} from '@linode/ui';
 import { formatStorageUnits } from '@linode/utilities';
 import { createDatabaseSchema } from '@linode/validation/lib/databases.schema';
 import Grid from '@mui/material/Grid2';
@@ -9,7 +16,6 @@ import { useHistory } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorMessage } from 'src/components/ErrorMessage';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { DatabaseClusterData } from 'src/features/Databases/DatabaseCreate/DatabaseClusterData';

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

@@ -2,6 +2,7 @@ import {
   Box,
   CircleProgress,
   Divider,
+  ErrorState,
   Notice,
   Paper,
   Typography,
@@ -11,7 +12,6 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { determineInitialPlanCategoryTab } from 'src/features/components/PlansPanel/utils';
 import { DatabaseNodeSelector } from 'src/features/Databases/DatabaseCreate/DatabaseNodeSelector';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx

@@ -1,9 +1,8 @@
-import { Box, CircleProgress, TooltipIcon } from '@linode/ui';
+import { Box, CircleProgress, ErrorState, TooltipIcon } from '@linode/ui';
 import { formatStorageUnits } from '@linode/utilities';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion';
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';

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

@@ -1,11 +1,10 @@
-import { CircleProgress, Notice } from '@linode/ui';
+import { CircleProgress, ErrorState, Notice } from '@linode/ui';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { matchPath, useHistory, useParams } from 'react-router-dom';
 
 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 { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';

packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx

@@ -1,10 +1,9 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, ErrorState } 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 { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Tab } from 'src/components/Tabs/Tab';
@@ -148,23 +147,23 @@ const DatabaseLanding = () => {
       <DatabaseLandingTable
         data={legacyDatabases?.data}
         handleOrderChange={legacyDatabaseHandleOrderChange}
-        results={legacyDatabases?.results}
         order={legacyDatabaseOrder}
         orderBy={legacyDatabaseOrderBy}
+        results={legacyDatabases?.results}
       />
     );
   };
 
   const defaultTable = () => {
     return (
       <DatabaseLandingTable
-        results={newDatabases?.results}
         data={newDatabases?.data}
         handleOrderChange={newDatabaseHandleOrderChange}
         isNewDatabase={true}
-        showSuspend={showSuspend}
         order={newDatabaseOrder}
         orderBy={newDatabaseOrderBy}
+        results={newDatabases?.results}
+        showSuspend={showSuspend}
       />
     );
   };

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

@@ -1,10 +1,15 @@
-import { CircleProgress, Notice, Paper, Typography } from '@linode/ui';
+import {
+  CircleProgress,
+  ErrorState,
+  Notice,
+  Paper,
+  Typography,
+} from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Grid2';
 import { useLocation, useNavigate, useParams } from '@tanstack/react-router';
 import * as React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { TagCell } from 'src/components/TagCell/TagCell';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';

packages/manager/src/features/Domains/DomainDetail/index.tsx

@@ -1,8 +1,7 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, ErrorState } from '@linode/ui';
 import { useParams } from '@tanstack/react-router';
 import * as React from 'react';
 
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { NotFound } from 'src/components/NotFound';
 import { useDomainQuery } from 'src/queries/domains';
 

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

@@ -1,12 +1,11 @@
-import { Button, CircleProgress, Notice } from '@linode/ui';
+import { Button, CircleProgress, ErrorState, Notice } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { useLocation, useNavigate, useParams } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Hidden } from 'src/components/Hidden';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx

@@ -1,12 +1,11 @@
 import { acceptEntityTransfer } from '@linode/api-v4/lib/entity-transfers';
-import { Checkbox, CircleProgress, Notice } from '@linode/ui';
+import { Checkbox, CircleProgress, ErrorState, Notice } from '@linode/ui';
 import { capitalize } from '@linode/utilities';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import {
   TRANSFER_FILTERS,
   queryKey,

packages/manager/src/features/Firewalls/FirewallDetail/index.tsx

@@ -1,11 +1,10 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, ErrorState } 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 { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { LinkButton } from 'src/components/LinkButton';