From 0e9c6639d828844bff08715224d12e61de55ebe3 Mon Sep 17 00:00:00 2001 From: hrao Date: Tue, 25 Feb 2025 13:14:11 +0530 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20[M3-9268]=20=E2=80=93=20Migrate?= =?UTF-8?q?=20ErrorState=20to=20ui=20package?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AccountActivationLanding.tsx | 3 +- packages/manager/src/components/Drawer.tsx | 2 +- .../LongviewLineGraph/LongviewLineGraph.tsx | 3 +- .../src/components/MaintenanceScreen.tsx | 3 +- .../TableRowError/TableRowError.tsx | 2 +- .../src/features/Account/GlobalSettings.tsx | 3 +- .../src/features/Betas/BetaDetailsList.tsx | 11 +- .../src/features/Billing/BillingDetail.tsx | 3 +- .../PaymentDrawer/PaymentDrawer.tsx | 2 +- .../Alerts/AlertsDetail/AlertDetail.tsx | 3 +- .../AlertsDetail/AlertDetailNotification.tsx | 3 +- .../Alerts/EditAlert/EditAlertResources.tsx | 3 +- .../Dashboard/CloudPulseDashboard.tsx | 3 +- .../CloudPulseDashboardWithFilters.tsx | 3 +- .../Widget/components/CloudPulseLineGraph.tsx | 3 +- .../CloudPulseDashboardFilterBuilder.tsx | 3 +- .../DatabaseCreate/DatabaseCreate.tsx | 20 ++-- .../DatabaseResize/DatabaseResize.tsx | 2 +- .../DatabaseResizeCurrentConfiguration.tsx | 3 +- .../Databases/DatabaseDetail/index.tsx | 3 +- .../DatabaseLanding/DatabaseLanding.tsx | 9 +- .../Domains/DomainDetail/DomainDetail.tsx | 9 +- .../features/Domains/DomainDetail/index.tsx | 3 +- .../src/features/Domains/DomainsLanding.tsx | 3 +- .../ConfirmTransferDialog.tsx | 3 +- .../Firewalls/FirewallDetail/index.tsx | 3 +- .../FirewallLanding/FirewallLanding.tsx | 7 +- .../IAM/Users/UserDetails/UserProfile.tsx | 3 +- .../Images/ImagesLanding/ImagesLanding.tsx | 2 +- .../CreateCluster/CreateCluster.tsx | 17 ++- .../CreateCluster/NodePoolPanel.tsx | 3 +- .../KubernetesClusterDetail.tsx | 3 +- .../NodePoolsDisplay/NodePoolsDisplay.tsx | 10 +- .../NodePoolsDisplay/NodeTable.tsx | 3 +- .../KubernetesLanding/KubernetesLanding.tsx | 3 +- .../Tabs/Marketplace/AppsList.tsx | 4 +- .../StackScripts/StackScriptDetailsDialog.tsx | 3 +- .../LinodeBackup/LinodeBackups.tsx | 9 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 4 +- .../LinodeNetworking/LinodeIPAddresses.tsx | 2 +- .../TransferHistory.tsx | 3 +- .../LinodeRescue/StandardRescueDialog.tsx | 3 +- .../LinodeSummary/LinodeSummary.tsx | 3 +- .../Linodes/LinodesDetail/LinodesDetail.tsx | 3 +- .../LinodeDetailHeader.tsx | 3 +- .../LinodesDetail/LinodesDetailNavigation.tsx | 3 +- .../Linodes/LinodesLanding/LinodesLanding.tsx | 3 +- packages/manager/src/features/Lish/Glish.tsx | 4 +- packages/manager/src/features/Lish/Lish.tsx | 3 +- .../manager/src/features/Lish/Weblish.tsx | 3 +- .../LongviewDetail/DetailTabs/Disks/Disks.tsx | 3 +- .../DetailTabs/Network/NetworkGraphs.tsx | 3 +- .../LongviewDetail/LongviewDetail.tsx | 3 +- .../Longview/LongviewLanding/LongviewList.tsx | 2 +- .../ManagedChartPanel.tsx | 3 +- .../ManagedDashboardCard.tsx | 3 +- .../Managed/SSHAccess/LinodePubKey.tsx | 3 +- .../NodeBalancerDetail/NodeBalancerDetail.tsx | 3 +- .../NodeBalancerSummary/TablesPanel.tsx | 3 +- .../NodeBalancersLanding.tsx | 3 +- .../ObjectStorage/BucketDetail/BucketSSL.tsx | 2 +- .../BucketLanding/BucketLanding.tsx | 3 +- .../BucketLanding/OMC_BucketLanding.tsx | 3 +- .../PlacementGroupsDetail.tsx | 3 +- .../PlacementGroupsLinodes.tsx | 3 +- .../PlacementGroupsLanding.tsx | 3 +- .../AuthenticationSettings.tsx | 9 +- .../StackScriptBase/StackScriptBase.tsx | 3 +- .../features/StackScripts/StackScriptEdit.tsx | 10 +- .../StackScriptLandingTable.tsx | 3 +- .../StackScripts/StackScriptsDetail.tsx | 3 +- .../SupportTicketDetail.tsx | 3 +- .../manager/src/features/Users/UserDetail.tsx | 3 +- .../Users/UserProfile/UserProfile.tsx | 3 +- .../src/features/VPCs/VPCDetail/VPCDetail.tsx | 3 +- .../VPCs/VPCDetail/VPCSubnetsTable.tsx | 3 +- .../features/VPCs/VPCLanding/VPCLanding.tsx | 3 +- .../src/features/Volumes/VolumesLanding.tsx | 2 +- packages/ui/src/assets/icons/pending.svg | 9 ++ .../ErrorState/ErrorState.stories.tsx | 23 ++++ .../components/ErrorState/ErrorState.test.tsx | 41 +++++++ .../src/components/ErrorState/ErrorState.tsx | 110 ++++++++++++++++++ .../ui/src/components/ErrorState/index.ts | 1 + packages/ui/src/components/SvgIcon/SvgIcon.ts | 2 + packages/ui/src/components/SvgIcon/index.ts | 1 + packages/ui/src/components/index.ts | 2 + 86 files changed, 335 insertions(+), 163 deletions(-) create mode 100644 packages/ui/src/assets/icons/pending.svg create mode 100644 packages/ui/src/components/ErrorState/ErrorState.stories.tsx create mode 100644 packages/ui/src/components/ErrorState/ErrorState.test.tsx create mode 100644 packages/ui/src/components/ErrorState/ErrorState.tsx create mode 100644 packages/ui/src/components/ErrorState/index.ts create mode 100644 packages/ui/src/components/SvgIcon/SvgIcon.ts create mode 100644 packages/ui/src/components/SvgIcon/index.ts diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx index 68e0bf1d662..5ce9f61b2ab 100644 --- a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx +++ b/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'; diff --git a/packages/manager/src/components/Drawer.tsx b/packages/manager/src/components/Drawer.tsx index 4b3259f9110..d21d9ec6370 100644 --- a/packages/manager/src/components/Drawer.tsx +++ b/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/Unstable_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'; diff --git a/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx b/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx index 6946cd54d96..abe23a9983a 100644 --- a/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx +++ b/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'; diff --git a/packages/manager/src/components/MaintenanceScreen.tsx b/packages/manager/src/components/MaintenanceScreen.tsx index 00d1f5abb78..c0cdd1cb4d2 100644 --- a/packages/manager/src/components/MaintenanceScreen.tsx +++ b/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'; diff --git a/packages/manager/src/components/TableRowError/TableRowError.tsx b/packages/manager/src/components/TableRowError/TableRowError.tsx index 0d00fdb3e5d..bb1fdab8cb1 100644 --- a/packages/manager/src/components/TableRowError/TableRowError.tsx +++ b/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'; diff --git a/packages/manager/src/features/Account/GlobalSettings.tsx b/packages/manager/src/features/Account/GlobalSettings.tsx index d5a9facc6d1..1276b3bcb84 100644 --- a/packages/manager/src/features/Account/GlobalSettings.tsx +++ b/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, diff --git a/packages/manager/src/features/Betas/BetaDetailsList.tsx b/packages/manager/src/features/Betas/BetaDetailsList.tsx index 3b209df9705..afea748e3a2 100644 --- a/packages/manager/src/features/Betas/BetaDetailsList.tsx +++ b/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'; diff --git a/packages/manager/src/features/Billing/BillingDetail.tsx b/packages/manager/src/features/Billing/BillingDetail.tsx index df85a4e5040..9bb7c78a0d2 100644 --- a/packages/manager/src/features/Billing/BillingDetail.tsx +++ b/packages/manager/src/features/Billing/BillingDetail.tsx @@ -1,4 +1,4 @@ -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/Unstable_Grid2'; @@ -6,7 +6,6 @@ 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'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index 8cd4021fa94..5173364d1cc 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/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'; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx index 03f380e4d1d..b291e27be21 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,7 +6,6 @@ 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'; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx index b043b59e47d..6775db10158 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx +++ b/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'; diff --git a/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResources.tsx b/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResources.tsx index 2cea747cec1..fc458785ac6 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResources.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResources.tsx @@ -1,4 +1,4 @@ -import { Box, Button, CircleProgress } from '@linode/ui'; +import { Box, Button, CircleProgress, ErrorState } from '@linode/ui'; import { useTheme } from '@mui/material'; import { enqueueSnackbar } from 'notistack'; import React from 'react'; @@ -6,7 +6,6 @@ import { useHistory, 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, useEditAlertDefinition, diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx index 9a77d27fb44..b5bae381f73 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx +++ b/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 { diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index 9db1f7384f2..6f73ad1e223 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/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'; diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 107b672803e..5a1e5821e36 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/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'; diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 2001b25f98b..8c2104967de 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/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'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 49f17ea4eae..e9984c0b226 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/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 { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -6,8 +13,8 @@ import { useFormik } from 'formik'; import * as React from 'react'; 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'; @@ -35,6 +42,10 @@ import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; import { validateIPs } from 'src/utilities/ipUtils'; import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2'; +import { + ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT, + ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT_LEGACY, +} from '../constants'; import { DatabaseCreateAccessControls } from './DatabaseCreateAccessControls'; import { determineReplicationCommitType, @@ -51,11 +62,6 @@ import type { APIError } from '@linode/api-v4/lib/types'; import type { PlanSelectionWithDatabaseType } from 'src/features/components/PlansPanel/types'; import type { DatabaseCreateValues } from 'src/features/Databases/DatabaseCreate/DatabaseClusterData'; import type { ExtendedIP } from 'src/utilities/ipUtils'; -import { - ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT, - ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT_LEGACY, -} from '../constants'; -import { DocumentTitleSegment } from 'src/components/DocumentTitle'; const DatabaseCreate = () => { const history = useHistory(); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index e9e007c2279..f3f959a376c 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -2,6 +2,7 @@ import { Box, CircleProgress, Divider, + ErrorState, Notice, Paper, Typography, @@ -10,7 +11,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'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx index 68a715688bd..52afa6d273e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx @@ -1,8 +1,7 @@ -import { Box, CircleProgress, TooltipIcon } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, TooltipIcon } from '@linode/ui'; 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'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index f81eb723e5d..0236b9ad26d 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/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'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index 0b62810b54b..e7fb07cc9a4 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/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,9 +147,9 @@ const DatabaseLanding = () => { ); }; @@ -158,13 +157,13 @@ const DatabaseLanding = () => { const defaultTable = () => { return ( ); }; diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx index b357736aa2f..b217e53d22c 100644 --- a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx +++ b/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/Unstable_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'; diff --git a/packages/manager/src/features/Domains/DomainDetail/index.tsx b/packages/manager/src/features/Domains/DomainDetail/index.tsx index 6eaa1b60106..10f5274d43e 100644 --- a/packages/manager/src/features/Domains/DomainDetail/index.tsx +++ b/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'; diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx index 81e8ac001b5..43a8ca06e61 100644 --- a/packages/manager/src/features/Domains/DomainsLanding.tsx +++ b/packages/manager/src/features/Domains/DomainsLanding.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,7 +6,6 @@ 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'; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx index 9e69baf3102..1e3f211acaf 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx @@ -1,11 +1,10 @@ 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 { 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, diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx index 85a97b47c54..5a186745f16 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx +++ b/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'; diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx index 9b19844ac27..bbf06d3ecc4 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx @@ -1,9 +1,9 @@ -import { Button, CircleProgress } from '@linode/ui'; +import { Button, CircleProgress, ErrorState } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; @@ -30,7 +30,6 @@ import { FirewallRow } from './FirewallRow'; import type { ActionHandlers as FirewallHandlers } from './FirewallActionMenu'; import type { Mode } from './FirewallDialog'; -import { DocumentTitleSegment } from 'src/components/DocumentTitle'; const preferenceKey = 'firewalls'; @@ -193,7 +192,7 @@ const FirewallLanding = () => { Rules Services - + diff --git a/packages/manager/src/features/IAM/Users/UserDetails/UserProfile.tsx b/packages/manager/src/features/IAM/Users/UserDetails/UserProfile.tsx index 62308a5c2f6..59db0400c0a 100644 --- a/packages/manager/src/features/IAM/Users/UserDetails/UserProfile.tsx +++ b/packages/manager/src/features/IAM/Users/UserDetails/UserProfile.tsx @@ -1,9 +1,8 @@ -import { CircleProgress, Stack } from '@linode/ui'; +import { CircleProgress, ErrorState, Stack } from '@linode/ui'; import React from 'react'; import { useParams } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; import { useAccountUser } from 'src/queries/account/users'; import { useAccountUserPermissions } from 'src/queries/iam/iam'; diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx index 11b4680ec72..3a8baba0acf 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx @@ -1,6 +1,7 @@ import { getAPIFilterFromQuery } from '@linode/search'; import { CircleProgress, + ErrorState, IconButton, InputAdornment, Notice, @@ -22,7 +23,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Drawer } from 'src/components/Drawer'; -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'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index 78a6dd4a999..798bfc3ae86 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -1,4 +1,12 @@ -import { Autocomplete, Box, Notice, Paper, Stack, TextField } from '@linode/ui'; +import { + Autocomplete, + Box, + ErrorState, + Notice, + Paper, + Stack, + TextField, +} from '@linode/ui'; import { Divider } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -9,10 +17,10 @@ import { useHistory } from 'react-router-dom'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; 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 { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; +import { getRestrictedResourceText } from 'src/features/Account/utils'; import { getKubeControlPlaneACL, getKubeHighAvailability, @@ -21,6 +29,7 @@ import { useIsLkeEnterpriseEnabled, useLkeStandardOrEnterpriseVersions, } from 'src/features/Kubernetes/kubeUtils'; +import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useAccount } from 'src/queries/account/account'; import { reportAgreementSigningError, @@ -38,8 +47,8 @@ import { extendType } from 'src/utilities/extendType'; import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes'; import { stringToExtendedIP } from 'src/utilities/ipUtils'; import { plansNoticesUtils } from 'src/utilities/planNotices'; -import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants'; import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants'; +import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants'; import { getDCSpecificPriceByType } from 'src/utilities/pricing/dynamicPricing'; import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2'; @@ -64,8 +73,6 @@ import type { import type { Region } from '@linode/api-v4/lib/regions'; import type { APIError } from '@linode/api-v4/lib/types'; import type { ExtendedIP } from 'src/utilities/ipUtils'; -import { getRestrictedResourceText } from 'src/features/Account/utils'; -import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; export const CreateCluster = () => { const { classes } = useStyles(); diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx index 10e8f126545..7c246ea4fa6 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx @@ -1,9 +1,8 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useIsAcceleratedPlansEnabled } from 'src/features/components/PlansPanel/utils'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index 192065229a0..f396a672c64 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -1,10 +1,9 @@ -import { Box, CircleProgress, Stack } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation, useParams } from 'react-router-dom'; 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'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index bfd8ec7bc4c..08ed9a06739 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -1,10 +1,16 @@ -import { Button, CircleProgress, Select, Stack, Typography } from '@linode/ui'; +import { + Button, + CircleProgress, + ErrorState, + Select, + Stack, + Typography, +} from '@linode/ui'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormLabel } from 'src/components/FormLabel'; import { useDefaultExpandedNodePools } from 'src/hooks/useDefaultExpandedNodePools'; import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index 856aaba15bd..424d1b803a7 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -1,4 +1,4 @@ -import { Box, TooltipIcon, Typography } from '@linode/ui'; +import { Box, ErrorState, TooltipIcon, Typography } from '@linode/ui'; import { DateTime, Interval } from 'luxon'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; @@ -8,7 +8,6 @@ import Lock from 'src/assets/icons/lock.svg'; import Unlock from 'src/assets/icons/unlock.svg'; import { DISK_ENCRYPTION_NODE_POOL_GUIDANCE_COPY } from 'src/components/Encryption/constants'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import OrderBy from 'src/components/OrderBy'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx index 57965ab432b..fe06d3db8fc 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx @@ -1,4 +1,4 @@ -import { CircleProgress, Typography } from '@linode/ui'; +import { CircleProgress, ErrorState, Typography } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; @@ -10,7 +10,6 @@ import { DISK_ENCRYPTION_UPDATE_PROTECT_CLUSTERS_COPY, } from 'src/components/Encryption/constants'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -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'; 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 81b24b4f5f6..2963758379c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx @@ -1,11 +1,9 @@ -import { Box, CircleProgress, Stack } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, Stack } 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 { ErrorState } from 'src/components/ErrorState/ErrorState'; - import { getGeneratedLinodeLabel } from '../../utilities'; import { getDefaultUDFData } from '../StackScripts/UserDefinedFields/utilities'; import { AppSection } from './AppSection'; 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 7bcccf8ef50..18666d0dfcc 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx @@ -1,7 +1,6 @@ -import { CircleProgress, Dialog } from '@linode/ui'; +import { CircleProgress, Dialog, ErrorState } from '@linode/ui'; import React from 'react'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { StackScript } from 'src/components/StackScript/StackScript'; import { useStackScriptQuery } from 'src/queries/stackscripts'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx index 821031a2fdc..92abe952baa 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx @@ -1,10 +1,15 @@ -import { Button, CircleProgress, Paper, Typography } from '@linode/ui'; +import { + Button, + CircleProgress, + ErrorState, + Paper, + Typography, +} 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 { ErrorState } from 'src/components/ErrorState/ErrorState'; 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 c3bd1a641c9..9ed24ffaf45 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -5,6 +5,7 @@ import { CircleProgress, Dialog, Divider, + ErrorState, FormControl, FormControlLabel, FormHelperText, @@ -24,7 +25,6 @@ import { equals, repeat } from 'ramda'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; import { DeviceSelection } from 'src/features/Linodes/LinodesDetail/LinodeRescue/DeviceSelection'; @@ -1240,7 +1240,7 @@ export const unrecommendedConfigNoticeSelector = ({ values, }: { _interface: ExtendedInterface; - primaryInterfaceIndex: number | null; + primaryInterfaceIndex: null | number; thisIndex: number; values: EditableFields; }): JSX.Element | null => { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx index 868e6152c4c..acfbd875151 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx @@ -2,6 +2,7 @@ import { Box, Button, CircleProgress, + ErrorState, Paper, Stack, Typography, @@ -10,7 +11,6 @@ import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import OrderBy from 'src/components/OrderBy'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { Table } from 'src/components/Table'; 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 f13b19b10ba..9827ab2c394 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx @@ -1,4 +1,4 @@ -import { Box, CircleProgress, Typography } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, Typography } from '@linode/ui'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; import { IconButton } from '@mui/material'; @@ -8,7 +8,6 @@ import * as React from 'react'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { convertNetworkToUnit, generateNetworkUnits, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx index b2a5a8d4051..3b27134a56d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx @@ -1,11 +1,10 @@ -import { Button, Dialog, Notice, Paper, clamp } from '@linode/ui'; +import { Button, Dialog, ErrorState, Notice, Paper, clamp } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import { assoc, equals } from 'ramda'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { usePrevious } from 'src/hooks/usePrevious'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useAllLinodeDisksQuery } from 'src/queries/linodes/disks'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx index 250858ed7e2..2b2e8274678 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx @@ -1,4 +1,4 @@ -import { Autocomplete, Paper, Stack, Typography } from '@linode/ui'; +import { Autocomplete, ErrorState, Paper, Stack, Typography } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { DateTime } from 'luxon'; @@ -7,7 +7,6 @@ import { useParams } from 'react-router-dom'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { STATS_NOT_READY_API_MESSAGE, STATS_NOT_READY_MESSAGE, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx index 645a7018fc6..a25ff842c6e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx @@ -1,4 +1,4 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -10,7 +10,6 @@ import { useRouteMatch, } from 'react-router-dom'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; import { getQueryParamsFromQueryString } from 'src/utilities/queryParams'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx index d1c6eb1da15..a97afe3a4c7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx @@ -1,8 +1,7 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { LinodeEntityDetail } from 'src/features/Linodes/LinodeEntityDetail'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx index 7a91fdb9c66..03cc70cbb5f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx @@ -1,4 +1,4 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { @@ -10,7 +10,6 @@ import { import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; 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/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx index 606fcc9a53f..cd64250f634 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx @@ -1,9 +1,8 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import * as React from 'react'; import { Link, withRouter } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { MaintenanceBanner } from 'src/components/MaintenanceBanner/MaintenanceBanner'; import OrderBy from 'src/components/OrderBy'; diff --git a/packages/manager/src/features/Lish/Glish.tsx b/packages/manager/src/features/Lish/Glish.tsx index b18a34d5a46..8e95596efd9 100644 --- a/packages/manager/src/features/Lish/Glish.tsx +++ b/packages/manager/src/features/Lish/Glish.tsx @@ -1,10 +1,8 @@ /* eslint-disable no-unused-expressions */ -import { Box, CircleProgress } from '@linode/ui'; +import { Box, CircleProgress, ErrorState } from '@linode/ui'; import * as React from 'react'; import { VncScreen } from 'react-vnc'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; - import type { LinodeLishData } from '@linode/api-v4/lib/linodes'; import type { Linode } from '@linode/api-v4/lib/linodes'; import type { VncScreenHandle } from 'react-vnc'; diff --git a/packages/manager/src/features/Lish/Lish.tsx b/packages/manager/src/features/Lish/Lish.tsx index f935de8126a..30b6fe4afec 100644 --- a/packages/manager/src/features/Lish/Lish.tsx +++ b/packages/manager/src/features/Lish/Lish.tsx @@ -1,9 +1,8 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; import { TabPanels } from 'src/components/Tabs/TabPanels'; diff --git a/packages/manager/src/features/Lish/Weblish.tsx b/packages/manager/src/features/Lish/Weblish.tsx index b1c40220f4d..bdad1037915 100644 --- a/packages/manager/src/features/Lish/Weblish.tsx +++ b/packages/manager/src/features/Lish/Weblish.tsx @@ -1,9 +1,8 @@ /* eslint-disable scanjs-rules/call_addEventListener */ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import { Terminal } from '@xterm/xterm'; import * as React from 'react'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { ParsePotentialLishErrorString, RetryLimiter, 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 d0626888f48..d687ec4ca25 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx @@ -1,8 +1,7 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import * as React from 'react'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { useGraphs } from '../OverviewGraphs/useGraphs'; 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 818140d8389..8705afc4f95 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx @@ -1,8 +1,7 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { diff --git a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx index eb4dbb10690..d745895f536 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx @@ -1,8 +1,7 @@ -import { CircleProgress, Notice, Paper } from '@linode/ui'; +import { CircleProgress, ErrorState, Notice, Paper } from '@linode/ui'; import * as React from 'react'; import { compose } from 'recompose'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx index 35d7daef317..b478889a05b 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx @@ -1,13 +1,13 @@ import { Box, CircleProgress, + ErrorState, Paper, StyledLinkButton, Typography, } from '@linode/ui'; import * as React from 'react'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx index b90453a8c9f..d05d48e832b 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx @@ -1,9 +1,8 @@ -import { Box, CircleProgress, Typography } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, Typography } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { convertNetworkToUnit, diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx index 9bad1f8d7fe..462e3422f50 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx @@ -1,8 +1,7 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useAllManagedIssuesQuery, useAllManagedMonitorsQuery, diff --git a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.tsx b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.tsx index 3883f87398f..50ff418b53d 100644 --- a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.tsx @@ -1,10 +1,9 @@ -import { Button, Stack, Typography } from '@linode/ui'; +import { Button, ErrorState, Stack, Typography } from '@linode/ui'; import { useMediaQuery } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import copy from 'copy-to-clipboard'; import * as React from 'react'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import { MaskableTextAreaCopy } from 'src/components/MaskableText/MaskableTextArea'; import { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx index 840a68aab4d..f11263c1e7c 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx @@ -1,4 +1,4 @@ -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 { @@ -8,7 +8,6 @@ import { useParams, } 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 { TabLinkList } from 'src/components/Tabs/TabLinkList'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index a86fd0f503e..bbf67885966 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -1,4 +1,4 @@ -import { Box, CircleProgress, Paper, Typography } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, Paper, Typography } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { useParams } from 'react-router-dom'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { formatBitsPerSecond } from 'src/features/Longview/shared/utilities'; import { useNodeBalancerQuery, diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx index 074206b54d4..0434c052230 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx @@ -1,10 +1,9 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; 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'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index 5679a5d83b2..9faff798993 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -1,6 +1,7 @@ import { Button, CircleProgress, + ErrorState, Notice, Paper, TextField, @@ -14,7 +15,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import { useBucketSSLDeleteMutation, diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index 59d4421cc4a..279435bc522 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -1,10 +1,9 @@ -import { CircleProgress, Notice, Typography } from '@linode/ui'; +import { CircleProgress, ErrorState, Notice, Typography } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index 84e3710c19e..813901ab4a2 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -1,10 +1,9 @@ -import { CircleProgress, Notice, Typography } from '@linode/ui'; +import { CircleProgress, ErrorState, Notice, Typography } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx index 8c222d02f25..64745eddb05 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx @@ -1,10 +1,9 @@ import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4'; -import { CircleProgress, Notice } from '@linode/ui'; +import { CircleProgress, ErrorState, Notice } from '@linode/ui'; import { useParams } from '@tanstack/react-router'; import * as React from 'react'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { getRestrictedResourceText } from 'src/features/Account/utils'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx index d1433dcd7e8..ba42f4e3e79 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx @@ -1,10 +1,9 @@ -import { Button, Stack } from '@linode/ui'; +import { Button, ErrorState, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2/Grid2'; import { useNavigate, useParams, useSearch } from '@tanstack/react-router'; import * as React from 'react'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { hasPlacementGroupReachedCapacity } from 'src/features/PlacementGroups/utils'; import { useDialogData } from 'src/hooks/useDialogData'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx index 650d0173211..8d2dceafb64 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx @@ -1,4 +1,4 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import { useLocation, @@ -9,7 +9,6 @@ import { import * as React from 'react'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -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'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx index ba06f0d13f5..4712d651023 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx @@ -1,11 +1,16 @@ -import { CircleProgress, Divider, Paper, Typography } from '@linode/ui'; +import { + CircleProgress, + Divider, + ErrorState, + Paper, + Typography, +} 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 { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; import { useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index 932175eda30..1617115bcdb 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -1,11 +1,10 @@ -import { Button, CircleProgress, Notice } from '@linode/ui'; +import { Button, CircleProgress, ErrorState, Notice } from '@linode/ui'; import * as React from 'react'; import { withRouter } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; import { compose } from 'recompose'; import ComputeIcon from 'src/assets/icons/entityIcons/compute.svg'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Table } from 'src/components/Table'; import { withProfile } from 'src/containers/profile.container'; import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; diff --git a/packages/manager/src/features/StackScripts/StackScriptEdit.tsx b/packages/manager/src/features/StackScripts/StackScriptEdit.tsx index 50fa63db0dc..b43bb757b4d 100644 --- a/packages/manager/src/features/StackScripts/StackScriptEdit.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptEdit.tsx @@ -1,5 +1,12 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Button, CircleProgress, Notice, Paper, Stack } from '@linode/ui'; +import { + Button, + CircleProgress, + ErrorState, + Notice, + Paper, + Stack, +} from '@linode/ui'; import { stackScriptSchema } from '@linode/validation'; import { useSnackbar } from 'notistack'; import React, { useState } from 'react'; @@ -8,7 +15,6 @@ import { useHistory, useParams } from 'react-router-dom'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { useGrants, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx index 36d677d782c..49cb096b669 100644 --- a/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptLanding/StackScriptLandingTable.tsx @@ -1,11 +1,10 @@ import { getAPIFilterFromQuery } from '@linode/search'; -import { CircleProgress, Stack, TooltipIcon } from '@linode/ui'; +import { CircleProgress, ErrorState, Stack, TooltipIcon } from '@linode/ui'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx b/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx index bffe9dd71c8..f5a53056de2 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx @@ -1,9 +1,8 @@ -import { CircleProgress, Paper } from '@linode/ui'; +import { CircleProgress, ErrorState, Paper } from '@linode/ui'; import React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { StackScript } from 'src/components/StackScript/StackScript'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx index 0eaea7acc97..272b0afded5 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx @@ -1,4 +1,4 @@ -import { CircleProgress, Stack } from '@linode/ui'; +import { CircleProgress, ErrorState, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -8,7 +8,6 @@ import { useHistory, useLocation, useParams } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { useProfile } from 'src/queries/profile/profile'; import { diff --git a/packages/manager/src/features/Users/UserDetail.tsx b/packages/manager/src/features/Users/UserDetail.tsx index 795cd77f413..5820263875e 100644 --- a/packages/manager/src/features/Users/UserDetail.tsx +++ b/packages/manager/src/features/Users/UserDetail.tsx @@ -1,10 +1,9 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } 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 { 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'; diff --git a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx index c7a820cd90a..e09968c19ec 100644 --- a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx +++ b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx @@ -1,9 +1,8 @@ -import { CircleProgress, Stack } from '@linode/ui'; +import { CircleProgress, ErrorState, Stack } from '@linode/ui'; import React from 'react'; import { useParams } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; import { useAccountUser } from 'src/queries/account/users'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx index 3f886c26fda..13c07762b0c 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx @@ -1,4 +1,4 @@ -import { Box, CircleProgress, StyledLinkButton } from '@linode/ui'; +import { Box, CircleProgress, ErrorState, StyledLinkButton } from '@linode/ui'; import { Typography } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; @@ -7,7 +7,6 @@ import { useParams } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { VPC_DOCS_LINK, VPC_LABEL } from 'src/features/VPCs/constants'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx index 70fa4e655d1..b04cb1b4ca8 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx @@ -1,10 +1,9 @@ -import { Box, Button, CircleProgress } from '@linode/ui'; +import { Box, Button, CircleProgress, ErrorState } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx index 1e0291d288a..121ca8d3e56 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx @@ -1,9 +1,8 @@ -import { CircleProgress } from '@linode/ui'; +import { CircleProgress, ErrorState } from '@linode/ui'; 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 { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; diff --git a/packages/manager/src/features/Volumes/VolumesLanding.tsx b/packages/manager/src/features/Volumes/VolumesLanding.tsx index d4197689709..7ee358eb4da 100644 --- a/packages/manager/src/features/Volumes/VolumesLanding.tsx +++ b/packages/manager/src/features/Volumes/VolumesLanding.tsx @@ -1,5 +1,6 @@ import { CircleProgress, + ErrorState, IconButton, InputAdornment, TextField, @@ -11,7 +12,6 @@ import { debounce } from 'throttle-debounce'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; diff --git a/packages/ui/src/assets/icons/pending.svg b/packages/ui/src/assets/icons/pending.svg new file mode 100644 index 00000000000..03ee9107408 --- /dev/null +++ b/packages/ui/src/assets/icons/pending.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/ui/src/components/ErrorState/ErrorState.stories.tsx b/packages/ui/src/components/ErrorState/ErrorState.stories.tsx new file mode 100644 index 00000000000..b39d26e4fea --- /dev/null +++ b/packages/ui/src/components/ErrorState/ErrorState.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import { ErrorState } from './ErrorState'; + +import type { ErrorStateProps } from './ErrorState'; +import type { Meta, StoryObj } from '@storybook/react'; + +export const Default: StoryObj = { + args: { + compact: false, + errorText: 'An error has occurred.', + }, + render: (args) => { + return ; + }, +}; + +const meta: Meta = { + component: ErrorState, + title: 'Components/Error State', +}; + +export default meta; diff --git a/packages/ui/src/components/ErrorState/ErrorState.test.tsx b/packages/ui/src/components/ErrorState/ErrorState.test.tsx new file mode 100644 index 00000000000..1a6d2fb73d3 --- /dev/null +++ b/packages/ui/src/components/ErrorState/ErrorState.test.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { expect } from 'vitest'; + +import PendingIcon from 'src/assets/icons/pending.svg'; + +import { renderWithTheme } from '../../utilities/testHelpers'; +import { ErrorState } from './ErrorState'; + +const errorText = 'Some error text here'; +const props = { + CustomIcon: PendingIcon, + errorText, +}; + +describe('Error State', () => { + it('renders the ErrorState with specified text properly', () => { + const screen = renderWithTheme(); + expect(screen.getByText(errorText)).toBeVisible(); + expect(screen.getByTestId('ErrorOutlineIcon')).toBeVisible(); + }); + + it('renders the ErrorState with a custom icon image', () => { + const screen = renderWithTheme(); + expect(screen.getByText(errorText)).toBeVisible(); + expect(screen.queryByTestId('ErrorOutlineIcon')).not.toBeInTheDocument(); + + const icon = screen.container.querySelector('[data-qa-error-icon="true"]'); + expect(icon).toBeVisible(); + expect(icon?.getAttribute('style')).toBe(null); + }); + + it('renders the ErrorState with a custom icon and custom icon styling', () => { + const screen = renderWithTheme( + + ); + + const icon = screen.container.querySelector('[data-qa-error-icon="true"]'); + expect(icon).toBeVisible(); + expect(icon?.getAttribute('style')).toBe('height: 72px; width: 72px;'); + }); +}); diff --git a/packages/ui/src/components/ErrorState/ErrorState.tsx b/packages/ui/src/components/ErrorState/ErrorState.tsx new file mode 100644 index 00000000000..f6671801d80 --- /dev/null +++ b/packages/ui/src/components/ErrorState/ErrorState.tsx @@ -0,0 +1,110 @@ +import ErrorOutline from '@mui/icons-material/ErrorOutline'; +import { styled, useTheme } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; +import * as React from 'react'; + +import { Button } from '../Button'; +import { Typography } from '../Typography'; + +import type { SvgIconProps } from '../SvgIcon'; +import type { SxProps, Theme } from '@mui/material/styles'; + +export interface ActionButtonProps { + onClick: () => void; + text: string; +} + +export interface ErrorStateProps { + /** + * An SVG to display in place of the error icon. + */ + CustomIcon?: React.ComponentType; + /** + * CSS properties to apply to the custom icon. + */ + CustomIconStyles?: React.CSSProperties; + actionButtonProps?: ActionButtonProps; + + /** + * Reduces the padding on the root element. + */ + compact?: boolean; + errorText: JSX.Element | string; + + /** + * Styles applied to the error text + */ + typographySx?: SxProps; +} + +export const ErrorState = (props: ErrorStateProps) => { + const { CustomIcon, actionButtonProps, compact, typographySx } = props; + const theme = useTheme(); + + const sxIcon = { + color: theme.color.red, + height: 50, + marginBottom: theme.spacing(2), + width: 50, + }; + + return ( + + + + {CustomIcon ? ( + + ) : ( + + )} + + {typeof props.errorText === 'string' ? ( + + {props.errorText} + + ) : ( +
{props.errorText}
+ )} + {actionButtonProps ? ( +
+ +
+ ) : null} + + + ); +}; + +const StyledIconContainer = styled('div')({ + textAlign: 'center', +}); + +const ErrorStateRoot = styled(Grid, { + label: 'ErrorStateRoot', + shouldForwardProp: (prop) => prop !== 'compact', +})>(({ theme, ...props }) => ({ + marginLeft: 0, + padding: props.compact ? theme.spacing(5) : theme.spacing(10), + width: '100%', +})); diff --git a/packages/ui/src/components/ErrorState/index.ts b/packages/ui/src/components/ErrorState/index.ts new file mode 100644 index 00000000000..c8a7981cdb2 --- /dev/null +++ b/packages/ui/src/components/ErrorState/index.ts @@ -0,0 +1 @@ +export * from './ErrorState'; diff --git a/packages/ui/src/components/SvgIcon/SvgIcon.ts b/packages/ui/src/components/SvgIcon/SvgIcon.ts new file mode 100644 index 00000000000..7b9e37ec561 --- /dev/null +++ b/packages/ui/src/components/SvgIcon/SvgIcon.ts @@ -0,0 +1,2 @@ +export { default as SvgIcon } from '@mui/material/SvgIcon'; +export type { SvgIconProps } from '@mui/material/SvgIcon'; diff --git a/packages/ui/src/components/SvgIcon/index.ts b/packages/ui/src/components/SvgIcon/index.ts new file mode 100644 index 00000000000..e1243a0d6ad --- /dev/null +++ b/packages/ui/src/components/SvgIcon/index.ts @@ -0,0 +1 @@ +export * from './SvgIcon'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 628ccb2993c..36189fe6711 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -11,6 +11,7 @@ export * from './Dialog'; export * from './DialogTitle'; export * from './Divider'; export * from './EditableText'; +export * from './ErrorState'; export * from './FormControl'; export * from './FormControlLabel'; export * from './FormHelperText'; @@ -27,6 +28,7 @@ export * from './Radio'; export * from './RadioGroup'; export * from './Select/Select'; export * from './Stack'; +export * from './SvgIcon'; export * from './TextField'; export * from './Toggle'; export * from './Tooltip'; From ed2dbcb400639f3490ed407acb9deb1add32a45b Mon Sep 17 00:00:00 2001 From: hrao Date: Tue, 25 Feb 2025 13:18:24 +0530 Subject: [PATCH 2/6] Added changeset: Migrate ErrorState to ui package --- packages/ui/.changeset/pr-11718-added-1740469704338.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/ui/.changeset/pr-11718-added-1740469704338.md diff --git a/packages/ui/.changeset/pr-11718-added-1740469704338.md b/packages/ui/.changeset/pr-11718-added-1740469704338.md new file mode 100644 index 00000000000..c49bf06cd04 --- /dev/null +++ b/packages/ui/.changeset/pr-11718-added-1740469704338.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Migrate ErrorState to ui package ([#11718](https://github.com/linode/manager/pull/11718)) From 85df0e3be147d5a3f4add1772276f7baccda7635 Mon Sep 17 00:00:00 2001 From: hrao Date: Tue, 25 Feb 2025 18:12:13 +0530 Subject: [PATCH 3/6] svg import fix --- packages/ui/src/assets/icons/index.ts | 1 + packages/ui/src/components/ErrorState/ErrorState.test.tsx | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/assets/icons/index.ts b/packages/ui/src/assets/icons/index.ts index 7aee73910b5..99bf47e0f81 100644 --- a/packages/ui/src/assets/icons/index.ts +++ b/packages/ui/src/assets/icons/index.ts @@ -4,6 +4,7 @@ export { default as CheckboxIcon } from './checkbox.svg'; export { default as CheckboxCheckedIcon } from './checkboxChecked.svg'; export { default as ChevronDownIcon } from './chevron-down.svg'; export { default as InfoIcon } from './info.svg'; +export { default as PendingIcon } from './pending.svg'; export { default as PlusSignIcon } from './plusSign.svg'; export { default as RadioIcon } from './radio.svg'; export { default as RadioIconRadioed } from './radioRadioed.svg'; diff --git a/packages/ui/src/components/ErrorState/ErrorState.test.tsx b/packages/ui/src/components/ErrorState/ErrorState.test.tsx index 1a6d2fb73d3..8420087cd8b 100644 --- a/packages/ui/src/components/ErrorState/ErrorState.test.tsx +++ b/packages/ui/src/components/ErrorState/ErrorState.test.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; -import { expect } from 'vitest'; - -import PendingIcon from 'src/assets/icons/pending.svg'; +import { describe, expect, it } from 'vitest'; +import { PendingIcon } from '../../assets'; import { renderWithTheme } from '../../utilities/testHelpers'; import { ErrorState } from './ErrorState'; From dc432b793f5a66064afc5063fd8a5123a49ce870 Mon Sep 17 00:00:00 2001 From: hrao Date: Tue, 4 Mar 2025 20:08:01 +0530 Subject: [PATCH 4/6] Removed ErrorState from manager --- .../ErrorState/ErrorState.stories.tsx | 23 ---- .../components/ErrorState/ErrorState.test.tsx | 40 ------- .../src/components/ErrorState/ErrorState.tsx | 108 ------------------ 3 files changed, 171 deletions(-) delete mode 100644 packages/manager/src/components/ErrorState/ErrorState.stories.tsx delete mode 100644 packages/manager/src/components/ErrorState/ErrorState.test.tsx delete mode 100644 packages/manager/src/components/ErrorState/ErrorState.tsx diff --git a/packages/manager/src/components/ErrorState/ErrorState.stories.tsx b/packages/manager/src/components/ErrorState/ErrorState.stories.tsx deleted file mode 100644 index b39d26e4fea..00000000000 --- a/packages/manager/src/components/ErrorState/ErrorState.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -import { ErrorState } from './ErrorState'; - -import type { ErrorStateProps } from './ErrorState'; -import type { Meta, StoryObj } from '@storybook/react'; - -export const Default: StoryObj = { - args: { - compact: false, - errorText: 'An error has occurred.', - }, - render: (args) => { - return ; - }, -}; - -const meta: Meta = { - component: ErrorState, - title: 'Components/Error State', -}; - -export default meta; diff --git a/packages/manager/src/components/ErrorState/ErrorState.test.tsx b/packages/manager/src/components/ErrorState/ErrorState.test.tsx deleted file mode 100644 index 4163770435f..00000000000 --- a/packages/manager/src/components/ErrorState/ErrorState.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; - -import PendingIcon from 'src/assets/icons/pending.svg'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - -import { ErrorState } from './ErrorState'; - -const errorText = 'Some error text here'; -const props = { - CustomIcon: PendingIcon, - errorText, -}; - -describe('Error State', () => { - it('renders the ErrorState with specified text properly', () => { - const screen = renderWithTheme(); - expect(screen.getByText(errorText)).toBeVisible(); - expect(screen.getByTestId('ErrorOutlineIcon')).toBeVisible(); - }); - - it('renders the ErrorState with a custom icon image', () => { - const screen = renderWithTheme(); - expect(screen.getByText(errorText)).toBeVisible(); - expect(screen.queryByTestId('ErrorOutlineIcon')).not.toBeInTheDocument(); - - const icon = screen.container.querySelector('[data-qa-error-icon="true"]'); - expect(icon).toBeVisible(); - expect(icon?.getAttribute('style')).toBe(null); - }); - - it('renders the ErrorState with a custom icon and custom icon styling', () => { - const screen = renderWithTheme( - - ); - - const icon = screen.container.querySelector('[data-qa-error-icon="true"]'); - expect(icon).toBeVisible(); - expect(icon?.getAttribute('style')).toBe('height: 72px; width: 72px;'); - }); -}); diff --git a/packages/manager/src/components/ErrorState/ErrorState.tsx b/packages/manager/src/components/ErrorState/ErrorState.tsx deleted file mode 100644 index 9d241cc0f0f..00000000000 --- a/packages/manager/src/components/ErrorState/ErrorState.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button, Typography } from '@linode/ui'; -import ErrorOutline from '@mui/icons-material/ErrorOutline'; -import { styled, useTheme } from '@mui/material/styles'; -import Grid from '@mui/material/Grid2'; -import * as React from 'react'; - -import type { SvgIconProps } from '../SvgIcon'; -import type { SxProps, Theme } from '@mui/material/styles'; - -export interface ActionButtonProps { - onClick: () => void; - text: string; -} - -export interface ErrorStateProps { - /** - * An SVG to display in place of the error icon. - */ - CustomIcon?: React.ComponentType; - /** - * CSS properties to apply to the custom icon. - */ - CustomIconStyles?: React.CSSProperties; - actionButtonProps?: ActionButtonProps; - - /** - * Reduces the padding on the root element. - */ - compact?: boolean; - errorText: JSX.Element | string; - - /** - * Styles applied to the error text - */ - typographySx?: SxProps; -} - -export const ErrorState = (props: ErrorStateProps) => { - const { CustomIcon, actionButtonProps, compact, typographySx } = props; - const theme = useTheme(); - - const sxIcon = { - color: theme.color.red, - height: 50, - marginBottom: theme.spacing(2), - width: 50, - }; - - return ( - - - - {CustomIcon ? ( - - ) : ( - - )} - - {typeof props.errorText === 'string' ? ( - - {props.errorText} - - ) : ( -
{props.errorText}
- )} - {actionButtonProps ? ( -
- -
- ) : null} - - - ); -}; - -const StyledIconContainer = styled('div')({ - textAlign: 'center', -}); - -const ErrorStateRoot = styled(Grid, { - label: 'ErrorStateRoot', - shouldForwardProp: (prop) => prop !== 'compact', -})>(({ theme, ...props }) => ({ - marginLeft: 0, - padding: props.compact ? theme.spacing(5) : theme.spacing(10), - width: '100%', -})); From c89d07c650c62df6c58d51ac2c83968e82cacc52 Mon Sep 17 00:00:00 2001 From: hrao Date: Tue, 4 Mar 2025 20:09:53 +0530 Subject: [PATCH 5/6] Added changeset: Migrate ErrorState to ui package --- .../manager/.changeset/pr-11718-removed-1741099193168.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11718-removed-1741099193168.md diff --git a/packages/manager/.changeset/pr-11718-removed-1741099193168.md b/packages/manager/.changeset/pr-11718-removed-1741099193168.md new file mode 100644 index 00000000000..3c5bb8e8ab4 --- /dev/null +++ b/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)) From 50c669afc47c15fe41042583597a6ffc604a7516 Mon Sep 17 00:00:00 2001 From: hrao Date: Tue, 4 Mar 2025 20:49:10 +0530 Subject: [PATCH 6/6] fixed imports --- .../manager/src/features/Account/Quotas/QuotasTable.tsx | 9 +++++++-- .../CloudPulse/Alerts/EditAlert/EditAlertLanding.tsx | 3 +-- .../features/Images/ImagesLanding/ImagesLanding.test.tsx | 8 +++++++- .../LinodesDetail/LinodeNetworking/LinodeNetworking.tsx | 3 +-- 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/manager/src/features/Account/Quotas/QuotasTable.tsx b/packages/manager/src/features/Account/Quotas/QuotasTable.tsx index 49552c2e75b..4065d78ddab 100644 --- a/packages/manager/src/features/Account/Quotas/QuotasTable.tsx +++ b/packages/manager/src/features/Account/Quotas/QuotasTable.tsx @@ -1,4 +1,10 @@ -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'; @@ -6,7 +12,6 @@ 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'; diff --git a/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertLanding.tsx b/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertLanding.tsx index b3f925903a8..504f9c66c44 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertLanding.tsx +++ b/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'; diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx index eb69ff694ff..14e7381047f 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx @@ -118,7 +118,13 @@ describe('Images Landing Table', () => { }) ); - const { getByText } = await renderWithThemeAndRouter(); + const { getByText, queryByTestId } = await renderWithThemeAndRouter( + + ); + const loadingElement = queryByTestId(loadingTestId); + if (loadingElement) { + await waitForElementToBeRemoved(loadingElement); + } expect(getByText('No Recovery Images to display.')).toBeInTheDocument(); }); diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx index 6b75168df78..dcaed36bcd8 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworking.tsx @@ -1,8 +1,7 @@ -import { CircleProgress, Stack } from '@linode/ui'; +import { CircleProgress, ErrorState, Stack } from '@linode/ui'; import React from 'react'; import { useParams } from 'react-router-dom'; -import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';